Site icon Hip-Hop Website Design and Development

How to Use Blurb Modules as Footer Items with Divi

Pixeldust WordPress Developer

Blurb modules are great choices for Divi footers. They can display images or icons in different layouts and they have lots of customizations. They’re especially ideal for links with icons to create styled bullets. Fortunately, it isn’t difficult to create these types of links using the Divi blurb modules. In this article, we’ll see how to use blurb modules for footer items in your Divi footers.

Preview

Before we get started, let’s take a look at how our footer will look on a desktop and smartphone.

Desktop with Blurb Modules Footer Items

Here’s the desktop version of the footer that we’ll create. We’re using blurbs in the upper right corner to create links.

Phone with Blurb Modules Footer Items

Here’s how the footer with our blurbs will appear on a smartphone.

Download a Divi Footer Template

First, you’ll need a footer template for the Divi Theme Builder. You can create your own or use one of the free footers that Elegant Themes provides in the blog. You can find them by searching the blog for “free footer”. Download and unzip the folder on your computer.

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

Upload Your Divi Footer Template

To upload your JSON file, go to Divi > Theme Builder in the WordPress dashboard. Select Portability and click the Import tab of the modal that opens. Click Choose File and navigate to the file on your computer and select it. Click Import Divi Theme Builder Templates and wait for the file to import. Delete the header if you don’t want to use it. Click Save Changes.

You’re now ready to customize your new Divi footer. You can edit the footer from here on the back end, or you can select it within the Visual Builder on the front end. I’ll edit the footer on the back end because the header has a custom menu, and it opens in the builder by default.

I’m also using the landing page from the Artificial Intelligence Layout Pack for my page elements. The layout and header both have lots of design queues to pull from. I especially like the design of the menu in the Artificial Intelligence header and footer template. I’ll use all of this to help me design the blurb links in the footer.

Use Blurb Modules as Footer Items

I will replace the links in the two sections called What We Do and Resources. This will get us the links we want and highlight them with icons. I will use the first heading and reduce the number of links. We will style the first one and then clone it to create the rest.

First, delete the modules in one of the two columns. We’ll turn this into a two-column layout, so we’ll only need one column for our blurb modules as footer items.

Open the Row settings and select a two-column layout.

Finally, delete the text module that includes the links. We only need the title module.

Hover over the area you want to add the module and select the plus icon. Choose the blurb module from the list.

Set Up the Blurb Module

The blurb module includes a title, body text, and an image. We’ll use the title as the link. The body text can be used for short descriptions. I will delete it for this tutorial. If you do want to use it, I recommend keeping the text as short as possible and only using a couple of blurbs. In place of the image, we will use an icon.

I’ve added the name of the link and deleted the body text. Next, select Use Icon under Image & Icon. Select your icon within the icon picker. Add the URL to the Title Link URL field under the Link section. Leave the rest of the link settings at their defaults. This is all we’ll do on this tab.

In the Design tab, enter #db0eb7 for the icon color. Set the Image/Icon Placement to Left.

For Image/Icon Width, select Desktop and set it to 20px.

Select Phone under Image/Icon Width and set it to 15px.

Set the Image/Icon Border Width to 1px and the color to #39c0ed.

Add 10px to all four sides of the Image/Icon Padding.

Scroll down to Title Text. Set the font to Archivo and the color to white.

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

Select the phone icon and add 4vh to the Left Padding. This number can be adjusted to fit the length of your titles.

Advanced Tab


Next, we’ll add some custom CSS to the title, so it’s centered with the icon. Go to the Advanced tab and add 12px of top padding to the Blurb Title.

Duplicate the Blurb Module

Next, create three copies of the blurb module by clicking the Duplicate Module button three times. This will let us use blurb modules for the footer items in place of the text links.

Open the second blurb module and add the link’s title, select a new icon, and add the URL. Open the Design tab and change the Image/Icon Border Color to #db0eb7.

Open the third blurb module and add the link’s title, select a new icon, and add the URL. Open the Design tab and change the Image/Icon Border Color to #f59910.

Open the fourth blurb module and add the link’s title, select a new icon, and add the URL. Open the Design tab and change the Image/Icon Border Color to #db0eb7. It’s already set to this color because you’ve cloned the first module.

Results

Here’s a look at our Divi blurb modules as footer items for both the desktop and phone versions of my layout.

Desktop with Blurb Modules Footer Items

Here’s how our desktop version of the footer turned out.

Phone with Blurb Modules Footer Items

Here’s how the footer appears on a smartphone.

Ending Thoughts on How to Use Blurb Modules Footer Items

That’s our look at how to use blurb modules for footer items in your Divi footers. Blurbs are great choices for links. They’re simple to use and they have lots of customization options with both images and icons. Use the icons with or without borders and make them as large as you want. The icons we’ve used here work perfectly with the design of the header menu.

We want to hear from you. Have you used blurbs modules for footer items on your Divi website? Let us know about your experience in the comments.

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