An important part of Florists Pro and getting it styled like our demo is the use of the Visual Composer. It allows you to add content areas and create columns for any widths you like. There are elements that can then be added to these areas to fill out your site in a nicely formatted way.
We’ll run through a few basics here and how you should utilise the Visual Composer in this theme.
First of all the Visual Composer will need to be installed. It is packaged in the theme, so if you do not already have the plugin installed, you will be asked to do so via a notification at the top of the page when you activate the theme. Follow the instructions here to install and activate the plugin.
Adding a page
Next you will need to add a new page, so go to Pages -> Add New in your admin.
Once you are on this page, add a title and then under the ‘Page Attributes’ box in the right column, make sure that ‘Visual Composer Template’ is select for the ‘Template’ option there. This will allow a full width page that gives you complete freedom on an essentially blank canvas.
Selecting the Backend Editor
Once that is complete the next step is to make sure that you have the ‘Backend Editor’ view selected for the editor. By default the Classic View will be selected, so make sure you click that. It will look like the image below.
There is of course nothing stopping you form switching to the Frontend Editor; we just prefer the Backend Editor ourselves :)
Now you will need to add a row so that you can add elements to it. So click ‘Add row’ and it should drop one onto the Visual Composer editor for you.
Depending on what element you want to add and how you need that to be displayed, you may need to add a class to the row. This is because certain styles in Florists Pro are required to make things ‘look nice’ so we need a way to tell how it should be styled; this is done by adding that class. There aren’t many, so it should be too complicated and we’re always available for support if you do have a few struggles.
These classes are added by editing the row you just added and adding it to the ‘Extra class name’ option or that row.
The classes available are as follows:
- ftcontainer – this is used on most top level rows. It sets the row to have the centred display and padding on either side. More often than not, you will want to add this to a top level row.
- ftrow – this goes hand in hand with the ‘ftcontainer’ element to get that padded content, so you generally would add a row with ‘ftcontainer’ as the class and then another row inside of that with ‘ftrow’ as the class.
- nopadding – this is generally used when you have a full width element. The Visual Composer adds padding to the sides, so we need to use this class to remove it so it is full width. Generally used on the home banners element.
Design Options on rows
When you add a row, you may think that some extra padding or a background colour/image may be relevant; this is also possible in the Visual Composer.
To do this, edit the row you want to change and then click the tab for ‘Design Options’. In here you will see options for the margins/borders/padding and background options. We add a padding to the top of 60px and to the bottom of 40px for most of our top level rows. As seen below.
Those are essentially the basics on how to use the Visual Composer in this theme. Then it’s mainly a case of exploring the elements you have to choose from and letting you creativity go free to get the layout to suit your site’s needs.
Elements are added to rows and this done by clicking the ‘Add element’ button. It will then show a popup with the list of elements at your disposal. There are some default ones along with some custom ones for Florists Pro.
Once you click one you are generally thrown a list of options to fill out and select from for that element. so fill those out and then save to close the popup. From there the element can be edited, removed or dragged into another position in the Visual Composer; it’s really flexible.