Page Header Title Backgrounds

With the Total theme you can easily set the page header title area to display with a large background image either globally or on a per-page basis.

Result

Below is an example result you can expect from using the Background Image page title style:

Global Page Header Title Background

To set your global page header title background style you will want to log into WordPress and go to Appearance > Customize > General Theme Options > Page Header Title. From this panel you can select your desired style and you’ll want to choose “Background Image”.

Once you set the style to “Background Image” scroll down a bit to locate the setting to define your background image. Here you can also select if you want your posts and pages to automatically display their featured image as the background.

Typography: When using the Global page header title style you can customize your font size, font weight, line height and other typography settings for your page header title via the settings at Customize > Typography. You will find options for the page title, breadcrumbs and subheading. This settings only apply to the Global page header title style so they don’t conflict when setting a custom title style on a per-page basis.

Single Page/Post Title Background

Simply go to edit any page or post, find the settings metabox and click on the “Title” tab then from the “Title Style” option select “Background Image”.

Important: When you set a custom page header title style on a per-page basis they will use their own styling. This means the Customizer typography or other Page title settings will not affect the design. This is to prevent issues when you style your global page header style from affecting the look of each different page title style.

This will display more settings below to let you select the background color, image, style, overlay and more!

Adding Page Title Backgrounds to Categories

Your standard categories and tags also support this functionality – yay! Simply go to edit any term and you will find the setting to set your category image. When defined it will be used for the page title background (unless disabled).

Need More Customization?

The Page Header with background style is provided for quick nice looking page title with backgrounds, if you want more customization/control/parallax/buttons/more info…etc. Then simply disable the main page title then use the WPbakery page builder to add a full-screen row to the top of your page with the content you want! You could even create a dynamic template if you want to set this up for all pages or use a code snippet.

Last updated on December 9, 2014