How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Jun 23, 2020 | Everything Divi for WordPress




When building your website’s header, paying special attention to your visitors’ behavior can help boost clickthrough rates. Not only should your header look good, but it should also help guide visitors to the most important pages on your website. A frequently used technique is adding a call to action inside your global header, but that’s not the only option out there. You can also opt for a corner label on the menu items you want to put in the spotlight. In this tutorial, we’ll show you how to add a “featured” or “new” label to specific menu items. These corner labels will help emphasize the menu items in the list, which increases the change of your visitors being curious and clicking through. You’ll be able to download the global header template as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the tutorial concept across different screen sizes.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Download The Global Header Template for FREE

To lay your hands on the free global header template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Add Labels to WordPress Menu Items

Go to Menus in Appearance

The first part of this tutorial is dedicated to setting up the labels inside your WordPress menu. To do that, navigate to your WordPress dashboard > Menus > Open the primary menu you’re using or create a new one.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-1 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Add Label to Featured Menu Item

Next, we’ll add a featured label to a menu item of our choice by placing the label HTML tags in front of the menu item.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-2 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Add Label to New Menu Item

We’ll do the same thing for another menu item of our choice and change the CSS class inside the tags along with the label copy.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-3 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

2. Go to Divi Theme Builder

Go to Divi Theme Builder & Add Global Header

Now that the labels have been set up, it’s time to switch over to Divi. Navigate to your website’s Divi Theme Builder and click on “Add Global Header.”

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-4 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Start Building From Scratch

Then, select “Build Global Header” to be redirected to the template editor.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-5 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

3. Build Global Header

Section Settings

Background Color

Once inside the template editor, you’ll notice a section. Open that section and add a background color. The header design we’ll build goes well with the Tutor Layout Pack, but feel free to create any header design you want, as long as you include the Code Module (later on) in it.

  • Background Color: #2a3749

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-6 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Spacing

Move on to the section’s design tab and remove all default top and bottom padding in the spacing settings.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-7 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Visibility

Because of the overlap we’ll add to our row (as you can notice in the preview), we’ll need to set the section’s overflows to visible.

  • Horizontal Overflow: Visible
  • Vertical Overflow: Visible

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-8 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-9 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Background Color

Without adding any modules yet, open the row settings and apply a white background color.

  • Background Color: #FFFFFF

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-10 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Sizing

Move on to the design tab and modify the sizing settings accordingly:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-11 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Spacing

We’ll apply some custom padding values to the spacing settings too.

  • Top Padding: 25px
  • Bottom Padding: 25px
  • Left Padding: 50px
  • Right Padding: 50px

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-12 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Border

Along with some rounded corners.

  • All Corners: 6px

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-13 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Box Shadow

And a subtle box shadow.

  • Box Shadow Vertical Position: 16px
  • Shadow Color: rgba(0,0,0,0.07)

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-14 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Transform Translate

Next, we’ll reposition the row using the transform translate settings in the design tab.

  • Transform Translate Right: 50px

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-15 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Overflows

To make sure our dropdowns appear on smaller screen sizes, we’ll complete the row settings by settings the overflows to visible.

  • Horizontal Overflow: Visible
  • Vertical Overflow: Visible

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-16 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Add Menu Module to Column

Select Menu

Time to add the Menu Module. Select the menu you’ve edited in the first part of this tutorial.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-17 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Upload Logo

Upload a logo next.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-18 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Menu Text Settings

Then, move on to the design tab and change the menu text settings as follows:

  • Menu Font: PT Sans
  • Menu Text Color: #000000
  • Menu Text Size: 16px
  • Text Alignment: Right

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-19 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Dropdown Menu Settings

Modify the dropdown menu line color too.

  • Dropdown Menu Line Color: #007aff

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-20 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Icons

Continue by changing the hamburger menu icon color in the icons settings.

  • Hamburger Menu Icon Color: #007aff

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-21 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Sizing

And complete the module settings by assigning a logo max width to the sizing settings.

  • Logo Max Width: 40%

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-22 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Add Code Module to Column

Once you’ve completed the overall look and feel of your Menu Module continue by adding a Code Module right below it.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-23 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Add CSS Code

The following CSS code will help us style the menu labels individually and create a responsive design:

<style> .menu-label { text-transform: uppercase; color: #fff; letter-spacing: 1px; border-radius: 5px; font-size: 10px; padding: 5px 10px; } .featured-label { background-color: #F9654D; } .new-label { background-color: #007AFF; } .et_pb_menu .et_pb_menu__menu, .et_pb_menu .et_pb_menu__menu>nav, .et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul { width: 100% !important; } .et_pb_menu .et_pb_menu__menu>nav>ul>li { padding-left: 15px !important; padding-right: 15px !important; } @media all and (min-width: 980px) { .menu-label { position: absolute; top: -10px; padding: 8px 15px; } } @media all and (max-width: 980px) { .menu-label { position: relative; float: right; font-size: 12px; padding: 5px 20px; } } </style>

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-24 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

4. Save all Theme Builder Changes & Preview Outcome

Once you’ve completed the header design, make sure you save all Divi Theme Builder changes before viewing the outcome on your website!

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-25 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header-26 How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Preview

Now that we’ve gone through all the steps, let’s take a quick look at the outcome across different screen sizes.

how-to-add-a-new-or-featured-corner-label-to-a-menu-item-in-your-custom-divi-header How to Add a “New” or “Featured” Corner Label to a Menu Item in Your Custom Divi Header

Final Thoughts

In this post, we’ve shown you how to highlight specific menu items inside your Divi-built global header. More specifically, we’ve included corner labels in our WordPress menu, which are displayed inside a Menu Module. This is a great way to highlight different menu items inside your menu without creating an overwhelming navigation journey. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.


Source

WordPress Development

SEO NEWS

seo news

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.