Divi Styling Tricks You Need to Know:

 

If you use the Divi theme on your WordPress website, you already know how versatile and flexible it is.

 

With Divi, everything from creating sections, pages, and posts, to styling your entire site can be achieved with just a couple of clicks.

 

It’s this ease of use that makes Divi the go-to theme for online entrepreneurs who want to build seriously impressive websites on their own.

 

But there are also plenty of Divi styling tricks that make using this theme even easier and help you to create awesome effects.

 

In this tutorial, I’m going to show you 3 Divi styling tricks that you need to know to help you take your site to the next level.

 

Divi Styling Tricks:

How to Create an Overlapping Logo in Divi

 

 

So you’ve got a great looking logo for your Divi website.

 

But you still want a little something different to add extra interest to your header area.

 

How about an overlapping logo?

 

An overlapping logo that hangs slightly off your primary menu is the perfect way to direct more attention to your site’s branding.

 

It’s also a great way to show off a longer logo without unnecessarily stretching out your header area to accommodate it.

 

I’ll show you how to create an overlapping logo in Divi theme with a few clicks.

 

 

 

Before you change it, your logo will likely look something like this:

 

How to create an overlapping logo in Divi

 

After you’ve carried out the following steps, your logo will extend slightly beyond your header, like this:

 

Create an overlapping logo in Divi

 

Ready? Let’s get started:

 

 

Upload Your Logo into Divi

 

Before you can edit your logo, you’ll need to upload it into your site. To do this, let’s head to the dashboard. Scroll down to “Divi” and click “Theme Options”.

 

How to Change the Logo in Divi Theme

 

Within “Theme Options”, select the “General” tab. Now scroll to the “Logo” field.

 

How to add your own logo in Divi Theme

 

Click “Upload” to enter your media library. If your logo is in your media library, select it and and hit “Set as Logo”. Then save your changes in the theme options area.

 

how to create an overlapping logo in Divi

 

If your logo isn’t in your media library yet, click the “Upload Files” tab beside the “Media Library” tab.

Then click “Select Files” to upload your logo from your computer files.

Hit “Set as Logo”.

 

Back in your theme options area, click “Save Changes”.

 

Make overlapping logo Divi theme

 

 

Now that you’ve got your preferred logo uploaded, let’s adjust it and make it an overlapping logo.

 

 

How to Make an Overlapping Logo in Divi

 

1.Enter the front-end of your Divi website. Here, at the top of the page, head to the Theme Customizer.

 

Create overlapping logo

 

2. Click “Header & Navigation”and then “Header Format” and make sure that the default option is selected for “Header Style”.

 

How to create an overlapping logo in Divi

 

 

create an overlapping logo in Divi tutorial

 

Divi styling tricks and tips

 

3. Click back into “Header & Navigation”. Here, select the Primary Menu Bar. Under “Max Logo Height”, input 100px.

 

Click “Publish”.

 

3 Divi Styling Tricks Tutorial

 

4. If you have a child theme for your Divi website (which is something I highly recommend), put the following code in its stylesheet:

 

@media only screen and (max-width:980px) {
#logo {
min-height: 100px;
}
}

@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}

 

makre overlapping logo, Divi styling tricks

 

Hit “Update File” to save the code into your stylesheet.

 

But if you don’t have a child theme for your site, you can still use this CSS.

 

In your dashboard, head to Divi and select “Theme Options”.

 

How to Change the Logo in Divi Theme

 

Divi styling tricks, create overlapping logo

 

Here, in the “General” tab, scroll down until you find the box that reads “Custom CSS”. You can place the code in that box instead.

 

Finally, click “Save Changes”.

 

Create overlapping logo in Divi, CSS Divi styling tricks

 

5. Head back to the front-end of your site. Here, you should now see your overlapping logo slightly extending below your primary menu.

 

 

Congratulations, you’ve just created an overlapping logo in Divi!

 

Divi Styling Tricks:

 

How to Create a Secondary Menu in Divi:

 

Wondering how to create a secondary menu in Divi?

 

In this quick tutorial, I’ll show you how to create a secondary menu in Divi with a phone number and email address.

 

Plus, we’ll look at how to move the phone number and email address from the right side to the left of your secondary menu.

 

As you can see, the site below has a basic primary menu at the moment. In the following steps, we’ll add a secondary menu to the site and style it.

 

How to create a secondary menu in Divi, Divi styling tricks

 

1. In the front-end of your Divi site, open the Theme Customizer.

 

How to create a secondary menu in Divi, Divi styling tricks

 

Go into “Header & Navigation” and then scroll down and click “Header Elements”.

 

create a secondary menu in Divi, Divi styling tricks

 

In “Header Elements”, uncheck the box beside the “Show Social Icons” options.

 

