Blog / Community / 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.
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.
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.
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.
I'm the former blog editor and content manager here at Elegant Themes (2015-2023). Since leaving on good terms I've started my own Divi-powered business and continue to stay plugged-in to the WordPress and Divi communities. I now create content on a more ad-hoc basis for this blog but I'm still sharing from my long experience as a Divi user, Divi educator, and now as a small business owner who uses Divi.
Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder
Happy Spring, DiviFam! 🌷
It’s been a while since I updated our Divi community with meetup happenings, so get ready to be turbo-updated. From Mega Meetups to your friendly Divi DFW regularly scheduled virtual meetups, a lot has happened. Our Divi community is buzzing with excitement and...
It’s Tuesday afternoon local time, and I’m sitting in the coolest coffee shop in Taipei, reflecting on the week. This was my first WordCamp Asia and my first time in the continent of Asia. Now, this was not my first WordCamp. In fact, this was my 52nd. 😳 But being it was my first...
Goodbye, Summer! ⛱️
(hello, Autumn!) 🍂
DiviFam, just like that, Summer is gone, Autumn is here, and Q4 is well on its way. 😉
Each month, we host a video call amongst all the Divi meetup host community, and the topics of late have a strong Q4 vibe. It’s important to finish the year...
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”.
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?
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?
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.
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?
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.
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…..
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
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?
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.
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”.
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.
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?
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.
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.
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
It looks like tags are being applied to your module. Must be a plugin or something that’s causing this issue in the code module. If you concat the code, it should be fine. http://imgur.com/xZCfHtv
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.
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.
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?
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’…
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?
I was wondering if you have some advice on how to go about fetching a different icon for the “help” button.
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?
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.
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?
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?
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.
Great episode, cheers for the tips!
Great snippets! For the Team Grid code, what would be the svg path d values for other social icons like email, Pinterest, etc?
Hey Jim,
I didn’t get in other social icons from Mario’s design, however you should be able to find more SVG icons at… http://www.flaticon.com/packs/simpleicon-social-media
Thanks. I found that I can replace the SVG code with my own 18px social icons jpgs
Jim
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
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
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.
..and both the banner and modal just output this on the site:
+ + + + +
+ +
+ +
Create a beautiful website. It’s Free.
+ + + Get Started + + + +
+
+ + +
🙂
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)
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”.
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?
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!
This is really a great idea and great work! Thanks for helping with these things.
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?
Its great work this is nice way to attract audience and also unique and interesting article.
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
After adding team members, how do you compile and grab the code from the code generator?
I am having the same issue
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!
Same problem here.
All I end up with is a link for the word “help” ~ see here http://screencast.com/t/3ebzQeSF
Its adding tags 🙂
Its adding tags also, like
Thank you for another great episode. Thank you Andy for all of the great snippets.
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.
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!
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.
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’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!
*I’m not sure that I follow.http://www.motionpub.com/test/ *
*PW: **divitest111*
Try this code out, the code that you have is adding extra tags for some reason.
http://pastebin.com/wgpDi8yH
That did it. Thanks. Maybe you could put each minified snippet up top since others had the issue?
It looks like tags are being applied to your module. Must be a plugin or something that’s causing this issue in the code module. If you concat the code, it should be fine. http://imgur.com/xZCfHtv
Try this code. http://pastebin.com/wgpDi8yH
Americans always have nice teeth 🙂
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!
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.
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.
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?
Nevermind, i figured it all out. Thanks!
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.
Hey Richard, that’s a pretty cool idea! I can think of some pretty awesome concepts already!
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!
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!
Thanks guys! Love the freebies!
Hey Bruce,
I’m glad you’re loving the freebies! More coming soon…
Thanks guys, great resource.
Thanks Ian, stay tuned for more!
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… 😉
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.
Thanks Tim!