Using the Text Element in Thrive Architect

One of the most important elements from Thrive Architect is the “Text” element. This has many options and features that will be presented below.

First, click on the plus sign from the right sidebar and look for the “Text” element in the list. Then, drag & drop it to your page:

There are two ways in which you can add text to your page:

• if you want to add other elements between paragraphs (for e.g. a button) use a “Text” element for each paragraph separately
• if you want to add text content exclusively, simply add one “Text” element and write in it just like you would in any kind of text editor (use “Enter” or “Shift+Enter” to go to the next row).

Once you added the “Text” element to the page, you will see that there are two sets of options for it: the options from the left sidebar (1) and the options that can be found in the panel on the top of your screen (2):

1. Sidebar options

Color

You can change the current color of the text by clicking on the little box with the color from the “Color” section:

Unlink from the currently existing theme or template color:

And then use the color picker or a HEX/RGB code to set a new color:

You can also choose one of the already existing colors from the “My Colors” and “Theme Colors” sections.

You also have the possibility to set the opacity of the text color and if you wish, you can even save this color as a global one, or a favorite one for later use:

Font

You can change the type of font that is used for the text by clicking on the edit option (pencil icon) from the “Font” section:

Then, you will have to select the one that is most suitable for you from the drop-down:

You will see that there are 3 sources that you can choose from: “Google Fonts” (which comes with some additional options), “Web Safe Fonts” and “Inherit Theme Fonts”.

You can also select the “Regular” and the “Bold” values for the font (in case it has more such values) and you can include an Italic version of the font.

Once you are done, simply click on “Apply” and the font of the text will be changed, according to what you have set up.

Highlight/Background color

The background color for “Text” elements can be set from the “Highlight” section. You just have to click on the box next to the “Highlight”:

This will open a color picker, where you can choose the background color/highlight for the text. It works the same way as the color picker for the color does, and you can set the same aspects as with the color of the text.

Format

You can format the text and make it bold, italic, underlined, or strikethrough:

You can access these options either from the right sidebar or from the Panel Options.

Transform

This option allows you to customize the text. You can make it ‘all uppercase’, ‘normal text’, or ‘all lower-case’, directly from here by clicking on the respective icons:

Font size, Line Height and Letter Spacing

All there of these options can be adjusted by using the slider that is below them, or by entering the value you would like manually in the box next to the slider.

First, click on the option you wish to adjust and then, drag the slider or enter the value:

If for some reason you wish to remove all of the options that you have set up for your text, you can click on the “Clear All Formatting” option, which will restore everything to its default state:

Advanced option

With this option, you have the possibility to add a TypeFocus animation to your text. Simply select your text and then, click on the “Add” button from the “Advanced” drop-down:

A window will open with various settings for this TypeFocus Animation:

You can display a different text by adding it to the “Add New” field, and you can set the pause between animations, along with choosing the effect and the highlight color. If you want to find out more about this, please check out this tutorial.

These were the options that are specific to the “Text” element. Below these, in the left sidebar, you will also find the other, more general options, that are available for almost all of the other elements as well.

2. Panel options

Styling options

These options are the basic ones that you will find in any text editor. With their help you can easily apply Bold, Italics, Underline, or Strike-through to your text. You just have to select the text and click on the desired option:

Transform the text

If you click on the paragraph icon, a drop-down will open where you can transform your text in various ways:

a) Headings

You have the option to make the text a heading. All you have to do is to choose between the six different types of heading that appear in the drop-down. Click on one of them and your text will be transformed into a heading.

b) Paragraph

If you want to revert the text back to a paragraph, simply click on the paragraph icon that can be found below the heading types in the drop-down.

c) Blockquote

Furthermore, you can easily transform your text into a blockquote by clicking on the “Blockquote” from the above-mentioned drop-down.

d) Plain Text

This option comes in handy, If you want to transform your text into plain text, meaning that you want a simple text element, one that does not inherit styling (CSS properties from themes and certain plugins).

The difference between a common “Paragraph” and a “Plain” text is that the paragraph is for writing text content; while the plain text element is for layouts (when creating landing pages or theme templates), where you only need simple texts.

When you want to add a label text on a box, for example, you should use the “PlainText” option because you don’t want the text to inherit the properties of the rest of the texts from the page.

In such cases, you can change your text into a plain/simple one, by clicking on the “PlainText” option from the drop-down.

Alignment options

