How To Edit Footer In Astra Free: A Complete Footer Design

Creating a footer with Astra theme footer builder is a straight and handy task to do. Even the Astra free version has enough footer elements to design a professional looking website footer.

Today, we will use Astra freemium to design a footer with logo, navigation menu, social links, subscription form, copyright, etc. And the process will be very simple, no additional hassle or code is required. So, let’s find an answer on how to edit footer in Astra. 

Before taking your hands in the process, have a look at our footer that we are going to design now. Sit tight, it’s going to be a bumpy ride. 

How To Edit Footer In Astra: The Process begins 

To edit footers using Astra free you will require some elements, customizations, a footer menu and a contact form. Let’s prepare all of them before creating the footer.

Footer Elements You Need

A few footer elements you will need to design the footer and all of them are available for free version. They are,

• 4 Widgets elements 
• Social Icons element
• Copyright element
• HTML element

Astra Global Customization

At first, you will need to do some customization globally for the footer design. For this tutorial, you will be needing color and button customization only.

So, go to the WordPress Dashboard>Appearance>Customize. You will find Color and Button customization options and work on them individually.

Color Customization

In the global color customization, we have made changes for links, accent, heading, body, and more. They are;

• Accent: #FFFFFF
• Links (Normal): #FFFFFF
• Links (Hover): #FF5849
• Heading (1-6): #FF5849
• Body Text: #FFFFFF
• Borders: #E5E5E5
• Site Background: #000000
• Content Background: 4B4F58

Button Customization

In the global Button customization, choose a button type. We are using the button with 30 px radius and no further customization is required. But, you can change colors, font, radius, and more for the button.

Footer Menu Creation

Create a footer menu in the WordPress Appearance as you need and save it before leaving. You will need this later in the design process.

As we have all the necessary materials ready, let’s go for the step-by-step design process.

Step 1: Editing Primary Footer Layout

At the beginning of the steps, you need to open Astra footer builder. So, go to WordPress Dashboard>Appearance>Customize and click on ‘Footer Builder’. We will start working on the Primary footer. So, click on the settings button and make some changes.

• Column: 3
• Layout: Second one 
• Inner Elements Layout: Stack
• Width: Content width
• Vertical Alignment: Top
• Background (color): #211C32 (in the Design tab)

Step 2: Image & Caption

Take a widget in the first column of the Primary Footer and add the ‘Image’ block. You will have 4 Astra footer widgets with the free version. Insert an image with captions as you need.

Step 3: Footer Menu

Now add another widget in the second column and insert the ‘Navigation Menu’ block. The customization we are making are;

• Layout: Group (see two boxes together on upper-left)
• Title: Site Links
• Select Menu: Footer

The footer menu we have created before from the WordPress menu, will call that here. You can create your menu as you like.

Step 4: Add (Follow Us) Heading

Move on to the third column, take another widget and insert a heading block. We are using H2 with text ‘Follow Us’.

Step 5: Social Icons

Beside the ‘Follow Us’ widget, add the ‘Social Icons’ element. Add the social accounts you like and customize them individually. As an example, we did for ‘Facebook’;

• Label: Facebook
• URL: # (referred to facebook url)
• Icon: Facebook icon

Step 6: Subscription Form

You will also require a subscription form in the footer. For that, you need to install a third-party plugin such as Contact Form 7, WP Forms, etc. After installing the plugin, it will be added as a block in the WordPress block editor and you can call any form created with that.

In this case, we have created a simple subscription form using Contact Form 7 with an email field and a button. We have named the form ‘Subscription’.

Now, take another widget element, insert Contact Form 7 block, and select the ‘Subscription’ form.

Step 7: Below Footer Customization

Now, move on to the ‘Below Footer’ and open settings. The changes we made here are;

In the General tab

• Column: 3
• Layout: First one (select one that suits)
• Inner Elements Layout: Inline
• Width: Content width
• Height: 80
• Vertical Alignment: Top

In the Design Tab

• Top Border Size: 1
• Border Color: #FF5849
• Background (color): #211C32 (in the Design tab)

Step 8: Copyright Element

Step 8: Copyright Element

In the first column of the Below Footer, insert the ‘Copyright’ element and use anchor text & URL. We are using;

• Text: @2023 FlywithWP (anchor text: FlywithWP)
• Anchor Text URL: www.example.com
• Alignment: Right

Step 9: Privacy Policy and Terms & Conditions

In the third column of the Below Footer, take a HTML element and use 2 anchor text navigational URLs. See below,   

• Anchor Text: Privacy Policy (URL: www.example.com)
• Anchor Text: Terms & Conditions (URL: www.example.com)
• Alignment: Right

Note: Add some extra space between two anchor texts for design combination.

We are done with the process. See the final view.

Related Posts

How To Add A Scroll-To-Top Button In Astra Free: With Or Without Plugin
How To Add Top Bar In Astra Free Theme
How To Make Sticky Header In Astra Free And Pro

End Words

Hope you have got the steps pretty well on how to edit footer in Astra free version. Well, the pro plugin offers more elements and customization facilities for enhanced design possibilities. However, you can use your design sense to do even better.

Share your experience in the comment section if the process was helpful for you or need any further help.

FAQ