Menu Close

Tweak Your WordPress Theme Design with Yellow Pencil


If you are looking to customize your WordPress theme design the easy way then the Yellow Pencil WordPress plugin may be just the add-on you need for your site. This visual style editor will enable you to alter the appearance of your site, without having to touch a line of code.

Using Yellow Pencil will teach you the joy of web design, whilst creating a beautiful site to wow your visitors. Edit any element of your website, all on the front end, and in real time. The only limits to your site’s design will be your own imagination.

This in-depth guide to using the premium version of Yellow Pencil will cover its main features, including its point and click live CSS editing capabilities and its compatibility with any WordPress theme. We’ll then take a look at the user experience on offer, enabling you to get set up and designing in no time at all.

Who Is Yellow Pencil For?

Yellow Pencil Who

Whether you are looking for a faster way to customize your site, or you are unfamiliar with CSS, Yellow Pencil can help you. This plugin includes advanced tools and customization options, perfect for professionals looking to create new sites for clients.

However, the lack of coding needed, ease of use, intuitive interface, and detailed support documentation, means that even those with limited design experience can access this plugin. In short, if you want to customize the appearance of your WordPress website, Yellow Pencil is the visual style editor for you.

In short, if you want to customize the appearance of your WordPress website, Yellow Pencil is the visual style editor for you.

Key Features of Yellow Pencil

Yellow Pencil Features

Yellow Pencil is a truly impressive design tool. The features and tools available allow for full control over the appearance of your site. It can be used on any WordPress theme or plugin, and will enable you to create stylish and responsive web pages.

The Element Inspector allows you to select and customize every visual element on your WordPress website. Edit colors, backgrounds, borders and much more. All this is done in real time, on the front end of your site, so you can view the changes as you make them. Yellow Pencil will generate code in the background, so unless you want to, you won’t need to look at any code yourself. Other features include:

  • Drag and drop to reposition elements
  • Resize elements with the touch of your mouse
  • Choose from 600+ fonts, 300+ background patterns, 50+ animations and lots more
  • Unlimited colors available or select from Yellow Pencil’s modern color palettes
  • Use a live CSS editor

Extensive documentation and support is also available to help you get the most out of this WordPress visual style editor.

So, now we know what Yellow Pencil has to offer. But how do we get started, and is the user experience as impressive as the features it provides?

How to Install Yellow Pencil

