Footer Builder for Magento 2

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 contain 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

the Footer Top Content enables 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

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

Set Show Footer Ribbon to "Yes" to show ribbon block in the footer middle

The Column 1,Column 2, Column 3, and Column 4 fields enables to choose the type of content to appear on column 1, 2 , 3 and 4 or just hide each column in the first footer middle roow. 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 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 size 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

The Column 1,Column 2, Column 3, and Column 4 fields enables to choose the type of content to appear on column 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 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 size 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

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 this 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

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;
}

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;
}

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;
}

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 column with 3/12 size per column in Footer Middle 1 Row. 4 column with 3/12 size per column in Footer Middle 2 Row. Logo, Copyright Text, staic block before and after copyright text in Footer Bottom

Example of footer with 4 column 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