Divi’s sticky choices assist you construct a ton of various designs on your web sites. These days’s put up provides any other educational to the listing of items you’ll be able to reach and it is going to confidently lend a hand spark creativity. We’re going to turn you how you can create a sticky background masks, and feature this masks observe the customer on scroll till the phase’s finish. This educational combines Divi’s sticky choices with the filter out mix modes. You’ll have the ability to obtain the JSON document totally free as neatly!

Let’s get to it.

Preview

Ahead of we dive into the academic, let’s take a handy guide a rough take a look at the result throughout other display sizes.

Desktop

sticky background mask

Cellular

sticky background mask

Obtain The Format for FREE

To put your palms at the loose structure, you’re going to first wish to obtain it the usage of the button underneath. To achieve get admission to to the obtain it is very important subscribe to our Divi Day-to-day electronic mail listing by way of the usage of the shape underneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Format pack each Monday! For those who’re already at the listing, merely input your electronic mail deal with underneath and click on obtain. You’re going to no longer be “resubscribed” or obtain further emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:prior to { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media simplest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Download For Free

Obtain For Unfastened

Sign up for the Divi E-newsletter and we can electronic mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus lots of alternative superb and loose Divi sources, pointers and tips. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind on your electronic mail deal with underneath and click on obtain to get admission to the structure pack.

You may have effectively subscribed. Please take a look at your electronic mail deal with to verify your subscription and get get admission to to loose weekly Divi structure packs!

1. Create Design in Divi

Upload New Phase

Background Symbol

Get started by way of including a brand new phase to the web page you’re operating on. Add a background symbol of your selection.

  • Background Symbol Dimension: Duvet

sticky background mask

Spacing

Transfer directly to the phase’s design tab and take away all default peak and backside padding within the spacing settings.

  • Best Padding: 0px
  • Backside Padding: 0px

sticky background mask

Overflows

Disguise the phase’s overflows within the complicated tab subsequent.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

sticky background mask

Upload Row #1

Column Construction

Proceed by way of including a brand new row the usage of the next column construction:

sticky background mask

Sizing

With out including modules, open the row settings and alter the sizing settings accordingly:

  • Width: 100%
  • Max Width: 100%

sticky background mask

Spacing

Take away all default peak and backside padding as neatly.

  • Best Padding: 0px
  • Backside Padding: 0px

sticky background mask

Filters

We’re additionally including a mix mode to this row. This mix mode will lend a hand us create a masks afterward within the educational.

  • Mix Mode: Display screen

sticky background mask

Z Index

To verify this row stays underneath the second one row we’ll upload to the phase, we’re enhancing the z index within the complicated tab.

  • Z Index: 9

sticky background mask

Column Settings

Subsequent, we’ll open the column settings.

sticky background mask

Background Colour

We’re the usage of a fully white background coloration. Some other coloration you employ right here will display in the course of the phase background symbol, so it’s essential to stay with a wholly white coloration.

  • Background Colour: #ffffff

sticky background mask

Major Component CSS

We’re additionally including a top price to the principle part within the complicated tab. After we flip the row sticky, this top will make certain that the column covers all the phase background symbol all the time.

top: 100vh;

sticky background mask

Upload Textual content Module to Row

Depart Content material Field Empty

Whenever you’ve finished the row settings, upload a Textual content Module to its column. Depart the content material field empty. We’re, as an alternative, the usage of this module to create a form that finds part of the phase background symbol.

sticky background mask

Background Colour

To permit the mix mode to turn a work of the phase’s background symbol, we’re the usage of a darker background coloration for this module.

  • Background Colour: #0b3835

sticky background mask

Sizing

Then, we’ll navigate to the design tab and alter the sizing settings as follows:

  • Width:
    • Desktop: 20vw
    • Pill & Telephone: 70vw
  • Top:
    • Desktop: 30vh
    • Pill & Telephone: 10vh

sticky background mask

Spacing

We’re including some peak margin as neatly.

  • Best Margin: 3vh

sticky background mask

Border

And we’ll come with some rounded corners.

  • All Corners: 15px

sticky background mask

Upload Row #2

Column Construction

Proceed by way of including any other row to the phase the usage of the next column construction:

sticky background mask

Sizing

With out including modules but, open the row settings and make the next adjustments to the sizing settings:

  • Width: 100%
  • Max Width: 100%

sticky background mask

Z Index

Building up the row’s z index as neatly. This may increasingly lend a hand make certain the row’s content material stays on peak of the former row.

  • Z Index: 12

sticky background mask

Upload Textual content Module to Row

Upload H2 Content material

Time so as to add modules, beginning with a primary Textual content Module containing some H2 content material of your selection.

sticky background mask

H2 Textual content Settings

Taste the H2 textual content settings as follows:

  • Heading 2 Font: Playfair Show
  • Heading 2 Textual content Alignment: Middle
  • Heading 2 Textual content Colour: #0b3835
  • Heading 2 Textual content Dimension:
    • Desktop: 150px
    • Pill & Telephone: 45px
  • Heading 2 Line Top: 1.2em

sticky background mask

Sizing

Then, navigate to the sizing settings and observe the next settings:

  • Max Width: 980px
  • Module Alignment: Middle

sticky background mask

Spacing

Come with some destructive peak margin as neatly.

sticky background mask

Upload Button Module to Row

Upload Reproduction

The following and ultimate module we’d like on this row is a Button Module. Upload some replica of your selection.

sticky background mask

Button Alignment

Transfer directly to the module’s design tab and alter the button alignment.

  • Button Alignment: Middle

sticky background mask

Button Settings

Then, move to the button settings and observe the next kinds:

  • Use Customized Kinds For Button: Sure
  • Button Textual content Dimension: 15px
  • Button Textual content Colour: #ffffff
  • Button Background Colour: #000000
  • Button Border Width: 0px
  • Button Border Radius: 100px

sticky background mask

  • Button Font: Montserrat
  • Button Font Weight: Semi Daring
  • Button Font Taste: Uppercase

sticky background mask

Spacing

We’re including some customized margin and padding values to the spacing settings as neatly.

  • Backside Margin: 60vh
  • Best Padding: 15px
  • Backside Padding: 15px
  • Left Padding: 40px
  • Proper Padding: 40px

sticky background mask

2. Follow Sticky Results

Open Row #1

Now that we’ve constructed the root of our design, it’s time to use the sticky kinds. Open the primary row’s settings.

sticky background mask

Follow Sticky Choices

Navigate to the complicated tab and observe the next sticky settings:

  • Sticky Place: Keep on with Best
  • Backside Sticky Restrict: Phase
  • Offset From Surrounding Sticky Parts: Sure
  • Transition Default and Sticky Kinds: Sure

sticky background mask

Textual content Module Sticky Choices

Now that the row has been became sticky, we will observe sticky kinds to the Textual content Module within the row. Open the module’s settings.

sticky background mask

Sticky Sizing

Then, navigate to the sizing settings and observe the next sticky sizing values:

  • Sticky Width: 80vw
  • Sticky Top: 90vh

sticky background mask

Transition Length

Ultimate however no longer least, navigate to the complicated tab and building up the transition period. That’s it!

  • Transition Length: 500ms

sticky background mask

Preview

Now that we’ve long gone via all of the steps, let’s take a last take a look at the result throughout other display sizes.

Desktop

sticky background mask

Cellular

sticky background mask

Ultimate Ideas

On this put up, we’ve, as soon as once more, proven you how you can get inventive with Divi’s sticky choices. Extra particularly, we’ve proven you how you can mix Divi’s filters settings and sticky choices to create a sticky background masks. You had been in a position to obtain the JSON document totally free as neatly. You probably have any questions or tips, be happy to go away a remark within the remark phase underneath.

For those who’re keen to be informed extra about Divi and get extra Divi freebies, make sure to subscribe to our email newsletter and YouTube channel so that you’ll all the time be one of the most first other folks to grasp and get advantages from this loose content material.

The put up How to Create a Sticky Background Mask with Divi seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]