The Elementor builder allows for separate responsive debugging for tablets and cell phones, which better meets the experience of users on different devices.
Go to page and use Elementor for visual editing
- Go to the Elementor frontend visual editor: Click on the "Edit with Elementor" button in the black navigation bar at the top to quickly enter the visual editing mode of the current page.
- Enter responsive mode: Click the icon at the bottom left to switch to responsive mode, as shown below.
- Toggle between tablet and mobile browsing modes
After switching to mobile browsing, click on the corresponding module to modify the size of the text formatting in the module, the size of the margins and so on.
1. Modify the size of text on cell phones
Modify the text size are in the module's Style column under the Typography (font), modify the Size value can modify the text size.
2. Modify the width of the column on the cell phone
Click on the icon in the upper left corner (shown below), modify the Columns Gap under the Layout column to modify the width and size of the columns, the ratio and so on.
3. Modification of internal and external spacing on cell phones
In the Advanced column you can modify the margins, as shown in the following figure, Margin is the outer margin, Padding is the inner margin, usually the cell phone needs to modify the Padding value, so that read more compact.
4. Modification of the product column methodology
Here is the modification of the product call module (woo-Products module), click on the module to edit it.Contentunder theColumnIt's the number of columns in the product display, and it's more appropriate to change it to 2 for mobile.
Modify the size of the product title on the mobile page:strike (on the keyboard)Style Column below Content, find Title below Typography can modify the size of the title
5. Hide mobile page display
In Edit Module, under Advanced section, Responsive, click Hide On Mobile to hide the module from being displayed on mobile.
6. Saving modifications
As shown below click on the bottom left corner of thePublishYou can save your changes
7. Quick return to the front and back office
Click on the following icons to quickly return
Summary:
By accessing the Elementor frontend visual editing mode, you can switch to responsive mode and adjust the text size, column width, inner and outer spacing, and the number of product columns for tablet and mobile respectively. In addition, specific modules can be hidden as needed to ensure the best experience for users on different devices. The article provides specific steps and how-to's to help you achieve on-page optimization with ease.
