Template TypesBuild A Footer Template

Build A Footer Template

How to create a custom site footer using the Protuno Theme Builder and Proton widget, with 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 Proton widget, set display conditions, and it renders automatically.

Footer templates are available in all Protuno plans, Free and Pro. Archive, search, and WooCommerce template types require Protuno Pro.
  1. Go to Protuno → Theme Builder
  2. Click + Add New → Footer
  3. Elementor opens with a blank canvas
  4. Drag the Proton widget onto the canvas
  5. Build your footer (see below)
  6. Click Update to save
  7. Set display conditions

Use Edit With AI to describe it:

"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 pr-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 pr-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 Protuno 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:

  1. Open Conditions for the template
  2. Click Add Condition
  3. Choose Include → Entire Site
  4. Click Save

Tips

Copyright year: Use {{ "now"|date("Y") }}, it renders the current year server-side on every page load without JavaScript.

Logo inversion: If your site logo is dark and your footer background is dark, add filter: brightness(0) invert(1) in the CSS to make it white.

Footer navigation: Create a separate "Footer" menu in Appearance → Menus and assign it as the secondary nav. If you have multiple navigation menus, <uichemy-nav-menu> renders whichever is currently the primary nav. For a dedicated footer menu, set it as the primary nav, or hardcode the links in the HTML.

No footer on specific pages: Add an Exclude condition on the footer template for pages where you want no footer (full-screen landing pages, for example).

Was this page helpful?