7 Divi UX Best Practices You Should Keep in Mind

Posted on December 22, 2018 by 14 Comments

7 Divi UX Best Practices You Should Keep in Mind
Blog / Divi Resources / 7 Divi UX Best Practices You Should Keep in Mind

I think we can all agree upon the fact that Divi is highly versatile. There are so many possibilities to customize and personalize any website youโ€™re building. If youโ€™re looking to give your work productivity a boost, this might be the ideal post for you. Weโ€™re going to cover 7 Divi UX best practices that you might or might not be familiar with. The 7 tips Iโ€™ll share are some I personally use a lot and benefit from while working with Divi on a daily basis.

Letโ€™s get to it!

1. Using Micro Animations

The first Divi UX best practice you might want to keep in mind is using micro animations instead of excessive ones. There used to be a time where the more animations a website had, the โ€˜more customizedโ€™ or โ€˜advancedโ€™ it seemed to the public. However, those times are over. Besides looking really fancy, excessive animations donโ€™t contribute to the overall user experience people have on your website. As a matter of fact, they can often distract visitors from whatโ€™s really important. Opting for micro animations instead is the way to go. Diviโ€™s animation options allow you to customize the speed and intensityย of any animation you add. The key to creating micro animations is using a low animation intensity with a slightly longer animation duration.

Go to Design Tab of a Design Element

Open any design element of your choice and go to the advanced tab. There, youโ€™ll find the animation options.

divi ux best practices

Use Small Amounts of Animation Intensity

You can pick any animation type and decrease the animation intensity. The lower you go, the more subtle the animation becomes. By increasing the animation duration, youโ€™ll make sure the animation doesnโ€™t go unnoticed.

divi ux best practices

2. Optimizing Responsiveness Manually

One of Diviโ€™s biggest advantages is the fact that itโ€™s easy to make any layout youโ€™re creating responsive as well. As a matter of fact, Divi does most of the work for you already. Everything you create becomes responsive from the moment you add it. From that point forward, the only thing left to do is manually make changes to design elements. This includes changing the text size of copy youโ€™re sharing according to screen size, for instance.

Now, rows and columns have a predefined margin value built-in that changes according to the screen size. But you donโ€™t necessarily have to go with these default values. I, for instance, have found that many popular websites use less left and right margin on smaller screen sizes. That way, you can fit more content horizontally, which means less vertical scrolling is required.

The default left and right margin that is used on smaller screen sizes is 40px. To take advantage of the entire width of smaller screen sizes, I recommend replacing this value with 25px.

Letโ€™s go through the process step by step.

divi ux best practices

Change Row Sizing

The first thing youโ€™ll need to do is remove all the space between sections, rowsย and modules by enabling the following options in the sizing settings of the row:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

divi ux best practices

Add Section OR Row Padding

Now, we still want to have sufficient space between the section and the row. You can choose if you want to add left and right custom padding to the row or section youโ€™re working on. Adding it to the row wonโ€™t affect other rows in the section. But on the other hand, applying it to sections will make sure these margins remain the same throughout the entire section, no matter how many rows youโ€™re adding.

  • Left Padding: 23vw (Desktop), 30px (Tablet), 25px (Phone)
  • Right Padding: 23vw (Desktop), 30px (Tablet), 25px (Phone)

divi ux best practices

Add Column Padding

The space between columns and modules is important as well. You can customize these values according to different screen sizes.

  • Column 1 Right Padding: 1vw (Desktop), 0vw (Tablet & Phone)
  • Column 2 Left Padding:ย 1vw (Desktop), 0vw (Tablet & Phone)
  • Column 2 Right Padding:ย 1vw (Desktop), 0vw (Tablet & Phone)
  • Column 3 Left Padding:ย 1vw (Desktop), 0vw (Tablet & Phone)

divi ux best practices

Decrease Text Sizes

Want to 100% utilize the horizontal width you get on smaller screen sizes? Although 13px for body text size might seem small from a laptopโ€™s perspective, itโ€™s usually more than enough for a mobile device. Try viewing a 13px body text size from your mobile phone, in combination with the steps above, and youโ€™ll see what Iโ€™m talking about!

3. Using Viewport Units Instead of Pixels

This is one of the things weโ€™ve done in the previous step as well. To make sure your website remains responsive across all desktop screen sizes, itโ€™s recommended you use viewport units instead of pixels. This will make sure your website looks great and exactly the way youโ€™ve designed it, even on 27โ€ณ desktop monitors.

Smaller screen sizes, on the other hand, donโ€™t tend to differ as much as a 15โ€ณ vs a 27โ€ณ desktop screen. It might help to use viewport units when creating vertical overlaps but sticking with pixels for left and right padding/margin wonโ€™t do any harm.

4. Extending Style for Text Orientation

One of the things people will quickly notice on your website, even subconsciously, is how consistent you are in the design youโ€™ve built. This includes, but is not limited to, the text orientation you use throughout your pages. One of Diviโ€™s UX best practices isย finishing a design by checking the text orientation. You can sure combine different text orientations within a page, if theyโ€™re well thought out and played out. But, it gets more difficult when youโ€™re combining different text orientations in one particular section. The best scenario; you keep one text orientation throughout your page. But if you feel like experimenting more, try to at least keep one kind of text orientation per section. You can do that by just taking a look at all the different design elements, or you can use one of Diviโ€™s efficiency features thatโ€™ll do the job for you.

In just a few steps, you can make sure youโ€™re using the same text orientation, and consistency, throughout your entire page or section.

Letโ€™s go through those steps.

Open Any Module That Contains Text

Open any module on your page that contains text and go to the text settings.

