Image Slider Element in Funnel and Website Builder
The funnel/website builder includes an Image Slider element allowing users to create image slideshows on their funnel and website pages.
In This Article:
Adding the Image Slider Element
To add the Image Slider element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Media section, select the Image Slider element and drag it to the desired location on the page.
Slide Options:
- By default, three slides will be added and be visible under slides in the right hand options panel.
- You can move slides around by clicking the two horizontal lines to the left of the slide name and dragging the slide to the location you want it in the list.
- You can delete a slide by clicking the trash can to the right of the slide name.
- You can add a slide by clicking the blue Add Slide link under the list of slides.
Individual Slide Options:
- Clicking on each slide from the Slide list will bring up slide specific settings in a box called Slider Item and will have the slide title next to it.
- Add an image by pasting a link or selecting from the media library.
- You can add a link to visit if someone were to click on the image in the slide.
- You can set specific a height or width for the slide. We recommend not setting both height and width to prevent distortion. When you set one number, the system will render the other measurement proportionally.
Advanced Options
Styling Options
- Adjust margin, padding, borders, and box shadow under the advanced tab.
- Margin will add spacing outside of the element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
- You can set a border style, thickness color and rounded corners.
- Box shadow has different settings to make it more/less prominent, adjust placement and adjust colors.
Pagination Options
- From pagination options, you can enable or disable pagination and set styles if enabled.
- You can choose the style of the slide indicators.
- Set colors for active and inactive slides.
- Set size of slide indicators
Slide Arrows
- Enable slide arrows for easy navigation.
- Set slide arrow color and arrow navigation if desired.
Slide Animation
- Choose how to animate your slides. Options are Fade, Slide or Erase In
- Choose whether to have your slides automatically move through and how frequently.
- If your slides automatically move through, should they run through once and stop or go on an infinite loop
- Should the auto move through stop if a user is hovered over an image
- Hide arrow will allow you to hide the arrows when auto move through is on.
Visibility and CSS
- Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
- Custom class and CSS selector allow you to make CSS adjustments that target this element.
FAQs
Q: How many slides can I add?
A: You can add as many slides as you want. Standard practice is to add 3-5 slides.
Q: What happens if a user clicks on an image in the image slider?
A: There is a URL redirect option for each slide which you can set from the Individual Slide Options. You also have the option to open in new tab or current tab.
Q: Can I resize the images in an image slider?
A: Yes, in the individual slide options you can resize your images.
Q: Can I add a button to an image slider?
A: You can have the button in the image itself and set the URL redirect for that slide to be the link. This will mean that clicking on the image will redirect to a specific page.