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

1. Intro
2. 如何让你的网站响应元素页面生成器的教程
   1. 如何调整移动设备的小部件和文本属性
   2. 如何调整和重新定位列
   3. 如何为特定类型的设备隐藏小部件、列和部分
   4. 如何克服位置:绝对位置和固定位置
   5. 如何使用内联宽度创建灵活的移动布局
3. Conclusion

元素响应介绍

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

当用户从笔记本电脑切换到iPad时, 网站应该自动切换，以提供适当的分辨率和图像大小. 换句话说，网站应该具备自动响应用户偏好的技术.

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

我要 Monstroid2 主题，最好的元素WordPress主题，这是完美的初学者和高级用户. 您可以使用此产品无限数量的产品, 编辑其源代码, 并将其安装在许多域中. Monstroid2具有不可替代的功能，非常适合element页面构建器. 主题包包括令人敬畏的喷气机插件免费和其他高级功能.

Monstroid2 -多用途模块化元素WordPress主题

Live Demo

Details

Hosting

此外，《og体育首页》也可以在游戏中使用 一个订阅 由Templateog体育首页. 一次订阅, 您将获得一个终极的web开发工具包，包含无限的下载和无限的产品. 只有一流的主题, 高质量的扩展, Templateog体育首页提供ONE的专业支持

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

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

如何调整移动设备的小部件和文本属性

1. 打开Elementor和Monstroid2主题.
2. 如果您的桌面版本已完成, 进入左下角的响应模式，选择平板电脑或移动设备.
3. 选择移动视图后，您可能会注意到文本非常大. 单击标题元素以查看Content选项卡中的Title设置. 您可以在这里轻松地调整不同设备的对齐选项.
4. 转到样式选项卡编辑大小，行高和字母间距值. 如果你回到桌面视图, 文本属性将相应地更改为为桌面视图选择的文本属性.
5. 导航到高级选项卡更改边距和填充值. If you wish to keep Entrance Animation for some specific layouts; e.g. 桌面，确保为移动模块选择None.
6. 编辑按钮时, 你可以调整自定义大小, 自定义宽度, Alignment, Margin, 边界半径, Padding, etc.
7. Click Section settings > Style tab, go to Position to choose Center Left value.

如何调整和重新定位列

1. 转到编辑列设置的布局选项卡，编辑列宽度，列顺序，垂直对齐等. 如果您的目标是在一行中定位一些列，请将Column Width设置为50. 对第二列重复相同的操作，以使它们显示在一行中.
2. 在标题部分进行更改, 描述部分编辑排版和图像，以确保它们在移动视图上看起来很好.
3. 通过单击该部分上的Settings更改列的顺序, 转到响应部分，启用反向列(移动).
4. 导航到高级选项卡，根据移动视图调整边距和内边距值.

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

1. Choose the column you want to remove and navigate to the Advanced tab > Responsive section.
2. 启用隐藏移动选项.
3. 应该重复相同的过程来隐藏所有小部件、列和部分.

如何克服位置:绝对位置和固定位置

1. 单击小部件，进入高级选项卡和自定义定位. 自定义定位允许更改宽度和位置值.
2. 位置选项允许选择默认、绝对和固定. 绝对位置允许抓取元素并将其重新定位到网页上的任何其他位置. 固定位置允许抓取元素并保持移动, 但是一旦你停下来开始滚动, 您将看到元素被固定在您离开它的地方. 例如，对于订阅表单来说，这是一个很好的实践. Offset允许在编辑元素或部分的值时更改其位置.

如何使用内联宽度创建灵活的移动布局

自定义定位部分允许设置行内宽度. 这项新功能是最近推出的. 选中小部件后，您可以看到小部件周围有一个蓝色框被紧紧包裹起来. 因此，您可以重新定位和进一步定制.

如有任何问题, 切换模式时(桌面/移动), 你可以选择改变偏移百分比.

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

结论:元素有反应

移动设备使用的增长只是向更方便地使用互联网迈出的一步. 您的目标是让任何设备上的任何用户都能获得与您的网站交互的最佳体验. 希望本教程对您有所帮助. 只需遵循上面建议的步骤, 你的网站会看起来很棒，在笔记本电脑上也能很好地运行, tablet, 还有手机. 欢迎在下面的评论区留下你的问题、担忧和建议.

READ ALSO

如何在国际上销售WooCommerce虚拟产品