How to make a website responsive in Divi?

These days, you can’t do without a mobile-friendly website. After all, about half of your visitors view your site on a phone. Therefore, it is important that the design of your website adapts, to different devices. Responsive web design is what we call it. But how do you make a website responsive in Divi? In this article, you’ll get the explanation!

Sometimes you still come across them: websites that are not adapted to cell phones or tablets. Super unfortunate is that, because a mobile design that is missing or not working will chase visitors away. Therefore, an attractive responsive design is very important.

Have you yet to start using Divi? You can also create very nice blogs in Divi. Read here how to create a great blog with Divi!

View responsive website in Divi

Before you fly in, it’s helpful to create the desktop version of your website first. When it is ready, then you can start customizing it for tablets and phones. You can often make your website mobile-friendly in WordPress through the customizer or system customizer, but with Divi it works a little differently.

This way, Divi allows you to view the design on different devices:

1. Go to the page you want to edit.
2. At the top of the screen, click “open visual builder.
3. When it is opened, you will see a purple sphere with three white dots below. Click on that.
4. A black bar with white icons appears on the left. You recognize the desktop, the tablet and the cell phone. By clicking on that, you will see your site’s layout for these devices.

Important note: this may always look different than on your own devices, you are seeing a simulation here. Before you launch your website, it’s best to test this out on different image media.

In your mobile version, your header (the top piece of your website) and your menu look different. Want to know how to create a beautiful mobile header in Divi? Read here how to create a great drop-down menu for mobile devices in Divi!

Customizing responsive website in Divi in general

Once you have performed the above steps, you will see that Divi automatically adapts the design to different devices. Sometimes this automatically goes well, but very often you have to adjust things.

Want to customize the web design for tablet or cell phone in Divi? If so, there are two ways to do so:

1. Using the black bar, set the visual builder to tablet view or mobile view. Next, slide over the part of Divi you want to customize and click on it.
2. Working from desktop view by default, you visit the section you want to modify and click on it.

Both ways can and both ways can work equally well.

Customize responsive web design in Divi by section, row or module

This is the part where you need to pay close attention to courage: have you created a specific design that only applies to a certain type of device? Then follow these sample steps to adjust text margins by device:

1. Visit the module, for example, “text.
2. Go to the design tab.
3. Click on ‘spacing’ and go to ‘margin’.
4. Scroll over the white space to the right of the word “margin” and click on the cell phone icon.
5. Now you can adjust the margins of the text for each device.

Check this before pressing save. You do that by clicking on the different icons of the device type after entering the values. By the way, you can apply these steps to just about any modules, rows, columns and sections.

Divi theme and builder is one of my favorite tools. Curious about more? Discover my favorite tools for both web design and photography here.

Creating special web design for certain devices

With the above steps, you can go a long way. But sometimes you run into the limitations of that system and it’s better to create a partially customized design in your page for a cell phone or tablet. Sometimes that just works out better, such as with large cover photos at the top of pages with text in them. The sample steps below apply to customizing cover photos with text, but can be applied equally well to other elements from the visual builder.

1. Open the visual builder on the page you want to modify.
2. Slide your cursor until you see the section’s blue screen appear.
3. Click the cog icon for settings.
4. Go to the advanced tab and click on visibility.
5. Now you can specify which type of device you want to block this for, for example, the phone. Click save.
6. Slide back with your cursor until the blue cursor screen reappears and click on the dupplicate section symbol.
7. Go to design your section and specify via the advanced tab where you don’t want this part to show. If you now specify desktop and tablet, this layout appears only on mobile.

Conclusion

So in Divi, there are several ways to make your website mobile-friendly. I would say build your desktop version first. When it’s done, look at it on your cell phone and figure out where your design is wrong or not pretty. You’re going to try to adjust that through the settings of the component itself. Can’t do that? Then create specific content for certain types of devices. I wish you great success with this!

Is your website mobile-friendly? And how did you do that?

This article contains an affiliate link. Look here for more information.