Step 1: Identify the Issue
The first step is to identify the issue. Open your website on various mobile devices and see how it looks. If it doesn’t look right or if certain elements aren’t displaying correctly, make a note of these issues.
Step 2: Access Elementor Editor
Login to your WordPress website, go to the page with the issue, and then click “Edit with Elementor.”
Step 3: Switch to Mobile View in Elementor
At the bottom of the editor panel, you’ll see a desktop icon. Click on this icon and select ‘Mobile’ to switch to the mobile editing view.
Step 4: Locate the Problem Area
Scroll through the mobile view and locate the section, column, or widget that isn’t displaying correctly.
Step 5: Adjust the Settings
There are a variety of settings you can adjust to improve the mobile view. Here are some things you might need to adjust:
– Column Width: In the Layout tab, you can adjust the width of your column for mobile view.
– Font Size: In the Style tab, you can adjust the text size for different devices.
– Margin and Padding: In the Advanced tab, you can adjust the margin and padding. You can unlink the values and set different margins/paddings for different devices.
– Responsive Controls: Elementor also offers responsive controls for various widgets. You can hide or show different widgets on different devices.
Step 6: Test Your Changes
After making adjustments, it’s important to test your changes. Click the “Update” button to save your changes and then view your website on a mobile device to see if the issue has been fixed.
Step 7: Repeat
If there are more issues, you’ll need to repeat this process for each problematic section, column, or widget.
Step 8: Responsive Mode in Elementor
Once you’ve adjusted and corrected your pages, ensure to review them in the Responsive Mode provided in Elementor. This feature allows you to instantly see how your pages would look on different devices.
Remember, the aim is not to have the mobile site look exactly like the desktop site, but to have a user-friendly mobile version that reflects your brand and performs well. Elementor offers powerful tools for this purpose, and by following these steps, you can solve many of the common issues that come up in mobile view.
