Listing Category: Code Module

Typing text effect in Divi

Recently saw someone ask how to achieve a typing text pen that they’d seen on CodePen so I decided to modify it to work with Divi….

How to create a Page Specific Alert Banner in Divi

In this tutorial Andy Tran explains you how to create a Page-Specific Alert Banner using the Divi Code Module. This can be used to notify your users about something going on in your site…

Create an Expanding CTA with page scroll

“We are going to show you how to duplicate not only the style of Elegant Theme site’s creative CTA but also the animation functionality. This is accomplished using Divi’s Code Module with some custom CSS and a a few lines of JavaScript. However, you can easily extend the same animated functionality on any of Divi’s modules….”

Add a Floating Action Menu to Divi with the Code Module

I’m back with another pen to share with you all that will add a Floating Action Menu to your Divi website. I’m going to show you two different ways to implement it on your site. The first is taking advantage of Divi’s Code Module, something I’m hoping to encourage…

Using CodePen to Create Divi Code Module Snippets

In this post, I’m going to go over how you can create a Code Module using CodePen and easily export it over to your Divi site using the CodePen Code Generator….

Create a Slide in Top Bar Ad

As I mentioned a few days ago with my post on how to add a floating action button to your site using the Divi Code Module, I’ve been creating more pens on Codepen.io for use with Divi–both with Code Module for single posts or pages as well as Divi’s theme options for site-wide…

Add a Floating Action Button

In today’s post I’m going to show you how to use the Divi Code Module and a codepen code generator I created to add a floating action button to your website…

The Best Hidden Feature of Divi Part 2

Divi allows you to create any website you can imagine with ease, but what if I told you that you aren’t using Divi to the fullest possible extent?

Part 3 (Final Part) Of Another Way To Use The Code Module To Display Images In A Masonry Layout Using The Divi Code Module

Presenting the final installment of using a masonry layout with the Divi theme from Elegant Themes. Note that this is an affiliate linkout. If you make a purchase through it I will get paid, but it costs you nothing extra. This time we will be building the layout you see above. We will be applying this layout to the categories page using the Masonry.js library, but you could extend this lesson to any page you would like. Using straight CSS to style a masonry layout is great when you have list items. The problem with blog posts is that in straight CSS they get wrapped to the top of the next column (I can think or a workaround for this, can you?). Masonry.js will let us overcome this and using it in your site is as easy as enqueuing a couple of scripts and adding some CSS. Let’s get started…

Part 2 of another way to use the code module to display images in a masonry layout using the Divi code module

I just posted part 2 of 3 on another way to use the code module to display images in a masonry layout using the Divi code module. In this case I’m altering the ‘functions.php’ file to allow for assigning categories to attachments and then using two functions to fetch images from selected categories and return them as a list to be displayed and styled into a masonry layout…