Skip to main content

Footer

Configure your site's global footer.

Overview​

The footer appears at the bottom of every page. It typically contains:

  • Site links and navigation
  • Contact information
  • Social media links
  • Newsletter signup
  • Copyright notice
  • Legal links (Privacy, Terms)

Like the header, the footer is a module automatically inserted at the bottom of every template.

  1. Click B. Layout in navigation
  2. Click Footer in the sidebar
  1. In the Footer section, view available footer modules
  2. Click to preview different options
  3. Click Use as Footer to apply globally

Pre-built Footers​

TheDock includes designed footers. You can:

  • Use the default footer
  • Modify it to fit your needs
  • Create a completely custom footer

You can choose not to use a global footer:

  • Individual templates can have their own footer sections
  • Or some pages can have no footer at all
  1. In B. Layout > Footer
  2. Click Edit Footer on the active footer

Common footer layouts:

Footer Module
├── Section: Main Footer
│   └── Grid (4 columns)
│       ├── Area: About/Logo
│       ├── Area: Navigation
│       ├── Area: Contact
│       └── Area: Social
└── Section: Bottom Bar
    └── Grid
        └── Area: Copyright + Legal Links

Logo & About​

ElementPurpose
LogoBrand reinforcement
TaglineBrief company description
About textShort company overview

Organize links in columns:

  • Company - About, Team, Careers
  • Products - Services, Features, Pricing
  • Resources - Blog, Help, Documentation
  • Legal - Privacy, Terms, Cookies

Contact Information​

ElementExample
Address123 Street, City, Country
Phone+1 234 567 890
Email[email protected]
HoursMon-Fri, 9am-5pm

Icons linking to:

  • Facebook
  • Twitter/X
  • Instagram
  • LinkedIn
  • YouTube

Newsletter Signup​

Form for email collection:

  • Email input field
  • Subscribe button
  • Privacy note
© 2024 Company Name. All rights reserved.

Background​

Footers often have distinct backgrounds:

  • Dark background (Contrast color)
  • Light background (Base color)
  • Brand color (Primary)

Text Colors​

When using dark backgrounds:

  • TheDock automatically calculates readable text colors
  • Or manually set text to Base color

Borders​

Consider a top border to separate footer from content:

  • Subtle line
  • Contrast with page background

Full multi-column layout with all content visible.

  • Columns may reduce (4 → 2)
  • Content stacks appropriately
  • Single column stack
  • Collapsible sections (optional)
  • Essential info prioritized

Testing Responsive​

Use device preview to verify footer looks good at all sizes.

Make footer always visible at page bottom (even on short pages):

This is handled by CSS, not a setting. TheDock templates are structured to push footers down automatically.

Create visual separation:

  • Main footer (links, contact)
  • Bottom bar (copyright, legal)

Widget-Style Content​

Include dynamic content:

  • Recent posts
  • Instagram feed
  • Twitter feed

Per-Template Footers​

Why Different Footers?​

Some pages may need unique footers:

  • Landing pages (minimal footer)
  • Checkout (trust badges, security)
  • Special promotions

Setting Up​

  1. For a specific template, don't rely on global footer
  2. Add a footer module section manually
  3. Select an alternative footer module

Or Detach and Customize​

  1. Global footer in template
  2. Detach from module
  3. Customize just for that template

Best Practices​

1. Organize Information​

Group related links together. Use clear headings.

2. Don't Overcrowd​

Include necessary information only. Keep it scannable.

3. Prioritize Mobile​

Most important info should be highest in mobile view.

4. Include Essentials​

  • Contact info
  • Key navigation
  • Legal links
  • Copyright

5. Consistent Styling​

Footer should feel like part of the same site as the rest.

6. Accessibility​

  • Proper heading structure
  • Readable text contrast
  • Keyboard navigable links

Troubleshooting​

  • Verify footer module is assigned
  • Check it's not hidden in template settings
  • Export and check live site

Footer content misaligned​

  • Check column spans in grid
  • Verify responsive settings
  • Preview on actual devices
  • Verify URLs are correct
  • Check for typos
  • Ensure links are properly configured
  • Reduce content or padding
  • Consider collapsible sections
  • Prioritize essential content

Social icons missing​

  • Verify icon library is loaded
  • Check icon block configuration
  • Ensure URLs are set
  • Header - Global header configuration
  • Modules - Creating reusable modules
  • Templates - Footer in template context

← Back to Documentation