Furthermore, you also have the option of aligning the “Text” element – to be on the left, right, at the center, or justify. Click on the preferred position and the text will be aligned accordingly:

Lists

If you wish to create an unordered (with bullet points) or an ordered list (with numbers) in your text, then, you just have to select the part of the text (or all of it), and click on either of these two panel options:

Then, you will see that the text will be structured in the selected list type.

Adding a hyperlink

You can add a link to your text with the “Hyperlink” option (chain icon) from the panel. After selecting the text you want to add the hyperlink to, click on the “Hyperlink” panel option (or press ‘Ctrl+K’). This will open a drop-down where you can set up the link.

You will have to enter the URL, the text (if you haven’t selected it before) and choose whether or not you want the link to open in a new tab and to be nofollow or not:

If you want to link to a page that you have already created and published on your own website, you can start typing the name of that page in the URL section. You will see search results of matching pages and you can link to the one you want by clicking on in.

In case you need more info on how to insert a hyperlink, please check out this article.

Inserting a Dynamic Text

After the “Hyperlink” option, you will notice the “Dynamic Text” one. This is helpful if you want to easily insert dynamic information into your text.

Note: When inserting a “Dynamic Text”, one of the options is the “Global Fields” one. This option can only be used if you’ve completed the Global Fields in your Thrive Dashboard. If you haven’t, you will see an error message:

Clicking on “Global Fields dashboard” will take you to the Thrive Dashboard, so that you can add the global information.

If you are not familiar with the Global Fields feature, make sure to check out this article about it. If you do have the Global Fields completed in your dashboard, you can use the option straight away.

If you want to insert dynamic information into your text, then click on the “Dynamic Texts” option from the panel:

This will open a small sub-menu. Here, you have to select the source of the dynamic text. Click anywhere on the “Select Source” field:

Note: If you have set up a “Text” custom field using the “Advanced Custom Fields” plugin, and you have assigned a value for it for the page or post that you are editing, you can use that custom field with the “Dynamic Text” option.

If you have followed all the steps presented here, you should find the “Custom Fields” option among the “Dynamic Text” sources:

Then, in the next field, you will be able to choose from the list of custom fields that you have created:

If you need more information about how to add a “Text” type of custom field, we have this article that goes through more in-depth details about it.

Keep in mind that you will only see the “Custom Fields” option if you have followed the steps presented in this article accordingly.

Click on the field in order to select a source. Choose one from the list that appears:

After choosing a source, another field will appear, where you can select the option. As an example, if you use the “Global Fields” source, you can click on the “Select an Option” field in order to choose which global information to enter:

A drop down will appear, and you can choose the option that you want:

After you choose the preferred option, click on “Insert”:

The dynamic information will then be inserted.

Using the Distraction Free Mode

Last but not least, you’ll find the “Distraction Free Mode” option in the panel:

The “Distraction Free Mode” gives a more familiar look when using a “Text” element. It mimics the editing experience that someone would get when using Microsoft Word/Google Docs.

To activate it, click on the option and select the “Distraction Free Mode” option from the drop-down:

Once the “Distraction Free Mode” is activated, you will not see the green border that normally surrounds the “Text” element, when you click on it/edit it:

Furthermore, if, at some point, you decide you do not want to use the option anymore, simply go back to the panel, click on the three dots symbol and choose “Normal Mode”:

Using the Pinned Mode

In the same drop-down mentioned above, there is one more option, called “Pinned Mode”:

If you select this option, the “Panel Options” will be pinned to the top of your editor, below the breadcrumbs, and it will become full-width. This way, when you scroll down in the editor, the “Panel Options” will remain pinned on top of the content, like so:

These are all the ways in which you can use the options from the panel.

Since the “Text” element can also be found in various other elements (buttons for e.g.) you can always change the text options in the “Typography” section of the different elements.

Use the Rest of the General Options

Just like in the case of all the Thrive Architect elements, the more general options are also available for the “Text” element. These can be found under the “Main Options” in the left sidebar when the “Text” element is selected:

The ‘Conditional Display’ option

This feature allows you to take a block of content from any page (in this case, a piece of text), and create alternate versions for it:

You can then assign different display rules to each version, and decide what each visitor to that page will see, depending on what kind of permissions that person has:

We have a separate article in our knowledge base that explains in depth how to use this feature:

• How to Use the Conditional Display Option

If you need detailed information on how to use the general options, check out our knowledge base, as we have created separate tutorials on each of them.

To find out how other elements in Thrive Architect work, please follow this link.