Footer & CTA Band

Footer & CTA Band

Files: src/config/config.toml, src/i18n/en.json, src/config/menu.en.json, src/config/social.json, src/content/sections/english/call-to-action.md · Skill level: Beginner

The footer closes every page with your links, contact details, opening hours, social links, and the legal row. Homio has four footer layouts. Above the footer, a page can also show a CTA band: a closing call to action with a button and your phone.

Choose A Footer Layout

[settings.layout]
  # default | mint panel: headline + button, newsletter, services, contact and hours, brand and link columns, legal pill
  # minimal | deep green: logo and one-line statement, two link columns and socials, legal row
  # large   | sage panel: newsletter tab, big claim with phone and email, link columns, gift card, areas row, legal row
  # columns | deep green: logo and text, link and contact columns split by hairlines, button, centred copyright
  footer = "default"

One page, another layout. Add footerLayout to the page’s frontmatter. It wins over the config:

---
title: "Book a visit"
footerLayout: "minimal" # default | minimal | large | columns
---

/book/ uses minimal this way, so the booking form stays the focus.

Footer Text

The headings and short texts are UI strings in src/i18n/en.json and fr.json, under footer:

[settings] footerDescription in config.toml replaces footer.description in every language: use it only on a single-language site.

The address, phone, email, and hours come from [business] in config.toml. See Business Info.

Copyright

[settings.copyright]
  enable = true
  text   = "" # `{year}` and `{brand}` are replaced with the build year and `site.title`

Leave text empty to use footer.copyright from the i18n files. {year} becomes the year of the build, so the notice stays current, and {brand} becomes [site] title.

Footer Links

The link columns come from the footer list in src/config/menu.en.json and menu.fr.json. The last column (Legal) always goes in the bottom row, and a column with "source": "areas" lists your service areas. See Menus.

Newsletter

The default and large footers show a Mailchimp signup form. It posts to [settings.subscription] formAction in config.toml, which ships as a placeholder: until you set it, npm run dev shows a warning inside the form. [settings.subscription] enable = false hides every signup form. The heading is subscription.title in the i18n files.

Social Links

The social icons in the default, minimal, and large footers come from src/config/social.json:

{
  "main": [
    {
      "enable": true,
      "label": "facebook",
      "icon": "/images/icons/facebook.svg",
      "url": "https://www.facebook.com"
    }
  ]
}

The shipped links point to the networks’ home pages. Replace each url with your own profile, and set enable to false on networks you don’t use. icon is an SVG in src/assets/images/icons/; label is the name screen readers hear.

The CTA Band Above The Footer

The CTA band is a closing section with a title, a line of text, the main button, and your phone with the “Open now” line. It is the section call-to-action.md, and it is off by default: the default footer already starts with a headline and button. Pages that want the band turn it on with a ctaSection block.

# src/content/sections/english/call-to-action.md (trimmed)
enable: false # a page block with `enable: true` shows it
eyebrow: ""
title: "Come home to a clean house this week"
description: "Pick a service, see your price, choose a time. It takes about a minute."
button:
  enable: true
  label: "Book a visit"
  url: "/book/"
  variant: "fill-white"
phone: true # the phone and open-now line from [business]
image: "/images/services/handyman-at-work.jpg" # `default` layout: 4:3 photo; empty hides it
imageAlt: "A handyman fitting a kitchen cabinet door"
options:
  layout: "default" # default | split | band | newsletter | slanted

Turn it on for one page in its frontmatter. The block must include enable: true, because the section file ships with false:

ctaSection:
  enable: true
  title: "Ready for a clean home?"
  options:
    layout: "band"

The about, areas, careers, FAQ, guarantee, how it works, projects, referral, reviews, gift card, services, and team pages ship with it on, and so do the handyman and commercial homepages.

The split layout’s ticket reads ticket: in the section file. Its price is computed from your rate card (quote: with a service id, home size, and frequency), so it follows your pricing; remove quote and set total to type a price instead. See Pricing & Estimator.

The title is plain text in one color: Markdown emphasis such as *word* shows as plain text.

Files For Developers

src/layouts/components/global/Footer.astro picks the layout and draws default. The others are in src/layouts/components/global/footer/: FooterMinimal.astro, FooterLarge.astro, and FooterColumnsBlock.astro, with FooterLegal.astro (the bottom row), FooterSocials.astro, and FooterLanguages.astro. The CTA band is src/layouts/components/sections/CallToAction.astro, with its layouts in sections/call-to-action/.

Do It With AI

Set the footer to the [default | minimal | large | columns] layout in [settings.layout] of
src/config/config.toml. Rewrite footer.description, footer.ctaTitle, footer.largeTitle, and
footer.largeText in src/i18n/en.json and fr.json for my business: [ONE LINE ABOUT US]. Put my
social profiles in src/config/social.json: [URLS], and disable the networks I didn't list.

Show the CTA band on [PAGE URL] with the [default | split | band | newsletter | slanted] layout:
add a ctaSection block with enable: true and options.layout to the page's content file in
english/ and french/. Title "[TITLE]", button "[LABEL]" to [URL]. Keep the other fields from
src/content/sections/english/call-to-action.md.