- Getting Started with the Image Slider
- Uploading and Arranging Images
- Customizing Your Image Slider
- Enhancing Visual Appeal
- Final Thoughts
In today’s digital age, having a visually appealing and interactive website is crucial for capturing and maintaining visitor engagement. One way to enhance your site’s aesthetic is by incorporating dynamic elements such as image sliders. The new image slider feature from GoHighLevel offers a simple yet powerful solution for adding captivating visual content to your web pages. Here’s a step-by-step guide on how to integrate and customize this feature to elevate your website’s design.
Getting Started with the Image Slider
To begin, navigate to your sub account and access the “Sites” section. While this guide focuses on websites, the image slider is equally effective in funnels.
- Select Your Website:
- Choose the specific website where you want to add the image slider. For demonstration purposes, let’s focus on the homepage.
- Add the Image Slider:
- Click on the desired section of your homepage. Scroll down on the left side to find the image slider option. With just one click, the slider is implemented into your page.
Uploading and Arranging Images
Once the image slider is added, placeholder slides labeled Slide One, Slide Two, and Slide Three will appear on the right side.
- Upload Images:
- Click on the small image icon for each slide to access your uploaded images.
- Drag and drop your selected images from your folder into the slider. For instance, you might choose a red image for the first slot, a blue one for the second, and a purple image for the third.
- Preview Your Slider:
- Save your changes using the top right button and click on Preview to see how your image slider looks. Notice that the images automatically change, adding a dynamic touch to your page.
Customizing Your Image Slider
The image slider is functional out of the box, but numerous customization options are available to enhance its appearance and functionality.
- Add More Slides:
- You can easily add additional slides by uploading more images. For example, you might add an autumn-themed image as the fourth slide.
- Add CTA Links:
- Each slide can have a call-to-action (CTA) link, directing visitors to a specific URL when they click on the image. You can specify whether the link opens in the same tab or a new tab.
- Adjust Size and Dimensions:
- Customize the height and width of the slider to fit your image format. For example, you might set the height to 250 pixels for a better fit.
- Advanced Customization Options:
- Click on Advanced to reveal more customization options:
- Pixel Margin: Adjust the pixel margin on all sides. For instance, setting it to 10 pixels can move the image slightly.
- Image Borders: Add and customize image borders. A border of 3 pixels is subtle, while 10 pixels is much thicker. Change the border color and style (e.g., dotted or dashed).
- Corner Radius: Adjust the corner shape for rounded corners by setting the radius (e.g., 20 pixels).
- Shadows: Add shadow effects for depth.
- Page Breaks: Control slide transition timing and choose whether the slider appears on desktop or mobile.
- Click on Advanced to reveal more customization options:
Enhancing Visual Appeal
To make the image slider even more engaging, you can:
- Set Slide Transition Timing: Choose how often the slides switch, such as every 3 seconds.
- Customize Navigation Arrows: Change the colors of the arrows or add hover effects.
Final Thoughts
GoHighLevel’s new image slider is a fantastic feature that significantly enhances the visual appeal of any website. It’s quick to set up and offers extensive customization options. By incorporating movement and dynamic content, you create a more engaging user experience that captures and retains visitors’ attention.
