Methods to Taste the Cart & Seek Icons in Your Divi Fullwidth Menu Module

by | Aug 9, 2022 | Etcetera | 0 comments

Your web page’s menu is one of the most vital portions in your web page because of the direct impact it’s going to perhaps have on the method shoppers navigate through your content material subject material. A well-designed menu bar may just make a big difference by the use of simplifying navigation, highlighting key pages, and boosting the entire client enjoy. Divi’s fullwidth menu module provides great flexibility by the use of allowing you to style the cart and search icons on the other hand you please. In this tutorial, we will show you 3 different designs for the fullwidth menu module with different styling for the cart and search icons.

Let’s get started!

Sneak Peek

Right here’s a preview of what we will design.

First Design

For the principle design, we’re hanging one of the vital icons on the left, and the other at the right kind by the use of settling on a focused menu development. We’ll moreover industry the color on hover.

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Final Design

2nd Design

For the second design, we’re hanging each and every icons at the right kind facet and changing the color on hover.

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design Mobile

third Design

For the third design, we’re using some additional CSS to style the icons. You’ll be capable of use those same CSS classes to style the icons on the other hand you wish to have.

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Mobile

What You Want to Get Started

Forward of we begin, set up and turn on the Divi Theme and bear in mind to have the latest style of Divi in your web page.

Now, you’re able to start out out!

Find out how to Style the Cart and Search Icons to your Divi Fullwidth Menu Module

Assemble the Global Header

For each of the three menu designs, we will get began by the use of opening the Theme Builder from the Divi section of the WordPress Admin Panel. Select Add Global Header, then choose Assemble Global Header.

Divi Style Cart Search Icons Fullwidth Menu Add Global Header

Insert a brand spanking new fullwidth section, then delete the empty commonplace section.

Divi Style Cart Search Icons Fullwidth Menu Add Fullwidth Menu

Next, insert the fullwidth menu module.

Divi Style Cart Search Icons Fullwidth Menu Add Fullwidth Menu

Upload your logo to the menu.

Divi Style Cart Search Icons Fullwidth Menu Add Logo

Now we’re able to build our design.

First Design

Our first design will incorporate Divi’s built-in hover effects to modify the color of the text and icons on hover. Let’s get started.

Get began by the use of opening the fullwidth menu settings and together with a background.

  • Background: #fbf9f4

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Background

Navigate to the design tab and choose the inline focused logo structure.

  • Style: Inline Centered Logo

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Layout Style

Now let’s industry one of the vital menu text settings.

  • Full of life Link Color: #09148c
  • Menu Font: Rubik
  • Menu Font Weight: Bold
  • Menu Font Style: Capitalized and Underlined

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Menu Font

Next, set the menu text colour, text dimension, and letter spacing.

  • Menu Text Color: #000000
  • Menu Text Size: 21px
  • Menu Letter Spacing: 1px

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Text Settings

We wish to add some hover effects to this menu, so choose the hover icon for the menu text colour. Set a distinct menu text colour on hover.

  • Menu Text Color on Hover #b70018
See also  How you can Make Weblog Submit Feedback Searchable in WordPress

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Menu Text Hover Color

Next, navigate to the dropdown menu settings beneath the Design tab.

  • Dropdown Menu Background Color: #fbf9f4
  • Dropdown Menu Line Color: #b70018
  • Dropdown Menu Text Color: #000000

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Dropdown Color

We want the dropdown menu text colour to modify on hover too, so choose the hover possible choices for this environment and set a distinct text colour on hover.

  • Dropdown Menu Text Color on Hover: #b70018

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Dropdown Hover

  • Dropdown Menu Full of life Link Color: #b70018
  • Cellular Menu Background Color: #fbf9f4
  • Cellular Menu Text Color: #000000

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Color Settings

Once over again, we would really like the mobile menu text colour to modify on hover. Select the hover possible choices for this environment, then set a distinct text colour on hover.

  • Cellular Menu Text Color on Hover: #b70018

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Mobile Text Hover

Customizing the Cart and Search Icon

Now let’s add and customize the cart and search icons. Beneath the Content material subject material tab, navigate to Portions and make allowance the purchasing groceries cart icon and the hunt icon.

  • Show Purchasing groceries Cart Icon: Positive
  • Show Search Icon: Positive

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Enable Icons

