Heading Groups

Heading Groups in Tridion are useful when you want more control over the semantic structure of headings on a given page.

• Some components or templates have options to display a heading above the component, but not the size or type of the heading.

• If you want the display title(s) for a single component or a group of components to use sub-headings as opposed to the default heading structure, you can use a Heading Group.

The following instructions provide an overview of Headings and Empty components in Tridion as well as information on using the Empty component and the Heading Group templates to control Heading hierarchy on a page in Tridion.

Table of Contents

Headings in Tridion

Headings are important on web pages for a variety of reasons. They can be used:

• To indicate the hierarchy of content on a page

• Differentiate the sections and sub-sections of the content on the page

• To describe the content in the section they appear before and make the page easier to scan.

In Tridion, the default Heading structure is as follows, based on a component’s position on the page:

1. h1: The first component on the page will have the highest level of heading format, h1, and will appear as the page title. This can be

   • An actual Page Titles component

   • Or the Title entered for other components, often a Content component.

2. h2: The heading for every component other than the first will use an h2 heading.

The following table is an example of what that might look like:

In some cases, a subset of components on the page are related, and you might want to change the heading structure of the page to reflect that.

This is where Heading Groups in Tridion come in:

• If the components in position 3 and 4 are examples of something described by component 2. it would be useful to indicate that relation with headings, shown below.

Downgrading the headings for the sub-sections helps indicate they belong to a specific section of the page, in this case “Our Programs.” You can accomplish this in Tridion with Empty components using the Heading Groups template.

Empty Components

An Empty component in Tridion is a component with no configurable fields. The component is used for various templates that do not require any information to be entered, including Heading Groups.

• As such, every Empty component in Tridion is the same (apart from its name) before its added to a page with a template.

Example of a Page Before Adding a Heading Group

For context, the following examples show what a page looks like before adding Empty components to a page as a Heading Group.

Below, you can see what the page looks like in the Component Presentations tab of the page in the website’s Root folder in Tridion.

Open

Highlighted in yellow above are the 5 components described earlier in these instructions, as they appear on a page in Tridion, before we make a Heading Group.

The below screenshot shows what this page looks like when it is published:

Open

There are some things to notice about the screenshot above:

1. The Title of the Content component that appears first on the page is made the page title and has an h1 Heading (highlighted in yellow above).

2. The Titles of the rest of the Content components are given h2 headings (highlighted in blue above).

3. Any Paragraph headings in the Content components are given h3 headings (highlighted in green above).

Now that you’ve seen what the default structure of component Headings looks like without a Heading Group, the next section will demonstrate how to add one to a page using an Empty component.

Adding the Empty Component to a Page

To create a Heading Group of components, you need to add Empty components to a page as a Heading Group template.

1. Navigate in the Root folder to the page you'd like to add a Heading Group to and double-click to open the page.

2. In the window that opens, click the Component Presentations tab (highlighted in blue below).

3. Click Insert at the bottom left of the page window (highlighted in yellow below).

In the Building Blocks window that opens when you click Insert (shown below), navigate to the 1 Functionality Layer Shared Components folder (highlighted in yellow below) to find an Empty component (named “ Horizontal Rule,” highlighted in blue below).

Select the component and open the Component Template drop down menu (shown below).

Once you’ve selected your Empty component:

1. Select Heading Group START from the Component Template drop down menu (highlighted in yellow above).

2. Click Insert (highlighted in blue above) to add it to the page.

3. Select Heading Group END from the Component Template drop down menu

4. Click Insert to add it to the page.

5. Close the Building Blocks window.

Once you have added your Empty component to the page using the START and END Heading Group templates, your page in Tridion will look like this:

Once the components have been added to the page, use the Move up and Move down buttons (highlighted in yellow above) to move the Heading Group START and END components to the following positions:

• The Heading Group START component should go above the component that contains the heading you want to be the first and main heading for the section/heading group.

• The Heading Group END component should go below the component that contains the heading you want to be the last heading in the group.

In this case, we’re going to move the Heading Group START component above the Our Programs component and the Heading Group END component below the Program B component:

Once the Heading Group START and END components are in the desired position on the page (highlighted in yellow above), Save and Close the page (highlighted in blue above), and you are ready to Publish.

Example of a Page After Adding a Heading Group

The following screenshot shows what the same page from the previous example page looks like after adding the Empty components to a page as a Heading Group.

There are some things to notice in the screenshot above:

1. The heading for the first component (page title, h1) did not change (highlighted in yellow above).

2. The headings for the first component in the Heading Group and the first component after the heading group remained h2 headings (highlighted in blue above).

3. The headings for the two components inside the Heading Group that weren’t the first changed from h2 headings to h3 headings (highlighted in green above).

   • The sub-headings (paragraph headings) for those two components also moved down one level from h3 to h4 headings (highlighted in red above).

For reference, the below screenshot shows what the page looked like before adding the Heading Group: