Text Block ElementThe Text Block Element is a simple, yet foundational Element, used to insert text content into your page. In addition to displaying text in a single block, there is also an added feature that lets you choose the amount of columns the text will be displayed in. This is perfect for blog posts and other pages, as it offers a unique design style, and gives you more control over how you present your 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.,Read how to split columns within the Text Block Element!View Element Demo Page!OverviewHow To Use The Element In Avada Builder
How To Use The Element In Avada Live
Element OptionsGlobal Options,How To Use The Text Block Element In Avada BuilderThe 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.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,How To Use The Text Block Element in Avada LiveThere are only a few differences when using the Text Block Element in Avada Live.
Being a text-based Element, the Text Block Element is directly editable in Avada Live. 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.
Please see the Best Practices for Inline Editing in Avada Live document for a good idea of how to best use the Inline Editor.,Element OptionsLocation: 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 at Options > Avada Builder Elements > Text Block. 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.
General Tab
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.
Alignment – Select the text alignment. Choose from Left, Center, Right or Justify. This options is part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.
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 – (Only visible if parent Container is set to Sticky). 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.
View The Options ScreenDesign Tab
Margin – Control the margins around the Element. In pixels or percentage, ex: 10px or 10%.
Typography
Font Family – Controls the font family of the text. Leave empty if the global font family for the text should be used.
Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.
Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the text. Enter value including any valid CSS unit, ex: 2px.
Text Transform – Select how to capitalize the text. Choose from Default, None, Uppercase, Lowercase, or Capitalize.
Font Color – Controls the color of the text, ex: #000. Leave empty for default value.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Text Block.
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
