Title Element

17/10/2019

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

And new with Avada 6.1, we have now added Rotating Titles and Highlighted Titles, for that extra bit of bling! Read below for an overview of the specific features of the Element.

This is the Rotating Title Type using the Clip Effect

This is the Highlight Title Type with an underline zigzag effect

This is a H2 title with font size override

This is a H2 title with colour override

This is a H3 title with a separator

This is a H4 title with 2 pixel letter spacing

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

How To Use The Title Element In Fusion Builder

The Title Element allows you to add customised titles to your page content.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Title’ element and click it to bring up its options window.

Step 4 – The Title Element is very easy to use, and allows for some interesting customizations. To get started, on the General Tab, choose wether 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 Theme 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.

How To Use The Title Element in Fusion Builder Live

There are only a few differences when using the Title Element in the Fusion Builder Live Editor.

Being a text based Element, the Title Element is directly editable in the Fusion Builder Live Editor. 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 Fusion Builder Live document for a good idea of how to best use the Inline Editor.

Title Element in Fusion Builder Live

Element Options

Location: 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 in your Theme Options > Fusion Builder Elements > Title Element section.

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.

  • Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • 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.

  • 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.

  • 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.

Text Title Options Screen
Rotating Title Options Screen
Highlighted Title Options Screen

Design Tab

  • Title Alignment – Allows you to control the Header Element alignment. Choose from Left, Center, or Right.

  • HTML Heading Size – Choose the size of the HTML heading tag that should be used. From H1 – H6.

  • Font Size – Controls the font size of the title. Enter value, including any valid CSS unit, ex: 20px. If this is left empty, the Global font size (Avada > Theme Options > Typography > Header Typography) for the corresponding header size will be used.

  • 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: Theme Option Heading Settings.

  • 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.

  • Margin – Controls the spacing above and below the title. In px, em or %.

  • 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: Theme Option Heading Settings.

  • 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 Theme Options  (Avada > Theme Options > Fusion Builder Elements > Title Element).

  • Separator Color – (Only with Text Title) Choose the Separator Color or leave blank to use the default value.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Separator Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Title Separator – Controls the type of title separator that will display. Choose from Single SolidSingle DashedSingle Dotted, Double SolidDouble DashedDouble DottedUnderline Solid, Underline Dashed, Underline Dotted, and None.

  • Title Separator Color – Controls the color of the title separators.

  • Title Top/Bottom Margins – Controls the top/bottom margin of the titles. Leave empty to use corresponding heading margins. Enter values including any valid CSS unit, ex: 0px, 31px.

  • Title Mobile Top/Bottom Margins – Controls the top/bottom 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

Title Element Parameters

Copy to Clipboard
  • title_type – Choose the type of title. Options are text, rotating, or highlight.

  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

  • content_align – Choose from left, or right. Sets the heading’s alignment.

  • size – Choose from 1, 2, 3, 4, 5, or 6. These numbers represent H1-H6 heading sizes, respectively.
  • font_size – Controls the font size of the title. Enter value including any valid CSS unit, ex: 20px.

  • line_height – Controls the line height of the title. Enter any valid CSS unit, ex. 28px.

  • letter_spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px.

  • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin.

  • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin.

  • text_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.

  • style_type – Choose from default, single solid, double solid, underline solid, single dashed, double dashed, underline dashed, single dotted, double dotted, underline dotted or none. Sets the separator style.

  • sep_color – Accepts a hexcode ( #000000 ). Sets the separator’s color.
  • custom content – Insert the custom title between the
    Copy to Clipboard

    tags.