Most of the time, H1 page titles work perfectly. They are simple and obvious to your website visitors. However, there may be times where you want to create a dedicated page title area to enforce the visual separation betwene your titles and the main page content. Our platform has a smart Page Title feature that autodetects page title areas and moves your H1 tags into it automatically.

To create a page title area in your template, be sure that you are editing your SECONDARY template or any auxiliary template only. Page title areas are not intended for homepages. Here is a sample structure:

<div id="divPageTitle"><div class="container"><div class="row"><div class="col-md-12">
    <div class="page-title-area"></div>
</div></div></div></div>

The most important part of this code is the class called page-title-area. When your secondary pages load, our platform automatically detects the existence of any element with that class assigned to it and moves your H1 page title into that area automatically.

Once you title is in that new area, you can style it. Here is an example of CSS styling for a page title area:

#divPageTitle {
    padding-top:1em;
    padding-bottom:1em;
    color:#ffffff;
    font-size:1.6em;
}

We also recommend adding a media query for mobile with the following modification to the above style:

#divPageTitle {
    text-align:center;
}

By using this special feature of our platform, you can use your creativity to style your own page title areas by adding color, background images, video backgrounds, and much more.

Background Images for Page Title Areas

You can also add background images to your page title areas by simply uploading images with this syntax into your File Library:

PageTitleBG-<Page Permalink>.jpg