Go back to the design tab and open the icon settings. Every of our icons will probably be black, and will probably be pink on hover. First, set the black colour.

  • Purchasing groceries Cart Icon Color: #000000
  • Search Icon Color: #000000
  • Hamburger Menu Icon Color: #000000

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Icon Color

Next, choose the hover icon and add the hover colour.

  • Purchasing groceries Cart Icon Color on Hover: #b70018
  • Search Icon Color on Hover: #b70018
  • Hamburger Menu Icon Color on Hover: #b70018

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Color Hover

Set the cart icon and search icon sizes.

  • Purchasing groceries Cart Icon Font Size: 25px
  • Search Icon Font Size: 25px

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Cart Size

Navigate to the Spacing section, then set the easiest and bottom padding.

  • Padding-Perfect: 5px
  • Padding-Bottom: 5px

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Padding

In the end, we’re going to add a border to the easiest and bottom of the menu module. Open the border settings.

  • Perfect Border Width: 3px

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Top Border

  • Bottom Border Width: 3px

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Bottom Border

Final Design

And that is our final design.

2nd Design

Our 2nd design will profit from Divi’s built-in hover effects to modify the dimensions of the menu icons and text on hover. Let’s get started.

First, we will add a background gradient to the menu module. The gradient has 3 stops, the settings are as follows:

  • First Save you: 0%, rgba(255,255,255,0)
  • 2nd Save you: 23%, rgba(252,199,76,0.65)
  • third Save you: 82%, rgba(232,119,255,0.32)

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Gradient Background

Set the Gradient Type and Gradient Position.

  • Gradient Type: Conical
  • Gradient Position: Bottom

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Gradient Settings

Next, navigate to the Design tab and set the structure.

  • Construction: Centered

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Style

Switch to the Menu Text section to customize the menu text design.

  • Full of life Link Color: #FFFFFF
  • Menu Font: Syne
  • Menu Font Weight: Bold
  • Menu Font Style: Capitalized

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Menu Font

Now set the Menu Text Size and Letter Spacing.

  • Menu Text Size: 20px
  • Menu Letter Spacing: 2px
See also  8 Useful Tutorials to Get Began with Divi Cloudways Webhosting

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Text Size Spacing

Since we would really like our menu text dimension to increase on hover, choose the hover selection.

  • Menu Text Size on Hover: 22px

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Hover Text Size

Next, industry the Dropdown Menu design settings.

  • Dropdown Menu Background Color: #fcda90
  • Dropdown Menu Line Color: #FFFFFF
  • Dropdown Menu Text Color: #FFFFFF
  • Dropdown Menu Full of life Link Color: #FFFFFF

Divi Style Cart Search Icon Dropdown Menu Settings

Set the background and text colour for the mobile menu.

  • Cellular Menu Background Color: #fcda90
  • Cellular Menu Text Color: #FFFFFF

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Mobile Background Text

Customizing the Cart and Search Icon

Now let’s get started customizing our menu icons. Navigate to Portions beneath the Content material subject material tab and make allowance the purchasing groceries cart icon and the hunt icon.

  • Show Purchasing groceries Cart Icon: Positive
  • Show Search Icon: Positive

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Icons

Go back to the design tab and open the icon settings.

  • Purchasing groceries Cart Icon Color: #000000
  • Search Icon Color: #000000
  • Hamburger Menu Icon Color: #000000

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Icon Colors

The icons could have a dismal orange colour on hover. Select the cover selection and set the color.

  • Purchasing groceries Cart Icon Color on Hover: #fcac00
  • Search Icon Color on Hover: #fcac00
  • Hamburger Menu Icon Color on Hover: #fcac00

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Hover Color

Next, set the font dimension for the cart and search icons.

  • Purchasing groceries Cart Icon Font Size: 25px
  • Search Icon Font Size: 25px

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Icon Size

To set the icon dimension to increase on hover, choose the hover selection.

  • Purchasing groceries Cart Icon Font Size on Hover: 30px
  • Search Icon Font Size on Hover: 30px

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Hover Icon

In the end, switch to the Spacing section and set the easiest and bottom padding.

  • Padding-Perfect: 5px
  • Padding-Bottom: 5px

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Padding

Final Design

