Divi Tutorial – Every Layout as a Shortcode

Hey guys, now this one is pretty awesome.

As usual, I was browsing Divi groups, and looking around and stumbled across this gem.

So, remember how we injected a custom footer?

Well, this is about the same level of coolness, but it applies to everything. Wow.

It’s like.. module-ception. Modules inside modules.

First things first. You will need a child theme for this to stay working even through updates.
Click here for a free Divi child theme.

Got your child theme installed? Coolio.

Now, go to Appearance > Editor and click on function.php

Then, add this code:

If you don’t know where it goes in the functions.php, then just make sure you put it in the bottom without disturbing any previous code.

So now that that’s in there, let’s go check the Divi library.

Yup. All there. Cool beans. Now you see shortcodes in the last column. That’s how we’re gonna inject layouts within layouts.

Let’s take a section.

It really doesn’t matter what the section is. As long as it works, right?

It can be a slider, call to action, testimonials, anything!

We take the shortcode of that particular layout/section/row/module. (in this case the one with 202)

and put it in.. somewhere. In this case, a slider.

We will soon end up with a testimonial slider (just a regular slider with testimonials) inside a full-width slider.

… and publish I guess?

Yup. Works.

How can you use this idea? Well, besides the obvious “it’s up to you,”

I think one really awesome thing you could try is adding complex layouts inside sliders.
That’ll beef up your sliders. (an area where default Divi lacks in functionality)

Give all that a whirl, and let me know what you’ve come up with!

[sc name=”learn css”]
 
[sc name=”podcast”]
 

Code credit: SJ James – Moderator guy on Facebook’s Divi Theme | Extra Theme Help & ShareGroup

Photo by Mr Cup / Fabien Barral on Unsplash