如何使用Elementor为WordPress网站进行响应式设计和优化

Elementor构建器可以针对平板端和手机端单独进行响应式调试,可以更好的满足不同设备用户的使用体验。

如何使用Elementor为WordPress网站进行响应式设计和优化

进入页面并使用Elementor进行可视化编辑

  1. 进入Elementor前台可视化编辑: 点击顶部黑色导航条中的“Edit with Elementor”按钮,即可快速进入当前页面的可视化编辑模式。
如何使用Elementor为WordPress网站进行响应式设计和优化
  1. 进入响应式模式: 点击左下方的图标,可以切换到响应式模式,如下图所示。
如何使用Elementor为WordPress网站进行响应式设计和优化
  1. 切换平板端和手机端浏览模式
如何使用Elementor为WordPress网站进行响应式设计和优化

切换好手机端浏览后,点击对应模块就可以修改模块中的文字格式大小,边距大小等等。

1. 修改手机端文字大小

修改文字大小都是在模块的Style栏目下的Typography(字体),修改Size值即可修改文字大小。

如何使用Elementor为WordPress网站进行响应式设计和优化

2. 修改手机端列宽度方法

点击左上角图标(如下图所示),修改Layout栏目下面的Columns Gap即可修改列的宽度大小、比例等。

如何使用Elementor为WordPress网站进行响应式设计和优化

3. 修改手机端内外间距方法

在Advanced栏目可以修改边距,如下图所示,Margin是外边距,Padding是内边距,通常来说手机端需要修改下Padding值,让阅读起来更加紧凑。

如何使用Elementor为WordPress网站进行响应式设计和优化

4. 修改产品列数方法

这里是产品调用模块(woo-Products模块)的修改,点击模块进行编辑,Content栏目下面的Column就是产品展示的列数,手机端改成2比较合适。

如何使用Elementor为WordPress网站进行响应式设计和优化

修改手机端页面产品标题大小:点击Style 栏目下面Content,找到Title下面的Typography就可以修改标题的大小

如何使用Elementor为WordPress网站进行响应式设计和优化

5. 隐藏手机端页面展示

在编辑模块,在Advanced栏目下面的Responsive(响应式),点击Hide On Mobile就可以隐藏该模块在手机端展示。

如何使用Elementor为WordPress网站进行响应式设计和优化

6. 保存修改样式

如下图所示点击左下角的Publish即可保存修改

如何使用Elementor为WordPress网站进行响应式设计和优化

7. 快速返回前台及后台

单击以下图标可快速返回

如何使用Elementor为WordPress网站进行响应式设计和优化

如何使用Elementor为WordPress网站进行响应式设计和优化

总结:

通过进入Elementor前台可视化编辑模式,你可以切换到响应式模式,分别为平板端和手机端调整文字大小、列宽度、内外间距和产品列数。此外,还可以根据需要隐藏特定模块,确保不同设备上的用户都能获得最佳体验。文章提供了具体步骤和操作方法,帮助你轻松实现页面优化。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10376/

(1)
上一篇 2024年 5月 25日 上午10:56
下一篇 2024年 5月 25日 上午11:31

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!