Important: This article applies to customers who have purchase DIY- Website Builder after January 2020.
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.
With 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 web sites are pre-configured 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.
You can access the library of ready-made blocks from the left-hand sidebar:
- 1. click BUILD and switch to the BLOCKS tab.
- 2. Drag the block from the BLOCKS library (left-hand sidebar) of the Site Builder.
- 3. 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 Site Editor.
- 4. Click or select a feature to display the menu that allows you to modify the item.
To move a block:
- 1. Hover over the block and click Move in the right-hand floating sidebar that appears.
- 2. In the MOVE BLOCKS panel that appears to the right, click the block and move it by drag-and-drop.
- 3. 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.
To resize a block:
- 1. Hover over it and click the resizing control that appears at the very bottom of the block.
- 2. Then 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.
- 3. When resizing is done, release the control to save the change and stop resizing.
To delete a block:
- 1. Hover over it and click Delete in the appearing right-hand floating sidebar.
- 2. The block will immediately disappear.
To duplicate a block:
- 1. Hover over it and click Duplicate in the right-hand floating sidebar.
- 2. The duplicate block will immediately appear below its original counterpart.
Modify Settings of a Block
To modify the layout and design of a block:
- 1. Hover over it 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.
- 2. 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,
- Click inside the DRAG & DROP frame to open the Upload from Your Computer dialog and select the image to upload:
Note: 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.