How to Construct a Sticky CTA Menu as You Scroll Down the Page

How to Construct a Sticky CTA Menu as You Scroll Down the Page

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.

Let’s start!

Preview

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

To import the area design to your Divi Library, browse to the Divi Library.

Click the Import button.

In the mobility popup, pick the import tab and pick the download file from your computer system.

Click the import button.

divi notification box

< img loading=" lazy" class=" with-border aligncenter size-full wp-image-127617" src=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-2.jpg" alt=" divi notice box" width =" 880" height=" 711" srcset=" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-2.jpg 880w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-13.jpg 300w,

https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-14.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-15.jpg 610w” sizes =”( max-width: 880px)expanding corner tabs

100vw, 880px” > As soon as done, the area design will be

  • offered in the Divi Contractor. Let’s get to the tutorial, shall we? What You Required to Start< img loading="lazy" class =" with-border with-border aligncenter size-large wp-image-118230" src= "https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-3.jpg" alt=" broadening corner tabs" width= "719" height= "931" srcset =" https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-3.jpg 791w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-16.jpg 232w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-17.jpg 768w,
  • https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-18.jpg 1187w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-19.jpg 1582w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-20.jpg 610w, https://websitedesign-usa.com/wp-content/uploads/2020/10/how-to-construct-a-sticky-cta-menu-as-you-scroll-down-the-page-21.jpg 1760w “sizes =”(
  • 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

    divi sticky cta menu on scroll

    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:

    Leave a Reply

    Your email address will not be published. Required fields are marked *