How to Add a Dynamic Logo to Your Divi Footer

by | Oct 31, 2021 | Etcetera | 0 comments

It’s simple so as to add your web page’s emblem to any footer made with the Divi Builder. Then again, if you happen to handiest show it as a picture, you’d must edit your footer each and every time you modified your emblem. The answer is to make use of a dynamic emblem. A dynamic emblem adjustments to compare the web page’s emblem mechanically. On this article, we’ll see easy methods to upload a dynamic emblem in your Divi footer.

Let’s get began.

1. Create New Footer Template

Move to Divi Theme Builder & Upload New International or Customized Footer

It doesn’t make any distinction if you happen to construct the footer from scratch or obtain one of the vital unfastened templates for this instructional. You’ll handiest want to make sure you come with a picture module. We’ll use this symbol module to hook up with the dynamic emblem.

Obtain a Footer Template

For my examples, I’m the usage of the free footer for Divi’s Immigration Lawyer Layout Pack. The Sublime Subject matters weblog accommodates numerous unfastened footer templates. In finding them within the weblog via coming into “unfastened header & footer” within the weblog’s seek field. Obtain the template in your laptop and unzip the document. You’ll want to add the JSON document, now not the zipped document.

See also  How Divi Dash Simplifies WordPress Theme and Plugin Updates

Add the Footer Template

Upload the Footer Template

For this instructional, we’ll use the Divi Theme Builder to use the footer to each and every web page and submit. You’ll be able to add the template to the Theme Builder or use a template out of your Divi Library. To add to the Theme Builder, pass to the Divi Theme Builder within the Divi menu and choose the Portability possibility within the higher proper nook. That is the icon with the up and down arrows.

Upload the Footer Template

You’ll then see a modal with a number of choices. Make a selection the Import tab within the modal. Navigate to and make a selection the JSON document out of your laptop. Make a selection any of the choices you need. I’m leaving it on the default choices. Subsequent, choose the import button. Look ahead to the import to complete.

Upload the Footer Template

Subsequent, delete the header document if you happen to don’t wish to use it and click on to save lots of your adjustments. You presently have a world footer. When you’ve used the template that I used, you’ll have a static emblem already in position. We’ll want to make it dynamic. In case your template doesn’t come with a symbol, merely upload a picture module.

Upload the Footer Template

Subsequent, click on the Edit icon at the footer to open the template.

Exchange Way: Loading from the Divi Library

Alternate Method: Loading from the Divi Library

Alternately, you’ll add the format in your Divi Library. Then, within the Divi Theme Builder, you’ll click on so as to add a world footer and choose it out of your library.

Alternate Method: Loading from the Divi Library

While you click on so as to add a world footer, you’ll make a selection to construct the worldwide footer from scratch or choose it from the library.

2. Upload a Dynamic Emblem

Upload a Emblem

Add a Logo

If the template you’re the usage of does now not come with a symbol, upload a picture module the place you need the brand to look. Go away Open in Lightbox disabled (that is the default surroundings). For the URL, you’ll go away it clean or upload your homepage URL to make it clickable.

  • Open in Lightbox = No
  • Symbol Hyperlink URL = Go away clean or upload homepage URL
See also  9 Web Design Best Practices In 2024

Add a Logo

Open the Design tab. Underneath spacing, go away Display House Underneath the Symbol enabled (that is the default surroundings). Underneath Margin, upload 50px to the ground margin.

  • Display House Underneath the Symbol = Sure
  • Margin – Backside = 50px

Dynamic Symbol Settings

Dynamic Image Settings

The format that I’m the usage of already accommodates a symbol symbol, so I can customise this symbol module. It’s arrange with the similar changes we noticed within the earlier segment.

Dynamic Image Settings

First, we’ll want to delete the picture that it already has. Hover over the picture and click on the garbage can icon when it seems that. The reset icon to its proper will even paintings.

Dynamic Image Settings

Now, while you hover over the picture house, you’ll see the icon to make a choice dynamic content material. Make a selection this icon.

Dynamic Image Settings

A modal will seem with numerous choices that pertain in your content material. Make a selection the 3rd possibility from the highest: Web page Emblem.

  • Web page Emblem

Dynamic Image Settings

Your web page’s emblem will then show inside the symbol module. It’s that straightforward.

3. Save All Template and Theme Builder Adjustments

Whenever you’ve changed the brand with a dynamic emblem, you’ll want to save the adjustments for it to take impact throughout your web site.

Save All Template and Theme Builder Changes

Click on the Save button within the Visible Builder menu after which click on the X within the higher proper nook to go out the builder. Now, any emblem that’s set because the web page’s emblem within the Divi Theme Choices will mechanically show on this symbol module.

Preview Your Dynamic Emblem

Right here’s how the dynamic emblem seems to be on desktop and cellular monitors. I handiest needed to alternate the brand within the Divi Theme Settings display.

See also  10 Best WordPress Hosting Options in 2023 (Handpicked)

Desktop

Desktop

Right here’s how the dynamic emblem seems to be on a desktop. The emblem within the footer suits the brand within the header.

Cell

Mobile

Right here’s how the dynamic emblem seems to be on cellular.

Converting the Web page’s Emblem

Changing the Site’s Logo

To make use of a special emblem on your footer, merely alternate the web page’s emblem. Move to the Divi Theme Choices within the Divi menu. Click on the Add button to choose a brand new emblem and save the adjustments. Your new web page emblem will alternate, and your footer’s emblem will fit it.

  • Divi > Theme Choices > Common tab > Emblem
  • Add new emblem

Finishing Ideas

That’s our take a look at easy methods to upload a dynamic emblem in your Divi footer. And not using a dynamic emblem, you’d have to modify the footer’s emblem manually if you need it to compare the web page’s emblem. A dynamic emblem suits the web page’s emblem mechanically. We will alternate the brand in a single position, and it’s mechanically implemented to the footer of each and every web page or submit that makes use of a dynamic emblem.

We wish to pay attention from you. Do you utilize dynamic emblems on your Divi footers? Tell us about it within the feedback under.

The submit How to Add a Dynamic Logo to Your Divi Footer seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!