Your website’s logo is a key element of your brand identity. It helps visitors recognize your business and sets the visual tone of your site. Adding or updating your logo with OzSpeed’s Website Builder is simple and can be done in just a few steps. Here’s how to add or change the logo on your website.
Step 1: Access the Website Editor #
To begin, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Navigate to the Header Section where your logo is usually located.
Tip: #
- If you can’t find your logo in the header, check the Global Settings to see if it’s applied site-wide.
Step 2: Select the Logo Element #
Click on the current logo or placeholder image to open the Design Settings panel.
How to Select the Logo: #
- Click directly on the Logo Image element in the header section.
- Ensure the logo is highlighted, indicating it is selected for editing.
Tip: #
- If your template doesn’t have a logo placeholder, you can add an Image Block to the header and use it as your logo.
Step 3: Upload Your Logo #
You can upload a new logo image from your computer or select one from the Media Library.
How to Upload the Logo: #
- Click Change Image in the Design Settings panel.
- Click Upload Image and choose your logo file from your computer (recommended formats: PNG, SVG, JPG).
- Alternatively, select a logo from the Media Library if you’ve already uploaded it.
- Click Apply to save the changes.
Tip: #
- Use a transparent PNG for a professional look, especially if your website has a colored or image background.
Step 4: Adjust the Logo Size and Position #
You can customize the size and position of the logo to fit your header design.
How to Resize and Reposition: #
- Click on the logo to open the Design Settings panel.
- Use the Size Slider to adjust the logo size (ensure it’s not too large or too small).
- Align the logo to the left, center, or right using the alignment options.
- Click Save.
Tip: #
- Make sure the logo is not too big, as it can overwhelm the header and take up valuable space.
Step 5: Add a Logo Link (Optional) #
Link your logo back to the homepage to enhance navigation and user experience.
How to Add a Link: #
- Click on the logo to open the Settings Panel.
- Click Add Link and enter your website’s homepage URL (e.g., https://yourdomain.com).
- Set the link to open in the same tab.
- Click Apply.
Tip: #
- Linking the logo to your homepage is a common web design practice that helps users easily return to the main page.
Step 6: Customize the Logo for Mobile View #
Ensure your logo looks good and scales properly on mobile devices.
How to Optimize for Mobile: #
- Click the Mobile Icon (phone icon) in the top toolbar to switch to Mobile View.
- Adjust the logo size and alignment specifically for mobile screens.
- Click Save.
Tip: #
- Consider using a slightly smaller logo size on mobile for better fit and readability.
Step 7: Preview and Test the Logo #
Before publishing, preview your site to see how the logo looks across different devices.
How to Preview: #
- Click Preview in the top toolbar.
- Check the logo on both desktop and mobile views.
- Ensure the logo is clear, well-positioned, and links back to the homepage.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 8: Publish Your Changes #
Once you’re satisfied with the logo’s appearance, publish the updates to make them live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm your changes to go live.
Tip: #
- Share the update on your social media or in your newsletter to showcase your refreshed brand identity.
Troubleshooting Tips #
- Logo Not Displaying Correctly:
- Ensure the logo image file is correctly uploaded and not corrupted.
- Clear your website cache in hPanel and your browser cache.
- Logo Size Issues on Mobile:
- Use the responsive design settings to adjust the logo size specifically for mobile devices.
- Test the logo on different devices to ensure it scales properly.
- Blurry Logo Image:
- Use a high-resolution image (e.g., SVG format) for crisp, clear logos.
- Avoid excessive resizing, as it can degrade image quality.
Additional Tips: #
- Use a Transparent Background: A transparent PNG or SVG logo looks cleaner, especially over colored headers or background images.
- Maintain Brand Consistency: Use the same logo across all your digital platforms for a cohesive brand identity.
- Optimize for Retina Displays: Upload a high-resolution version of your logo to ensure it looks sharp on high-density screens.
