Divi’s Fullwidth Header Module includes a button that indicates to the individual they may be able to scroll down. Once they click on on it, they robotically get redirected to the next section. It is a simple button with various icons to choose from and its shade and dimension are completely customizable. In this post, we’ll check out learn how to customize it and notice 4 Scroll Down Buttons you’ll include in your Divi Fullwidth Header Module. We’ll moreover see learn how to style it with CSS for a lot more design possible choices.

Let’s get started!

Scroll Down Buttons Preview

First, let’s check out the designs we’ll create in this post.

Desktop Scroll Down Buttons Example One

Phone Scroll Down Buttons Example One

Desktop Scroll Down Buttons Example Two

Phone Scroll Down Buttons Example Two

Desktop Scroll Down Buttons Example 3

Phone Scroll Down Buttons Example 3

Desktop Scroll Down Buttons Example 4

Phone Scroll Down Buttons Example 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 loose Treatment Structure Pack that’s to be had inside of Divi. Create a brand spanking new internet web page and add a Fullwidth Header Module to a brand spanking new fullwidth section.

Fullwidth Phase Divider

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

Next, scroll to Dividers. Click on at the Bottom tab and choose the 8^th Divider Style. Set the Color to #e5e8f0 and enter 10vw for the Top. Close the section’s settings.

• Dividers: Bottom
• Divider Style: 8^th style
• Color: #e5e8f0
• Top: 10vw

Fullwidth Header Text

Next, open the Fullwidth Header Module and add your Establish, Subtitle, and Button Text. Delete the dummy text for the Body Content material subject matter and pass away it empty.

• Establish: Get began Your Journey to Feeling Upper Nowadays.
• Subtitle: Establish, licensed therapist
• Button One Text: make an Appointment
• Body Content material subject matter: None

Fullwidth Header Pictures

Scroll proper right down to Pictures and choose a big Header Image. I’m choosing an image that comes with the Treatment Structure Pack. You’ll be capable of to find the image by way of scrolling down that post and downloading the image assets.

Fullwidth Header Background

Scroll proper right down to Background. Delete the Background Color and choose the Gradient tab. Change the principle Gradient Stop’s Color to #2e5b61 and set the position to 25%. Go away the second Gradient Stop at 100% and change the Color to rgba(46,91,97,0.5).

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

Permit Place Gradient Above Background Image.

• Place Gradient Above Background Image: Certain

Fullwidth Header Background Image

Next, choose the Background Image tab and choose a full-screen image. I’m the usage of each and every different image from the Remedy Construction Pack.

• Position: Best Center

Fullwidth Header Construction

Next, choose the Design tab and make allowance Make Fullscreen.

• Make Fullscreen: Certain

Fullwidth Header Scroll Down Icon

Next, permit Show Scroll Down Button. We’ll style this button in our examples, so we’ll pass away it throughout the default settings for now.

• Show Scroll Down Button: Certain

Fullwidth Header Image

Next, scroll to Image and change the Best Left Rounded Corners to 200px for desktops. Set the rest of the Rounded Corners to 0px. Change the Rounded Corners to 100px for pills and phones.

• Rounded Corners desktops: 200px Best Left, 0px all others
• Rounded Corners pills and phones: 200px Best Left, 0px all others

Fullwidth Header Establish Text

Next, scroll to Establish Text. Use H1 for the Heading Level. Make a selection Cormorant Garamond for the Establish Font, set the Weight to Bold, and the Color to #e1ecea.

• Heading Level: H1
• Font: Cormorant Garamond
• Weight: Bold
• Color: #e1ecea

Next, set the Dimension for all 3 visual display unit sizes. Use 90px for desktops, 40px for pills, and 24px for phones. Change the Line Top to a minimum of one.1em.

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

Fullwidth Header Subtitle Text

Next, scroll to Subtitle Text. Change the Font to Inter, the Weight to Bold, and the Color to #e1ecea.

• Font: Inter
• Weight: Bold
• Color: #e1ecea

Set the Dimension to 22px for desktops, 20px for pills, and 16px for phones. Change the Line Top to a minimum of one.6em.

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

Fullwidth Header Button

Scroll proper right down to the settings for Button One and make allowance Use Custom designed Varieties for Button One. Change the Dimension to 14px, the Text Color to #2e5b61, and the Background Color to #e1ecea.

• Use Custom designed Varieties for Button One: Certain
• Text Dimension: 14px
• Text Color: #2e5b61
• Button Background: #e1ecea

