Hey Divi Nation, I’m happy to be back with another pen you can add to your Divi website using the Divi Code Module. This time I’ve created a floating about card that displays your image, name, title, description, and a few links. Just as with the floating action button and the slide-in top bar, adding this pen to your site is incredibly simple and shouldn’t take more than a minute.

Here’s how it’s done!

How to Add a Floating About Card to a Post or Page with the Divi Code Module

floating-about-card-codepen-page

To add the codepen above to a single post or page on your Divi website take the following actions:

First, make sure you are logged into codepen.io. If you do not have a free account yet, you’ll need to create one. Don’t worry, it only takes a few moments as you can simply login with facebook or twitter.

Once you’re logged in, navigate to the floating about card pen I have created. Press “command + s” to save the pen to your account. This will allow you to make edits to the content before using the code generator.

Locate this line of html:

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

Change the src link to the source link for an image of your choice. And of course change the alt text to reflect your image.

Next, locate this line of html:

<h2 class="at-floating-card__title">Andy Tran</h2>

Change the name to your own. Then, locate the next line:

<h3 class="at-floating-card__sub-title">Front-End Website Developer</h3>

Change the text here to your title. Then, locate the next line:

<p class="at-floating-card__description">I am a passionate Front-End Web Developer that loves to experiment with awesome technology such as React, Redux, Angular, Meteor, TweenMax, and many more!</p>

Replace this text with your own descriptive text. Then, locate the following four lines of code (which are your social links) and change them to reflect your preferred social links:

<a href="https://andytran.me">Website</a>
<a href="https://facebook.com/itsandytran">Facebook</a>
<a href="https://twitter.com/helloandytran">Twitter</a>
<a href="https://codepen.io/andytran">CodePen</a>

When your edits are done and the floating about card has all of your information in it, save your changes. Then, copy the url and paste it into the code generator I’ve created for converting pens to easy to manage code blocks for Divi’s Code Module. Once you’ve added your url to the generator, click the “Generate” button.

CodePen Code Generator 2

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.

It’s now time to head back to your Divi website. Navigate to the Divi Builder for whatever page or post you’d like to add your floating about card to. Add a code module in the first available space on the page. The position of the code module doesn’t really matter.

floating-about-card-code-module-closed

Open it up and paste the code into the space provided and save your changes.

floating-about-card-code-module-settings

Go ahead and up your page or post and check out the results. It should result in a card like the one below.

floating-about-card-1

How to Add a Floating About Card Site-wide

floating-about-card-integration

If you would like your floating about card to appear on every single page of your Divi website, then the process is slightly different. De-activate your code module from above by right-clicking it and selecting disable on all devices. Then, navigate to Divi > Theme Options > Integration.

Past the code you copied from the code generator in the section called “Add Code to the < head > of your blog”. Save your changes and check out the front-end of your site. You should now have a floating about card on all pages.

Wrapping Up

Well that’s all for this tutorial. I hope you found it helpful. Or, at the very least, interesting and fun. I’m always working on new pens do if you have a request for something let me know in the comments below. I’ll continue to share my Divi related pins here on the blog as I create them.