Design Blocks

Buttons Block

The buttons block allows you to create buttons that link to other content. To add text to a button, simply click on it and type in your desired text. To add a link to a button, click the Link icon in the block toolbar and type in your desired URL.

You can insert multiple buttons into a single block by clicking the Add button icon ( + ) next to your first button.

To switch from a horizontal row of buttons to a vertical column, select the outer container of your block (rather than an individual button block inside it) and you will find an option to switch the layout in the settings sidebar.

In the settings sidebar for each individual button, you can find options to:

Change the style of the button (Fill or Outline);
Change the button colour and text colour;
Select a default style for any additional button blocks you add to the post/page;
Change the radius of the button corners (to make the corners square, set the radius to 0);
Set the button link to open in a new browser tab;
Set the button to trigger a Pelcro modal (Subscribe, Login, or Register).

Linking inside pages and posts

You can use buttons to jump from one part of the page/post to another. For that, you'll need to:

Add an anchor: select a block (Separator block, Paragraph block) and, on the right sidebar, scroll down to the Advanced section > HTML anchor.
Add a text on the HTML anchor, like "lessons-3"
Now select the button and add a link. Anchors link starts with #, so you will add #lesson-3 as a link.

Columns Block

The columns block allows you to create a row with multiple columns. When you add a column block, you will be prompted to select a layout. (Skipping this step will create a column with the default layout, which is 2 50%-width columns.) After adding your columns, you can then create or drag other blocks inside them.

While a column is selected, you can change the width of that individual column in the settings sidebar.

In the settings sidebar for the outer container of the column block, you can find options to:

Change text colour and background colour;
Modify the number of columns in the block.

Group Block

The group block allows you to group multiple blocks together. After you create a group block, you can add other types of blocks inside it.

In the settings sidebar for the outer container of the group block, you can find options to:

Change text colour;
Change the background colour and pattern (Solid or Gradient).

If you’re having trouble selecting individual blocks within a group that includes multiple blocks nested within each other (ex: trying to select an image block within a columns block within a group block), try selecting the block using the block breadcrumbs that appear at the bottom of the page instead of clicking on the block directly. The breadcrumbs appear whenever you have a block selected and list all the parent blocks for the currently selected block.

Reusable Block

If you'll use a group block repeated times, you can create a reusable block.

Select the group block you’ll want to reuse.
Click on the three dots that appear in the toolbar.
Click on Add to Reusable blocks.
Give it a name.
Click Publish and then Save.

To add a reusable block you have already created, click on the + Block Inserter icon and select the Reusable tab. Click the block to add it to the post or page.

More Block

The more block allows you to configure a text excerpt for your post. Some archive pages that list posts on your site will display a short excerpt of each post along with a Read more... link that links to the full article. Inserting a more block into your content will make all the text that appears above the block part of that excerpt. You can only insert one of these blocks into each page or post. To change the link text that is displayed, simply click on the text within the block and type your preferred text.

In the settings sidebar, you can choose whether to hide or show the excerpt (all the text that appears above the more block) on the full article page.

Separator Block

The separator block allows you to create a horizontal line separator. Separators are placed between other blocks to represent a thematic break in your content.

In the settings sidebar, you can find options to:

Change the style of the pullquote (Default, Wide Line, or Dots);
Change the line colour;
Select a default style for any additional separator blocks you add to the post/page.

Spacer Block

The spacer block allows you to create white space between blocks. You can adjust the height of the spacer by clicking and dragging the blue dot at the bottom of the block or by using the slider in the settings sidebar.