Back
How to Add a Panel

The Panel Feature in Sitebeat allows you to fill in spaces and visually break down your page's content. It acts as a mini page within your website page where you can add other Features - like Text, Buttons, Icons, Photos, and more - and whose layout and design you can customise so it stands out from the rest of your content.

Add a Panel on your website and customise it - to highlight content and draw focus on your call to action - using the steps below:

  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. Click Build from the left-side menu, then click Layout.
  4. Drag the Panel item and drop it onto a placeholder on your website page.
  5. Hover your mouse pointer over the Panel Feature, then click the Edit button on its top-right corner.
  6. Change the Panel’s Background Color, or use a Photo as your Background, using the steps below:
    Color Click the box on the opposite side of the Color label, select your desired background color and click Apply, then click the bar below the label to adjust its opacity.
    Photo Click Add Photo then use any of the following methods to change the background:

    • 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 image.
    • 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 image.
    • 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 image.
  7. Click on the Design tab on the pop-up box to adjust following:
    Border Click the box on the opposite side of the Border label, select a color and click Apply, then click the bar below the label to adjust its thickness.
    Radius Click the bar below it to adjust the radius of the border's corners.
    Shadow Click the box on the opposite side of the Shadow label, select a color and click Apply, then click the bar below the label to adjust its intensity.

You’ve just added a Panel on your website.

Other Actions:

  • To Move a Panel, hover your mouse pointer over it and click the moving tool on its upper edge, then drag it onto a different placeholder on your page.
  • To Resize a Panel vertically, hover your pointer over it and click the resizing tool at the bottom, then drag it up or down.
  • To Resize a Panel horizontally, hover your pointer over its left or right edge and click the [↔] Arrow Icon that appears, then drag it sideways.
  • To Delete a Panel, hover your pointer over it and click the [x] Delete Icon on its top-right corner.

Hit the play button below to view the quick start guide we've prepared for you:

Or, check out more video guides by visiting our YouTube How-To Playlist.

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