If you are looking to customize the design of your WordPress template in an easy way, then you need to customize the theme of your site and you can do this through the “Yellow Pencil” tool, as this tool comes in combination with many advanced features that enable you to adjust and coordinate the appearance of all elements and pages of the site in a way. Attractive and striking.
Yellow Pencil is therefore useful for website owners who are interested in saving money on their website design updates, as they will be able to change most aspects of their website without having to hire a specialist.
What is “Yellow Pencil”
Yellow Pencil is a paid plugin for a visual CSS style editor that allows you to visually customize your WordPress site in just a few minutes, and customize any theme we want, all by clicking on the element and starting the visual customization process.
This component allows you to personalize the design of your website, leaving an exceptional impact without the need to deal with any complex programming codes.
The purpose of using “Yellow Pencil”
There is no doubt that the appearance factor is considered a very important indicator in various types of businesses that use similar websites. Therefore, customizing the design of your website will leave a different impression on customers and site visitors. However, you do not need any skills in this regard. All you have to do is Use this easy tool and unleash your imagination and creative ideas.
Yellow Pencil has everything you need to customize your website design. The plugin comes with advanced features like visual size, drag and drop, scaling tool as well as lots of resources containing background styles, google fonts, popular color palettes, and it also has an advanced responsive widget that lets you customize your website for any screen size.
Services included in the add-on
Yellow Pencil is a great design tool. The features and tools available allow you to have complete control over the look of your site. It can be used on any WordPress theme or plugin. It will enable you to create elegant and responsive web pages, and allow you to define and customize every visual element on your WordPress site. Edit colors, backgrounds, borders and much more.
All of this is done with a live preview of the front end of your site, so you can view the changes as you make them. While the codes will be recorded in the background automatically, you won’t need to look at any code yourself unless you want to.
The basic services in this tool include the following:
- Drag and drop to adjust the position of items.
- Resize items using the cursor.
- Choose from over 600 fonts, 300 background styles, 50 animations, and more.
- Unlimited colors are available or choose from Yellow Pencil’s modern color palettes.
- Use a live CSS editor.
- It also provides extensive documentation and support to help you get the most out of the WordPress Visual Style Editor.
Install the add-on on your site
This plugin is simple and easy to use from installation to usage and formatting, once you purchase the plugin from (CodeCanyon), or through (purchasing a premium theme such as New York that includes the plugin for free).
1- Log in to your WordPress control panel
2 – Download the plugin on WordPress
Go to the Downloads tab to download the installable WordPress file from Envato, or you can use the free version available at (WordPress.org)
Then you go to your WordPress dashboard and choose: plugins >> Add new
From the Add Plugins page: Click on Upload Plugin, then (choose file no file chosen)
According to the path you chose for downloading, you can select the waspthemes-yellow-pencil.zip file , then after uploading it, click ( Install now )
3 – Activate the add-on
While you have finished installing the add-on, you can click ( Activate ) and enter your activation code to be able to access all updates of this add-on as soon as they are released.
After activating the add-on, its welcome page will appear on your control panel under the “Resources” tab, where you will find all the documentation, tutorials, and other help and support you need.
Finally, you have to click on “Let’s Get Started”, to go to the editing mode of this tool, to begin the comprehensive customization process.
Yellow Pencil interface
Yellow Pencil has an easy-to-use interface that most people can pick up in a few minutes. It allows users to change most aspects of page design including layout, colors, fonts, animations, and background textures.
Yellow Pencil allows you to update your website design frequently and constantly improve its appearance.
We’ve added two red arrows to illustrate the plugin’s interface. On the left side, you have the left bar, which contains a variety of tools.
On the right side, you have the Editor panel, which contains either the customization type (shown here) or style properties.
Yellow Pencil editor panel
While you start using the Yellow Pencil you must choose the “ type ” of adjustment you want to make. The right panel will display the three available customization types (general customization, single-page customization, and template customization).
Therefore, the customization will depend on your choice of the type of customization:
- Global customization: This means that the changes you make will be applicable to every page of your site.
- Customize a single page: Therefore, all edits you make will only affect the page you are working on.
- Customizing templates: That is, the change pertains to the current post type. This is a very useful option when you want to adjust and format the pages of a product or blog.
The chosen type of customization will be displayed at the top of the editor panel, and you must confirm the type of editing used before you finally save your work.
When you click on any element of the page, that editor panel will change to include the style properties related to the selected element.
Soon a blue box will appear around the selected item, showing us additional customization options.
The left toolbar also displays many tools that help you start formatting and customizing the appearance of elements on your page, including:
- Element inspector: This tool is used to select the element you are editing. Simply click on the item you wish to edit and the options for that item will appear in the right panel. You can select multiple items by holding down the Shift key.
- single inspector: This tool will only select the clicked item (ignoring previously selected items).
- Live CSS editor: This editor allows you to make subtle changes to a page’s CSS code.
- Responsive mode: This mode allows you to see how the design looks on screens of different sizes.
- search an element: This allows you to search for items by name, tag, or ID.
- measuring tool: Useful for making pixel-perfect adjustments to your design.
- WireFrame: This tool hides design colors, making it easier to focus on the layout and structure of your page.
- Design information: This tool will show you useful information about the item you currently have selected.
- Animation manager: Yellow Pencil has a powerful animation tool that lets you quickly add animation to objects. There are dozens of animations available, which make it easy to add a little action to your page.
- Fullscreen: This tool allows you to make edits in full screen mode.
While the editor panel includes three basic buttons:
- Instant Preview, you can preview your changes without any use of the Yellow Pencil view.
- Reset Changes: If you make any changes that you don’t like, you can easily reset the changes you made.
- Saving: Once you are sure that you are satisfied with the results of the modifications made, simply choose to save the changes.
Yellow Pencil features and options
Typography options
Choosing the right font for your site is an important presentation effect, and “Yellow Pencil” provides you with a variety of options to help you format the text in a way that matches your vision and attracts the attention of future visitors to this site.
By clicking on the section of text that you want to modify, then selecting “ Text ” from the editor side panel, customization options for printing will be shown, including font style, size, height, spacing, and color, so that it appears as desired.
Frame and border options
Adding frames to specific elements 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 Borders from the editor panel.
The tool gives you four styles of borders to choose from: (continuous, dotted, dashed, or hidden). You can also change the width or thickness of the border to make it more defined and change the color.
It is therefore a great feature that you can customize each side of the border separately, meaning that each of the four sides can be given a different colour, style and thickness, resulting in a unique and eye-catching look.
Background editing options
A striking background can help the item stand out. Yellow Pencil allows you to change the background of every element on your site.
To do this, click on the chosen element and select “Background” from the editor panel, and then you can change the background color, choose from among several pencil styles or choose a CSS gradient.
You also have the option to upload your own custom images. Once you’ve selected a background, you can adjust the size and position of the background, and if you’ve added an image, choose whether it’s fixed or moves with the rest of the page.
Options for using animation
Using animation is another great way to help your content make an eye-catching impact for site visitors. By choosing “Animation” in the editor panel, you can add an animation effect to your chosen element.
Choose one of over 50 animations in the live animation manager, from zoom or fade to bounce, rotate and more. You can control the duration and delay, as well as play multiple animations at once, if you wish.
This will give your site authenticity, as well as draw attention to important aspects of your page. You can also try creating your own custom animation by selecting Animation Generator on the toolbar.
Size and position options
Resizing and repositioning any element is very simple with the Yellow Pencil. Click directly on any element until the highlighted blue box appears around it, then drag the horizontal and vertical lines of the blue box to resize.
To change the position of a specific element, we also click on it and then hold down the mouse button, to drag and drop it to the appropriate position on the page.
The drag and drop feature is subtle because it may cause viewing issues on mobile phones. Use the Responsive tool, located in the toolbar, to see how your web page will look on all screen sizes. You may need to modify your design accordingly.
Pricing
This Yellow Pencil WordPress plugin is available for $26, including a 6-month support period, and you have the option to pay an additional $7.88 to extend the support period for twice as long.
Three versions of the Yellow Pencil are available:
- Lite version (Free): This version does not have font family, animation, and size features.
- Regular ($20): This is a full-featured version licensed for a single project or website.
- Extended ($125): This version is intended for WordPress developers who sell their themes.
Conclusion
Yellow Pencil is an ideal tool for any website owner who doesn’t have the technical knowledge to tweak the design of their WordPress site.
So when you use Yellow Pencil, you don’t have to fumble around with CSS code – the plugin handles all that for you. You can simply change the look of your website design with the Yellow Pencil front-end editor.
But to achieve the best results, you must ensure that you have a clear vision of how you want your site to appear.
