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 of the website that you wish to manage.
  3. Note: If you want to edit a new site, you have to unpublish the current website and make your new site as your primary website.

    Under My Sites, click the [...] Ellipsis Icon on the top-right corner of the website to unpublish the current site. Click Unpublish Site, and then click Yes, Unpublish to confirm.

    Under My Domains, click the [...] Ellipsis Icon of the website that you want to replace as your primary website, then click Replace Primary. In the pop-up window, select the domain of the new website in the New Primary Domain list, then click Replace Primary. You can also click the Domains tab under My Sites to perform the necessary steps mentioned.

    You can now edit the new site that you wish to manage.

  4. On your Site Editor, hover your mouse pointer over a Block, and 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 or disable this option, if preferred.

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

  5. Hover your mouse pointer over a Block, and then click the Background Icon that appears on its right edge.
  6. 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 then click Add Photo. You can also click on the existing photo (if any), and 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 then 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 then 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, and 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, navigate through the categories, and then select the picture.

    You may also add a color overlay to your photo. Simply click on the box beside Overlay, select a color, and then click Apply. 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. Click the box beside Color, select a color, and then click Apply.

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

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

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

    • Settings — Under the Settings tab on the pop-up box, click to enable or 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, and then enable or disable the Show Dots and Show Arrows options. If the latter options are enabled, select a preferred position from their corresponding drop-down lists.
    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 then click Apply. 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.
-