Page Title Bar Options

26/03/2019

The Page Title Bar is a highly customizable horizontal bar that sits directly below the header and contains a range of information, from the page title, as well as breadcrumbs, or a search bar. It can also have a background colour or image and be of variable height. It is very versatile. The Page Title Bar can be completely displayed or hidden on every page or post globally, or you can display or hide it individually per page or post. There are numerous options to customize the Page Title Bar.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

Overview

Usage Example

The Page Title Bar is not an Element; rather it is controlled via the Theme Options and the Fusion Page Options. This article will look in depth at the options that are available for this often overlooked tool. The Page Title Bar has global options found in the Avada > Theme Options > Page Title Bar panel, and individual options in the Fusion Page Options, found on all pages and posts, that will override global settings.

We also have a document on Setting up the Page Title Bar, and a technical post on Page Title Bar Global Setting vs Page Setting.

The image below illustrates an example of the Page Title Bar in action in the Avada University Demo. The demo 'About Us' Page Title Bar has a background image for added visual appeal. Adding an image and other styling options can be set globally via the Fusion Theme Options or locally on a page/post basis via the Fusion Page Options.

Page Title Bar Example

Page Title Bar Theme Options

Fusion Theme Options - Page Title Bar

Breadcrumbs / Search Bar Theme Options

Fusion Theme Options - Page Title Bar - Breadcrumbs/Search Bar

Page Title Bar Fusion Page Options

Page Title Bar - Choose to show or hide the Page Title Bar. You can choose between Show Bar and Content, Show Content Only, or Hide bar.

Breadcrumbs / Search Bar - Choose to display the Breadcrumbs or the Search Bar or None.

Choose to show or hide the page title bar headings.

Page Title Bar Text Alignment - Choose the title and subheading text alignment. Choices are Left, Center, or Right. If you choose Left or Right, the Breadcrumbs or Search Bar (if chosen) will display on the opposite side. If you choose Center, the Breadcrumbs / Search Bar will display below the Title.

Insert custom text for the page title bar main heading.

In pixels. Leave empty for the default value.

Valid CSS unit. Leave empty for the default value.

Controls the text color of the page title bar main heading. Leave empty for the default value.

Insert custom text for the page title bar subheading.

In pixels. Leave empty for the default value.

Controls the text color of the page title bar subheading. Leave empty for the default value.

Choose "Yes" to have the page title bar area display at 100% width according to the viewport size. Select "No" to follow site width. Only works with wide layout mode.

Controls the height of the page title bar on desktop. Enter value including any valid CSS unit besides % which does not work for the page title bar, ex: 87px. Leave empty for the default value.

Controls the height of the page title bar on mobile. Enter value including any valid CSS unit besides % which does not work for the page title bar, ex: 70px. Leave empty for the default value.

Controls the background color of the page title bar. Hex code, ex: #000. Leave empty for the default value.

Controls the border color of the page title bar. Hex code, ex: #000. Leave empty for the default value.

Select an image to use for the page title bar background.

 Select an image to use for retina devices.

Choose to have the background image display at 100%.

Choose a parallax scrolling effect for the background image.

Fusion Page Options > Page Title Bar