What are Blocks?
Blocks are the foundations of any page created using the Pages Builder. Each block represents an individual piece of content - whether that be text, an image, or a code snippet perhaps. Almost any kind of page design imaginable can be achieved by breaking it down into Blocks. Be sure to have read the Pages Builder overview article for more of the big picture.
As noted in the article, each Block takes up a horizontal row, and thus blocks are stacked vertically - from top to bottom. That Grid Block allows you to have a number of columns, within you can insert Blocks - which is what allows you to have Blocks sit side by side. The rest of this article covers what is common to all blocks and their functionality, please see the individual pages for each specific Block for detailed notes on what each Block offers.
What Are The Different Blocks Types?
When creating a page you have the option of adding the following blocks to your page:
Text Block - The primary means of adding text to your page
Image - For adding a single image to you page
Code - For inserting a code snippet into your page
Spacer - For adding space between blocks
Video - For inserting a YouTube or Vimeo video into your page
Slider - For adding a rotating set of banners to your page
Grid - Allows for adding Blocks side by side, by inserting them into separate columns
Buy - Allows to add a button that adds one of your products to the basket when clicked
Button - For a button that can link to any URL of your choice when clicked
Block settings
Each block (excluding code block) will come with the following settings:
1. Block width
Block widths are pre-formatted frame sizes that can be applied to any block type.
Selecting a block width will either stretch or reduce the size of the block.
To set a block width, start by clicking on the block added. Then from the 'Block width' field, select a width type from the drop down menu. If you would like the text/image/video block to completely fill the width of the page, select Edge to Edge from the drop down menu.
2. Animation
Selecting an animation will add a motion effect to the block. This will come into effect the moment a user opens that page. To add a motion effect, simply click on block type and select an animation effect from the drop down menu
3. Spacing Controls
These control the padding for the particular block - that being the spacing between the edge of the block, and its content. Be sure to set these first for each block type.
