Title Element

Last Update: February 19, 2023

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.

We are also constantly improving this Element. With Avada 6.1, we added Rotating Titles and Highlighted Titles, for that extra bit of bling. With Avada 6.2, we added the ability to specify font families for the Element, with Avada 7.0, we added the ability to set the heading tag to div, as well as the usual H1 – H6, for Avada 7.1, we added Text Shadow to the Element, and in Avada 7.4, we added the ability to use a Gradient Font Color on the Title.

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!

View The How To Use The Title Element Animation Options Video!

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, A Rotating Title or a Highlighted 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. As well as that there is 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. You can also choose the

Read below for a description of all element options.

How To Use 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.
Rotation Effect		Select the style for rotation text.
Display Time		Controls the delay of animation between each text in a set. In milliseconds, 1000 = 1 second.
Highlight Effect		Select the highlight effect.
Loop Animation		Turn on to loop the animation.
Highlight Shape Width		Controls the width of highlight shape.
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. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
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.
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.
Margin		Enter values including any valid CSS unit, ex: 4%. Leave empty for default value of 0px, 0.5em.
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.
Highlight Shape Color		Controls the color of the highlight shape, ex: #000.
Separator		Choose the kind of the title separator you want to use. Default currently set to None.
Separator Color		Controls the separator color. Leave empty for default value of Strong Dark Gray. Reset to default.Using default value.
Link Color		Controls the link color. Leave empty for default value of Dark. Reset to default.Using default value.

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. Default currently set to Top Of Element Hits Bottom Of Viewport.