YellowPencil is a visual style editor for WordPress. It bills itself as an easy way to quickly customize any theme and page with no coding required.

We've recently seen a couple posts and reviews of YellowPencil detailing how they use it with the Elementor page builder. That's interesting, because Elementor also bills itself as an easy way to quickly build and customize WordPress websites with no coding required.

From these quick descriptions, the two tools sound pretty similar. We wanted to take a look at Elementor and YellowPencil, install both of them on a development site, and see if using them together is a good idea.

Basically, does YellowPencil offer additional features when compared to Elementor, justifying its $26/yr license price?

What YellowPencil Brings To The Table

YellowPencil is a plugin that offers website creators and designers a collection of workflow and utility tools that aid in the creation process of a WordPress website. There are tons of features, but let's cover the most relevant ones to an Elementor website build.

First, loading the YellowPencil Interface presents you with a collection of tools. Immediately, you have access to a quick and easy way to change the styling and structure of any element without even needing to use Custom CSS. This works on all areas of the website, from the header to the body to the footer, regardless of if it was built with Elementor.

Essentially, you point and click on the element that you would like to edit, and then use the visual styling to change the structure, colors, font, animation, shadow, and more.

Just like Elementor, it gives you access to advanced CSS features in a graphical user interface, meaning that you don't need to know the actual code behind the styling rules.

The tool is point and click, simply select the element that you want to change, and begin applying the styling to it. When applying all styling through the graphical user interface, the tool is actually outputing real CSS code, which you can then access from the built in CSS editor. In our opinion, the CSS editor that ships with YellowPencil is one of the best in the industry and really differentiates this from competing products.

In the editor, you can apply CSS to the single page, the company that applies to the range of pages, and globally.

Actually writing the CSS is very much like VS Code or Brackets -- you have automatic suggestions, and keyboard commands. This is helpful if you need to write a lot of CSS code at once.

The responsive mode for YellowPencil allows you to apply specific CSS styling rules to Be active on different screen sizes. It comes with the basic desktop, tablet, and mobile screen sizes, but you can also add as many custom breakpoints as you want.

This is really helpful because there are hundreds of screen sizes out there, and if you know that your users are accessing the site from a specific screen size that a default breakpoint doesn't work for, adding a custom one is quick and easy.

Again, all the styling rules are outputted as CSS making the editing process incredibly quick and easy. This CSS shows in the CSS editor within YellowPencil, meaning you can finetune the code after using the graphical interface to generate the base version.

YellowPencil also comes with a collection of helpful utilities that make it easy to layout a website. First up is the measuring tool which allows you to measure the pixel distance between elements. You can also quickly view the width and height of individual divs, which is helpful when you're trying to space things out.

Next up is the wireframe tool which essentially reskins every div and component on your website in a somewhat transparent background. This allows you to view the size and spacing of each element on your website , and how it interacts with its container.

We can then access design information Regarding the structure of an element, typography of an element, Dom code, and even advanced information. This is similar to what you would find in Chrome or Firefox devtools, And it's helpful if you're looking for additional context on specific elements.

Finally, there is a robust animation manager included with YellowPencil that allows you to quickly apply an preview animations to individual elements. It comes in the form of a timeline like interface where you can visually preview and apply specific CSS animations to elements and sections.

What Elementor Brings To The Table

If you're reading this article, chances are you know what Elementor is, and if that's the case feel free to use the table of contents to skip to our thoughts on using YellowPencil and Elementor together.

If not, here's a brief overview of what Elementor brings to the table, which should help you compare and contrast both of these plugins.

First, you should understand that we are discussing Elementor Pro, which is much more of a whole site builder when compared to the free Elementor, which is only a page builder.

Elementor Pro allows you to build out the structure of individual pages, and templates that apply to ranges of pages and content, dynamically populate them with data, and then style them from within the editor. There's no need to know anything about code, as everything is done graphically, and changes are visible in real time.

The differences between Elementor and YellowPencil

As you gathered from the introductions of both of these plugins, there are many similarities and differences between Elementor and YellowPencil.

The core functionalities of each plugin Differ slightly. Elementor is for building the structure of pages and then Applying styling to that structure.

YellowPencil is only for advanced styling of existing structures.

If you can build and edit everything from within the Elementor interface, then the features are a bit redundant between the two plugins. However, if you find yourself consistently using custom CSS to style elements, or use many third party plugins that don't officially integrate with Elementor's builder, YellowPencil could be an invaluable way too apply custom styling to individual elements.

Of course, you could replace YellowPencil with a stylesheet and dev tools, but this isn't as efficient and will decrease the productivity of your workflow.

Is YellowPencil and Elementor A Good Idea?

With this article, the main question that we set out to answer is if using both of these plugins on one WordPress installation is redundant or genius. Basically, does YellowPencil offer the same features as Elementor, or does it extend your capabilities as a creator?

The answer is (as always), it really depends on your use case.

With Elementor, and Elementor Pro, you can build and edit pretty much any element of your website visually. At the same time, if you are a professional designer or power user, Elementor doesn't always offer ways to fine-tune specific aspects of a website, especially if you're using plugins that aren't officially compatible with Elementor.

If that's the case, or if you need to edit, manage, and add a lot of custom CSS to an Elementor website, YellowPencil may be a good option for you.

As you saw in our overview, you can use a visual interface to quickly generate custom CSS code for specific elements of a website. This can easily be applied to the individual page, template, or globally.

If you're an agency, designer, or website creator that uses a lot of custom CSS, YellowPencil is definitely a good option for you if you can afford to spend the $26 (keep in mind that there is a free version of this plugin but it doesn't offer as many features, and wasn't discussed in this article).

There is some feature overlap, but the core functionality of custom CSS generation, management, and addition to your website cannot be recreated in Elementor.

at the same time, if you use Elementor to build websites and don't frequently access custom CSS, YellowPencil offers a bunch of features that can be found in the global settings available to you in Elementor V3+.

Conclusion

To determine if YellowPencil and Elementor is a good idea for you, simply think about your usage of custom CSS. If you use it a lot and your workflow is negatively impacted because of this (as we said, Elementor's custom CSS works in many situations, but not one where there's a lot of custom CSS going around as it is difficult to manage), then YellowPencil will save you time and money.

Our agency uses YellowPencil in many of our websites built on the Elementor framework for our clients (but we also use CSSHero), as we make constant use of custom mobile break points, and CSS styling for third party plugins that don't have native integrations with Elementor. Because we use custom CSS, it's very easy to get unorganized if using the native custom CSS input field in Elementor.

YellowPencil makes it incredibly easy to write and manage this custom CSS from a central location , making our jobs a lot quicker and easier. At the same time, we don't use this on every website, especially if we want our clients to be able to make major edits themselves.

If you have any questions about using YellowPencil with Elementor, feel free to reach out in the comments, and if you found this article helpful, consider linking to it from your website or giving it a share on social media.