# Footer ## Footer **Files:** `src/config/config.toml`, `src/content/sections//footer.md`, `src/config/menu..json`, `src/config/social.json`, `src/i18n/.json` · **Skill level:** Beginner The footer closes every page with a heading, your contact details, your links, the copyright, the language links, a row of Ask AI links, and the theme credit. Margo has three footer layouts. All three read the same copy file, `footer.md`, so you write the footer once. Above the footer, most inner pages also show a **call to action** (the section `call-to-action.md`). It is a section, not part of the footer: see [Sections](/margo/customization/sections/) and [Contact & Booking](/margo/customization/contact-booking/). ### Choose A Footer Layout ```toml # src/config/config.toml [settings.layout] # wordmark | dark band: two-line heading with a cycling word, 3 contact columns, menu row, large site name # columns | light: heading line, ruled link columns, newsletter form, copyright row # email | light: the email address set large with a copy button, social links, small menu + copyright footer = "email" ``` | Layout | What it shows | Demo page | | ---------- | ----------------------------------------------------------------------------------------------------- | ---------------- | | `wordmark` | A dark band that stays dark in both modes. A large two-line heading whose last word changes every few seconds, three contact columns (email with a copy button, phone, social links), a row with every footer link, the copyright and language links, and your site name set across the full width at the bottom | none (set it to see it) | | `columns` | A light footer. The heading line on the left and a newsletter form on the right, then four ruled link columns, then the copyright, the legal links, and the language links | `/home-studio/` | | `email` | A light footer. A short line and a **Copy email** button, your email address set as large as the page allows, the social links, then a small menu, the language links, the copyright, and the legal links. Margo ships with this layout | `/`, inner pages, `/home-photo/` | **One page, another layout.** Add `footerLayout` to the page's frontmatter. It wins over the config: ```yaml --- title: "Studio" footerLayout: "columns" # wordmark | columns | email --- ``` `src/content/homepage/english/home-studio.md` uses `columns` this way, and `home-photo.md` sets `email`. ### Footer Copy Every layout reads `src/content/sections/english/footer.md` (and the file with the same name in each other language folder): ```yaml # src/content/sections/english/footer.md webgl: "none" # `wordmark`: animated background: flow | dots | none title: "Have something worth *{cycle}*\nTell me about it." cycle: ["designing", "printing", "framing"] columns: - label: "Say hello" value: "hello@example.com" url: "mailto:hello@example.com" copy: true - label: "By phone" value: "+1 (555) 010-0199" url: "tel:+15550100199" - label: "Elsewhere" socials: true email: "hello@example.com" wordmark: "" bottomMenu: [3] linkColumns: # trimmed - label: "Studio" menu: 2 - label: "Social" socials: true - label: "Offices" lines: ["Rotterdam, NL", "Montréal, CA"] newsletter: enable: true title: "**Notes from the studio.** New work and what we learned, four times a year." note: "One click to unsubscribe. Read the [privacy policy](/privacy-policy/)." emailLabel: "**A project in mind?** Write to me, I answer within a day." smallMenu: [2] ``` | Key | Used by | What it does | | ------------- | ---------------------- | --------------------------------------------------------------------------------------------- | | `title` | `wordmark`, `columns` | The heading. `\n` splits it into two lines. `*{cycle}*` is the slot for the changing word: keep it as the last word of the first line | | `cycle` | `wordmark`, `columns` | The words shown in turn in the slot, every 2.4 seconds. One word stays still; `[]` removes the slot | | `columns` | `wordmark` | The contact columns (the first three). Each has a `label` and either `value` and `url` (a `mailto:`, `tel:`, or page link; an empty `url` is plain text), `copy: true` for a **Copy email** button, or `socials: true` for the links of `social.json` | | `email` | `email` | The address set large. Empty uses the first `mailto:` column | | `wordmark` | `wordmark` | The large name at the bottom. Empty uses `logoText`, then `title`, from `config.toml` | | `webgl` | `wordmark` | An animated background: `flow`, `dots`, or `none` | | `bottomMenu` | `columns`, `email` | The footer link groups shown next to the copyright, by position | | `linkColumns` | `columns` | Up to four ruled columns. Each has a `label` and one of `menu: ` (a footer link group), `socials: true`, or `lines: [...]` (text lines, Markdown links allowed) | | `newsletter` | `columns` | The signup next to the heading. `enable: false` hides it here only | | `emailLabel` | `email` | The line above the large address | | `smallMenu` | `email` | The footer link groups of the small menu row, by position | The sample email, phone number, and offices are placeholders: replace them in every language folder. The **Copy email** and **Copied** labels are `footer.copyEmail` and `footer.copied` in the language files. ### Footer Links The links come from the `footer` list in `src/config/menu..json`, and the layouts pick its groups by position (`bottomMenu`, `linkColumns`, `smallMenu`). The `wordmark` footer shows every link once in one row. See [Menus](/margo/customization/menus/#footer-link-groups). ### Copyright ```toml [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 language files ("© \{year\} \{brand\}. All rights reserved." in English). `{year}` becomes the year of the build, so the notice stays current, and `{brand}` becomes `[site] title`. A `text` here is used in every language. ### Ask AI Row Every footer layout ends with a row of links that ask an AI assistant about the current page, and links to the page's Markdown copy, `llms.txt`, and `llms-full.txt`. It ships on: ```toml [settings.pageActions] enable = true footer = true # false removes this row providers = ["chatgpt", "claude", "perplexity", "grok"] # empty hides the "Ask" links ``` Its labels are `ai.footerAsk`, `ai.footerRead`, and `ai.footerMarkdown` in the language files. See [AI Links & llms Files](/margo/features/ai-links-llms/). ### Theme Credit Every footer layout shows the theme credit under the copyright, and it is also the last line of `llms.txt`. It is editable in `config.toml`. The part of `text` in `[brackets]` becomes the link to `url`: ```toml [settings.themeCredit] enable = true text = "Built on the Margo Astro theme by [Getastrothemes]" url = "https://getastrothemes.com/astro-themes/margo/" ``` ### Newsletter The `columns` footer shows a Mailchimp signup form next to its heading. 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, and `newsletter.enable: false` in `footer.md` hides only this one. See [Forms](/margo/customization/forms/). ### Social Links The social links in the footers (and in the mobile menu) come from `src/config/social.json`: ```json { "main": [ { "enable": true, "label": "instagram", "icon": "/images/icons/instagram.svg", "url": "https://www.instagram.com" } ] } ``` The shipped list has Facebook, Twitter, Instagram, and LinkedIn, and the 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. `label` is the network name; `icon` is an SVG in `src/assets/images/icons/`. ### Files For Developers `src/layouts/components/global/Footer.astro` picks the layout (from the page's `footerLayout`, else `[settings.layout] footer`, else `wordmark`) and builds the copyright line. The layouts are in `src/layouts/components/global/footer/`: `FooterWordmark.astro`, `FooterColumns.astro`, and `FooterEmail.astro`, with `FooterAi.astro` (the Ask AI row), `FooterCredit.astro` (the theme credit), `FooterLanguages.astro` (the language links), and `footerContent.ts` (reads `footer.md`). ### Do It With AI ```text Set the footer to the [wordmark | columns | email] layout in [settings.layout] of src/config/config.toml. In footer.md in every language folder of src/content/sections/, put my email [EMAIL] and phone [PHONE] in columns and email, rewrite title and cycle for my work ([ONE LINE ABOUT ME]), and translate them. Put my social profiles in src/config/social.json: [URLS], and set enable: false on the networks I didn't list. ```