Sections

Sections are one of the most powerful tools in Veello Theme. Found in the Sections backend module, similar to Contao articles they contain multiple content elements and have various design settings.

Most modern websites split their content into multiple parts using fancy separators, different backgrounds or custom layouts. Some of them are repeated across the website and some are individual per each page. This is exactly the purpose of the sections feature which you can use to build top bars, sub-headers, multi-level footers, individual content sections or any other sections on your website.

The website is usually built with different sections.

Despite the fact that a section usually contains settings such as layout or background, you can also use section as a primitive content container that can be included in various places of Contao.

Section configuration

The basic configuration of a section is very simple. All you have to set is at least the section internal name (used only in the backend) and choose one of the types:

Section: Contains all settings the section can have. Best for full width parts of your layout. Example use case: top bars, subheaders, multi-level footers, individual content sections.
Box: Does not contain layout settings. Example use case: small boxes in sidebar or in limited width containers.

Those are the only mandatory settings for each section. The advanced configuration is described later on this page.

Section basic configuration is as easy as it can get.

Adding section to the page

Once you have created a section, you can add it to the page in multiple ways:

In page layouts

A recommended way to include sections on the page is to add them in a page layout settings. They can be included in any layout section and for any language. Moreover, here you can decide whether you would like to include a complete section (wrapper + content) or only the section content (content).

You can include sections directly in the page layout settings.

In articles / row elements

Basically, articles and the row content elements can also have similar settings as section. We recommend this way when you know that certain section would be unique on the page. Then, you don't have to create a section and add it to the page, but you should rather treat an article as a section. There is a special field in article settings that allows you to treat an article in three possible ways:

Default settings: An article will have default settings and will look in a usual way.
Custom settings: An article can have the same settings as the section – layout, background, etc.
Existing section configuration: An article will adapt all section settings except for its content. In other words, you can use an existing section as a template.

Every section can be treated as a template for an article.

As content elements / frontend modules

Just like almost everything in Contao, sections can also be included as content elements and frontend modules. Here you also have an option to decide whether you would like to include only the content, or the complete section (including wrapper).

Hint

We recommend to include sections of the Box type as content elements and frontend modules.

Sections can be included as content elements or frontend modules.

Using insert tags

You can also embed sections on the website using one of the following insert tags:

{{vee::section::$id}} – adds a complete section to the page.
{{vee::section_content::$id}} – adds only the section content to the page.

The last parameter in the above insert tags is the section ID.

Advanced section configuration

The advanced section configuration splits into several groups:

Display settings

Every section can be shown or hidden for the certain breakpoint. In addition to that, there is also an option to display a section as toggleable box which could be useful on smaller devices. Then, the section content is initially hidden but can be opened using a toggler.

Another powerful feature is an ability to limit a section to be displayed (or hid) on certain pages. You can configure that using Filter by pages dropdown menu which will provide additional options based on the selection you chose.

Note

If a section is limited to be not shown on certain pages, you can still show it there by using a section content element.

Configure various aspects of section display behavior.

Layout settings

There are different types of the layout that section can have:

Boxed: Whole section is limited to the container width and centered horizontally.
Full width: Whole section is full width with horizontal margins.
Full background: Section itself is full width, but the content is limited to the container width and centered horizontally.
Without margins: Whole section is full width and without horizontal margins.

In addition to that, you can also set the vertical padding of a section. There is also an option to make a section full height, which means it will fill the whole window size.

Every section can have its individual layout.

One page settings

With a help of sections you can also build a one-pager website which is described in our One-pager guide. In order to do that, you have to check the Enable one page section box which will display more settings. Then you will be able to enter a section name used in navigation, choose a navigation icon as well as custom URL hash.

Sections are useful in building one-page layouts.

Background settings

Sections on the page wouldn't be that attractive if they look all the same. That is why you can set a custom background for each of them. The available types are:

Color: A background with a solid color and optional opacity.
Gradient: A background with a 2-color gradient in one of multiple directions.
Image: An image background with optional parallax effect. Also useful for pattern backgrounds.
Image slideshow: A background with image slideshow enhanced by multiple transition and animation effects.
Video (local files): A background based on local video files. Optional extra background image and parallax effect.
Video (YouTube): A background based on YouTube video. Optional extra background image and parallax effect.
Video (Vimeo): A background based on Vimeo video. Optional extra background image and parallax effect.

You can choose one of many background types for a section.

Overlay settings

Between the background and the content of a section you can combine multiple overlay effects:

Overlay color: Adds a solid color.
Overlay gradient: Adds a 2-color gradient in selected direction.
Overlay pattern: Adds one of built-in images as a pattern.
Overlay pattern image: Adds a selected custom image as a pattern.

Enhance your section visual by adding a fancy overlay.

Top/bottom divider settings

To even further enhance your website with beautiful sections, you can use custom dividers at the top and bottom of each of them. This will guarantee that your sections are not boring and visually more attractive.

Apart from selecting a divider type, you will also have to specify a divider color and a divider height in pixels for every breakpoint. As an extra option you can flip a divider horizontally and set its position to be either above or below the section content.

You can add one of many variants of top and bottom dividers to the section.

Style settings

If all the above options are still not enough, you can also add a custom styling to your section just like to almost everything in Veello Theme, using the style presets.