# SW Footer Columns — AI Agent Documentation **Module name:** SW Footer Columns **Module path:** `smithworks-2025/sw-modules/SW Footer Columns.module` (smithworks portal); also in master `sw-master` **SW Category:** Global **Last updated:** 2026.08.21.17.42 Use this document when: The user asks about a multi-column global footer (logo above columns, equal-height bands, custom column widths, spacer columns), or when choosing between **SW Footer Columns** and **SW Footer Simple**. Support: https://smithworks.marketing/contact — Documentation / FAQs: https://smithworks.marketing/faqs --- ## 1. Overview SW Footer Columns is a **Global** footer: a logo row above **1–4 columns**. Columns share **equal-height bands** (primary content, subheaders, image links, meta/social/copyright). Empty bands still occupy height so columns stay aligned. **Default:** 2 columns (brand + navigation). **Menu Layout = Expanded columns** turns one HubSpot menu into side-by-side groups (e.g. Services / About / Resources). Menu Layout lives in the **Menu** group (aliased from the old column-level path). **Logo Max Width** defaults to **300px** so Brand Kit logos do not fill the footer. Prefer **SW Footer Simple** when you want a single stacked band (logo, menu, social, copyright). Prefer **SW Footer Columns** when you need a multi-column sitemap-style footer. **Content fills the column track.** There is no Content Max Width inset (those fields exist but are hidden). --- ## 2. Content tab (order) 1. Enable module, Custom ID, Custom Classes 2. **Logo** — Logo Link, Logo Image, Alt, Alignment, **Logo Max Width**, optional tagline 3. **Buttons** (optional repeater) + Button Alignment — **Space Above Buttons**; per item Icon Spacing, Hide Button Text, Override Button Margins 4. **Columns** (repeater, 1–4) - **Column Label** (editor only) - **Spacer Column** — empty track; hides content fields; hidden when columns stack - **XL / Desktop / Tablet Width (%)** — shown when Style Column Widths is Custom. **0 hides** the column at that breakpoint (Tablet 0 also hides on Mobile). Remaining visible columns share the row. - Primary type (rich text or menu), **Column Title** (not required), Menu group (menu, layout, top-level / sub-item color overrides), simple links (divider dots + override colors), heading items, image links (wrap or slider), social, copyright, span options for subheaders/images/meta 5. **Back to Top** 6. **Module Background Video** (last; when Style background = Video) --- ## 3. Style tab (order) 1. **Module Settings** — outer/inner spacing and max widths (CTA Simple Bar / outer-inner pattern); **Column Widths** (Equal / Custom); when Custom: **XL Columns**, **Desktop Columns**, **Tablet Columns** (Full Width or Set Width in Column); Column Gap 2. **Module Background Settings** — outer then inner (None, Color, Image Cover/Contain, Aurora, Outer Animated, Inner Effect Glass/Grain/Pattern) 3. **Content Colors** — text vs links; per-column / social / copyright overrides win when turned on --- ## 4. Column widths (Equal vs Custom) **Equal (default):** Even columns at XL and Desktop. Stacked full width from Tablet down. Mobile always stacked. Spacers hidden when stacked. **Custom:** Each breakpoint chooses **Full Width** (stack visible columns) or **Set Width in Column** (percent sliders). Desktop defaults to Set Width; Tablet defaults to Full Width. Widths do **not** copy from XL — set Desktop and Tablet separately. **0% = hide** at that breakpoint (`display: none`). Hidden columns are skipped in the 100% total. Example: three columns, XL col1 = 0, col2 = 50%, col3 = 50% → a two-column row. Under 100% leaves empty space on the right. Over 100% shrinks the last **visible** column. When a breakpoint is Full Width, 0 still hides that column; any value above 0 stacks. **Spacer Column:** Empty gap sized by that breakpoint’s width. Set to 0 to hide the spacer. Spacers also hide when columns stack. --- ## 5. Common tasks - **Two equal columns (brand + nav):** Default Equal widths. Assign one footer menu on the nav column; set Menu Layout to Expanded columns if you want Services / About / Resources side by side. - **Uneven columns or a gap:** Style → Column Widths → Custom → Set Width in Column. Set each column’s XL / Desktop / Tablet %. Use **Spacer Column** for an empty gap. - **Hide a column at one breakpoint:** Set that column’s width to **0** at XL, Desktop, or Tablet. - **Logo too large:** Set Logo Max Width (default 300px). - **Column without a heading:** Clear Column Title — it is not required. - **Social X logo / custom icon colors:** Preset **X** uses the X glyph. Turn on **Override Colors** so Icon Color applies at rest (hover uses Icon Hover Color). - **Empty awards/products/copyright bands:** They still take height on purpose so columns stay aligned. --- ## 6. Sample view A typical sample is logo left-aligned above two columns: brand copy on the left, one HubSpot menu expanded into nav groups on the right, copyright in the meta band. New instances may include sample award/product logos; **existing saved global footers keep their stored images** until reset. --- ## 7. References - MODULE-SETTINGS-BACKGROUND-STANDARD.md - PROCESS-MODULE-OUTER-INNER-FIELD-REORG.md - SW Footer Simple (stacked footer alternative) **Changelog (AI doc):** - 2026.08.21: **Master 2026.08.21.17.42** — Aurora Updates; Custom column widths + 0 = hide; Spacer Column; Content Max Width inset removed; Menu Layout alias; Content Colors cascade; X social SVG; sample logo pack. - 2026.08.18: **Master 2026.08.18.12.17** — First official ship. Default 2 columns; Expanded menu columns; Logo Max Width 300px; equal-height bands.