How To Create a Footer With Astra Footer Builder

The Astra Footer Builder is a visual, drag-and-drop tool that lets you design your website’s footer directly inside the WordPress Customizer. Instead of editing template files or wrestling with widget areas, you arrange elements like menus, social icons, copyright text, and widgets across three flexible rows, and see your changes update live as you work.

This guide walks you through opening the Footer Builder, understanding how it’s organized, and configuring it to match what your site needs.

Before you begin, you may also want to skim our FAQs about the Astra Header/Footer Builder.

How to Open the Footer Builder

There are two ways to get to the Footer Builder, and both lead to the same place.

Option 1 — From the WordPress Customizer (most common):

Go to Appearance > Customize > Footer from your WordPress dashboard. This opens the Customizer with the Footer Builder panel ready to use.

Option 2 — From the Astra Dashboard:

Go to Astra > Dashboard from your WordPress admin. Under the Quick Settings section, you’ll see shortcuts for Header Builder and Footer Builder. Click on Footer Builder, then click Go to Customizer when prompted.

Once you’re in the Customizer, you’ll see the new Footer panel along with related options.

Understanding the Three Footer Rows

The Footer Builder gives you three stacked rows where you can place elements. Each row spans the full width of your footer and can be styled independently.

Above Footer Row

The topmost row, often used for things you want to highlight just above the main footer area. Common uses include a newsletter signup, a call-to-action banner, an awards or trust strip, or a thin row with contact information.

Primary Footer Row

The main footer row, and usually the tallest. This is where most people place their widget columns, footer menu, address details, or logo and tagline. Think of it as the “body” of your footer.

Below Footer Row

The bottommost row, typically used for the copyright notice, secondary links like Privacy Policy and Terms, payment method icons, or social icons. Often styled as a thin bar in a darker shade.

You don’t have to use all three rows. If you only need a single bar at the bottom of your site, use just the Below row and leave the others empty.

Adding and Managing Elements

Inside each row, you can add one or more elements such as a menu, widgets, social icons, or HTML.

To add an element:

1. Click the plus (+) icon inside any row.
2. From the popup, choose the element you’d like to add.
3. The element appears immediately in the row and is ready to configure.

To move an element:

Drag and drop it to a different position within the same row, or to a different row entirely. The preview on the right updates live.

To configure an element:

Click directly on the element. The Customizer panel on the left switches to that element’s settings, where you can adjust labels, behavior, colors, spacing, and other options.

To remove or duplicate an element:

Click on the element to open its settings, then look for the Delete or Duplicate action at the top of the panel. For a full walkthrough, see Clone and Delete Elements in Header Footer Builder.

Available Footer Elements

Here’s what each element does, so you know which one to reach for.

Available with Astra (Free)

Copyright — Displays copyright text with support for dynamic tags like %%current-year%% and %%sitename%%, so the year stays current automatically. See Footer Custom Text Helper Strings for all supported tags.

HTML — A free-form HTML or text block where you can add any markup directly to the footer. Great for custom messages, contact details, badges, or short code snippets.

Menu — Displays a WordPress navigation menu in the footer. Useful for secondary links like Privacy Policy, Terms, Contact, and Sitemap.

Social Icons — A row of social media icon links. Add the platforms you want (Facebook, Twitter, Instagram, etc.), paste in your profile URLs, and style the icons and spacing as needed.

Button — A clickable button with custom label, link, and basic styling. Useful for newsletter signups, “Contact Us” links, or download prompts.

Widget — Renders any registered WordPress sidebar widget inside the footer. Place things like recent posts, contact forms, galleries, or custom HTML.

Available with Astra Pro (additional)

Divider — A horizontal or vertical separator line you can place between footer elements. Style, color, and size are all configurable.

Language Switcher — A language selector for multilingual sites. Integrates with WPML and Polylang so visitors can switch languages from the footer. See Using Language Switcher Element with WPML for setup.

Button (Pro) — An enhanced version of the free Button element with additional color, typography, and border controls.

Social Icons (Pro) — An enhanced version of the free Social Icons element with support for more platforms and advanced styling options.

You can also extend the number of elements available (for example, multiple HTML or Widget slots). See Add Multiple Elements in Header Footer Builder for details.

The Three Settings Tabs

When you’re inside the Footer Builder, you’ll see three tabs that organize where settings live.

Builder Tab (visual)

This is the drag-and-drop canvas where you place and arrange elements. Most of your day-to-day work happens here.

General Tab

Every element you’ve added to the footer appears as a clickable item in the General tab. Click any element to open its settings (such as menu selection, copyright text, social profile URLs, and so on). This is essentially a quick directory of everything currently in your footer.

Design Tab

Controls footer-wide styling, including background color or image, row spacing, borders, and overall layout. Per-row styling (such as Above row background) is reached by clicking the small gear icon above that specific row in the visual builder.

Styling a Specific Row

To style just one row (for example, to give the Below row a darker background for a copyright bar look):

1. Hover over the row in the visual builder.
2. Click the gear / settings icon that appears above the row.
3. The Customizer panel switches to that row’s styling options — background, padding, borders, and column layout.

For deeper background customization including images, gradients, and overlays, see How To Design Footer Background in Astra.

Desktop and Mobile Footers

The Footer Builder includes a device toggle (desktop, tablet, mobile) at the bottom of the Customizer. Switching between devices lets you see how the footer looks on each, and many element settings are responsive — meaning you can hide or restyle elements per device.

For example, you might show a four-column widget layout on desktop and collapse it to a single stacked column on mobile, all from the same Footer Builder without writing CSS.

Common Footer Tasks

A few of the most common things people set up after opening the Footer Builder:

• Change or remove the default copyright text — Footer Custom Text Helper Strings
• Add a widget-rich footer with multiple columns — Footer Widgets Module with Astra Pro
• Stick the footer to the bottom on short pages — Stick Footer to the Bottom When Page Content is Less
• Fix the right margin on footer widgets — How To Fix Right Margin for the Footer Widget Element
• Design the footer background — How To Design Footer Background in Astra
• Hide the footer on a specific landing page — How To Disable Header or Footer for a Landing Page or Post

Troubleshooting

Related Articles

• How To Create a Header With Astra Header Builder
• How To Create Mobile Header With Astra Header Builder
• Elements in Header/Footer Builder With Astra Theme and Astra Pro
• FAQs – Astra Header/Footer Builder
• How to edit website footer (guide)