Learn Visual Composer

By December 25, 2019Learn WordPress

In this video we’re going to explore another page builder. The WP Bakery Visual Composer. The visual composer is super popular. One of the main reasons it’s so popular is because it comes bundled with many WordPress premium themes.

Support for visual composer when using a premium theme.

A premium theme that we have used a lot in the past for building client websites has been Fortuna. This premium theme comes with the visual composer plug-in bundled into the zip file when you download the installable theme files. The version of the visual composer plug-in that comes with your premium theme is the free version so you don’t get many of the features that list that are listed here. you may get a lot of elements that you can put into your page you might get any templates or add-ons. you’ll get the theme builder obviously and you get a year of updates but the way this works is your premium theme say for instance, Fortuna we’ll be releasing new versions of this theme which you are entitled to download as long as you have a license a valid license. Every time you download your latest theme you should be getting a new release of the visual composer as well. That’s how that would work but you won’t get support directly from
visual composer through your theme that your support will be based entirely on your theme. You will have to contact your theme developers to get support rather than contacting the visual composer plug-in WP bakery people.

Now, once you have installed your premium theme or you’ve installed your free version of the the visual composer plug-in. We can start building pages. let’s launch straight into this and see how their visual composer works. Im especially interested to see how it stacks up against Gutenberg.

Getting started building pages with visual composer.

Right now we’ve got Gutenberg and visual composer installed. To allow the WP bakery to be your primary builder you just click this button here and this will take you to a new screen. you’ve got one more click to go. now you need to click this button ‘the backend editor’ and now we’re exposed to the visual composer.

adding modules to the page with visual composer

We can tell that because we can see the visual composer text block here so this text block is the first visual composer block that were being exposed to. We can also see the WP bakery page builder panel with the plus icon, the templates icon.. so this plus icon will allow us to add more components to the page. Like this row module, other modules we can add to the page. There is so many built into the fortuna theme it’s quite overwhelming at first. We will explore a few of these momentarily.

The “bakery hat” icon just takes you to their WP bakery website.
A few more buttons over here that look a little bit scary. this one here just does undo, that one does redo, this one put you in full-screen mode. let’s get out of that. This icon cog wheel says page settings but it’s really just for CSS code. That’s stylesheet code.

The undo is just to undo your last change. if i make a change, save that and then I undo so now that changes has been removed, if I undo again then it remove my row that i added in at the start. That’s a clever little undo feature.

You should not need to use Gutenberg if you are using Visual Composer.
now if I want to click to access gutenberg I can. not that you’d want to flick to Gutenberg. I can’t think of a reason why you’d want to use 2 page builders. sticking to the one page builder is a good idea.

Building page layouts with columns in visual composer

One of my favorite features about the visual composer is the columns. I could take this one column content component here I can convert it into two columns. That leaves me with an empty column here which is fine. I could leave this column empty or I could add an image. I’ll add the image from the media library we can upload an image from a computer or we can choose from an existing image in the media library. We’ve got a choice of sizes , captions, alignment, what happens when you click the image.. Pretty standard WordPress options for images.

Create a 3 column layout with visual composer.

I want to create a new row and set the columns. then I could add content within each of these columns and these columns would automatically be responsive. So on mobile, on a mobile device that would all stack on top of each other. I don’t have to do anything. It’s very, very easy way to create the page and populate it with content.

Add a button and configure button settings.
I think the success of this page builder can be contributed to the fact that it gives you such high level control over all the element settings. I wanted to add a button to the page. it gives me quite a lot of options for configuring this button. I should be able to configure the color, the hover colors, color of the text, the styling of the button. Here we go there’s some preset color options. we’ve got some button styles. boarder radius and button icon as well. so that’s actually not that many I’ve seen things with way more options just for a single button. the options that you get do
depend a lot on the theme that you’ve installed.

Fast page building.

Another awesome feature of the visual composer is the speed in which you can build pages. We can we’ve got this duplicate button here and this icon here means we can drag. that’s a really cool feature. Great for really speedily building the page. there’s also all sorts of cool design elements that you can throw in. and then we’ll add in a little separator an icon. Position that in the center. We’ll get a cooler icon. yeah okay the happy face. copy that a few times and drag it over here. We can build these nice three column grids that you see everywhere. We’ll do a quick preview to take a look in the frontend. that’s not really. we want to Center the text and we want to Center the button as well.

and we want to put a bit more space below the icon. Center the text. you can see how the trap that we’re falling into here is we have to do everything again and again again it’s quite repetitive. Even though it’s fast, it’s quite repetitive. I said we want to center the button but there’s no alignment option for this button which i think is a bit of a flaw in the Fortuna theme button settings.

Using css to fix issues with visual composer limitations.
I’ll show you another way around that. If we just preview just to see where we are again. we just need our button to be centered. What I’ll do is I’ll just throw on a little CSS. we’ll call this “our_button” just for simplicity sake. we will copy that class onto all the other instances of the button. now we go up to the page settings or the CSS settings and we popin the rule. that should do it. It might need a display:block as well. That should fix our problem. that we don’t have any alignment settings on the button. let’s preview that. It did not work.

