How to Create Mobile-First Designs with Divi

Posted on February 21, 2019 by in Divi Resources | 20 comments

How to Create Mobile-First Designs with Divi

Many websites get tons of visitors from mobile devices. This leads to the question of whether or not your designs are sufficiently optimized for smaller screen sizes. With Divi, a design that is built for a desktop experience ends up being instantly responsive as well. But just because something is responsive doesn’t mean it’s optimized as well.

If mobile is your main source of visitors, it can really help to start designing and building from a mobile perspective instead of a desktop one. In this post, we’ll show you exactly how to do that. After going through some tips and tricks that you should keep in mind, we’ll also recreate an example from scratch that takes these tips into account.

Let’s get to it!

Preview

As mentioned before, we’ll start off by going over some tips and tricks. Afterwards, we’ll recreate an example from scratch that makes use of these tips. Let’s take a look at the outcome.

Mobile

mobile first

Desktop

mobile first

Approach

Subscribe To Our Youtube Channel

1. Switch Over to Mobile View Right After Adding a New Page

The first thing you need to do, after adding a new page, is immediately switching over to mobile view. This will allow you to create a design that is mobile-oriented and accurate.

mobile first

2. Enable Responsive Options for Each Design Element & Modify the Mobile Values First

Once you start designing whatever design you’re going for, you’ll want to enable the responsive options for design elements. This includes but is not limited to text size, padding and margin. The first values you’ll add will be the mobile values (instead of the desktop ones) to make sure the design is optimized for mobile first.

mobile first

3. Remove Default Space Between Columns & Add Padding Manually if Needed

To create more horizontal space, it’s also recommended to remove all of the default custom padding between columns. If needed, you can always add the padding manually to each column or design element and choose for yourself how much distance you want there to be.

mobile first

4. Place 2 or 3 Columns Next to Each Other to Create a Horizontal Design

The responsive structure in Divi is vertically-oriented. This means that modules and columns appear below each other. This, however, requires more vertically scrolling. Depending on the design your working on, creating a more horizontal flow can really make the difference.

mobile first

5. Modify Desktop & Tablet Views Along the Way or Afterwards

Even though you’re designing for a mobile-first purpose, it’s important to keep the other views in order as well. Responsive options that are included within each design element will help you accomplish that. You can choose to modify these values afterwards or throughout the designing process.

Let’s Start Recreating the Example!

Add New Section

Open a new page, switch over to mobile view and add a new section to get started.

mobile first

Add Row #1

Column Structure

Continue by adding a new row to your section using the following column structure:

mobile first

Add Text Module to Row

Add H2 Content

Add a Text Module to the column of your row and enter some H2 title content.

mobile first

H2 Text Settings

Then, go to the heading text settings and change the appearance of the title.

  • Heading 2 Font: Didact Gothic
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #333333
  • Heading 2 Text Size: 5.5vw (Phone), 5vw (Tablet), 2vw (Desktop)

mobile first

Add Divider Module to Row

Visibility

Right below the Text Module you’ve added, go ahead and add a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

mobile first

Color

Then, go to the design tab and change the color of the divider.

  • Color: #333333

mobile first

Sizing

Modify the sizing settings as well.

  • Width: 48%
  • Module Alignment: Center

mobile first

Add Row #2

Column Structure

Continue by adding another row to the section using the following column structure:

mobile first

Background Color

Without adding any modules yet, open the row settings and add a background color to the row.

  • Background Color: #ffe69e

mobile first

Column 2 Background Color

Add a background color to the second column of the row as well.

  • Column 2 Background Color: #ffd65b

mobile first

Alignment

Then, change the row alignment.

  • Row Alignment: Left

mobile first

Sizing

Open the sizing settings next. Here, we’ll want to remove all the default space between columns. We’re also using custom width for the column to make it look good on desktop.

  • Use Custom Width: Yes
  • Unit: PX
  • Custom Width: 700px
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

mobile first

Spacing

Continue by going to the spacing settings and add some custom margin and padding values manually.

  • Top Margin: 5vw
  • Bottom Margin: 5vw
  • Top Padding: 0px
  • Bottom Padding: 0px
  • Column 1 Top Padding: 10vw (Phone), 8vw (Tablet), 4vw (Desktop)
  • Column 1 Bottom Padding: 10vw (Phone), 8vw (Tablet), 4vw (Desktop)

mobile first

Border

Add some rounded corners to the row as well.

  • Top Right: 10px
  • Bottom Right: 10px

mobile first

Box Shadow

And give it a subtle box shadow too.

  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.16)

mobile first

Custom CSS

Last but not least, we’re going to place the columns next to each other on smaller screen sizes to make sure we’re taking full advantage of the horizontal space we have. Go to the advanced tab and add a single line of CSS code to the main element.

