Title ElementThe 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.
This is a Rotating Title Type using the Clip EffectThis is the Highlight Title Type with an underline zigzag effectThis is a H2 title with font size and font family overrideThis is a H2 title with a gradient font colorThis is a H2 title with a color overrideThis is a H3 title with a separatorThis is a H4 title with 2 pixel letter spacing,View The How To Use The Title Element Animation Options Video!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 Title Element In Avada BuilderThe Title Element allows you to add customized titles to your page content.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Title from the Elements List.
Step 4. The Title Element is very easy to use, and allows for some interesting customization. To get started, 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.
Step 5. 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 9 preset separators, or not to use one at all. You can also choose the separator color.
Step 6. Once you have completed adding your title, click Save. You will be returned to the edit page. You can preview the page to view the title, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,How To Use The Title Element in Avada LiveThere 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 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 > 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 Tab
Title Type – Choose what type of title you want to display. The default is a simple Text Title, but you can also select Rotating or Highlight. Each of these have their own full option sets.
Text Title Options
Title – Add the Title Content here in plain text. Formatting occurs primarily on the Design tab. Although some of the built-in Visual Editor functions will work here, like changing the font color, bold, italic etc., it is best practice to control the general appearance of your Titles through the Theme Options for them (Avada > Theme Options > Typography > Headers Typography), and the Design Options in the Title Element itself.
Title Link – Select if title text should have a link. Choose from On or Off.
Link URL – Add a url for the link. E.g: http://example.com.
Link Target – Select the target for the link. Choose between _self for the link to open in the same window and for it to open in a new window.
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 Avada Builder Elements 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 – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
Rotating Title Options
Rotation Effect – Choose the rotation effect for the Rotation Text. Select from Bounce, Clip, Fade, Flip, Light Speed, Roll, Typing, Slide Down, and Zoom.
Display Time – Controls the delay of animation between each text in a set. In milliseconds, 1000 = 1 second.
Loop Animation – Turn on to loop the animation.
Before Text – Enter the 『Before』 Text. This displays before the Rotation text sets.
Rotation Text – Add Rotation Text Sets here. You can add as many sets as you wish.
After Text – Enter the 『After』 Text. This displays after the Rotation Text sets.
Element Visibility – Allows you to control the Separator』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
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 – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
Highlight Title Options
Highlight Effect – Choose the highlight effect for the Highlight Text. Select from Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal Bottom Left, Diagonal Tope Left, Strikethrough, and X.
Loop Animation – Turn on to loop the animation.
Highlight Shape Width – Controls the width of the highlight shape.
Before Text – Enter the 『Before』 Text. This displays before the Highlighted Text.
Highlighted Text – Enter the text which will be highlighted.
After Text – Enter the 『After』 Text. This displays after the Highlighted Text.
Element Visibility – Allows you to control the Separator』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
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 – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
General Tab > TextGeneral Tab > RotatingGeneral Tab > HighlightDesign Tab
Alignment – Choose from Left, Center, or Right. This is also now part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.
HTML Heading Size – Choose HTML tag of the heading, either the heading tag, h1-h6, or DIV.
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.
Animated Text Font Size – New in Avada 6.1. Controls the font size of the title. 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 Option Heading Settings.
Typography
Font Family – Controls the font family of the title text. If applicable, you can also choose the subset and the variant of the font. Leave empty if the global font family for the corresponding heading size (h1-h6) should be used.
Font Size – Controls the font size of the title text.
Line Height – Controls the line height of the title. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the title. 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 – Allows you to override the global color for the corresponding header size without using CSS.
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 Option 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 – Controls the margins around the title. In px, em or %. This option also has Responsive Option Sets enabled, which allows you to set different margins on different screen sizes on the one instance of the Element.
Mobile Margin – Controls the spacing above and below the title on mobiles. In px, em or %.
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. Choose from Linear or Radial.Radial Direction – Select direction for radial gradient. Choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.Gradient Angle – Controls the gradient angle. In degrees.
Highlight Shape Color – Controls the color of the highlight shape, ex: #000
Separator – (Only with Text Title) Choose the kind of Title Separator you wish to use. Default value is set in the Global Options (Avada > Options > Avada Builder Elements > Title).
Separator Color – (Only with Text Title) Choose the Separator Color or leave blank to use the default value.
Link Color – Controls the link color. Currently no default selected. Can be set globally from the Global Options.Link Hover Color – Controls the link hover color. Currently no default selected. Can be set globally from the Global Options.View The Options Screen,Extras 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 Screen,Global OptionsLocation: Avada > Options > Avada Builder Elements > Title
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
Text Transform – Choose how the text is displayed.
Title Separator – Controls the type of title separator that will display. Choose from Single Solid, Single Dashed, Single Dotted, Double Solid, Double Dashed, Double Dotted, Underline Solid, Underline Dashed, Underline Dotted, and None.
Title Separator Color – Controls the color of the title separators.
Title Margins – Controls the margin of the titles. Leave empty to use corresponding heading margins. Enter values including any valid CSS unit, ex: 0px, 31px.
Title Mobile Margins – Controls the margin of the mobile titles. Leave empty to use corresponding heading margins. Enter values including any valid CSS unit, ex: 0px, 31px.
View The Options Screen
