Mobile Editing with Divi
Most visitors view websites on their phones. Divi makes it easy to preview and adjust how your site looks on mobile and tablet.
Step 1 – Enable the Visual Builder
Go to the page you want to check and click Enable Visual Builder in the WordPress admin bar.
Step 2 – Open Responsive Editing
In any module, row, or section settings panel:
-
Go to the Design tab.
-
Look for the small phone/tablet/desktop icons next to style options.
-
Click the icon to switch between views.
Step 3 – Adjust for Mobile & Tablet
For each style option (font size, spacing, alignment):
-
Desktop icon → controls desktop view.
-
Tablet icon → controls tablet view.
-
Phone icon → controls mobile view.
You can set different values for each.
Step 4 – Preview Your Page
Click the phone or tablet icon at the bottom of the Divi toolbar to preview the entire page in that mode.
Step 5 – Save Your Changes
Click the green checkmark in the settings panel, then Save (bottom-right purple circle).
Additional Notes
-
Always test buttons and menus in mobile view — spacing can get tight.
-
Avoid using very large text or images that push important content down.
-
Real-device testing (checking on your own phone) is best before final approval.