Yellow Pencil is extremely quick and easy to install. Once you have purchased the plugin from CodeCanyon (or purchased a premium theme like New York that includes the plugin for free), download the “Installable WordPress file only” from your Envato downloads page ( or you can use the free version available on

Then open your WordPress dashboard. Select ‘Plugins’ > ‘Add New’.

Yellow Pencil Add New

On the Add Plugins page, click ‘Upload Plugin’ > ‘Choose File’.

Yellow Pencil Upload

From where you downloaded it to, select ‘’. Click ‘Install Now’.

Yellow Pencil Install

Once the plugin has been installed, click on ‘Activate’. Enter the activation code you were given when you purchased the plugin. This will provide you with access to plugin updates as they are released.

After activation, the Yellow Page welcome page will appear on your dashboard. Under ‘Resources’ you will find the plugin’s documentation, tutorials, and other help and support you might need to get started.

Yellow Pencil Welcome

When you are ready, click ‘Let’s Start’. This will take you directly into editing mode.

Understanding the Yellow Pencil Interface

The Yellow Pencil interface is very clear and intuitive to use. The bar that runs down the left-hand side of the page displays the tools available.

Yellow Pencil Left Bar

The panel that hovers on the right side of the page is the Editor Panel. When no element on the page is selected, it will show the three customizing types that it is possible to edit in.

Yellow Pencil Editor Panel

When you click on an element on the page, the Editor Panel will change to contain the style properties.

Yellow Pencil Element Selected

A blue box will appear around a selected element, showing additional customization options.

Yellow Pencil Element Selected

Important Tools You Will Need

The tool bar, on the left hand, side displays numerous tools, but a few are immediately important to help you get started…

Yellow Pencil Toolbar Tools

  • Element Inspector – This allows you to select any element on the page to customize.
  • Undo and Redo – Try different designs on your page safe in the knowledge you can undo or redo your edits.
  • Fullscreen – Work in full screen, giving you a clear view of your customizations as you make them.

The Editor Panel incorporates three crucial buttons…

Yellow Pencil Editor Panel Buttons

  • Live Preview – Preview your changes without any of the Yellow Pencil interface on display.
  • Reset Changes – Don’t like your edits? Just reset the changes you’ve made.
  • Save – Once you’ve previewed your work and you’re happy with the results, just hit the save button.

Selecting a Customizing Type

Yellow Pencil Customizing Type

Before you select an element on your page and start editing it, you need to first choose a customizing type. These are displayed on the Editor Panel, when no element is selected. There are three types to choose from; Global Customize, Customize One Page, and Customize Templates.

Each of the types are relatively self explanatory. Selecting ‘Global Customize’ means that the changes you make will be applicable to every page of your site. If you pick ‘Customize One Page’, then all edits will affect only the page you are working on. ‘Customize Templates’ applies to the current post type, a good option if you want to configure all product or blog pages.

The customization type that you have chosen will be displayed at the top of the Editor Panel. Make sure you check that you are editing in the right type before saving your work.

What Can You Do with Yellow Pencil?

Once you have familiarized yourself with the interface, it’s time to get started. Below is a sample of some of the numerous customization tools and features that this plugin offers. These will help you on the way to producing a beautiful and professional website.

Change the Typography

Yellow Pencil Typography

Choosing a font that is appropriate for your website is an important task. Yellow Pencil provides variety of options to help you style your text in a way that fits with your website’s design and grabs your reader’s attention.

Click on a section of text you would like to edit and then select ‘Text’ from the Editor Panel. This will bring up the customization options for typography. Choose from 600+ font types, alter the size of the font, change the line height, control the spacing of letters and words, as well as lots more. You can also alter the color of your text by selecting from one of Yellow Pencil’s modern color palettes, or opt for your own color choice.

Add a Border

Yellow Pencil Border

Adding a border to certain items on a page can help highlight important information and create effective visuals. After selecting the image or text you want to add a border to, select ‘Border’ from the Editor Panel. There are four styles of

After selecting the image or text you want to add a border to, select ‘Border’ from the Editor Panel. There are four styles of border to choose from; solid, dotted, dashed or hidden. You can also alter the border width to make it more defined, and change the color.

An impressive feature is that you can customize each side of the border separately. This means that each of the four sides can be given a different color, style and thickness, resulting in a unique and eye-catching appearance.

Alter the Background

Yellow Pencil Background

A striking background can help make an element pop. Yellow Pencil allows you to alter the background of each and every element on your site.

To do so, click on the chosen item and select ‘Background’ from the Editor Panel.

Here you can change the background color, select from one of Yellow Pencils 300+ patterns or choose a CSS gradient. You also have the option of uploading your own custom images. Once you have decided on a background, you can adjust the background size, position and, if you have added an image, choose whether it is static or scrolls with the rest of the page.

Use Animations

Yellow Pencil Animation

Using animations is another great way to help your content make an impact. Under ‘Animation’ in the Editor Panel, you can add an animation effect to your chosen element.

Choose one of 50+ animations in the live animation manager, from zooming in, or fading out, to bouncing, spinning, and lots more. You can control the duration and delay, as well as running multiple animations simultaneously, if you so wish. This will give your site originality, as well as drawing attention to the important aspects of your page. You can also have a go at creating your own custom animations by selecting the Animation Generator on the toolbar.

Resize and Reposition any Element

Resizing and repositioning any element is very simple with Yellow Pencil.

To resize, click on an item directly so the blue highlighted box appears around it. Then simply drag the horizontal and vertical lines of the blue box to alter the size.

Yellow Pencil Resize

To reposition an element, click on it and then hold down your mouse button. Drag and drop it to the appropriate position on the page.

Yellow Pencil Dragon Drop

The downside of this drag and drop feature is that it can cause problems with viewing on mobiles. Use the Responsive Tool, found in the toolbar, to see how your web page will look on all screen sizes. You may need to alter your design accordingly.


Yellow Pencil Pricing

The Yellow Pencil WordPress plugin is available from CodeCanyon for $26. This includes 6 months support, but you have the option to pay an extra $7.88 to extend support to up to 12 months.

Final Thoughts

Yellow Pencil is a great tool to use if you want to customize your WordPress site’s appearance. The features and the ease of use provide you with everything that you need to create a custom WordPress website. For best results, make sure you have a clear vision of how you want your site to look.

Does Yellow Pencil have the features you need to personalize your WordPress website? Please share your thoughts below…

View Source
Posted in WordPress