滑页/滚动页元素

In this tutorial, you will learn about the slide/scroll element and how to use it.

About slide/scroll elements

Slider elements are designed to display a series of content items in a single compact view to increase conversion rates. You can use slide elements to display featured products, promotions, customer testimonials, and more.

Slider element path, please select Add Element > Container > Select Slider Element from the left sidebar, then drag and drop the element into the page editor.

You can check more details in the video tutorial below.

Note that you can use the search function to find this element, not in the sidebar.

Slider elements come in several variants to suit most needs. We’ll continue to add more variations to help you save time.

Drag a variant to a layout and see how to configure it.

Slider element configuration

The slide element has a large number of parameters that allow you to fine-tune the look of your content to achieve the best conversion rate.

Select an element in the layout to view its parameters.

In this article, we will show the parameters of the “General” and “Style” options of the “Slide” element.

General option parameters

Slide page navigation style Slide page pagination style s

The parameters in the “General” option of the slide element include:

General option parameters
1. Slide settings	Navigation: The left/right arrow navigation of the slide page has 5 different styles. Alternatively, you can select None and navigate between slide pages by clicking Page Break. This works for live pages. E.g, Navigation style one: Navigation style four: Slide Pages: There are 3 different styles of slide pages. Height: Slide to adjust the height of the slide. Please note: the minimum height of the slide page is 100px and the maximum is 1000px. Loop: Enable/disable infinite loop swipe. This only works on live pages. Autoplay: Enable/disable autoplay of slideshow in slideshow. This only works on live pages.
2. Slide item	You can add slides and rearrange the order of these slides by dragging the 3 dots icon to the left of the slide name . You can also copy or delete slides from a slide show .
3. Operation	You can read more about action parameters here
4. Properties	You can read more here .
5. Visibility	You can read more here .
6. Animation effects	You can read more here .

style option parameter

style option parameter
There are two ways of changing styles: slide settings Navigation Settings: There are 3 options such as “Normal”, “Hover” and “Enabled”.
1. Overall	You can read about all these parameters here .
2. Margins	You can read about all these parameters here .
3. Typesetting and printing	You can read about all these parameters here .
4. Background	You can read about all these parameters here .
5. Border	You can read about all these parameters here .
6. Display	You can read about all these parameters here .
7. Custom CSS	You can read about all these parameters here .

Nested element configuration

Please note that a slide page element is a combination of multiple slide pages, and each slide page can contain various elements according to your needs, such as titles, paragraphs, pictures, buttons, etc.

Also, you can embed a link in each slide, which will redirect you to the desired location when clicked anywhere on the slide.

If you want to replace or add an image background for a slide, you can select the desired slide, then go to the Style tab > Background Image, and select the desired image.

You can see a picture of this below for a better demonstration.

Common cases for slide elements

Set full screen slide page

If you want to set it for the slide page, select the slide page module and disable the “Set fixed width” option in the “General” option, as shown in the figure below

Replace image in slide page

To replace an image in a slide with another image, select the desired slide, then go to Style options > Background Image and select the desired image.

You can see this image below for a better presentation