Text Block Element
The Text Block Element is the element you will use most. It holds regular content: paragraphs, lists, links, inline images and anything else you can write in the visual editor.
Beyond plain text, it can split long content into several newspaper-style columns with an optional dividing line, set its own typography and color, and limit its width so a paragraph stays easy to read.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Text Block Element
Add the Text Block Element to any column and write or paste your content into the Content field. The editor works like the standard WordPress editor, with headings, lists, links and media.
For longer texts, set Number Of Inline Columns to split the content into columns. Column Min Width lets the columns collapse gracefully on smaller screens, and the Rule options add a vertical line between them.
On the Design tab you can override the typography and font color for this block only. Leave them empty to follow the global text settings, which keeps the whole site consistent.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Text Block. Change them there to style every Text Block at once.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Number Of Inline Columns | Set the number of columns the text should be broken into. IMPORTANT: This feature is designed to be used for running text, images, dropcaps and other inline content. While some block elements will work, their usage is not recommended and others can easily break the layout. |
| Column Min Width | Set the minimum width for each column, this allows your columns to gracefully break into the selected size as the screen width narrows. Leave this option empty if you wish to keep the same amount of columns from desktop to mobile. Enter value including any valid CSS unit, for example 200px. |
| Column Spacing | Controls the column spacing between one column to the next. Enter value including any valid CSS unit besides % which does not work for inline columns, for example 2em. |
| Rule Style | Select the style of the vertical line between columns. Some of the styles depend on the rule size and color. |
| Rule Size | Sets the size of the vertical line between columns. The rule is rendered as “below” spacing and columns, so it can span over the gap between columns if it is larger than the column spacing amount. In pixels. |
| Rule Color | Controls the color of the vertical line between columns. |
| User Text Select | Controls how and if the text can be selected. |
| Content | Enter some content for this text block. |
| Alignment | Select the text alignment. |
| Disable Inline Dynamic Data | Choose if you want to disable the inline dynamic data rendering engine for this element. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
| Attributes | Add custom HTML attributes to the element. |
Design
| Heading | Description |
|---|---|
| Width | Set a fixed width for the element. |
| Minimum Width | Set the minimum width for the element. |
| Maximum Width | Set the maximum width for the element. |
| Margin | In pixels or percentage, for example 10px or 10%. |
| Typography | Controls the text typography. |
| Font Color | Controls the color of the text, for example #000. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Conditional Logic | Add conditional logic when the element is used within a form. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Use the Title Element for headings rather than large text inside a Text Block. Titles keep the heading structure clean for search engines and screen readers.
- Inline columns are meant for running text. For content that has to line up in rows, use separate Builder columns instead.
- Maximum Width (Design tab) keeps long paragraphs readable on wide screens; around 70 characters per line is a good target.
- Dynamic data placeholders in the content are rendered automatically. Turn on Disable Inline Dynamic Data if you need to show the placeholder text itself.
- Conditional Logic only applies when the Text Block sits inside a form, where it can show or hide the text based on the visitor’s answers.