That is the overall design for our 2nd menu structure.

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design Mobile

third Design

For our final design, we will add a background circle at the back of the cart icons using custom designed CSS. Let’s get started.

First, add a background colour to the fullwidth menu module.

  • Background: #efb6ac

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Background

Next, navigate to the Design tab and open the Menu Text possible choices.

  • Full of life Link Color: #e84322
  • Menu Font: Cinzel
  • Menu Font Weight: Extraordinarily Bold

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Menu Font

We want the menu text colour to modify on hover. First, set the menu text colour.

  • Menu Text Color: #e7644a

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Color

Click on at the hover icon and set the hover text colour.

  • Menu Text Color on Hover: #e84322

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Color Hover

Next, set the menu text dimension and letter spacing.

  • Menu Text Size: 21px
  • Menu Letter Spacing: 1px
Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Size Spacing

We moreover want the letter spacing to increase on hover, so choose the hover selection for the environment.

  • Menu Letter Spacing on Hover: 2px

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Hover Spacing

Set the text alignment to left.

  • Text Alignment: Left

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Alignment

Next, industry the following Dropdown Menu settings.

  • Dropdown Menu Background Color: #efb6ac
  • Dropdown Menu Line Color: #e7644a

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Dropdown Colors

  • Dropdown Menu Text Color: #e7644a
  • Dropdown Menu Text Color on Hover: #e84322
  • Dropdown Menu Full of life Link Color: #e84322

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Text Color

Set the background and text colour for the mobile menu.

  • Cellular Menu Background Color: #efb6ac
  • Cellular Menu Text Color: #e7644a
  • Cellular Menu Text Color on Hover: #e84322
See also  Easy methods to Use the WordPress Scribd Embed Block

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Background Text

Customizing the Cart and Search Icon

First, navigate to Portions beneath the Content material subject material tab and make allowance the purchasing groceries cart icon and the hunt icon.

  • Show Purchasing groceries Cart Icon: Positive
  • Show Search Icon: Positive

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Enable Icons

Next, go back to the design tab and open the icon settings. Set the icon colour.

  • Purchasing groceries Cart Icon Color: #e7644a
  • Search Icon Color: #e7644a
  • Hamburger Menu Icon Color: #e7644a

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Icon Colors

The color of the ones icons will industry on hover. Allow the hover possible choices and set the color.

  • Purchasing groceries Cart Icon Color on Hover: #e84322
  • Search Icon Color on Hover: #e84322
  • Hamburger Menu Icon Color on Hover: #e84322

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Hover Options

We moreover want the icon dimension to increase on hover. First, set the icon font dimension.

  • Purchasing groceries Cart Icon Font Size: 22px
  • Search Icon Font Size: 22px

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Icon Size

Then, set the icon font dimension on hover.

  • Purchasing groceries Cart Icon Font Size on Hover: 26px
  • Search Icon Font Size on Hover: 26px

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Icon Size Hover

Next, navigate to the Spacing section and add best and bottom padding.

  • Padding-Perfect: 5px
  • Padding-Bottom: 5px

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Padding

In the end, we can add some custom designed CSS to the global header to be able to upload the circles at the back of the cart and search icon. You’ll be capable of customize this CSS on the other hand you want to have compatibility the design of your menu module.

Open the Header Template Settings, then navigate to the Advanced tab and insert the following custom designed CSS.

.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Custom CSS

Final Design

That completes the design for our third and supreme menu structure.

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Mobile

Final Result

Now let’s take a look at the overall design for the three menu modules.

First Design

Divi Style Cart Search Icons Fullwidth Menu Layout 1 Final Design

2nd Design

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 2 Final Design Mobile

third Design

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Final Design

Divi Style Cart Search Icons Fullwidth Menu Layout 3 Mobile

Final Concepts

Divi’s menu module and cart and search icons are easy to customize with the intention to create unique layouts and designs for your web page. You’ll be capable of merely elevate the look of your menu modules using built-in Divi settings like hover effects and custom designed CSS. Hopefully this tutorial has given you some design inspiration you’ll put into effect to your private web page as successfully! How have you ever ever customized the look of your menu module and icons? Let us know inside the comments!

The post Methods to Taste the Cart & Seek Icons in Your Divi Fullwidth Menu Module seemed first on Chic Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published.