Change the Border Width to 0px and the Border Radius to 50px. Use Inter for the Font and change the Weight to Semi Bold.

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

For the Button Padding, use 20px for the Best and Bottom and 40px for the Left and Correct.

• Padding: 20px Best and Bottom, 40px Left and Correct

Fullwidth Header Scroll Down Buttons Examples

Now that we’ve were given our Fullwidth Header, let’s see learn how to style the Scroll Down Buttons. We’ll check out 4 examples with somewhat numerous mixtures of icons, colors, and sizes.

The Scroll Down Buttons include 3 settings. Every setting can be adjusted for each and every visual display unit dimension independently. Settings include:

• Icon selection – make a choice from 11 icons. They arrive with somewhat numerous arrow designs with or without background in conjunction with non-circled, circled, and solid.
• Color – the standard Divi shade selector.
• Dimension – the standard Divi dimension adjustment.

It moreover includes a CSS field throughout the Difficult tab. We’ll use some of these settings.

Scroll Down Button Example One

For our first example, we’ll use a non-circled icon with out a background. Make a selection the principle icon, trade the Color to #e1ecea, and change the Dimension to 66px for desktops, 60px for pills, and 50px for phones.

• Icon: 1^st icon
• Color: #e1ecea
• Dimension: 66px for desktops, 60px for pills, 50px for phones

This creates a light green down arrow that works well with the rest of the design and stands proud enough to inform the individual.

Scroll Down Button Example Two

For our 2nd example, we’ll use a circled icon. Make a selection the seventh icon and change the Color to #e8c553. We’ll set the icon upper for this one. Change the Dimension to 78px for desktops, 70px for pills, and 60px for phones.

• Icon: 7^th icon
• Color: #e8c553
• Dimension: 78px for desktops, 70px for pills, 60px for phones

This color is a variation of the yellow throughout the construction pack, nevertheless it indubitably’s lighter which fits upper over the green background. The icon has sharp corners, alternatively the circle fits the rounded design of the construction.

Scroll Down Button Example 3

For our third example, we’ll use an icon that’s circled and has a background. This colors the background and creates the icon with an opening that allows the background image of the web page to show by way of. For the best results, we’ll need to pay close attention to the icon’s dimension and the color of the button’s background.

Make a selection the eighth icon and change its Color to #0e4951. Set the Dimension to 60px for desktops, 56pc for pills, and 50px for phones.

• Icon: 8^th icon
• Color: #0e4951
• Dimension: 60px for desktops, 56px for pills, 50px for phones

The fairway is a darker colour of the green throughout the background. The darker colour stands proud over the green and nevertheless fits the rest of the construction.

Scroll Down Button Example 4

What if you want to combine colors, so you’ll have a background shade behind the cutout icon? We can do this with CSS. For this situation, we’ll use CSS to create a background shape behind the icon that may show at some stage in the cutout icon. The icon itself will use the standard settings.

Make a selection the eleventh icon and change the Color to #e1ecea. We’ll set the icon smaller for this one and create a large background shape. Change the Dimension to 50px for desktops, 40px for pills, and 30px for phones.

• Icon: 11^th
• Icon Color: #e1ecea
• Dimension: 50px for desktops, 40px for pills, 30px for phones

Next, go to the Difficult tab and scroll proper right down to the Scroll Down Button’s CSS field and enter this CSS:

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

This CSS construction supplies padding to the Best, Correct, Bottom, and Left. I’ve used this padding to create a background oval this is going well with the design of the header the usage of design cues from the construction.

Scroll Down Buttons Results

Desktop Scroll Down Button Example One

Phone Scroll Down Button Example One

Desktop Scroll Down Button Example Two

Phone Scroll Down Button Example Two

Desktop Scroll Down Button Example 3

Phone Scroll Down Button Example 3

Desktop Scroll Down Button Example 4

Phone Scroll Down Button Example 4

Completing Concepts

That’s our check out 4 Scroll Down Buttons you’ll include in your Divi Fullwidth Header Module. The scroll button accommodates various icons to choose from and also you’ll style its shade and dimension. The use of the CSS field, you’ll style the button even further. The mixtures of the button’s styling possible choices and CSS give you numerous design possibilities at the side of your Scroll Down Buttons.

We want to concentrate from you. Do you style the Scroll Down Buttons in your Divi Fullwidth Header Module? Let us know throughout the comments.

The post Methods to Come with a Scroll Down Button in Your Divi Fullwidth Header Module appeared first on Sublime Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more