Title Element

Last Update: April 28, 2025

The Title Element is an elegant and versatile 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.

There are five types of Title Types: Text, Marquee, Rotating, Highlight and Scroll Reveal. 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.

View Element Demo Page!

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 four other title types – Marquee, Rotating, Highlight & Scroll Reveal. With these, you can create a wide variety of titles. For a full rundown on all four of these special title types, watch the video below or check out the How to Use the Title Element Title Types doc.

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.

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

Heading		Description
Title Type		Choose the title type.
Scroll Reveal Effect		Select the style for the scroll reveal animation.
Scroll Reveal Basis		Select the basis for the reveal effect.
Scroll Reveal Behavior		Select how the scroll reveal effects behave on scroll..
Scroll Reveal Duration		Controls the duration of the scroll animation effect. In milliseconds.
Scroll Reveal Stagger		Controls how the start times of the individual animations within a scroll reveal effect are staggered. In milliseconds.
Scroll Reveal Delay		Controls the delay for the start of the scroll effect. In milliseconds.
Enable Scroll Reveal Above The Fold		Set to "yes" to enable the scroll reveal effect even if the title is above the fold. This can lead to a flash of unstyled content.
Marquee Direction		Select the marquee direction.
Mask Edges		Choose if the edges of the marquee should be masked with a fade out effect.
Marquee Speed		Controls the speed of the marquee effect. In milliseconds, 1000 = 1 second.
Rotation Effect		Select the style for rotation text.
Display Time		Controls the animation delay between each text in a set. In milliseconds.
Highlight Effect		Select the highlight effect.
Animation Mode		Controls if and how the text should be animated. Rotating text will either run once or loop.
Highlight Animation Duration		Controls the duration of the highlight animation. In milliseconds.
Highlight Shape Thickness		Controls the thickness of highlight shape.
Highlight Smudge Effect		Choose if the highlight shape should have a slightly smudged gradient effect.
Highlight Top Margin		Controls the top margin of highlight shape.
Before Text		Enter before text.
Rotation Text		Enter text for rotation.
Highlighted Text		Enter text which should be highlighted.
After Text		Enter after text.
Title		Insert the title text.
Title Link		Choose if title text should have a link.
Link URL		Add an URL for the link. E.g: https://example.com.
Link Target		Controls how the link will open.
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		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.

Design

Heading		Description
Alignment		Choose to align the heading left, right or center.
HTML Heading Tag		Choose HTML tag of the heading, either div, p or the heading tag, h1-h6.
Animated Text Font Size		Controls 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.
Typography		Controls 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 Color		Controls 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 Color		Controls 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.
Highlight Shape Color		Controls the color of the highlight shape, ex: #000.
Text Shadow		Set to "Yes" to enable text shadows.
Text Shadow Position		Set 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 Radius		Set the blur radius of the text shadow. In pixels.
Text Shadow Color		Controls the color of the text shadow.
Text Stroke		Set to "Yes" to enable text stroke.
Text Stroke Size		Set text stroke size. In pixels.
Text Stroke Color		Controls the color of the text stroke.
Text Overflow		Controls the text overflow for longer texts.
Margin		Enter values including any valid CSS unit, ex: 4%.
Mobile Margin		Spacing above and below the title on mobiles. In px, em or %, e.g. 10px.
Gradient Font Color		Set to "Yes" to enable gradient font color.
Gradient Start Color		Select start color for gradient.
Gradient End Color		Select end color for gradient.
Gradient Start Position		Select start position for gradient.
Gradient End Position		Select end position for gradient.
Gradient Type		Controls gradient type.
Radial Direction		Select direction for radial gradient.
Gradient Angle		Controls the gradient angle. In degrees.
Separator		Choose the kind of the title separator you want to use.
Separator Color		Controls the separator color.
Link Color		Controls the link color.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

How To Use The Title Element In Avada Builder
How to Use the Title Types
Using The Title Element in Avada Live
Element Options