Hey Divi People! This is John from Divi Ready Themes and in today’s tutorial, I will be showing you how to use ThemePunche’s Slider Revolution in your Divi Theme Template.

As of today,  Revolution Slider is the #1 selling slider plugin on the market. With almost 300k sales of the plugin. That means a whole lot of websites are using the plugin.

This video will be more a slider revolution tutorial then it is a Divi tutorial – but you will see how well they play together while building a beautiful divi slider.

So, in this video, we will be creating a slider in Slider Revolution and inserting it into our Divi Layout via the Code Module.  This will be the finished slider. This is what we are aiming for.

Let’s get started.

Before we do anything, we are going to need 3 images. Let’s go over to Photoshop. As you can see I have 3 images; A Laptop, an iPad and an iPhone. These are all transparent PNG files – we are going to need transparency in our slider.

Let’s head over to Slider Revolution.

This is the Slider Revo main screen. Here we can create a new slider, add a slider from a template or import a slider. I will be adding a link to this Divi Slider Layout that I will be creating. You can use it as a guide or starting point in your own project.

So, let’s start a new Slider.

Once in the slider settings, you have an array of different sliders you can set up. For this Demo, we will be using the default slider.

Next, we will give our slider a name. We’ll call it Home Page Slider. Then we’ll give it an alias, home-page-slider and you’ll see that it automatically generates the shortcode you will put into your code module.

Next is our Slide Layout. This is how it covers the screen. I usually just choose Full Width, because Slider Revolution is good about resizing to different screens. You can choose Auto or even Full-Screen layouts.

In the desktop section, we are going to enter our Layer Grid Size. I’m going to set it at 1440px by 600px. Leave all the other grid sizes on Auto. You can come back to this section once the slider is created and fool around with different sizes, so you can get the slider revolution responsive look you want on different mobile devices.

To the right, we have a whole slew of options – but for now, we will keep it simple. In the General Settings, you can set things like Stop Slide on Hover, shuffle. In the Default tab, you select the Slide duration other options. Navigation lets you choose your icons for navigating the slider. We are going to leave everything as is because these are the default settings. We can change those options within each individual slider.

Let’s go ahead and Save Settings.

How to Create a Beautiful Header Using Slider Revolution and Divi
Share on X

Now let’s go to the Slider Editor. We are not going to worry about any of these extra settings. We want to go down and make sure our slider background is set to transparent. Now let’s go down to our slider window. This is where the slide is created. Basically, what you are going to do is create the finished slide first – and then add the animation.

Down below that we have the timeline. For any of you old timers, it’s a little reminiscent of the original Macromedia Flash. Keyframes and tweening and all that. I’ll show you how that works after we add our images.

But let’s do this first. I want to set up the page with the slider code, so I can keep going back to see how it is working. On the page lets start the Divi Visual Builder. Let’s add a full-section, full-screen code, and enter the shortcode for our slider. Now we can jump back every now and then to see how things are going.

Use Slider Revolution with our Premium Divi Layouts!
Share on X

Okay, so back in the Slider window. We are going to add a layer, image, and grab our laptop image. We are going to resize this and place it where we want it to end up and the end of our animation. With the image selected, we will set the animation to Long from Right, and set the easing to Sine.easeout. You can see the animation as we are changing the settings.

Now let’s go back and add our iPad. Click Add Layer, image and grab the iPad image. We are going to do the same exact thing. Resize and place it where you want it to end up. Okay now that we have that in place, let’s add the iPhone. Resize it and place it. Add the same animations.

Next, we will add some text. We are going to add a layer, text/HTML and I’m going to put BEAUTIFUL DIVI LAYOUTS. Let’s set the color to a dark gray, let’s set the font size to 70, the line height to 75 and a weight of 300. Let’s add another line of text, I’ll put WordPress, HTML, CSS Divi. Lastly, we are going to add a button. Just like Divi, Slider Revolution lets you style your buttons – although not to the extent that the Divi Button Module has – but good enough.

