Animations - Choose a preferred entrance animation for the title area

Don’t Show Title Text – Use this option to hide or show the title text. If the title text is enabled, then you can style it with several more options.

Background Color – Here, choose a background color for the title area.

Title Image - Upload a default title background image. This options is located under Qode Title > Title Image:

You can also upload different title images for different pages.

Background Responsive image – By default, the background image is not responsive, and in that case you can set it to be:

Pattern Overlay Image - Repeating patterns are a great way to add detail and texture to any website or interface design. Here you can upload a pattern image to be used as an overlay for the title background image.

Show Title Separator – By enabling this option you can include a small separator line just below the Title Text. You also have the following options available to style the separator:

Enable Angled Title –  A modern title area design, featured in this demo

• Bottom Border - Here you can turn on a bottom border line to get a more distinctive separation between the title area and the page content. Style it to your preference:

A breadcrumb title is a series of connected links that provide a breadcrumb-like link structure from the homepage to the page you’re currently at. You can say that it resembles a stripped down navigation menu. For example:

Each part of the breadcrumb is a link and can be used to go back to any page on the level above or find out what page you are currently on if it is unclear.

To enable breadcrumbs you should navigate to Qode Options -> Title -> Enable Breadcrumbs and set Yes.

Upon enabling this feature you can set the breadcrumbs color.

Here you can define animations for your page title area and all the elements located in this area.

This feature is aimed towards advanced users who have a basic knowledge of CSS.

Let’s go through each option:

Enable Whole Content Title Animations - Set this option to Yes if you would like to enable an animation for the whole title area and all its contents.

Scrolling Animation Start Point - Here you need to set the properties for the first keyframe in the scrolling animation. Use the Scrollbar Top Distance field to set when your animation will start in relation to the distance of the scrollbar from the top of the page, and use the Enter CSS declarations separated by semicolons field to enter your CSS declarations for the beginning of the animation (i.e. opacity: 1;).

Scrolling Animation End Point - Here you can set the properties for the last keyframe in the scrolling animation. Use the Scrollbar Top Distance field to set when your animation will end in relation to the distance of the scrollbar from the top of the page, and use the Enter CSS declarations separated by semicolons field to enter your CSS declarations for the end of the animation (e.g. opacity: 0;).

Enable Page Title Animations - Set this option to Yes if you would like to enable an animation on the page title. You can use the options described above to create your animation.

Enable Page Separator Title Animations - Set this option to Yes if you would like to enable an animation on the page title separator. You can use the options described above to create your animation.

Enable Page Subtitle Animations - Set this option to Yes if you would like to enable an animation on the page subtitle. You can use the options described above to create your animation.

Enable Page title Breadcrumbs Animation - Set this option to Yes if you would like to enable an animation on the page title breadcrumbs. You can use the options described above to create your animation.

For example, let’s do a basic ‘opacity with scaling’ animation:

This is how your settings should look like:

Paste this example code into your options to see the result you’ll get. Basically, on page scrolling action you’ll see a slight fade out which is achieved with CSS opacity and title decreasing through CSS transform property.

What else could be used here? Here’s another example with a ‘rotation’ animation:

Here, your page subtitle will be initially positioned as if one is looking at it upside down, like on this screenshot:

... and on scrolling, since we set the transform property to rotate to 0 degrees, the page subtitle will return to its normal state of orientation.

This may happen if you have set a background image for your title area. In this case your chosen background color won’t be applied. So, if you want to have a background color, then just remove the background image if one is uploaded, or simply set Yes for the Don’t Show Background Image option.

This may happen if you pick a Background Color, and upload an image under Background Image option, and then after that you set also Yes for Don’t Show Background Image.

This is happening because the database field for Background image is filled, and even if you set Don’t Show Background Image to Yes, the background image would still be visible.

What you should do is simply remove the uploaded background image.

To fix, this you could use the following CSS code and paste it into WP Admin -> Qode Options -> General -> Custom CSS field.

These pages are using the WordPress page templates archive.php, 404.php, search.php that are native wordpress pages. So, all Title options that are set under Global settings, Qode Options > Title will be applied to these pages. Further customization on each page is not supported.

For pages, portfolio items, or posts that are edited through the backend editor, you can use the Qode Title metabox to apply a different title styling than the one set in WP Admin -> Qode Options -> Title.