Skip to main content

How to Build a Footer Template in Elementor

A footer template is a Ruby Template you design in Elementor and then show as your site footer. This article builds one. Footer Builder, the next article, makes it the footer of your site.

A footer built as a Ruby Template, outlined in orange: the logo, a short about line and the social icons, a Quick Links menu, and a copyright row.

You need Elementor installed and active. Without it, a Ruby Template shows nothing at all.

Imported a demo?

Most demos come with a footer template already. Open Ruby Templates, find the one with Footer in its title (for example PressPulse Footer), hover over it and click Edit with Elementor. Then skip to step 3 and change what you need. Editing it is quicker than starting from an empty page.

Build the template​

  1. Navigate to Ruby Templates > Add New Template. Type a title you will recognise later, such as Site Footer, and click Edit with Elementor.

    Ruby Templates > Add New Template with Site Footer typed in the title field and the Edit with Elementor button below it, outlined in orange.

  2. Elementor opens on an empty page. Click the + in the middle of the page, choose Flexbox, then pick a structure. For a classic footer, choose three or four columns side by side.

    The structure picker in the Elementor canvas after clicking + and then Flexbox: the line Select your structure above a grid of container structures, with four equal columns side by side outlined in orange.

  3. Drag blocks from the panel on the left into the columns. Type a block's name in the panel's search box to find it quickly. These suit a footer:

    BlockWhat it showsPanel group
    Foxiz - Site Logoyour logo, linked to the homepageFoxiz Header
    Text Editora short line about your siteElementor's Basic
    Foxiz - Headinga title above a columnFoxiz - Element
    Foxiz - Sidebar Menua WordPress menu as a list of linksFoxiz - Element
    Foxiz - Social Listyour social iconsFoxiz Header

    The Elementor widget panel open on the Foxiz Header group, with Foxiz - Site Logo and Foxiz - Social List among its blocks.

  4. Set up each block. Click a block to open its settings in the panel.

    • Foxiz - Site Logo: leave Logo Image empty to use the main logo from Theme Options, or upload one for the footer. Set Lazy Load to Enable: the footer is at the bottom of the page, so the logo can load last.

    • Foxiz - Sidebar Menu: on its Content tab, pick the menu in Assign Menu, and type a column title in Heading if you want one.

      The Content tab of Foxiz - Sidebar Menu, with Assign Menu set to a footer menu and Quick Links typed as the Heading.

      On its Style tab, Layout is Vertical by default, one link per line. Horizontal puts the links in a row, for a bottom bar, and shows the top level only.

      The Style tab of Foxiz - Sidebar Menu, its Layout section open with Layout set to Vertical.

    • Foxiz - Social List: it has style settings only. The icons and their links come from Theme Options > Social Profiles, the same as everywhere else on the site.

    Create the menus first, at Appearance > Menus, so they are there to pick. How to Create & Setup Header Menus shows the screen.

  5. Give the footer its colours. Select the outer container, open its Style tab and set a Background. If your site has a dark mode, set the dark one in Foxiz Dark Mode - Background on the same tab. Text blocks have a Foxiz Dark Mode section with a dark mode Text Color too.

    The Style tab of the footer's outer container in Elementor: the Background section open with Background Type on Classic and a dark Color, and further down the Foxiz Dark Mode - Background section, where the dark mode colour goes; the Color swatch and that section's heading are outlined in orange.

    The Background and Text Color Scheme in Theme Options > Footer do not reach the template. They colour only the copyright bar below it.

  6. Click Publish.

    The Elementor editor on the Site Footer template: the widget panel on the left open on the Foxiz Header group, the finished footer on the canvas (logo, about line and social icons, the Quick Links menu, and the copyright row), and the Publish button at the top right outlined in orange.

For most sites, leave the copyright out of the template and set it in Theme Options > Footer > Copyright instead. Foxiz prints that copyright bar under your template anyway, and its {year} fills in the current year by itself. See How to Add the Footer Logo, Social Icons and Copyright.

The example on this page builds a copyright row into the template instead, which also works. If you do that, empty Copyright Text and Copyright Menu in Theme Options, and turn off Logo & Socials Section, or the site shows both.

Next step​

The template is built but not shown anywhere yet. To use it:

You need its shortcode for both. It looks like [Ruby_E_Template id="123"]. Find it in two places outside Elementor: the Template Shortcode box on the template's WordPress edit screen, or the Template Shortcode column at Ruby Templates > All Templates.

The Site Footer template's WordPress edit screen after publishing: Status Published in the Publish box, and the Template Shortcode box holding [Ruby_E_Template id="3063"], outlined in orange.

Later changes are easy: edit the template and click Publish again. Every page that shows it updates at once.

Related Articles