Text Block Element

08/08/2019

The Text Block Element is a simple, yet foundational element, which allows you to use the normal WordPress editor to insert content onto your page. In addition, there is an added feature that lets you take one large body of text content and choose the amount of columns it will be displayed in. This is perfect for blog posts and pages as it offers a unique design style and gives you more control over how you present the information to your users. Read below to discover more about this most used of all elements.

Here is a text block element, and with the inline columns set to “3”, it pulls your entire content box across 3 columns. We have even added an image to show you the element’s flexibility. You can also use any inline element to style your content inside the text block element.

Highlights are one example of the possibilities. This is an amazing way to break up long and varied segments of content on your website to make them easier to read, and more attractive and modern.

How To Use The Text Block Element In Fusion Builder

The Text Block Element is a foundational element, and allows you to add a variety of text blocks into your content.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Text Block’ element and click it to bring up its options window.

Step 4 – The Text Block Element is as simple as it gets, but there are a few things to be aware of. There is now an option to split the text into a number of inline columns, but apart from that, there is just the Visual / Text Editor in which to place your content.

Step 5 – Be aware that if you are placing any text that has html in it, it must be added via the Text editor to render correctly. You can read this article for more information.

Step 6 – Once you have added your content to the text block, click Save. You will be returned to the edit page. You can preview the page to view the content, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

How To Use The Text Block Element in Fusion Builder Live

There are only a few differences when using the Text Block Element in the Fusion Builder Live Editor.

Being a text-based Element, the Text Block Element is directly editable in the Fusion Builder Live Editor. Just click inside the text on the page to start writing or editing. And if you make a selection of text on the page, the Inline Editor appears, allowing you to make formatting changes to parts of your text directly on the page.

Text Block Element in Fusion Builder Live

Please see the Best Practices for Inline Editing in Fusion Builder Live document for a good idea of how to best use the Inline Editor.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Text Block Element section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

  • 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, drop caps 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, ex: 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, ex: 2em.

  • Rule Style – Select the style of the vertical line between columns. Some of the styles depend on the rule size and color. Choose from None, Solid, Dashed, Dotted, Double, Groove, or Ridge.

  • 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. Leave empty for the default value.

  • Content – Enter your content for the text block here.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens. 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.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Social Links Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • 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, drop caps 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, ex: 100px.

  • 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, ex: 2em.

  • Rule Style – Select the style of the vertical line between columns. Some of the styles depend on the rule size and color. Choose from None, Solid, Dashed, Dotted, Double, Groove, or Ridge.

  • 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.

View The Options Screen

Text Block Element Parameters

Copy to Clipboard
  • columns – The amount of columns you’d like your text split across. For example, columns=”1″ (Maximum = 6).

  • column_min_width – You can set the minimum width of each column using “px” values. For example, column_min_width=”300″.

  • column_spacing – You can choose how much spacing to give between each column in “em” value. For example column_spacing=”4em”.

  • rule_style – Allows you to select the style of column separator to use. For example, rule_style=”solid” will give you a solid line, whereas rule_style=”dotted” will give you a dotted rule between columns.

  • rule_size – Set the width of the column separator between columns. For example, rule_size=”1″ gives a 1px wide rule.

  • rule_color – Sets the colour of the column separator between columns, accepts Hex code values (#000000).
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.

  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to the documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to the documentation section.
  • custom content – Insert the custom text content between the

    Copy to Clipboard

    tags.