Cover

Site Editor offers a collection of ready-made Cover blocks (outlined in purple below). Select a template Cover block, drag it from the library, drop it onto an available placeholder (usually, at the top of the screen, following the website header) and then configure it to suit your needs.

To select a Cover block for your site:

  • Click Build in the left-hand sidebar of the Site Editor:

  • Switch to the Blocks tab and click Cover at the top of the list. In the panel that appears, locate and click the Cover template you would like to use as a Cover for the website you are building:

  • Drag and drop the selected Cover block onto an available placeholder (usually at the top of the screen, following the website header) when the placeholder is highlighted in red:

You can now resize the Cover block and modify its look and feel to suit your needs.

To resize a Cover:

  • Hover over a Cover to display the resizing control at the bottom of the block:

  • Click the resizing control, then drag it upwards or downwards to modify the Cover height. The resizing control displays the padding height on either side of the block, upper or lower. 
  • Drop the resizing control to save the change and stop resizing.

To change the Сover Settings:

  • Hover over the Cover and click the Settings icon in the floating right sidebar that appears:

The Layout tab allows to:

  • Set the number of columns:

  • Align the layout elements vertically;

  • Stretch content to full-screen width with the Fluid Container:

  • Enable the toggle to display section in 100vh Full Height:

The Background tab allows you to:

  • Upload the background photo or video for the Footer;
  • Change the background color of the Footer;
  • Add effects.

To change the Background Color

  • Click the square of the Background Color to open the color picker and select the color.
  • Select Apply to save the change and close the color picker.

To add the Background Photo:

  • Drag and drop the background image into the Background Photo placeholder. 

  • The new background will immediately appear:

Alternatively, click the Background Photo box to open the Upload Image dialog and locate the image on your machine:

  • Drag and drop the image into the Drag & Drop frame:

  • Or click inside the Drag & Drop frame to open the Upload from Your Computer dialog and select the image to upload.

Overlay: click the square to open the color picker and select the overlay color; then drag the control to set the opacity level for the Background photo:

To add Effects, turn the switch on to enable the image effects:

  • Parallax
  • Fixed
  • Animate

Please Note: Effects can only be applied if an image has been added as a block background.

Parallax

Parallax is a change in the apparent position of an object to the distant background, depending on the location of the observer:

Fixed

Fixed is a static background effect when scrolling:

Animate

Animate background effect:

Select text inside any text or header element to display the editing menu and be able to modify the item: