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 |
Please note: the minimum height of the slide page is 100px and the maximum is 1000px.
|
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:
|
|
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