About Slideshow Section
The Electro Slideshow section allows you to present a series of banners within a single designated area, creating an engaging and dynamic visual display.
Access Slideshow Section
To add the Electro Slideshow section, follow these three simple steps:
Step 1: In the Theme Editor, open any page type.
Step 2: Click the "Add section" button and search for "Slideshow".
Step 3: Click on the Slideshow section to add it to the page.
Slideshow Section Configuration
To configure the Slideshow section, click on it in the Template layout on the left side of the screen.
The section has five configuration cards: General, Layout, Controller, Content, and Accessibility
General
In the General card, you can:
Change the Color scheme specifically for the Slideshow section. These color schemes can be edited or created in Theme settings > Color.
Choose the Heading size for the section headings. This affects all headings added to each Slide. Options include Headline, H2, H3, and H4. The heading size is based on the Base text size defined in Theme Settings > Typography.
Layout
You can Set the section height for large screens and mobile devices separately by selecting the options in “Section height on large screen” and “Section height on mobile”.
These settings has 4 options to show based on your need, which is reflected in the Height dropdown selector:
50% screen height: display the height of the Slideshow section in 50% the height of the screen
70% screen height: display the height of the Slideshow section in 70% the height of the screen
Fill screen height: display the height of the Slideshow section in 100% the height of the screen
Adapt to image: display the height of the Slideshow section equally with the height of background image
By default, the banner section is set to 70% screen height for both large and mobile screens for optimal quality.
Controller
You can choose to:
Show pagination numbers
Display navigation
Enable autoplay for the slideshow
These options are enabled by default.
Set the autoplay delay time using the "Change Slides Every" slider. The default is 5 seconds, but you can adjust it from 3 to 10 seconds.
Tips:
Consider text content and images in each slide to allow appropriate time for customers to consume important details without pausing.
Avoid showing too many slides in a short time to maintain a good customer browsing experience.
Accessibility
In Accessibility, you can edit the Slideshow description by clicking on the placeholder.
Slide Configuration
The Slide block is an item within the Electro Slideshow section.
Click the "Add slide" button to add more slides (maximum of 5 slides).
To adjust a slide, click on the block and go to Settings.
Slide settings are divided into four cards: General, Text, Image, and Button.
General
In the General, you can adjust position for the content on the Slide block in “Content position on large screen” and “Content position on mobile”, which can be changed at Content Position dropdown selector:
Top left
Top center
Middle left
Middle center
Bottom left
Bottom center
After that, you can adjust the Overlay opacity for the slide, use the slider or enter number to adjust the percentage bar in the Overlay settings to the desired opacity:
The overlay opacity will be applied to the section and background image list. Therefore, it highlights the content inside the section.
You can adjust the overlay range from 0% to 90%.
You can also choose "Custom mask overlay" and "Custom text overlay" colors if the slide background is transparent.
Text
To adjust for each slide, click on the slide and go to the Settings. You can change the content in the slide in the Text tab with Subheading, Heading and Description.
Image
In the Image card, click on the “Select image” button to upload background images for large screens and mobile. The recommended size is 2880x1200px for background image and 750x1400px for mobile background image.
Note: You can set background images separately for large screens and mobile. If you set the background image for the large screen and don't upload the image for mobile screen, the mobile view will automatically inherit the image of the large screen. If you set the background image only for the mobile screen, the large screen will not inherit the image of the mobile screen.
Button
In the Buttons card, insert the button label name for the Primary and Secondary button to add buttons on the section. Click on the button link to add a direct link for them. If you want to remove one button, just delete the text in the button label.
Frequently Asked Questions
1. How do I add buttons to my slides?
In the Button settings card for each slide, you can add Primary and Secondary buttons by inserting button label names and adding direct links for each button.
2. Is it possible to change the opacity of the slide overlay?
Yes, you can adjust the Overlay opacity for each slide using the slider or by entering a number in the Overlay settings. The range is from 0% to 90%.
3. How do I remove a button from a slide?
To remove a button, simply delete the text in the button label field in the Button settings card.