Divi’s Fullwidth Header Module features a button that signifies to the consumer they are able to scroll down. After they click on it, they routinely get redirected to the following segment. This can be a easy button with a number of icons to make a choice from and its colour and dimension are absolutely customizable. On this submit, we’ll take a look at methods to customise it and notice 4 Scroll Down Buttons you’ll be able to come with on your Divi Fullwidth Header Module. We’ll additionally see methods to taste it with CSS for much more design choices.

Let’s get began!

Scroll Down Buttons Preview

First, let’s take a look at the designs we’ll create on this submit.

Desktop Scroll Down Buttons Instance One

Telephone Scroll Down Buttons Instance One

Desktop Scroll Down Buttons Instance Two

Telephone Scroll Down Buttons Instance Two

Desktop Scroll Down Buttons Instance 3

Telephone Scroll Down Buttons Instance 3

Desktop Scroll Down Buttons Instance 4

Telephone Scroll Down Buttons Instance 4

Scroll Down Buttons Fullwidth Header Design

First, we’ll create our Fullwidth Header design. I’m development it from scratch the usage of designs from the free Therapy Layout Pack that’s available within Divi. Create a brand new web page and upload a Fullwidth Header Module to a brand new fullwidth segment.

Fullwidth Phase Divider

We’ll upload a Divider for this fullwidth header. Open the settings for the Fullwidth Phase.

Subsequent, scroll to Dividers. Click on the Backside tab and make a choice the 8^th Divider Taste. Set the Colour to #e5e8f0 and input 10vw for the Peak. Shut the segment’s settings.

• Dividers: Backside
• Divider Taste: 8^th taste
• Colour: #e5e8f0
• Peak: 10vw

Fullwidth Header Textual content

Subsequent, open the Fullwidth Header Module and upload your Name, Subtitle, and Button Textual content. Delete the dummy textual content for the Frame Content material and depart it empty.

• Name: Get started Your Adventure to Feeling Higher Nowadays.
• Subtitle: Identify, approved therapist
• Button One Textual content: make an Appointment
• Frame Content material: None

Fullwidth Header Pictures

Scroll right down to Pictures and make a choice a large Header Symbol. I’m opting for a picture that includes the Therapy Layout Pack. You’ll be able to in finding the picture through scrolling down that submit and downloading the picture belongings.

Fullwidth Header Background

Scroll right down to Background. Delete the Background Colour and make a selection the Gradient tab. Trade the primary Gradient Prevent’s Colour to #2e5b61 and set the location to twenty-five%. Go away the second one Gradient Prevent at 100% and alter the Colour to rgba(46,91,97,0.5).

• Gradient Prevent One: #2e5b61, 25%
• Gradient Prevent Two: rgba(46,91,97,0.5), 100%

Permit Position Gradient Above Background Symbol.

• Position Gradient Above Background Symbol: Sure

Fullwidth Header Background Symbol

Subsequent, make a selection the Background Symbol tab and make a choice a full-screen symbol. I’m the usage of every other symbol from the Treatment Format Pack.

• Place: Most sensible Heart

Fullwidth Header Format

Subsequent, make a selection the Design tab and allow Make Fullscreen.

• Make Fullscreen: Sure

Fullwidth Header Scroll Down Icon

Subsequent, allow Display Scroll Down Button. We’ll taste this button in our examples, so we’ll depart it within the default settings for now.

• Display Scroll Down Button: Sure

Fullwidth Header Symbol

Subsequent, scroll to Symbol and alter the Most sensible Left Rounded Corners to 200px for desktops. Set the remainder of the Rounded Corners to 0px. Trade the Rounded Corners to 100px for drugs and telephones.

• Rounded Corners desktops: 200px Most sensible Left, 0px all others
• Rounded Corners drugs and telephones: 200px Most sensible Left, 0px all others

Fullwidth Header Name Textual content

Subsequent, scroll to Name Textual content. Use H1 for the Heading Degree. Select Cormorant Garamond for the Name Font, set the Weight to Daring, and the Colour to #e1ecea.

• Heading Degree: H1
• Font: Cormorant Garamond
• Weight: Daring
• Colour: #e1ecea

Subsequent, set the Dimension for all 3 display sizes. Use 90px for desktops, 40px for drugs, and 24px for telephones. Trade the Line Peak to at least one.1em.

• Dimension: 90px, 40px, 24px
• Line Peak: 1.1em

Fullwidth Header Subtitle Textual content

Subsequent, scroll to Subtitle Textual content. Trade the Font to Inter, the Weight to Daring, and the Colour to #e1ecea.

• Font: Inter
• Weight: Daring
• Colour: #e1ecea

Set the Dimension to 22px for desktops, 20px for drugs, and 16px for telephones. Trade the Line Peak to at least one.6em.

• Dimension: 22px, 20px, 16px
• Line Peak: 1.6em

Fullwidth Header Button

Scroll right down to the settings for Button One and allow Use Customized Kinds for Button One. Trade the Dimension to 14px, the Textual content Colour to #2e5b61, and the Background Colour to #e1ecea.

