Free Divi Code Scraps and a Developing GitHub Asset Repo by Andy Tran - The Divi Country Digital broadcast, Episode 21

Posted on April 29, 2016 by Nathan B. Weller in Local area 75 Remarks
Free Divi Code Pieces and a Developing GitHub Asset Repo by Andy Tran - The Divi Country Webcast, Episode 21
Blog/Local area/Free Divi Code Pieces and a Developing GitHub Asset Repo by Andy Tran - The Divi Country Webcast, Episode 21

I want to believe that you like free Divi code scraps and taking advantage of Divi's code module, in light of the fact that as well as meeting our own personal front-end designer Andy Tran, that is precisely exact thing we have for you in the present episode of Divi Country.
The Andry Tran Interview - Divi Country 21

[powerpress]

This is the initial time on Divi Country that we've talked with somebody from the Exquisite Subjects staff. I genuinely want to believe that all of you appreciate learning a smidgen more around one essential individual from the plan and advancement group behind Divi, Extra, and all the other things we're doing at present.

Kindly make certain to drop any inquiries you have for Andy down in the remarks segment! Gracious, and partake in every one of the gifts he and Mario set up 🙂

In the event that you might want to ensure you can undoubtedly watch or pay attention to future episodes of Divi Country (as well as our whole file), kindly utilize one of the membership choices we've given underneath.

Buy into Our Youtube Channel

All Membership Choices:

    YouTube
    Facebook
    iTunes
    Buy in by means of RSS

Free Divi Code Scraps by Andy Tran and Mario Maruffi

The scraps beneath have all been composed by Andy with the goal that you can drop them straightforwardly into Divi's code module. On the off chance that you find them valuable, if it's not too much trouble, make certain to say thanks to him and Mario in the remarks underneath as they put an additional opportunity in this week to ensure we could offer them free of charge here.
Group Framework with Drift Movement

Free-Divi-Code-Bit Group Framework

To get this group framework on your site you should simply finish the accompanying advances:

1. Utilize this code generator to assemble your novel group format.

2. Make another page in WordPress that utilizes the Divi Developer.

3. Make a column.

4. Add a code module to that column.

5. Duplicate and past the code from the generator into the code module and save/distribute.
Source of inspiration Flag

Free-Divi-Code-Piece Pennant

To utilize the above CTA flag on your Divi site, follow these means:

1. Make another page utilizing the Divi Manufacturer.

2. Make a column comprising of a code module.

3. Reorder the code beneath into the code module and save/distribute.
01

<!- - Styles - - > <style> .at-pennant {z-record: 100; position: fixed; base: 0; left: 0; show: - webkit-box; show: - webkit-flex; show: - ms-flexbox; show: flex; - webkit-box-adjust: focus; - webkit-adjust things: focus; - ms-flex-adjust: focus; adjust things: focus; - webkit-box-situate: even; - webkit-box-bearing: ordinary; - webkit-flex-course: column; - ms-flex-heading: column; flex-bearing: line; foundation: rgba(41, 44, 47, 0.9); width: 100 percent; level: 300px; cushioning: 20px; box-estimating: line box; text-adjust: focus; - webkit-change: 0.3s ease; progress: 0.3s ease; } .at-standard - stowed away {opacity: 0; perceivability: stowed away; } .at-banner__content {width: 100 percent; } .at-banner__title {margin: 0 0 26px; variety: #FFF; text dimension: 2.25rem; text style weight: 300; line-level: 3.625rem; } .at-banner__btn {display: inline-block; foundation: #3FA2F7; line sweep: 4px; cushioning: 20px; variety: #FFF; text dimension: 0.9375rem; text style weight: 600; line-level: typical; text-adjust: focus; text-enhancement: none; text-change: capitalized; } .at-banner__close {position: outright; top: 22px; right: 22px; fill: #AAA; - webkit-progress: 0.3s ease; change: 0.3s ease; cursor: pointer; } .at-banner__close:hover {fill: #FFF; } </style> <!- - Flag - - > <div class="at-banner"> <!- - Flag Content - - > <div class="at-banner__content"> <!- - Title - - > <div class="at-banner__title">Create a lovely site. 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> <!- - Contents - - > <script> jQuery(document).ready(function($) {$('.at-banner__close').on('click', function(e) {$(this).parent().parent().addClass('at-flag - stowed away'); }); }); </script>
Drifting Assistance Button (Base Right Corner)

Free-Divi-Code-Piece Help-Button

To get this drifting assistance button for your Divi sites, adhere to the directions beneath:

1. Make another page utilizing the Divi Developer.

2. Make a column comprising of a code module.

3. Reorder the code beneath into the code module and save/distribute.
01

<!- - 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-adjust 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><!- - Contents - ><script>jQuery(document).ready(function($){$('.at-help-btn').hover(function(){$(this).children('.at-help-btn__text').animate({width:'toggle',opacity:'toggle',},300);});});</script>
Straightforward Spring Up Modular

Free-Divi-Code-Piece Modular

Lastly, to get this straightforward spring up modular on your Divi site adhere to the guidelines beneath:

1. Make another page utilizing the Divi Manufacturer.

2. Make a column comprising of a code module.

3. Reorder the code beneath into the code module and save/distribute.
01

<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;tra