How to Add an Image Slideshow Using OzSpeed hPanel

An image slideshow is a dynamic way to showcase a series of images on your website. It’s perfect for highlighting featured products, displaying client testimonials, or creating an eye-catching visual element on your homepage. With OzSpeed’s Website Builder, you can easily add and customize an image slideshow to enhance your website’s appeal. Here’s a step-by-step guide on how to do it.

---

Step 1: Access the Website Editor #

To start adding a slideshow, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page where you want to add the slideshow, such as the Homepage or Gallery page.

Tip: #

• Use the Preview feature to get an overall view of the page before making changes.

---

Step 2: Add the Image Slideshow Element #

You can quickly add a pre-designed slideshow element or create a custom one.

How to Add a Slideshow: #

1. Click + Add New Section or Add Element in the editor toolbar.
2. Select Slideshow from the list of elements.
3. Drag and drop the Slideshow Element to the desired location on the page.
4. Click Insert Section to add it.

Tip: #

• Place the slideshow at the top of the page for maximum visibility.

---

Step 3: Upload Your Images #

Choose the images you want to display in the slideshow.

How to Upload Images: #

1. Click on the Slideshow Element to open the settings panel.
2. Click Upload Images to add new images from your computer or select from the Media Library.
3. Choose multiple images by holding down the Ctrl or Command key.
4. Click Add to Slideshow.

Tip: #

• Use high-quality, optimized images for the best visual impact and faster loading times.

---

Step 4: Customize the Slideshow Settings #

You can adjust the settings to control how the slideshow behaves and looks.

Customization Options: #

1. Click on the Slideshow Settings (gear icon).
2. Adjust the transition effect (e.g., fade, slide) and transition speed.
3. Set the duration for each slide (e.g., 5 seconds per slide).
4. Enable or disable autoplay, loop, and navigation arrows.
5. Click Save.

Tip: #

• Enable autoplay if you want the slideshow to play automatically when the page loads.

---

Step 5: Add Captions and Links #

Enhance your slideshow by adding captions or clickable links to each slide.

How to Add Captions: #

1. Click on an individual image in the slideshow settings.
2. Enter the caption text (e.g., “Featured Product: Summer Collection”).
3. Customize the font style, color, and position of the caption.

How to Add Links: #

1. Click on the image or caption you want to make clickable.
2. Enter the URL you want the image to link to (e.g., a product page or blog post).
3. Click Apply.

Tip: #

• Use concise and compelling captions to grab users’ attention.

---

Step 6: Style the Slideshow #

Customize the appearance of the slideshow to match your website’s branding.

How to Style the Slideshow: #

1. Click on the Slideshow Settings.
2. Go to the Design tab.
3. Adjust the background color, border, and padding.
4. Add a shadow effect for a polished look.
5. Click Save.

Tip: #

• Use a dark or light overlay on the images if the text captions need better contrast.

---

Step 7: Preview and Test the Slideshow #

Before publishing, preview the slideshow to ensure it looks good and functions correctly.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the slideshow on both desktop and mobile views.
3. Test the navigation arrows, autoplay, and clickable links.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 8: Publish the Changes #

Once you’re satisfied with the slideshow, publish the page to make it live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Share the updated page with your audience through social media or email to showcase the new slideshow feature.

---

Troubleshooting Tips #

1. Images Not Displaying Properly:
   • Ensure the images are uploaded in the correct format (e.g., JPG, PNG).
   • Check the image file size and optimize for faster loading.
2. Slideshow Not Working on Mobile:
   • Enable the responsive mode in the slideshow settings.
   • Test the slideshow on multiple devices and adjust the settings as needed.
3. Text Captions Hard to Read:
   • Add a background overlay behind the text or increase the text size and contrast.

---

Additional Tips: #

• Use High-Quality Images: The slideshow is a visual feature, so high-resolution images are key to making it look professional.
• Limit the Number of Slides: Keep the slideshow concise with 5-7 slides to maintain user interest.
• Monitor User Behavior: Use Google Analytics to track engagement with the slideshow and see which images receive the most clicks.