fixed footer bar

A fixed footer bar can be a handy way to keep important information about your website front and center as the user interacts with your page content on any device.

As with Divi, a footer bar usually exists as a static element at the very bottom of the page after the main footer content. They include things like copyright text and social media icons.

But, if you don’t hide the content of the footer bar at the bottom of the page, you can create a custom footer bar that floats at the bottom of the screen while the user scrolls.

In this tutorial, we are going to design a fully personalized fixed footer bar using the Divi theme generator. This will come in handy for you to keep those small but important pieces of content in sight at all times.

fixed footer bar

How to add the fixed footer bar template to download on your Divi site

WARNING !: Adding this template will replace the default website template (if you have one) on your Divi site. We suggest you add it to a test site so you don’t mess anything up on a live site.

To import the fixed footer bar template to your website, unzip the download zip file to access the JSON file.

Then go to the WordPress dashboard and go to Divi> Theme Builder.

Then click on the portability icon at the top right of the page.

In the portability window, choose the JSON file you just unzipped and select the ‘Download backup before import’ option, just in case you previously had something in the default website template that you didn’t. did not want to replace.

Then click on the Import button.

Finally, save the theme builder changes and view a live page to see the fixed footer bar.

Part 1: Adding a Global Footer

Divi’s theme builder allows you to replace the default footer with a new one by updating the default website template.

To create a global footer, go to the WordPress dashboard and go to Divi> Theme Builder. Then click on the “Add Global Footer” space inside the Default Website Template.

Then select the “Build a custom footer” option from the drop-down list.

This will deploy the Model Layout Editor where you will immediately be prompted with the three choices for how you want to start building. Select “Build From Scratch”.

Part 2: Create the Fixed Footer Bar

Now that we are editing from the template layout editor, we can start designing the fixed footer bar. Once done, you will have a fixed footer bar with three columns that are content-ready.

Add a three-column layout to the row

First, add a three-column layout to the row.

Section height

Once the three columns have been added, let’s give a defined height to the section. This is important to create space at the bottom of the page where the landline will eventually end. We will also remove the default top and bottom padding.

To set the height and padding, open the section settings and update the following:

  • Height: 85px
  • Padding: 0px high, 0px low

Line parameters

Now that our section is ready, we’re ready to customize the row to serve as a fixed footer bar. Open the row settings, then update the following:

context

  • Background Color: # 1a1e36

Size and spacing

  • Gutter width: 1
  • Width: 100%
  • Max width: 100%
  • Padding: 0px top, 0px bottom, 3% left, 3% right

Custom CSS

Although the row is fixed, we want the row height to match the height of the parent section so that the space at the bottom of the page properly contains the row. And, we want to make sure that the contents of the row stay vertically aligned. To do this, add the following custom CSS to the main element of the row:

Office

Telephone

Fixed positioning

To make the line fixed so that it floats at the bottom of the screen, we need to give it a fixed position at the lower center location as follows:

  • Position: fixed
  • Location: bottom center

Part 2: Create the content of the fixed footer bar

At this point, we have a fixed footer bar ready for content. We can add any content we want to each of the three columns. But since this is a footer “bar” that is limited to 85 pixels in height, we need to limit the amount of content. For this reason, we will add a small menu with a dynamic logo and 4 menu items in column 1. In column 2, we will add copyright text with a dynamic current year. In column 3, we will add three social media tracking icons.

Add menu to column 1

In column 1, add a menu module.

Select the menu

Then select one of the menus you have already created on your website. Make sure to keep the menu items at 4 or less.

Add site logo as dynamic content

For the logo menu, we will dynamically add the site logo. Click on the “Use dynamic content” icon while hovering over the logo preview area. Then select the Site logo from the drop-down list.

Remove background

Then remove the default menu background so that it is transparent.

Design menu

At this point, we are ready to add some design to the menu. For this design, we’re going to keep it simple and small. Update the following design parameters:

  • Font menu: Overpass
  • Menu text color: # b59c61
  • Image Sepia: 100%
  • Maximum logo height: 50px

Add copyright text to column 2

Once the menu is in place, go to column 2 to add copyright text.

Add a text module

Add a new text module to column 2.

Dynamically add a current date with text before and after

Here we are going to get creative with dynamic content to display the current year in copyright text. This will ensure that the year will be updated automatically for the life of the site.

To do this, click on the “Use dynamic content” icon and select “Current date” from the list.

In the Current Date pop-up window, update the following:

  • Before:
  • 01Copyright ©
  • After:
  • 01| Tous Droits Reservés
  • Date format: custom
  • Custom date format: 20 years

Text formatting

Update the design and text margin as follows:

  • Text font: Overpass
  • Text Color: # b59c61
  • Text alignment: center
  • Margin (phone only): 10 pixels top, 10 pixels bottom

This supports the copyright text.

Add social media follow icons to column 3

In column 3, add a social media tracking module.

Add social networks

On the Content tab, add the necessary social networks to the site. For this design, we use three of them.

Social media tracking settings

Next, update the design settings for all social media tracking icons as follows:

  • Module alignment: right (desktop and tablet), center (phone)
  • Icon Color: # 1a1e36
  • Use custom icon size: YES
  • Icon font size: 16px (desktop and tablet), 14px (phone)

Update social media settings

To update the design of the individual social network icon, open the settings for the first network and update the following:

  • Background Color: #ffffff
  • Padding: 8 pixels right, 8 pixels left
  • Rounded corners: 8px

Read more: How to create a colorful text background scrolling animation with Divi

Extend social media settings to everyone

Then open the additional settings menu for the first array and select ” Extend Element Styles ” from the list. In the Extend Styles pop-up window, choose to extend the styles in ” This Column ” and click Extend. This will extend the design to the rest of the icons in the column.

Final thoughts

Adding a fixed footer bar makes sense in some cases. The height of the bar is small enough not to distract or take up too much space on the mobile. And it gives you the ability to add important CTAs for better conversions and a smoother user experience.

For this design, space at the bottom of the page is created by setting a fixed height for the section and then allowing the fixed line to inherit the height of the section (although it is fixed).

 

For website maintenance service contact us.

Leave a comment

echo "";