How To Re-Design Your WordPress Site With YellowPencil

If you are planning to create a website and you do know how to use WordPress, then you don’t need to hire any developer for completing your website design. You can easily create a perfect design of your own. There are various WordPress themes, free and premium that you can use for your new website. If you have selected an ideal WordPress theme and you are thinking of making design tweaks, then you require a perfect tool to work with. Finding the best way to edit and create a unique website design is no longer difficult.

You will find plenty of options to make changes to the web elements, but you won’t find a tool to make complete design changes. You don’t need to worry about that specific problem anymore because we bring you the most powerful editor of all time. You can easily alter the design and make changes according to your requirements. Here, we will be explaining how you can use this specific plugin and how you can create a unique web design for your new website. Let’s have a look at some of the key features of this plugin before going into the detailed review.

Key Features of YellowPencil Visual Style Editor

Let’s throw a light on the key features this plugin can provide you. With the help of this YellowPencil plugin, you can customize any theme and plugin. When we say customize your theme, we meant literally you can change anything. You will be able to get more than 50 CSS properties and features with lifetime license and free updates.

It provides you a visual Drag & Drop editor that will help you build your website, and you can do live element resizing. You can use a gradient generator, animation generator, and animation manager. You can use all the responsive tools that will help you build an excellent website.

Overview Of YellowPencil Plugin

When you have downloaded this plugin and activated it, you can visit a specific page and start editing. The editing is very simple, and you won’t face any problems while editing your website. It gives you an excellent interface and if you have been using WordPress, then using this plugin is not at all difficult for you.

First of all, you will see 2 panels that you can use. You will see multiple editing options on the left and right side of the screen. On your right, you will see a panel where you can easily select the page that you wish to customize.

After selecting a specific page, you will also be able to see the customizing type. If you need to customize a single page or you want to make global changes, you can select the type from three different options. It will allow you to choose the right type of customization that you want to do.

Once you have selected the page that you want to edit, you can move to your left panel. There, you will be able to see multiple options including choosing an inspector. If you’re going to edit a single element, you can use the single inspector so you can make the changes to a single element.

Below the inspector, you will be able to see search icon that will help you find an element you are looking for. You can also open CSS editor that will help you write CSS codes and implement them immediately. You can also go into the responsive mode to make the changes in the responsive mode. If you want to go into the details and you want to create a proper design, then it will allow you to work on the layout without any hassle. You can use a wireframe to customize the complete design easily. By selecting a specific element, you can click on design information to get all the information you need for typography and size of the images. You can use the animation manager as well that will help you create animation for different elements.

Moreover, you can check the breadcrumbs on the lower part of the page, it will give you a clear idea of the element that you are editing and you can check out all the classes and sections.

Whichever element you are selecting with the inspector, you will get all the editing details on your right side. You can change text, background, margin and all the other properties that you wish to change.

How To Design Your Website Using YellowPencil

With the help of YellowPencil, you can easily create a unique design for your website. If you need to edit every single element and you want to create a perfectly designed website, then it will provide you all the great options. You can follow a few basic steps and get started with this plugin. Let’s have a look at how you can easily edit your web pages using YellowPencil plugin.

Selecting The Best Theme

First of all, you should always consider the perfect theme for your website. If you like a specific design, then you should consider using it for your website. Once you have selected a perfect theme for your website, you will be able to move on and choose the best option for yourself. Make sure that you are selecting a design which is according to your requirements. After installing the theme, you can go on and install YellowPencil plugin as well.

Installing YellowPencil Plugin

Installing plugin is easy. All you have to do is to purchase and download YellowPencil plugin from CodeCanyon. After downloading, you can install the plugin using the WordPress interface. Go to the plugins and add a new plugin. There, you will be able to install the plugin. You can also use FTP for installing the plugin. Once you have installed and activated the plugin, you will be able to edit all the pages that you have created on your website.

Editing Pages

Now you can easily start editing pages using YellowPencil. First, you will have to create a page and start editing elements using multiple features of the plugin. If you are editing headings and text, you will have multiple options to do so. You can inspect the element using the inspector and then add background colors, change text styles, add animation effects and much more. This way, you can edit the complete page using multiple elements and styles.

Editing Single Elements

If you need to edit a single element, then you can easily customize it according to your requirements. Whether you need to change the size of a single element or you want to change the position of an element, you can easily do so. You can move the cursor to any single element, and you will have multiple editing options. You can easily adjust the length, height, and width of a single element using this plugin.

Using Wireframe

Using Wireframe tool will allow you to get rid of all the clutter and let you focus on your work.

Using Animation Manager

Animation manager is a great way to give a beautiful look to your web pages. You can select any element that you want to animate and then you can apply your favorite animations. If you need to edit a single image and you want to add animation effects, then you can have multiple animation effects. You can add bouncing effect, flash, spin, shake and much more effects.

Checking Responsiveness

One of the most important things that you will have to take care of when editing your website is responsiveness. Make sure that you are using the responsive mode so you can check the pages. If you are not testing the responsiveness of your site, then you are making a huge mistake. Always check the responsive mode when editing your website so you can easily get a clear idea of how your website is going to behave on different devices.


  1. Raphael Tremblay

    March 26, 2020 at 2:03 pm

    Hi, when I changes things on responsive mode, it won’t stay the way I put them.
    I’ve work on every screen size I have and I can’t even get everything right. Do you have more explanation on how to use YellowPencil?
    Thank you

  2. Bjorn Ross

    July 21, 2020 at 11:05 am

    Just bought the pro version and I am very happy with the user interface and ease of use. However, I have not yet found out how to exit YellowPencil and return to the default WP menu. When exiting YellowPencil I return to a full width page and there is apparently now way of coming back to the WP menu except from using the browser’s back botton. Please advice, thank you in advance, Best regards, Bjorn


Leave a Reply

Your email address will not be published. Required fields are marked *