How to Use Elementor for Responsive Design and Optimization for WordPress Websites

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

1. 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.

2. Enter responsive mode: You can switch to responsive mode by clicking the icon at the bottom left, as shown below.

3. 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 the 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 the 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.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off