Blurb modules are great conceivable possible choices for Divi footers. They can display images or icons in a large number of layouts and so they’ve rather numerous customizations. They’re in particular absolute best for links with icons to create styled bullets. Fortunately, it isn’t tough to create all these links the use of the Divi blurb modules. In this article, we’ll see discover ways to use blurb modules for footer items to your Divi footers.

Preview

Quicker than 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

Proper right here’s the desktop fashion of the footer that we’ll create. We’re the use of blurbs throughout the upper right kind corner to create links.

Phone with Blurb Modules Footer Items

Proper right here’s how the footer with our blurbs will appear on a smartphone.

Download a Divi Footer Template

First, you’ll want a footer template for the Divi Theme Builder. You’ll be capable of create your individual or use one of the vital free footers that Elegant Problems provides throughout the blog. You’ll be capable of to search out them by the use of taking a look the blog for “free footer”. Download and unzip the folder on your computer.

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

Upload Your Divi Footer Template

So as to add your JSON record, cross to Divi > Theme Builder throughout the WordPress dashboard. Select Portability and click on at the Import tab of the modal that opens. Click on on Make a selection File and navigate to the record on your computer and select it. Click on on Import Divi Theme Builder Templates and look ahead to the record to import. Delete the header whilst you don’t want to use it. Click on on Save Changes.

You’re now ready to customize your new Divi footer. You’ll be capable of edit the footer from proper right here on the once more end, otherwise you’ll be ready to select it within the Visual Builder on the front end. I’ll edit the footer on the once more end given that header has a custom designed menu, and it opens throughout the builder by the use of default.

I’m moreover the use of the landing internet web page from the Artificial Intelligence Layout Pack for my internet web page parts. The construction and header each and every have rather numerous design queues to pull from. I in particular identical to the design of the menu throughout the Artificial Intelligence header and footer template. I’ll use all of this to help me design the blurb links throughout the footer.

Use Blurb Modules as Footer Items

I can trade the links throughout the two sections known as What We Do and Assets. This will likely increasingly more get us the links we would really like and highlight them with icons. I can use the main heading and cut back the selection of links. We will be able to style the main one and then clone it to create the rest.

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

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

In any case, delete the text module that comprises the links. We best need the determine module.

Hover over the world you need as a way to upload the module and select the plus icon. Make a selection the blurb module from the tick list.

Set Up the Blurb Module

The blurb module includes a determine, body text, and an image. We’ll use the determine since the link. The body text can be used for short descriptions. I can delete it for this tutorial. For individuals who do want to use it, I love to counsel keeping up the text as transient as conceivable and best the use of a couple of blurbs. As an alternative of the image, we will use an icon.

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

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

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

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

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

• Desktop Image/Icon Width: 20px

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

• Phone Image/Icon Width: 15px

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

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

Add 10px to all 4 aspects of the Image/Icon Padding.

• Image/Icon Padding: 10px (Best, Bottom, Left, Correct)

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

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

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

• Desktop Padding, Left: 14vh

Select the phone icon and add 4vh to the Left Padding. This amount will also be adjusted to fit the duration of your titles.

• Phone Padding, Left: 4vh

Complicated Tab

Next, we’ll add some custom designed CSS to the determine, so it’s centered with the icon. Move to the Complicated tab and add 12px of top padding to the Blurb Title.

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

Copy the Blurb Module

Next, create 3 copies of the blurb module by the use of clicking the Copy Module button 3 times. This will likely increasingly more permit us to make use of blurb modules for the footer items as a substitute of the text links.

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

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

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

• Title: your link determine
• Icon: Single Apparatus
• Title Link URL: your link
• Image/Icon Border Color: #f59910

Open the fourth blurb module and add the link’s determine, select a brand spanking 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 main module.

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

Results

Proper right here’s a take a look at our Divi blurb modules as footer items for each and every the desktop and get in touch with diversifications of my construction.

Desktop with Blurb Modules Footer Items

Proper right here’s how our desktop fashion of the footer was out.

Phone with Blurb Modules Footer Items

Proper right here’s how the footer turns out on a smartphone.

Completing Concepts on How you can Use Blurb Modules Footer Items

That’s our take a look at discover ways to use blurb modules for footer items to your Divi footers. Blurbs are great conceivable possible choices for links. They’re simple to use and so they’ve rather numerous customization possible choices with each and every images and icons. Use the icons with or without borders and lead them to as huge as you need. The icons we’ve used proper right here art work totally with the design of the header menu.

We want to pay attention from you. Have you ever ever used blurbs modules for footer items on your Divi internet web page? Let us know about your experience throughout the comments.

The put up How to Use Blurb Modules as Footer Items with Divi gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more