Skip to content

Page Builders

The Total theme has a unique built-in functionality called “Dynamic Templates”. This functionality allows you to use the WPBakery page builder to create a unique layout to be used for any post type or archive type and assign it globally. This means, you can create a custom design for your posts, pages, categories, search results,…

Dynamic Templates – Custom Page, Post or Archive Designs

This theme includes support for the Visual Composer plugin plus an additional plugin called “Visual Composer Extension” created specifically for our clients. The Visual Composer plugin and extension add a ton of drag and drop modules to your dashboard for quickly and easily building your site. Make Sure WPBakery Page Builder Plugin Is Installed &…

Building Pages With WPBakery Page Builder (formerly Visual Composer)

Total includes it’s own built-in icon set that you can use throughout your site. These icons were originally taken from the FontAwesome script but renamed into “Ticons” to prevent any conflicts with 3rd party plugins and to better optimize things. You can use the icons freely via HTML, however, if you want to add icons…

Theme Icon (ticon) Shortcode

To enable the WPBakery Page Builder (formerly known as Visual Composer) for your custom post types simply go to WPBakery Page Builder > Role Manager and under the user role you want to set the post types for you click “Custom” from the dropdown then check all the post types you want to use the…

Enable/Disable The WPBakery Page Builder For Custom Post Types

If you are going to use the WPBakery page builder to create multiple pages that have the same general design one of the easiest ways is to create a new “Template” so you can quickly load that template for your new page/post. One of the most popular uses is for portfolio items, most people will…

Creating & Using WPBakery Page Builder Templates

Important: It is NOT required for you to purchase the plugin separately, it is included for free and I will update it accordingly as well. However, if you already owned a license or prefer to purchase it as well then you can follow the steps below to enter your purchase code. That said, the WPBakery…

Activate Your Purchased WP Bakery Page Builder Plugin

Important: WPBakery modified the User Roles functionality so you can’t disable elements for Administrators. For this reason we released the “Disable Elements for WPBakery Page Builder” plugin which allows you to completely disable elements from the site regardless of user role. The WPBakery page builder plugin includes a built-in function to easily enable or disable…

Enabling & Disabling WPBakery Page Builder Elements

By default the Total theme has removed several WPBakery Elements we didn’t like or found a bit buggy. However, we’ve included a filter in the theme so you can easily re-add them if you must. Below is an example code you can add to your child theme’s functions.php file showing how to re-add a couple…

Re-Enable Removed WPBakery Elements

By default the Total theme adds a 40px margin below all columns in the WPBakery Page Builder, this allows for a better responsive site but it’s also very important to consider it when building your site so you can create perfect spacing between your elements. This margin can be altered though via the Customizer under…

WPBakery Page Builder Bottom Row/Column Margin

The Total theme includes many exclusive elements that extend the WPBakery page builder so you can add a lot more functions to your site. All these elements have “blue” icons and are tagged under the “Total” filter. How to Modify a Total Element via a Child Theme It’s not recommended to modify elements via a…

Exclusive WPBakery Elements

If you have various icon boxes and you want them to all be the same height it’s very easy to do. All you need to do is make use of the Grid Container element. When adding icon boxes inside a grid container they will all be the same height by default as the default align-items…

Equal Height Icon Boxes

Total includes a custom function for the Visual Composer (not included in the core plugin) that will allow you to specify the spacing between columns making it easier for you to create the best layout possible and not be stuck with the default 30px margin between columns. Simply click to edit your row and you…

Create A Row With Columns Without Margins

The WPBakery includes a function that will allow you to save any page builder module you customized as a new “element” or “preset” so that you can easily use it a gain. For example if you insert a heading a change the font size, color, background, etc you can then save it as a custom…

Saving WPBakery “Presets” or “Elements” (Element Templates)

The Front-End visual composer adds a small extra space at the top of the page when using the front-end builder in order to prevent the builder toolbar from going outside the container and not being able to edit things. See below:  

Extra Space At The Top In The Front End Builder

In version 3.0.0 of Total there was a crucial update to the Seperator With Text module, please see the important warning on the changelog – http://totalwptheme.com/docs/changelog/ – if you used this module in a lot of places and don’t have the time to update them all we created a little plugin that re-ads the old…

Old Seperator With Text Styles/Settings

The WPBakery page builder does include a function named “Grid Builder” which allows you to create custom layouts for the WPBakery code Grid elements. Important: Before you go on creating custom grids (which is actually a fairly bloated functionality) consider first making use of the Total “Post Cards” element which allows you to select from…

Advanced Grid Builder

Adding local scroll links to images is very simple and this guide will show you how, but first you will need to know how to add local scroll links to your site. Once you are familiar with creating your local scroll sections the next step is to add the link to your Image element.

Add a Local Scroll Link To An Image

The Total theme includes a little shortcode you can use to display the current year which is useful for adding to your site copyright without having to update it every year. The shortcode: 2024

Current Year Shortcode

The WPBakery is an awesome plugin but it does have a little “flaw” (not really a flaw but more of a nuisance). The WPBakery uses negative margins for it’s rows and columns to keep everything inline with the content, that’s good! However, when adding borders and backgrounds to your rows and columns this causes the…

Why does the Theme Make Adjustments to the WPBakery Rows?

If you are looking to alter a row via CSS the best way to do it is using a custom Class added to your row. This way your edits will be unique to that specific row but also it can help prevent issues with future theme/plugin updates. Important: Make sure to prefix your custom class…

How To Properly Target Custom Rows with CSS

In order to create a full-height section such as those on the “married” demo, all you need to do is create a row with the Visual Composer and select to enable the Full Height setting. Enabling the Full height row setting will make that specific row be the same height as the browser window when the…

Creating Full-Height Sections

By default when adding columns with the Visual Composer page builder the space between the columns is 30 pixels, however, this padding can be adjusted on a per-row basis easily via the a setting. See the screenshot below: And of course it is possible to add more spacing options via a child theme (filter + CSS) if…

Add More Space Between Columns in WPBakery Page Builder

The WPBakery page builder plugin plugin includes built-in functions so that you can easily “map” any shortcode so you can use it within the builder. For example if you are using a 3rd party plugin that has it’s own custom shortcodes you can use the “Shortcode Mapper” admin screen to include that shortcode as an…

“Mapping” Custom Shortcodes for use with the WPBakery Page Builder

If you want to add a module from the WPBakery page builder to your site you can do so in 2 ways: Adding Via Shortcode The first method is a bit of a pain in the butt but if you are just adding a simple module it’s easy and quick. Simply create a new blank…

Adding WPBakery Content To a Widget (sidebar or footer)
Back To Top