Get The Plugin
Account Login

Divi Hacks Plugin

Examples & Documentation

Row Layouts

Customize row layouts with the following classes.

alignment classes

Usage

Add one of these classes to the Row Settings > Advanced tab > CSS ID & Classes > CSS Class.

row-layout-6 

This is created on a 1-column row, with 6 different modules inside.

Keep in mind that the columns are very small so it’s best for images, and other modules with very little content.

Add row-layout-6 to the Row Settings > Advanced tab > CSS ID & Classes > CSS Class.

horizontal-modules

This is created on a 1-column row, with any number of modules inside.

Add horizontal-modules to the Row Settings > Advanced tab > CSS ID & Classes > CSS Class.

To stack the modules on mobile devices, include the class stack-mobile as well.

Learn More
Sign Up

two-column-mobile

Normally, a 2-column and a 4-column row stacks all columns on top of each other when viewed on a tablet or phone.  This hack changes that to show 2 columns on tablets and phones. Take a look at the examples below. Resize the browser window to see the changes.

Add two-column-mobile to the Row Settings > Advanced tab > CSS ID & Classes > CSS Class.

**This only works on 2-column and 4-column layouts.

4 column row example

2 column row example

custom-row

With this class, you can customize the width of the columns to create custom row layouts. You can also add additional classes to customize the column widths for the tablet and phone.

First, create a row and choose the number of columns you want to use where you would normally change the column structure.

Then, add custom-row to the Row Settings > Advanced tab > CSS ID & Classes > CSS Class box.

Next, below that we will add one or more of the following classes to each individual Column CSS Class box.

These classes are global, meaning they apply on all devices.

  • custom-column-1
  • custom-column-2
  • custom-column-3
  • custom-column-4
  • custom-column-5 
  • custom-column-6
  • custom-column-7
  • custom-column-8
  • custom-column-9
  • custom-column-10
  • custom-column-11
  • custom-column-12

These classes have the same properties as the global classes, but they will only apply on tablets:

  • tablet-col-1
  • tablet-col-2
  • tablet-col-3
  • tablet-col-4
  • tablet-col-5
  • tablet-col-6
  • tablet-col-7
  • tablet-col-8
  • tablet-col-9
  • tablet-col-10
  • tablet-col-11
  • tablet-col-12

These classes have the same properties as the global classes, but they will only apply on phones: 

  • phone-col-1
  • phone-col-2
  • phone-col-3
  • phone-col-4
  • phone-col-5
  • phone-col-6
  • phone-col-7
  • phone-col-8
  • phone-col-9
  • phone-col-10
  • phone-col-11
  • phone-col-12

Class Explanations:

custom-column-1 = 1/12th of the width of the row.

custom-column-12 = 100% width.

custom-column-3 = 3/12ths width (or 1/4th)

custom-column-4 = 4/12ths width (or 1/3rd)

…and so on…

  • custom-column-2 phone-col-5 tablet-col-5
  • custom-column-5 phone-col-7 tablet-col-7
  • custom-column-3 phone-col-12 tablet-col-8
  • custom-column-2 tablet-col-4 phone-col-12