Now we are going to go back and add animation to the text and button. We are basically going to be using the same exact settings – only we will be coming in from the left. Since we are right on the edge, we will use Short from Left. Save everything and let’s go see what we have.

Lastly, we have to set the timeline. We are going to set the text to come out first. As you can see here, each asset has its own layer in the timeline. If we drag these boxes, we can set when it will start and how long the animation takes. So we’ll set the text to come one after another with a tiny delay. Then, just as the button slides out we start the laptop, then the iPad and lastly the iPhone. Let’s jump back to our Divi layout page and give it a refresh.

That looks pretty good.

Now to give it a little pizazz. I’m going to add a regular section with one regular row. Click the gear icon and change the background color to blue. Now we go into Design, and Spacing and give it a negative margin of around 200 – 225px. This gives the entire slider a very sleek look.

So there you go. A beautiful slider made even better with a little Divi touch.

I guess that’s it for the video. Don’t forget to check out our online shop for the best Premium Divi Child Themes and Divi Layouts at divireadythemes.com. Subscribe and save 25%.

Keep Me Notified!

Join the Divi Ready newsletter and receive free resources, tutorials, special offers and promotions directly to your inbox.

Sign Me Up!

You have Successfully Subscribed!

If you liked this video and want to see more Slider Revolution and Divi tutorials, let me know down in the comments – and don’t forget to click the subscribe button.

This has been John, from Divi Ready Themes – and I’ll catch you on the next video.

DOWNLOAD THE DRT SAMPLE SLIDER HERE

Hey there Divi People, this is John from Divi Ready Themes and in today’s video we’re gonna be giving you a preview a little walkthrough of our newest Divi layout kit Legalese. This is our Divi layout kit for anything legal if you have a law firm a lawyer an attorney anything legal that needs a website this one will cover it.

The Last Divi Legal Layout Theme Template You Will Ever Need! Click To Tweet

So what I’m going to do is I’m going to go through the entire site on the regular side with the visual builder not loaded and then we’re going to go through the site on the Divi Builder side and I can show you exactly how it was built and what can be changed and how you can customize it to your own needs.

Okay so let’s go back to the main site and as you can see here it starts off with a picture of a nice woman, looks very professional. “We’re Here to Help” and this button here is for your free case evaluation, zips you down to the form on the page.  These are several seals, lawyers seals that I found – of course you have to put whatever seals that your company has been awarded.

So let’s go through each one of the different sections. Let’s first start with Lawyers. The Lawyer section here you have pictures of all your lawyers, “Only the best lawyers work here” and again a button to free consultation.

If we go to case news, this is a good spot for any winnings that the lawyer has done, any monies that he’s collected for his clients – anything that would be newsworthy

Next section would be the areas. One is practice areas and that shows exactly what the lawyer firm that you’re creating the website for does. This one does personal injury lawyers, family lawyers and criminal defense lawyers, and if we go back to areas.  Areas served then this can be your state’s your counties. Everything can be changed here.

Case evaluation is spot where the clients coming in for the help can fill out the form here, gives all the information that he needs to the lawyer and sends it in.

In the news area can be tied into a blog section, something like that if you want – any kind of any kind of newsworthy stories you want to put there.

Legaleze – Brand New Divi Layout Pack for Legal Teams, Lawyers and Attorneys. Click To Tweet

Then you’ve got the contact us area which has a couple of lawyer seals here and then you are in your contact information the address the phone number links in and a way to sign up for the newsletter.

Okay let’s jump over to the Divi Builder side and I’ll show you exactly what can be changed. You’ll notice first thing when you go into this that some of the things look like they’re out of whack but this is because I’m using negative margins so don’t mess around with any of the things that look out of place – they all go into place once you’ve got the site loaded.

This first section here is a regular Divi standard header section. If we click on the gear icon you can see that you can change the text here change whatever text you want down on the bottom here, in the background here the  picture of the woman can be changed to whatever you need.

The free case evaluation is just a button that shoots you down to the form down the page. Right here this next section, the the latest case news this is just a left aligned blog module and you will find that the CSS code in your custom CSS once you upload this theme. This is just a good spot for people to come in and put in latest case news. It pulls from a blog entry. So each one of these are separate blog entries and I’ve just done one with news post number is two for this column and this one here is also news with just two post columns and I’ve set the number I think it is on this one here so you don’t get the same posts.

Okay next section is, this is a spot for a client story if a client wants to tell the story of how well the lawyer helped. Little hover effect here is done with – actually put out a video a tutorial on how to achieve this this hover effect so I’ll put a link in the video transcription to that video so you can learn how to do.

The next section down here is just the regular slider section I’ve got half the slider here which changes the pictures of the lawyers and you’ve got your text here which can be changed to whatever you want it to be. Like I said this is just a regular slider module, and I’ve got two sliders on there. If you look back here you can change the actual pictures here so the first set of lawyers and then the second level says second set of lawyers.

This next section here is a quote from one of your clients here, and this is where the clients would enter all their information, name, address, email, ever been present represented in court before and discuss your case – and that’ll get sent off to the lawyer

The next section here is your practice areas – this is just a regular text section here this can be changed to whatever you want it to be – colors can be changed. These are just different text modules here or personal injury lawyers families shows all the practice areas that are covered.

This next section here the “in the news section” is just a regular image module here you can change and  this is just like a regular blurb section – yes so that becomes linkable, so that’s how this section was created

Here a row of buttons here with a negative margin brings them up on top over here you can see that if we go into the design we go into spacing you see it’s got a negative margin of 31 which brings it on top of the Divi blurb module and gives it a nice look.

This next section here is your “area served.” This one can be changed – this is just a regular image and if we click on it you can see that you can change your state to whatever you want it to be. These are just regular bar text modules.

Next one here is New York personal attorneys – this will tell us a little bit of story about your client a little excerpt there and more stuff about your clients.

Down below, I think this is just one image – yeah just one image here with all the seals here – this is a transparent PNG. file that’s how that was created.

Then you come down here-  this is a custom global footer, it’s not a regular footer, so you can copy this onto any page you want to it’s much easier to configure.

And down here I’ve included all the information and all the links and a way to join the newsletter.

And as you see that is about it on that. So go back to the regular site here you’ll see whenever you’ve got a really long site you should always include a “back to the top” button it makes it much easier for your visitors to get back to the top and they don’t get angry.

Okay, I think that’s it for the video, I just want to remind you guys that we have our new layouts out there now one for MEDz which is a medical Divi layout pack. I’ve got Artisans which is a restaurant, a beautiful Divi restaurant layout kit – this one’s actually a Divi child theme. And if we go to this one here, this is our latest release – this is Tattooz. This is for any tattoo parlor, this is one of my favorite designs we’ve done – not because of the beautiful woman here but because of the way the background flows and I love tattoos and artists and stuff like that.

Divi Ready Themes – Premium Divi Child Themes and Divi Layouts Click To Tweet

So that’s another one of our new Divi templates so make sure you check that out. I’ll make sure I got all the links and everything down below.

I think that’s it for today. I hope you liked the video – if you did like it make sure you subscribe below and like I said, I’ll include links to all the different areas that I covered and I’ll include links to the new the new layout kits that we have.

This has been John from Divi Ready Themes and I will catch you on the next video!

Links:

Legaleze Divi Layout Kit:

Legal Lawyer Divi Theme Layout

 MEDz Divi Child Theme

MEDZ Divi Child Theme

 Tattooz Divi Layout Kit:

Tattooz Divi Tattoo Shop Layout

 Video Tutorial: How to Create Custom Divi Section Hover Effects:

How to Create Divi Section Hover Effects

Video Transcription:

Hello Divi People, this is John from Divi Ready Themes and in today’s video I’m gonna be giving you a little walk through, a little preview of our latest child theme called MEDz. MEDz is a medical doctor small doctor’s office medical professional psychiatrist anything along the medical fields this website can be used for.

Now I’m gonna go through the website on the side here where we’re not in the visual builder and then I’ll go through it on the visual Builders side and you can see how things were made. Okay let’s start at the top here. First thing I want to say is that when you’re using Divi it’s very easy to create those huge, you know image intense flashy graphics animations – but not everybody’s gonna want that and I think a doctor’s office is pretty much not going to want that. Their patients are coming in to get information about their office, get the information they need to call or make an appointment and get out. I don’t think that would be appropriate for this kind of site, so I kept it kind of simple.

Divi Medical Layout. A customized Divi layout that is perfect for small doctor's offices and other medical professionals. Save 25% when you subscribe today!
Share on X

If we go here to the top first thing a visitor is going to see is an email to get in touch with the doctor’s office, a phone number which is most important and a patient portal. A lot of doctors offices have patient portals now where they can check on you know their histories and stuff like that. You can tie this into that into any patient portal you want to.

Next thing we have here is a nice friendly face well not exactly friendly but she looks serious, and here we’ve got our logo we’ve got our first our first tagline than our second tagline then a register with us button.

The next section we have here are the services that this particular doctor’s office might provide ambulatory vaccinations surgery physicians and you’ll see those appear down the page as we go down. Next section here is a little bit about us little image a little accordion.

This is where you can have a nice picture of the doctor’s office that you’re designing at the moment. This one here is another row of tests here.

So let’s jump over to the Divi Builder side and I’ll show you how most of this was put together. Okay so here we are. As I explained before this is a secondary menu and these icons are controlled by little CSS code which you’ll find in the CSS editor. These are just regular links from the menu you know you can change the menu color and this is our logo.

First section here is just a regular section and if I go into the properties of this section go to the background you see that’s where we have a picture of the nurse and that picture can be changed. This section right here is a little a text module which includes our logo anything else we need in here and this is just a button module that’s been modified to match the site.

The next section is the services section and you can see here that we have these nice bold icons. These are not elegant themes icons, this site is tied into fonts awesome and the only thing you really need to do I’m gonna jump over to the theme options. If we go into our Divi options and we go into integration font awesome has a little bit of code that you’re gonna plug into your header and this allows us to plug in those beautiful icons anywhere we want to on any page any widget that we want. Just need this code in there first and then we’re able to do these icons.

MEDz: The ultimate Divi Medical Layout Theme for medical professionals.
Share on X

I’ll show you how those are done – each one of these sections is a blurb section and if I go into the code you’ll see right here that we can’t really see anything here it’s here but it’s colored white so that’s why we can’t see it but if we go into the part here you’ll see I have a little line of code here which is gonna pull up that font awesome code there.  If we go to font awesome really quick they have a whole gallery of icons that you can choose from.  So let’s say that you wanted an address book icon you’d go into the address book and here it gives you the code you just copy that code go back to your page. Let’s plug it in right here I’m just going to do it real quick and we’re going to take it out so plug that little piece of code in here and you’ll see that our ambulance change to our address book.

So we’re gonna go ahead and not save this and that’s how that’s created.  A little bit of text the hover effect is accomplished by a little CSS code then for a little blurb hover and the row itself is the background it’s colored blue so when they when the effect comes on changes to the light blue we get that a lover effect

This next section is a little about us section here you can have a picture which can be changed – oops there we go. This is a little text module, this is a little accordion module. The next section here is the hospital of a future section this is a good section to have a nice picture of the doctor’s office that you’re doing the website for. This is just a regular image module that can be changed and we got this here – if you go into the row and go into the backgrounds and that’s column two you see that we got the same picture that we have here as the background. We’ve got the image blend on screen and the background color is this nice blue color so the screening effect gives it this nice washed out blue color.

next we have another row of services after that we have our app section if the hospital that you’re working for the doctor’s office that you’re doing the website for as an app you can put it here is just the regular image that can be changed this is a text module these are other more images you can add more here to want to add the Amazon play something like that.

After that we have a couple more service sections and then we have our making appointment which I think would be the most important part of the doctor’s website would be the make an appointment form so let’s go back to our page out of the Divi visual builder and I’ll show you a couple of pages that we have below that

First one here is Doctors, which is where you’re going to have all the doctors staff. I guess every doctor’s office has a main doctor which would be this woman here then we have our staff.  These are regular people modules that’s how I got the social icons in there. Next is our nursing staff. Next we’re going to go to is clinics and this is a page where you can display the different areas that you’re located I got this one from Florida the sums of California and New York it’s all the same map I just moved it around a little bit to give it a little look then you got your addresses phone numbers friendly little nurse here and they make appointment form again.

Need a Divi Medical Layout? It's crunch time and your Divi project is not finished - Divi Ready Themes has got you covered!
Share on X

Next we have our services if we just click on services this page shows all the services of the doctor off the doctor’s office performs and I’ve done this little pretty cool thing here as you’re going down it’s counting down to how many of the services they’ve offered then you can click on any individual service it’s not actually live link right now but I’ve included the sample service page if we click down to ambulatory we’ve got a service page just for ambulatory you see here we’ve got the ambulance some facts about that more information the air emergency services and again the form.

Last page would be the contact us and that’s just simply a little float down here for a section this is a Google map section here showing the location of the doctor’s office this little section down here it’s pretty nice this is just a regular text module with more text down here and this is just a regular contact us form that they can fill out and send back to you.

So I think that’s it. Let’s go back to the home page here and that is available for sale on our sites you can find our site at https://divireadythemes.com. Also in the next few weeks, I’m going to have a new video out for a new theme that we’ve released which is called Legalese. This is a lawyer website here and this one here which hasn’t even been announced yet is Tattooz which I’m working on now this is going to be my tattoo site. This is gonna be an awesome one. If you like this video subscribe below if you’d like to sign up for our email newsletter just go to our site and sign up save yourself 25%

This has been John from Divi Ready Themes and I’ll catch you on the next video.

Hey, Divi People this is John from Divi Ready Themes, and in this tutorial, I’m going to show you how I stumbled upon a solution for creating hover effects for Divi sections and rows using background colors, image blends – and of course, a little CSS.

I’ve seen the section and hover effects on other sites and I wanted to create the same thing for my Home page and for some of my child themes.

The look that I am going for you can see on my home page and on my new theme Ghost Hunters. These are the effects I was trying to create.

So, let’s go into the Divi Visual Builder, and we see that there is already a standard section set up with an empty row.

I’m going to create 2 new sections just to space out the page and we’re going to work on this middle section here.

First, we click on the gear icon to go into the settings, then background, and change the section background color to black.

While we are here let’s jump to the Advanced tab, CSS ID and Classes and let’s give it a CSS Class name of “drt-hover”.

Then I go into my Custom CSS and entered the following code:

.drt-hover:hover {

background-color: #ff22e2 !important;

}

Let’s save everything and go back to our page. Save that as well and do a refresh. Now at this point, when I was first trying to get this effect, I thought that was all I needed to do. But as you can see, when I tested it. It didn’t work – and I’ll show you why.

Make your Divi Websites Shine with these Custom Section Hover Effects!
Share on X

If we right click the section, then go to Inspect, we can see that when Divi sets the background color, it automatically gives it’s an “!important” tag. So no matter what we enter in the customs CSS section, it’s not going to make a difference.

But if we remove the !important tag, I’m not sure if you can see it here but once the important tag is removed you will see that the hover effect works perfectly.

So how do we get around this? One more line of CSS code.

Let’s close the inspector and refresh our page. Let’s get it back to it’s non-working status. Let’s open the Visual Builder and go back to our section settings. Let’s remove the black background and save. With the background removed, you will see that the hover effect is now working again.

What we need to do, since we can’t let Divi apply the background color for us, we are going to apply it ourselves with a little line of CSS code. Let’s go back to our Custom CSS section and enter the following code:

.drt-hover {

background-color: #fff;

}

Let’s save that and go back to our page and do a refresh. The black is back and the hover effect works perfectly.

It was at this point that I got an idea. I’ve been using Photoshop since it was a baby, so I know all about the Image Blends that are now included with Divi for image layers, and how colors react differently in different modes. Let’s jump over to PhotoShop and I’ll show you this concept.

I have a document here with 2 layers. The background is filled with Black and in the layer above that I have an image.

If I set the image to an image blend of Multiply, you will see that the image disappears. That’s because anything multiplied onto black will turn black.

But if I go in and raise the value of the background color – you will see the image start to emerge. The higher in value we go, the clearer the image.

So what does that mean?

Get a Jumpstart on your next Divi project with Divi Ready Themes! Premium Divi Child Themes and Layouts.
Share on X

That means we can use the same trick in Divi. Let’s jump back to the Visual Builder. If I go to the section settings you will see that Divi sets up its own layers. You have the background color, then the blend layer and then the Image Layer.

Let’s go ahead and add a Background Image. We see the image because we haven’t added a blend mode yet.

Go down to the Background Image Blend section and change to Multiply. The same exact thing happens as it did in Photoshop. We have multiplied the image onto a black background and it disappears.

And now when we hover, and we change the black to a color value, you see the image emerge. Pretty cool, eh?

Let’s try something different. Let’s go back to our Custom CSS and change the color values. Let’s make our background color a hot pink and the hover background a white.

.drt-hover:hover {

background-color: #fff;

}

.drt-hover {

background-color: #ff22e2;

}

Let go back to the Visual Builder. Let’s change our background image and set the blend to Darken. This gives us this cool image effect,

and when you hover over it, the image changes to its original look. This is because when you Darken an image onto a white background – it looks normal.

Let’s add one more thing to the Custom CSS. The hover effect kind of snaps on and off. Let add these 2 lines of code to give it a bit of a transition.

.drt-hover:hover {

background-color: #fff;

}

.drt-hover {

background-color: #ff22e2;

   -webkit-transition: background-color 0.3s ease-in-out;

   -moz-transition: background-color 0.3s ease-in-out;

}

Back on our page, let’s just save and exit the visual builder and you can see the hover effect now has a nice transition.

Well, that’s it. I hope you enjoyed this video. If you did please take a moment to like and subscribe. Don’t forget to check out our amazing selection of Divi Child Theme and Layouts.

This is John, from Divi Ready Themes and I’ll catch you on the next video.

Video Tutorial: Step by Step Instruction on how to Create Stunning Divi Section Hover Effects without a ton of CSS.
Share on X

Hey there Divi people! This is John from Divi Ready Themes. In this tutorial, I’m going to show you how I create those beautiful, custom Bloom Inline Email Optin modules.

When I first started designing Divi Layout Packs, I used javascript to get my inline optins to work – but they kept breaking with every few Divi updates. Then I discovered Bloom, and found a way to get the look I want with a little design and CSS. You can stick these guys wherever you want and they look great.

You’re going to need the following to create these email optins:

• Bloom Installation
• Photoshop (or your favorite photo editor)
• CSS Code (below)

/* Bloom Transparent Background */
.trans-module .et_bloom_form_content {
background: transparent !important;
}
.trans-module .et_bloom_header_outer {
background: transparent !important;
}
.trans-module .et_bloom_form_container {
background: transparent !important;
}
.trans-module .et_bloom_form_header {
background: transparent !important;
}
.trans-module .et_bloom_form_content:before {
opacity: 0 !important;
}

So, let’s get started.

First, we are going to design the Bloom optin. Go into your WordPress administration. Click on ‘Bloom’ and then click ‘New Optin’.

From the selection of optins choose ‘Inline’ You will then be brought into your setup optin form.

You will then be brought into your setup optin form. Let’s give our optin a name. Next let’s choose our form integration, Select your email provider from the dropdown list. Then select your account, and then finally your email list. When that is completed let’s click on ‘Design your Optin’.

Next you will be presented with a list of templates. It doesn’t matter which you choose, because we will be getting rid of most of the information anyway. So the first one should work perfectly. Click the template then click ‘Next Customize’.

You should now be on your “design your optin page”. Remove the information from the optin title and the optin message.

Go down to ‘Image Settings’ and choose ‘No Image’.

In the optin styling section, I usually remove any background colors by clicking ‘Select Color’ and then ‘Clear’. Do the same in the ‘Form Styling’ section, choosing the form background color and clicking clear. Choose your button color and button text, and click ‘Save and Exit’.

Once you save and exit you will be presented with your list of optins. Your new optin should be listed. If you click the brackets next to your optin name, it will show you the shortcode for your optin. Let’s copy that, because we are going to need it later.

Now let’s create our optin page. Let’s go into your WordPress Admin, ‘Pages’, ‘Add New’. I’m just going to name mine ‘Email Optins’. In the Divi Page settings lets choose ‘No sidebar’. Click the ‘Use Divi Builder’. Let’s go ahead and save that because we will be working in the visual builder.

Now in the visual builder, we are going to add a regular section with a row with one column.

Your Bloom optin should now appear in the section. Notice that even though we cleared the values for the background colors, they are still showing up. This is where the CSS comes in.

Take the following code and copy it into your additional CSS section.

/* Bloom Transparent Background */
.trans-module .et_bloom_form_content {
background: transparent !important;
}
.trans-module .et_bloom_header_outer {
background: transparent !important;
}
.trans-module .et_bloom_form_container {
background: transparent !important;
}
.trans-module .et_bloom_form_header {
background: transparent !important;
}
.trans-module .et_bloom_form_content:before {
opacity: 0 !important;
}

Last thing we need to do is take care of some spacing issues.

Finally, let’s adjust our section margins and we’re done! Now if we save the section to the library we can use our new optin on any page of the site.

And that’s it! Hope you enjoyed this video, if you did, please like and subscribe.This is John from Divi Ready Themes, I’ll catch you on the next video.

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(“https://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(“https://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.

/* Main Navigation Image*/

#main-header{
background:url(https://yourimagepath.com/yourimage.jpg)
no-repeat center;
background-size: cover;
}

Hey there Divi people, this is John from Divi Ready Themes and we’re here today to show you how we got those nice fancy headers the image backgrounds on the navigation menu on our past Divi themes; Campaigns and Contractors. The release we got some really good feedback and people seem to really like it so we are going to show you how to do it.  It gives the site a little bit of a WOW factor – client really likes it if you can kind of blend that in with the rest of the site.

Let’s go ahead and get started. The first thing we need to do go into my Photoshop –  we’re going to need a couple of banners. Now the banners I made here where for Contractors this one was for Campaigns. The contractors one was about 1920 by 108 pixels and the flag was about 1836 by 146. I would say keep it around 1920, about HD size should work fine. You’re gonna fool around with the height depending on how fat you want your header to be.

Let’s go back to our site. Now the first thing I did just to make sure was I checked to make sure that my header element was named the right thing.  So I went into my inspector and inspected the header and I see here, it’s main header hashtag main – header so it is the correct one. I’m a thousand percent positive it’s the same on every Divi installation but just to make sure before you put the code in that it’s gonna be right. So let’s go into our theme customizer and let’s go down to additional CSS and let’s add a new piece of code here. Now the code is right here. I’m going to include this in the transcription below but the code is just these little tiny four lines of code we’ll get you that same effect.

Keep Me Notified!

Join the Divi Ready newsletter and receive free resources, tutorials, special offers and promotions directly to your inbox.

Sign Me Up!

You have Successfully Subscribed!

So I’m gonna copy this whole thing here with the title. The bottom link there you see there is the link to the actual image so I’m going to print come back here and paste it into my additional CSS section. Here let me go back to my note here and grab that, copy that and we’re gonna put that right between these two brackets right here and as you can see BAM comes right up.

You can go back to the header and navigation primary navigation bar and you can fool around with the menu height if it doesn’t look right to you, you can make it a little bit smaller. I kept mine at about a hundred I think it was, and it looks pretty good. Then you got to make sure that your logo pretty much fits seamlessly over this. It’ll really make the theme come to life and your clients are gonna love it. So I hope you liked this video – this is John from Divi Ready Themes. I’ll catch you on the next one – bye.