Customer Success Center

Login Sign up

Pages, sections, and popups | Section

Modified on: Tue, 19 Dec 2023 4:09 PM

Sections are graphical divisions that we can add within pages. For instance, we can apply background colours and images to separate contents within the same page graphically.
These sections are essential, as all the components are added within them. Moreover, pages must contain at least one section.

Add new sections

In order to add a section, we just need to select the page, access the "Add content" tab and click on "Section".



Otra forma de añadirlo es seleccionar otra sección ya existente, acceder a la pestaña "Añadir contenido", situarnos en "Insertar después" y pulsar "Sección".


Set up a section

In order to set up a section, we select the section and access the "Properties" tab.



PROPERTY

DESCRIPTION

Show title

 We can use it to show/hide a section title. This title is "pasted" on the upper area.

If preferred, we can use other types of titles, like the screen title (See Section 3.1. ) or a simple edited text.

Primary colour of the screen

We can customise the background colour of the central column of the screen. This is the area of the page where contents like texts and images are displayed.

Secondary colour of the screen

 Its use is combined with "Type of column background" property.

Type of column background

 This property allows changing the background style of the central column of the screen. Its use is combined with primary and secondary colours of the screen.
  1. Solid. Colour assigned in "Primary colour of the screen" is applied.
  2. Lineal. A gradient colour combination is applied when combining the "Primary colour of the screen" with the "Secondary colour of the screen".
  3. Bicolour. Both colours are applied, one above the other. We can use the property called "Gradient colour (percentage)" to decide the space that the "Primary colour of the screen" will occupy. If we choose 50, that means 50% primary colour and 50% secondary colour; 90 means 90% primary colour and 10% secondary colour.
Gradient colour (percentage) If "Bicolour" option is chosen, gradient colour option is applied combined with "Type of column background". This gradient colour control allows adjusting primary colour percentage.

Screen background colour

This is the background colour used for the section. It will be shown on the sides of the central column of contents.

Screen background image

This property allows adding a background image for the section.

Type of background

This option is related to "Screen background image" property. We can:

  • Repeat background. Background image will keep its original size and will be repeated as many times as necessary until it covers the available space. It is very useful to apply links and models.
  • Do not repeat background. The image used as a background will be resized to adjust itself and cover all the available space. When using this option, it is highly recommended to use a high-resolution, big image.
 
Width

Allows you to decide the width of the central column, selecting between different parameters:

  • XS has a maximum size of 480px
  • S has a maximum size of 640px
  • M has a maximum size of 740px (default size)
  • L has a maximum size of 980px
  • XL has a maximum size of 1024px
  • XXL has a maximum size of 1280px
  • XXXL has a maximum size of 1920px
  • Full: occupies the entire width of the screen
Was this answer helpful?