The “Components” tool is used to add text and image blocks to your Page Builder pages. Both types of content blocks are customizable and text blocks can be saved to your shared component library to be used on other pages if you choose.

NOTE: 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 tool options, text block or image block.   

Using your mouse, drag the component you wish to use into your layout.

NOTE: You can add multiple components to a single row.

Text and Image Blocks

There are two types of components available to add to your page: 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. You can also insert dynamic information like supporter data or donation transaction information into text blocks.

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.  

NOTE: You can also add images to text blocks.

Creating text and image blocks

To create a new text or image, add the component to your layout following the instructions above. For a text block, a WYSIWYG editor will open up on the screen.

 

You can insert dynamic data into the text block by clicking the blue buttons. This will allow you insert dynamic data values such as first name (if known), donation date and amount. You can further customize those values with the pop-up.

Once you’ve added your content you can optionaly add a mobile version of your content by checking the “Add mobile version” checkbox. This opens an additional WYSIWYG with the option to copy the content from above. This can be useful if you don't want the mobile version to display an image inside the text block, for example.

To save the text block, click “Save”. To save the text block to use on other pages click “Save to library”.

For an image block you will have three options. Paste in the URL of the image from an external source, browse your image library for an existing image, or upload a new one to use for the image block.

You have the following options to format an image inserted as an image block. 

Option	Description
Width	Sets the width of the image. This can be set in pixels, ems, or as a percentage.
Height	Sets the height of the image. This can be set in pixels, ems, or as a percentage.
Class	Set the CSS class for the image. We use “pageImage” by default, but you can change this to match your custom CSS if necessary.
Alternative text	This is the text that is displayed if your image cannot be loaded or if a screen reader is reading the page allowed.
Alignment	Align the image to the left or right of its containing HTML element.
HSpace	This is the space around the image to the left and right and is measured in pixels.
VSpace	This is the space above and below the image and is measured in pixels.
Border	Add a border to your image measured in pixels.
Ratio lock/unlock	Use this to lock/unlock the aspect ratio of the image so you can safely set your width and have the height automatically adjust to the new size.
Reset size	Reset the size of the image to its original size that is stored in your library.

NOTE: Even though these options are given you can also control the way the image appears on the page using CSS.

NOTE: For more information on units of measurement used in CSS click here.

NOTE: If you wish for an image to have a consistant full-width ratio for different screen widths, set width as 100% and height as "auto".

To save your image block, click “Save”.

Code Block

For a code block, a WYSIWYG editor will open up on the screen.

Once you have added your custom code you click “Save” to save the block to the page. To save the code block to use on other pages click “Save to library”.

NOTE: Code blocks only render when previewing the page in a browser or by loading the "LIVE" URL.

Styling text blocks

You can adjust some of the styles applied to the text block by clicking on the CSS editor icon  at the top of the text block window.

The following styling options are available for text blocks: 

Style	Description
Font color	Set the color of text within the text block.
Background color	Set the background color of the text block.
Padding	Set the padding for the text block. These are measured in pixels, ems, rems, points, or as a percentage. You can also set top, right, bottom, and left sides independently.
Margin	Set the margin for the text block. These are measured in pixels, ems, rems, points, or as a percentage. You can also set top, right, bottom, and left sides independently.
Border	Set a border for the text block. These are measured in pixels, ems, rems, points, or as a percentage. You can also set top, right, bottom, and left sides independently.
Border radius	Use this to add rounded corners to your text block. These are measured in pixels, ems, rems, points, or as a percentage. You can also set top, right, bottom, and left sides independently.

Check the checkbox next to the styles you would like to update and set the values.

NOTE: Even though these options are given you can also control the way the text block appears on the page using an external style sheet.

Loading text blocks from the library

You can also load pre-built text 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 unlick the text block, click the “Unlink from library” button next to the save button .

Otherwise, save your text 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.

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.