How to add a floating action button in Divi

If you want to add a floating Contact Us button to the bottom left hand side of your Divi website then add the following code to Divi --> Theme Options --> Integration --> Add code to the < head > of your blog

Replace the code highlighted in RED with the link to the image on your website you would like to show as the button. Also replace the code highlighted in GREEN with the URL that you would like the button to link to.

<style>.at-about-fab { z-index: 999999; position: fixed; right: 20px; bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.2s ease; transition: 0.2s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .at-about-fab:before { content: ""; position: absolute; display: block; top: 50%; left: -58px; width: 58px; height: 48px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .at-about-fab:hover { -webkit-transform: translateX(0%); transform: translateX(0%); } .at-about-fab:hover .at-about-fab__meta { opacity: 1; } .at-about-fab__thumbnail { position: absolute; top: 50%; left: -58px; background: #FFFFFF; width: 48px; height: 48px; border: 1px solid #EEEEEE; border-radius: 100%; padding: 4px; box-sizing: border-box; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; cursor: pointer; } .at-about-fab__thumbnail img { display: block; width: 100%; border-radius: 100%; } .at-about-fab__meta { font-family: 'Open Sans', sans-serif; opacity: 0; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .at-about-fab__meta h2, .at-about-fab__meta p { margin: 0; padding: 0; } .at-about-fab__meta h2 { color: #444444; font-size: 16px; font-weight: 600; } .at-about-fab__meta p { color: red; font-size: 14px; font-weight: 600; } .at-about-fab__meta a { color: inherit; font-weight: 400; text-decoration: none; } </style><!-- Credits --> <!-- Developer - Andy Tran (https://andytran.me) --> <!-- Design - Andy Tran (https://andytran.me) --> <div class="at-about-fab"> <div class="at-about-fab__thumbnail"> <img alt="Contact Us" src="https://yourdomainname.co.nz/wp-content/uploads/2017/06/logot.png" /> </div> <div class="at-about-fab__meta"> <h2>Contact Us</h2> <p><a rel="nofollow" rel="noreferrer"href="https://yourdomainname.co.nz/contact-us">Click Here</a></p> </div> </div><script></script>
  • how to add a floating action button in divi
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

How to Style a WooCommerce Product to Show Text Instead of an Icon on Hover

See article How to Style a WooCommerce Product to Show Text Instead of an Icon on Hover in Divi

Documentation and Tutorials

Please click on the link below for usefull tutorials on using Divi Builder to build your perfect...

6 of the best online bookings plugins for WordPress

Whether you run a hair salon, work as a consultant or manage a hotel or guesthouse, being able to...

How to create a quote form using Divi Builder Contact Form module

A quote form (a.k.a. request-a-quote form) is a great solution for small businesses looking to...

How to create a sticky footer in Divi

A sticky footer is a footer that remains at the bottom of the screen no matter how high up you...