In today's digital age, where user experience plays a crucial role in retaining customers and ensuring website visitors stay engaged, introducing dynamic elements like the image slider can be game-changing. Referins with its forward-thinking approach, has introduced an image slider element in both funnels and websites. If you've been wondering how to make the best use of this feature, you're in the right place!
Getting Started with the Image Slider
Accessing the Image Slider Element: Log into your Referins account and click on "sites." Initially, you might land on "funnels," but remember that the image slider works seamlessly on both. In this guide, we'll use a test website as an example.
Implementation: Navigate to the section where you wish to add the image slider. Scroll down the menu on the left side until you find the image slider option. A simple click will implement it.
Configuring Your Slides
Adding Images: On the right side of your screen, you'll notice slots titled "slide one", "slide two", and "slide three". Click on the first slide, and you'll see a small image icon. Use this to access and upload the images from your folders. You can use a drag and drop method to ease the process.

Setting the Order: Once uploaded, choose the sequence in which you want your images to appear. For instance, if you've uploaded Image1, Image2, and Image3, you can set them in any order you like.
Advanced Features for a Tailored Experience
Additional Slides and Call-To-Action (CTA): Referins gives you the flexibility to add more slides. Additionally, for each slide, there's an option to insert a CTA link, specifying the URL visitors will be directed to upon clicking the image. You can even determine if the link should open in the same or a new tab.
Adjusting Dimensions: Customize the height and width of your slider according to the image format. Make sure to double-check any values entered.

Advanced Settings: Dive into advanced options to fine-tune your image slider. Here you can:
Adjust pixel margins to reposition your slider.

Set image borders and choose their thickness and color.
Customize corner radius for rounded corners.
Opt between different border styles like dotted or dashed.

Apply shadows or decide on the page break style.
Set the frequency of slide switches.
Decide the device view: desktop, mobile, or both.
Animating Your Slider: Add a dynamic feel by setting how the slides transition. Options range from auto animation to infinite looping and swipe gestures. You can also change the appearance and behavior of the navigation arrows.
FAQ
Q: What is the Image Slider element?
A: The Image Slider element allows users to embed interactive image sliders into their web pages and funnels, offering a range of customization options for a captivating visual experience.
Q: How can I add an image slider to my website or funnel?
A: Within the builder, navigate to the desired section or page, drag and drop the "Image Slider" element, customize as needed, add images, and save the changes.
Q: Are there any other new elements introduced alongside the Image Slider?
A: Yes, we've also introduced the Margin Padding, Shadow, Custom Class, and Visibility elements for enhanced design and customization.
Q: Can I control the visibility of elements based on specific conditions?
A: Absolutely! With the new Visibility element, you can dynamically show or hide elements based on factors like device type.
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 the image of the image slider?
A: There is a URL redirect option which you can set from the general options. You also have the option to open in new tab or a current tab.
Q: Can I resize my images on the image slider?
A: Yes, in general options you can resize your images of image sliders.
Q: Will this element work in mobile?
A: The Image Slider element is exclusively available in the new builder.
Q: Can I add the button in the image slider?
A: The Image Slider element is exclusively available in the new builder.
Q: Is the Image Slider element available in all versions of the builder?
A: You can have the button in the image itself. Clicking on the image will redirect to a specific page which a button will do.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article