How to Customize Page Title & Bread Crumbs

How To  Tutorials  Since: 1.6.0 Last Updated: Time to Read: 1 minute

This tutorial provides some quick tips for customizing the Page Title Banner that appears on pages using the Blank page template and Blog using Custom CSS.

For in-depth technical overview of this template section and CSS class info, see title-banner.

In the following styles, we convert the title content to use flexbox display: flex  for faster control of positioning that is mobile-friendly, then apply a center text align.

Flexbox allows us to easily swap the title and bread-crumb positions a couple ways.

One is to change the flex direction to column-reverse :

For titles with excerpts, it is better to use the second option order . This property allows you to set the order of a flex item. By default, the title displays the bread crumbs first, title second and excerpt third. To make the title first:

This example makes the title larger and substitutes a custom font. In general, the font you choose for Titles in the Layers options will apply to the page titles too. Font substitution is only needed if you want to use a Typekit font or other custom font you are including in a child theme via @font-face.