Back
How to Add a Slider

Adding a Slider on your website lets your visitors quickly navigate through a range of content or options — all at the same location.

The Slider Feature in Sitebeat allows you to add and customise a slideshow anywhere on your webpage. It is preset with (3) three slides, containing a Heading and a Text Feature per slide. Add a Slider on your webpage and customise each slide’s content 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 drag and drop the Slider item onto an available placeholder on your website.
  4. Customise the Slider as follows:

    Add/Remove Slides

    1. Hover your mouse pointer over an existing Slider on your website page to show the Slides [+-] Buttons at the top-left corner of its placeholder.
    2. Click the [+] Icon to add more slides and the [-] Icon to instantly remove slides.

      This action will remove the last slide or add one more next to the last slide, per click.

    Change Slider Background

    1. Hover your mouse pointer over an existing Slider on your website page, then click the Background Icon beside the Edit link that shows at the top-right corner of its placeholder.

      Note: Since there are other preset Features within the Slider Feature itself, hovering over it may show the settings for the other Features. To make sure that you are seeing the Edit link for the Slider Feature, ensure that the Slides [+-] Buttons appear at the same time on the opposite corner. If you don't see this, try hovering your mouse pointer farther away from the centre of your Slider, towards the edge of its placeholder.

    2. Follow the instructions below to add your preferred Background:
      Colour Click on the Photo tab on the Background pop-up box, delete the existing photo (if any), then click the box beside Colour, select a colour and click Apply. Adjust it's Opacity by dragging on the bar below it.
      Photo Click on the Photo tab on the Background pop-up box and click Add Photo, 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 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.
      Video Click on the Video tab on the Background pop-up box, then enter the Video Link 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.

      Note: When using a Photo, Video, or Map as your Slider Background, you can also set a Colour Overlay. Click the box beside Colour, select a colour and click Apply, then adjust it's Opacity by dragging on the bar below it.


    Access Slider Options

    1. Hover your mouse pointer over an existing Slider on your website page, then click the Edit link that shows at the top-right corner of its placeholder.

      Note: As mentioned in the previous note, ensure that the Slides [+-] Buttons appear at the same time on the opposite corner. If you don't see this, try hovering your mouse pointer farther away from the centre of your Slider, towards the edge of its placeholder.

    2. Under the Settings tab on the pop-up box, click to enable/disable the Loop Slides, Autoplay, and Align Vertically functions.

      If Autoplay is enabled, click and drag the bar below it to adjust its speed.
    3. 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.

    Manage Features within Slides

    You can customise or remove the preset Features within a slide, or select any of the Features and add as many as you need on each slide, using the steps below:

    • Add Features - Click Build from the left-side menu, drag and drop the Feature onto a placeholder within your Slider.
    • Customise Features - Hover your mouse pointer over a Feature inside the Slider, or click on a Feature, to access their editing options.
      For Heading or Text Features, highlight the text to display the editing menu above it.
    • Move Features - Hover your pointer over a Feature inside the Slider and click the moving tool on its upper edge, then drag and drop it onto a new placeholder within the Slider.
    • Remove Features - Hover your pointer over a Feature inside the Slider and click the [x] Delete Icon on its top-right corner.

      Important: Ensure that you do not click the [x] Delete Icon for the Slider itself. If the Slider is deleted, click the Undo icon at the top-left corner of the Sitebeat Editor page.

Congratulations! You’ve just added a Slider on your website.

Other Actions:

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

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 channel How-To Playlist.

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