Astra Pro Footer Widget Module Complete Tutorial (with footer fixation settings)

In website design, the footer is not only a display area for key information, but also an important element that reflects the overall design aesthetic.Astra Pro Provides a very useful footer widget module, can help you quickly build diverse footer area, and free to control theopening (chess jargon), colors, fonts and other elements. This article describes the specific setup process and adds how to make the footer fixed at the bottom of the page to avoid blank space because of too little content.

Introduction to Footer Widgets Module

Astra Pro The footer widget module supports up to 7 Kinds of different layouts. You can choose the arrangement that suits the structure of your website or brand style, for example:

single column layout
Side-by-side combinations such as two or three columns
Asymmetric distribution of left and right structures

When the module is activated, it is possible to place in each area the WordPress Native widgets that also support content modules provided by third-party plugins, such as forms, navigation, social icons, and more.

Setup Steps

Install and enable the Astra theme with Astra Pro Plug-ins.
go into WordPress Backstage, click "Appearance" > "Customize" > "Footer Builder"The
Select the appropriate layout structure in the footer builder.
To set the desired content for each column: go to"Customize" > "Widgets" > "Footer Widget Area", add the type of gadget you wish to display.

Style and Typography Controls

Astra Pro offers detailed style setting options:

inner margin: You can set the top, bottom, left and right margins for the footer area separately;

Width setting::
- Full-screen width to fill the browser landscape space;
- Content width, consistent with the main page container;

calligraphic style: Support for setting parameters such as font, font size, line size, etc. for the title and body of each widget;

Backgrounds and Colors: Customizable background color, also supports uploading background images.

These options help to achieve a uniform visual style and give the footer more texture.

How to fix the footer at the bottom of the page

When there is too little content on a page, the footer may hang out in the center and detract from the overalltypographicalThe

The following can be added CSS Code to make the footer always fit at the bottom and stay displayed at the bottom regardless of page length.

The code used is as follows:

#page {
    display: flex;
    flex-direction: column; min-height: 100vh;
    min-height: 100vh;
}
.admin-bar #page {
    min-height: calc(100vh - 32px); }
}
#page .site-content {
    flex-grow: 1; }
}

Add method:

show (a ticket) WordPress Backstage;
Click "exterior condition" > "customizable";

Scroll to the bottom to find "Extras". CSS";

Paste the code into the edit box;

Click the "Publish" button in the upper right corner to save.

Once this is done, the footer will no longer float, regardless of whether the page has a lot of content or not.

summarize

Astra Pro The footer module allows you to quickly build a clearly structured and visually unified bottom area of the page. Together with a simple CSS code, and the footer display position has become more standardized. This combination is perfect for page building for blogs, e-commerce sites or official business websites.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off