Build a Footer Template

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.

Create a Footer Template

1. Go to UiChemy → Theme Builder.
2. Click + Add New → Footer.
3. It opens for editing in Gutenberg by default. 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:

<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.

CSS Example

.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 Site, click Save.

Tips

• Copyright year, {{ "now"|date("Y") }} renders the current year server-side on every page load, no JavaScript needed.
• Logo inversion, if your logo is dark and your footer background is dark, add filter: brightness(0) invert(1) in the CSS to make it white.
• Footer navigation, <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.
• No footer on specific pages, add an Exclude condition on the footer template for pages like full-screen landing pages.

Related