Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Elegant Themes Founder Nick Roach: We Want To Flip the Script and Make Divi the Fastest Page Builder Around

Elegant Themes Founder Nick Roach: We Want To Flip the Script and Make Divi the Fastest Page Builder Around

Owner and Founder of Elegant Themes, Nick Roach has brought up the fact that they have been working on these items for a while now but still had provided no ETA and details on exactly what they are doing to improve Divi performance. Recently, on April 8, 2021, Nick Roach decided to address this in one of the Divi Facebook Groups. Here is what he had to say:

Vertical Align Columns in Divi

Vertical Align Columns in Divi

Divi columns align content at the top by default. In this tutorial, I will show you how to use a little custom CSS to vertically align content within a row.

Divi 3D Flip Cards

Divi 3D Flip Cards

In this tutorial, I will show you how to use a little custom CSS to create 3D Divi Flip Cards out of ordinary Divi Text Modules.

Divi Flip Cards

Divi Flip Cards

In this tutorial, I will show you how to use a little custom jQuery to wrap all the button modules within a specified column, into it’s own DIV. And with a little CSS, make them centered and in a single line.

Divi Centered Inline Buttons

Divi Centered Inline Buttons

In this tutorial, I will show you how to use a little custom jQuery to wrap all the button modules within a specified column, into it’s own DIV. And with a little CSS, make them centered and in a single line.

Inject a Layout From Your Divi Library Into Your Footer Using Divi Hooks

Inject a Layout From Your Divi Library Into Your Footer Using Divi Hooks

Awhile back, I wrote up a tutorial for injecting Divi Library Layouts into your footer by modifying the footer.php template. With the introduction of Divi Hooks, we can now inject that layout into the footer without having to modify any php template files.  All we have to do is add a simple snippet of PHP to your functions.php file.

Inject a Divi Layout From Your Divi Library Above the Default Main Header

Inject a Divi Layout From Your Divi Library Above the Default Main Header

Have you ever wanted to replace the Divi Top Header with Divi Page Builder Layout from the Divi Library? Now you can inject a custom Divi layout from your Divi Library above your Default Divi Main Header using the new Divi Hooks. All we have to do is add a simple snippet of PHP to your functions.php file.

How To Add Double Top & Bottom Borders Around An Image

How To Add Double Top & Bottom Borders Around An Image

In this tutorial, I will show you how to use a little CSS to add borders around an image that extend beyond each other at the corners. I also threw in a little snippet that extends the borders a little more when you hover over the image adding an elegant touch to your website project.

Divi Fixed Footer Bar For Mobile Devices

Divi Fixed Footer Bar For Mobile Devices

In this tutorial, I will show you how to use a Divi Library Layout, a little custom CSS, and a little PHP, to inject a fixed Mobile Footer Bar that gives your website an app-like appearance.

Align Buttons To The Bottom of the Row

Align Buttons To The Bottom of the Row

In this tutorial, I will show you how we use a little custom CSS to make the buttons align vertically across the bottom of the row so that no matter how much text is in the module above it, all the buttons in that row will align.

Inline Buttons

Inline Buttons

In this tutorial, I will show you how we use a little custom CSS to make several inline buttons in a single row. This effect is great for headers or call to action sections that need two or more buttons right next to each other.

Animated Gradient Background Overlay Close-In From Both Sides

Animated Gradient Background Overlay Close-In From Both Sides

In this tutorial, I will show you how we use a little custom CSS to have the gradient background overlay close-in from both sides shortly after the page loads giving the page header section a crisp image, clear text and a tad bit of animation for that extra “pop.”

Animated Gradient Background Overlay Slide-in From The Side

Animated Gradient Background Overlay Slide-in From The Side

In this tutorial, I will show you how we use a little custom CSS to have the gradient background overlay fade-in shortly after the page loads giving the page header section a crisp image, clear text and a tad bit of animation for that extra “pop.”

Animated Background Gradient Fade-in Overlay

Animated Background Gradient Fade-in Overlay

In this tutorial, I will show you how we use a little custom CSS to have the gradient background overlay fade-in shortly after the page loads giving the page header section a crisp image, clear text and a tad bit of animation for that extra “pop.”

Gutenberg, Divi, Beaver Builder, and the Future of Page Builders

Gutenberg, Divi, Beaver Builder, and the Future of Page Builders

With the release of WordPress 5.0 just around the corner, a lot of people have been asking me what does that mean for those of us that use page-builders like Divi and Beaver Builder. The short answer is that it is too soon to tell but I have been reading up, asking around, and pestering some people to get their thoughts on the future, and so I hope this helps shed some light.

Add a Classy Underline to your Divi Blurb Title

Add a Classy Underline to your Divi Blurb Title

In this tutorial I am going to show you how you can use a little custom CSS to add a classy underline between the Divi Blurb title and content. We also use the CSS to add more hover controls to the rest of the blurb.

Compact Divi Mega Menu

Compact Divi Mega Menu

The Divi Mega Menu is a great feature that comes standard with Divi. But it lacks in settings that make it easy to customize. Let’s change that!

Divi Blog Grid Slide Down Effect

Divi Blog Grid Slide Down Effect

In this tutorial I am going to show you how you can make the excerpt, otherwise known as the post-content, slide down from behind the blog image and title when you mouse over them.

Divi Menu Swapping Borders

Divi Menu Swapping Borders

In this tutorial I am going to show you how you can make left and right vertical side borders swap over to top and bottom horizontal borders on each menu item.

