Layout in a 2 column row
Layout on the right sidebar
The Divi layout in the backend
Below is actual section using this method.
Here is a link to the JSON file for the above layout. Import this in your Divi Layout area and play around with the settings.
Add the function below to your child theme functions.php file.
Link to TXT file for easier copy/paste.
The custom function does 2 things:
- Allows us to use a shortcode to display a Divi Layout anywhere we like.
- Adds a “Module Shortcode” column in the Divi Library for each library item. It displays the shortcode that you can copy/paste anywhere.
STEPS
- Go to the Divi/Divi Library and make a layout. You can make any layout you want and use any Divi modules you like. Like a Divi Slider module maybe? I’ve only needed to use the text module.
TIP: Removing all spacing in the sections and rows sometimes helps. You may also want to use a custom Gutter width of 1 or 2 in your row settings. - Go to Divi/Divi Library and copy the shortcode for your layout.
- Go to the page you want add your layout and add a Divi module.
- Paste the shortcode into the text area and save and publish.
That’s all!
TIP: I sometimes build the layout on an actual page first which helps me visualize better.
*ANOTHER TIP: Try using other modules like an accordion or blurb. Checkout the slider below that’s using the layout above and a few other sections, rows, and modules. Lots of possibilities!
0 Comments