2. In the phone number field, input the number you’d like your secondary menu to display.

 

In the email address field, add your chosen email address.

 

Hit “Publish” and head back to “Header & Navigation”.

 

Divi styling tricks, Create a secondary menu in Divi

 

3. Here, you’ll see a tab that wasn’t there before — the Secondary Menu tab.

 

Click this tab to start styling your new secondary menu.

 

Divi styling tricks and tips, secondary menu in Divi tutorial

 

Check the box beside “Make Full Width”.

 

In “Text Size” choose the font size of your secondary menu bar’s text.

 

I’ve chosen 12px for my example.

 

Next, select whether you’d like to add spacing between your text’s letters, choose your preferred font, and font style.

 

I’ve gone for 0 spacing, the “Josefin Sans” font, and I’ve made my text bold.

 

Divi styling tricks you need, secondary menu in Divi

 

4. Under “Background Color” pick the color you’d like your secondary menu to be.

 

In “Text Color” choose your menu text’s color.

 

I’ve selected black as my secondary menu’s background color, and white for my text.

 

Finally, click “Publish” and exit the Theme Customizer.

 

You should now see a secondary menu above your primary menu, like this:

 

create a secondary menu in Divi, styling tricks

 

5. Your new secondary menu should also be displaying a phone number and email address in its left-hand corner.

 

We’re going to move this information to the right side of the secondary menu.

 

Click on the phone number and address and enable Chrome’s Inspect tool.

 

Create a secondary menu in Divi header, Divi styling tricks

 

You’ll now see that the phone number and email address in your secondary menu both have an ID of “et-info” .

 

how to create secondary menu in Divi, Divi styling tricks

 

Click this ID and look at the right side of the inspect tool’s screen. Here, you’ll find the styles for this ID.

 

Look for the CSS that reads  #et-info {float: left; } 

 

Select this code in the inspect tool’s screen and paste it into your child theme’s CSS or head to the Divi Theme Options.

 

In the “General” tab of the Divi Theme Options, scroll down to “Custom CSS”.

 

Here, place that CSS you copied just now.

 

Then go in and after “float:” erase “left”and change it to “right”.

 

Your code should now read:

#et-info{float:
 right;} 

 

CSS move secondary menu bar's phone number email address to the left in Divi, Divi Styling Tricks

 

Save your changes and head back to the front-end of your site. Refresh your page and take a look.

 

Your secondary menu’s phone number and address should now have moved to the right side of the menu, like this:

 

Divi secondary menu float right, Divi styling tricks

 

 

That’s all there is to it!

 

You now know how to create a secondary menu in Divi and how to align the phone number and email address information in your Divi secondary menu to the right.

 

 

Divi Styling Tricks:

 

How to Hide The Header and Footer on One Page in Divi

 

And finally, let’s look at the third super-easy Divi styling trick you need to have in your toolkit:

 

How to hide the header and footer on one page in Divi

 

Now, there are ways to actually remove the header and footer in Divi using CSS.

 

But if all you need is hide the header and footer on one Divi page, I’ll show you how to achieve this without writing a single line of CSS.

 

This styling trick is especially useful if you want to create your very own landing page/sales page within your Divi site.

 

Landing pages are all about displaying your offer and funneling your viewer towards opting-in, so you definitely don’t want to have a header menu with plenty of links to distract your viewer.

 

You can also use this method anytime you need your website visitors to focus on just one thing on the page.

 

I’ll show you how to hide the header and footer on a single page of your Divi site, without affecting the other pages at all.

 

1. First, at the top of the page you want to remove the header from, click “Edit Page”.

 

How to hide Divi header, Divi Styling Tricks

 

2. Head to “Page Attributes” to the right of the screen.

 

Here, under “Templates” make sure you select “Blank Page” from the drop-down menu.

 

How to hide the Divi header, Divi styling tricks

 

 

3. Now, hit “Update” and click “View Page” at the top of the screen.

 

 

Hide the Divi header, hide Divi footer, Divi styling tricks

Divi hide menu on one page, Divi styling tricks

 

You should now see that the header and footer have been removed from your page! 

 

How to hide header menu in Divi, hide Divi footer, Divi styling tricks

 

The Wrap-Up

 

Hopefully, after this quick tutorial you now know:

 

  • how to create an overlapping logo in Divi

 

  • how to create a secondary menu in Divi and how to edit your secondary menu

 

  • and how to hide the header and footer on a single page in Divi

 

 

These 3 Divi styling tricks will help you create numerous looks and functions within your Divi website.

 

Have you used any of these Divi styling tricks to create awesome effects?

 

Do you have any Divi styling tricks of your own that every Divi site owner should know?

 

Share with us in the comments below!