Page builder - How it works

Create a page

Your account comes with a couple pages setup. These are examples, that you can use and edit to your likings.

There are 2 options, to create a page: Create one from scratch, or create a new page based on a pre-made template.

Option 1: Create a page from scratch

Option 2: Create a page based on a Page template

A window will popup, that shows the available page templates. Pick one to continue.

Add page row

Step 1: Add new row

You can add a new row to your page. Each row has a certain layout, so you can have multiple items next to each other or have 1 item for the entire row. 

Step 2: Choose column layout for the new row

A window will popup, where you have to select the column layout for the new row. In this example we will choose the column layout with 2 equal columns. 
The row type allows you to set a header row, that is used for the top part of the page. We will cover this in a different guide.

Step 3: Add content

Add content

Step 1: Click 'Add content' on a row

To add content to the freshly created row, simply click 'Add content'.

Step 2: Choose a content block

Pick the type of content you want to add, at the 'Add a content block' window.
We will choose the 'Text (Markdown)' block for this guide.

Step 3: Enter content

The block will now appear and you can enter content. In this example we used the Text block, so the next step will be adding your text. Most content blocks have certain settings, that you can change to your preferences.

Row settings

If you want to, for example, move the new row to the top of the page, you can do so by dragging the row to top, by grabbing the 'Drag/change order' icon with your mouse.  

Settings, like text color, the distance to the next row, background color etc. can be configured in the 'Row settings'. 
To delete the row, just click the 'Delete row' button.

Row settings

• Row type
  • The first row of your page should, ideally, be a 'Header'. The header type will perform some extra magic on the row, that will make your page look better.
  • General rows should have the 'Regular row' type.
• Distance
  • Sets the distance (Padding) of the row. You can use this to create more spacing between rows.
• Background color
  • Sets a specific color for the row. Different themes will have different looks for each color
• Background image
  • Setup your personal background. Please use HTTPS urls!
• Vertical Alignment
  • This feature is best used when, for example, you have a row with 2 columns filled with text and an image. Setting this option to 'Middle' will make the text and image align vertically, so their vertical center is at the same height. This usually makes your page look prettier. 
• Text color
  • If your background is dark, we recommend to set this option to 'Light' to enhance the contrast.
  • If your background is light, we recommend to set this option to 'Dark' to enhance the contrast.