Content Element

Last Update: March 14, 2024

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we look at the Content Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Content Element

When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Content Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice.

The Content Element pretty much does what it says on the can, and allows you to add existing content anywhere in a Content Layout Section in any Layout.

You would use this, for example, on a single post or single portfolio layout, where the content element would pull the actual post content into your layout. Basically, the element grabs the editor content of a page or post, and you can add this content to the Content Layout Section of your Layout. With Avada 7.3, you can also add the Content Element into a Post Card>.

Element Options

Note: The displayed option 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

HeadingDescription
Content DisplayControls if the blog post content is displayed as excerpt, full content or is completely disabled.
Excerpt LengthInsert the number of words/characters you want to show in the excerpt.
Strip HTML from Posts ContentChoose to strip HTML from the post content.
DropcapSet the first letter of first paragraph as a dropcap.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginIn pixels or percentage, ex: 10px or 10%.
AlignmentSelect the text alignment.
TypographyControls the title text typography. Leave empty if the global typography for the corresponding heading size (h1-h6) should be used: Global Options Body Typography Settings.
Boxed DropcapChoose to get a boxed dropcap.
Dropcap Border RadiusChoose the radius of the boxed dropcap. In pixels (px), ex: 1px, or "round".
Dropcap ColorControls the color of the dropcap. Leave blank for Global Options selection.
Dropcap Text ColorControls the color of the dropcap letter when using a box. Leave blank for Global Options selection.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article