All web components are encapsulated inside sets divisions called Sections.
The following image presents the concept of section in a more visual way. More specifically, each red frame of the screenshot indicates one section. Sections are useful to configure settings for the content inside. For example. some typical settings can be the height of the section, the width of the section or whether you want to apply parallax effects while scrolling the section. The paragraphs below explain all the settings in details.
Basic settings
Every Section has a predefined set of options, which give the opportunity to render it in different ways. The available settings are the following:
Setting | Description |
---|---|
Style | Description |
Has header? |
This option is meant to be used with the Hero Header component. More specifically when this option is checked, the menu is displayed on the Hero Header instead of above the Hero Header. |
Title/ Title color/ Show title |
The title of the section along with settings regarding it's color and whether you want it to be rendered or not. |
Scrolling Menu Title / Show Scrolling Menu Title |
This is meant to be used with the Scrolling Menu component. More specifically, in this setting you can set the title that you want this section to have on the Scrolling Menu and whether you want it be rendered it or not. |
Display |
This setting sets the width of the Section:
|
Section height |
This setting sets the height of the Section:
|
Effects |
This setting provides a set of effects for the sections, mostly related to the parallax scrolling effect.
|
Lazy Section |
This setting makes the section appear while scrolling |
Box effects |
This setting is meant to be used for the 4 box elements: Article Box, Thumbnail Box, Resource Box and Agenda Box. More specifically it provides an effect that expands each box when hovering. In order to be used, all the components inside this section need to be of box type. |
Background Settings
Every section can have a background. This background can be an image, a video or a color. In the cases of images and videos, they can be either local resources that you upload from your machine or CDS resources.
Content
The main content of Landing Pages constitute of Web Components. A dedicated page presents the list of available components.
The content can be placed in any of the three columns: Left, Center or Right. Based on where you will place your content, the columns will cover specific amount of the section.
Useful Info
The percentage of page that each column will cover depends on which display you have chosen (centered content, fluid width etc)
The following table shows the section coverage based on which columns you have chosen:
Setting | Description |
---|---|
Style | Description |
Only left column |
The content of the left column will cover 50% of the section. |
Only right column |
The content of the right column will cover 50% of the section. |
Only left and right column (without center column) |
The content of the left column will cover 50% of the section while the content of the right column will cover the rest 50% of the section. |
Only center column |
The content of the center column will cover 100% of the section. |
Left & center column |
The content of the left column will cover 25% while the content of the center column will cover the rest 75% of the section. |
Center & right column |
The content of the center column will cover 75% of the section while the right column will cover the rest 25% of the section. |
Left, Center & right column |
The content of the left column will cover 25% of the section, the content of the center column will cover 50% of the section and the content of the right column will cover the rest 25% of the section |