What is Probuilder for?

Probuilder is the first live CSS editor for WordPress. Whether you have no idea about coding or you are a professional web developer with Probuilder you can change the looks of your website in no time. Please follow the following steps to understand how to use Probuilder.

Installing the plugin

Requirements

Before installing please make sure you updated your WordPress install to the latest version. The plugin has only been tested with the latest version of WordPress. Please also note, that in order for Probuilder to work the admin bar has to be visible in front end. Otherwise you won’t be able to control the activation button. Also note that since Probuilder uses modern technologies you will need a modern browser for Probuilder to work properly. Don’t even try using it with an Internet Explorer prior version 11 🙂

How to install

Installing Probuilder is as simple as installing any other WordPress plugin. Simply go to the WordPress directory and type in “Probuilder” or click here to download the ZIP file and then upload it to your WordPress install manually. Now just activate the plugin and Probuilder is ready to use.

How to use Probuilder

Probuilder is easy to explain. After you have activated the plugin you should be able to see a blue “Activate Probuilder” button in the top right corner in the frontend section of WordPress. By clicking the button Probuilder will now listen to your mouse. Simply hover over your page and you will see the color of the hovered element change. Now try clicking the element. A popup editor should open with different tabs, select boxes and input fields. The first select box you see is for adding responsive styles. This feature allows you to add styles only for specific browser widths. However the feature is a PRO feature and therefore disabled by default.

Just below you will see an input field with a path like #page .foo .bar. This is the DOM path and can be adapted by skilled users. This DOM path is the selector of the CSS rules you are applying.

Just next to it you can see an arrow pointing up. By clicking that arrow you can traverse up in the DOM tree. This will be visualized on your page by a blinking border around the parent element. So let’s say you clicked on an element but actually don’t want to change that element but the surrounding element. By clicking the arrow the DOM path will be adapted and you will be able to add styles for the parent element.

Next to the arrow you can see another select box. This is the pseudo-class and pseudo-element select box. You can use it to add styles to an element for example only if the mouse hovers over the element. Simply choose the desired pseudo-class or pseudo-element and click the plus icon next to it. The pseudo-class or pseudo-element will now be added to the DOM path.

Now to change the appearance of an element on your website simply enter the desired value into the appropriate property. If you want to change the width of an element just click on it and then in the popup go to Dimensions and enter for example 500px. You will see the element on your page change its width immediately. If you don’t like the new width simply change the value to for example 800px and you will again see the changes occur live. In some cases there is no input field but a select box instead. Simply choose the desired value from the select box and changes should again be visible immediately.

In the top part of the popup editor you can see three tabs: Adapt Styling, CSS-Editor and Settings. Until now we have only worked in the first tab. Please go to CSS-Editor now to see what it is and how it can be useful especially for people with web development knowledge. The CSS-Editor tab contains the input field for the DOM path and the select boxes for media queries and the pseudo-classes / pseudo-elements just like in the first tab. However just below there are two more input fields. The second one (the large one) shows you the generated CSS code. You can not adapt this code as this might break things. However you can use the first input field to manually add CSS rules. Please note that you should not add any selectors but directly add the property and value like so: property: value;

Let’s move on to the last tab Settings. For now all you can do there is to define whether the styles you are currently adding should be applied to the whole website or only to the current page. This can be very useful if you would like to change for example a color only in the current page.

Before you start adding or changing values now please note that it is important to follow the following order: first make sure the path is correct and you have selected a pseudo-class like “:hover” in case you need it. Only then change the values. The reason is that if you do changes first and then change the pseudo-class or adapt the DOM path all your changes will be gone.

Displaying added rules

After you have added new styles to an element and clicked “Save Changes” the changes will not only be visible to anyone visiting your website but also you can get an overview over all the changes you have done, delete styles you added or further edit the styling of an element. You can do so by clicking “All Probuilds” on the right side of your screen. You will then get an overview over all the styles you have added. By clicking on a DOM path the editor opens and you can further adapt its styling. By hovering over an element in the “All Probuilds” section a trash bin will appear which you can click to delete a rule you added before.