There are many plugins on the internet for customizing your WordPress blog but Yellow Pencil has been able to catch our attention. Yellow Pencil is the one-stop solution for publishers to customize their website without much technical knowledge. The plugin makes it extremely easy for novice WordPress publishers to customize the looks of their blog without diving into the code.
Moreover, Yellow Pencil is fairly easy-to-use with many powerful features. The features collectively give you complete control over the looks of your website. Furthermore, the flexibility provided by the widget is unparalleled. The widget allows users to change the minute details of the website interface using the plugin to give a final exquisite look to your website.
How to Install
The plugin can be installed using the following instructions:
- Download the plugin from CodeCanyon. A zip file will be downloaded.
- Go to your WordPress Dashboard > Plugins > Add New and click “upload plugin” button.
- Choose the plugin zip file and upload.
- After upload, go to WordPress panel > plugins and activate the plugin.
Once you have the plugin installed and activated, you can change options for the plugin by going to WordPress Panel > YellowPencil. Moreover, you can start customizing your website from WordPress Panel > Appearance > YellowPencil.
You can check out more information regarding downloading and installing the plugin on the official documentation.
Simple Interface
The easy-to-use interface is what sets Yellow Pencil apart from other customizing tools for WordPress. The design for Yellow Pencil allows performing really powerful operations using simple buttons and gestures incorporated in the plugin. Moreover, users can customize the looks completely by different tools and options provided within the plugin. The plugin interface consists of three major portions: the tools bar on the left, the customization panel on the right and the website display at the center.
The Left bar
The left bar is where you can find all the relevant tools you need to customize the looks of your website. These tools collectively aid the users to make changes to the looks of the website. However, each tool works in its own way to create a completely personalized design.
The Right Panel
The right panel allows for changing various properties of selected elements on your screen. The panel also provides for the option to choose between three different forms of customization (Global, Template and One Page). These forms of customization differ mainly in terms of scope.
Global Customization
Changes made in the Global Customization mode reflect on the entire website. This mode is mainly used for elements that are consistent overall pages of the website such as the headers or the footers.
Template Customization
Template customization allows you to change the styles of a certain type of posts you may have used on your website. The changes made on elements will reflect on all posts of the same type as the one altered.
One Page Customization
One Page customization allows publishers to customize specific posts on your websites. Changes made on a single page will not reflect anywhere else on the website.
The Center Display
Yellow Pencil produces a live display of all the changes brought into the website. The screen shows all the elements your website has with its style. Changes into the style properties of every element are immediately displayed on the screen. Moreover, elements on the screen can also be selected, resized, added or deleted from the screen.
Tools and Options
Element Inspector
The Element Inspector tool allows you to select elements on the page by a single click. The tool is active by default and can be enabled or disabled from the left bar. When the element inspector is disabled, all tools are available for selection. Multiple elements can be selected on the page using the same tool. In order to select the second element, users need to press and hold the “Shift” key and then click on the desired element.
Once an element is selected, the breadcrumbs at the bottom of the screen represent the parent elements of the selected element.
Single Inspector
This tool is helpful in selecting only one element at a time. Using the tool, only the clicked elements are selected.
Search
Users can also search for elements on a page and select using their IDs or tag names using the Search option.
More than 50 CSS properties
Yellow pencil gives you the power to edit almost everything related to style on your website. Users can change from more than fifty CSS properties available on Yellow Pencil to give their websites a look of their own.
Yellow pencil supports more than 800 font families to play with. Moreover, users can change aspects such as the size and boldness of a text.
Users have the freedom to change the background effects, color and background images for all elements on the page. Yellow Pencil even provides its users with a large number of default images to choose as background for their elements. You can also add gradients as backgrounds or even use gradients as an overlay on different text elements on the screen.
You can also alter the margins around an element to increase the spacing between elements. Moreover, the plugin supports for altering the padding inside the element container.
The plugin gives its users the option to change the borders of the element. Users can choose from among solid, dashed and dotted borders to style elements. Even the border-radius of any post can be changed using the plugin.
All changes brought into a page are immediately reflected on the page in real-time saving users the hassle to refresh pages.
Drag and drop elements
One of the strongest features of Yellow Pencil is the ability to use drag and drop gestures to add and place elements on a page. The feature uses the ‘relative’ CSS property for dragged elements. However, this may cause problems in the layout of multiple screen sizes.
To further aid its users, Yellow Pencil also has smart guides to guide users in positions of various elements on the page.
Live Resize
The “Live Resize” feature allows you to alter the size of any element in real-time. The tool uses the “Width” and “Height” CSS properties in order to work.
Responsive Tool
This feature adds all the support you require to design for multiple screen sizes. Users can use the tool to look at how their webpage would look on different devices such as mobiles, tablets, and desktops. Users can alter the designs for each screen making their sites look beautiful on any device.
The tool allows you to change the width and height of the display screen to get an essence of how your website would look on different screens.
Measuring Tool
The measuring tool is one of the most necessary tools for designers. The tool allows users to view sizes of different elements to help you design beautiful web pages.
Wireframes
This tool helps you make detailed wireframes of your website without thinking about the details of the design and content. The tool allows you to focus on the layout by disabling the colors from the webpage. Moreover, effective usage of the wireframing tool helps users to easily see the structure of your website.
Design Info
Users can use this tool to view basic and advanced design information on their websites. It gives you explicit details of the font families, colors, and HTML classes used on the website. You can also see information regarding container width, element tag name, element DOM code, and many other attributes.
Animation Manager and Animation Generator
The animation manager is there to help you add interesting animations onto elements on your page. You can manage all your animations using the manager. The tool allows you to choose from 50+ pre-existing animations on their elements. Moreover, you can also control animation delays and durations using the tool. The manager supports multiple page animations giving your website a unique feel.
Apart from managing animations on your page, users have the option to generate their own animations. The tool records the styles you apply to elements as a custom animation. You can save and apply animations on multiple elements. Furthermore, custom animations give your website a unique look!
No need to Code!
The best thing about the plugin is that it does not require users to have a lot of technical knowledge to design their websites. Users can use the simple tools provided within the plugin to avail of the liberty of staying away from the CSS technicalities. The tools can be easily used by almost everyone. This gives immense power to even the non-techy users of the plugin.
Edit CSS Live
For more advanced users, Yellow Pencil gives publishers an option to view and edit the CSS code being generated automatically in the background by the plugin. Any changes made to the CSS can be viewed live on your screen in real-time.
Manage Styles
The plugin has the option to see all the customized pages and animations from the WordPress panel. You can also export the CSS code for further use. CSS styles can be managed from WordPress Panel > Yellow Pencil > CSS Styles.
Moreover, you can also reset the entire styling for any page or element and start fresh anytime you think that things are not going the way you wanted them to be.
Tutorials and Documentation
A major advantage of using Yellow Pencil is the extensive documentation provided by the developers to help their users through each and every aspect of customizing their websites. Yellow Pencil also has a dedicated channel on Youtube to help its customers via video tutorials. The documentation coupled with a large range of videos is there to help out customers in every aspect possible.
Pricing
There are three versions of the plugin available at different prices. The lite version is free for everyone while the Regular and Extended licenses are priced at 26$ and 125$ each. All licenses are valid for a lifetime!
Our Verdict
With the most easy-to-use interface and strong tools to play with the looks of your website, Yellow Pencil is our first choice when it comes to customizing blogs. The tool provides you with the power and freedom to play with multiple options. With Yellow Pencil, the only limit to customizing your website is your imagination.
Maaz Amin
Editorial Staff
6 comments
You explanations of this stuff are the best on the web. Simple, clear, tested by a real person! Thanks so much
Features I like in yellow pencil
1. Drag and drop to reposition elements
2. Resize elements with the touch of your mouse
3. Choose from 600+ fonts, 300+ background patterns, 50+ animations and lots more
4. Unlimited colors available or select from Yellow Pencil’s modern color palettes
5. Use a live CSS editor
All the points mentioned above seems to be very efficient, already have started using some of them for my projects.
Not difficult interface. Very easy to use and quickly customize any one. YES. It’s tested by me and my friend also. I’d like to thank the yellow pencil.
There are currently massive hack attacks with this plugin. All my WordPress sites with the Yellowpencil plugin were attacked and hacked, full of dirty code redirect to porn site. That was a real pain to recover and IMO unacceptable from a codecayon plugin.
Don’t use it and find an alternative
This plugin has destroyed my two websites and my life also.
I can not arrange proper words to say how much harm it has done to my life overall. I have lost two running websites, lost my keywords’ google rank, lost thousands of dollars worth of orders, lost customers and their data and so on and on.
I am now again building the sites from scratch, investing my little left money to build them.
I’m really disappointed.