page-builder – Components

The “Components” menu under the right-hand toolbar when editing page-builder pages is used to add text, image and code blocks into your page. These are the components that give your page its content, such as headings, form fields and submit buttons.

These content blocks are customizable and text and code blocks can be saved to your shared component library to be used on other pages if you choose.

In order to add a component to your page you must first add a row to the layout. For more information on adding rows please read the help document here.

Adding components

To add a component to your layout, expand the toolbar by hovering over it with your mouse. Click on “Components” to reveal the options. Using your mouse, drag the component you wish to use into your layout.

You can add multiple components to a single row.

Text and Image Blocks

The components that are most commonly added to pages are text blocks and image blocks.

Text Blocks

Text blocks are used to add various types of copy to your pages. This could include instructional copy to supporters for completing the form or to add background information about your cause. They can also be used to add headings above form blocks, or extra text in between multiple form blocks to give additional information. You can also insert dynamic information like supporter data or donation transaction information into text blocks.

For more information on Text Blocks, click here.

Image Blocks

Image blocks are used to add a single image to your page. You can load one directly from your image library, paste in the URL from en external source, or upload a new image.

You can also add images to text blocks.

For more information on Image Blocks, click here.

Code Blocks

Code blocks are a special kind of block that can be used to add bespoke css styles or javascript (or additional html for that matter) into your page. They are generally used by more advanced users. Code blocks do not run when editing the page – they only run when previewing or viewing the page. They are therefore useful for scripts which might interfere with the operation of the editing software.

For more information on Code Blocks, click here.

Loading blocks from the library

You can also load pre-built text, image and code blocks that are shared with other pages in your account by clicking the “Load from library” button at the top of the text block editor.

Select the text block you would like to use on the page and click “Use selected component” to load the text block.

Once loaded, you can leave the text block linked to your library or remove the link so you can make edits to the text block without affecting the other pages it’s shared to.

To unlink the text block, click the “Unlink from library” button next to the save button.

Otherwise, save your block as normal. A dialog will open confirming that you want to use the linked content that also gives you the option to unlink the content.

You can also access the Component library outside of the page by going to Pages > Components and using the menu items on the left.

Moving components

To move a component, hover over the top-left side of the row to reveal the move, edit, and delete tools.

Click on the move icon and drag the component into the new position.

Deleting components

To delete a component, hover over the top-left side of the row to reveal the move and delete tools.

Click “delete” to delete the component. A confirmation dialog will appear before the deletion is final.