If you’re looking to customize the design of your website’s theme but aren’t familiar with coding, I’ll let you in on a little secret of mine. I use a CSS style editor plugin that allows me to customize my WordPress theme visually in real-time! It’s the Yellow Pencil: Visual CSS Style Editor by WaspThemes.
Before using Yellow Pencil, I was very limited to the options available in my theme within the WordPress Visual Editor (Appearance < Customize). The biggest pain point was my inability to change the font and color on certain parts of my website.
I am not a coder, nor do I know anything past the very basics when it comes to coding CSS.
Great news though! I don’t need to have an advanced education in web design. The Yellow Pencil Plugin allows me to customize each element of my site within mere minutes. I don’t know where I’d be without this tool! It is definitely worth the investment of $25. But there are a few things you’ll want to know as you use it!
If you haven’t started your blog yet, please be sure to read my post, Starting a Lifestyle Blog (An Easy Step by Step Tutorial). In this post, I outline the exact steps you’ll need to follow in order to get your blog up and running with Bluehost and installing WordPress.
Plus, you’ll get a FREE domain for only $3.95 per month when you sign up through my referral link! (And don’t forget to cash in with Ebates too! You’ll get $10 when you activate the Ebates cash back and complete your Bluehost purchase.)
// Wanna save this for later? Save to Pinterest + Follow me //
Customize Your WordPress Theme with the Yellow Pencil Plugin (no coding required)
(THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ MY DISCLOSURE FOR MORE INFO.)
Yellow Pencil has really helped me with customizing my theme to my exact design specifications. I am very picky about the aesthetics of my site. But, I also don’t have a lot of money to throw down to hire a web designer. If you’re in the same boat, read on to see how best to utilize this plugin!
By the way, don’t forget to check out my recent blog posts, How to Use Facebook Groups to Promote Your Blog + FREE Printable and 17 Facebook Groups for Bloggers to Join in 2018.
8 Reasons Why You Should Try Yellow Pencil
- You can customize ANY WordPress theme.
- You don’t need any coding knowledge to use it. However, there are functions available for those that have more advanced knowledge too. Not just for beginners!
- There is a FREE lite version of Yellow Pencil. Try out some of the limited functions before you commit to the full version.
- The full paid version of Yellow Pencil is very inexpensive at only $25 for lifetime access. Worth. Every. Penny.
- You can also customize responsively. Meaning you can customize your theme for all devices such as desktop, phone, tablet, etc.
- Resize elements of your site with the visual resizer and use the drag & drop or measuring tool to change the layout of your blog.
- Advanced features include over 600+ fonts and 300+ backgrounds to choose from.
- It’s insanely easy to use. I promise!
How Do I Download It?
To download the Yellow Pencil lite plugin (free version):
1. Go to ‘Plugins’ (in your WP sidebar menu) and then ‘Add New’.
2. Search for Yellow Pencil and hit Enter.
3. You’ll see the image below. Click ‘Install’ and then ‘Activate’ or select the title to read information from the developer.
To download the full version of Yellow Pencil (paid version):
2. Add the license you want to purchase to your cart. (I used the Standard license.)
3. Go to ‘Checkout’ and Create an Account – unless you already have one.
4. Follow the on-screen directions to complete your purchase.
5. Once the purchase is complete, download the ‘Installable WordPress file only’ from the Envato downloads page.
6. Then open your WordPress dashboard. Select ‘Plugins’ < ‘Add New’.
7. Click on ‘Choose File’. Then select ‘waspthemes-yellow-pencil.zip’ from the folder you saved it in. Click ‘Install Now’.
8. Once you install the plugin, click on ‘Activate’. Proceed by entering the activation code you were given after your purchase is complete. (This important as it will allow access to plugin updates as the developer releases them.)
How To Access the Yellow Pencil Plugin
To start using Yellow Pencil, go to the page that you would like to customize. In the top menu bar, click on ‘Edit With Yellow Pencil’.
In the upper, right-hand corner, you’ll see a pop-out ‘Editor’ box. Click on the drop-down arrow and make sure to select the appropriate type of customization. (Most often, I use ‘Global Customization’ as I want most of the changes I make to be consistent throughout my site’s theme. However, there are times when I want to customize a single page ONLY. Please use your best judgment based on which pages you want this customization to be visible on.)
- Single Customization – applies a style only to the CURRENT page.
- Template Customization – applies a style to ALL pages of the CURRENT post type.
- Global Customization – applies a style to the ENTIRE website.
NOTE: You can also access Yellow Pencil through the WordPress sidebar menu under ‘Appearance’. Just be sure select the correct page, template or homepage (defaults automatically to the homepage).
How to Begin Using Yellow Pencil to Customize Your Site
FIRST, GET FAMILIAR WITH YOUR SITE ELEMENTS
Before you begin your customizations, I strongly recommend to use your mouse and hover over each area on the page to get familiar with the different elements on the page you can edit. Depending on where you hover, you will see a blue outline of each element on the page that allows you to edit that section in various ways.
Whenever you click on an element, Yellow Pencil will outline it in blue. Then, you will see several different menu options in the rectangular box so you can customize that specific element (see image below).
HOVER OVER THE CUSTOMIZATION ITEMS TO SEE THEIR FUNCTION
As you click through the menu, you’ll see the various ways you can edit within each customization category. While some of these are straight-forward (like changing the font, size, and weight), you may run into some customizations that you aren’t sure what they exactly do. To understand a customization hover over the item in the menu and you’ll see a short description (see below).
UTILIZE YOUR UNDO ARROWS
Unfortunately, I am NOT a web designer so I cannot define and tell you the purpose of every single customization available to you in Yellow Pencil. However, in my personal experience, I find that I like to play around with the customizations and use the ‘undo’ buttons if I do not want to commit to the change. To undo, click the ‘back arrow’ in the left-hand menu toward the bottom, or there will be an arrow next to the specific customization you used in the main rectangular menu (see images below).
NAVIGATE TO A DIFFERENT ELEMENT
Sometimes Yellow Pencil can be tricky. When you want to customize a different area of your site, you can usually click on a different area away from that element to resume hovering and then clicking on the element you wish to change. However, if Yellow Pencil doesn’t allow you to ‘click away’ from the element (sometimes this happens), you will need to click on the three small horizontal lines next to that element (indicating a drop-down menu) and select ‘Leave’. From there you will be able to resume the hover function.
My Favorite and Most Used Yellow Pencil Functions
FONT – My biggest gripe with my theme are the limited font choices. With the Yellow Pencil paid version, I get over 600 of the most popular fonts. Plus, there are a ton of ways to further style each font by changing up the weight, font size, font color, and letter/word spacing. With such robust features, you’ll be sure to find a way to style your fonts specific to the look and branding you’ve chosen for your blog.
BACKGROUND – I mostly use the background feature to edit the color of the buttons on my site. For instance, my social media share buttons under each blog post on my homepage were different colors. Because I crave consistency and am a tad OCD, I was able to customize those buttons to make all of them a dark charcoal color.
BORDER – My WordPress theme, unfortunately, doesn’t include borders around my images. This is a great customization for images that tend to blend into your background color (important for my site because the background is pure white). You can also utilize thin or thick borders for distinguishing the buttons on your site.
DROP SHADOW – Love this for calling attention to square or rectangular buttons! Not an element I use often, but when I do, it makes such a difference.
MARGIN/PADDING/POSITION/SIZE – I lumped these customizations into one because they all relate to the position and size of where you want each element to ‘sit’ on your site. As an example, I had to tweak some of my sidebar widget ads because they were cut off on the lower half by my theme’s default settings. To fix this, I adjusted each ad’s height in the ‘Size’ menu to ensure the entire ad is visible.
RESPONSIVE MODE – It is ALWAYS a good idea to view your site frequently in mobile/tablet responsive modes. Often times, there is a tweak you need to make in order for your site to look just as neat and tidy as it does in the desktop version. ALWAYS, ALWAYS, ALWAYS, check this! You’d be surprised how many of your visitors will be on a mobile device. Don’t lose out on a returning visitor because your site elements are scrunched or your menu is missing entirely.
- 5 Reasons to Start a Blog (Start Your Blog for Only $3.95!)
- Starting a Lifestyle Blog (An Easy Step by Step Tutorial)
- What Happened My First Month Blogging (October 2017 Blog and Traffic Report)
- New Blogger? Learn the Basics for FREE (Before Investing in Paid Courses)
- How to Use Facebook Groups to Promote Your Blog + FREE Printable
Yellow Pencil is definitely the way to go if you need help with customizing your new blog and don’t have money to hire a web designer. I realize some may not agree with using a plugin to achieve this, but as a new blogger, the $25 was well worth the investment. As I progress in my blog and make more profit in the future, I would love to invest in a better theme as well hire a coder to style my site. But for now, I am completely satisfied with Yellow Pencil and how it helps me design my site with ease.
How about you? Do you use Yellow Pencil or a similar visual CSS editor plugin? Let me know in the comments, please!
// Like this article? Save it to Pinterest + Follow me //