Divi’s Fullwidth Header Module has loads of options that upload fascinating design parts to any Divi website online. One instance is the power to expose a background symbol when the consumer hovers over the module. This provides an additional degree of element that the majority customers would now not be expecting. That is simple to do with Divi.

On this publish, we’ll see how one can divulge a hover background symbol for your Divi Fullwidth Header Module. We’ll additionally create a fullwidth header from scratch in line with one among Divi’s loose Structure Packs.

Let’s get began.

Preview

First, let’s see a preview of what we’ll construct on this publish. Since soaring with a mouse isn’t an possibility for telephones, I’ve integrated the design for telephones when the consumer touches the background.

Desktop With out Hover

Desktop With Hover

Telephone With out Hover

Telephone With Display Faucet

Construct the Hover Background Symbol Fullwidth Header

First, let’s construct the fullwidth header that we’ll use within the instance. Open the Divi Theme Builder and click on Upload World Header to construct a brand new template. Select Construct a World Header to construct it from scratch.

Subsequent, upload a Fullwidth Segment and delete the Common Segment.

In the end, upload a Fullwidth Header Module for your new segment.

Now, we will be able to create our hover published background and elegance the module. For this case, I’m the use of design cues from the hero segment from the free Financial Services Landing Page that’s to be had inside of Divi.

Create the Hover Background Symbol

Earlier than we taste the module, let’s get started with growing the hover divulge function for the Fullwidth Header Module. When we see how one can create it and the way it works, we’ll taste the remainder of the module to check our preview instance.

Hover Divulge Background Symbol

The hover published background has two parts. The primary is the background colour that presentations as customary. Shall we additionally use a gradient or symbol if we needed. The second one is the component that presentations when the consumer hovers over the Fullwidth Header Module. In our case, that is a picture, however shall we simply as simply use a background colour or gradient.

First, scroll all the way down to Background. At the Background Colour tab, alternate the Colour to #f0f3fb.

• Background Colour: #f0f3fb

Subsequent, make a choice the Hover State icon. This can be a mouse cursor icon. Clicking it opens a collection of tabs that permit us to make a choice from the common and hover state settings. Make a choice the Hover State tab to modify to the hover choices. Subsequent, select the Background Symbol tab and select your background symbol. I’m the use of the background symbol from the Monetary Products and services Structure Pack referred to as financial-services-9.

• Hover State Background Symbol: financial-services-9

We have now a picture that may divulge when the consumer hovers over the Fullwidth Header Module. All hover state choices paintings on this means.

Taste the Hover Background Symbol Fullwidth Header Module

Now that we’ve got our hover background symbol in position, let’s taste the remainder of the module.

Hover Background Symbol Content material

Let’s get started with the content material for the fields, frame, and buttons. Upload your Name, Subtitle, Button One, Button Two, and Frame content material.

• Name: Plan Your Monetary Long term
• Subtitle: Welcome to Divi
• Button One: Get Began
• Button Two: Get a Unfastened Quote
• Frame Content material: your content material

Hover Background Symbol Structure

Subsequent, make a choice the Design tab. Trade Brand & Textual content Alignment to Targeted.

• Brand & Textual content Alignment: Targeted

Hover Background Symbol Scroll Down Icon

Make a choice Display Scroll Down Button. Make a choice the 3rd icon and alter the Colour to #1d4eff. Depart the Measurement at its default atmosphere.

• Display Scroll Down Button: Sure
• Icon: 3^rd
• Colour: #1d4eff

Hover Background Symbol Name Textual content

Subsequent, scroll all the way down to Name Textual content. Make a choice H1 for the Heading Degree. Select Montserrat for the Font, set the Weight to daring, and alter the Colour to #0f1154.

• Heading Degree: H1
• Font: Montserrat
• Weight: Daring
• Colour: #0f1154

Trade the Font Measurement to 125px for desktops, 40px for drugs, and 24px for telephones. Set the Line Peak to 110%. This provides us an outsized identify that appears nice on any display screen measurement.

• Measurement: 125px desktop, 40px pill, 24px telephone
• Line Peak: 110%

Hover Background Symbol Frame Textual content

Subsequent, scroll to Frame Textual content. Trade the Font to Roboto, set the Weight to medium, and alter the Colour to #0f1154.

