Sélectionner une page

How to Use Blurb Modules as Footer Items with Divi


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

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

Phone with Blurb Modules Footer Items

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

Download a Divi Footer Template

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

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.

Upload Your Divi Footer Template

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

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.

Use Blurb Modules as Footer Items

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.

Use Blurb Modules as Footer Items

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

Use Blurb Modules as Footer Items

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

Use Blurb Modules as Footer Items

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

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.

Set Up the Blurb Module

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.

  • Title: your link name
  • Icon: Double Wrenches
  • Title Link URL: your link

Set Up the Blurb Module

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

  • Icon Color: #db0eb7
  • Image/Icon Placement: Left

Set Up the Blurb Module

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

  • Desktop Image/Icon Width: 20px

Set Up the Blurb Module

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

  • Phone Image/Icon Width: 15px

Set Up the Blurb Module

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

  • Image/Icon Border Width: 1px
  • Image/Icon Border Color: #39c0ed

Set Up the Blurb Module

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

  • Image/Icon Padding: 10px (Top, Bottom, Left, Right)

Set Up the Blurb Module

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

  • Title Font: Archivo
  • Title Text Color: #ffffff

Set Up the Blurb Module

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

  • Desktop Padding, Left: 14vh

Set Up the Blurb Module

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

Set Up the Blurb Module
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.

  • Advanced tab Custom CSS Blurb Title: padding-top:12px

Duplicate the Blurb Module

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.

Duplicate the Blurb Module

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.

  • Title: your link name
  • Icon: Single Wrench
  • Title Link URL: your link
  • Image/Icon Border Color: #db0eb7

Duplicate the Blurb Module

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.

  • Title: your link name
  • Icon: Single Gear
  • Title Link URL: your link
  • Image/Icon Border Color: #f59910

Duplicate the Blurb Module

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.

  • Title: your link name
  • Icon: Double Gears
  • Title Link URL: your link
  • Image/Icon Border Color: #db0eb7

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

Desktop with Blurb Modules Footer Items

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

Phone with Blurb Modules Footer Items

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.



Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.