How to Use Blurb Modules as Footer Items with Divi

by | Dec 19, 2021 | Etcetera | 0 comments

Blurb modules are nice possible choices for Divi footers. They may be able to show pictures or icons in several layouts and they’ve quite a lot of customizations. They’re particularly excellent for hyperlinks with icons to create styled bullets. Thankfully, it isn’t tough to create most of these hyperlinks the usage of the Divi blurb modules. On this article, we’ll see use blurb modules for footer pieces on your Divi footers.

Preview

Ahead of we get began, let’s check out how our footer will glance on a desktop and smartphone.

Desktop with Blurb Modules Footer Pieces

Desktop with Blurb Modules Footer Items

Right here’s the desktop model of the footer that we’ll create. We’re the usage of blurbs within the higher proper nook to create hyperlinks.

Telephone with Blurb Modules Footer Pieces

Phone with Blurb Modules Footer Items

Right here’s how the footer with our blurbs will seem on a smartphone.

Obtain a Divi Footer Template

Download a Divi Footer Template

First, you’ll desire a footer template for the Divi Theme Builder. You’ll be able to create your personal or use one of the crucial unfastened footers that Chic Issues supplies within the weblog. You’ll be able to to find them by means of looking the weblog for “unfastened footer”. Obtain and unzip the folder in your pc.

For my examples, I’m the usage of the free Header and Footer Template for Divi’s Artificial Intelligence Layout Pack.

Add Your Divi Footer Template

Upload Your Divi Footer Template

To add your JSON record, cross to Divi > Theme Builder within the WordPress dashboard. Make a selection Portability and click on the Import tab of the modal that opens. Click on Make a selection Document and navigate to the record in your pc and make a choice it. Click on Import Divi Theme Builder Templates and look ahead to the record to import. Delete the header in case you don’t need to use it. Click on Save Adjustments.

You’re now able to customise your new Divi footer. You’ll be able to edit the footer from right here at the again finish, or you’ll make a choice it inside the Visible Builder at the entrance finish. I’ll edit the footer at the again finish since the header has a customized menu, and it opens within the builder by means of default.

See also  How to Hide Your Header on Specific Pages Using the Divi Theme Builder

Upload Your Divi Footer Template

I’m additionally the usage of the touchdown web page from the Artificial Intelligence Layout Pack for my web page components. The structure and header each have quite a lot of design queues to tug from. I particularly just like the design of the menu within the Synthetic Intelligence header and footer template. I’ll use all of this to lend a hand me design the blurb hyperlinks within the footer.

Use Blurb Modules as Footer Pieces

Use Blurb Modules as Footer Items

I will be able to substitute the hyperlinks within the two sections known as What We Do and Sources. This may increasingly get us the hyperlinks we would like and spotlight them with icons. I will be able to use the primary heading and cut back the selection of hyperlinks. We will be able to taste the primary one after which clone it to create the remainder.

Use Blurb Modules as Footer Items

First, delete the modules in one of the crucial two columns. We’ll flip this right into a two-column structure, so we’ll best want one column for our blurb modules as footer pieces.

Use Blurb Modules as Footer Items

Open the Row settings and make a choice a two-column structure.

Use Blurb Modules as Footer Items

In any case, delete the textual content module that comes with the hyperlinks. We best want the name module.

Use Blurb Modules as Footer Items

Hover over the realm you need so as to add the module and make a choice the plus icon. Make a selection the blurb module from the record.

Set Up the Blurb Module

Set Up the Blurb Module

The blurb module features a name, frame textual content, and a picture. We’ll use the name because the hyperlink. The frame textual content can be utilized for brief descriptions. I will be able to delete it for this instructional. In the event you do need to use it, I like to recommend preserving the textual content as quick as imaginable and best the usage of a few blurbs. Instead of the picture, we will be able to use an icon.

Set Up the Blurb Module

I’ve added the identify of the hyperlink and deleted the frame textual content. Subsequent, make a choice Use Icon below Symbol & Icon. Make a selection your icon inside the icon picker. Upload the URL to the Identify Hyperlink URL box below the Hyperlink phase. Go away the remainder of the hyperlink settings at their defaults. That is all we’ll do in this tab.

  • Identify: your hyperlink identify
  • Icon: Double Wrenches
  • Identify Hyperlink URL: your hyperlink
See also  Understanding WooCommerce Roles and Capabilities

