Footer Layout Guide: How to Edit, Customize, and Manage Website Footer Design

Footer Layout Guide: How to Edit, Customize, and Manage Website Footer Design

By Michael Chen

January 2, 2025 at 09:05 PM

Learn how to manage and customize your website's footer effectively. The footer appears at the bottom of your website and typically contains essential information like contact details, social media links, and FAQs.

Adding Content to Your Footer

Version 7.1:

  1. Click Edit and hover over the footer area
  2. Click Edit Footer
  3. Click Add Block to insert content
  4. Use the + button to add sections
  5. Click the pencil icon for formatting
  6. Click Save when finished

Version 7.0:

  1. Hover over footer area and click Edit
  2. Click placement mark or + to add blocks
  3. Click Save when complete

Popular Footer Elements:

  • Text blocks (address, copyright, links)
  • Social media icons
  • Newsletter subscription forms
  • Call-to-action buttons

Pre-Footers

Bedford and Pacific templates offer an optional pre-footer that appears above the main footer. Edit it the same way as the main footer.

Hiding the Footer

Remove from all pages:

  1. Click Edit and hover over footer
  2. Click trash can icon
  3. Save changes

Hide on specific pages:

  1. Open Pages menu
  2. Click settings next to page title
  3. Navigate to Navigation tab
  4. Disable Show Footer

Mobile Display

  • Version 7.1: Arrange desktop and mobile layouts independently
  • Version 7.0: Content automatically stacks vertically

Footer Options by Template

Full-width templates:

  • Aviator
  • Farro
  • Pacific
  • Skye

Content-width matching:

  • Bedford
  • Montauk
  • York

Special features:

  • Brine: Three editable areas
  • Five: Split left/right design
  • Avenue: Single column support

Remember:

  • Footer content doesn't transfer between templates
  • Some templates limit you to one column
  • Page-specific footers are only available in certain templates

Styling Options

  1. Edit layout
  2. Customize background
  3. Adjust color schemes
  4. Modify section styles

Mobile compatibility, proper spacing, and visual hierarchy are crucial for effective footer design. Always test your footer across different devices to ensure optimal display.

Related Articles

Previous Articles