Free Divi Code Snippets and a Growing GitHub Resource Repo by Andy Tran – The Divi Nation Podcast, Episode 21

Posted on April 29, 2016 by in Community | 75 comments

Free Divi Code Snippets and a Growing GitHub Resource Repo by Andy Tran – The Divi Nation Podcast, Episode 21

I hope you like free Divi code snippets and getting the most out of Divi’s code module, because in addition to interviewing our very own front-end developer Andy Tran, that’s exactly what we’ve got for you in today’s episode of Divi Nation.

The Andry Tran Interview – Divi Nation 21

This is the first time on Divi Nation that we’ve interviewed someone from the Elegant Themes staff. I hope you all enjoy learning a bit more about one integral member of the design and development team behind Divi, Extra, and everything else we’re doing right now.

Please be sure to drop any questions you have for Andy down in the comments section! Oh, and enjoy all the freebies he and Mario put together πŸ™‚

If you’d like to make sure you can easily watch or listen to future episodes of Divi Nation (as well as our entire archive), please take a moment and use one of the subscription options we’ve provided below.

Subscribe To Our Youtube Channel

All Subscription Options:

Free Divi Code Snippets by Andy Tran & Mario Maruffi

The snippets below have all been written by Andy so that you can drop them directly into Divi’s code module. If you find them useful, please be sure to thank him and Mario in the comments below as they put some extra time in this week to make sure we could give them away for free in this post.

Team Grid with Hover Animation

Free-Divi-Code-Snippet-Team-Grid

To get this team grid on your website all you have to do is complete the following steps:

1. Use this code generator to build your unique team layout.

2. Create a new page in WordPress that uses the Divi Builder.

3. Create a row.

4. Add a code module to that row.

5. Copy and past the code from the generator into the code module and save/publish.

Call to Action Banner

Free-Divi-Code-Snippet-Banner

To use the above CTA banner on your Divi website, follow these steps:

1. Create a new page using the Divi Builder.

2. Create a row consisting of a code module.

3. Copy and paste the code below into the code module and save/publish.

