[Resolved] Floating CTA link on the middle of any the page

[Alex Bukin]

Hello TEAM,

I want to mimic the Free Demo red button from the following website : https://www.roadvision.com
What would be easy solution. My website is https://fr8data.com/
I want to be have similar Button that would link to the Schedule Demo form (https://fr8data.com/request-demo/)

Regards,

Alex

[Fernando]

Hi Alex,

One approach to do this is to create a Block Element hooked to before_header as such: https://share.getcloudapp.com/nOuR9O9L

Then, add make-side-fixedclass to the Buttons Block as such: https://share.getcloudapp.com/xQuqz5Ol

Now, add this CSS in Appearance > Customize > Additional CSS:

.body {
    position: relative;
}

.make-side-fixed {
    position:fixed;
    right:0;
    z-index: 10000;
    top: 50vh;
    transform: translateY(-50%);
}

Kindly modify the button look through its Block Settings in the Block Element. Choose the appropriate Display Rules as well. Add the link to the Button as well.

Hope this helps! 🙂

[Alex Bukin]

Thank you very much Fernando.

[Fernando]

You’re welcome Alex! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts