Hey there Divi people! This is John from Divi Ready Themes. In this tutorial, I’m going to show you how I came up with a solution to the issue of needing 2 different logos on 2 different pages.

When I created the Campaignz Political Divi Layout, I wanted the demo to show both the Democratic and Republican color schemes. The home page lands on the Democratic Divi layout theme, with the Democratic Logo. From there you can go to the Republican theme page to view that layout. The problem was, well not really a problem per se, more like a design “I want it” – the problem was when you were taken to the Republican page – the logo remained Democratic.

So I did a little research and found a tiny little piece of code that could do the job I wanted it to do. You are going to need 3 things:

  • 2 logos – make them the same size.
  • The PageID# of the page you want the second logo to appear on.
  • CSS Code (below)

/* Logo Change Page */

.page-id-PAGEID# img#logo {
content: url(“http://yourwebsite.com/logoimage.png”);

Okay – so lets start with the 2 logos – These are the logos I created for the Campaignz Divi Layout. I did them in Photoshop, with a transparent background – saved as PNG files. You can use whatever you want, just make sure it is seamless with the rest of the header.

The next thing we need is our PageID# of the page where you want the second logo to appear. Navigate to your Pages listing. Hover your mouse pointer over the page name and at the very bottom of the screen, you will see the PageID# displayed. For use in this tutorial, the PageID# is 155.

Upload your second logo image to your Media Library. Once uploaded, click on the image thumbnail. You will be brought to the Attachment Details Page. Here you will find the image URL that you are going to need for your CSS.

Okay, now that we have gathered everything we need, let’s go to our Custom CSS section and put our code in, replacing the information with the specs we gathered. My code will look like the CSS below:

/* Logo Change Page */

.page-id-155 img#logo {
content: url(“http://campaignz.divireadythemes.com/wp-content/uploads/2018/06/political-REP.png”);

Let’s head over to our Divi Theme Options, scroll to the bottom of the page and insert your CSS in the Custom CSS section. Make sure that your PageID and Image URL are in place.

Now all we have to do is load the site up, head to the page where we wanted the second logo and low and behold – there it is:

I hope you have found this tutorial helpful. Share it with your friends. Make sure and check back with me for future Divi tips and tutorials. And don’t forget to visit my shop page for some of the best Divi Child Themes and Divi Layouts.


Subscribe and Save 25%

Subscribe to our Mailing List and get discount coupons, new Divi templates, freebies, Video Tutorials, articles and more - sent right to your inbox!

You have Successfully Subscribed!

Pin It on Pinterest