<!-- Styles --> <style> .at-banner {z-index: 100; position: fixed; bottom: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; background: rgba(41, 44, 47, 0.9); width: 100%; height: 300px; padding: 20px; box-sizing: border-box; text-align: center; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .at-banner--hidden {opacity: 0; visibility: hidden; } .at-banner__content {width: 100%; } .at-banner__title {margin: 0 0 26px; color: #FFF; font-size: 2.25rem; font-weight: 300; line-height: 3.625rem; } .at-banner__btn {display: inline-block; background: #3FA2F7; border-radius: 4px; padding: 20px; color: #FFF; font-size: 0.9375rem; font-weight: 600; line-height: normal; text-align: center; text-decoration: none; text-transform: uppercase; } .at-banner__close {position: absolute; top: 22px; right: 22px; fill: #AAA; -webkit-transition: 0.3s ease; transition: 0.3s ease; cursor: pointer; } .at-banner__close:hover {fill: #FFF; } </style> <!-- Banner --> <div class="at-banner"> <!-- Banner Content --> <div class="at-banner__content"> <!-- Title --> <div class="at-banner__title">Create a beautiful website. It’s Free.</div> <!-- CTA Button --> <a href="#" class="at-banner__btn">Get Started</a> <!-- Close Button --> <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="at-banner__close"> <path d="M17.953 15.531a.961.961 0 0 0-.297-.703L14.828 12l2.828-2.828a.961.961 0 0 0 .297-.703.979.979 0 0 0-.297-.719L16.25 6.344a.979.979 0 0 0-.719-.297.961.961 0 0 0-.703.297L12 9.172 9.172 6.344a.961.961 0 0 0-.703-.297.979.979 0 0 0-.719.297L6.344 7.75a.979.979 0 0 0-.297.719c0 .27.099.505.297.703L9.172 12l-2.828 2.828a.961.961 0 0 0-.297.703c0 .282.099.521.297.719l1.406 1.406a.979.979 0 0 0 .719.297c.27 0 .505-.099.703-.297L12 14.828l2.828 2.828a.961.961 0 0 0 .703.297c.281 0 .521-.099.719-.297l1.406-1.406a.979.979 0 0 0 .297-.719zM24 12c0 2.177-.536 4.185-1.61 6.023a11.946 11.946 0 0 1-4.367 4.368C16.185 23.464 14.177 24 12 24c-2.177 0-4.185-.536-6.023-1.61a11.946 11.946 0 0 1-4.368-4.367C.536 16.185 0 14.177 0 12c0-2.177.536-4.185 1.61-6.023a11.946 11.946 0 0 1 4.367-4.368C7.815.536 9.823 0 12 0c2.177 0 4.185.536 6.023 1.61a11.946 11.946 0 0 1 4.368 4.367C23.464 7.815 24 9.823 24 12z" fill-rule="evenodd"></path> </svg> </div> </div> <!-- Scripts --> <script> jQuery(document).ready(function($) {$('.at-banner__close').on('click', function(e) {$(this).parent().parent().addClass('at-banner--hidden'); }); }); </script>

Floating Help Button (Bottom Right Corner)

Free-Divi-Code-Snippet-Help-Button

To get this floating help button for your Divi websites, follow the instructions below:

1. Create a new page using the Divi Builder.

2. Create a row consisting of a code module.

3. Copy and paste the code below into the code module and save/publish.

<!-- Styles --><style>.at-help-btn{z-index:100;position:fixed;right:10px;bottom:20px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;background:#999;padding:9px;border-radius:100px;color:#FFF;font-size:1.125rem;text-decoration:none;-webkit-transition:0.3s ease;transition:0.3s ease}.at-help-btn:hover{background:#4C4C4C}.at-help-btn__icon{border-radius:100%;width:32px;height:32px;padding:2px}.at-help-btn__icon img{display:block;width:100%}.at-help-btn__text{display:none}.at-help-btn__text span{padding:0 15px 0 10px}</style><a href="#" class="at-help-btn"><div class="at-help-btn__icon"> <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image x="9" y="9" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAA1teXP8meAAABN1JREFUaAXtmUuMVEUUhnsQGAEVwiBkUGPc6MqAD5SlwTVGo4HExA2BuNGdBuLKGBS3EkbAmLjTGBfGOOJGjTHu1BiIUfFFfBBjABegDJBA+/1jd3Pmv1X30d2DC/sk/9w6p/5z6lTd6qq6Na3WSEYj8P8egbFhdL/dbi8gzj1gE7gb3AomwbVAcgb8Do6Cz8FH4LOxsbFLPP87IfGbwIvgOGgqv+KwB9xwxXtAo6vAQXABDCrnCbAfTFyRjtDQo+AUGLacJODWeesEwReBV0qyPk3d62A72AAmwOIO9MZk2wHeAGdATl6mYuFQO0LApeBQpsXvsG8DS+o2Clfx1NHvQUqmMdaOV9ougTTy7ydaOYvtKdD3aOGr2DvBDHB5F0PfsXudIkhq2mjkbu+RBiwQax34EbhMDRSaaPrBunyJYXUuMHV3gANAU0srjHAUaKVZV+K3hvrDwGVLzqfUTpTrga82Gvlk8tiXgFdBmVyiUp27OtU4dnXC38QJbCtT/FIbTgdBFM355LTBruQ/ieSK8sfU5zqxnrpz5r+vNFmvxFk77AUL8rTzujq8qpG3ULPq/q6/P6ndZQ7q0FrnZXXIOh5E0XxOrgjYNeddvsawGWi5XAYeAN+CKJpOyd8Edq1OP0Qy5eezCccKiAvAcXPeFjmxDO+AcZX88shRGdsK4J3IrjJwd4Aov6BUHz4hbYxelLXDZjcV6vR2omz25Ls6pAcjkfI33Tp/Uqc395fxNzhPx2AXHYmjTHPsnYkGK99s+oemR/WDqFC+xfSeSpt/o7zXM/xbuN/0VqoDOs9H0dk9KzQ0DqKczZJbraus7qLprnrbdzkh1QF9jEQ5HJUByw+Zf1Vsr7/N/Isqc843r6Gc04mr9f1Pm9OPFTO4bIG72vgnLtdmSjj4+r84Q61tJuYjwI/Qb2MrXVWoHwdRzlc2CnuoHSDe7phBp3yIZ3Zl6yYJp68O+BRa1Q3Y9EkCz3YSjo/XUJKboseH19cU+iq2Rrmw9npDKR0/7dAXLdZUipuz4et70hHnplYhXX1EWR+VBuUn4Mb4n6I/2cBfVD9qeG5zGujG1r1NlE1RaVC+z7jPsVk0vQfyjctzsyZQeW332mvX6rG0yCy34KMPmSjLyj3m1uJ4DfCjhG+yc52k4aTD3G8gyvYic34tNP54TIDyz6B02e1lBHGPOetLbFGPMM8F2tJ1zE+Ww+7azeJ4I/ApsLN2AIjWeLuh7zPmfw59skkMJaCP8CgzKL4qZGNGR5WzRKuAeidQwlH2Gq1axXsC6Lovij6411R79/cGiD0JjoEof6CsqNNmgYPj1hipU9bVR2Un3K8Q3AzwlfwR90N/2KjNVAL4VFIbehP9bnCFBIilaXMMuDSfOh6diAvBtEdG129iF+h7dcJXq41+sD7nMbXfAf4B5OnV0wmke59UJzDP3h7oA7z2RgVXm5TWeV8qMc2Kkq88rdbLvsMioN7E1Gz49B/t2G8CJbYR6CQ53oHKsqnuLeA7LKae7KU0nJFP9ZDgW4Cu+4YtWm0G+8GmEk7ZaGgl2AdScxdzI1GMl0B/S2Uqwbo2Gl0LXgC6dGoqOtvoa63ZDmvJ1TscmZOrJKFzv648dPzVU7cHSuw6IDkN4r9ZdXf0Bcfr2ju0goxkNAKjESiOwD8N88OiY3W3TgAAAABJRU5ErkJggg==" transform="translate(-11 -11)" fill="none" fill-rule="evenodd"></image> </svg></div><div class="at-help-btn__text"> <span>Help</span></div> </a><!--Scripts--><script>jQuery(document).ready(function($){$('.at-help-btn').hover(function(){$(this).children('.at-help-btn__text').animate({width:'toggle',opacity:'toggle',},300);});});</script>

Simple Pop-Up Modal

Free-Divi-Code-Snippet-Modal

And finally, to get this simple pop-up modal on your Divi website follow the instructions below:

1. Create a new page using the Divi Builder.

2. Create a row consisting of a code module.

3. Copy and paste the code below into the code module and save/publish.

<style>.custom--overlay{z-index:10000;position:fixed;top:0;left:0;display:none;background:rgba(0,0,0,0.8);width:100%;height:100%}.custom--overlay.visible{display:block}.custom--modal{z-index:15000;position:fixed;top:50%;left:50%;display:none;background:#FFF;box-shadow:0 0 15px rgba(0,0,0,0.2);width:480px;height:400px;transform:translate(-50%,-50%)}.custom--modal.visible{display:block}.custom--trigger{cursor:pointer}</style> <a class='et_pb_button custom--trigger'> Modal Trigger </a><div class='custom--overlay'></div><div class='custom--modal'></div> <script>jQuery(document).ready(function($){var customTrigger=$('.custom--trigger'),customOverlay=$('.custom--overlay'),customModal=$('.custom--modal');function overlayRemove(){customOverlay.on('click',function(){$(this).fadeOut(300,'swing').removeClass('visible');customModal.fadeOut(300,'swing').removeClass('visible');});} customTrigger.on('click',function(e){e.preventDefault();customOverlay.fadeIn(300,'swing').addClass('visible');customModal.fadeIn(300,'swing').addClass('visible');overlayRemove();});});</script>

The Divi GitHub Resource Repo by Andy Tran

All of the code snippets above and a lot more can be found in the Divi Resources GitHub repo that Andy has created. It’s free to access and designed for the whole community to be able to contribute to so that everything Divi related–from articles, tutorials, books, website showcases, news, plugins, snippets, and more–is easily discoverable from a single location.

Wrapping Up

Well that’s all for this edition of Divi Nation. Hope you all enjoyed getting to know Andy a bit more as well as the free Divi code snippets he’s provided. I always feel privileged to be the go-between for such a fantastic community and an in-house team that’s always striving to make the community experience even better.

If you have any questions for myself or Andy (about either his interview or the code snippets he and Mario created) then by all means leave us a comment below and we’ll be happy to reply.

75 Comments

  1. Great episode guys, And great freebies! Like Andy said, the snippets show how extremely powerful the code module is! Pretty awesome! πŸ™‚

    • Yup, the code module opens a lot of doors in Divi! πŸ™‚

      • Doesn’t open any PHP doors, though. Code Module doesn’t support PHP for some reason.

  2. interesting interview, as ever, but my main thought is….what spaceship did Andy steal that chair from?! i want one πŸ™‚

    • I went to the planet DXRacer and stole one of their chairs… πŸ˜‰

  3. Thanks guys, great resource.

    • Thanks Ian, stay tuned for more!

  4. Thanks guys! Love the freebies!

    • Hey Bruce,

      I’m glad you’re loving the freebies! More coming soon…

  5. It is fantastic! Great job!
    It’s really useful for all of us that aren’t able to code.
    Thank you very much!

    • Thanks Javier! I’m planning on creating more of the generators in order to help with that as well as keeping these snippets as simple as possible!

  6. Great stuff guys. Is there a way to have the CTA banner appear after scrolling a certain amount or a time delay?
    Thanks for your great work.

    • Hey Pete, if you’d like to have that added in, can you create a ticket on the repo? That way I can get to adding it when I have the time!

  7. JUST for fun with the modal pop up free code thingy you can use the FREE WordPress plugin called insert pages with it.

    That way in a pop up modal you could display some more complex content like a bunch of DIVI modules.

    I would though change the size of the modal width to like 720 if you did want to do a popup timer.

    Did though attempt the insert pages pages plugin in a TEXT module to call the page that had the pop up modal and that worked, but would not display the pop up content though.

    • Hey Richard, that’s a pretty cool idea! I can think of some pretty awesome concepts already!

    • Thank you Richard for the suggestion on the “Insert Page” plugin. It works beautifully with the modal. It’s pulling all content from the custom page I created with divi. The sky’s the limit with that.

      The only thing I can’t do with it is to get it to scale all the way down to mobile size because I made the modal window wide enough to accommodate the page content. I made it 720px by 720px. I’m sure there’s some way to get it to scale but I’m not sure how. Not much of a coder. Any suggestions would be great. Thanks again.

      • Hey Phil,

        Have you tried replacing the width of the modal with…

        .custom–modal {
        max-width: 720px;
        width: 100%
        }

        • I have not Andy. I will give it a try. Thank you.

      • Hi guys,
        I would love to see an example of that working code where you can add a divi module inside the modal popup!
        I cannot even figure out where to put the modal content in the original code..
        Would adding “modal” as its own module be a doable thing in the next update?

  8. Yes! Thanks Andy and Mario for your work. This is exactly the kind of stuff I love <3 (You too Nathan.)

    • Glad you’re loving it, if you every have any ideas on what you like to see, feel free to create a ticket in the repo!

  9. Americans always have nice teeth πŸ™‚

  10. Are you sure that there’s nothing else to do for these snippets? I’ve done as instructed and they don’t render.

    • Can you double check the code in the inspector to see if it’s being rendered properly? Another user had the same issue and it was because the editor added in random “ tags.

      • Thanks, I’m having the same issue as Phil. All 3 are not rendering. I have put all on separate pages and can’t see any random tags. This doesn’t mean there aren’t any, it’s just I can’t locate any. Happy to page URLs so you can have a look. I’m new here so I haven’t posted links in case it is not the done thing.

        Please let me know if you want the URLs and how you would like them sent.

        Thanks.

        • I’d love to know what we’re doing wrong.

          • Try copying and pasting the code again from this post. I minified it, which should stop TinyMCE from adding unwanted line breaks. Sorry about that!

        • Hey Allan,

          Try this code out, the code that you have is adding extra tags for some reason. TinyMCE is adding in unncessary tags to the code.
          http://pastebin.com/wgpDi8yH

      • I have the exact same problem.

        All the straight HTML shows up as expected, but nothing else.

        Maybe a Chrome browser thing?

        • Try copying and pasting the code again from this post. I minified it, which should stop TinyMCE from adding unwanted line breaks. Sorry about that!

  11. Thank you for another great episode. Thank you Andy for all of the great snippets.

  12. I am having the same issue

    • Its adding tags also, like

    • Its adding tags πŸ™‚

    • Try copying and pasting the code again from this post. I minified it, which should stop TinyMCE from adding unwanted line breaks. Sorry about that!

  13. After adding team members, how do you compile and grab the code from the code generator?

  14. Hi guys.

    Thanks a lot for the code snippets. One thing I can’t get right, is how do I actually get something to display in the modal? I’m just seeing a white box, and can’t find a way to add anything to it.

    Thanks a lot

  15. Its great work this is nice way to attract audience and also unique and interesting article.

  16. Like the code snippets – thanks! Question regarding the social icons in the Team Grid snippet: Is there a source to get the svg values for other social icons like Mail, Pinterest, etc?

  17. This is really a great idea and great work! Thanks for helping with these things.

  18. Hi Andy,
    Great work and awesome snippets.
    I tried the generator and doesn’t seem to work for me. Is it something that I am doing wrong or is there a bug on the generator as I can see that few people are having difficulties too.
    How do you copy the code from the generator? I tried the button “copy to clipboard”.

    • Try copying and pasting the code again from this post. I minified it, which should stop TinyMCE from adding unwanted line breaks. Sorry about that!

    • Hey Ram,

      One you create need to make some changes to the Team Grid before you can copy the code. Can you give it a try and see if there’s still any issues?

      • I have tried several times now without success. Here are the steps just in case I missed something:

        – Completed all the necessary fields with image links
        – Added 2 more team members.
        -Copied the code and tried it without success.
        All i could see is the images in full size with the text piling up on each other.

        Did i miss something?

  19. Sorry for the stupid Question…

    But what settings did you use for the CTA Youtube? and works that even with Extra?

    I play around with the settings the Divi Builder give, but i get every time a bigger result. (see it here: http://a.fotoglut.de/oWe7J)

  20. It’s really cool you guys are doing this…thanks a lot. So, I feel like an idiot asking, but is the help button supposed to do something? I imagine it’s supposed to do some custom action other than look cool?

    Cheers

    • ..and both the banner and modal just output this on the site:

      + + + + +
      + +
      + +
      Create a beautiful website. It’s Free.
      + + + Get Started + + + +
      +
      + + +

      πŸ™‚

    • Hey,

      The help button is basically just an action button that you could use to link to your help page, or use mailto: to open the users email client.

      The modal is there so that you can add custom content inside the page… An example would be an iframe that displays another page.

      The banner is a CTA banner for you to edit the text, and the CTA button.

      • Thanks Andy. It’s just that they don’t display a banner or pop-up…just that text.

        • Has anyone gotten it to work? It still doesn’t do anything for me but display that text.

          • So I guess these snippets don’t actually work? What a shame! There are so many people commenting that they don’t work and there’s no solution. Oh well, thanks for trying guys..maybe next time.

  21. Hey great help, Thank you Andy. Also I keep struggling while willing to integrate WebRTC code call function on the Floating help function. I have following code and do not know how to integrate it…..

    How to proceed? (I can send code by email.)

    • Hey Marc,

      I’m not familiar with WebRTC, but I would recommend reaching out to them to see how you can hook their code to this floating action button!

      FYI – You should be able to handle it all in the Code Module!

      • I have used the widget of Divi with Text Module. I can set the code in it. But still struggling with the code itself ( how to have on the image floating button a link to the script). I’m not a code specialist… And webrtc supplier deliver only related code to calling pop-up and no WP widgets for an easy setup… J

  22. Great snippets! For the Team Grid code, what would be the svg path d values for other social icons like email, Pinterest, etc?

      • Thanks. I found that I can replace the SVG code with my own 18px social icons jpgs

        Jim

  23. Great episode, cheers for the tips!

  24. Hi, great snippets!

    I used the CTA Banner. It’s nice, BUT the close button doesn’t seem to work.

    Is there something to add or fix to the js at the end of the snippet?

    Or is it my deep ignorance?

    You can check at http://tonipostius.com/cta-de-snippet/

    Thanks

    • I am having the same issue as above. The banner won’t close. It works on one page, but exactly the same code doesn’t work (won’t close) on another page.
      Any help Andy?
      Thanks.

  25. Hi guys
    Appreciate the time that you put in to create these fabulous podcasts and code snippets.

    My problem is… which snippet do I try first?

  26. Hi great snippets!

    Andy I got a question about TeamGrid:

    I try to change LinkedIn to Instagram and it works great for the first person but as i click Add new user it goes back to LinkedIn. How can I change this?

    Oh and actually another quesyion as well:

    How to add the icon for Instagram for example?

  27. I’m new to web design so I apologize if these are simple questions.. I love the Team Generator display but I wanted to know if it’s possible to increase the image size and have that team member’s block link out to a bio page? Any help would be appreciated.

    • I am looking for the same thing. The team snippet is awesome however if it could be a CTA and link to a new page that I can set a team member on then it would be perfect! Please let us know if that is possible.

  28. Love these! I’ve tried the Help button. It displays property in the Preview Changes window, but not on the website. I’ve cleared the history. Am I doing something wrong?

  29. I was wondering if you have some advice on how to go about fetching a different icon for the “help” button.

  30. I work in a school and the CTA snippet has given me an idea. Could you modify (sorry, I don’t code much) it so that it could be used as a ‘breaking news’ item linked to the relevant post with a ‘Read more…’ link. Then important information, such as snow closures, could be posted once in a while?

  31. To prevent “floating help button” keep on repeat animation after hovering on it multiple times, you can modify the code, adding a call to “stop()” before calling “animate”.

    Simply change this:
    …(‘.at-help-btn__text’).animate({width:’toggle’…

    to this:
    …(‘.at-help-btn__text’).stop().animate({width:’toggle’…

437,821 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

Pin It on Pinterest