How to Add a Floating About Card to Your Divi Site with the Divi Code Module

Posted on January 21, 2017 by in Divi Resources | 38 comments

How to Add a Floating About Card to Your Divi Site with the Divi Code Module

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

How to Add the Codepen

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 . 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, . 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 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.

38 Comments

  1. Hi, I wish to use this floating about card to my site. But, my site is not a Divi site. Is it only for Divi users?

    If I sign up for Codepen, will I be able to use your design? Or, is there any other option for me?

    Help me, please. I am a beginner in this field. I need to know a lot of things I know and I am always trying.

    • Andy Tran

      These snippets are made to be compatible on it’s own as well as Divi! Popping it in should work fine! 🙂

  2. ohh!! Wow Thats! Imagine Thanks for Giving an amazing tips

    • Andy Tran

      You’re welcome!

  3. not able to save the pen.. it says, “You’re not allowed to fork a private Pen.”

    • Got the same error message…

      • me tooo same error

    • Andy Tran

      The pen should be public now!

  4. Is there a way to have it go away after scrolling or after a certain amount of time? Also, with the slide in top bar you did is there a way to have it above the header so the header content can still be seen? Just like the divi site.

    • Andy Tran

      Yeah, you can use waypoints which should be included with Divi to have the snippet disappear when you scroll to a certain point on the page.

      • Hey Andy, any update on a close button? I’m using this for a site I’m building now, but I need a way for it to disappear o people can see the footer. Thanks for making it easy-to-follow for a rookie.

    • Andy Tran

      You’re welcome! 🙂

  5. Great tutorial! How complicated would it be to add a closing “x” in the corner, so the user can close the box when they want?

    Could you show me how?

    • That would be a great feature.

      • Following.

    • Agree, that would finish it nicely.

    • You have proposed a very good integration

    • following 🙂

    • Following ?

    • Following

    • Andy Tran

      Thanks! I’ll be creating tutorials on my personal blog that goes more in-depth on adding more features such as closing it with “x” or making it fade-in/out at certain points on the page! If you’re familiar with JavaScript and jQuery, adding the “x” shouldn’t be that complicated.

  6. good job. It looks great. Thank you
    I’m going to put it on my site

    • Andy Tran

      Thanks! That’s awesome looking forward to seeing it live!

  7. This is the kind of stuff I like. Great work, Andy

    • Andy Tran

      Thanks! A lot more coming in the future!

  8. Good job. But the pen is privat and not public. So I can not copy it for my own. Please make the pen public.

    • Andy Tran

      Thanks! The pen should be public now!

  9. How work in mobile device?

    • Andy Tran

      As of right now these snippets are made for larger screen devices only.

  10. This part does not work in my Divi ; Why?

    &__thumbnail {
    width: 50px;
    max-width: 50px;
    min-width: 50px;
    border: 2px solid #EEEEEE;
    border-radius: 100%;
    margin: 0 20px 0 0;
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;

    img {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 100%;
    }
    }

    • Andy Tran

      The code you provided is Sass which is not supported by browsers. To implement the code, you’d need to run the compiler that’s provided on CodePen or use the CodePen generator to get the compiled version.

  11. Would you fix ridiculous behavior that code module replace line break with already?
    Who does code without line break if it’s code editor?
    It’s not minified predefined code, code input by human.
    I’ve been asking you for long time.
    Such a inconvenient.

    • Nathan B. Weller

      Hey thanks for commenting Ash. There are lots of areas for improvement in Divi. I’m sure in future releases we’ll take another look at all of our modules and try to make them better. We’ve made note of this request for the code module.

      • Looking forwards to it!

  12. Thanks Andy for a great tutorial and resource. I modified the card a bit to be a new mission statement for our company. CSS customization is a snap.

  13. Nice 🙂 Would you consider for a future flow contact or book now float that will pop up a contact or a book now form?

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today
печи для пиццы

ここに

https://velotime.com.ua

https://www.poliv.ua

Pin It on Pinterest