> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Build a Footer Template

Create a custom site-wide footer with the Composer widget: columns, links, and dynamic site data.


A Footer template replaces your theme's default footer across your site, or on specific pages. Build it once with the Composer widget, set display conditions, and it renders automatically.

<Callout kind="info">
Footer templates are available on **Free and Pro**. Archive, search, and WooCommerce template types require **Pro**. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

### Create a Footer Template

1. Go to **UiChemy → Theme Builder**.
2. Click **+ Add New → Footer**.
3. It opens in the WordPress editor (Gutenberg) by default, or in Elementor if it's installed and you choose it. Use **Edit** on the template card to reopen it later.
4. Add the **Composer** widget to the canvas.
5. Build your footer (see below).
6. Click **Update** to save.
7. Set display conditions.

### Build Your Footer

Click **Edit With AI** *(Pro)* and describe it, for example:

> "A three-column footer with a dark charcoal background and white text. Left column: company logo and a one-line tagline. Middle column: Quick Links navigation. Right column: contact email and social media icons. A thin divider below, then a centered copyright line showing the current year and site name."

Or write it directly in the **Edit Code** panel:

```html
<footer class="site-footer">
  <div class="footer-inner uc-boxed">
    <div class="footer-col footer-brand">
      <a href="{{ site.url }}">
        <img src="{{ site.logo.src }}" alt="{{ site.name }}" class="footer-logo">
      </a>
      <p class="footer-tagline">{{ site.description }}</p>
    </div>

    <div class="footer-col footer-nav">
      <h4 class="text-label">Quick Links</h4>
      <uichemy-nav-menu></uichemy-nav-menu>
    </div>

    <div class="footer-col footer-contact">
      <h4 class="text-label">Contact</h4>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </div>
  </div>

  <div class="footer-bottom uc-boxed">
    <p>&copy; {{ "now"|date("Y") }} {{ site.name }}. All rights reserved.</p>
  </div>
</footer>
```

`{{ "now"|date("Y") }}` outputs the current 4-digit year, so your copyright line stays up to date automatically.

<Callout kind="warning">
`site.*` requires UiChemy Pro. In the free version, `{{ site.url }}`, `{{ site.logo.src }}`, `{{ site.name }}`, and `{{ site.description }}` return empty strings. Free users can hardcode the logo URL and footer links in the HTML, or use `<uichemy-site-logo>` for the logo.
</Callout>

### CSS Example

```css
.site-footer {
  background: #1a1a1a;
  color: rgba(255,255,255,0.8);
  padding-block-start: var(--space-xl);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-block-end: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-block-end: var(--space-sm);
}

.footer-tagline {
  font-size: 0.875rem;
  opacity: 0.6;
}

.footer-bottom {
  padding-block: var(--space-md);
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}
```

### Display Conditions

For a site-wide footer: open **Conditions**, click **+ Add condition**, choose **Include → Entire Website**, click **Save Conditions**.

### Tips

<ExpandableGroup>
  <Expandable title="Copyright year" default-open="false">
    `{{ "now"|date("Y") }}` renders the current year server-side on every page load, no JavaScript needed.
  </Expandable>
  <Expandable title="Logo inversion" default-open="false">
    If your logo is dark and your footer background is dark, add `filter: brightness(0) invert(1)` in the CSS to make it white.
  </Expandable>
  <Expandable title="Footer navigation" default-open="false">
    `<uichemy-nav-menu>` renders whichever menu is currently primary. For a dedicated footer menu, either set it as primary or hardcode the links in the HTML.
  </Expandable>
  <Expandable title="No footer on specific pages" default-open="false">
    Add an Exclude condition on the footer template for pages like full-screen landing pages.
  </Expandable>
</ExpandableGroup>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Why does my footer show twice?" default-open="false">
    Another theme builder, such as Elementor Pro or Nexter, also has a footer active. Keep the footer active in only one of them.
  </Expandable>

  <Expandable title="Will the copyright year update by itself?" default-open="false">
    Yes. The year in the example footer is pulled in automatically, so it stays current without editing.
  </Expandable>

  <Expandable title="Why are my logo, site name, and tagline blank?" default-open="false">
    Those site tags need **UiChemy Pro**. On the free plan they come out empty, so add your logo, links, and text directly in the HTML instead.
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Creating Templates" href="/uichemy-plugin/theme-builder/creating-templates">
    See the general template-creation flow this builds on.
  </Card>
  <Card title="Assigning Conditions" href="/uichemy-plugin/theme-builder/assigning-conditions">
    Narrow down where this footer actually shows.
  </Card>
  <Card title="Build a Header Template" href="/uichemy-plugin/theme-builder/header-template">
    Pair your footer with a matching header.
  </Card>
  <Card title="Twig" href="/uichemy-composer/design-data/twig">
    Add dynamic data to your footer markup.
  </Card>
</Columns>