Generally, sticky menus show up at the top (or bottom) of a page the minute the page loads. Constructing a sticky CTA menu as the user scrolls down the page can be a reliable and imaginative method to keep those crucial CTAs clickable at all times. In some methods, it is the very best of both worlds. It permits the CTA to keep its prime positioning in the initial style. And, it keeps a minified variation of the CTA (the button) noticeable in a sticky menu structure users recognize with.
In this tutorial, we are going to reveal you how to develop a sticky CTA menu as you scroll down the page in Divi. This will work excellent for desktop and mobile users by including an instinctive, yet distinct, method to lure visitors to act.
Here is a glimpse at the style we’ll integrate in this tutorial.
< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-button-menu-scroll-vid.webm" type=" video/webm" >< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-button-menu-scroll-vid.mp4" >< source src =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-button-menu-scroll-vid2.webm" type=" video/webm "> Download the Design free of charge To lay your hands on the styles from this tutorial, you will initially require to download it utilizing the button listed below. To get to the download you will require to sign up for our Divi Daily e-mail list by utilizing the type listed below. As a brand-new customer, you will get much more Divi
max-width: 719px) 100vw, 719px” > To start, you will require to do the following: If you have not yet, set up and trigger the Divi Style. Produce a brand-new page in WordPress and utilize the Divi
Contractor to modify the page on the front end(
visual contractor). Select the choice” Construct From Scratch “. After that, you will have a blank canvas to begin developing in Divi. How to Construct a Sticky CTA Menu as You Scroll Through a Page in Divi Structure CTA # 1
To start developing our very first CTA, we are going to utilize a blurb module with
a custom-made CTA button that will stick at the top and bottom of the page as the user scrolls. To get going, produce a brand-new one-column row within the routine area.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139257" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-4.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 568" srcset =" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-4.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-22.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-23.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-24.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Include Blurb Inside the column of the row, include a blurb module.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139256" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_24.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 428" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_24.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_24-300x146.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_24-768x374.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_24-610x297.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Open the blurb settings and include a picture of your
option rather of the default icon. I’m utilizing an image from the Cryptocurrency Design Load.< img loading =" lazy" class=" with-border aligncenter size-full wp-image-139255" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_23.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 556 "srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_23.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_23-300x190.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_23-768x485.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_23-610x385.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Under the style tab, upgrade the text designs as follows: Title Heading Level:
H2 Title Typeface: Titillium Web Title Typeface Weight: Semi Strong Title Text Positioning: Title Text Size: 36px( desktop
), 28px (phone) Title Line Height: 1.5 em Body Line Height:
2em< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139253" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_21.jpg" alt=" divi sticky cta menu on scroll" width=" 1176" height=" 1337 "srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_21.jpg 1176w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_21-264x300.jpg 264w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_21-901x1024.jpg 901w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_21-768x873.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_21-610x694.jpg 610w" sizes="( max-width: 1176px) 100vw, 1176px" > Include Row for CTA Button Under the row consisting of the blurb we simply developed, include a brand-new one-column row.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139252" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_20.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 532 "srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_20.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_20-300x181.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_20-768x464.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_20-610x369.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > It is very important to get the row settings proper for
the performance of the sticky buttons to line up properly. Open the row settings and upgrade the following: Seamless gutter
Width: 1 Width: 100% Max Width: 1400px( desktop), 100
%( tablet)< img loading=" lazy "class=" with-border aligncenter size-full wp-image-139251" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_19.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 527" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_19.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_19-300x180.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_19-768x460.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_19-610x365.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Include Contact Us To Action Button Inside the brand-new row, include a call to action module. The upgrade the following: We are just going to require the button aspect within this module so we can eliminate the Title and body text. Make certain to include a button Link URL(‘ #
‘ will provide for now) so that the button will show up when developing the design. You can constantly upgrade this later on.
Disable the alternative “Usage Background Color”. (KEEP IN MIND: You will not have the ability to see the white button on a white background yet however that will alter in the next action )< img loading=" lazy "class=" with-border aligncenter size-full wp-image-139248 "src =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_16.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 915" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_16.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_16-289x300.jpg 289w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_16-768x799.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_16-610x634.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Under the style tab, upgrade the following button designs: Button Text Size: 14px( desktop), 11px( phone) Button Text Color: # 1b1f50 Button Background Color: # 09d5fe Button Border Width
: 0px Button Letter Spacing: 2px Button Font Style: Titillium Web Button Font Style Weight: Vibrant Button Typeface Design: TT Button Cushioning: 1em leading, 1em
bottom Continue updating the design as follows: Upgrading: Style% Module Alignment: Padding: 0px
leading, 0px bottom When in the sticky position, the 33.33% width of the button will permit the button to take up precisely 1/3 of the internet browser window. Integrating this with 2 other buttons (each with the very same 33.33% width) will offer a complete CTA menu bar of buttons.
< img loading=" lazy" class =" with-border aligncenter size-full wp-image-139243" src= "https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-5.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height =" 960 "srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-5.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-25.jpg 275w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-26.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-27.jpg 610w" sizes= "( max-width: 880px) 100vw, 880px" > Under the Advanced Tab, include the following customized CSS bit to the Promotion Description (it has unneeded spacing we do
n't require): display screen: none;
Include another bit the Promotion Button: screen: block;< img loading =" lazy" class=" with-border aligncenter size-full wp-image-139242" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-6.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height =" 685" srcset= "https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-6.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-28.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-29.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-30.jpg 610w" sizes= "( max-width: 880px )100vw, 880px "> Making the Button Sticky To make
the button sticky, we
are going to utilize the sticky position choice to stick the top and the button and bottom of the web browser window. We are likewise going to include a balanced out for
the default Divi repaired header. Update the following: Sticky Position:
Adhere to Top and Bottom Sticky Leading Offset: 54px( desktop), 0px (tablet) Offset From Surrounding Sticky Aspects: NO< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139241" src= "https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-7.jpg" alt= "divi sticky cta menu on scroll "width=" 880 "height=" 751 "srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-7.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-31.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-32.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-33.jpg 610w "sizes ="(
max-width: 880px) 100vw, 880px” > With our sticky position in location, we can now
target the design of the button in the sticky state. In
this case we wish to move the button over to the delegated include extra sticky buttons later. Update the following change design in the sticky state: Change Translate X axis( sticky): -100% This will move the button over a range equivalent to the specific width of the button( which is 33.33%) once it adheres to the leading or bottom of the page.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139240" src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_8.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 508" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_8.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_8-300x173.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_8-768x443.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_8-610x352.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Structure CTA # 2 Now that we have one area total with a working sticky CTA button, we can replicate the previous area
and make small modifications to the button. Replicate the area.< img loading =" lazy "class=" with-border aligncenter size-full wp-image-139239 "src =" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_7.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 750" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_7.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_7-300x256.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_7-768x655.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_7-610x520.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Open the settings for the Call to Action module in the brand-new area and upgrade the change alternatives as follows: Change Translate X axis( Sticky): 0px This is
actually in fact simply it back to the default state because due to the fact that don’t do not desire move this button as it needs requires remain stay
the.< img loading =" lazy" class=" with-border aligncenter size-full wp-image-139238" src= "https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_6.jpg" alt=" divi sticky cta menu on scroll" width=" 880" height=" 443" srcset=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_6.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_6-300x151.jpg 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_6-768x387.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-sticky-button-menu-on-scroll-with-divi_6-610x307.jpg 610w" sizes="( max-width: 880px) 100vw, 880px" > Structure CTA # 3 To construct the 3rd CTA area, replicate the previous area.< img loading=" lazy" class=" with-border aligncenter size-full wp-image-139237" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-8.jpg "alt=" divi sticky
Then open the settings for the Call to Action module in the brand-new area and upgrade
the change choices as follows: Change Translate X axis( Sticky): 100% This will move the button over to the right a range equivalent to the precise width of the button (which is 33.33%) once it adheres to the leading or bottom of the page.
” > Update Button Text and Colors To polish off the style, upgrade the
CTA button text and colors to match your website style.
Here are the settings for this example: For CTA #
Button Text: View Our Strategies Button Text Color: #ffffff Button Background Color: # 1b1f50 For CTA #
3 … Button Text: Chat With United States Button Text Color: #ffffff Button Background Color: # 4328b7
< img loading=" lazy" class =" with-border aligncenter size-full wp-image-139235" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-10.jpg" alt=" divi sticky cta menu on scroll" width =" 880 "height=" 900" srcset =" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-10.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-40.jpg 293w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-41.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-42.jpg 610w" sizes ="( max-width: 880px )100vw, 880px" > Include Short-term Margin to Leading and Bottom Area for Screening Performance On a regular site, these CTAs would live in the middle of the page someplace so there is additional area to scroll up and down the page.
In the meantime, we can include some short-lived margin to the
bottom and leading areas on the page. On the leading area include a 90vh leading margin.
” 880 “height=” 508″ srcset=” https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-11.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-43.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-44.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-45.jpg 610w” sizes=”( max-width: 880px) 100vw, 880px” > On the bottom area, include a 90vh bottom margin.< img loading=" lazy "class=" with-border aligncenter size-full wp-image-139233" src =" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-12.jpg" alt= "divi sticky cta menu on scroll "width=" 880" height= "448" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-12.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-46.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-47.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-48.jpg 610w "sizes="( max-width: 880px) 100vw, 880px" > Result Now let’s have a look at the outcome. < source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-button-menu-scroll-vid.mp4" >< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-button-menu-scroll-vid2.webm "type=" video/webm" >< source src=" https://www.elegantthemes.com/blog/wp-content/uploads/2020/10/build-button-menu-scroll-vid2.mp4 "> Last Ideas This tutorial reveals you an innovative method to keep those essential CTAs at the leading edge so users can click them at any time they desire. It likewise includes a subtle micro-interaction that draws much more attention to them without sidetracking from the primary material of the page. Ideally, this will assist get those imaginative juices streaming so that you can explore more styles to make it even much better.