I found the issue in those style sheets one of the styles is being overridden their display block to display block style is being overridden by this style. Which is coming from the fortuna theme. to override that we’d have to write in a few extra styles. Now our display block is actually working because I turn the other one off. we want to text-align:center as well. this isn’t a CSS tutorial but so let’s just skip ahead.

Using the spacing element

Save those changes and preview that now and that’s what we wanted now we wanted to put a little bit of space below the icon so Fortuna gives us a pretty cool little visual spacer which we can add in a space. I thought there was a little spacer icon here. There it is. “spacing” okay so here we can set the 20 pixel space which is good. I like this because it’s visual we can see the spaces which is great.We can control the spaces. we can adjust them if we need to.

Add in a title module

I’d like to also put a title above these columns as well. because it looks a bit lost at the moment. so I’ll add in a fortuna heading module.

Okay again preview, we’d also want to Center this heading. as well so I’m gonna delete those and so the alignment there is good. okay now duplicate again. Preview again. That’s looking a bit better. that’s a pretty cool little three column content feature of my site.

Next steps

there’s many other things I could continue to do to this to finesse it. what I want to do next is add a full-screen background color and add more top and bottom spacing to this component. Then I’m gonna show you how to copy this component and put it onto a new page or even a new website.

Adding background colours and spacing to your rows.

If we go to our row settings here the row settings are cool. We’ve got all sorts of stuff here like full height row. okay let’s go for full height row. Where do you want to position the elements in the columns? I nt them to be positioned in the middle. that’ll be cool. we’ll take a look at that feature. let’s just take a look at that feature. see what that does for us. If I preview. that’s giving us huge space around it. not too bad. that could be a bit too much space though. Let’s undo that and what we might do now we can set our space between our columns if we’re unhappy with the way it currently looks.

Setting full width panels

the main feature I want to show you is row stretch so we can stretch the row. which i think is what we want. yeah we want to stretch the row. we could stretch the row and content but we’re just after the row.

We want the content to be still restricted width. we don’t want the content to be stretched all the way to the edge of the screen. preview that and we probably won’t even be able to tell actually unless little bit of background color.

Let’s set the background color of this entire area. Preview, now we’re getting what I needed. which is I wanted the row to stretch all the way to the edge. Now I want some padding on that top and the bottom design options it’s got padding put 200 on the top and then 200. preview and that’s looking pretty nice.

there’s lots of space around it quite the nice feature.

Saving reusable components with visual composer.

Let’s save this as a reusable component. We can add it to other pages easily. Saves us rebuilding it if we wanted this feature on other pages. we should be able to do that so if I just go back to my row settings. I’ve got this option here to “save it as template”. I’m gonna call this “three column feature”. Save it. I wait until it’s finished saving. now it’s finished. This template has been saved.

Adding the saved element to a new page

If I add a new page I will just call this a lot my launch my page builder and I’ll just call this “about us”. back into editor now to access our saved feature we go to templates icon here and we see a “three column feature”. Add that onto the page and there we areaa. click preview and there we have it. That’s been saved. Now notice our CSS hasn’t worked because we need to also copy the CSS that we wrote in the page settings. copy that and paste it into it into here on a new page. This CSS is only affecting the page that we’re currently on. I’ll go and grab that CSS.

That’s how to copy one component from one page to another. now if we wanted to copy this component as well as all the other components on the page to another page in our website or another website you also using visual composer….

let’s say we duplicate this component here one more time and then we go to classic mode and then we go into a text mode make sure you’re on the text mode. we copy all of this code here. Go add new page. Launch the bakery and in the text field. Paste it all in there.

The visual composer is a very powerful plugin especially with the cloning features. cloning components and reusing
components on different pages and being able to copy all the code from one page to another. we did fall into a little bit of a trap where were we were configuring individual elements and that was becoming quite repetitive and taking a bit of time but it was it is a really fast builder and it’s really quick to throw pages together. I’d still choose Gutenberg over visual composer because gutenberg is native and it’s made by WordPress and even in a short sort of 20 minute demonstration of the visual composer we did find bugs we’ve found some features that should have been built in but just
were not.

Quality of code

the code that visual composer produces on the front end is quite bulky and bloated and it becomes a hassle to
style because it produces so much HTML on the front end which I’m not a fan of. I don’t think there’s anything that visual composer can do that gutenberg couldn’t. Gutenberg is free. it’s free and here you can see with visual composer that live we’ve got this bulky icon here which is basically just an ad for their to sign up at their and buy the premium version of the plug-in and no doubt there are some super powerful features in in the premium version and it is a powerful tool I just don’t think you need it now that gutenbergs here

if you’re gonna choose a builder I’d choose gutenberg. some painful aspects of the visual composer are sometimes it’s hard to find little elements that sort of built in like for instance padding’s and stuff can get really hard to locate when they’re hidden because we’ve got like a module within a module, within a module, within a module type situation and in all areas is a place to store padding. it becomes sort of really tedious process of finding where the padding is
being applied to.

That’s it, if you are stuck with the visual composer then good luck with it. if you’re in a situation where you can
choose gutenberg. I would certainly choose Guttenberg. I’ll see you in the next video.