Site Editor offers a collection of ready-made Cover blocks shown below. Select a Cover block template, 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 it to display the resizing control at the bottom of the block:
- click the resizing control, then drag it upwards or downwards to modify the height of the Cover. The resizing control displays the height of the padding on either side of the block, upper or lower. When resizing is done, drop the resizing control to save the change and stop resizing.
To change the look and feel of the Cover:
- hover over it and click the Settings icon in the right-hand floating sidebar that appears:
The LAYOUT tab allows you to modify the layout of the Cover:
- set the number of columns (just drag and drop the control), and – align the elements of the layout vertically (to place them in the center of the Cover block as shown below):
The BACKGROUND tab of the Settings dialog allows you to:
- upload the background photo for the Cover, and change the background/overlay color:
BACKGROUND COLOR: click the square to open the color picker and select the background color for the website Cover to appear if the Cover has no background photo; click Apply to save the change and close the color picker:
BACKGROUND PHOTO:
Drag and drop the background image into the BACKGROUND PHOTO box. You will immediately see the new background:
Alternatively, click the BACKGROUND PHOTO box to open the Upload Image dialog and locate the image on your computer:
- 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:
Select text inside a Text or Heading element to display the editing menu and be able to modify the item:
