Methods to Upload a Dynamic Emblem to Your Divi Footer

by | Oct 31, 2021 | Etcetera | 0 comments

It’s easy in an effort to upload your internet web page’s logo to any footer made with the Divi Builder. On the other hand, for many who most simple display it as an image, you’d want to edit your footer each and every time you changed your logo. The solution is to use a dynamic logo. A dynamic logo changes to test the internet web page’s logo mechanically. In this article, we’ll see add a dynamic logo to your Divi footer.

Let’s get started.

1. Create New Footer Template

Go to Divi Theme Builder & Add New Global or Custom designed Footer

It doesn’t make any difference for many who assemble the footer from scratch or download probably the most necessary free templates for this tutorial. You’re going to most simple want to make sure to include an image module. We’ll use this image module to connect to the dynamic logo.

Download a Footer Template

For my examples, I’m the usage of the free footer for Divi’s Immigration Lawyer Layout Pack. The Chic Topic issues blog incorporates numerous free footer templates. To find them throughout the blog by way of entering “free header & footer” throughout the blog’s search box. Download the template to your laptop and unzip the file. You’ll want to upload the JSON file, no longer the zipped file.

Upload the Footer Template

Upload the Footer Template

For this tutorial, we’ll use the Divi Theme Builder to make use of the footer to each and every internet web page and submit. You’ll be capable of upload the template to the Theme Builder or use a template from your Divi Library. So as to add to the Theme Builder, transfer to the Divi Theme Builder throughout the Divi menu and make a selection the Portability selection throughout the upper correct corner. That’s the icon with the up and down arrows.

See also  The best way to Blank Up Your E mail Record With Those 5 Pointers

Upload the Footer Template

You’ll then see a modal with quite a lot of possible choices. Choose the Import tab throughout the modal. Navigate to and make a selection the JSON file from your laptop. Choose any of the decisions you want. I’m leaving it at the default possible choices. Next, make a selection the import button. Sit up for the import to finish.

Upload the Footer Template

Next, delete the header file for many who don’t want to use it and click on on to save lots of loads of your changes. You right now have a global footer. Should you’ve used the template that I used, you’ll have a static logo already in place. We’ll want to make it dynamic. If your template doesn’t include an emblem, simply add an image module.

Upload the Footer Template

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

Industry Means: Loading from the Divi Library

Alternate Method: Loading from the Divi Library

Alternately, you’ll be capable of upload the structure to your Divi Library. Then, throughout the Divi Theme Builder, you’ll be capable of click on on in an effort to upload a global footer and make a selection it from your library.

Alternate Method: Loading from the Divi Library

Whilst you click on on in an effort to upload a global footer, you’ll be in a position to choose to build the global footer from scratch or make a selection it from the library.

2. Add a Dynamic Logo

Add a Logo

Add a Logo

If the template you’re the usage of does no longer include an emblem, add an image module where you want the logo to seem. Go away Open in Lightbox disabled (that’s the default surroundings). For the URL, you’ll be capable of pass away it blank or add your homepage URL to make it clickable.

  • Open in Lightbox = No
  • Image Link URL = Go away blank or add homepage URL
See also  20 Pictures That Will Make You Fall In Love Once more

Add a Logo

Open the Design tab. Underneath spacing, pass away Show Space Underneath the Image enabled (that’s the default surroundings). Underneath Margin, add 50px to the bottom margin.

  • Show Space Underneath the Image = Certain
  • Margin – Bottom = 50px

Dynamic Image Settings

Dynamic Image Settings

The structure that I’m the usage of already incorporates an emblem image, so I can customize this image module. It’s prepare with the identical adjustments we spotted throughout the previous segment.

Dynamic Image Settings

First, we’ll want to delete the image that it already has. Hover over the image and click on at the rubbish can icon when it seems that. The reset icon to its correct will also art work.

Dynamic Image Settings

Now, when you hover over the image space, you’ll see the icon to choose dynamic content material subject matter. Choose this icon.

Dynamic Image Settings

A modal will appear with numerous possible choices that pertain to your content material subject matter. Choose the third selection from the perfect: Site Logo.

  • Site Logo

Dynamic Image Settings

Your internet web page’s logo will then display throughout the image module. It’s that easy.

3. Save All Template and Theme Builder Changes

Whilst you’ve modified the logo with a dynamic logo, you’ll want to save the changes for it to take affect all through your internet web page.

Save All Template and Theme Builder Changes

Click on at the Save button throughout the Visual Builder menu and then click on at the X throughout the upper correct corner to head out the builder. Now, any logo that’s set since the internet web page’s logo throughout the Divi Theme Possible choices will mechanically display in this image module.

Preview Your Dynamic Logo

Proper right here’s how the dynamic logo appears to be on desktop and mobile presentations. I most simple had to industry the logo throughout the Divi Theme Settings computer screen.

See also  11 Suggestions for Entrepreneurs in 2022 [+More Data from Our Marketing Industry Survey]

Desktop

Desktop

Proper right here’s how the dynamic logo appears to be on a desktop. The logo throughout the footer fits the logo throughout the header.

Cellular

Mobile

Proper right here’s how the dynamic logo appears to be on mobile.

Changing the Site’s Logo

Changing the Site’s Logo

To use a distinct logo in your footer, simply industry the internet web page’s logo. Go to the Divi Theme Possible choices throughout the Divi menu. Click on at the Upload button to select a brand spanking new logo and save the changes. Your new internet web page logo will industry, and your footer’s logo will are compatible it.

  • Divi > Theme Possible choices > Fundamental tab > Logo
  • Upload new logo

Completing Concepts

That’s our take a look at add a dynamic logo to your Divi footer. And no longer the use of a dynamic logo, you’d have to switch the footer’s logo manually if you want to have it to test the internet web page’s logo. A dynamic logo fits the internet web page’s logo mechanically. We will be able to industry the logo in one place, and it’s mechanically applied to the footer of each and every internet web page or submit that uses a dynamic logo.

We want to concentrate from you. Do you employ dynamic logos in your Divi footers? Let us know about it throughout the comments beneath.

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

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment