Magento 2 Footer Builder - Custom Footer

Footer Builder for Magento 2

Introduction

The extension allows create a clean footer depending upon your store's requirement and gives your site the credibility that it belongs to a real business

Installation

The extension has 2 separate ways of installation, via Composer or by copying the code.

Please follow this Installation Guide to install the extension.

Extension Configuration

Configuration Settings

To access the configuration settings of the extension, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Footer Builder.

The module’s configuration contains three sections: General and Footer

General

Set Enable extension to "Yes" to enable the extension in the storefront

Footer

Set Show Footer Top to "Yes" to show footer top row in the storefront or "No" to hide it.

In Heading Block Block field, if "Custom Block" is selected, create a heading static block under CONTENT ⟶ Elements ⟶ Blocks, and insert it on "Static Block Id" field.

the Footer Top Content allows to show or hide content in the footer top block. If "Custom Block" is selected, please create a static block from CONTENT ⟶ Elements ⟶ Blocks. and insert it on "Static Block Id" field

you can also use your static block identifier instead of bock_id in "Static Block Id" field.

Set Show Footer Middle 1 Row to "Yes" to show the first footer middle row in the storefront or "No" to hide it.

In Heading Block Block field, if "Custom Block" is selected, create a heading static block under CONTENT ⟶ Elements ⟶ Blocks, and insert it on "Static Block Id" field.

The Column 1,Column 2, Column 3, and Column 4 fields enable to choose the type of content to appear on columns 1, 2, 3, and 4 or just hide each column in the first footer middle row. For each column :

  • If Do not show is selected, the column will be hidden;
  • If Custom Block is selected, a static block will show in the column. Please create a static block from CONTENT ⟶ Elements ⟶ Blocks. and insert it on the "Static Block Id" field ;
  • If Newsletter Subscribe is selected, the newsletter subscription block will show in the column;

In the Column 1 Size, Column 2 Size, Column 3 Size, and Column 4 Size fields select the size of the column in the first footer middle row, up to 12 sizes are available, from 1/12 to 12/12

Set Show Footer Middle 2 Row to "Yes" to show the second footer middle row in the storefront or "No" to hide it.

In Heading Block Block field, if "Custom Block" is selected, create a heading static block under CONTENT ⟶ Elements ⟶ Blocks. and insert it on "Static Block Id" field.

The Column 1, Column 2, Column 3, and Column 4 fields enable to choose the type of content to appear on columns 1, 2 , 3, and 4 or just hide each column in the second footer middle row. For each column :

  • If Do not show is selected, the column will be hidden;
  • If Custom Block is selected, a static block will show in the column. Please create a static block from CONTENT ⟶ Elements ⟶ Blocks. and insert it on "Static Block Id" field;
  • If Newsletter Subscribe is selected, the newsletter subscription block will show in the column;

In the Column 1 Size, Column 2 Size, Column 3 Size, and Column 4 Size fields select the size of the column in the second footer middle row, up to 12 sizes are available, from 1/12 to 12/12

Set Show Footer Bottom to "Yes" to show the footer bottom row in the storefront or "No" to hide it.

In Heading Block Block field, if "Custom Block" is selected, create a heading static block under CONTENT ⟶ Elements ⟶ Blocks, and insert it on "Static Block Id" field.

Upload the Logo Image to appear in the footer bottom.

Defines the Copyright Text and the Static Block Id to show before and after Copyright Text

After each change at the admin panel, clear all Magento caches before checking at the storefront.

Design (Adjust Colors)

To adjust/change the background, text, links, and border colors of the Footer Top, Middle 1, Middle 2, and Bottom Rows, please check the, please add the following CSS codes at your custom theme CSS file. Replace the default color with your colors.

You can add only the CSS codes that you'd like to adjust the colors, no need to add it all

Top Row

Background color

.footer-top {
  background-color: #FF6152;
}

Text colors

.footer-top {
  color: #ADFFE9;
}

Links colors

.footer-top a {
  color: #462BFF;
}
.footer-top a:hover {
  background-color: #9FFF7A;
}

Icons colors (Font Awesome Icons)

.um-footer-builder .footer-top [class^="fa-"],
.um-footer-builder .footer-top [class*=" fa-"] {
  color: #462BFF;
}

Middle Row 1

Background color

.footer-middle {
  background-color: #FF549A;
}

Text colors

.footer-middle,
.footer-middle p {
  color: #E0FFDB;
}
.footer-middle .block .block-title strong {
  color: #C7FF7A;
}

Links colors

.footer-middle a {
  color: #66C8FF;
}
.footer-middle a:hover {
  color: #DEFFE9;
}

Icons colors (Font Awesome Icons)

.um-footer-builder .footer-middle [class^="fa-"],
.um-footer-builder .footer-middle [class*=" fa-"] {
  color: #96A5FF;
}

Middle Row 2

Background color

.footer-middle-2 {
  background-color: #FF9021;
}

Text colors

.footer-middle-2,
.footer-middle-2 p {
  color: #E0FFDB;
}
.footer-middle-2 .block .block-title strong {
  color: #C7FF7A;
}

Links colors

.footer-middle-2 a {
  color: #66C8FF;
}
.footer-middle a:hover {
  color: #DEFFE9;
}

Icons colors (Font Awesome Icons)

.um-footer-builder .footer-middle-2 [class^="fa-"],
.um-footer-builder .footer-middle-2 [class*=" fa-"] {
  color: #96A5FF;
}

Bottom Row

Background color

.footer-bottom {
  background-color: #5E47FF;
}

Text colors

.footer-bottom,
.footer-bottom p {
  color: #FDFFF5;
}

Links colors

.footer-bottom a {
  color: #FF405B;
}
.footer-bottom a:hover {
  color: #D882FF;
}

You can choose your color picker from this guide and make sure to prefix each color with "#". eg #FFFFF

In case you can not adjust the colors by yourself, please contact our support team at [email protected], we will help you out with that

Frontend View

Example of footer with a static block in Footer Top. 4 columns with 3/12 size per column in Footer Middle 1 Row. 4 columns with 3/12 size per column in Footer Middle 2 Row. Logo, Copyright Text, static block before and after copyright text in Footer Bottom

Example of footer with 4 columns in Footer Middle 2 Row. Logo, Copyright Text, static block (social follow buttons) after copyright text in Footer Bottom

Responsive design

The extension is responsive to mobile devices and work great regardless the type of screen or device used to view your store

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page