Full Width Title Bar

 

This guide will show you how to set up a simple full-width title bar component.Use this component when you want to add a stylized title to the top of a page or section.

This component looks best when it is on a page set to use a full-width layout, but will work in contained layouts as well.

1. Click on the section you would like to add this component to. In this example, we will be inserting it into Main Content.

Page editor showing the Main Content section highlighted and ready for editing.

2. Next, click on the Insert Component icon.

Toolbar in the page editor with the Insert Component icon highlighted.

3. Click on or filter by name for "1_Banners – Full Width Title Bar." You will see a preview of it appear on the right-hand side.

Component library filtered to show the Full Width Title Bar banner, with a preview displayed on the right.

4. Click on INSERT.

Insert button selected in the component panel to add the banner to the page.

5. In Main Title, add the headline you want to appear in the bar.

Component settings panel showing the Main Title text field ready for entering a headline.

6. Next, you'll select the heading H tag you would like to assign that headline.

For more information about how and when to use different H tags, see our H tag article.

Dropdown menu in the component settings for selecting the heading level, such as H1 or H2.

7. Click on SAVE.

Save button within the component editor used to apply changes.

8. Click on SAVE again at the top of the page.

Global Save button at the top of the page editor.

9. Click on the Preview tab to check your work.

Page editor showing the Preview tab selected to review the published layout.

10. Great job!

Completed page preview displaying the full width title bar successfully added.


Demo

[Show a demo of the component]


Other Articles Mentioned in This Tutorial

How to structure H tags