Also known as a "carousel", a Row Slider enables you to create a set of rows that visitors can flip through manually - or you can set them to transition automatically at specific intervals.
How to add a Row Slider
Hover on the row you wish to turn into a Row Slider. Click Row and then the More icon (3 dots). Select Add Row Slider from the list.
Now when you hover over the row, you will see a Row Slider button. Click this button to edit, duplicate, delete or access more options.
If you want to add more slides to your Row Slider, click Row Slider > More (3 dot icon). Click Add slide. navigate to Row Slider > Slides and select Add slide.
Row Slider design
To edit the Row Slider design, you can either select the Edit icon from the menu or More>Edit row slide. When designing your Row Slider, you can customize the background as well as the style of the arrows and pagination dots that visitors can click on to flip through your slides.
Note: Be aware that your Row Slider background color/image will only be visible on your website if the rows inside the slider have a margin greater than zero.
You edit the background color/image in the Row Slider Settings.
You edit the margins in Row Settings > Spacing > Margins.
You can customize your Row Slider arrows and pagination dots by navigating to Row Slider > Arrows or Pagination dots. Here you can change sizes, background colors and border properties in various states.
Why can't I see any arrows or pagination dots?
In order for the arrows and pagination dots to show on your row slider, you need to first enable them in the Row Slider settings menu. See image above or read more below.
Row Slider settings
Under Settings in the Row Slider menu, you can edit the settings. In the Settings menu, you'll see the following options:
Place row behind header: move the entire Row Slider with all its rows up behind the header. Read more about this feature here.
Show arrow navigation: if enabled, the navigation between slides of the Row Slider will be done through an arrow on each side, moving the slides on the respective direction.
Example of arrow:
Show pagination dots: if enabled, the navigation will be done with circles (dots) at the bottom of the row slider.
Example of pagination dots:
Auto transition of slides: slides in your Row Slider will automatically change without the visitor clicking.
Pause transition on hover: if Auto transition of slides is enabled and the visitor hovers on the Row Slider, the transition will pause. Once they hover somewhere else on the page, the Row Slider will resume the automatic transitions.
Slide transition type: define the transition animation for when rows slide from one slide to the next. You can choose between four animations:
- Slide: each slide moves in horizontally
- Slow fade: a gradual, slow transition (with the fade lasting 0.8 seconds)
- Fast fade: a gradual, fast transition (with the fade lasting 0.2 seconds)
- Zoom in: if you have added a background image on the slide, a zoom effect will "move in" on the image
Slide transition interval: by default the transition interval is 5000 milliseconds (5 seconds). Choose a smaller value if you want the transition interval to be shorter and a bigger value if you want the transition interval to be longer. Remember to input the number in milliseconds.
Transitions on the various viewports
Remember that it's possible to define different transitions per viewport, for example if you want a slow fade on desktop and a fast fade on mobile. Read more about working in the various viewports here.