A footer is an essential part of your website, providing visitors with important information and additional navigation options at the bottom of every page. Common elements in a footer include contact details, social media links, copyright information, and links to key pages. With OzSpeed’s Website Builder and WordPress, you can easily customize and add a footer to your website. Here’s how to do it step by step.
Step 1: Access the Footer Editor #
To start designing your footer, open the editor in hPanel or your CMS.
Using Website Builder: #
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Scroll down to the bottom of the page and click on the Footer Section to open the footer editor.
Using WordPress: #
- Log in to your WordPress Admin Dashboard.
- Go to Appearance > Widgets or Appearance > Customize > Footer (depending on your theme).
- Select the Footer area to start customizing.
Tip: #
- Some WordPress themes have specific footer settings, so check your theme’s documentation for additional options.
Step 2: Choose a Footer Layout #
Select a layout that suits your website’s style and content needs.
In Website Builder: #
- Click Choose Layout in the footer editor.
- Select a pre-designed footer template or choose a custom layout to create your own design.
- Click Apply to use the selected layout.
In WordPress: #
- Go to Appearance > Customize > Footer Layout.
- Choose a layout option (e.g., single column, two columns, three columns).
- Click Publish to apply the changes.
Tip: #
- Use a simple layout if your website has limited content, and a multi-column layout if you want to include more elements.
Step 3: Add Key Elements to the Footer #
Your footer can include various elements based on your website’s needs.
Common Footer Elements: #
- 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).
- Quick Links: Provide links to important pages (e.g., About Us, Services, Privacy Policy).
- Newsletter Signup: Include 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 Add Elements in Website Builder: #
- Click Add Element in the footer editor.
- Choose the type of element you want to add (e.g., Text, Image, Icon, Button).
- Drag and drop the element into the footer section.
- Customize the content and style as needed.
- Click Save.
How to Add Elements in WordPress: #
- Go to Appearance > Widgets.
- Drag and drop widgets (e.g., Text Widget, Social Icons, Custom HTML) into the Footer Widget Area.
- Enter the content and customize the settings.
- Click Save.
Tip: #
- Keep the footer content consistent across all pages for a professional look.
Step 4: Customize the Footer Design #
Personalize the appearance of your footer to match your website’s branding.
In Website Builder: #
- Click on the Footer Section and go to Design Settings.
- Adjust the background color, font style, and spacing.
- Preview the changes and click Save.
In WordPress: #
- Go to Appearance > Customize > Footer Design.
- Change the background color, font color, and padding.
- Click Publish to save the changes.
Tip: #
- Use contrasting colors to make the footer text easily readable.
Step 5: Add Links and Update Navigation #
Include important links in the footer for easy access to key pages.
How to Add Links: #
- In the footer editor, click Add Link or use the Text Block to insert links.
- Enter the link text (e.g., “Privacy Policy”) and paste the URL.
- Click Apply and Save.
Using WordPress: #
- Use a Custom HTML widget or Navigation Menu widget in the footer area.
- Add the links and click Save.
Tip: #
- Include a link to your Privacy Policy and Terms of Service to comply with legal requirements.
Step 6: Preview and Test the Footer #
Before publishing, preview the footer to ensure it looks good and functions properly.
How to Preview: #
- Click Preview in the Website Builder or WordPress editor.
- Check the footer on both desktop and mobile views.
- Test all links, forms, and social icons to ensure they work correctly.
Tip: #
- Use an incognito window or clear your browser cache to see the updated footer without cached data.
Step 7: Publish the Footer #
Once you’re satisfied with the design and content, publish the footer.
How to Publish: #
- Click Publish in the Website Builder.
- Confirm the changes to make the footer live on your website.
In WordPress: #
- Click Publish in the Customizer or Save in the Widgets area.
Tip: #
- Check multiple pages to ensure the footer appears correctly site-wide.
Troubleshooting Tips #
- Footer Not Updating:
- Clear the website cache in hPanel and your browser cache.
- Make sure you clicked Save or Publish after making changes.
- Footer Links Not Working:
- Double-check the URLs for typos or broken links.
- Use a link checker tool to verify all links in the footer.
- Layout Issues on Mobile:
- Use responsive design settings in the editor to adjust the mobile layout.
- Test the footer on different devices to ensure it looks good everywhere.
Additional Tips: #
- Keep It Simple: Avoid overcrowding the footer with too much information. Focus on key elements.
- Monitor Analytics: Use Google Analytics to track clicks on footer links and see which elements are most popular.
- Update Regularly: Keep your footer content up to date, especially if you include contact information or social media links.
