Section With Headline component

divide the page into linkable sections

create headlines
use section titles in the In-page Navigation
add background images

The Section With Headline component is used to create a headline and to divide a page into areas that can be linked to. It is usually used together with the In-page Navigation component that creates a sticky navigation of all created Section With Headlines.

on this page:

CMS settings , Opens In New Window Front-end , Opens In New Window

Step by step , Opens In New Window

Section ID , Opens In New Window Section title , Opens In New Window

The Section with Headline component goes hand in hand with the In-page Navigation component as they can only use their full functionality when used together. The idea behind a section is, to divide a page into blocks (sections) that can be directly navigated to or automatically scrolled to via links. These links can be on the page itself (e.g. in the In-page Navigation or a Hero component) or on a different page via e.g. a Link component. You could also call this deep-linking. To find the sections on a page, each section must have a unique ID (within the page), also called anchor. In order to display the sections in the In-page Navigation, an additional section title must be added.

As a new additon, background images can now be added to the Section With Headline, including GIFs for a moving background and SVG images.

Glossary:

Example from Erste Bank AT:

Bargeldlos und kontaktlos bezahlen war noch nie so einfach. Nützen Sie die Zusatzleistungen Ihres Kontos um wenig Geld:

Kreditkarten

Visa Card Gold oder MasterCard Gold mit weltweit gültiger Reiseversicherung – und Ihrem persönlichen Wunschcode.

tab: General

In the tab General, the Headline Importance (H1-H6), the Section ID and the Section Title are set.

Editorial hint:

BB Codes

Since there is no Rich Text Editor for writing the textual content of the component, it is helpful to use BB Codes for styling. You can insert a line break or simply make some text bold, italic or red.

tab: Background Image

In this tab background images can be added to the Section With Headline.

There are 2 image drop fields available, one for the desktop version (Desktop Background) and one for the mobile version (Mobile Background). In the Mobile Background filed, a seperate image can be added for the display on mobile devices. If left empty the mobile version will be displayed without a background image.

jump to example

Editorial hint:

Themes & Text Color

Since there is no option to change the text color, this might be a problem for adding background images. However, changing the Theme in the General tab, will change the text color. This will also apply to components inside the Section With Headline, if their Themes are set to Transparent.

For example: You have a mostly black bakground image, so the text becomes unreadable. If you change the Theme to Dark Blue, the text will become white.

Editorial hint:

GIF And SVG As Background Images

All image files are allowed as background images, that means if you want to have a moving background for your Section With Headline, all you need to do is add a GIF as the background image. If you want to use a background image that has an empty background and want to use a Section With Headline Theme as background instead, just use a SVG file.

tab: Spacing

The headline is rendered as a h1-h6, aligned center:

The headline is aligned center:

The headline is aligned left:

A headline with checked bordered field:

A headline with checked top-link field:

A headline with Background Image Desktop & Mobile set and Use Section As Stage unchecked:

A headline with only Background Image Desktop set and Use Section As Stage unchecked:

A headline with only Background Image Mobile set and Use Section As Stage unchecked:

A headline with Use Section As Stage unchecked and long content:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

A headline with checked Use Section As Stage field:

A headline with checked Use Section As Stage field and long content:

Overflow with Theme as Background

A headline with a SVG image as Background Image:

A headline with a GIF as Background Image and Dark Blue Theme for white text:

Section With Headline component

Glossary:

Example from Erste Bank AT:

Kreditkarten

tab: General

tab: Background Image

tab: Spacing

Overflow with Theme as Background

1

2

3

Help Center

Important links:

Topics: