Create a new carousel

This guide explains how to set up a new image or video carousel, defining the general options and configuring each individual slide.


1. General Carousel Settings

To start, define the title and operating options of the carousel.

1. Access the creation or modification section of the carousel.

2. In the Slider Title field, enter an identifying name for the carousel.

3. Check the Visible on site box if you want the carousel to be immediately active.

Options Configuration

In the Options section, define the size and behavior of the carousel:

1. Slider Height:

  • In the numeric field, enter the desired height.
  • In the dropdown menu next to it, select the unit of measurement (for example, px for pixels, vh for viewport height).

2. Autoplay: Enter the number of seconds after which the slide should automatically change. Leave empty to disable autoplay.

3. Loop: Select Yes to restart the carousel from the first slide once finished.

4. Arrows: Select Yes to show navigation buttons (arrows) to move from one slide to another.

5. Check the Random Order box to display slides in a non-sequential order.

2. Adding and Configuring Slides

In the Slides section, add and customize each individual slide's content.

1. Click on the button to add a new slide (usually labeled as Add or New Slide). A new configuration tab will open.

2. In the Slide Title field, enter an internal title to identify the slide (useful for organization).

Slide Content

1. In the Content field, insert text or elements that will be displayed over the slide background.

  • Note: This field supports a visual editor for advanced formatting.

Background (Image or Video)

In the Background section, you can define properties of a background image.

1. Background Images:

  • Click on the uploader under the label Desktop Image to upload the main image.
  • Click on the uploader under the label Mobile Image to upload an image optimized for mobile devices.

2. Image Settings:

  • Size: Select how the image should fit (e.g., cover to cover entire area, contain to fully display it).
  • Repeat: Define whether the image should repeat (e.g., no-repeat, repeat-x).
  • Position: Define image alignment (e.g., center center, left top).
  • Attachment: Define if the image is fixed or scrolls with the page (e.g., scroll, fixed).

Background Video

If you want to use a video as background, use the Video section.

1. In the Background Video field, paste the video link (supports Vimeo or Youtube).

2. On video completion: Select what action to perform when video ends (e.g., Continue looping, Hide, Freeze last frame).

3. Display on: Select which devices should display the video (you can select multiple options by holding down Ctrl or Cmd).

Overlay

The Overlay section allows you to add a color or gradient layer over the background to improve content readability.

1. Gradient: Select or enter a gradient to apply.

2. Color: Choose a solid background color.

3. Opacity: Enter a numeric value (from 0 to 100) to define overlay transparency.

3. Saving The Carousel

Once all slides and options are configured:

1. Click on the save button (usually located at top or bottom of page, not specified in source code).