Responsive WordPress Theme – Caliber

A theme with simple controls and limitless potential. Work fast and build an amazing website!   Find out more »

UpThemes – Beautiful WordPress Themes

Create a site your church, gallery, newspaper, blog, recipes, band and more!   See the themes »

Tutorials

Creating a Header with a Background and Page Title

A popular page design is to have a page header that is the actual WordPress page title on top of a coloured background or background image.

Using the theme’s Layout Manager and custom headers functionality this can be achieved very quickly. It requires the help of a special theme shortcode – [page_title] – and a little bit of creativity.

There are a couple of techniques to achieve the same result; later we’ll see how to do this directly in our article content, but first let’s look at how to do this with some static content.

The static content technique

Go to the Static Content > Static Blocks and click the Add New button. Enter a title for your static block, something like “Title with Background” for example.

In the content editor select the Text tab and paste in the following HTML:

<div style="padding-top: 48px; padding-bottom: 48px">[page_title]</div>

When including HTML in your content, make sure you use the Text editor, not the Visual editor.
You can see that we have created a div container and given it some padding to move the page title away from the top of the header content and to add more space underneath the title.

In the Content Options metabox set the Auto Paragraphs option to Off, then publish/update this static block.

Navigate to the Appearance > Layout Manager > Headers page and click the Add New Header button. Give the header a title such as “Header with Title and Background” for example, then for the Content Source 1 option select the “Title with Background” static block that we have just been creating.

Scroll down that settings page to the options under the “Header Area” heading and give your header a background color, or a background image, or both if you like. Then click the Save Settings button.

Navigate to the article you want to assign this header to and click on the title of the article to open it for editing. In the Content Options metabox set the Header option to “Header with Title and Background”, and also enable the Hide Title option.

That’s it, we’re all done, click the Update button to save the article, and then and view the result.

Tip: One of the things you could do to vary this technique is to use Visual Composer in the static content and, instead of in the header settings, assign the background image using the Edit Row options. This would make it possible to have parallax effects on the background.

The article content technique

The alternate technique we are going to look at now is more suited to situations where you intend to change the background graphic for individual articles.

Navigate to your article and in its Content Options metabox select “Full Width” for the Body option, and also enable the Hide Title option.

In the content area, using Visual Composer, click the Add Row button and begin with a full width, one column row. Click the big + inside this row to add an element, and add a Text Block element. For the content of this Text Block enter the [page_title] shortcode.

The Edit Row settings window.
Click the Edit Row icon for this row – that’s the little pencil icon tab over on the right. In the Edit Row settings window, in the Padding input box enter 48px 0. Then scroll down to the Background Image option and click the little green + to choose a background image. After you have set the background image, scroll down a bit more and in the Extra class name box enter title-with-background. Click the Save button to save these settings and return to the article editor.

Back in the article editor, start a new row positioned beneath the first one. Hover over the row’s layout icon (above the row on the left) and set this row to the 2/3 + 1/3 column layout.

Add a second row and set it to the '2/3 + 1/3' layout.

In the right-hand 1/3 column add the sidebar widgets you want from the Visual Composer selection of widget elements (they’re the ones that have the circular WordPress logo).

Alternatively you can add a Vellum sidebar directly into that column using the theme’s [sidebar] shortcode. To do this, add a Text Block element to the right-hand column and for its content enter [sidebar alias="blog"]. You can change “blog” to the alias of your desired sidebar. You can see the full list of these, or create new ones, in the Appearance > Sidebars area of the admin.

In the left-hand column, add your page content.

Lastly we need to make a small adjustment to take into account layouts that have padding above the content area. At top right of the editor area click the CSS button and enter the following style:

.title-with-background { margin-top: -48px; }

This style will prevent a gap with some layout styles between the header and the title background.

Note: It is only necessary to add the title-with-background class to the first row and then make this style adjustment if you are not using a full width layout. There are already styles in the theme to make this adjustment automatically when using a full width layout in the layout manager, i.e. layouts that have only one column.

Okay, so that’s it, we’re finished. Click the Update button and view the result.  


Acknowledgements

This tutorial is based on an original post in the Vellum support forum by Andy Wilkerson.

Resources