WPBakery Page Builder
Webnus themes come with a visual page builder. This allows you to forget about shortcodes and create even the most complex layouts within minutes without needing to write a single line of code!
Our visual page builder is based on the widely popular WPBakery Page Builder by mixey. It’s got a very simple and intuitive interface. But before getting started with building layouts, you may find it useful to have a look at WPBakery Page Builder documentation:
To start creating a new layout, click Backend Editor:
Now WordPress editor is changed to WPBakery Page Builder canvas. It works similar to the regular WPBakery Page Builder.
After clicking Add Element, you’ll notice a wide array of interface elements (shortcodes) developed exclusively for your theme. Their interface is built based on the same principles as standard WPBakery Page Builder shortcodes. So, if you’re already familiar with WPBakery Page Builder, working with our shortcodes will be a cake walk!
This image shows a list of all the shortcodes you can use in Webnus themes. You can use category filter and search element name fields to find the shortcode you want in the blink of an eye. Also, you can find all of Webnus shortcodes in Webnus Shortcode tab.
Check out the image below. It tells you all you need to know about the different options:
- Section Setting
- Row setting
- Inner Row
- Inner Row Setting
- Column setting
- Column layout
- Delete column
- Add element in row
You can divide each part of the page into different sections and use Bootstrap 12-column row within the sections. This option is available automatically, if you add a shortcode to the page, you will have the main section and row.
Add a new section and immediately after the section, you need to put a row.
In Section Settings, General tab, you can:
- Check Stretch Content (full width content) to make a section use full width.
- Full height section will display the section in every screen as full screen. If you don’t check this option, you can put the height value in the field below it. If you don’t set this value, it will be automatically set based on your page elements.
In General tab, you can also set the Content Position and adjust the Overlay Pattern. There are other stuff such as text alignment and section color here as well.
In the next tab, you can set the background and adjust it.
With shape divider, you can give a shape to sections. Check out the image below:
Next up is background video and animation after that. it determines how the section will appear.
The last tab is Class and ID which are used for customizing or creating the mega menus.
Row settings are similar to section settings, but it lacks shape divider and here you can set your content to display in full width. Also, in row settings, we have a styling tab where you can set the padding, margin, and border.
In addition to Background and Design in inner row settings, which take care of styling options in Inner Row, there are also certain section and row options in the General tab.
Inner Column Settings:
Here you can find the same styling options for inner columns. In the General tab you can customize ID and Class. Surprise! we have a new tab here which gives you a little bit of control over Responsive Options.
What you just read are the main structures for building a page. For all of them you can use shortcodes in Row, Inner Row, and Inner Column sections, if you fancy being a pro.