Footer Widgets Module – Astra https://wpastra.com Fast, Lightweight & Customizable WordPress Theme for Any Website Mon, 28 Mar 2022 11:02:19 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.3 https://wpastra.com/wp-content/uploads/2020/01/favicon-astra2x.png Footer Widgets Module – Astra https://wpastra.com 32 32 How to Stick Footer to Bottom when Page Content is Less? https://wpastra.com/docs/how-to-stick-footer-to-bottom-when-page-content-is-less/ Sun, 01 Jul 2018 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=28393 How to Stick Footer to Bottom when Page Content is Less? Read More »

]]>
Sometimes you may have pages on your site, that have few lines of text or very less content.

In such cases, the footer displays below the content somewhere between the page. That does not give a nice look to the page.

You can stick the footer to the bottom so that no matter what your content length is, the footer will stick at the end of the page.

Option with Astra theme

Add the following filter to child theme’s functions.php file.

<?php // don't copy this line in your code.
add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
	?>
	<script type="text/javascript">
		document.addEventListener(
			"DOMContentLoaded",
			function() {
				fullHeight();
			},
			false
			);
		function fullHeight() {
			var headerHeight = document.querySelector("header").clientHeight;
			var footerHeight = document.querySelector("footer").clientHeight;
			var headerFooter = headerHeight + footerHeight;
			var content = document.querySelector("#content");
			content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
		}
	</script>
	<?php
}

Option with Astra Pro Addon plugin –

Sticky Footer option is available with Astra Pro’s Custom Layouts addon.

  • Firstly, you will need to Enable the Code Editor to insert code in Custom Layouts
  • Next, we need to design a footer and set it as a sticky using the below code. Choose the Layout as Hooks, and the Action as wp_footer.
  • With Display On setting, you can set it to be displayed on a particular page or on the entire website. 
Add Custom Code Inside Sticky Footer

Following is the above code which can pasted under the Custom Code Editor.

<script type="text/javascript">
	document.addEventListener(
		"DOMContentLoaded",
		function() {
			fullHeight();
		},
		false
		);
		function fullHeight() {
			var headerHeight = document.querySelector("header").clientHeight;
			var footerHeight = document.querySelector("footer").clientHeight;
			var headerFooter = headerHeight + footerHeight;
			var content = document.querySelector("#content");
			content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
		}
</script>
]]>
Footer Widgets Module with Astra Pro https://wpastra.com/docs/footer-widgets-astra-pro/ Sun, 25 Feb 2018 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=24635 Footer Widgets Module with Astra Pro Read More »

]]>
This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.

It allows you to add 7 different footer widget layouts to the footer.

Quick Steps on How to Design Footer Widgets Using the Footer Widgets Module
Step 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?
Step 2: Activate the Footer Widgets module from the Astra Options under the WordPress Dashboard > Appearance > Astra Options
Step 3: Visit customizer [ Appearance > Customize > Footer > Footer Widgets ] to edit module settings

Astra Footer Widgets

After activating the module, you can find the settings under Appearance > Customize > Footer > Footer Widgets

Footer Widgets Layout

You can choose any layout out of 7 available layouts. After selecting one of the layouts you would be able to add widgets from Appearance > Customize > Widgets

Astra Pro - Footer Widgets Layout, Astra 3.0+

After selecting a layout you can set the widgets for each area under Appearance > Customize > Widgets > Footer Widget Area.
Choose any WordPress default widget or you can use any third-party plugin to add a widget to the list.

Footer Widgets Padding

You can add padding for footer from all sides.

Astra Pro - Footer Widgets Padding, Astra 3.0+

Footer Widgets Width

Full Width

It will set a footer to full width no matter what your container width is.

Astra Pro - Footer Widgets Width, Astra 3.0+

Content width

It will set a footer to container width set under Appearance > Customize > Global > Container > Container Width

Astra Pro - Footer Widgets Container Width, Astra 3.0+

Footer Widgets Colors and Background

With the Footer Widgets module, you would get Background Image option along with default color options.

Astra Pro - Footer Widgets Colors and Background, Astra 3.0+

Footer Widgets Typography

With Footer Widgets module, you can set typography for Widget Title and Content under Appearance > Customize > Footer > Footer Widgets > Widget Title Font/Content Font

Astra Pro - Footer Widgets Typography, Astra 3.0+
]]>