Hiding Titles on Specific Pages
From time to time, you may find circumstances where it is visually appropriate to hide the Title on certain pages using the Full Width layout. Accomplishing this is quite easy, though it requires using the Layout Builder tool.
In the example above, you can see the Title field with the text, “Layout full width”. This is enclosed in an H1 tag, which is important both for accessibility and search engine optimization purposes. However, if you wish to visually hide it for design reasons, you can do so by clicking the blue “Layout” button in the top right corner of the page. You will get a page that looks similar to this:
Scroll down until you see the Title:
You will notice there is a small pencil icon in the top right corner in the section with the title. Click on this icon to edit the Title section, and you will get a drop-down menu with some options.
Choose “Configure” to edit this section.
You will get a modal dialog with some options that you can change.
You can leave most of the settings alone, but in the “Field Formatter Class” field, you should type in “visually-hidden”, without quotation marks.
Click on Update to save your changes.
When you return to the Layout Builder page, you will notice the Title is no longer visible in the layout.
Scroll back up to the top of the window, and click the “Save Layout” button to save your changes.
You will be redirected back to the page you are editing, and you will see an alert at the top of the page indicating that your layout changes have been saved.
If you wish to undo this change, all you need to do is visit the Layout Builder and remove the “visually-hidden” class from the Field Formatter class, and then save the change. Your title will then be visible at the top of the page once more.