display: flex;

mobile first

Add Text Module to Column 1

Add H3 Content

Time to start adding modules! Add a title Text Module to the first column and enter some H3 content.

mobile first

H3 Text Settings

Then, go to the design tab and modify the heading text settings.

  • Heading 3 Font: Didact Gothic
  • Heading 3 Font Weight: Bold
  • Heading 3 Text Alignment: Center
  • Heading 3 Text Color: #ee6f49
  • Heading 3 Text Size: 4vw (Phone), 3vw (Tablet), 1.5vw (Desktop)

mobile first

Add Divider Module to Column 1

Visibility

Add a Divider Module next. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

mobile first

Color

Then, change the color of the divider.

  • Color: #ffffff

mobile first

Sizing

Along with the sizing settings.

  • Divider Weight: 4px
  • Width: 30%
  • Module Alignment: Center

mobile first

Spacing

Add some custom top margin to the module too.

  • Top Margin: 4vw (Phone), 2vw (Tablet), 1.5vw (Phone)

mobile first

Add Button Module to Column 1

Add Copy

The next and last module needed in the first column is a Button Module. Enter some copy.

mobile first

Alignment

Then go to the design tab and change the button alignment.

  • Button Alignment: Center

mobile first

Button Settings

Modify the appearance of the button in the button settings as well.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 3vw (Phone), 2vw (Tablet), 1.5vw (Desktop)
  • Button Text Color: #ffffff
  • Button Background Color: #ee6f49
  • Button Border Width: 0px
  • Button Font: Didact Gothic
  • Font Weight: Bold

mobile first

mobile first

Add Image Module to Column 2

Upload Icon

The only module we’ll need in column 2 is an Image Module. You can use any image of your choice, but if you want to use the exact same icons that were used in this example, you can go to the Furniture Store Layout Pack and download them at the end of the post.

mobile first

Alignment

Then, go to the design tab and change the image alignment.

  • Image Alignment: Center

mobile first

Clone Row #2

Once you’re done modifying the row, you can go ahead and clone it.

mobile first

Change Row Background Color

We’ll need to make some changes to this duplicate, starting with the row background color.

  • Background Color: #8ee5cf

mobile first

Remove Column 2 Background Color

Continue by removing the column 2 background color.

mobile first

Add Column 1 Background Color

We’re adding a background color to the first column instead.

  • Column 1 Background Color: #47e5bd

mobile first

Change Modules in Columns

We’re also switching columns for the modules.

mobile first

Change Icon in Image Module

Then, change the icon in the Image Module.

mobile first

Add Filter to Image Module

And make it match with the new row and column background colors by changing the hue in the filters settings.

  • Hue: 65deg

mobile first

Change Row Alignment

Change the row alignment next.

  • Row Alignment: Right

mobile first

Change Row Border

Along with the rounded corners.

  • Top Left: 10px
  • Bottom Left: 10px

mobile first

Change Text Color of Text Module in Column 2

We’re also using another text color for the Text Module in column 2.

  • Heading 3 Text Color: #7b9710

mobile first

Change Button Background Color

And we’re using that same color for the button background.

  • Button Background Color: #7b9710

mobile first

Clone Both Rows

Now that we have both sides of the row, we can clone both of them up to as many times as we need and place them in order.

mobile first

Modify Duplicate #1

Change Row Background Color

We’ll start by changing the row background color of the first duplicate.

  • Background Color: #ffc9cf

mobile first

Change Column Color

Then, we’ll modify the column 2 background color as well.

  • Column 2 Background Color: #ffadb6

mobile first

Change Icon in Image Module

Change the icon in the Image Module to another one of your choice.

mobile first

Add Filter to Image Module

And change the hue in the filters settings to make it match with the new row and column background colors.

  • Hue: 309deg

mobile first

Change Text Color

We’re changing the text color too.

  • Heading 3 Text Color: #f862b0

mobile first

Change Button Background Color

And we’re using that same color for the button background.

  • Button Background Color: #f862b0

mobile first

Modify Duplicate #2

Change Row Background Color

On to the next and last duplicate! Change the row background color.

  • Background Color: #b2c4ff

mobile first

Change Column Color

Do the same thing for the column 1 background color.

  • Column 1 Background Color: #9eb4ff

mobile first

Change Icon in Image Module

Then, change the icon that is being used.

mobile first

Add Filter to Image Module

Along with the hue in the filters settings of the Image Module.

  • Hue: 221deg

mobile first

Change Text Color

Modify the text color of the Image Module next.

  • Heading 3 Text Color: #6287f9

mobile first

Change Button Background Color

And use that same color for the button background.

  • Button Background Color: #6287f9

mobile first

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome.

Mobile

mobile first

Desktop

mobile first

Final Thoughts

If your main source of visitors comes from mobile devices, it’s important to optimize everything for that particular screen size. With Divi, everything becomes instantly responsive. But just because something is responsive, doesn’t mean it is optimized for that particular screen size as well. Another way to approach designing for mobiles is by starting your design from a mobile-first perspective. In this post, we’ve shared some tips and tricks on how to do that. Afterwards, we’ve recreated an example that lives up to these rules and allows us to create a stunning outcome. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Check Out These Related Posts

20 Comments

  1. I’d like to see a live example of a site you created in a Mobile First design.

  2. This may be newbie question. If I design the site using Divi which is responsive and optimize the design for each viewport shouldn’t it be considered mobile first when viewed on mobile? Or is the fact that if I design for the mobile viewport first, Divi creates the that first which would be considered “mobile first”? I am a little confused lol.

    • Mobile first means that you design for mobile devices first, as visitors are more likely to be on mobile devices. THEN you switch to desktop mode and make further embellishments. (Be warned though, if you are not concientious about the edits you make being ONLY for desktop, you can easily screw up your mobile version)

      • Right, so it doesn’t matter the order I design in as long as I pay attention to the mobile edits.
        Thanks!

  3. I’d love to see the ability to select a Width value. The default DIVI mobile width is wider than what I need to design for. Example 320px wide instead of 414px

    • Thank you for bringing this up. I can’t figure out why Divi continues to gloss over this regular complaint about the builder. This is perhaps the HUGEST (that’s not a word is it? most hugest? *schwink*) problem with Divi to date. The mobile “views” are not at all that. They are just skinnier versions of desktop views. In a world where well over 50% of websites are viewed exclusively on mobile devices, this fake solution in Divi is mind-blowing. How has this not only NOT BEEN the #1 concern at Divi/Elegant Themes, it’s not even in the discussion? I read this blog every time it comes out, and it’s not even on the table. Fun to create all of these nifty time savers like extending module designs, etc. But ALL OF THE TIME SAVERS COMBINED so far, don’t save me a fraction of the time I would be saved if I didn’t literally have to check every mobile design by going thru this same rigamarole time and time again:

      >save mobile design
      >wake iPhone/iPad
      >refresh page
      >guess what adjustments to make to correct what didn’t ACTUALLY work on a mobile device
      >make change
      >and repeat
      >and REPEAT
      >AND REPEAT until it finally looks good on an actual mobile device.

      I find the mobile “views” in the Divi builder to be a joke. And a cruel one at that because they could be so great, but no, instead they just sit there taunting us with, “Wouldn’t it be great if we were useful? Aren’t you sooooo tempted to design mobile with us even though you know we’re just gonna lead you to ugly websites when viewed on mobile devices? Isn’t it HILARIOUS that you pretty much have to use us just to see what the website could look like on mobile but actually won’t. And don’t you love the risk of getting egg on your face if you forget to check literally every detail using a mobile device before your client sees it and has to wonder if they hired the right person for the job? Cortisol is fun! You’re welcome!”

      Divi, fix it????? PLEASE?????

      • Because with builders, you can fix this issue yourself by learning css and how to write custom breakpoints as many have been doing for a few years now. The people like Elegant Themes that dev builders cannot and do not know what all devices people will view sites on and is left up to the site developer as it should be. Google web site breakpoints and you should be able to find plenty of examples. 😉

  4. This is a great post.

    The information will be extremely valuable for my future builds.

    Thank you.

  5. My goodness that is a timely post just listened to an episode on divichat about mobile first.

    It would be great to be able to set width preferences for mobile which could be done at setup just like setting up the colours etc.

  6. This is a really good topic, because well more than half the visitors to the site I manage are on mobile devices. I would like to take more advantage of the very high screen resolution available on mobile. I was confused by a few things in the tutorial. First I wondered why “display: flex;” is not built into the row module. Second thing is that we never see the before and after images as if they are on mobile screens of the same width. Or is the design on the right side of the arrow for tablets? Finally the desktop view is left looking, frankly, terrible. I guess that is easy to change?

  7. Hello! Total newbie here so my apologies in advance if my question(s) sound silly >.<

    I'm in the midst of building my site right now and so far, I've been doing all my pages in desktop version with the intention to optimise the pages for mobile later. Based on this tutorial, it seems like I can modify the elements on a page individually for mobile display so that it's mobile-optimised and I can do so without affecting the desktop design, am I right?

    How about for tablet display? What factors and properties should I look out for to ensure that the page displays nicely on tablets or will the default mobile-responsive function in Divi be sufficient for tablet display?

  8. Good article. I’d be interested in seeing some real-world Divi examples that take this approach.

  9. Thanks for the post, I found a few things to be very helpful. I personally tend to start with the default view (desktop) and then I go back and edit the tablet and mobile version of the padding/margin/text etc. Is this way of doing it considered bad practice? If so, then I’ll start doing the mobile first option, as you described in the post. Would I get a different outcome (in terms of looks across the 3x device categories) when I start with desktop and then backtrack and optimize the mobile version, versus the mobile first route? In my head (extremely newbie head) I assumed that the outcome would be exactly the same?
    Some more tips such as the display: flex code would be highly appreciated 🙂 I had never heard of that before I read your post. I struggle getting my sites to look GREAT across all screen sizes and the display flex will hopefully make it easier to get it looking good. So PLEASE more little code snippets like that in the future 🙂

    Thanks again

  10. Divi, please listen to these respondents’ complaints about the fake “mobile views” your builder offers for once.

    This is perhaps the HUGEST (that’s not a word is it? most hugest? *schwink*) problem with Divi to date. The mobile “views” are not at all that. They are just skinnier versions of desktop views. In a world where well over 50% of websites are viewed exclusively on mobile devices, this fake solution in Divi is mind-blowing. How has this not only NOT BEEN the #1 concern at Divi/Elegant Themes, it’s not even in the discussion? I read this blog every time it comes out, and it’s not even on the table. Fun to create all of these nifty time savers like extending module designs, etc. But ALL OF THE TIME SAVERS COMBINED so far, don’t save me a fraction of the time I would be saved if I didn’t literally have to check every mobile design by going thru this same rigamarole time and time again:

    >save mobile design
    >wake iPhone/iPad/Android phone
    >refresh page
    >observe the innumerable wackadoodles in actual mobile rendering of the design that I couldn’t see in the Divi builder
    >rotate each mobile device from portrait to landscape to see even more wackiness
    >guess what adjustments to make to correct what didn’t ACTUALLY work on a mobile device
    >make change
    >and repeat
    >and REPEAT
    >AND REPEAT until it finally looks good on an actual mobile device.

    I feel like the smartest, simplest thing to do is just keep the builder up to date with various mobile specs, so when we choose a mobile view, we can next select the mobile device -or- at the very least set the builder’s defaults to match the smallest screen sizes for each smart device that is still updated by its OS provider. For example, I think Apple still sells the iPhone SE, and the iPad mini 4. But they are still updating the iPhone 5s and earlier iPad minis. Then, let the device scale up for its own screen. Scaling up never seems to cause problems, but the Divi defaults are not actually mobile-friendly, let alone mobile-optimized, for ANY mobile device I’ve ever used so far.

    I find the mobile “views” in the Divi builder to be a cruel joke. (In fairness, maybe what I’m asking for is waaaaay outside the skillset of the coders at Divi. If so, feel free to say so.) These “mobile views” could be so great, but no, instead they just sit there taunting us with, “Wouldn’t it be great if we were useful? Aren’t you sooooo tempted to design mobile with us even though you know we’re just gonna lead you to ugly websites when viewed on mobile devices? Isn’t it HILARIOUS that you pretty much have to use us just to see what the website could look like on mobile but actually won’t. And don’t you love the risk of getting egg on your face if you forget to check literally every detail using a mobile device before your client sees it and has to wonder if they hired the right person for the job? Cortisol is fun! You’re welcome!”

    Divi, fix it????? PLEASE????? I really don’t know how to be more emphatic about where this should fall in your priority list (NUMBER ONE, NUMERO UNO, AT THE TOP) and still adhere to your comments policy.

    • I didn’t have so many problems with mobile… Normally I adjust all from the builder, and later I make a general check from my mobile to see if there is something odd, but normally it is not too much…

  11. How can I have vw instead of px?

    • In some fields you can just write it. The same with em.

  12. This is a very timely post and I want to thank you for sharing this.

    In a recent update (January 1, 2019), I created sliders for my home page (using the Divi Builder) and being “old-school” I created the site for desktop and I shut off the photos for the mobile. I personally hate that everyone wants to do everything on their phone. I try to use great photos and they look great (resolution-wise) on the tablet and the desktop. I didn’t think that they looked good at all on the mobile app.

    My question, is that if I enable the mobile app to see everything that I used in Divi (not a 3rd party plug-in), will they show up as well as they do in the desktop version?

    I thought responsive meant responsive across all platforms. Now it looks like we get to be mobile app developers first…….

    I also know that if people are doing everything on a phone, then I guess we have to design for that. Just frustrating because my time is limited on so many things in life, now I have to learn how to do my website for a phone (for some people) who won’t look at a desktop/tablet.

    I guess that is just “welcome to technology.” :=)

    Thank you for the information.

Join To Download Today

Pin It on Pinterest