A Web.com Partner
Sign Up / Log In
Online Support Website Builder

How to Customise Blocks in Website Builder

Website Builder Blocks are ready-made sections of a website layout, which are already preconfigured to include the basic Features that you need in each section.

You can easily customise each Block's Layout and Background to match the design that you want for your actual website.

Note: These instructions do not apply to the Menu Block which is the Header section of your website. To customise the Menu Block, click here.

Follow the instructions below to customise a Block in Website Builder:

  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.
  9. 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.
  10. Hover your mouse pointer over a Block, then click the Background Icon that appears on its far-right side to set your Block's background, then click and drag the button on the Overlay bar to set its intensity.

    Use a Photo as Background - Click Add Photo, or click on the existing photo (if any), and use one 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.

    Use a Video as Background - Click on the Video tab on the pop-up box, then enter the Link to Video in the space provided.

    Use a Map as Background - Click on the Map tab on the 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.
    Address Bubble Enable to show a bubble that points to the address set within the Map.
    Drag Control Enable to allow viewers to drag the Map around within its placeholder.
    Zoom Control Enable to display a [+][-] icon on the right-hand side of the Map, which viewers can click to zoom in and out for better view.

Congratulations! You just learned how to customise Blocks in Website Builder.

Was this helpful? Yes No 80% of people found this helpful.
{"message":""}