Making a customized scroll button for your fullscreen header is a brilliant design spice up to fortify person enjoy, permitting the person to scroll to the following phase of your web page with no need to scroll. Including some attention-grabbing animation in your button might also fortify your conversions. Divi already has a integrated scroll button to make issues in reality simple so that you can upload this option on fullwidth headers. However nowadays I assumed I’d display you tips on how to use the button module to perform the similar capability with some trendy design options.

On this educational, I’m going to turn you tips on how to flip a button module right into a customized scroll button that pops up on the backside of the display screen while you load the web page. I’ll even be throwing in a couple of design guidelines alongside the best way for inspiration.

Let’s get began.

Sneak Peek

Here’s a peek on the design we can be construction in combination.

scroll button layout example

Take a look at how the be informed extra CTA pops up when loading the web page and scrolls to the following phase when clicked.

scroll button gif

Divi is All You Want for This Instructional

For this educational, all you want is Divi. I’ll be the use of a picture from one of the most structure packs, some design magic with the visible builder, and a couple of customized css snippets so as to add a finishing touch to our scroll button.

Designing the Fullscreen Header

To design the fullscreen header, create a brand new web page and deploy the visible builder. Then upload a fullwidth phase with a fullwidth header module.

scroll button fullwidth header

Subsequent, replace the fullwidth header settings as follows:

Identify: [enter title]
Button #1 Textual content: [enter text]
Content material: [enter content]

scroll button fullwidth content

Background Colour: #0a2f5e
Background Symbol: [enter 800×500 image]
Background Symbol Measurement: Precise Measurement

scroll button fullwidth background

Beneath the design tab, trade the structure to focused orientation and make a choice to make it complete display screen.

Textual content & Emblem Orientation: Middle
Make Fullscreen: YES

scroll button header layout

Give your header an overlay colour so to learn your textual content more straightforward.

Background Overlay Colour: rgba(10,47,94,0.8)

scroll button header overlay

Then design your identify textual content, content material textual content and button #1 with the next settings:

Identify Font: Poppins
Identify Font Weight: Semi Daring
Identify Textual content Measurement: 4vw
Identify Line Peak: 1.2em

Content material Font: Karla
Content material Font Weight: Common
Content material Textual content Measurement: 16px
Content material Line Peak: 1.5em

Use Customized Kinds for Button One: YES
Button One Textual content Measurement: 18px
Button One Background Colour: #4daaf2
Button One Border Colour: #4daaf2
Button One Border Radius: 100px
Button One Font: Karla
Button One Weight: Daring

scroll button fullwidth header design settings

That can do it for our fullwidth header. Now for the joys stuff!

Developing the Customized Scroll Button Phase

For this scroll button, I would like it to take a seat flush at the left aspect of the web page. So upload a 3 column row in your phase.

Then upload a button module to the left column.

scroll button module

Replace the button module settings as follows:

Button Textual content: Be told Extra
Button URL: #two

The #two URL will function an anchor hyperlink to the highest of the following phase which can come with the matching CSS ID “two”. That is the fundamental capability of making a customized scroll button.

Use Customized Kinds for Button One: YES
Button Textual content Measurement: 24px (desktop), 20px (pill)
Button Textual content Colour: #0a2f5e

Button Background Gradient Left: #ffffff
Button Background Gradient Proper: #dddddd
Gradient Route: 90deg
Get started Place: 70%
Finish Place: 0%

Button Border Width: 0px
Button Border Radius: 0px
Button Font: Karla
Button Weight: Daring
Button Icon: [down arrow]
Best Display Icon On Hover for Button: NO

Customized Padding: 1.5em Most sensible, 1.5em Backside, 30% Left

Animation: Slide
Animation Route: Up

Beneath the Complex tab, upload the next customized css to the primary component enter field:

show: block !necessary;

This permits the button to span the overall width of the column.

Then upload the next css to the After enter field:

place: absolute; proper: 12%;

This positions the arrow icon to the correct of the button.

scroll button

Save your settings.

Customise Phase Settings

Now we want to customise the phase settings to deliver the button up over the fullwidth phase above and get the spacing proper.

Replace the next phase settings:

Background Colour: rgba(255,255,255,0)

Customized Margin: -112px Most sensible
Customized Padding: 0px Most sensible 0px Backside

scroll button section settings

Alter Row Spacing

Now we want to alter the row spacing as neatly. Replace the next row settings.

Make this Row Fullwidth: YES
Use Customized Gutter Width: YES
Gutter Width: 1
Customized Padding: 0px Most sensible, 0px Backside

scroll button

Now take a look at the are living web page. You’re going to see a button popup at the backside left of your fullscreen header when the web page so much.

scroll button gif

Developing Phase #3: The menu field and featured content material

Now that we’ve got our button in a position to scroll, let’s upload any other phase to create a novel scroll-to phase.

Create a typical phase with a one-third two-thirds column construction.

column structure

This column construction is vital as a result of it’ll let us create a left column the similar measurement as the only immediately above it with our button.

Phase Settings

Earlier than you get started including modules, let’s first replace our settings for the phase with the next:

Background Colour: #eaedf2

Customized Padding: 0px Most sensible, 0px Backside

Within the Complex tab, upload the Customized CSS ID “two”. This may increasingly permit you button to scroll to the highest of this phase.

scroll button add css id

Row Settings

To hurry issues up, replica the row taste of the row containing the button within the above phase. Then paste the row taste to your new row.

Within the content material tab, replace column 1 background colour to #ffffff. This may increasingly function the background of your menu field beneath your button.

scroll button add white bg

Then replace the next padding to your columns:

Customized Padding: 10% backside
Column 2 Customized Padding: 10% Most sensible, 10% Left, 6% Proper

