Back
How to Customise Your Blocks

Sitebeat Blocks are ready-made sections of your website layout, which are already preconfigured to include the basic Features that you need for your page. They are the building blocks and foundation of your website, which Sitebeat has made easy for you to customise.

Follow the steps below to customise your Block’s Layout and Background:

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

  1. Log In to access the Sitebeat dashboard.
  2. Under My Sites, click the Edit Site option on the website or project card that you wish to manage.
  3. Hover your mouse pointer over a Block then, click the Layout Icon that appears on its right edge to customise the following:
    Columns Click on the bar to set the number of columns for your Block.
    Align Vertically Click to enable/disable this option, if preferred.

    Note: Customising your Menu Block will have different Layout and Design options.

  4. Hover your mouse pointer over a Block, then click the Background Icon that appears on its right edge.
  5. Follow the corresponding steps below to use a Photo, Color, Video, Slider, or Map as your Background:

    Use a Photo as Background - Click on the Photo tab on the Background pop-up box and click Add Photo, or click on the existing photo (if any), then choose any of the following methods to select a photo:
    Upload to Sitebeat 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 Sitebeat.
    Access Sitebeat My Photos If the Photo was previously uploaded in Sitebeat, 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 Sitebeat, click the Free Photos tab from the pop-up window, then navigate through the categories and select the picture.

    You may also add a color overlay to your photo. Simply click on the box beside Overlay, select a color, and click Apply. Then, adjust its opacity using its corresponding bar.

    Use a Color as Background - Click on the Photo tab on the Background pop-up box and delete the existing photo (if any), then click the box beside Color, select a color, and click Apply.

    Use a Video as Background - Click on the Video tab on the Background pop-up box, then enter the Video Link in the space provided. You may adjust the opacity of the video by using the bar under Color.

    Or, you may add a color overlay to your video. Simply click on the box beside Color, select a color, and click Apply. Then, adjust its opacity using its corresponding bar.

    Use a Slider as Background - Click on the Slider tab on the Background pop-up box, then click Edit Slider to access the following options:

    • Settings - Under the Settings tab on the pop-up box, click to enable/disable the Loop Slides and Autoplay functions. If Autoplay is enabled, click and drag the bar below it to adjust its speed.
    • Navigation - Click the Navigation tab on the pop-up box to select a Navigation theme from the drop-down list, then enable/disable the Show Dots and Show Arrows options. If the latter options are enabled, select a preferred position from their corresponding drop-down lists.
    Then, hover your mouse pointer over your Block again to access the Slides + option on its top-left corner and the Background Icon beside Edit on its top-right corner.

    • Slides + Icon - Click the [+] Icon to add more slides. A [-] Icon will also appear, which you can click to remove slides.
    • Background Icon - Click on the Background Icon beside the Edit button to set a background for each slide. You can set a Photo, Color, Video, or Map background on each slide.
    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.

    You may also add a color overlay to your map. Simply click on the box beside Color, select a color, and click Apply. Then, adjust its opacity using its corresponding bar.

You’ve just learned how to customise the Blocks on your website page.

Was this helpful?
100% of people found this helpful.
-