At SupaDupa, you a have a powerful Pages Builder in your hands, the ability to create pages to your liking, without the need for any technical know-how. In this article, we provide a breakdown of the essential concepts you must understand to get productive with the Pages Builder. To whet your appetite, here're a few of the Page templates which demonstrate what can be achieved:
How the Page Builder works?
You’ll notice that when you hover your cursor over a particular block, controls pop-up which allow you to sort or delete the block. Clicking on the ‘trash’ icon will delete that particular block, and if you hold down the cursor on the ‘double arrow’ icon - you can then drag up or down, to reposition that particular block.
New blocks can be added to a page when clicking the ‘Add Block’ icons - which are positioned at the top and bottom of each page, as well as in between each block. These ‘Add Block’ icons are highlighted when rolled over, and the specific icon clicked on determines where the new block will appear. Upon clicking on the ‘Add Block’ icon, you’ll be presented with the panel display the various available block types.
So, to recap: A page in made up of content blocks, each of which take up a row of your page by default, and are stacked vertically. So how do you put blocks side by side? The answer is with the Grid Block.
The Power of the Grid Block
The Grid Block provides the ability to have any number of blocks appear side by side. Much like other blocks, a Grid block takes up a whole row of your page, and can have any number of columns. The power comes with the ability to then add blocks to any of the columns.
Clicking on any Block contained within a Grid, will load the settings for that particular Block. So to access the settings for the Grid itself, click on the ‘settings’ icon from the set of purple controls that appear. The other icons serve the following purpose:
Double arrow icon - Click and hold, then drag up or down to sort the Grid
Trash icon - To remove the Grid, and all contained Blocks from the Page
Double Page icon - To clone the Grid (the clone will then appear below)
Adding a new Block to a column works much in the same way as adding a Block outside of a grid - you simply click the ‘Add Block’ icon at the top of a Grid column, or between any existing Blocks of a Grid. To help clarify that you are working within a Grid, the usual controls appear orange, as opposed to green as shown here:
Page Settings
The only must-know in order to work with the Pages Builder, is the Page settings section which provides the means to easily preview your page, along with it’s general settings. To access the settings for a page, you’ll want to click on the ‘Page’ icon from the tabs that appear at the top left, under the ‘Save changes’ button:
The settings are as follows:
Page title - This is the name you specify to help you identify the page within your Pages List. It is also used to generate the starting path (browser URL) for your page.
Page path - Once you have saved a page, you have the ability to set its path. The path is used to make up the URL for a page. Based on the screenshot above, the page will be found at: example.com/pages/summer-lookbook. By being creative with the Page path, you can add hierarchy to your pages, for example: /lookbooks/2016/spring-summer.
Meta Keywords and Description - These fields allow you to set keywords and a description which then appears in the <meta> tags of your Page. Keywords are of decreasing benefit to SEO in recent times, but the Description field is often what is displayed alongside your page result in Google for example.
You are now ready to create your first page!
If you get stuck, or have any comments, please do reach out - we'd love to hear from you.
Be sure to check out the full set of Pages Builder related articles - there's goodness therein!