Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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


Apr29

Posted on April 29, 2016 by Nathan B. Weller in Community |

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

Podcast: Play in new window | Download

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 blow 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 blow 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: #999999;
  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>

<!-- Help Button -->
<a href="#" class="at-help-btn">
  <!-- Help Icon -->
  <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>

  <!-- Help Text -->
  <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 blow into the code module and save/publish.

<!-- Styles -->
<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>

<!-- Trigger -->
<a class='et_pb_button custom--trigger'>
  Modal Trigger
</a>

<!-- Overlay -->
<div class='custom--overlay'></div>

<!-- Custom Modal -->
<div class='custom--modal'>
  <!-- Content Here -->
</div>

<!-- Scripts -->
<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.


By Nathan B. Weller

Nathan is a professional writer and digital publisher. His work exists at the intersection of cosmology, anthropology, psychology, comparative mythology, storytelling and WordPress. Weird, right? Find him on the interwebs to learn more.



Source link



This post first appeared on Aabout.in || Get Information About Everything At One Place., please read the originial post: here

Share the post

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

×

Subscribe to Aabout.in || Get Information About Everything At One Place.

Get updates delivered right to your inbox!

Thank you for your subscription

×