The Purpose of this Page
The purpose of this guide is to not only have a reference page (both front-end and back-end) for how a page should be created to achieve a uniform look throughout the site but also to educate the editors of the site on how to create legible, hierarchal flows that the reader can navigate without confusion. This will also allow you to create beautiful pages of your own using guidelines already coded for our convenience.
Quick Menu
Creating a Custom Page
To start a new page with the WPBakery Page Builder interface you will need to first go to Pages > Add New and select WPBakery Page Builder from the top. There are two methods of working in Page Builder: front end and back end. Front end will allow you to see the webpage as it is being created so you don’t have to go back and forth between the back end and the front end to see the results of your work. Back end will allow you to speed up the time it takes to create a page based on the ability to use the provided tools.
This section was created with a bottom padding of 60 pixels in height and 100% width. A section divider, Waves, was chosen with inversion enabled in the color white. This gives the section a watery separation between the blue section (ending) and the white section (beginning.) Remember, you may have to play with the divider settings to achieve the look you’re going for. These dividers can really highlight a page or section. I have saved this custom element to Templatera.
Page-Wide Settings
Using the Accordian element, choose thePage-Wide Setting tab you’re interested in and further additional information will be displayed.
Attention!
Do not use the page templates on the right side of the page labelled Page Attributes. This is for administration use only.
Default
The Default template is what you should be using most of the time.because it allows the full width of the site to be used. If you notice, the backgrounds on this page stretch to the edges of the screen while the text stays justified within the inner section. Another big advantage to this page layout is boxed layout does not provide navigation, it is a dead end page.
Boxed
Using the Accordian element, choose thePage-Wide Setting tab you’re interested in and further additional information will be displayed.
Example Layouts
This is a simple layout of how sections, columns, inner columns, and rows to help you better visualize how a web page is constructed. The Section has a green border. Rows have blue borders. Inner rows have gray borders. Columns have yellow borders. Notice how the element positions within the outlines of the bounding box. These bounding boxes are called ‘divs,’ a name originating in HTML. Each ‘div’ can be assigned ‘class’, a term originating in CSS. If HTML (Hypertext Markup Language) says put the words “Hello World” in a ‘div,’ or box, CSS (Cascading Style Sheets) defines aspects such as font, size, color, position within the div, and more. Similarly, we can use WPBakery’s Page Builder and Templatera plugins to achieve the same task without needing to connect to the server and hardcode it. A few of you have already been using this method.
Let’s take a look at some examples:
Row 1 Column 1
Row 1 Column 2
Row 2 Column 1
Inner Row 1 Column 1
Inner Row 1 Column 2
Inner Row 2 Column 1
Inner Row 2 Column 2
Inner Row 2 Column 3
Inner Row 2 Column 4
Inner Row 3 Column 1
Inner Row 3 Column 2
Inner Row 3 Column 3
Inner Row 3 Column 4
Inner Row 3 Column 5
Inner Row 3 Column 6
Total Theme Elements
Headers
Headers are used in a hierarchical format. H1, H2, H3, H4 is the order you should generally be using headers in. Some examples of how to use headers is if you’re breaking down topics in several sections to help get to the information you’re looking for quicker. The human eye will be drawn to bigger text, therefore we are going to use the larger headers for page and section titles. Let’s say you have an inner row with two columns and each needs information; this is a great time to use an H2 header. H3 and H4 are for those topics which cover a lot of information and you have multiple rows and inner rows.
Here’s a list of Headers 1-4 and their sizes:
Heading 1
Heading 2
Heading 3
Heading 4
Text Blocks
This is a text block. Text blocks are useful, customizable elements which allow the editor to relay a lot of information pertaining to an above heading without cluttering the users page. Text blocks have a plethora of options to edit text. Below are a few of the elements.
This is highlighted text.
This is a block quote example. Block quotes are used to emphasize a quote from an individual or company.
Dropcap
Boxed Dropcap