1. Home
  2. Page builder
  3. Element - Slideshow
    In this guide
Page builder
Page builder

Element - Slideshow

Last updated on 2023-03-02

The Slideshow element allows you to showcase a carousel of images with or without text and call-to-action. Discover the many display options of our Slideshow element to capture the attention of your users and highlight multiple themes on your website.

Create a Slideshow element

Once your section is ready, add a Slideshow element:

  1. First, choose whether you want to use an existing slideshow or create a new one.
  2. Give a title (FR/EN) to your slideshow and choose whether or not you want to display it.
    1. If you display your title, make sure to configure it properly: SEO tag, alignment, and color. This information is accessible by clicking on the 3 dots next to the TITLE field.
  3. Click on Add slide to add your first image to the carousel.
  4. Click on the created slide (the first one will be named "Slide 1") to edit it.
  5. Select an image, making sure its format is large enough for the section you are editing.

    For example, a full-width image should be at least 2560px wide.

  6. Add a title and select its color.
  7. Add content in the "Slogan" section, if necessary, and select its color.
  8. Several customization parameters are also at your disposal:
    1. Display order: Allows you to determine in which order you want the slides to appear on the site.
    2. Style: Allows you to determine the alignment of your title.
    3. Buttons: Allows you to add calls to action on your slides.
  9. Fill in your information in all languages of your website and press Return to add additional slides.
  10. Add all necessary slides.
  11. Adjust the settings of the element to match your needs:
    1. Display title
    2. Display slogan
    3. Display button 1
    4. Display button 2
    5. Display arrows: Display right/left scrolling arrows for the user.
    6. Autoplay: Enable automatic playback of the slideshow. Images will scroll based on the speed set below. If disabled, the user will have to scroll the slides themselves.
    7. Autoplay speed (ms): Set the speed (in milliseconds) of the automatic scrolling of the slides.
    8. Scroll down arrow: Display a downward scroll arrow at the bottom of the carousel to encourage users to scroll down the page.
    9. Slideshow height: Set a maximum height for the slideshow. Set the height according to the different types of devices:
      1. Mobile height
      2. Tablet height
      3. Desktop height
    10. Down scroll arrow color: Set the color of the downward scroll arrow.
    11. Down arrow anchor: Direct the user to a specific section of the page.
    12. Show navigation dots: Display small navigation points at the bottom of the carousel representing the slides of the carousel.
    13. Show slide titles: Display the titles of the slides at the bottom of the carousel, and use them as buttons to navigate through the slides.
  12. Once the Slideshow element is complete, save.
2667