Blocks

What Are Blocks?

A block is a ready-made section of a website layout, such as a Banner, Footer, Pricing, or Contacts section, which you can use to build your website.

Using blocks, you don't have to add every single button, icon, photo, or menu option to your web page by hand. These larger building blocks of a web page layout common to all websites are preconfigured for you. Select your Header, Footer, Banner, or Menu from the library of ready-made blocks, drag and drop it onto an available placeholder and modify it to suit your needs.

Adding Blocks

You can access the library of ready-made blocks from the left-hand sidebar: click BUILD and switch to the BLOCKS tab.

Drag the block from the BLOCKS library (left-hand sidebar) of the Site Builder:

And drop it onto one of the available placeholders which are highlighted in red when you drag the selected block over them.

A block consists of a set of configurable elements - buttons, icons, photos, text items, forms - called "Features" in the Site Editor.

Click or select a Feature to display the menu that allows you to modify the item.

Moving Blocks

To move a block, hover over it with the mouse cursor and click Move in the right-hand floating sidebar that appears.

In the MOVE BLOCKS panel that appears to the right, click the block and move it by drag-and-drop.

When moving the block is done, give a focus to the site by clicking the site area or the x in the right-hand corner of the MOVE BLOCKS panel.

Resizing Blocks

To resize a block, hover over it with the mouse cursor and click the resizing control that appears at the very bottom of the block.

When drag the resizing control upwards or downwards to resize the block. The resizing control displays the height of the padding on either side of the block, upper or lower.

When resizing is done, drop the control to save the change and stop resizing.

Deleting Blocks

To delete a block, hover over it with the mouse cursor and click Delete in the appearing right-hand floating sidebar.

The block will immediately disappear.

Duplicating Blocks

To duplicate a block, hover over it with the mouse cursor and click Duplicate in the right-hand floating sidebar.

The duplicate block will immediately appear below its original counterpart.

Modify Settings of a Block

To modify the layout and design of a block, hover over it with the mouse cursor and click the Settings icon in the right-hand floating sidebar:

LAYOUT Tab:

  • COLUMNS AMOUNT: drag to set the number of columns:

  • ALIGN VERTICALLY: select to vertically align elements of the layout (maps, buttons, text, and header elements) inside the block. In other words, select the ALIGN VERTICALLY control to place the elements into the center of the block:

  • BACKGROUND Tab:

  • BACKGROUND PHOTO:
  • drag and drop the new 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:

  • you can also paste the link to the background photo into the External Upload Link field located at the very bottom of the Upload Image dialog.