Text blocks
Text blocks are a frequently used component that can be dragged into your page-builder pages. They are used to display headings and text, and can also display images. You can place multiple text blocks in a page. Like other blocks, they are placed inside rows.
Adding Text Blocks
Just like text and image blocks, you drag in a Text Block from the under toolbar’s Components menu. An editor will open up:
![](../__attachments/38371777/Screen-Shot-2018-09-07-at-09.55.36.png?inst-v=acda4611-64bf-44bc-bfd3-437b5cbec545)
You can simply type in the text you want to add:
![](../__attachments/38371777/Screen-Shot-2018-10-18-at-10.36.33.png?inst-v=acda4611-64bf-44bc-bfd3-437b5cbec545)
Clicking Save will place the text block into your page:
![](../__attachments/38371777/Screen-Shot-2018-10-18-at-10.37.23.png?inst-v=acda4611-64bf-44bc-bfd3-437b5cbec545)
Saving Text Blocks
To save your changes, just click the Save button. If you want to save to the library (so that you can share the same text block across multiple campaigns) then click the “Save to library” button. Library components can be edited in a page or via Pages > Components > Text blocks.
Editing Text Blocks
You can edit an existing text block by hovering over the block in your page and clicking Edit.
![](../__attachments/38371777/Screen-Shot-2018-10-18-at-10.39.46.png?inst-v=acda4611-64bf-44bc-bfd3-437b5cbec545)
You can also Delete the text block entirely in this way, or use the arrow icon to drag the text block elsewhere.
Once you edit the text block, you will see the same panel in which you edit edit the contents. There are various buttons to help format your content:
![]() Source | This button will let you see the HTML source code of your text block. Note that some code is not allowed within a text block, so you would want to use a code block in these cases. (We recommend using a code block for iframes!) |
![]() Cut, Copy, Paste, Paste Text, Paste From Word, Undo, Redo | This group of buttons allow you to cut, copy and paste content. Note that pasting directly from Word or from a website is not advised since it will bring through its own styles. You should instead use the Paste From Word button. The last two buttons allow you to undo or redo a change. |
![]() Find, Replace | These allow you to find text within a block, or replace all occurrences of it |
![]() Add link, Remove link, Add Anchor | The grey chain icon allows you to add a link into a text block. Note that if you want to link to a page-builder page you should use the blue chain button. This allows the session of the supporter to be carried into the next campaign, pre-populating any fields. In the same way you can send them to Page 2 as long as the fields on Page 1 are known. You can remove links by clicking into the link and pressing the remove link button. The anchor button allows you to add “bookmarks” within your text block. You can then add a link that scrolls the page to the anchor |
![]() Insert table, Insert horizonal rule, Insert symbol, Insert page break, Insert Image | The first three buttons allow you to insert a table, a horizontal rule (line) or a symbol such as accented characters or copyright symbols. The page break button would not be of much use but can break the page for printing. The last button allows you to insert images by accessing the image library and uploading new ones. |
![]() Bold, Italics, Underline, Strike-through, Subscript, Superscript, Remove formatting | Allows you to format text as described. The last button can remove any formatting from the text that you select. |
![]()
![]() Insert numbered list, Insert bulleted list, Add indent, Remove indent, Add quote, Add Div, Left, Middle, Centre, Justify align, Text direction left-to-right, Right-to-left, Set language | This set of buttons allow you to format paragraphs. The first two buttons are particular useful for creating lists. The indent buttons add or remove a 40 pixel left margin to the paragraph. The quote button adds a tag around the paragraph. The Div button adds a tag with chosen classes. The four align buttons can align text and images. You can also change the text direction and set the language. |
![]() ![]() | These drop-downs allow you to more specifically format text. It is generally not advised that you use these other than the “Normal” dropdown. This is because typefaces, font sizes, colours and so on should be controlled by your template. That means that every paragraph is consistent, every heading and so on between pages. However the “Normal” dropdown allows you to set headings for your pages. If your template has styles for Heading 1, then your main headings will look the same across every page. |
![]() Dynamic buttons: Insert Campaign Link, Insert Static Link, Insert User Data, Insert Donation Data | These buttons allow you to use the Engaging Networks functionality in your text blocks. The first button allows you to add links to another Engaging Networks page, for example on your thanks page, and pre-populate it (remembering who the supporter is across campaigns). The Insert Static Link allows you to insert links to other pages, just like the grey link button described above. The Insert User Data button allows you to insert user data, such as first name (e.g. Thanks Leanne for donating!). Note that it will not display this data if the data is not known, or the supporter is not “loaded” into the page yet. For that to happen, the email address field needs to have been submitted. The Insert Donation Data allows you to insert some data once a donation has been made, such as Amount. |
Mobile version
You can optionally add a mobile version of your content. This is only required if you wish to display different content for mobiles. For example, you may want show less text, or if you don’t want the mobile version to display an image inside the text block. Note that your stylesheet should be used to handle responsive design.
To enable this, tick the “Add mobile version” checkbox. This opens an additional WYSIWYG with the option to copy the content from above.
![](../__attachments/38371777/mobile-version.png?inst-v=acda4611-64bf-44bc-bfd3-437b5cbec545)
Styling using the palette icon
You can adjust some of the styles applied to the text block by clicking on the CSS editor icon
Style | Description |
---|---|
Custom class names | You can add a class to your text block which can be then be targeted using your CSS |
Font color | Set the font color of the text within the block. |
Background color | Set the background color of the 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.
Locales
If you are using locales to display different content to different browser languages, you can switch to the different content of the text block by clicking on the flag icon top right.