Skip to Main Content

5 WordPress plugins to visually edit CSS

Divi: the easiest WordPress theme to use

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Making personalizations with real-time preview on your blog is much easier, and much more satisfying, when you have the ability to see the different changes as soon as you make them. The best way to make applicable changes in real time is of course by using a plugin.

CSS Customization is a feature offered by several plugins on If you are looking for a plugin that generates a stylesheet (CSS code), you have several choices available to you. But, while there are a lot of plugins you can use to create custom CSS code, there are very few options that offer real-time editing of CSS code.

So after exploring the directory of plugins to find a solution to this limitation, I managed to find some rare gems that deserve our attention.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

1. Yellow Pencil: Visual CSS Style Editor

Yellow Pencil is a visual style editor that you can use with any theme to personalize your website in minutes (fonts, colors, animations and more…).Yellowpencil visual css style editor plugin wordpress

This premium WordPress plugin will create CSS styles in background while you play with the colors as if it were a game. It was designed for beginners as well as experienced users.

Discover also our 5 plugins WordPress to show notifications

No coding knowledge is required. However, the WordPress plugin has a good CSS editor for those who like to code. You can code live with this editor and customize your CSS.

Download | Demo | Web hosting

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

2. Easy Custom JS and CSS 

This premium WordPress plugin is a powerful CSS and Javascript code editor that allows you to add these to any section of your website. It allows you to keep your customizations even after a major update to your WordPress theme. Easy custom js and css extra customization wordpress plugin

You have the option of limiting the field of use of your personalized code. For example, you can use your code only for an article in the video format.

See our articles on How to require acceptance of the terms of use on WordPress

Or you can limit your code to a specific WordPress theme; Which is handy if you are currently changing themes for your WordPress blog.

Download | Demo | Web hosting

3. Custom JS and CSS for Gutenberg

The premium WordPress plugin Custom JS and CSS for Gutenberg will allow you to add an unlimited number of custom styles to the WYSIWYG editor for your WordPress posts and pages. It is fully compatible with the Gutenberg version of WordPress.

Custom js and css for gutenberg wordpress plugin

You can simply create a new style with an easy-to-use CSS editor. This WordPress plugin extends the features of custom fields of your website and gives you the ability to modify your custom fields with a dynamic and powerful personalization module. and the functionality of real-time preview of this WordPress plugin makes it very comfortable and user-friendly.

Download | Demo | Web hosting

4. Advanced CSS Editor

WordPress product company ThemeIsle and Wunderkind developed this plugin. After installing and activating the latter, navigate to the following location " Appearance> Personalization To access the dashboard and look for "Advanced CSS Editor" in the menu. It will appear at the top of the list of menu items in the Customizer. Advanced css editor - wordpress plugin

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

To modify a CSS code, all you have to do is add a selector and the rule that applies to it in the text box when you click on the menu " Advanced CSS Editor" page (in French).

See also How to improve the bad quality pages of your blog

CSS rules can be written to apply generally or to target a particular element on specific devices (computer, phone, tablet, etc.). As soon as the rules are written, the Customizer will display a preview with the changes that have been made.

Download | Demo | Web hosting

5. SiteOrigin CSS

It is by far the WordPress plugin that offers the most options in this list. The most amazing thing about the latter is that it is free. This WordPress plugin is the only one that cannot be found in the customizer.

Siteorigin css - wordpress plugin

After installing and activating the plugin, you need to navigate to the following location " Appearance> Custom CSS To access the CSS edition of the plugin. On this page, you can see a text editor that does not offer live preview. 

Read also our article on 10 WordPress plugins to boost sales of your website

To access the latter, you must click on one of the two buttons that appear on the left, just above the editor. The button with an eye icon will bring up a visual CSS code editor that enthusiasts will appreciate. The icon with the extension arrows will display a text editor which will imply a mastery of CSS codes.

Download | Demo | Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]


Here is ! That's all for this list of premium WordPress plugins that will help you visually edit the CSS on your blog. If you have some Comments or suggestions, do not hesitate to let us know in the reserved section.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

We invite you to share on your favorite social networks.   


This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top