How to Manage Blocks in Website Builder

Website Builder is a platform that allows you to create powerful websites without the need for any technical background, or hiring a developer for that matter. With >Website Builder, you are given access to easily customisable templates, a drag-and-drop editor, a mobile editor, and a quick-setup social media integration.

One of the Website Builder tools that will help you create your website is called a Block.

What is a Block?

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 page in Website Builder.

Accessing the Blocks Library

You can access the Block you need in the library of Blocks, by following the steps below:

1. Click Sign Up / Log In at the top of this page.
2. Select Account Manager from the drop-down menu.
3. Enter your username and password then, click Log In.
4. Click the Visit My Account button.
5. Click Website Builder from the menu at the top of the page.
6. Click on the Website Builder plan that you wish to manage.
   If you only have one Website Builder plan, you will automatically be redirected to its management page.
7. Hover your mouse pointer over the [+] Icon at the upper right-hand section of the page and click Build Now.
8. On the Sites page of your Website Builder Dashboard, hover your mouse pointer over the project/website that you would like to customise and click Edit.
   Or, if you haven't started one yet, click the Create Site button at the top-right corner, then select a template and click Create This Site to start building one.
9. On the Website Builder Editor, click Build from the left-side menu.
10. Click on the Blocks tab to display the Blocks Library.

Now that you’ve learned how to access Blocks, you are free to manage them to suit your needs.

Managing Website Builder Blocks

Website Builder gives you the freedom to choose which Blocks you wish to use and manage by yourself. You can add, customise, resize, move, duplicate, and delete Blocks to help you build your website the way you want it.

Adding Blocks
From the Blocks Library, hover your mouse pointer over a Block name and move your pointer over the extended menu on its right to scroll down and view more Block templates, then drag and drop your chosen Block onto a section placeholder on your website page.

Customising Blocks
Website Builder also allows you to customise the Layout and Background of the Blocks you want to use on your website.

1. To customise a Block’s Layout, hover your mouse pointer over a Block then, click the Layout Icon that appears on its far-right side to customise the following on the pop-up box:
   

   Columns	Click on the bar to set the number of columns you would like your Block to have.
   Align Vertically	Click to enable/disable this option accordingly.

   Note: Customising your Menu Block will have different Layout and Design options. Learn more about it here.

2. To customise a Block’s Background, hover your mouse pointer over a Block then click the Background Icon that appears on its far-right side. You can use a Photo, Video, or Map as your Background, then set its Overlay by dragging the bar on it.
   
   Follow the respective steps below to change your Block's Background:
   

   Photo	Click on the Photo tab on the Background pop-up box, then choose any of the following methods to select a photo: Upload to Website Builder If the Photo is in your computer, drag and drop it into the pop-up window or click Browse to manually look for the image from your list of folders and upload it to Website Builder. Access Website Builder My Photos If the Photo was previously uploaded in Website Builder, click the My Photos tab from the pop-up window and select the picture. Access the Cloud If the Photo is in another online account, click the Clouds tab from the pop-up window, connect to your online account, then navigate and select the picture. Use Free Photos If you want to use a free photo from Website Builder, click the Free Photos tab from the pop-up window, then navigate through the categories and select the picture. Tip: If you want to use a solid colour as your Background, delete the existing photo (if any), then click the box beside Colour, select a colour and click Apply.
   Video	Click on the Video tab on the Background pop-up box, then enter the Link to Video in the space provided.
   Map	Click on the Map tab on the Background pop-up box, then click Edit Map to customise the following: Address - Enter the address to show in the Map. Type - Select the type of Map to use from the drop-down list. Zoom - Click and drag to adjust the zoom visibility of the address in your Map.

Resizing Blocks
To resize a Block, hover your mouse pointer over a Block and click the Resizing Control that appears below it. Drag the Resizing Control up or down to resize, then release when done.

Moving Blocks
To move a Block, hover your mouse pointer over a Block and click the Move Icon that appears on its far-right side. A Move Blocks menu will appear on the right side of the screen. Drag and drop the Blocks inside the Move Blocks menu to move and reorder them, then click the [x] Icon at the top-right corner of the menu to close when done.

Duplicating Blocks
To duplicate a Block, hover your mouse pointer over a Block and click the Duplicate Icon that appears on its far-right side. The Block, including all the Features within it, will automatically be copied and a duplicate Block will appear below the Block.

Deleting Blocks
To delete a Block, hover your mouse pointer over a Block and click the [x] Icon that appears on its far-right side. The Block, including all the Features within it, will automatically be deleted from your website page.

Congratulations! You now know how to manage Website Builder Blocks. Learn all about Website Builder Features by clicking here.