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

[powerpress]

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

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

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)

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

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.

Source link