Visual Developer – CSS Modifications Made Easy

Whether you're a developer with years of coding knowledge or a complete newbie whose barely ever heard of CSS, I'm sure you've wondered about ways of simplifying the customization process of your WordPress site. There exist drag-and-drop builder plugins, fully customizable themes and all that, but now there's a new kid on the block - Visual Developer.
Our Sponsors
Essential plugins for your WooCommerce store
Build unbuildable WordPress websites
Try Kinsta WordPress hosting risk-free for 30 days
The best no-code Instagram feed plugin for WordPress
Automate marketing for WooCommerce, from hi to buy!

Whether you’re a developer with years of coding knowledge or a complete newbie whose barely ever heard of CSS, I’m sure you’ve wondered about ways of simplifying the customization process of your WordPress site.

There exist drag-and-drop builder plugins, fully customizable themes and all that, but now there’s a new kid on the block.

Visual Developer

visual-developer-logo

Visual Developer is a WordPress plugin used for customizing your WordPress site, no matter what theme or major plugins you might already be using, without touching a line of code or editing anything from the back-end of the site.

You can make all types of CSS changes with just the click of your mouse. Let’s see what else this new way of editing offers.

Main Features

As I just mentioned above, the main feature of the Visual Developer plugin is that you can edit any CSS element on your WordPress site without touching any code. It’s all done using your mouse and it’s a very fast process.

In fact, in a few minutes you can completely change the look and feel of your site, and it’s so easy to do I’ll even go as far as saying anyone without any prior knowledge of CSS whatsoever will be able to handle it’s basic features with ease.

visual-developer-features

It’s got a very intuitive and user friendly interface. If you just go through the quick introduction videos you’ll be able to get to work modifying your WordPress site in no time.

Visual Developer even promises full browser support by generating an extra CSS file. For those who just want to make some quick and easy changes without going into any detail there’s even a Quicky mode. Let’s see what it’s all about.

Quicky Mode Features

The Quicky mode in Visual Developer is the easiest method I’ve ever come across to edit your WordPress site’s looks through CSS.

visual-developer-quicky-features

You only have a limited number of settings to play around with, namely the texture background, inner spacing, outer spacing, border radius, text alignment and colours.

However, even with these limited options, you can do enough to your site to enhance it, improve it and modify it to your requirements.

Installing the Plugin

Installing the plugin is an easy process. Just head to the Plugins section in your WordPress dashboard, click on Add New, and upload the zip file that you downloaded when you purchased the plugin.

Then just hit activate and you’ll see a new option in the WordPress toolbar at the top of your site called ‘Toggle Visual Developer’.

Using the Plugin

So, we’ve installed and activated Visual Developer. Let’s get down to using it.

Toggl Visual Developer

First up, you can head to the front-end of your site and hit the ‘Toggl Visual Developer’ button on the WordPress toolbar above the page.

This is where the fun starts. Every time you click on this you’re switching between the live status of your site and the Visual Developer panel.

From this panel you have four options. The first is to ‘Open’ Visual Developer, the second is ‘Progress’, the third is ‘Preferences’ and the last is to ‘Save Changes’.

To start editing your site just click on ‘Open’ and you’ll be presented with the Element Navigation Panel.

visual-developer-1

Selecting the Elements to Edit

Now, you’ve clicked on the Open button and opened the elements panel. Next up just choose the element whose CSS (or looks) you want to edit. This is as easy as clicking on it. It might be the background, or a post title, or even a sidebar widget.

Just click and the elements panel for that element will be activated. In the screenshot below I’ve clicked on the background and the navigation panel for the ‘body’ has automatically opened up for me.

visual-developer-2

From here we can now start making changes. There’s a long list of settings to play around with ranging from padding & margins to positions, alignments, colours and even display styles.

Whichever CSS rule you want to change, you can do it all from here. All you have to do is either scroll down the list or search for the element in the ‘Filter Options’  section at the top of the panel.

Let’s start modifying some of the elements on my test site.

First Changes

visual-developer-2.5

The first element I selected was the background. I modified the width of the site to be 100%. Now, this is one of the first points worth mentioning regarding editing the CSS. You’re given a selection of units when entering new values for CSS elements.

So in this case, for example, I had a choice between setting the width in pixels, ems, rems or a percentage. I chose a percentage to make it fill the whole page no matter what screen size the users were on.

So far I’ve only clicked on and edited the background of my WordPress site, but if you click on a particular element, say the header, you’ll notice a few options to choose from regarding editing.

visual-developer-2.55

This screenshot above shows the 5 options. These are Reset, Parent Element, Current Element, Select Structure Based Elements and Select Structure Class Smart Based Elements.

Depending on which you choose you can either edit just that particular element, or anything included in its parent element, or all the other similar elements on the site, or even all the ones with the same class. What this does is give you the freedom to edit multiple same elements at once or individually.

Next up I moved onto the header. I removed the image by setting the Background Image option to None. The other options included Inherit, Initial, URL, Full-Background and Forced-Background. You can set any image you want even from an external source.