• Font: Roboto
• Weight: Medium
• Colour: #0f1154

Trade the Font Measurement to 18px for desktops and drugs, and 14px for telephones. Set the Line Peak to 180%. This provides the frame textual content numerous respiring room.

• Measurement: 18px desktop and pill, 14px telephone
• Line Peak: 180%

Hover Background Symbol Subtitle Textual content

Subsequent, scroll to Subtitle Textual content. Trade the Font to Montserrat. Set the Weight to daring, alternate the Taste to TT, and alter the Colour to #1d4eff.

• Font: Montserrat
• Weight: Daring
• Taste: TT
• Colour: #1d4eff

Trade the Font Measurement to 16px for desktops, 14px for drugs, and 12px for telephones. Trade the Line Spacing to 0.3em and the Line Peak to one.6em. This units the subtitle except for each the identify and content material with out taking on a lot room.

• Measurement: 16px desktop, 14px pill, 12px telephone
• Letter Spacing: 0.3em
• Line Peak: 1.6em

Hover Background Symbol Button One

Subsequent, scroll all the way down to Button One and allow Use Customized Kinds for Button One. Trade the Textual content Measurement to 18px. Trade the Textual content Colour to white and the Background Colour to #1d4eff.

• Use Customized Kinds for Button One: Sure
• Textual content Measurement: 18px
• Textual content Colour: #ffffff
• Background Colour: #1d4eff

Subsequent, alternate the Border Width and Radius to 0px. Select Roboto for the Font and set the Weight to Medium.

• Width: 0px
• Radius: 0px
• Font: Roboto
• Weight: Medium

Scroll all the way down to Button One Padding. Upload 14px for the Most sensible and Backside Padding, and 24px for the Proper and Left Padding.

• Padding: 14px Most sensible and Backside, 24px Left and Proper

Hover Background Symbol Button Two

Subsequent, scroll all the way down to Button Two and allow Use Customized Kinds for Button Two. Some of these settings are the similar as Button One. Trade the Textual content Measurement to 18px, the Textual content Colour to white, and the Background Colour to #00c9c9.

• Use Customized Kinds for Button Two: Sure
• Textual content Measurement: 18px
• Textual content Colour: #ffffff
• Background Colour: #00c9c9

Subsequent, alternate the Border Width and Radius to 0px. Select Roboto for the Font and set the Weight to Medium.

• Width: 0px
• Radius: 0px
• Font: Roboto
• Weight: Medium

Scroll all the way down to Button Two Padding. Upload 14px for the Most sensible and Backside Padding, and 24px for the Proper and Left Padding.

• Padding: 14px Most sensible and Backside, 24px Left and Proper

Hover Background Symbol Spacing

Subsequent, scroll all the way down to Spacing and upload 100px Padding to the Most sensible and Backside. This will increase the scale of the fullwidth header with out the use of the Fullscreen possibility within the Structure settings. In my examples, the fullwidth header leaves just a little little bit of house on the backside of the display screen the place the following segment presentations. After all, you might want to use the full-screen atmosphere instead of the padding if you happen to sought after.

• Padding: 100px Most sensible and Backside

Hover Background Symbol Field Shadow

Finally, scroll all the way down to Field Shadow and select the 6^th Field Shadow possibility. This provides the header a extra distinctive glance. Shut the Fullwidth Header Module and save your settings.

• Field Shadow: 6^th

Effects

Desktop With out Hover

Desktop With Hover

Telephone With out Hover

Telephone With Display Faucet

Finishing Ideas

That’s our have a look at how one can divulge a hover background symbol for your Divi Fullwidth Header Module. The hover state for background pictures is an easy atmosphere, however it will probably have an enormous have an effect on at the website online’s design. It’s an effective way to get consideration. You’ll take the design even additional if you happen to sought after so as to add Gradient Stops, overlays, alternate pictures, and extra. I like to recommend taking part in round with the Divi Fullwidth Header Module’s hover background settings to peer what you’ll create.

We need to pay attention from you. Do you utilize a hover background symbol for your Divi Fullwidth Header Module? Tell us about it within the feedback.

The publish How to Reveal a Hover Background Image in Your Divi Fullwidth Header Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more