The core idea of Carousel allows you to show two or more images in sequence and these images can link to internal or external web links you would like.
Your shoppers that come across your carousel section can scroll through the slides by swiping with their fingers if using touch-screen devices such as Mobile or Tablet, whilst Desktop - Laptop users they can navigate through it by clicking on the arrows on the sides.
In this article, we will introduce steps to create a Slider section by using Carousel.
Step 1: Building the framework for the Carousel section.
- Drag and drop module Carousel from the left sidebar to your page.
- Duplicate to add more Slide or Remove the existing slide(s) as your expectation.
- Adjust the settings of module Carousel on the left sidebar:
- Set number of Column as 1
- Toggle ON/OFF Dots and Next/Prev Buttons
- Adjust Nav Speed - select how long each slide displays before it automatically advances to the next one.
- Toggle ON/OFF Loop
- Toggle ON/OFF Autoplay
Step 2: Add Image Background images for each slide
- Drag and drop the Hero Banner to each slide of the Carousel
- Upload your own image
Click on the image on the left sidebar to upload images from your device, or click on Browse Gallery to re-use images saved on Gallery.
Step 3: Adding Heading/Text block and Button above the images.
Create your own content, and change their appearance by using the Settings on the left sidebar.
Default padding-top & padding-bottom of a hero banner are 200px & 200px. When you decrease padding-top to 100px, and increase padding-bottom to 300px, the text - button section will be pulled up
Before
After:
Step 4: Associate a link to the Heading, Text Block, or Button so that your shoppers can click to explore further information
Click on Pick a link button on the left sidebar, then add an external link or pick an internal link from the link picker.
Repeat step 2, step 3, and step 4 for other images of the Carousel.
In case you want to keep this section, here are some tips to make your page load faster:
- Keeping the size of images as small as possible since the relationship between the size of images and loading speed is a trade-off.
- Using JPEG format also will speed up your image.