Divi’s sticky possible choices provide help to assemble a ton of more than a few designs for your internet pages. At the present time’s put up supplies any other tutorial to the file of things you’ll be able to achieve and it is going to expectantly lend a hand spark creativity. We’re going to show you find out how to create a sticky background mask, and have this mask follow the client on scroll until the section’s end. This tutorial combines Divi’s sticky possible choices with the filter combine modes. You’ll be capable of download the JSON file for free as neatly!
Let’s get to it.
Preview
Previous than we dive into the training, let’s take a at hand information a coarse take a look on the finish outcome right through different computer screen sizes.
Desktop
Mobile
Download The Structure for FREE
To place your arms on the unfastened construction, you’ll be able to first need to download it the usage of the button beneath. To understand get right of entry to to the download it is important to subscribe to our Divi Day by day e mail file via the usage of the form beneath. As a brand spanking new subscriber, you’ll be able to download a lot more Divi goodness and a unfastened Divi Structure pack every Monday! While you’re already on the file, simply enter your e mail take care of beneath and click on on download. You’ll not be “resubscribed” or download further emails.
@media most straightforward computer screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous to { border-top-color: #ffffff !essential; border-left-color: transparent !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: transparent !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 { color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous 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 powerful { 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 powerful, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}
Download For Loose
Join the Divi Newsletter and we can e mail you a replica of the ultimate Divi Landing Internet web page Structure Pack, plus lots of various very good and unfastened Divi assets, pointers and guidelines. Practice along and you’ll be able to be a Divi take hold of in no time. In case you are already subscribed simply sort on your e mail take care of beneath and click on on download to get right of entry to the construction pack.
You’ll have successfully subscribed. Please take a look at your e mail take care of to verify your subscription and get get right of entry to to unfastened weekly Divi construction packs!
1. Create Design in Divi
Add New Segment
Background Image
Get began via together with a brand spanking new section to the internet web page you’re running on. Upload a background image of your variety.
- Background Image Size: Quilt
Spacing
Switch without delay to the section’s design tab and remove all default height and bottom padding inside the spacing settings.
- Top Padding: 0px
- Bottom Padding: 0px
Overflows
Duvet the section’s overflows inside the complicated tab next.
- Horizontal Overflow: Hidden
- Vertical Overflow: Hidden
Add Row #1
Column Development
Continue via together with a brand spanking new row the usage of the following column building:
Sizing
Without together with modules, open the row settings and change the sizing settings accordingly:
- Width: 100%
- Max Width: 100%
Spacing
Remove all default height and bottom padding as neatly.
- Top Padding: 0px
- Bottom Padding: 0px
Filters
We’re moreover together with a mixture mode to this row. This mixture mode will lend a hand us create a mask shortly inside the tutorial.
- Combine Mode: Show
Z Index
To make sure this row remains beneath the second row we’ll add to the section, we’re improving the z index inside the complicated tab.
- Z Index: 9
Column Settings
Next, we’ll open the column settings.
Background Color
We’re the usage of a fully white background color. Any other color you employ proper right here will show all the way through the section background image, so it’s essential to stick with a fully white color.
- Background Color: #ffffff
Number one Section CSS
We’re moreover together with a height value to the principle element inside the complicated tab. After we turn the row sticky, this height will be sure that the column covers all of the section background image always.
height: 100vh;
Add Text Module to Row
Move away Content material subject matter Box Empty
While you’ve completed the row settings, add a Text Module to its column. Move away the content material subject matter box empty. We’re, as an alternative, the usage of this module to create a sort that reveals a part of the section background image.
Background Color
To allow the combo mode to show a piece of the section’s background image, we’re the usage of a darker background color for this module.
- Background Color: #0b3835
Sizing
Then, we’ll navigate to the design tab and change the sizing settings as follows:
- Width:
- Desktop: 20vw
- Tablet & Phone: 70vw
- Best:
- Desktop: 30vh
- Tablet & Phone: 10vh
Spacing
We’re together with some height margin as neatly.
- Top Margin: 3vh
Border
And we’ll include some rounded corners.
- All Corners: 15px
Add Row #2
Column Development
Continue via together with any other row to the section the usage of the following column building:
Sizing
Without together with modules however, open the row settings and make the following changes to the sizing settings:
- Width: 100%
- Max Width: 100%
Z Index
Increase the row’s z index as neatly. This will now and again lend a hand be sure that the row’s content material subject matter remains on height of the previous row.
- Z Index: 12
Add Text Module to Row
Add H2 Content material subject matter
Time so to upload modules, starting with a number one Text Module containing some H2 content material subject matter of your variety.
H2 Text Settings
Style the H2 text settings as follows:
- Heading 2 Font: Playfair Display
- Heading 2 Text Alignment: Middle
- Heading 2 Text Color: #0b3835
- Heading 2 Text Size:
- Desktop: 150px
- Tablet & Phone: 45px
- Heading 2 Line Best: 1.2em
Sizing
Then, navigate to the sizing settings and observe the following settings:
- Max Width: 980px
- Module Alignment: Middle
Spacing
Include some negative height margin as neatly.
Add Button Module to Row
Add Copy
The next and supreme module we would like in this row is a Button Module. Add some replica of your variety.
Button Alignment
Switch without delay to the module’s design tab and change the button alignment.
- Button Alignment: Middle
Button Settings
Then, cross to the button settings and observe the following varieties:
- Use Custom designed Sorts For Button: Positive
- Button Text Size: 15px
- Button Text Color: #ffffff
- Button Background Color: #000000
- Button Border Width: 0px
- Button Border Radius: 100px
- Button Font: Montserrat
- Button Font Weight: Semi Bold
- Button Font Style: Uppercase
Spacing
We’re together with some custom designed margin and padding values to the spacing settings as neatly.
- Bottom Margin: 60vh
- Top Padding: 15px
- Bottom Padding: 15px
- Left Padding: 40px
- Right kind Padding: 40px
2. Follow Sticky Effects
Open Row #1
Now that we’ve built the basis of our design, it’s time to make use of the sticky varieties. Open the principle row’s settings.
Follow Sticky Possible choices
Navigate to the complicated tab and observe the following sticky settings:
- Sticky Position: Stick to Top
- Bottom Sticky Restrict: Segment
- Offset From Surrounding Sticky Elements: Positive
- Transition Default and Sticky Sorts: Positive
Text Module Sticky Possible choices
Now that the row has been turned into sticky, we will be able to observe sticky varieties to the Text Module inside the row. Open the module’s settings.
Sticky Sizing
Then, navigate to the sizing settings and observe the following sticky sizing values:
- Sticky Width: 80vw
- Sticky Best: 90vh
Transition Length
Last then again not least, navigate to the complicated tab and increase the transition duration. That’s it!
- Transition Length: 500ms
Preview
Now that we’ve lengthy long past through the entire steps, let’s take a final take a look on the finish outcome right through different computer screen sizes.
Desktop
Mobile
Final Concepts
In this put up, we’ve, once all over again, confirmed you find out how to get creative with Divi’s sticky possible choices. Additional particularly, we’ve confirmed you find out how to combine Divi’s filters settings and sticky possible choices to create a sticky background mask. You have got been in a position to acquire the JSON file for free as neatly. If when you’ve got any questions or guidelines, be happy to go away a statement inside the statement section beneath.
While you’re willing to be informed further about Divi and get further Divi freebies, you will have to undoubtedly subscribe to our email newsletter and YouTube channel in order that you’ll always be one of the most an important first other people to know and benefit from this unfastened content material subject matter.
The put up How to Create a Sticky Background Mask with Divi appeared first on Elegant Themes Blog.
0 Comments