The page title on your website pages can help your visitors to better understand the contents of your pages or help them to get around your website in general. Navigate to the Customizer > General > Page Title section, which will bring the following settings.
Just check the “Enable Page Title” checkbox to enable page titles for all the pages. It lets you display the page titles at the header of each page. We can adjust the Page Title style by customizing the given settings for it.
Let’s go over the available settings one by one.
Set the Page Title Style
You can use any of the 5 given styles for the page title. They are
- The page title displays at the left side of the page, right below the logo.
- The page title is centered based on the page width.
- Centered Minimal
- The page title is centered taking the page width in consideration.
- Additionally, you get a 2px bottom white border. It makes the page title look even more elegant.
- Background Image
- Primarily, it lets you add an image of your choice to display as the background for the page title.
- A couple more options are instantly added as you select the “Background” option from the drop-down. We will shortly discuss these after covering the details for other options.
- Hidden Title
- As the name reflects, the hidden title actually hides the page title.
- It does keep the background and other settings intact, making the page title feel more like a design spacer. It adds to the overall aesthetic appeal of the design.
Change the Heading Tag of the Page Title
You can choose to make your Page Title an H1 to H6. You can even mark it a “div”, “span” or “p” if you wish.
Just click on the drop-down menu under the “Heading Tag” label and easily change the heading tag of the page title.
Adjust the Visibility of the Page Title
You can choose to display the page title either on all devices or specifically select the mediums where you hide these page titles.
You have 4 available options namely
- Show on All Devices
- The page title is displayed on all kinds of devices, be it a tablet, mobile, or desktop.
- Hide on Tablet
- Lets you hide the page title on a tablet.
- Hide on Mobile
- Lets you hide the page title on every kind of mobile access.
- Hide on Tablet and Mobile
- Hides the page title on both tablet and mobile
Just click on the Visibility dropdown menu, and choose the ones that make the most sense for your website or business.
Change the Top & Bottom Padding for Page Titles
You can add space to the top and bottom of Page Title to make it look cleaner. That’s especially helpful if you are using a larger sized Heading tag, for example, H1. Otherwise, maybe more whitespace suits your design even more.
You can add padding space in pixels. There are two small input boxes, first one for the top padding and second ones for bottom padding. The third button lets you link top and bottom padding together. So if you enter a numeric value in any of the boxes, the other box will automatically update with the same value.
Change the Background Color of the Page Title
You just need to click over “Select Color” under the “Background Color” label and choose the color for the page title background. In some website designs, contrast colors would look best as the page title background. Some designs look better when you blend in the same colors in the background.
As a rule of thumb, make sure your page title is readable for whichever background and font color you’re using. That’s it! You will be able to preview changes live that will make it easier to decide which color to use.
Change the Text Color for the Page Title
The text color for page title must be readable and preferably in contrast with the background. Just click over “Select Color” under the “Text Color” label to change the color and preview the effect live in the theme customizer window.