Set Up the Blurb Module

Within the Design tab, input #db0eb7 for the icon colour. Set the Symbol/Icon Placement to Left.

  • Icon Colour: #db0eb7
  • Symbol/Icon Placement: Left

Set Up the Blurb Module

For Symbol/Icon Width, make a choice Desktop and set it to 20px.

  • Desktop Symbol/Icon Width: 20px

Set Up the Blurb Module

Make a selection Telephone below Symbol/Icon Width and set it to 15px.

  • Telephone Symbol/Icon Width: 15px

Set Up the Blurb Module

Set the Symbol/Icon Border Width to 1px and the colour to #39c0ed.

  • Symbol/Icon Border Width: 1px
  • Symbol/Icon Border Colour: #39c0ed

Set Up the Blurb Module

Upload 10px to all 4 facets of the Symbol/Icon Padding.

  • Symbol/Icon Padding: 10px (Best, Backside, Left, Proper)

Set Up the Blurb Module

Scroll right down to Identify Textual content. Set the font to Archivo and the colour to white.

  • Identify Font: Archivo
  • Identify Textual content Colour: #ffffff

Set Up the Blurb Module

Scroll to Spacing and upload 14vh to the Left Padding.

  • Desktop Padding, Left: 14vh

Set Up the Blurb Module

Make a selection the telephone icon and upload 4vh to the Left Padding. This quantity will also be adjusted to suit the duration of your titles.

  • Telephone Padding, Left: 4vh

Complex Tab

Set Up the Blurb Module
Subsequent, we’ll upload some customized CSS to the name, so it’s focused with the icon. Move to the Complex tab and upload 12px of height padding to the Blurb Identify.

  • Complex tab Customized CSS Blurb Identify: padding-top:12px

Replica the Blurb Module

Duplicate the Blurb Module

Subsequent, create 3 copies of the blurb module by means of clicking the Replica Module button thrice. This may increasingly allow us to use blurb modules for the footer pieces instead of the textual content hyperlinks.

Duplicate the Blurb Module

Open the 2d blurb module and upload the hyperlink’s name, make a choice a brand new icon, and upload the URL. Open the Design tab and alter the Symbol/Icon Border Colour to #db0eb7.

  • Identify: your hyperlink identify
  • Icon: Unmarried Wrench
  • Identify Hyperlink URL: your hyperlink
  • Symbol/Icon Border Colour: #db0eb7
See also  How to Create a Sticky Background Mask with Divi

Duplicate the Blurb Module

Open the 3rd blurb module and upload the hyperlink’s name, make a choice a brand new icon, and upload the URL. Open the Design tab and alter the Symbol/Icon Border Colour to #f59910.

  • Identify: your hyperlink identify
  • Icon: Unmarried Tools
  • Identify Hyperlink URL: your hyperlink
  • Symbol/Icon Border Colour: #f59910

Duplicate the Blurb Module

Open the fourth blurb module and upload the hyperlink’s name, make a choice a brand new icon, and upload the URL. Open the Design tab and alter the Symbol/Icon Border Colour to #db0eb7. It’s already set to this colour since you’ve cloned the primary module.

  • Identify: your hyperlink identify
  • Icon: Double Gears
  • Identify Hyperlink URL: your hyperlink
  • Symbol/Icon Border Colour: #db0eb7

Effects

Right here’s a take a look at our Divi blurb modules as footer pieces for each the desktop and make contact with variations of my structure.

Desktop with Blurb Modules Footer Pieces

Desktop with Blurb Modules Footer Items

Right here’s how our desktop model of the footer grew to become out.

Telephone with Blurb Modules Footer Pieces

Phone with Blurb Modules Footer Items

Right here’s how the footer seems on a smartphone.

Finishing Ideas on The way to Use Blurb Modules Footer Pieces

That’s our take a look at use blurb modules for footer pieces on your Divi footers. Blurbs are nice possible choices for hyperlinks. They’re easy to make use of and they’ve quite a lot of customization choices with each pictures and icons. Use the icons without or with borders and cause them to as massive as you need. The icons we’ve used right here paintings completely with the design of the header menu.

We need to pay attention from you. Have you ever used blurbs modules for footer pieces in your Divi website online? Tell us about your enjoy within the feedback.

The submit How to Use Blurb Modules as Footer Items with Divi seemed first on Elegant Themes Blog.

0 Comments

Submit a Comment