Divi Menu Expanding Chopstix Borders

Divi Menu Expanding Chopstix Borders

In this tutorial I am going to show you how you can make Divi Menu Top & Bottom Borders that expand and reveal like chopstix; closed at one end then slowly opening up.

jQuery Send On Section Click

jQuery Send On Section Click

So in this tutorial I am going to show you how you can make a section clickable and how to send the user to another url when they click on it.

Divi Blurb Header Sliding Underline

Divi Blurb Header Sliding Underline

In this tutorial I am going to show you how you give the Divi Blurb Header an animated sliding underline when you hover. This slides in from the left and slides out to the right making it a little different than the typical expanding or floating underline.

Create a 404 Page Using The Divi Builder

Create a 404 Page Using The Divi Builder

In this tutorial I am going to share with you the method we used on Monterey Premier’s 404 page template injecting a saved Divi Library Layout into the 404 page template.

Hide Divi’s Top Header on Scroll

Hide Divi’s Top Header on Scroll

When Divi’s Fixed Header option is enabled, the top header and the main header remain fixed at the top of the screen as you scroll down the page. But sometimes that takes up too much screen real estate. This nifty little snippet will allow the Main Header to scroll up over the Top Header hiding it until you scroll back up to the top of the page.

Divi Module Hover Animations

Divi Module Hover Animations

In this Divi tutorial we are going to show you how to create a cool hover animation on your Divi Modules with a little custom CSS.

Add Thumbnails To Your Sidebar Recent Post List

Add Thumbnails To Your Sidebar Recent Post List

Ready to add a little pizazz to your sidebar? In this tutorial we are going to show you how to add thumbnail images to your Recent Posts Links on your Divi Sidebar using the Recent Posts Widget with Thumbnails plugin.

Add Excerpts To Your Filterable Portfolio

Add Excerpts To Your Filterable Portfolio

In this tutorial we are going to show you how to add Excerpts to your filterable portfolio module and make the changes in your child theme so that you won’t lose the changes when you update/reinstall Divi.

Divi Blurb Image Hover Animations

Divi Blurb Image Hover Animations

Do you want to make your Divi Blurb Module Images stand out a bit? Why not add a cool hover effect like zoom and rotate on hover. Its easier than you think.

Adding Extra Fields and Icons to The Top Header

Adding Extra Fields and Icons to The Top Header

Have you ever wanted to add more info to the top header instead of just a phone # and email address? How about a physical street address or new social icons? Well it is easier than you think using the secondary menu and Font Awesome.

A Simple Slider Alternative for Divi

A Simple Slider Alternative for Divi

Using Meta Slider is a simple alternative to the Divi slider. In this post we look at how we can implement a responsive slider in Divi using this great plug-in. And it’s free too!

Customizing the Pricing Table in Divi

Customizing the Pricing Table in Divi

The Pricing Table Module that comes with Divi is simply awesome. It does the work we would normally download a plug-in for. But WordPress developers know that less plug-ins make for a better performing and secure website. And there are so many ways to customize the pricing table using some custom CSS, that you really don’t need to consider the plug-in anymore.

Customizing the Subscribe Module in Divi

Customizing the Subscribe Module in Divi

The Subscribe Module that comes with Divi is great as it is. But the current trend is to have the subscribe option as a call to action above the fold on the landing page and sometimes a horizontal subscribe section just fits best with your site. So here are a few tweaks I came up with so that you wont have to install another plug-in for this simple trick.

Customizing the Testimonial Module in Divi

Customizing the Testimonial Module in Divi

We offer a number of different services and so I wanted to come up with a unique way to differentiate the various testimonials so that visitors can see the ones specifically related to a particular service. So this article shows you how we were able to do this using the Testimonial Module in the Divi WordPress theme from Elegant Themes with a little custom CSS.

Adding a Fullwidth Menu in Divi

Adding a Fullwidth Menu in Divi

Divi comes packed with many ways to customize & place your menus. In fact you can place custom menus practically anywhere you want. Here is a brief tutorial on how.

Get Inspired and Present a Winning Design Without All the Hassle

Get Inspired and Present a Winning Design Without All the Hassle

There are a number of ways for a designer to propose a website design & layout ideas to a client. Some use wire-frames, some use Photoshop, some sketch it out on a pad of paper and some simply like to hash it out over coffee. How you do it is a matter of preference but it does not have to be complicated. Here is my method…

Adding A New Footer Section to Divi

Adding A New Footer Section to Divi

One of my recent projects required me to add a brand new footer section to the Divi WordPress theme. It also required me to be able to use a custom sidebar that would populate the new footer area with widgets. This is how I did it…

Create a Different Logo & Header Menu on the Homepage in Divi

Create a Different Logo & Header Menu on the Homepage in Divi

Divi 2.0 is one of the most flexible themes I have ever worked with. There are just so many things you can do with it. It puts the power of customization into your hands. On this tutorial we walk you through the steps on how to use a different logo and header menu on the homepage that is different from the rest of the site using Divi 2.0

Adding Social Icons in Divi 2.0

Adding Social Icons in Divi 2.0

The Divi WordPress Theme from Elegant Themes is probably the most advanced, yet most easy to use WordPress Themes available today. One cool feature is that it makes it easy to use social media links on the footer of your page. Unfortunately you have to do a little tweaking in order to add others. This article explains how.

Episode 6: Building A Divi Consultancy

Featuring Nathan Weller from Elegant Themes and Geno Quiroz from Monterey Premier.

 

divi-nation-800X235

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest