Title Element

Last Update: August 15, 2024

The Title Element is an elegant Element that does exactly what it says: adds a Title into your content. You can select any Header Tag from H1 through to H6, and there are a variety of styling options including Alignment, Separator styling, and overrides for Font Size, Family, Line Height and Letter Spacing.

Read below for an overview of the specific features of the Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Title Element In Avada Builder

The Title Element allows you to add customized titles to your page content. To start, simply add the element to your desired column.

The Title Element is very easy to use, and allows for some interesting customization. On the General Tab, choose whether you want a standard Text tile, a Rotating title, a Highlighted title or a Marquee title. Each one has its own set of options. A standard Text Title is pre-selected, and you can simply enter the Title content you wish to display. Then, on the Design Tab, you can customize the title.

The design options start with alignment, and then the HTML Heading Size you wish the title to have. You can also add a font size override, but otherwise, the Title will take the font size of the corresponding Header size specified in the Global Options Heading Settings. There are also override options for line height, letter spacing, margins, and font color. There is also a separator option built into the Title Element, which allows you to choose from any of Avada’s preset separators, or not to use one at all.

Read further below for a description of all element options.

How to Use the Title Types

Apart from the standard Text Title, there are three other title types – Marquee, Rotating & Highlight. With these, you can create a wide variety of titles. For a full rundown on all three of these special title types, watch the video below.

For privacy reasons YouTube needs your permission to be loaded.

Using The Title Element in Avada Live

There are only a few differences when using the Title Element in Avada Live.

Being a text based Element, the Title Element is directly editable in Avada Live. 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 Title 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.

Title Element in Avada Builder Live

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Title. Also, please note that 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
Title TypeChoose the title type.
Marquee DirectionSelect the marquee direction.
Marquee SpeedControls the speed of the marquee effect. In milliseconds, 1000 = 1 second.
Rotation EffectSelect the style for rotation text.
Display TimeControls the delay of animation between each text in a set. In milliseconds, 1000 = 1 second.
Highlight EffectSelect the highlight effect.
Loop AnimationTurn on to loop the animation.
Highlight Shape WidthControls the width of highlight shape.
Highlight Top MarginControls the top margin of highlight shape.
Before TextEnter before text.
Rotation TextEnter text for rotation.
Highlighted TextEnter text which should be highlighted.
After TextEnter after text.
TitleInsert the title text.
Title LinkChoose if title text should have a link.
Link URLAdd an URL for the link. E.g: https://example.com.
Link TargetControls how the link will open.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose 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 ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
AlignmentChoose to align the heading left, right or center.
HTML Heading TagChoose HTML tag of the heading, either div, p or the heading tag, h1-h6.
Animated Text Font SizeControls the font size of the animated text. Enter value including any valid CSS unit, ex: 20px. Leave empty if the global font size for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings.
TypographyControls the title text typography. Leave empty if the global typography for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings.
Font ColorControls the color of the title, ex: #000. Leave empty if the global color for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings.
Animated Text Font ColorControls the color of the animated title, ex: #000. Leave empty if the global color for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings.
Text ShadowSet to "Yes" to enable text shadows.
Text Shadow PositionSet the vertical and horizontal position of the text shadow. Positive values put the shadow below and right of the text, negative values put it above and left of the text. In pixels, ex. 5px.
Text Shadow Blur RadiusSet the blur radius of the text shadow. In pixels.
Text Shadow ColorControls the color of the text shadow.
Text StrokeSet to "Yes" to enable text stroke.
Text Stroke SizeSet text stroke size. In pixels.
Text Stroke ColorControls the color of the text stroke.
Text OverflowControls the text overflow for longer texts.
MarginEnter values including any valid CSS unit, ex: 4%.
Mobile MarginSpacing above and below the title on mobiles. In px, em or %, e.g. 10px.
Gradient Font ColorSet to "Yes" to enable gradient font color.
Gradient Start ColorSelect start color for gradient.
Gradient End ColorSelect end color for gradient.
Gradient Start PositionSelect start position for gradient.
Gradient End PositionSelect end position for gradient.
Gradient TypeControls gradient type.
Radial DirectionSelect direction for radial gradient.
Gradient AngleControls the gradient angle. In degrees.
Highlight Shape ColorControls the color of the highlight shape, ex: #000.
SeparatorChoose the kind of the title separator you want to use.
Separator ColorControls the separator color.
Link ColorControls the link color.

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