Home

Homepage

Examples

Layout examples

Freebies

Free downloads

Pricing

Pricing plans

Tutorials

Tutorials & Tools

Contact Us

Questions, concerns or comments?

My Account

View member dashboard

Cart

View your cart

WELCOME TO DIVIMOBIFIRST

DIVI COMPLETE LAYOUT SCHEME

HEADERS AND FOOTERS

SECTION LAYOUT

IMAGE LAYOUTS

PRICE TABLES

PRODUCT LAYOUTS

TAB LAYOUTS

SLIDERS






































PRICING

Monthly, Yearly or Lifetime

View Pricing Table

jQuery Script Generator

jQuery structure and syntax generator

Floating Modules

How to Create a Floating Module?

Zoom in Effect

How to Add Zoom Effect To Images?

Plugin Tutorial

Guide on How to Use Plugin

CONTACT US

Questions, concerns and comments

Send us a message

YOUR CART

2

Back to top

Divi Mobi Column Classes | How To Use Plugin?

Enhance Your Divi Mobile Experience

Create Gorgeous, High Converting Mobile First Website Designs In Minutes… Using Our Extensive Divi CSS Library

Keep Divi Column ratios and build aesthetically beautiful mobile layouts for the Divi Builder with our expertly crafted CSS library. Get access to our over 30+ Divi mobile layouts. See what can be done using this plugin. See Main Menu for Demos.

Regular Section Tutorial

After activating the CSS plugin, the next thing you do is select the row that you want and type or copy the related CSS class name in the class field for the row container.

STEP 1.

Select the Regular section

Step 2.

Select your desired row

STEP 3.

Copy the related class name from the regular section chart for the row that you chose.

STEP 4.

Open up the Row advanced settings and type the class name in the CSS Class field.

CSS Class Field image

Result

Before

After

Specialty Section Tutorial

As before, after activating the plugin, all you have to do next is enter the correlating class names. However there are two classes we must enter. One for the section column layout and the other for the row container embedded in the specialty section column layout.

STEP 1.

Select the Specialty Section

STEP 2.

Select the desired section layout

STEP 3.

Copy the related class name from the the column layout that you choose. See specialty section chart below.

STEP 4.

Open up the Section settings and type the class name in the CSS Class field.

CSS Class Field image

STEP 5.

This is extra step for the specialty section. After choosing your desired section layout and it’s class name, select the respective row layout and it’s class name from the as seen in the regular section chart. Open the settings for the row container and add the CSS class name to the CSS field. Note that most row containers for the specialty section has up to 3 columns with 1 exception with 4.

STEP 6.

All done.
But wait there is more! With this plugin you can also…

 

1. Mobile Menu Headers

BEFORE

Loading...

AFTER

Loading...

2. Row Layouts

BEFORE

Loading...

AFTER

Loading...

3. Tab Layouts

BEFORE

Loading...

AFTER

Loading...

4. Combining Two Rows

BEFORE

Loading...

AFTER

Loading...

5. Combining Two Sections

BEFORE

Loading...

AFTER

Loading...

Subscribe

Join Our Divi Mobi First Community

Get access to all our Divi Mobi First tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

By Jemila

Completely revolutionize the way you think about building Divi Websites.
Get Instant Access Now

Check Out These Related Posts

1 Comments

1 Comment

  1. Zoritoler Imol

    Thank you

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *