Section

Overview

Section is the most widely used paragraph type due to the versatile functions it offers. Customize content with various text formatting options and styles in the text editor. You can also add photos and videos as background.

Add a section to a page

  1. In the Main Administrative Menu, navigate to Content.
  2. In the Content Overview table, select the page where you want to add the section, and click Edit. The page editor opens.
  3. Scroll to the bottom of the page editor and click Add Section.
  4. In the Headline field, enter a title or descriptive text for the section. Use the Text Editor toolbar to apply text formatting and styles as needed.
  5. In the Link area, enter a relative path or a URL to redirect visitors to an internal page or an external website. You can display the link as an icon, button, or external link, depending on the selected style.
  6. Set up Display Options (see Configure Display Options below).
  7. Click Save.
    • You can review any change before saving it with the Preview button.
    • To make new content visible on your website, turn on the Content is live (published) option.

Field Reference

Link area:

  • URL
    Here you can paste an external URL, enter an internal path or just start typing the content title and autocomplete will suggest matching items.
  • Link text
    Enter a clear and descriptive label for the link button.
  • Select a style dropdown
    Select how the link is displayed:
    • Primary button: Displays the link as a prominent button. If the Link Text field is left empty, the section remains linked, but the button is hidden.
    • Outline button: Unlike a filled Primary button, this style uses a border and transparent background. Best suited for secondary actions and supporting links when a Primary button should remain the main visual focus.
    • Info icon on the bottom left corner:  Displays the icon even if you leave the Link text field empty.
    • External link: If you leave the Link text field empty, the system displays the external link as a raw URL.
  • Open link in new window toggle
    Enable this option to open the link in a new browser window.

Tip

Choose an Accent Color in Page settings (right-hand sidebar) to customize button and link colors within the page content.

For more info, refer to Assign accent colors to individual pages in Change Look and Feel

Configure Display Options

Use the display options to customize the appearance and layout of a section element.

Field Reference

Background-Media Paragraph
Select an image or video to display as the Section's background.

Background-Media Paragraph Mobile
Optionally choose a different image for mobile devices to ensure the best display experience on smaller screens..

Background-Color Paragraph
The background color for the Section affects the text color within the textbox. If you choose a dark background color, the text automatically switches to white for better readability. It won't interfere with the image display.

Tip

To learn where to define new background colors for your Paragraph Types, see Change Look & Feel → Define background colors for paragraph types.

Position Textbox
Choose where the textbox appears within the Section. By default, None positions the textbox in the upper-left corner.

Background-Color Textbox
Pick a background color for the textbox.

Minimal Height of Paragraph
Define the minimum height of the Section in the browser. When a fixed height is specified, the background media automatically adjusts to fit the browser window.
You can either:

  • Set a custom height for the Section here, or
  • Upload media with the desired dimensions and enable Use Image Dimensions to preserve its proportions.

Use Parallax Effect
Enable a parallax scrolling effect to create a dynamic visual experience. For more information, see the Parallax Effect page.

Use Image Dimensions
Enable this option to preserve the original dimensions of the uploaded background image. This helps maintain a consistent appearance across different screen sizes while keeping the layout responsive.

Note

If Use Image Dimensions is enabled, the Parallax Effect cannot be applied.

Quick Demo: Add a section with a big headline, a background image, and the Parallax Effect applied.