Thanks to the Divi Responsive Preview system, third-party software is no longer necessary to test how your web pages will render on smaller screen sizes.
Mobile devices are utilized by more than 60% of all internet users, so previewing how your pages will look on smaller screens is an important part of web design.
Let's take a look at how to use the responsive preview system by demonstrating its capabilities using the Streamer Divi Layout Pack.
How To Access the Divi Responsive Preview System
There are two ways to access Divi's responsive preview system.
Activating it at the page level - This can be accomplished by viewing the page's back end or on the front end with the Visual Builder.
Activate the Responsive Preview system at the element's level - This can be done by using the Responsive Settings on any given Content and Design option.
Page Level Responsive Preview Mode
Load any of the pages that used Divi Builder on the frontend
Click Enable Visual Builder
Click the purple ellipsis icon
at the bottom center of your screen to activate the page options menu.
Click the tablet or phone icon at the bottom left corner of your screen to activate the responsive preview system.
Module Level Responsive Preview Mode
The Divi Responsive Preview system can be accessed in any Module, Column, Row, or Section throughout the Visual Builder.
Click the gear icon
of any moduleClick on the Design tab
Expand any of the option groups, such as Heading Text
Hover over the Heading Font option
Click on the Phone icon
to enable the Responsive SettingsClick on the Tablet or Phone tab to enable the respective view.
Adjusting the Divi Responsive Preview Modes
There are multiple presets available within the responsive preview system.
The default preview modes are:
Desktop view
Tablet view
Phone view
To access them, click the responsive preview menu in the lower-left corner of the Visual Builder.
Divi Responsive Preview on Popular Device Presets
There are also popular device presets available to you.
These presets enable you to preview how your page will display based on a specific device. To access the list of devices, click on the first dropdown menu.
You can choose from a list that includes several Apple and Android devices.
Customizing the Divi Responsive Preview Widths
In addition to default and device preview presets you can specify a custom width for your preview.
Furthermore, Divi has a click-and-drag resizing function that will allow you to adjust the width of your preview easily.
Drag To Resize the Divi Responsive Preview
To resize your preview, click and drag from the left-hand side of the preview. As you drag the preview area, the width will automatically adjust in the dimension fields.
Custom Size Input
Another way to customize your responsive preview is to manually adjust the width and height to a specific dimension.
Click into the dimension field and type in your desired width.
Click the Make default phone view button to make it the default preview width.
If you'd like to set dimensions for the tablet preview, repeat the steps from above. Then, click the Make default tablet view button to save your preset.
Above The Fold Indicator
The Divi responsive preview system has a handy above-the-fold indicator that lets you determine how the elements on your page will be visible to your website's visitors before scrolling.
This is useful when placing important content at the top of your design. The above-the-fold indicator will change based on the device preset that you choose.
Portrait & Landscape Modes
Another excellent feature of the Divi responsive preview system is the ability to view your designs in either portrait or landscape mode.
To access this feature, click the icon to the right of the dimension fields. Clicking the icon will switch the page orientation, enabling you to view how your page will look based on how the user holds the device. The darker color indicates the current orientation.
More Resources
The Divi responsive preview system enables Divi users to preview their designs on smaller device screens quickly and effortlessly.
It's a great way to ensure your content is optimized for mobile devices. To learn some great tips for responsive design, check out these posts on the Elegant Themes blog: