Template TypesFooter Template

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.

Footer templates are available on Free and Pro. Archive, search, and WooCommerce template types require Pro. See Free vs Pro.

  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.

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.

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.

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

Tips

Frequently Asked Questions

Creating Templates

See the general template-creation flow this builds on.

Assigning Conditions

Narrow down where this footer actually shows.

Build a Header Template

Pair your footer with a matching header.

Twig

Add dynamic data to your footer markup.

Was this page helpful?