How to Add Images Using OzSpeed hPanel

Adding images to your website can make it more visually appealing, engage visitors, and convey your message effectively. With OzSpeed’s Website Builder, you can easily upload, place, and customize images on any page. Here’s a step-by-step guide on how to add images to your website using hPanel.

---

Step 1: Access the Website Editor #

To start adding images, 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 image.

Tip: #

• Use the Preview feature to see the current layout of the page and plan where the image will be placed.

---

Step 2: Add an Image Element #

You can easily drag and drop an Image Block onto your page.

How to Add an Image: #

1. Click Add Element or + Add New Section in the editor toolbar.
2. Select Image from the list of elements.
3. Drag the Image Block to the desired location on your page.
4. Click on the image placeholder to open the Image Settings.

Tip: #

• Place images strategically to enhance the content and attract attention, such as in a hero section or next to a key message.

---

Step 3: Upload the Image #

Upload an image from your computer or choose one from the media library.

How to Upload an Image: #

1. Click Upload Image in the Image Settings panel.
2. Select an image from your computer and click Open.
3. Wait for the image to upload and appear in the Image Block.
4. Click Apply.

Tip: #

• Use high-quality images that are optimized for web (e.g., JPG, PNG) to ensure fast loading times.

---

Step 4: Customize the Image #

You can easily edit and style the image to fit your design needs.

How to Customize the Image: #

1. Click on the image to open the Image Settings.
2. Adjust the size (small, medium, large) and alignment (left, center, right).
3. Add alt text for better SEO and accessibility (e.g., “Product Photo of XYZ”).
4. Enable the link option if you want the image to be clickable and direct users to another page.

Tip: #

• Use descriptive alt text to help search engines understand the content of the image and improve your SEO.

---

Step 5: Apply Image Effects #

Enhance your image by applying effects or adding overlays.

How to Add Effects: #

1. Go to the Design Settings tab in the Image Settings panel.
2. Choose from effects like shadow, border, or rounded corners.
3. Adjust the opacity or add a color overlay if needed.
4. Click Save.

Tip: #

• Use a subtle shadow effect to make the image stand out without overpowering the content.

---

Step 6: Add an Image Gallery (Optional) #

If you want to showcase multiple images, consider adding an Image Gallery.

How to Add an Image Gallery: #

1. Click Add Element and select Image Gallery.
2. Drag the Image Gallery Block to your page.
3. Click Upload Images and select multiple files from your computer or media library.
4. Customize the gallery layout (grid, slider, masonry) and click Save.

Tip: #

• Use an image gallery for portfolios, product showcases, or event highlights.

---

Step 7: Preview and Test the Image #

Before publishing, preview the page to ensure the image looks good and loads correctly.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the image on both desktop and mobile views.
3. Click on the image if it’s linked to ensure it redirects users to the correct page.

Tip: #

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

---

Step 8: Publish the Changes #

Once you’re satisfied with the image placement and styling, publish your updates.

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 on social media or in your email newsletter to highlight the new visuals.

---

Troubleshooting Tips #

1. Image Not Displaying Correctly:
   • Ensure the image is uploaded in a supported format (e.g., JPG, PNG).
   • Clear your website cache in hPanel and your browser cache.
2. Slow Image Loading:
   • Compress the image using tools like TinyPNG or ImageOptim before uploading.
   • Consider using a CDN (Content Delivery Network) for faster image delivery.
3. Image Not Aligned Properly:
   • Use the alignment options in the Image Settings panel.
   • Check the padding and margin settings in the Section Settings.

---

Additional Tips: #

• Use High-Quality, Optimized Images: High-resolution images look great but can slow down your site if not optimized. Use tools to compress images without losing quality.
• Include Descriptive Alt Text: This helps with SEO and makes your website more accessible to users with screen readers.
• Monitor User Engagement: Use Google Analytics to see which images are getting the most clicks or views.