Divi’s Fullwidth Header Module includes a button that indicates to the user they can scroll down. Once they click it, they automatically get redirected to the next section. This is a simple button with several icons to choose from and its color and size are fully customizable. In this post, we’ll look at how to customize it and see four Scroll Down Buttons you can include in your Divi Fullwidth Header Module. We’ll also see how to style it with CSS for even more design options.
Let’s get started!
Scroll Down Buttons Preview
First, let’s look at 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 Three
Phone Scroll Down Buttons Example Three
Desktop Scroll Down Buttons Example Four
Phone Scroll Down Buttons Example Four
Scroll Down Buttons Fullwidth Header Design
First, we’ll create our Fullwidth Header design. I’m building it from scratch using designs from the free Therapy Layout Pack that’s available within Divi. Create a new page and add a Fullwidth Header Module to a new fullwidth section.
Fullwidth Section Divider
We’ll add a Divider for this fullwidth header. Open the settings for the Fullwidth Section.
Next, scroll to Dividers. Click the Bottom tab and choose the 8th Divider Style. Set the Color to #e5e8f0 and enter 10vw for the Height. Close the section’s settings.
Fullwidth Header Text
Next, open the Fullwidth Header Module and add your Title, Subtitle, and Button Text. Delete the dummy text for the Body Content and leave it empty.
Fullwidth Header Images
Scroll down to Images and choose a wide Header Image. I’m choosing an image that comes with the Therapy Layout Pack. You can find the image by scrolling down that post and downloading the image assets.
Fullwidth Header Background
Scroll down to Background. Delete the Background Color and select the Gradient tab. Change the first Gradient Stop’s Color to #2e5b61 and set the position to 25%. Leave the second Gradient Stop at 100% and change the Color to rgba(46,91,97,0.5).
Enable Place Gradient Above Background Image.
Fullwidth Header Background Image
Next, select the Background Image tab and choose a full-screen image. I’m using another image from the Therapy Layout Pack.
Fullwidth Header Layout
Next, select the Design tab and enable Make Fullscreen.
Fullwidth Header Scroll Down Icon
Next, enable Show Scroll Down Button. We’ll style this button in our examples, so we’ll leave it in the default settings for now.
Fullwidth Header Image
Next, scroll to Image and change the Top Left Rounded Corners to 200px for desktops. Set the rest of the Rounded Corners to 0px. Change the Rounded Corners to 100px for tablets and phones.
Fullwidth Header Title Text
Next, scroll to Title Text. Use H1 for the Heading Level. Choose Cormorant Garamond for the Title Font, set the Weight to Bold, and the Color to #e1ecea.
Next, set the Size for all three screen sizes. Use 90px for desktops, 40px for tablets, and 24px for phones. Change the Line Height to 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.
Set the Size to 22px for desktops, 20px for tablets, and 16px for phones. Change the Line Height to 1.6em.
Fullwidth Header Button
Scroll down to the settings for Button One and enable Use Custom Styles for Button One. Change the Size to 14px, the Text Color to #2e5b61, and the Background Color to #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.
For the Button Padding, use 20px for the Top and Bottom and 40px for the Left and Right.
Fullwidth Header Scroll Down Buttons Examples
Now that we have our Fullwidth Header, let’s see how to style the Scroll Down Buttons. We’ll look at four examples with various combinations of icons, colors, and sizes.
The Scroll Down Buttons include three settings. Each setting can be adjusted for each screen size independently. Settings include:
It also includes a CSS field in the Advanced tab. We’ll use all these settings.
Scroll Down Button Example One
For our first example, we’ll use a non-circled icon without a background. Select the first icon, change the Color to #e1ecea, and change the Size to 66px for desktops, 60px for tablets, and 50px for phones.
This creates a light green down arrow that works well with the rest of the design and stands out enough to inform the user.
Scroll Down Button Example Two
For our second example, we’ll use a circled icon. Select the seventh icon and change the Color to #e8c553. We’ll set the icon larger for this one. Change the Size to 78px for desktops, 70px for tablets, and 60px for phones.
This color is a variation of the yellow in the layout pack, but it’s lighter which works better over the green background. The icon has sharp corners, but the circle matches the rounded design of the layout.
Scroll Down Button Example Three
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 website to show through. For the best results, we’ll need to pay close attention to the icon’s size and the color of the button’s background.
Select the eighth icon and change its Color to #0e4951. Set the Size to 60px for desktops, 56pc for tablets, and 50px for phones.
The green is a darker shade of the green in the background. The darker shade stands out over the green and still matches the rest of the layout.
Scroll Down Button Example Four
What if you want to combine colors, so you have a background color behind the cutout icon? We can do this with CSS. For this example, we’ll use CSS to create a background shape behind the icon that will show through the cutout icon. The icon itself will use the standard settings.
Select 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 Size to 50px for desktops, 40px for tablets, and 30px for phones.
Next, go to the Advanced tab and scroll down to the Scroll Down Button’s CSS field and enter this CSS:
This CSS format adds padding to the Top, Right, Bottom, and Left. I’ve used this padding to create a background oval that goes well with the design of the header using design cues from the layout.
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 Three
Phone Scroll Down Button Example Three
Desktop Scroll Down Button Example Four
Phone Scroll Down Button Example Four
That’s our look at four Scroll Down Buttons you can include in your Divi Fullwidth Header Module. The scroll button includes several icons to choose from and you can style its color and size. Using the CSS field, you can style the button even further. The combinations of the button’s styling options and CSS give you lots of design possibilities with your Scroll Down Buttons.
We want to hear from you. Do you style the Scroll Down Buttons in your Divi Fullwidth Header Module? Let us know in the comments.
This content was originally published here.