When the Divi sticky choices function was launched, the release post on our blog site was accompanied by live demonstrations that reveal you the adaptability of this brand-new function. To assist you comprehend sticky alternatives much better, and begin utilizing them in your style, we’ll reveal you how to recreate among the live demonstration styles in this tutorial. The style we’re recreating concentrates on stressing your sticky button. It’s is a text-based CTA area that permits you to highlight your call to action in a stunning method. You’ll have the ability to download the JSON declare complimentary too!
Let’s get to it.
Prior to we dive into the tutorial, let’s take a peek at the result throughout various screen sizes.
< img loading=" lazy" class=" with-border aligncenter wp-image-137016 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi.gif" alt=" sticky button" width=" 1000" height=" 616" > Mobile< img loading=" lazy" class=" with-border aligncenter wp-image-137017 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-1.png" alt=" sticky button" width
=” 440″ height =” 933″ srcset =” https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-1.png 440w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-2.png 141w” sizes=” (max-width: 440px )100vw, 440px” > Download The CTA Area Design free of charge To lay your hands on the totally free CTA area design, you will initially require to download it utilizing the button listed below. To access to the download you will require to register for our Divi Daily e-mail list by utilizing the type listed below. As a brand-new customer, you will get much more Divi goodness and a totally free Divi Design pack every Monday! Just enter your e-mail address listed below and click download if you’re currently on the list. You will not be” resubscribed” or get additional e-mails.< div class=" et_bloom_locked_container et_bloom_optin_1" data-page_id =" 137317" data-optin_id=" optin_1" data-list_id=" mailchimp_c886a2fc0a" data-current_optin_id=" optin_1" >
Download the Files
1. Develop Component Structure
Include New Area
Start by including a brand-new area to the page you’re dealing with. This can be a brand-new page or an existing one however we suggest including it to a page that has some material in it currently, so there suffices scrolling area for you to really see the results come to life. Open the area settings and use a background color of your option.
- Background Color: # 00965a
< img loading=" lazy" class=" with-border aligncenter wp-image-137019 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi.jpg" alt =" sticky button "width=" 880" height =" 833 "srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-8.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-9.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-10.jpg 610w" sizes
- =”( max-width: 880px) 100vw, 880px” > Sizing Proceed to the area’s style tab and use a max height. This max height will assist us make sure that the area’s height is restricted. Max Height: 100vh< img loading=" lazy" class=" with-border aligncenter wp-image-137020 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs2.jpg" alt=" sticky button" width=" 880" height=" 848" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs2.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs2-300x289.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs2-768x740.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs2-610x588.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" >
Given that we’ll be using some scroll results later to the tutorial, we’ll likewise require to conceal the area’s overflows to ensure absolutely nothing goes beyond the area container.
- Horizontal Overflow: Hidden
- Vertical Overflow: Hidden
< img loading=" lazy "class=" with-border aligncenter wp-image-137021 size-full" src =" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-1.jpg" alt =" sticky button" width =" 880 "height=" 855" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-1.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-11.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-12.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-13.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Include New Row Column Structure When the area settings remain in location, include a brand-new row utilizing the following column structure:< img loading=" lazy" class=" with-border aligncenter wp-image-137022 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs4.jpg" alt=" sticky button" width=" 880" height=" 706" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs4.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs4-300x241.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs4-768x616.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs4-610x489.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Sizing Without including any modules yet, open the row settings
and use some customized sizing settings. These sizing settings will permit the row container to use up the whole row’s width which offers our style a fullscreen result. Width: 100 %Max Width: none< img loading=" lazy" class=" with-border aligncenter wp-image-137023 size-full
- ” src =” https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs5.jpg” alt=” sticky button” width=” 880″ height=” 862″ srcset=” https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs5.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs5-300×294.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs5-768×752.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs5-610×598.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px” > Column 2 Settings Spacing Open the column 2 settings next and use some custom-made cushioning worths throughout various screen sizes
. Bottom Cushioning: 60px Left
: Tablet & Phone: 5 %Right Padding: Desktop: 10vw Tablet & Phone: 5%< img loading =" lazy" class=" with-border aligncenter wp-image-137024 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs6.jpg" alt=" sticky
- button” width=
- ” 880″ height= “918” srcset=” https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs6.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs6-288×300.jpg 288w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs6-768×801.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs6-610×636.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px” > Include Text Module to Column 1 Include Material Time to include modules, beginning with a Text Module in column 1. Include some material of your option. To develop the precise very same style as in the sneak peek of this post, place some pertinent words that assist empower the CTA that we’ll position in column 2 later the tutorial. Make sure you put each word inside its own line
.< img loading=" lazy" class=" with-border aligncenter wp-image-137025 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs7.jpg" alt =" sticky button" width =" 880 "height= "862" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs7.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs7-300x294.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs7-768x752.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs7-610x598.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Text Settings Carry on to the module’s style tab and alter the text settings. You’ll see that we’re utilizing viewport width as our text size system. Utilizing the viewport width system will assist us keep the text responsive throughout all screen sizes. Text Typeface: Work Sans Text Typeface Weight: Strong Text Color: # 000000 Text Size: 10vw Text Line Height: 0.2 em< img loading=" lazy" class =" with-border aligncenter
wp-image-137026 size-full” src= “https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs8.jpg” alt=” sticky button” width =” 880 “height=” 849″ srcset= “https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs8.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs8-300×289.jpg
- 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs8-768×741.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs8-610×589.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px” > Include Text Module to Column 2 Include Material On to the 2nd column. There, include a Text Module with some call to action copy of your option.< img loading=" lazy" class=" with-border aligncenter wp-image-137027 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs9.jpg" alt=" sticky button" width=" 880" height=" 864" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs9.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs9-300x295.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs9-768x754.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs9-610x599.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Text Settings Proceed to the module’s style tab and alter the text settings appropriately: Text Font style: Work Sans Text Color: #ffffff Text Size: 56px Text Line Height: 1.2 em< img loading=" lazy" class=" with-border aligncenter wp-image-137028 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs10.jpg" alt=" sticky button" width=" 880" height=" 886" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs10.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs10-298x300.jpg 298w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs10-150x150.jpg 150w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs10-768x773.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs10-610x614.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Sizing Designate a max width to the Text Module. Max Width: 400px< img loading=" lazy" class=" with-border aligncenter wp-image-137029 size-full" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs11.jpg" alt=" sticky button" width=" 880" height=" 877" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs11.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs11-300x300.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs11-150x150.jpg 150w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs11-768x765.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/09/asbbs11-610x608.jpg
- 610w “sizes =”( max-width: 880px) 100vw, 880px” > Include Button Module to Column 2 Include Copy The last and next module we require in our style is a Button Module in column 2. Include some copy of your option.< img loading=" lazy" class=" with-border aligncenter wp-image-137030 size-full" src=" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-2.jpg" alt=" sticky button" width=" 880" height=" 833" srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-2.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-14.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-15.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-16.jpg 610w" sizes ="( max-width: 880px) 100vw, 880px "> Button Settings Carry on to the module’s style tab and design the button appropriately
: Utilize Custom-made Styles For Button: Yes Button Text Size: 16px Button Text Color: # 000000 Button Background Color:
- Default: #ffffff Hover: rgba( 255,255,255,0.7 )Button Border Width: 5px Button Border Color: rgba( 0,0,0,0
- )< img loading=" lazy "class=
- ” with-border aligncenter wp-image-137031 size-full” src=” https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-3.jpg” alt =” sticky button” width=” 880
- ” height =” 914″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-3.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-17.jpg 289w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-18.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-19.jpg 610w” sizes=” (max-width: 880px) 100vw, 880px “> Button Border Radius: 5px Button Typeface:
Work Sans Program Button Icon: No 2. Use Scroll & Sticky Impacts Include Vertical Movement to Text Module in Column 1 Now that the structure of our style has actually been set, it
- ‘s time to use the scroll and sticky results! Open the Text Module in column 1 and
- use some responsive vertical movement. Enable Vertical Movement: Yes
- Beginning Offset &: Desktop
- : 10 Tablet & Phone:
- Ending Offset: Desktop: -10 Tablet
& Phone: 0 Movement Result Trigger: Top of Component< img loading=" lazy" class =" with-border aligncenter wp-image-137033 size-full" src =" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-5.jpg" alt =" sticky button" width =" 880" height =" 943" srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-5.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-23.jpg 280w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-24.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-25.jpg 610w" sizes= "( max-width: 880px )100vw, 880px" > Include Sticky Impact to Column 2 Next, we’ll open the column 2 settings and use a sticky result on desktop.
- Given that the columns and modules on smaller sized screen
- sizes are positioned listed below each other, rather of beside each other,
- we’ll revive the sticky settings to” Do Not Stick
- ” on smaller sized screen sizes. Sticky Position: Desktop
- : Adhere To Leading Tablet & Phone: Do Not Stick Sticky Leading Offset: 80px Bottom Sticky Limitation: Area Offset From Surrounding Sticky Aspects: Yes Shift Default and Sticky Styles: Yes
< img loading =" lazy" class=" with-border aligncenter wp-image-137034 size-full "src =" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-6.jpg" alt="sticky button" width=" 880 "height=" 881" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-6.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-26.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-27.jpg 150w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-28.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-29.jpg 610w "sizes =”( max-width: 880px) 100vw, 880px” > Include Sticky Styling to Button in Column 2 Now that the column 2 has actually been turned sticky, we’ll have the ability to use sticky styling to the column itself and the modules inside the column. The only sticky modifications we’ll make, nevertheless, are concentrated on the button. Open the module, go to the button settings and inverted the text and button colors. That’s it! When you conserve the design and exit the visual home builder, you can view the lovely style reside on your site.
- Button Text Color: #ffffff
- Button Background Color: # 000000
< img loading= "lazy "class =" with-border aligncenter wp-image-137035 size-full "src="https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-7.jpg" alt =" sticky button" width =" 880" height=" 936" srcset =" https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-7.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-30.jpg 282w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-31.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-32.jpg 610w"
880px) 100vw, 880px” > Sneak peek Now that we have actually gone through all the actions, let
‘s take a last take a look at the result throughout various screen sizes. Desktop Mobile< img loading= "lazy" class =" with-border aligncenter wp-image-137017 size-full" src= "https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-1.png" alt=" sticky button" width= "440" height=" 933" srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-1.png 440w, https://websitedesign-usa.com/wp-content/uploads/2020/09/how-to-stress-your-sticky-button-in-a-stunning-cta-area-with-divi-2.png 141w" sizes =" (max-width: 440px) 100vw, 440px" > Last Ideas In this post, we have actually revealed you how to recreate among the styles that were utilized as a demonstration inside the sticky alternatives function upgrade post. Once the sticky state is made it possible for, this style focuses on highlighting your sticky button by altering the design. You were able to download the JSON file for totally free! If you have any recommendations or concerns, do not hesitate to leave a remark in the remark area listed below.
If you aspire to get more information about Divi and get more Divi giveaways, make certain you register for our e-mail newsletter and YouTube channel You’ll constantly be one of the very first individuals to understand and get advantages from this totally free material.