The footer section is a crucial part of your website, appearing at the bottom of every page. It usually includes important information like contact details, social media links, copyright statements, and navigation links to legal pages (e.g., Privacy Policy, Terms of Service). With OzSpeed’s Website Builder, you can easily add and customize a footer section to give your website a professional look. Here’s a step-by-step guide on how to do it.
Step 1: Access the Website Editor #
To start adding a footer section, open the website editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Scroll down to the bottom of the page, where the footer typically resides.
Tip: #
- If your page doesn’t already have a footer section, you can add one manually.
Step 2: Add a Footer Section #
If a footer isn’t already present, you can easily add a new footer section.
How to Add a Footer: #
- Click + Add New Section at the bottom of the page.
- Select Footer from the list of pre-designed templates or choose a Blank Section for full customization.
- Click Insert Section to add it to your page.
Tip: #
- Using a pre-designed footer template can save time and provide a professional layout.
Step 3: Customize the Footer Content #
Edit the footer content to match your website’s branding and information needs.
Suggested Footer Elements: #
- Company Logo: Add your logo for brand recognition.
- Contact Information: Include your phone number, email address, and physical address.
- Social Media Links: Add icons linking to your social media profiles (e.g., Facebook, Instagram, LinkedIn).
- Navigation Links: Include links to important pages like About Us, Services, Contact, Privacy Policy, and Terms of Service.
- Newsletter Signup: Add a form for visitors to subscribe to your email list.
- Copyright Notice: Display a copyright statement (e.g., “© 2024 Your Company Name. All Rights Reserved.”).
How to Edit Content: #
- Click on any element (text, image, button) to edit it directly in the editor.
- Use the toolbar to change the text, font, color, or link settings.
- Click Save after making changes.
Tip: #
- Keep the footer content consistent across all pages for a cohesive user experience.
Step 4: Style the Footer Design #
Customize the appearance of the footer to match your website’s overall design.
How to Style the Footer: #
- Click on the Footer Section to open the Section Settings (gear icon).
- Go to the Design tab.
- Adjust the background color, font style, and spacing.
- Add a border or shadow effect for a polished look.
Tip: #
- Use a contrasting background color to make the footer stand out from the rest of the page.
Step 5: Add Links to Legal Pages #
Ensure that your footer includes links to important legal pages like Privacy Policy and Terms of Service.
How to Add Links: #
- Click on the Text Block or Button Block where you want to add the link.
- Highlight the text (e.g., “Privacy Policy”) and click the Link Icon (🔗).
- Enter the URL of the legal page or select it from the list of internal pages.
- Click Apply.
Tip: #
- Include a link to your Contact Us page for easy access.
Step 6: Make the Footer Responsive #
Ensure that the footer looks good on all devices, including desktops, tablets, and smartphones.
How to Check Responsiveness: #
- Click Preview in the top toolbar.
- Toggle between Desktop, Tablet, and Mobile views.
- Adjust the text size, spacing, and layout if needed for a responsive design.
Tip: #
- Use larger font sizes and clear spacing on mobile devices for better readability.
Step 7: Preview and Save the Footer Section #
Before publishing, preview the entire page to see how the footer looks and functions.
How to Preview: #
- Click Preview in the editor toolbar.
- Scroll down to the footer section and check all links, icons, and contact details.
- Click Save if everything looks correct.
Tip: #
- Use an incognito window or clear your browser cache to view the footer as a new visitor would.
Step 8: Publish the Changes #
Once you are satisfied with the design and content of the footer, publish the changes to make it live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm the changes to go live.
Tip: #
- Announce the update on social media or in your newsletter if the footer includes new features like a newsletter signup.
Troubleshooting Tips #
- Footer Not Displaying Correctly:
- Clear the website cache in hPanel and your browser cache.
- Check the padding and margin settings for layout issues.
- Links Not Working:
- Double-check the URLs entered in the link settings.
- Test the links in an incognito window.
- Footer Overlapping Content:
- Ensure that the footer section is set to stick to the bottom of the page in the Section Settings.
Additional Tips: #
- Keep It Simple: Avoid overcrowding the footer with too much information. Focus on key elements.
- Use Consistent Branding: Match the footer design with your website’s color scheme and fonts.
- Update Regularly: Keep the footer content up to date, especially contact details and social media links.
