801-244-4103 support@wpfixall.com

Methods to Come with a Scroll Down Button in Your Divi Fullwidth Header Module

Everything Else

Divi’s Fullwidth Header Module features a button that signifies to the person they are able to scroll down. After they click on it, they routinely get redirected to the following phase. This can be a easy button with a number of icons to choose between and its coloration and measurement are totally customizable. On this publish, we’ll take a look at the way to customise it and spot 4 Scroll Down Buttons you’ll come with for your Divi Fullwidth Header Module. We’ll additionally see the way 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 publish.

Desktop Scroll Down Buttons Instance One

Desktop Scroll Down Button Example One

Telephone Scroll Down Buttons Instance One

Desktop Scroll Down Button Example 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 construction it from scratch the use of designs from the loose Treatment Structure Pack that’s to be had inside of Divi. Create a brand new web page and upload a Fullwidth Header Module to a brand new fullwidth phase.

Fullwidth Header Design

Fullwidth Segment Divider

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

Divi Scroll Down Button Fullwidth Header Module

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

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

Divi Scroll Down Button Fullwidth Header Module

Fullwidth Header Textual content

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

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

Fullwidth Header Text

Fullwidth Header Photographs

Scroll right down to Photographs and make a choice a large Header Symbol. I’m opting for a picture that includes the Treatment Structure Pack. You’ll be able to in finding the picture via scrolling down that publish and downloading the picture property.

Fullwidth Header Images

Fullwidth Header Background

Scroll right down to Background. Delete the Background Colour and make a choice the Gradient tab. Exchange the primary Gradient Forestall’s Colour to #2e5b61 and set the placement to twenty-five%. Depart the second one Gradient Forestall at 100% and alter the Colour to rgba(46,91,97,0.5).

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

Fullwidth Header Background

Allow Position Gradient Above Background Symbol.

  • Position Gradient Above Background Symbol: Sure

Fullwidth Header Background

Fullwidth Header Background Symbol

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

  • Place: Most sensible Middle

Fullwidth Header Background Image

Fullwidth Header Structure

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

  • Make Fullscreen: Sure

Divi Scroll Down Button Fullwidth Header Module

Fullwidth Header Scroll Down Icon

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

  • Display Scroll Down Button: Sure

Fullwidth Header Scroll Down Icon

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. Exchange the Rounded Corners to 100px for capsules and telephones.

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

Fullwidth Header Image

Fullwidth Header Identify Textual content

Subsequent, scroll to Identify Textual content. Use H1 for the Heading Stage. Make a choice Cormorant Garamond for the Identify Font, set the Weight to Daring, and the Colour to #e1ecea.

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

Fullwidth Header Title Text

Subsequent, set the Measurement for all 3 display screen sizes. Use 90px for desktops, 40px for capsules, and 24px for telephones. Exchange the Line Peak to at least one.1em.

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

Fullwidth Header Title Text

Fullwidth Header Subtitle Textual content

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

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

Fullwidth Header Subtitle Text

Set the Measurement to 22px for desktops, 20px for capsules, and 16px for telephones. Exchange the Line Peak to at least one.6em.

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

Fullwidth Header Subtitle Text

Fullwidth Header Button

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

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

Fullwidth Header Button

Exchange 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

Fullwidth Header Button

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 Button

Fullwidth Header Scroll Down Buttons Examples

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

The Scroll Down Buttons come with 3 settings. Each and every atmosphere will also be adjusted for every display screen measurement independently. Settings come with:

  • Icon variety – choose between 11 icons. They come with quite a lot of arrow designs without or with background together with non-circled, rotated, and forged.
  • Colour – the usual Divi coloration selector.
  • Measurement – the usual Divi measurement adjustment.

Fullwidth Header Scroll Down Button Examples

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

Scroll Down Button Instance One

For our first instance, we’ll use a non-circled icon with no background. Make a choice the primary icon, exchange the Colour to #e1ecea, and alter the Measurement to 66px for desktops, 60px for capsules, and 50px for telephones.

  • Icon: 1st icon
  • Colour: #e1ecea
  • Measurement: 66px for desktops, 60px for capsules, 50px for telephones

This creates a mild inexperienced down arrow that works smartly with the remainder of the design and sticks out sufficient to tell the person.

Scroll Down Button Example One

Scroll Down Button Instance Two

For our 2d instance, we’ll use a rotated icon. Make a choice the 7th icon and alter the Colour to #e8c553. We’ll set the icon higher for this one. Exchange the Measurement to 78px for desktops, 70px for capsules, and 60px for telephones.

  • Icon: 7th icon
  • Colour: #e8c553
  • Measurement: 78px for desktops, 70px for capsules, 60px for telephones

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

Scroll Down Button Example Two

Scroll Down Button Instance 3

For our 3rd instance, we’ll use an icon that’s rotated and has a background. This colours the background and creates the icon with a gap that permits the background symbol of the site to turn via. For the most efficient effects, we’ll want to pay shut consideration to the icon’s measurement and the colour of the button’s background.

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

  • Icon: 8th icon
  • Colour: #0e4951
  • Measurement: 60px for desktops, 56px for capsules, 50px for telephones

The golf green is a darker color of the golf green within the background. The darker color sticks out over the golf green and nonetheless suits the remainder of the structure.

Scroll Down Button Example Three

Scroll Down Button Instance 4

What if you wish to mix colours, so you might have a background coloration in the back of the cutout icon? We will be able to do that with CSS. For this case, we’ll use CSS to create a background form in the back of the icon that can display in the course of 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. Exchange the Measurement to 50px for desktops, 40px for capsules, and 30px for telephones.

  • Icon: 11th
  • Icon Colour: #e1ecea
  • Measurement: 50px for desktops, 40px for capsules, 30px for telephones

Scroll Down Button Example Four

Subsequent, pass to the Complicated 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 structure provides padding to the Most sensible, Proper, Backside, and Left. I’ve used this padding to create a background oval that is going smartly with the design of the header the use of design cues from the structure.

Scroll Down Button Example Four

Scroll Down Buttons Effects

Desktop Scroll Down Button Instance One

Desktop Scroll Down Button Example One

Telephone Scroll Down Button Instance One

Phone Scroll Down Button Example 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 come with for your Divi Fullwidth Header Module. The scroll button contains a number of icons to choose between and you’ll taste its coloration and measurement. The usage of the CSS box, you’ll taste the button even additional. The combos of the button’s styling choices and CSS provide you with a whole lot of design probabilities along with your Scroll Down Buttons.

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

The publish Methods to Come with a Scroll Down Button in Your Divi Fullwidth Header Module gave the impression first on Sublime Subject matters Weblog.

WordPress Web Design

[ continue ]

Submit a Comment