Title Element

12/03/2019

The Title Element is a simple 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 Color, and newly introduced in Avada 5.7, Font size, Line Height and Letter Spacing giving you much more control over the titles used throughout your site. Read below for an overview of the specific features of the Element.

This is a H1 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

This is a H5 title
This is a H6 title

How To Use The Title Element

The Title Element is a handy element that 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 cool customizations. To get started, on the General Tab, 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. A new feature, added in Avada 5.7, was to add a font size override option, but otherwise the Title will take the font size of the corresponding Header size specified in the Theme Options Heading Settings. There are also 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 even 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.

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 - 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.
View The 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 - New in Avada 5.7. 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.
  • 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.
  • Separator - 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 - 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.
View The Options Screen

Title Element Parameters

Copy to Clipboard
  • 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.