1. Home
  2. Docs
  3. Xpro Elementor Theme Builder
  4. Layouts
  5. Footer

Footer

Introduction

Xpro Elementor Theme Builder lets you design custom WordPress Footers on the fly using a live front-end dashboard! The FREE Elementor Theme Builder makes it easy for you to customize your site theme parts which were not possible unless you purchase the Pro version of Elementor. It gives you the ultimate freedom to design FREE customized Footers for WordPress websites. The plugin works seamlessly with the Free version of Elementor. You don’t need to install any additional plugins to customize the Footer Layout.

Creating unique footers with Elementor couldn’t be more quick & easy with our live front-end editor. You can display a fully customized footer on a unique page or anywhere on the website using our Display Conditions option. You can also import a pre-built Footer Block Template to quickly design and publish a stunning footer on your site. 

So, let’s design your perfect footers and assign them to individual pages or a specific category, it’s so much fun, easy, and takes only a couple of minutes. Some salient features of using Xpro Elementor Theme Builder for creating amazing WordPress footers are:

  • You can create unique footers for the homepage and inner pages
  • You can easily add a footer to a specific page or category
  • You can create custom footers using any module in Elementor

Let’s learn how to create a FREE Footer for your WordPress website.

How to Use Xpro Elementor Theme Builder to Design Custom Footers

Log in to your WordPress Admin Dashboard and Edit the page you want to add a custom Footer on. From the front-end, you will see the Xpro Elemetor Theme Builder icon on the bottom left side of your page.

Click on the button and a Dashboard will appear on your screen just like this.

Now simply click on the Footer Layout to create a new Footer or edit an existing one.

Type the name of your new Footer Layout and press Enter. Your new layout will be available to Edit.

Simply hover over the new Footer Layout and click the Edit Icon to customize the settings of your Footer Layout.

Here you can change the Title of your Footer and set Display Conditions for different pages/post types. Tweak the setting as for User Roles per your liking. Remember, you need to change the Status of your singular layout to ‘Publish’ from the Status option.

You can now easily customize or create a Footer from scratch using Elementor Page Builder. Simply click on the Elementor button to get started.

A clean, pleasant footer enhances user navigation & gives them a view of all important pages of your site. Until now, creating a custom footer was only possible with the paid version of Elementor but Xpro Elementor Theme Builder has totally changed the status quo. Now you can easily create a custom Footer for your WordPress website in minutes. It’s FREE, fun, and works with the free version on Elemetor.

Xpro Elementor Theme Builder gives you two options to create a FREE Footer on your WordPress website.

  1. You can design a new Footer from the scratch using Xpro Elementor Addons.
  2. You can simply import our premium pre-built Footer Templates to quickly add a professionally designed Footer to your website.

Remember, Xpro Elementor Theme Builder is fully compatible with popular WordPress themes like Xpro, Hello, GeneratePress, and Astra. Moving forward, simply click on the Theme Builder Icon, move to the Footer Layouts section, and edit an existing layout or create a new one.

Set the Display Conditions, user roles, rename the footer layout title, and much more. Here I am going to set the Display On option for a specific page (current page). To do this, simply scroll to the bottom of the Display On option and select the ‘Specific Page / Post / Taxonomies, etc.’ option.

Now simply choose the specific page/post you want this Footer Layout to be visible on.Similarly, you can set rules from the Don’t Display On option to hide your Footer Layout on a specific page/post.

Now click on the Update button to save your changes.

Finally, click on the Elementor button to edit your Footer Layout.

As I mentioned earlier, you can create a new Footer from scratch or simply insert one of the pre-built Xpro Footer Templates to quickly add a professional Footer to your website. Here I am going to insert a Footer Template and then we will edit it as per our needs.

Click on the Xpro Elementor Addons icon available in the Elementor Editor.

Click on the Blocks Tab and open Footer Templates from the filter option.

You can choose any Footer Template from the Xpro Templates library and simply click o  the Insert button to import it into your website. Remember, you can always customize these Footer Templates as you like.

This will be the update view in your Elementor Editor.

Now you can customize each widget of this Footer Template. Let’s change the color of the Contact Form widget to match it with our site’s color aesthetics.

To do this, simply hover on the Contact Form and click on the edit widget icon.

Now click on the Style tab and change the button color for active and hover mode as per your liking. You can also add borders change the typography and much more.

Head over to the detailed documentation for Xpro Contact Form Widget for Elementor and learn how you can fully utilize this powerful widget.

Once you have made your desired changes, simply click on the Publish button to save them.

Now visit the page where you wanted the Custom Footer to be displayed. In this demo, it’s the Homepage. Your Footer will be fully functional and live on the website.

Sometimes you want to display your WordPress site’s Footer on the entire website excluding specific pages. These pages may include a checkout page, product landing page, or any other page from where you don’t want the user to switch. Our robust Xpro Elementor Theme Builder gives you the freedom to easily customize these Display Conditions right from the front-end dashboard.

To do this, simply edit the Footer Layout you want to specify these conditions for. Here, I’ll demonstrate Display Conditions for Footer Layout titled ‘Demo Footer’.

From the Display On option, you can make your Footer Layout visible on the entire website, any specific page/post, archive pages, and more. You can also add multiple display rules by clicking the Add Display Rule button.

Similarly, if you want to hide your Footer from cart, checkout pages, etc. then simply open the dropdown menu of the Don’t Display On option and apply your exclusion rule. To do this, simply scroll to the bottom and select the ‘Specific Page / Post / Taxonomies, etc.’ option.

Now type or click the dropdown to select the names of the specific pages you want the Footer to hide on. You can always add multiple exclusion rules by clicking on the Add Exclusion Rule button.

Finally, Update your settings and your display rules will be applied.

This is all from our Custom Footers for WordPress guide. I hope you have a better understanding of using Xpro Elementor Theme Builder to create FREE custom footers. In the same way, you can create amazing Custom Headers for your WordPress website using our powerful theme builder. Check our detailed guide on creating Custom Headers using Xpro Elementor Theme Builder and instantly drive more clicks on your website.

How can we help?