Panels: Setting the page title using the Panels Title widget

Setting and translating the title of a Panels page can be difficult in Drupal, so we have created a widget to help make this task easier for you in the Drupal Web CMS. This method overrides all other methods of setting the title.

First, what do we mean by title? The most important thing this section is designed to alter is the contents of the <title> tag, which is used in most browsers in the title of the window or tab, as you can see here in Firefox. The title of this page is “Hello World”. The name of your site is automatically added after the title on every page.

* decoration

For nodes, the title is taken from the Title field that is mandatory for every node. For panels, there are many different options that differ in ease of translation and customization. When picking an ideal solution, we went with the most straightforward and simple option that allows you to translate the title properly. You can also use this solution to display an H1 on the page if you want, or you can use title content snippets.

To start with, follow the steps in the section Adding content and Mini panels to add a new widget to your Panels page. It should be the first widget to appear on your site, so add it to the top- and left-most region in your layout. If you are going to use it as the <h1> for the page, then you should put it in a row by itself at the top of the page. The widget is named “Page title” and it is classified underneath “Content”.

* decoration

The configuration settings are fairly simple. Enter an English title and a French title for your Panels page. This is the text that will appear before the pipe (|) in the window or tab title bar as shown above (i.e. “Hello World” in our example). If you do not want to display the <h1> tag, check the option to hide it.

* decoration

Once you’ve added your Page Title widget to the page, change the “Title type” to “From pane”. This will tell Panels to use the title provided by a pane as the title of the page itself as well. Once you have done this, you will need to click “Update and save” in order to proceed to the next step.

* decoration

Lastly, you will need to tell Panels which pane it is that has the content in it. Do this by clicking on the gear on the right side of the Page Title widget we added and clicking the option for “Panel title”. If you do not see the option for “Panel title”, clicking “Update and save” may resolve this problem or reloading the page. 

* decoration

Once this is done, the last step will be to add styling to your Page Title. For this, click on the gear icon once more. Under Style, click on "Change". The style you will want to choose is called "No markup at all".

Once done, click on "Update and save" to save all your changes.

Back to top