How to Add a Floating Action Button to Your Site with the Divi Code Module

The Divi Code Module is perhaps one of the most over-looked and under-used modules in Divi. As the frontend developer here at Elegant Themes I wanted to take the opportunity this year to change that. My goal is to use this post and others throughout the year to inspire a greater use of the code module by providing resources and tutorials for its use. Starting today!

In today’s post I’m going to show you how to use the Divi Code Module and a codepen code generator I created to add a floating action button to your website.

Let’s dive in!

Using The Codepen Code Generator

In this post I will be taking advantage of a codepen generator I created for the Divi Community. What this code generator does is compile the code from a given codepen and export a single block of code that will run properly inside the Divi Code Module.

The mechanics of using it couldn’t be easier. All you have to do it copy the codepen url you’ve created (or that someone else has created for use within Divi) and paste it into the space at the field at the top of the generator. Then click the blue “Generate” button.

This will populate the text box below with a block of code for use inside the Divi Code Module. You will also notice that the blue button now says “Copy Code”. Click it again to copy the compiled code into your clipboard for easy pasting into your desired Divi Code Module.

Adding a Floating Action Button to Your Divi Website with the Divi Code Module

Subscribe To Our Youtube Channel

See the Pen Code Module – About FAB by Andy Tran (@andytran) on CodePen.

The codepen above is an example of a floating action button. When you hover over it, it displays text and a link. In this instance it’s an “about” button with my image and a link to my website. However, you can edit it to display your image, text, and link of choice.

Here’s how:

First, if you don’t have one already, create a free codepen account. Next, navigate to the “About FAB” codepen I have created.

In the html tab, locate the following line of code:

<img alt="Andy Tran" src="https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=200" />

Replace the src link with a link to your image of choice. You can use your gravatar link like I have or you can upload an image to your WordPress install and use the media library link. You should also change the alt text to reflect the image you have chosen.

Next, locate this line of html:

<h2>Andy Tran</h2>

Put whatever text you would like here. If you’ve simply changed the image to be an image of yourself, then put your name here.

And finally, locate this line of html:

<a href="https://andytran.me/">https://andytran.me</a>

Change the link to your desired link and descriptive text.

Once all of your changes have been made, press command + s to save. This will automatically create a duplicate of my original codepen under your account, but with your changes.

Now you can copy the url of your new, edited codepen, into the generator I created here.

After you press the blue “Generate” button and copy the code, head on over to your Divi website to the page you want your new floating action button to be displayed.

In the first standard section of that page, add a code module.

In that code module, paste the copied code and click save.

Update your page and view the results.

Adding the Floating Action Button Site-Wide

If you would like to add the floating action button you’ve created to all of your Divi pages at the same time, it is quite simple. Instead of pasting your generated code into the code module, navigate to Divi > Theme Options > Integrations > Add code to the < head > of your blog and paste the code there. Save the changes and review on the frontend. The floating action button should now be displayed in the bottom right-hand corner on all of your pages!

At this point I can hear some of you asking, “If this is possible, why add it to just one page via a code module?”

By using the code module in the way I showed above instead of the site-wide option you are able to place customized buttons on specific pages–hopefully getting higher click-through rates based on messaging that is custom tailored to that post or page.

More Codepens to Come! (And A Note On Using Other Codepens)

I’ve created a few more pens like this one specifically for use with Divi. I plan on sharing them via blog posts as my development schedule permits. If you’re interested in creating a pen that works with Divi and can be easily added into the code module using the generator, simple create your pens keeping in mind potential CSS conflicts that could be caused with Divi’s styles. For example, in the pen above I used the `at-` prefix to prevent any conflicts that might arise.

I hope you enjoyed this tutorial, I know I’m looking forward to sharing more code module tutorials this year! If you have requests, leave them in the comments below.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by mommayap / shutterstock.com