Overview
Frontend responsive testing usually requires opening browser developer tools, manually resizing the browser window, or constantly switching between different screen sizes to check how layouts respond. Our Divi Responsive Helper plugin includes a Frontend Responsive Preview feature that adds a live responsive preview mode directly to the frontend of your website, making it easier to preview layouts at different viewport widths and test responsive behavior visually. You can configure default preview options in the plugin settings and then launch the responsive preview directly from the frontend toolbar whenever you need to test your layout.
NOTE: This feature is only available in Divi 5 and is not available in Divi 4. Limitations in Divi 4 made it difficult or impossible for third-party developers to extend or customize certain functionality. We’re excited that Divi 5 provides more freedom and opportunities to build advanced features like this, and we hope you enjoy the new features we are able to create now.
Access And Enable The Settings
To start using the responsive content editing restriction and improvement features in Divi 5, go to the Pee-Aye Creative menu in your WordPress backend, then select Divi Responsive Helper. In the plugin settings interface, open the Frontend Responsive Preview tab from the left sidebar. From there, enable and configure the settings as needed.
Configure The Frontend Responsive Preview Settings
After enabling Frontend Responsive Preview Mode in the plugin settings, additional settings will appear. You can configure how the feature behaves and which preview tools are available to users.
You can choose whether users can enter custom viewport widths, zoom the preview, resize the preview area by dragging, display breakpoint guides, and use predefined preview sizes. You can also configure the default preview widths and customize the preview labels that appear in the responsive preview interface.
These settings allow you to customize the responsive preview experience to match your preferred workflow. Everything is optional and up to you. We suggest trying them all at first, and if you don’t need something, you can disable it.
Open The Frontend Responsive Preview
Once the feature is enabled, visit any page on the frontend of your website while logged in and locate the Responsive Preview toggle in the WordPress admin toolbar.
Enable the toggle to activate responsive preview mode.
When enabled, the page is displayed inside an adjustable preview area and additional responsive preview controls become available at the top of the screen.
From here, you can:
- Resize the preview area to test different viewport widths
- Switch between available preview sizes
- View breakpoint guide markers while previewing
- Zoom the preview in and out
- Open the Responsive Preview panel to manage preview labels, widths, and enabled preview sizes
Customize Preview Sizes And Labels
Select the settings icon in the responsive preview toolbar to open the Responsive Preview panel.
From this panel, you can customize the available preview sizes for your own testing workflow.
You can:
- Rename preview sizes
- Adjust preview widths
- Enable or disable individual preview sizes
- Reset your preview configuration back to the default settings
These changes affect only your responsive preview experience and do not change your actual website layout or responsive settings.
