BOX / REXPANSIVE LIVE

Boxes contain the contents of your page and can feature texts, images, videos and sliders. Boxes are positioned on a grid and you can perform the following actions on them:

1. MOVE: you can drag a box into a chosen position by positioning the cursor on a block and dragging it while holding the left mouse button;
2. RESIZE: you can resize the height and width of a box by using the small squares located on its perimeter;

Box / Shared tools

1. When you move the cursor on a box, the following tools and indicators will appear:SIZE: this indicator shows the box size, in the width x height format;
2. COPY: you can copy the box by clicking on this icon;
3. REMOVE: you can remove the box by clicking on the X icon.

Box / Other functions

Various additional functions are available, according to the type of box in question.

1. BACKGROUND IMAGE: by clicking on this button, the user can set or replace the image in the box by accessing the WordPress Media Library;
2. BACKGROUND COLOUR: by clicking on this button a color picker will appear, allowing the user to set a background color for the box; 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 box; this color will appear on the image, video or background color in the box. 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 box. 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. TEXT: by clicking on this button, the box will enter the text editor mode;
6. CONTENTS POSITIONING: by clicking on this button a window will appear, allowing the user to set the position of text within the box;
7. IMAGE SETTINGS: by clicking on this button a window will appear, allowing the user to replace the image, define the image type (FULL or NATURAL), define the position of the image within the box and activate the zoom function for the image;
8. SLIDER: this button allows the user to edit the slider.

CONTENTS POSITIONING

Clicking on this button will open a window through which it’s possible to set the text positioning inside the box.

IMAGE SETTINGS

Clicking on this button will open a window through which it’s possible to replace the present image, define the type of the image (FULL or NATURAL), define the image positioning inside the box, activate the zoom function on the image.

Box / Advanced settings

To access advanced settings, position the cursor on the icon in the shape of three vertical dots; this will open a dropdown menu. Next, click on the gear icon.

1. 1. IMAGE TOOLS:
      1. insert or replace the box image;
      2. choose the type of display for the image, if you prefer to keep its natural size in the box or want it to fill the entire box, by cutting the image;
      3. enable the zoom function;
      4. set the image alignment;
   2. BACKGROUND: use the color picker or select one of the default colors;
   3. OVERLAY: use the color picker or select one of the default colors; 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;
   4. TEXT ALIGNMENT: set the text alignment in relation to the box;
   5. TEXT DISTANCE: set the distance between the text and the box perimeter;
   6. LINK: by inserting a link, the entire box will become a link;

      This will open a window displaying all advanced settings you can apply to a box:

       

   7. CLASS: experienced users can assign a customized class to the whole box.