WPBakery

WPBakery

WPBakery is an easy to use drag and drop page builder that will help you to create any layout you can imagine fast and easy. No coding skills required!

Here are some of the basics of working with WPBakery:

By default, when you create a new page the traditional page editor will be used.  In order to use WPBakery, you will need to have the “Classic Editor” plugin installed and activated. With WPBakery installed on a website there will be a new button that you can press that will enable WPBakery.  WPBakery calls their page builder “Backend Editor” and the traditional page editor when you aren’t using WPBakery they call “Classic Mode”.

WPBakery is made up of Rows, Columns, and Elements. There are a lot of elements to choose from.  The most common element is probably “Text Block”.

As you get more familiar with WPBakery you can make some really amazing layouts that work great on all device sizes without knowing any HTML or CSS.

 

WPBakery is included with The7 Theme. Otherwise, it can be purcahsed from codecanyon.net.

 

**Originally, WPBakery Page Builder was called Visual Composer.  Those 2 words at this point are sort of synonymous when referring to the backend page builder.  However, the reason that WPBakery changed the plugin name is because they came out with a completely different plugin that specializes in just Front-End editing and they wanted that one to be under the “Visual Composer” name.  So newer videos we will try to use the WPBakery name but some will still refer to “Visual Composer”.  Just know that if you see a backend editor of “Visual Composer” then it is “WPBakery Page Builder”.**

Using and Saving Templates

How to make a Row / Column or Element linkable

If you are ever in need of having an entire column or row or element of some sort linkable rather than just the content within the box then the following tricks will allow you to do just that.

Take the following jQuery code and put it in the custom scripts section of the website or if you are only wanting the effect on one page then add a raw js widget below where you need this to happen.  You will need to add a custom class to the section you want to be linkable and then replace “.cards” with whatever class you use in the js code below.

[js]
<script type=”text/javascript”>
jQuery(function($){
$(“.cards”).click(function() {
window.location = $(this).find(“a”).attr(“href”);
return false;
});
});
</script>
[/js]

What this code does is it looks for the class (.cards) and then it looks for an a tag within the class and copies the href and applies it to the (.cards) class.  Because the (.cards) class still isn’t an “<a>” tag it won’t look like a link when you hover over it but if it works, when you click on the element it should still link regardless.  Once you confirm it works then I would recommend adding the following CSS to make the hover action look like a link:

[css]
.cards:hover {
cursor: pointer;
}
[/css]

Future Video Goes Here

Template Library