Berlin - Pages, sections, and popups | Section

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.



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.

Central column colour

This is the background colour used for displaying central contents. Default colour is white.

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.

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