Section REXPANSIVE LIVE

Sections contain boxes, which in turn host contents. You can create an infinite number of sections. Their height will depend on the blocks they contain.

Section / New

Click on this button to insert a new section. The section will be displayed on the bottom of the page.

Section / New adjoined

Click on this button to create a section next to the selected one.

Section / New adjoined

Click on this button to create a section next to the selected one.

Section / Full

The Full setting allows you to adapt contents to a full screen display:

Section / Boxed

The Boxed setting allows the user to center contents within a horizontally centered defined area (for example: Width 1024 px):

Section / Grid type

Sections are conceived within a 12-column grid: this means that if you need to create three horizontal boxes, these could be 4+4+4, or if you need to create 2 boxes (for example: text on the left side and an image on the right side) these could be 6+6 or 7+3, etc.

You can select the grid type by using the top left switch in the section tools:

1. ON: boxes will be sized (for example: 5×6) in proportion to the rest of the contents; furthermore, boxes can be moved freely within the grid.

1. OFF: the user will be able to control the height of the blocks (while their width will still be managed by the grid); the user cannot move the boxes freely:
   boxes will act as if a magnet is holding them in the top part of the section, helping the user fit them next to one another.
   

Section / Collapse

This function allows the user to arrange all blocks one above the other, with just one click.

Section / Copy (1)

You can copy a section and all its contents by clicking on this button. The copy will position itself immediately after the original section.

Section / Move (2)

You can move a section by positioning the cursor on this icon, holding the left mouse key and dragging the section to the position you want.

Section / Remove (3)

Click on the X icon to remove a section.

Section / Advanced settings

To access the advanced settings of the entire section, position the cursor on the top right icon in the shape of three vertical dots. This will open a dropdown menu. Click on the gear button to open the advanced settings window.

In this window, you can manage the following functions:

1. GRID: Enables/disables grid management;
2. FULL / BOXED: manages the section width;
3. SIZE: if “Boxed” is selected, you will need to set the width in pixels or in percentage;
4. DISTANCES: the four text boxes in the external rectangle represent the external distances of a section; the four internal text boxes represent the internal distances of a section; the central text box represents the distance between boxes.
5. FULL-HEIGHT: if enabled, this option allows the user to extend the section on the basis of the browser height, also extending the correspondent internal boxes;
6. ZOOM: if enabled, this option will enable the zoom function for all images in the section;
7. ANCHORS: the text box allows the user to name the section; should the user want to create links in large pages (for example: One page, Landing Page…), after entering the name an icon can be added in the right side of the screen to help the user move through the page in question quicker;
8. CLASSES: Experienced users can add a list of customized classes to the section.

Section / Other functions

In addition to the gear icon (please refer to advanced settings), the dropdown menu that appears when positioning the cursor on the icon in the shape of three vertical dots also features other functions:

1. BACKGROUND IMAGE: by clicking on this button, the user can set a background image for the section by accessing the WordPress Media Library;
2. BACKGROUND COLOR: by clicking on this button a color picker will appear, allowing the user to set a background color for the section; please refer to the dedicated section to learn about additional functions;
3. OVERLAY: by clicking on this button a color picker will appear, allowing the user to select an overlay color for the section; this color will appear on the image, video or background color in the section. This function is useful if you need to insert text on top of an image or a video and you need to make this text more visible; please refer to the dedicated section to learn about additional functions;
4. VIDEO: by clicking on this button a window will appear, allowing the user to insert a background video for the section. You can insert a YouTube or Vimeo video by copying and pasting their embed URLs, or an mp4 video, by accessing the WordPress Media Library.
5. MODELS: this function allows you to save the section as a model you can later insert in other pages.

Section / Moving boxes between different sections

You can move boxes between different sections. Move the cursor on the box you intend to move, hold the left mouse button until it is selected and all other elements of the section will be covered by a black shade.

Now you have selected the element, drag it into the destination section while holding the left mouse button.

Release the box within the new section to complete the process.