• Use Customized Kinds for Button One: Sure
• Textual content Dimension: 14px
• Textual content Colour: #2e5b61
• Button Background: #e1ecea

Trade the Border Width to 0px and the Border Radius to 50px. Use Inter for the Font and alter the Weight to Semi Daring.

• Border Width: 0px
• Border Radius: 50px
• Font: Inter
• Weight: Semi Daring

For the Button Padding, use 20px for the Most sensible and Backside and 40px for the Left and Proper.

• Padding: 20px Most sensible and Backside, 40px Left and Proper

Fullwidth Header Scroll Down Buttons Examples

Now that we’ve got our Fullwidth Header, let’s see methods to taste the Scroll Down Buttons. We’ll take a look at 4 examples with more than a few combos of icons, colours, and sizes.

The Scroll Down Buttons come with 3 settings. Every surroundings will also be adjusted for each and every display dimension independently. Settings come with:

• Icon variety – choose between 11 icons. They come with more than a few arrow designs without or with background together with non-circled, turned around, and forged.
• Colour – the usual Divi colour selector.
• Dimension – the usual Divi dimension adjustment.

It additionally features a CSS box within the Complex tab. We’ll use some of these settings.

Scroll Down Button Instance One

For our first instance, we’ll use a non-circled icon and not using a background. Make a choice the primary icon, alternate the Colour to #e1ecea, and alter the Dimension to 66px for desktops, 60px for drugs, and 50px for telephones.

• Icon: 1^st icon
• Colour: #e1ecea
• Dimension: 66px for desktops, 60px for drugs, 50px for telephones

This creates a gentle inexperienced down arrow that works neatly with the remainder of the design and stands proud sufficient to tell the consumer.

Scroll Down Button Instance Two

For our 2nd instance, we’ll use a turned around icon. Make a choice the 7th icon and alter the Colour to #e8c553. We’ll set the icon greater for this one. Trade the Dimension to 78px for desktops, 70px for drugs, and 60px for telephones.

• Icon: 7^th icon
• Colour: #e8c553
• Dimension: 78px for desktops, 70px for drugs, 60px for telephones

This colour is a variation of the yellow within the structure pack, however it’s lighter which goes higher over the golf green background. The icon has sharp corners, however the circle fits the rounded design of the structure.

Scroll Down Button Instance 3

For our 3rd instance, we’ll use an icon that’s turned around and has a background. This colours the background and creates the icon with a gap that permits the background symbol of the web page to turn via. For the most efficient effects, we’ll wish to pay shut consideration to the icon’s dimension and the colour of the button’s background.

Make a choice the 8th icon and alter its Colour to #0e4951. Set the Dimension to 60px for desktops, 56pc for drugs, and 50px for telephones.

• Icon: 8^th icon
• Colour: #0e4951
• Dimension: 60px for desktops, 56px for drugs, 50px for telephones

The golf green is a darker colour of the golf green within the background. The darker colour stands proud over the golf green and nonetheless fits the remainder of the structure.

Scroll Down Button Instance 4

What if you wish to mix colours, so you’ve got a background colour in the back of the cutout icon? We will do that with CSS. For this situation, we’ll use CSS to create a background form in the back of the icon that may display during the cutout icon. The icon itself will use the usual settings.

Make a choice the 11th icon and alter the Colour to #e1ecea. We’ll set the icon smaller for this one and create a big background form. Trade the Dimension to 50px for desktops, 40px for drugs, and 30px for telephones.

• Icon: 11^th
• Icon Colour: #e1ecea
• Dimension: 50px for desktops, 40px for drugs, 30px for telephones

Subsequent, move to the Complex tab and scroll right down to the Scroll Down Button’s CSS box and input this CSS:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

This CSS layout provides padding to the Most sensible, Proper, Backside, and Left. I’ve used this padding to create a background oval that is going neatly with the design of the header the usage of design cues from the structure.

Scroll Down Buttons Effects

Desktop Scroll Down Button Instance One

Telephone Scroll Down Button Instance One

Desktop Scroll Down Button Instance Two

Telephone Scroll Down Button Instance Two

Desktop Scroll Down Button Instance 3

Telephone Scroll Down Button Instance 3

Desktop Scroll Down Button Instance 4

Telephone Scroll Down Button Instance 4

Finishing Ideas

That’s our take a look at 4 Scroll Down Buttons you’ll be able to come with on your Divi Fullwidth Header Module. The scroll button contains a number of icons to make a choice from and you’ll be able to taste its colour and dimension. The usage of the CSS box, you’ll be able to taste the button even additional. The combos of the button’s styling choices and CSS provide you with numerous design probabilities together with your Scroll Down Buttons.

We wish to pay attention from you. Do you taste the Scroll Down Buttons on your Divi Fullwidth Header Module? Tell us within the feedback.

The submit How to Include a Scroll Down Button in Your Divi Fullwidth Header Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more