An image gallery is a fantastic way to showcase multiple photos or visuals on your website. It’s perfect for displaying product images, portfolio work, event highlights, or a collection of photos. With OzSpeed’s Website Builder, you can easily add, customize, and style an image gallery to fit your website’s design. Here’s how to set it up step by step.
Step 1: Access the Website Editor #
To add an image gallery, start by opening the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Navigate to the page where you want to add the image gallery.
Tip: #
- Plan where to place the gallery for maximum visual impact, such as a Portfolio, Product, or Gallery page.
Step 2: Add an Image Gallery Block #
The Website Builder makes it easy to drag and drop an Image Gallery Block onto your page.
How to Add an Image Gallery: #
- Click Add Element or + Add New Section in the editor toolbar.
- Select Image Gallery from the list of elements.
- Drag the Image Gallery Block to the desired location on your page.
- Click Insert Section to add it.
Tip: #
- Place the gallery in a section with plenty of space for a better visual experience.
Step 3: Upload Images to the Gallery #
You can now upload the images you want to include in your gallery.
How to Upload Images: #
- Click on the Image Gallery Block to open the settings panel.
- Click Upload Images to add new images from your computer or choose from the media library.
- Select multiple images by holding down the Ctrl (Windows) or Command (Mac) key.
- Click Open to upload the selected images.
- Click Save after all images have been added.
Tip: #
- Use high-quality, optimized images for a professional look and faster loading times.
Step 4: Customize the Gallery Layout #
You can customize the layout of the image gallery to fit your website’s design.
Layout Options: #
- Click on the Image Gallery Block to open the settings panel.
- Choose a layout style:
- Grid: Displays images in a uniform grid pattern.
- Masonry: Creates a Pinterest-style layout with variable image sizes.
- Slider/Carousel: Displays images in a sliding format, perfect for showcasing a series of photos.
- Adjust the columns, spacing, and aspect ratio as needed.
- Click Save.
Tip: #
- Use the Grid Layout for product images or portfolio showcases, and the Slider Layout for a more dynamic presentation.
Step 5: Add Captions and Links (Optional) #
Enhance your gallery by adding captions or linking images to specific pages.
How to Add Captions: #
- Click on an individual image in the gallery settings.
- Enter the caption text (e.g., “Summer Collection 2024”).
- Click Apply.
How to Add Links: #
- Click on the image you want to make clickable.
- Enter the URL (e.g., link to a product page or blog post).
- Click Save.
Tip: #
- Captions help provide context for the images, while links can guide users to related content.
Step 6: Style the Image Gallery #
You can style the gallery to match your website’s branding.
How to Style the Gallery: #
- Click on the Image Gallery Block to open the Design Settings.
- Customize the following options:
- Background Color: Change the background behind the images.
- Border: Add a border around the images for a framed look.
- Hover Effect: Enable effects like zoom or fade on hover.
- Click Save.
Tip: #
- Use a hover effect to add a touch of interactivity to your gallery.
Step 7: Preview and Test the Image Gallery #
Before publishing, preview the gallery to ensure it looks good and functions correctly.
How to Preview: #
- Click Preview in the top toolbar.
- Check the gallery on both desktop and mobile views.
- Click on the images to test any links or hover effects.
Tip: #
- Use an incognito window or clear your browser cache to view the changes as a new visitor would.
Step 8: Publish the Changes #
Once you’re satisfied with the image gallery, publish your updates to make them live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm the changes to go live.
Tip: #
- Share the new image gallery on social media or in your newsletter to drive traffic and engagement.
Troubleshooting Tips #
- Images Not Displaying Properly:
- Ensure the images are uploaded in supported formats (e.g., JPG, PNG).
- Check the file size and optimize large images for faster loading.
- Gallery Layout Issues:
- Adjust the columns and spacing settings for a better fit.
- Use the Masonry Layout for images of varying sizes to avoid gaps.
- Slow Loading Times:
- Compress images before uploading using tools like TinyPNG or ImageOptim.
- Consider using a CDN (Content Delivery Network) for faster image delivery.
Additional Tips: #
- Use High-Quality Images: High-resolution images can make your gallery look professional but be sure to optimize them for web use.
- Include Descriptive Captions: Captions help provide context and can improve SEO.
- Monitor User Engagement: Use tools like Google Analytics to track clicks and interactions with the gallery.
