Divi Responsive Design Trail Guide

1. Intro To Making Divi Responsive

Explore an overview of how responsive editing works in Divi.

✨ Lesson Overview

NOTE: This tutorial is currently planned, but not yet published. The reason is that Divi 5 is changing the Visual Builder editing interface, and the responsive editing is changing. Due to this, we are going to wait to create this guide until everyone has access to the new interface. Until then, please consider checking our free course about making Divi responsive (which will be discontinued in favor of this Trail Guide soon).

2. Make Your Content Responsive

Here’s how to make your Divi website text and images responsive.

✨ Lesson Overview

NOTE: This tutorial is currently planned, but not yet published. The reason is that Divi 5 is changing the Visual Builder editing interface, and the responsive editing is changing. Due to this, we are going to wait to create this guide until everyone has access to the new interface. Until then, please consider checking our free course about making Divi responsive (which will be discontinued in favor of this Trail Guide soon).

3. Make Your Design Responsive

Learn how to make your Divi website colors and styles responsive.

✨ Lesson Overview

NOTE: This tutorial is currently planned, but not yet published. The reason is that Divi 5 is changing the Visual Builder editing interface, and the responsive editing is changing. Due to this, we are going to wait to create this guide until everyone has access to the new interface. Until then, please consider checking our free course about making Divi responsive (which will be discontinued in favor of this Trail Guide soon).

👍 Bonus Tips & Resources

Here are some additional related tutorials for making your website design responsive. This includes a guide on making responsive images, using CSS calc for fluid typography, and adding a line break at a specific word. These are things that would not apply to every website, but may be useful if you need guidance in these situations.

4. Control How Columns Stack On Mobile

Learn how to swap column order and set the number of columns side by side.

✨ Lesson Overview

In this session, we’ll explore two crucial aspects of mobile responsiveness using Divi: controlling column stacking order and adjusting the number of columns displayed side by side. First, we’ll dive into mastering the stacking order of Divi columns on mobile screens. Next, we’ll uncover the secrets of adjusting the number of Divi columns displayed side by side on mobile devices. These two guides will work great together to create mobile-friendly Divi designs!

👍 Bonus Tips & Resources

Another related but optional aspect of controlling Divi column stacking on mobile involves setting custom widths for each row. This can be achieved through a clever trick of inserting the desired column width within each column. This technique is particularly useful for crafting custom Divi headers or other layouts that demand unique and tailored column widths.

5. Make The Menu Responsive

Learn helpful techniques for creating responsive menus with Divi.

✨ Lesson Overview

In this session, we’ll explore three essential techniques for adjusting your navigation menu in Divi across desktops, tablets, and phones. First up, learn how to display a completely different Divi navigation menu on desktop, tablet, and phone screens. Next, discover how to show or hide different Divi menu items on each device. So instead of replacing the entire menu, this just adjusts the visibility of the individual menu item per device. Finally, we’ll delve into adjusting the Divi menu module’s responsive breakpoint so you can fine-tune the exact screen size where your menu changes from desktop to mobile. These responsive menu techniques will ensure a user-friendly browsing experience across devices.

👍 Bonus Tips & Resources

We have a lot more Divi menu related tutorials on our blog and YouTube channel, but it would not make sense to include them here. We only included the ones that specifically related to responsiveness and menus, and not just menus. Feel free to check them out!

6. Make Your CSS Code Responsive

Learn about CSS media queries and how to use them in Divi!

✨ Lesson Overview

In this lesson, we’ll explore how to make custom CSS code used on your Divi website adapt to different devices and screen sizes. For this, we will use CSS media queries, which allow you to customize your website’s layout and styling based on the visitor’s screen size. We’ll cover the basics of media queries, including viewport width versus screen resolution, CSS breakpoints in Divi, and how to write custom media queries. Let’s get started!

7. Miscellaneous Responsiveness Stuff

Advanced Tips and Tricks For Making Your Site Responsive

✨ Lesson Overview

In this section, we’ll focus on fine-tuning your Divi website to ensure a seamless experience for mobile users. We’ll cover three key areas: how to disable Divi hover effects on mobile touch devices since these are not needed, how to disable Divi animation effects on mobile to improve performance, and how to make the Divi back to top button visibility responsive per device for improved user experience. By the end of this lesson, you’ll have the knowledge to enhance your Divi website’s mobile responsiveness and user-friendliness. Let’s get started!