Spread the word and get the premium plugin Slider Revolution for free when we reach 50 sales! Dismiss

Page Title Bar Background

Background color and image of the page title bar can be changed easily. These settings can be changed not only globally but also on a per-page basis. You can also add a parallax scrolling effect if needed.

Global page title bar background

To set a global page title bar background

  1. Log into your WordPress site administration panel,
  2. Navigate to Appearance > Customize, choose Page Title Bar.
  3. In the Page Title Bar panel, choose Background.
  4. Upload your custom background image.

Page title bar background on a per-page basis

  1. Log into your WordPress site administration panel.
  2. Navigate to Pages > All Pages, click on the page you want to edit.
  3. On the editing page, scroll down to theme Page Options panel, choose Page Title Bar.
  4. Upload a different image to Background Image

By default, items showing on the page title bar are styled in darker colors, which may not look good on a dark background. Items color can be changed to fit a dark background quickly by switching to the Light color theme.

Items color on a dark background

There are two color themes provided with page title bar items, the Light color theme will help you to change items color easily for a dark background. To enable the Light color theme

  1. Log into your WordPress site administration panel,
  2. Navigate to Appearance > Customize, choose Page Title Bar.
  3. In the Page Title Bar panel, choose General.
  4. Under Items Color, choose Light.

Parallax scrolling effect

Parallax scrolling is a web site trend where the background image is moved at a different speed than the foreground content while scrolling. The page title bar supports two types of parallax scrolling effect.

Simple parallax scrolling effect

To add a simple parallax scrolling effect

  1. Log into your WordPress site administration panel.
  2. Navigate to Appearance > Customize, choose Page Title Bar.
  3. In the Page Title Bar panel, choose Background.
  4. Under Background Attachment, choose Fixed.

Note
You can choose Cover for Background Size to strech your background if needed.

With simple parallax scrolling effect, the background image will appear fixed in place when you scrolling. You can use advanced parallax scrolling effect to change the speed at which the background image moving.

Advanced parallax scrolling effect

To add an advanced parallax scrolling effect

  1. Log into your WordPress site administration panel.
  2. Navigate to Appearance > Customize, choose Page Title Bar.
  3. In the Page Title Bar panel, choose Background.
  4. Enable Parallax Background Image.
  5. Use the slider under Parallax Speed to change the speed.

Important
Advanced parallax scrolling effect uses Javascript, by enabling this effect, changes made on the background won’t update to the live preview. You can, however, see your changes in live preview by quickly disabling and enabling this effect to trigger a preview refresh.