Add excitement to the website with the Homepage Background Slider add-on. Replace the static homepage hero image with a lively animated image slideshow.
The main homepage text, search box, and/or call-to-action (CTA) will remain unchanged. However, a slideshow will be placed behind the call-to-action with up to 8 uploaded images.
How To Get This Add-On
Enabling the Add-On
To access this section, please go to: Settings >> Design Settings >> Homepage
Scroll down until you see the Background Image Slider >> Image Slider Settings:
The Homepage Slideshow usually is the first thing people see when they visit the site. It consists of the Carousel Images that are rotating in the background at the top of the homepage. There are 8 slides that can be used to display high quality website Images above the fold.
When selecting any of the images to go into the homepage background it is important to make sure the images used are the perfect size for the target audience.
To do so please read this article: Recommended Homepage Background Sizes
The Background Image Slider settings are divided into 2 sections:
- The Image Slider Settings
- The Individual Slide Settings
Image Slider Settings:
These settings can be divided into 6 different sections:
- Enable Slideshow?
- Rotation Interval
- Transition Effect
- Transition Duration
- Background Color
- Show Slideshow Arrows
This setting will decide whether the website uses the rotating image carousel functionality that is this entire module or if the website will use a single background image.
By selecting this setting to "Enable Slideshow" the website will display the rotating image carousel with all the images uploaded to this module.
"Disable Slideshow" will show a single homepage background image added here:
This setting will dictate how many seconds each slide rotates in the carousel.
There is a max setting of 10 seconds before the next slide must start being displayed.
This setting will dictate what effect will be applied to all the slides when they are rotating to display the next image in the carousel.
The available effects are Slide Left, Slide Right, Slide Up, Slide Down, Swirl Left, Swirl Right, Fade, Zoom Out and Zoom In.
This setting will dictate how long the effect will last before actually displaying the next image in the slider.
A good tip here is to make sure that the Transition Duration is always less time than the Rotation Interval.
This is the color that will load in the area that the homepage slider will be while the page is loading the images in the slider.
Usually this color only lasts a few seconds on the screen because the images of the slider load very fast.
Show Slideshow Arrows:
This is a "Yes" or "No" setting.
It will decide whether or not people visiting the site will be able to control which slide show image they see at a time.
It will accomplish this by adding or not adding small arrows that indicate a new image on each side of the slider.
The Individual Slide Settings:
This area consists of three main settings:
Enable Slide/Disable Slide:
This setting will determine whether or not the image uploaded to this slot of the slider will display on the homepage.
This setting allows people to select and add an image to one of the homepage slider slots.
This setting will change to "replace image" if an image was already placed and a change needs to be done.
This Setting will only remove the image from the slider slot and will not delete the image from the image manager.
NEED TO CROP OR RESIZE THE IMAGES? PLEASE CONSIDER USING THIS FREE ONLINE TOOL