I also set it’s width to 100%, its text-alignment to centre and background colour to white. This is the result:

visual-developer-3

It’s important to note also that once you’ve made changes you can hit Close and Save Changes. If you Toggle Visual Developer again you’ll see the live version of the site your users can see with the new changes in effect.

Doing some more Basic Editing

Let’s look at some other editing options. In the screenshot below you’ll see what I’ve changed so far. This took me all of 4-5 minutes to do and was no hassle whatsoever. Just a few clicks.

First up I modified the post titles, changing the display, text font, padding and text alignment. The display was set to block, the font I chose was Droid Sans, the padding 10px all round and text-alignment centre.

Next I modified the date and category section beneath the post title and once again all it took was to select the element, head to the appropriate section and enter a few values. Padding was set to 5px, text-alignment to centre and text decoration to underline.

visual-developer-5

As you can see, the look of the site has already changed significantly and I haven’t had to touch any code, make any back-end changes or spend money on a developer.

Now, if you Toggl Visual Developer again as seen below and select an element on which you’ve already made changes, the editor button will now appear highlighted as seen above. This will show you which elements have had changes made to them and using which setting.

visual-developer-6

Pseudo Selectors

If you click on the 3 lines in the Elements Navigation Menu Panel you’ll be shown a new menu called Change Customization Selector. Here you have options to change the CSS of your WordPress site during such settings as hover, focus, link and so on.

By selecting the one you want you can change the CSS for that instance when that action is happening.

visual-developer-7

For example you can select hover and modify the post title’s background to change colour when a user’s mouse hovers over it. This will grab the user’s attention and influence them to click on that link to the post.

You can make any changes you want from here and they’ll help to make your site that bit more dynamic. It can be especially useful to create a button for instance.

By simply choosing a bit of text such as “Click Here”, giving it a background colour with some padding, and setting a different background and text colour for the hover option, you’ve created a clickable button.

Spectral Mode

Spectral Mode is quite useful when you’ve got multiple elements close to each other. All it does is it fades out everything else on your site except the element or elements you have selected to modify.

This helps you focus on that particular element and also clearly identifies which, and how many, elements on that page have been selected. In the example below I selected the header text, and hence the subtitle and menu (as well as the rest of the site) were faded out.

visual-developer-8

Quicky Mode

As I had mentioned earlier on, Quicky is the easiest and quickest way to make simple and fast modifications to your WordPress site’s CSS.

Just select the element, change the settings from the limited options given, and you’re set to go. Below I changed the background to a texture and added inner spacing to the subtitle just to show you how easy it is. Two clicks and my subtitle is now given more prominence.

visual-developer-9

Preferences

Last up is the Preferences section. Here you’ll find the general preferences for the Visual Developer plugin, import & export functions as well as the element display options. You can set them however you want and export the settings to any other WordPress site running Visual Developer.

visual-developer-10

Progress

The latest addition to the plugin is the Progress tab. What this does is show you the changes you’ve made to the CSS of your WordPress site.

You’ll be able to track your changes and should you need to remove a particular change you made earlier you’ll be able to locate it directly from here.

visual-developer-11

Video Tutorials & Test Drive Environment

Even though Visual Developer is a rather intuitive plugin to use, especially when you’ve already got an idea of how CSS works, the developers have created a few video tutorials for you to follow and get started. You can have a look at them here.

Besides that they’ve also created a Test Drive Environment where you can go and try out the plugin for yourself without the need to download or purchase anything. Just head to this site and play around with all its functions.

Pricing

The Visual Developer plugin has three pricing plans.

The first is a Single Site License costing $19 yearly. The second is a 5 Site License costing $39 yearly. The third is a Developer License costing $99 yearly.

Each one includes a year of updates and support as well as email notification on updates and extensive video tutorials, besides the basic features of course.

You can see more details in the screenshot below.

visual-developer-pricing

Conclusions & Recommendations

So, that’s the Visual Developer plugin for you.

A very useful, intuitive and easy-to-use WordPress plugin that let’s you modify your website’s look without the need for any coding skills or making alterations to your site’s files.

Overall I can sincerely say I enjoyed using this plugin. I was expecting something a bit more complicated, but it was the complete opposite. Just a limited knowledge of CSS will allow you to re-design any WordPress site in a fraction of the time and at a fraction of the price that a developer would take.

If you prefer to get more into the back-end part of your site and you enjoy modifying a theme from the code, then this plugin isn’t your ideal tool.

However, I still feel it would be a good addition to any site as it allows you to make small changes in just a couple of minutes, which without the plugin could take you quite a while longer till you find and modify the code.

Have you used Visual Developer before or anything similar to it? What are your experiences with it? Leave us a comment below and let us know what you think.

Get Visual Developer here!

Mark Zahra
Mark Zahra
CEO at RebelCode, the team behind WP Mayor, Spotlight, WP RSS Aggregator, and the Mastermind.fm podcast. Follow me on Twitter @markzahra.

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

Table of Contents

Leave a Reply

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

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.