divi ux best practices

Right Click Text Orientation Option

Right-click the Text Orientation option you can find in the text settings and select the โ€˜Extend Stylesโ€˜ option.

divi ux best practices

Extend Text Orientation of Choice Throughout Section or Entire Page

Now, depending on how consistent you want the text orientation to be throughout your page, you can choose to extend the text orientation of your choice throughout the entire layout or a particular section.

divi ux best practices

5. Switching Back and Forth Between Visual Builder & Wireframe Mode

One of the great things about Diviโ€™s Visual Builder is that you donโ€™t even have to choose between editing something in the backend or frontend. Changing between both takes literally less than one second. Iโ€™m of the opinion that you can get the best level of productivity and overview if you combine both. Especially if youโ€™re dealing with multiple overlaps in your layout, switching over to wireframe mode can help you make changes quickly. Or, if youโ€™re looking to drag and drop a certain design element elsewhere on the page, you can make it easier by switching over to wireframe mode and dragging that particular element without having to scroll endlessly.

And did you know that you can open a design elementโ€™s modal and switch between Visual Builder and Wireframe Mode while still having the modal open? This allows you to make changes in the backend of your design and watch your new design settings fall into place whenever you want to.

divi ux best practices

6. Import/Export Layout Directly on Page

By now, weโ€™ve all gotten used to the premade layouts, saved layouts and the Divi Library in general. But say youโ€™re working on a particular page on a local host, and you want to upload it to a live website once itโ€™s done, without going through the hassle of:

  • Saving the layout to your Divi Library
  • Going to your Divi Library and exporting the JSON file
  • Going to your live websiteโ€™s Divi library
  • Uploading the JSON file
  • Going to your live websiteโ€™s page
  • Uploading the JSON file from your saved layouts

Then, you can simply use the import/export option thatโ€™s right there on your page. This will allow you to create a JSON file without having to access the Divi Library at all.

divi ux best practices

The same way youโ€™ve exported the layout, youโ€™ll be able to import the layout to your new page. But know that once you choose this approach, you wonโ€™t be able to import the layout to your Divi Library on your live website. Only directly to a page.

7. Using the โ€˜Zoom outโ€™ Option Regularly to Keep Perspective

This is probably one of my favorite Divi UX features. Iโ€™m sure weโ€™ve done it all before; open a new regular tab or incognito window to see the outcome of a page weโ€™ve made. And then, taken a print screen of the entire page using a Chrome extension or Firefox add-on. All of this to give yourself a fresh view on the layout youโ€™re working on and seeing if everything fits in the overall page structure.

Although I still recommend doing that occasionally, you wonโ€™t have to do it multiple times within a short amount of time. Instead, use the zoom-out option thatโ€™s right there, in your Visual Builder. This will not only give you the perspective you were looking for, but itโ€™ll also help you make quick changes without ever having to leave the page.

divi ux best practices

divi ux best practices

Final Thoughts

In this post, weโ€™ve shown you 7 different Divi best practices thatโ€™ll help you boost productivity when creating websites with Divi. These tips will surely come in handy when creating any kind of website! If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Featured Image by aurielakiย / shutterstock.com

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: Divi MadMenu

Divi Plugin Highlight: Divi MadMenu

Posted on March 22, 2023 in Divi Resources

Divi MadMenu is a header and menu creation plugin that expands the possibilities of your Divi headers and menus. Divi MadMenu comes with a horizontal menu module and a vertical menu module. You can fully customize every aspect of your menu with extensive design options, allowing you to create...

View Full Post
Get a Free Wellness Layout Pack for Divi

Get a Free Wellness Layout Pack for Divi

Posted on March 20, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Wellness Layout Pack thatโ€™ll help you get your next Wellness website up...

View Full Post

14 Comments

  1. Thank you, as Divi goes through all the changes sometimes it is hard to keep up. I found this article helpful. Again Thank you.
    Elsie

  2. IE still does not fully support Viewport Units. Do you have any IE hacks to aid in supporting IE?

  3. I do almost all of this when I design too especially when zooming out. It’s like stepping back from a large painting to see how the whole thing looks. I also agree 100% on the animations. Too many web designs I’ve seen have so many animations it’s overwhelming!

  4. I would definitely like to see Viewport units used as default in Divi or toggle all Pixel Units to Viewport automatically in the back-end. Having to change all the default margins and padding manually really bloats my time.

    Great article!

  5. Absolutely love these instructional posts from Donjete! Thank you, please keep them coming.

  6. Nice article, will you be updating djvi defaults to take advantage of these tips as well?

  7. Love this post! Thank you, Donjete!

  8. From all the posts that I have read relating to UX, it was the best undoubtedly! In fact the post is so well oriented and user friendly that it proves all your points! Excellent post!

  9. When will you finally realize that an additional link to the end result of your tipops would be more useful than such childish screenshots? It would also make it easier to understand your tips.

    But what do I know…

  10. Thank you for the tips, as a private beginner I found the responsiveness part particularly useful. Much appreciated ๐Ÿ™‚

  11. Thanks Donjete, you gave excellent suggestions explained with the usual clarity and professionalism. I hope that you will soon share with us other suggestions. Happy Holidays

  12. You know what would be nice? If Divi allowed different Text Orientation for different screen sizes. So often, centered doesn’t make sense on mobile, but looks great on desktop. Right now I just duplicate the modules in question and hide them respectively on different screensizes. Or, I could probably do some overriding by adding media targets and left align all for mobile.

  13. Always I love divi article.It gives me new energy to create awesome layout and website.

  14. Great article. Very useful pieces of information which are today almost obligated mandatory in UX design

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today