• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Customizing WordPress with Visual Developer: A First Look

Customizing WordPress with Visual Developer: A First Look

Posted: March 1, 2015 Updated: September 5, 2019 by Claire Brotherton
5 Comments

Quicky mode and results as shown in the Visual Composer demo
Update September 2019: I’ve kept this post up as it was part of the blogging challenge, but the Visual Developer plugin hasn’t been updated in 4 years. I don’t recommend using it now.

This is Day 25 in the 30 Day Blogging Challenge. You can read Day 24’s post here.

I’ve written previously about customizing a WordPress theme and creating a Twenty Fifteen child theme. Today I’ve decided to try out a product from one of my fellow blogging challenge participants, Visual Developer. It’s a WordPress plugin developed by Andrei-Robert Rusu aimed at non-developers. The plugin will work with any theme and allows you to select any element on the page and customize it by changing things such as:

  • Colour and background colour
  • Font
  • Margin and padding
  • Text alignment
  • Indentation
  • Position
  • How it displays

I tried the single license version using Twenty Fifteen theme.

Visual Developer is now free to download from WordPress.org.

I must stress that I haven’t watched all the user videos or explored all the options fully in this review.

What I like about Visual Developer

You can see your style changes implemented straight away on the page.

The background colours, fonts and text alignment on this table have been changed
The background colours, fonts and text alignment on this table have been changed

 

Huge range of fonts to select from.

You can select all elements of the same type e.g. all table headers and modify them all together.

Selecting elements with Visual Developer
Selecting elements with Visual Developer

The item you are changing is shown on the page with a shadow.

You can target the parent element of an element you select.

The Quicky mode allows you to change elements quickly selecting from options that make it really obvious what you are doing.

Quicky mode and results as shown in the Visual Developer demo
Quicky mode and results as shown in the Visual Developer demo

Changes are saved by the green button. If you deactivate the plugin, your site returns to its original look, but reactivating it again puts your modifications back.

You can reset all the changes you make for an element with the red reset button, if you mess up and do something you didn’t like.

What I don’t like about Visual Developer

Not every change will stick, and it’s not always obvious why.

For example, I changed the sidebar widget colour and wanted to add more padding above and below. Despite changing the padding values, my changes did not show up on the page:

Adding widget padding - the changes don't show up
Adding widget padding – the changes don’t show up

My padding-top of 5% is cancelled:

Padding-top style does not apply
Padding-top style does not apply

It turns out that the padding rule is a shorthand rule in this theme:

media="all"
@media screen and (min-width: 59.6875em)
.widget {
font-size: 12px;
font-size: 1.2rem;
margin: 0 0 20%;
padding: 0% 20%;
}

The 0% refers to top and bottom padding.

So the padding must be changed in the stylesheet to

padding: 5% 20%;

for the padding to show, but the plugin does not accommodate this. Here’s the result, also showing the Chrome inspector:

Altered padding for widgets
Altered padding for widgets

Some modifications I made brought about unexpected results! I attempted to change the colour of the #main div, and it changed the colour of Visual Developer UI to green as well.

Visual Developer UI colour changes
The Visual Developer UI colour also changes when I change the colour of the #main div

Suggested improvements

Here’s what I’d like to see to make this plugin even better.

  • Written documentation to complement the 3 videos.
  • Show the CSS rule you are editing as you’re editing it – I kept forgetting what it was I was changing!
  • Change elements with less specificity – e.g. target all a elements on the page, not just (for example) h2.entry-title a.
  • Ability to add !important to style rules to override existing styles.
  • Allow borders to be customized in the same way as margin or padding i.e. allow top, left, right and bottom borders to be set separately.
  • Higher contrast and/or larger text on the user interface. It looks very stylish, but some of the text is hard to read.
  • Allow users to export CSS changes to a CSS file as well as a JSON file.
  • For coders, to see the original CSS style rules for the element you’re changing.
  • Have an “Are you sure?” dialog with yes/no button when you click to reset the changes – it’s easy to select the link by accident.

Will this plugin help you?

It will certainly help with simple CSS changes such as fonts and colours. Occasionally, you might not be able to make a modification and may need to seek help.

I’d advise testing Visual Developer on a non-production site to get the hang of it.

Did you find this post helpful? If so, please share or leave a comment.

Related

Category: WordPress Tags: 30 day blogging challenge, modify theme, theme, twenty fifteen

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Andrei-Robert Rusu says

    March 2, 2015 at 12:46 am

    Thank you for the awesome review, I’ve already handled most of the improvement requests and will wrap up everything in the next update which will be at the end of the month. It will come with a lot more features.

    Reply
    • Claire Brotherton says

      March 2, 2015 at 1:08 pm

      Thanks for stopping by , Robert – glad you like the review! Looking forward to trying out the new version of the plugin soon. 🙂

      Reply
  2. bengalit says

    March 4, 2015 at 9:40 am

    Awesome article.i have read your article.cheers

    Reply
  3. William John says

    June 4, 2015 at 6:21 am

    Hi Claire
    i like your article and able to solve css development issue i was facing for my website.

    Reply
    • Claire Brotherton says

      June 4, 2015 at 11:36 am

      That’s great William – thanks for taking the time to comment. Let me know if there’s anything else you’d like me to write about.

      Reply

Leave a Reply Cancel reply

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map