用Elementor创建一个响应式WordPress网站[免费网络研讨会]

1. Intro
2. 如何让你的网站响应元素页面生成器的教程
   1. How to Adjust Widget and Text Properties for Mobile Devices
   2. How to Resize and Reposition Columns
   3. 如何为特定类型的设备隐藏小部件、列和部分
   4. How to Overcome Position: Absolute Position and Position Fixed
   5. How to Use Inline Width to Create Flexible Mobile Layouts
3. Conclusion

Intro to elementor responsive

Elementor responsive! 现代网站开发的方法是由移动设备的快速发展和屏幕分辨率的提高所决定的. Today, 开发者放弃了为网站设计单独的移动版本的想法，而倾向于为所有流行的设备设计一个单一的自适应版本.

When a user switches from their laptop to an iPad, 网站应该自动切换，以提供适当的分辨率和图像大小. 换句话说，网站应该具备自动响应用户偏好的技术.

我相信你已经遇到过这样的情况:你的网站在桌面上看起来很漂亮, 但是当你切换到移动视图时，布局的一些元素就会出错. 免费的element页面构建器提供了一个很好的解决方案，只需点击几下即可. Today, 我们将学习如何解决这个问题，并使您的网站响应与元素网页建设者.

I will take Monstroid2 主题，最好的元素WordPress主题，这是完美的初学者和高级用户. You can use this product for an unlimited number of products, edit its source code, and install it on many domains. Monstroid2具有不可替代的功能，非常适合element页面构建器. 主题包包括令人敬畏的喷气机插件免费和其他高级功能.

Monstroid2 - Multipurpose Modular Elementor WordPress Theme

Live Demo

Details

Hosting

Moreover, Monstroid2 is available within ONE subscription by Templateog体育首页. With ONE subscription, 您将获得一个终极的web开发工具包，包含无限的下载和无限的产品. Only the top-notch themes, high-quality extensions, and professional support  are available with ONE by Templateog体育首页

现在让我们继续学习教程，学习如何使您的网站在任何地方和任何设备上正确显示.

如何让你的网站响应元素页面生成器的教程

How to Adjust Widget and Text Properties for Mobile Devices

1. Open Elementor along with the Monstroid2 theme.
2. If your desktop version is completed, 进入左下角的响应模式，选择平板电脑或移动设备.
3. 选择移动视图后，您可能会注意到文本非常大. 单击标题元素以查看Content选项卡中的Title设置. You can easily adjust Alignment options for different devices here.
4. 转到样式选项卡编辑大小，行高和字母间距值. If you return back to Desktop view, 文本属性将相应地更改为为桌面视图选择的文本属性.
5. Navigate to the Advanced tab to change Margin and Padding values. If you wish to keep Entrance Animation for some specific layouts; e.g. Desktop, make sure to choose None for Mobile module.
6. While editing buttons, you can adjust Custom Size, Custom Width, Alignment, Margin, Border Radius, Padding, etc.
7. Click Section settings > Style tab, go to Position to choose Center Left value.

How to Resize and Reposition Columns

1. 转到编辑列设置的布局选项卡，编辑列宽度，列顺序，垂直对齐等. 如果您的目标是在一行中定位一些列，请将Column Width设置为50. 对第二列重复相同的操作，以使它们显示在一行中.
2. Make changes in Title section, 描述部分编辑排版和图像，以确保它们在移动视图上看起来很好.
3. Change the order of the columns by clicking Settings on the section, going to Responsive section and enabling Reverse Columns (Mobile).
4. 导航到高级选项卡，根据移动视图调整边距和内边距值.

如何为特定类型的设备隐藏小部件，列和部分

1. Choose the column you want to remove and navigate to the Advanced tab > Responsive section.
2. Enable Hide On Mobile option.
3. 应该重复相同的过程来隐藏所有小部件、列和部分.

How to Overcome Position: Absolute Position and Position Fixed

1. 单击小部件，进入高级选项卡和自定义定位. 自定义定位允许更改宽度和位置值.
2. Position option allows one to choose Default, Absolute and Fixed. 绝对位置允许抓取元素并将其重新定位到网页上的任何其他位置. Position Fixed allows one to grab the element and keep moving, but once you stop and start scrolling, you will see that the element is fixed at the place you left it. This is a great practice for a subscription form, for example. Offset允许在编辑元素或部分的值时更改其位置.

How to Use Inline Width to Create Flexible Mobile Layouts

Custom Positioning section allows one to set Inline Width. This new feature has been rolled out recently. 选中小部件后，您可以看到小部件周围有一个蓝色框被紧紧包裹起来. So, you can play with re-positioning and further customization.

In case of any issues, while switching the modes (Desktop/Mobile), you can go ahead and change Offset percentage.

Still, 你应该清楚地明白，自定义定位并不是响应式网页设计的最佳实践，也不应该太频繁地使用.

Conclusion: elementor responsive

移动设备使用的增长只是向更方便地使用互联网迈出的一步. 您的目标是让任何设备上的任何用户都能获得与您的网站交互的最佳体验. Hopefully, this tutorial has been useful to you. Simply follow the steps suggested above, and your website will look great and work well on a laptop, tablet, and mobile phone. 欢迎在下面的评论区留下你的问题、担忧和建议.

READ ALSO

How to Sell WooCommerce Virtual Products Internationally