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 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 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, click Build from the left-side menu, and then drag and drop the Slider item onto an available placeholder on your website.
  5. Customise the Slider as follows:

    Add or Remove Slides

    1. Hover your mouse pointer over an existing Slider 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, and then click the Background Icon beside the Edit link 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:
      Color Click on the Photo tab on the background pop-up box, and then delete the existing photo (if any). Click the box beside color, select a color, and then click Apply. Adjust its opacity by dragging on the bar below it.
      Photo Click on the Photo tab on the background pop-up box. Click Add Photo, 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. You can also 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 then 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, and 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, and then navigate through the categories and select the image.
      Video Click on the Video tab on the background pop-up box, and then enter the video link in the space provided.
      Map Click on the Map tab on the background pop-up box, and 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 color overlay. Click the box beside color, select a color and click Apply, and then adjust its opacity by dragging on the bar below it.


    Access Slider Options

    1. Hover your mouse pointer over an existing Slider on your website page, and then click the Edit button 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 or 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, 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.

    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, click the moving tool on its upper edge, and then drag and drop it onto a new placeholder within the Slider.
    • Remove Features — Hover your pointer over a Feature inside the Slider, and then 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.

Other Actions:

  • To Move a Slider, hover your mouse pointer over it. Click the moving tool on its upper edge, and 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. Click the [↔] Arrow Icon that appears, and then drag it sideways.
  • To Resize a Slider’s placeholder vertically, hover your pointer over it. Click the resizing tool at the bottom, and then drag it up or down.
  • To Delete a Slider, hover your pointer over it, and then 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:

You can also check out more video guides by visiting our YouTube How-To Playlist.

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