scroll button row padding

Now we’re in a position so as to add our sidebar module to our left column. However ahead of we do this, you want to create a customized menu.

Create Your Customized Menu

For sake of time, I’m going to provide the brief rationalization of tips on how to create a menu. Right here is going:

  1. Navigate to Look > Menus
  2. Click on Create New Menu
  3. Upload Menu Identify
  4. Click on Create Menu button
  5. Make a choice Pages, posts, and so on. that you wish to have to incorporate for your menu. Or create customized hyperlinks.
  6. Arrange the Menu Construction
  7. Save Menu

scroll button create menu

Create Customized Menu Widget

Practice those steps to create a navigation menu widget in order that we will be able to upload it to our web page by way of the visible builder.

  1. Navigate to Look > Widgets
  2. Create a brand new widget space via getting into the widget identify and clicking the create button
  3. Drag the Navigation Menu Widget into the brand new widget space you created.
  4. Toggle open the widget settings and make a choice the menu you simply created.
  5. Click on Save

scroll button widget area

Now we will be able to return to our web page and deploy the visible builder.

Upload Sidebar Module with New Menu

Within the left column of our backside phase, upload a sidebar module.

scroll button sidebar module

Replace the sidebar to incorporate the widget space you simply created:

scroll button add menu

Design Sidebar Module

Now you’ll be able to fit the design of your menu hyperlinks with the structure via updating the next design settings:

Display Border Separator: NO

Frame Font: Karla
Frame Font: Daring
Frame Textual content Colour: #0a2f5e
Frame Textual content Measurement: 24px (desktop), 20px (pill)
Frame Line Peak: 2.3em

Customized Padding: 20px Most sensible, 10% Backside, 30% Left

The 30% left padding is useful to line up with the button textual content above which additionally has a left padding of 30%.

Field Shadow: [see screenshot]
Field Shadow Horizontal Place: 0px
Field Shadow Vertical Place: 0px
Field Shadow blur Power: 0px
Field Shadow Unfold Power: 1px
Shadow Colour: #f1f1f1

This can be a inventive manner so as to add a border outdoor of our field and upload a slight separation between the scroll button and the menu field.

scroll button sidebar image

Including Content material to the Proper Column

In the correct two-thirds column of the phase, we’re going to upload a some content material to come up with an concept of ways you employ this structure to your personal web site.

First, upload a divider module with the next settings:

Colour: #0a2f5e
Divider Place: Vertically Focused
Divider Weight: 2px
Peak: 18px
Width: 100px

Beneath the Divider Module, upload a textual content module with the next content material:

01. About

Then replace the design settings as follows:

Heading 2 Font: Poppins
Heading 2 Textual content Colour: #0a2f5e
Heading 2 Textual content Measurement: 18px
Customized Margin: -17px Most sensible
Customized Padding: 120px Left

Tip: With the intention to get the divider to be at the left and vertically focused of the header, fit the divider peak (18px) with the px worth of your header textual content (18px). Then use customized margin to deliver transfer the header up the similar collection of pixels (minus one to account for the width of the divider line) the use of the unfavourable pixel worth (-17px). After that, give your header sufficient left padding to account for the 100px period of the divider line (120px).

scroll button header design

Then upload any other textual content module beneath with the next settings:

scroll button content text module

Content material:

Vivamus suscipit tortor eget felis porttitor volutpat.

Your content material is going right here. Edit or take away this article inline or within the module Content material settings. You'll additionally taste each side of this content material within the module Design settings or even follow customized CSS to this article within the module Complex settings.

Textual content Font: Karla
Textual content Textual content Measurement: 16px
Textual content Line Peak: 1.6em

Heading 3 Font: Poppins
Heading 3 Font Weight: Semi Daring
Heading 3 Textual content Colour: #0a2f5e
Heading 3 Textual content Measurement: 3vw (pill), 40px (pill)
Heading 3 Line Peak: 1.2em

Customized Padding: 5% Most sensible, 2% Backside

Save Settings.

Create the Closing Phase

To create the ultimate phase, observe those steps:

  1. Replica the ultimate phase.
  2. Replace the phase background colour to #ffffff
  3. Trade row column to two-thirds one-third construction.
  4. Beneath row settings, trade the customized most sensible padding to ten%.
  5. Upload Column 1 Customized padding: 10% Left, 6% Proper
  6. Repair Column 2 Customized Padding to default.
  7. Save settings.
  8. Delete the sidebar module within the left column.
  9. Transfer all modules in the correct column over to the left column and replace the content material.
  10. Then upload a picture in the correct column.

Right here the the general consequence…

scroll button final layout

Converting your Scroll Button Location

To modify your button location, merely drag it to one of the most 3 columns within the row. Easy as that!

scroll button move button

Believe the Well-liked Utility

This practice scroll button with the menu field will have to indubitably get you fascinated by the entire other packages. For starters, you’ll be able to complement the menu within the field beneath the scroll button with the rest! This may be an excellent spot for a touch shape, electronic mail optin, or any other name to motion of a few type.

This is an instance of what an electronic mail optin may appear to be…

scroll button email optin

Seems to be Nice on Cellular Too

This structure scales beautiful neatly on cell. The scroll button will merely scale the overall width of the display screen on pill and smartphone.

mobile image

Ultimate Ideas

I in reality loved construction this structure and exploring the chances it brings to the desk. The customized scroll button by myself is superb approach to make your fullscreen sections extra outstanding. I’m hoping this design will lend a hand encourage you to create much more distinctive buttons and CTA’s to your personal web site.

I stay up for listening to from you within the feedback.

Cheers!

The publish Design a Unique Full Screen Divi Layout with an Animated Scroll Button gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]