Page Builder: The Basics
The Page Builder lies at the heart of your campaign. On the first level contains a simple view of all the pages that make up your site. From there you can choose the page you wish to develop and find all the tools needed in the page builder. Let’s explore this together...
SKIP AHEAD TO
Understanding website pages and layout
A website is simply a collection of inter-related pages, kind of like a book. You have a front and back cover (
Header & Footer), and a number of chapters (
Pages). A website must have a landing page, often referred to as your Homepage, and often will contain links to other pages making up your entire site.
It is worth noting that some pages on your site are static, meaning that the content on them is not reliant on anything else – we call these
Core Pages. Whilst others are dynamic, where the page acts like a template reused each time to display changing content – we call these
System Pages.
A page’s structure is simple, kind of like a bookcase. You have a number of rows (
Row), made up of single or multiple columns (
Column), where each book (
Blocks) sits neatly. Understanding this simple page structure will open your eyes when looking at your favourite websites. Check out this example from Nike's page:
### accordion
## expand
# Example
You can see that Nike's page is simply made up of Rows, with either single or multiple columns. Don't be fooled, some Rows have Blocks in them that are sliders or 'inline buttons', so they are still just single Columns.
## expand
### accordion
Navigating rows, columns, and blocks
A good place to start is your Home page. From your sidebar select
Pages > Home.
Your Home page will already be populated with content based on the template you chose. This just gives you a good starting point.
Firstly,
Rows. Hover over your page, where you will see a
Settings box appear on the right hand corner. This is the
Settings for your row. To discover where the next row starts, simply scroll down until another box appears.
Second,
Columns. These remain hidden, but using your eye you can most likely guess how many columns are in each row, just by seeing how the Blocks are laid out. You can though check this in your Row settings.
Thirdly,
Blocks. These are the pieces of content that are placed within your Columns on Rows. They range from text, images, forms, animations, and more. Each has a specific purpose and unique attributes, just like any good book.
### accordion
## expand
# Add / Delete / Move a Row
- To add a row, simply select the + Symbol found at the bottom-right. Click + symbol, and select the column structure for that row. If you wish to place a row underneath a specific row, you can also find the + Symbol at the bottom-center of each row.
- To remove a row, simply hover over your row and select the Trash icon from the rows settings menu.
💡 Made a mistake? Undo your changes with the
Undo icon at the top of your page.
- To move a row, you can either switch rows using the Switch icon found at the bottom-center of a row, or alternatively duplicate the row using the Duplicate icon found in the rows menu settings. This allows you to place the row anywhere you like using your scroll.
## expand
## expand
# Add / Move a Block
- To add a block, select the + Symbol at the bottom-right of your page, then select the option on the right – add block. You’ll be presented with the block menu, showcasing all the blocks available to you. Start by adding a Heading block by selecting and then inserting on the column you want.
- To move or duplicate a Block so you can place it elsewhere on your page, simply highlight the block and select the Copy or Cut icons to move or duplicate.
💡 Explore all the blocks and what they can do in this helpful Guide –
Blocks: The Library
## expand
### accordion
Exploring the settings
Rows, columns, and blocks each have settings you can adjust. For Row and Block settings, simply highlight and select the
Settings icon.
Row Settings
Within Row settings you can set colours and background images. You can also select the
Columns tab to adjust padding and margin settings for your columns within the row. Under the
Advanced tab you’ll find responsive design and custom class settings also.
Block Settings
Each block contains unique settings relating to the block, though commonly will have
Style and
Advanced settings you can adjust.
💡 Be sure to save your setting adjustments using the
Tick button, or simply close to exit.
Where to next?
Using the page builder becomes easier every time you use it, so start playing around with your environment. Further Guides are there to help you explore all the features you need to make your perfect campaign. Next, we turn to the Donation Form, a significant Block you will use across many of your campaigns.
FAQ’s
### accordion
## expand
# How can I add more columns to my rows?
Once you have added a row with a column layout, you cannot make changes to the number of columns. Simplest way is to create a new row with your desired columns and move or copy Blocks across.
## expand
### accordion
Cannot find the support guide you are after? Head on over to our YouTube channel 📺 for more creative content to help you go further. You can even leave us comments, suggesting new content ideas 🤯