Adding social media icons to your website is an excellent way to connect with your audience, increase engagement, and drive traffic to your social media profiles. With OzSpeed’s Website Builder, you can easily insert and customize social media icons that link directly to your profiles on platforms like Facebook, Instagram, Twitter, LinkedIn, and more. Here’s how to add and customize them step by step.
Step 1: Access the Website Editor #
To start adding social media icons, open 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 social media icons, typically in the header, footer, or a sidebar.
Tip: #
- Social media icons are often placed in the footer or header for easy visibility on every page of your website.
Step 2: Add a Social Media Icon Block #
You can easily drag and drop a Social Media Icon Block onto your page.
How to Add Social Media Icons: #
- Click Add Element or + Add New Section in the editor toolbar.
- Select Social Media Icons from the list of elements.
- Drag the Social Media Icon Block to the desired location on your page.
- Click Insert to add it.
Tip: #
- Place the icons near the contact information or in a prominent section for better visibility.
Step 3: Customize the Social Media Icons #
You can customize the appearance and links of each icon to match your website’s style.
How to Customize Icons: #
- Click on the Social Media Icon Block to open the settings panel.
- Choose which icons you want to display (e.g., Facebook, Instagram, Twitter, LinkedIn).
- Click on each icon to enter the URL of your social media profile (e.g., https://facebook.com/yourprofile).
- Customize the icon style (default, rounded, or square).
- Adjust the size, color, and hover effect of the icons.
Tip: #
- Use your brand colors or a neutral color scheme for the icons to ensure they match your website’s design.
Step 4: Align and Position the Icons #
Position the icons on your page for a balanced and professional look.
How to Align Icons: #
- Click on the Social Media Icon Block to open the settings.
- Use the alignment options (left, center, right) to position the icons.
- Drag the block to adjust its placement if needed.
Tip: #
- Center-align icons in the footer or place them at the top right of the header for easy access.
Step 5: Preview and Test the Social Media Links #
Before publishing, preview the page to ensure the social media icons look good and link correctly.
How to Preview: #
- Click Preview in the top toolbar.
- Check the icons on both desktop and mobile views.
- Click on each icon to test the link and make sure it directs users to the correct social media profile.
Tip: #
- Use an incognito window or clear your browser cache to view the changes as a new visitor would.
Step 6: Publish the Changes #
Once you’re satisfied with the social media icons, 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: #
- Announce your social media links on your website or in your newsletter to encourage followers.
Troubleshooting Tips #
- Icons Not Displaying Correctly:
- Ensure the icons are enabled in the Social Media Icon Block settings.
- Clear your website cache in hPanel and your browser cache.
- Links Not Working:
- Double-check the URLs entered for each icon. Make sure they start with https://.
- Test the links in an incognito window to rule out caching issues.
- Icons Misaligned on Mobile:
- Use the responsive design settings in the editor to adjust the size and alignment for mobile views.
Additional Tips: #
- Keep It Simple: Only include icons for the social media platforms you actively use.
- Monitor Clicks: Use tools like Google Analytics to track clicks on social media icons and see which platforms drive the most traffic.
- Update Regularly: If your social media handles change, make sure to update the links on your website.
