现在是移动互联网5G时代,所以越来越多用户喜欢用手机流量网页或者查看资料。

在使用WordPress做网站的时候,有时候会需要电脑和手机同时适配时,我们就需调整不同客户端的divi模块,便可以适配与不同的页面展示。

那么接下来我们WP花园就用案列来演示如何在手机、电脑端显示和隐藏divi模块,制作完美的响应式WordPress网站。

案例介绍

每个WordPress网站在首页,都会在首页展示一个3页左右的幻灯片。

幻灯片内容丰富、布局复杂。

如果处理不好WordPress的幻灯片布局,

在手机端会出现布局错乱的情况。

所以我们在这次教程中,结合divi主题的模块,

通过显示和隐藏功能,

实现手机端和电脑端都能访问的WordPress幻灯片模块。

Divi模块设置教程

确保你已经安装好了divi主题

当我们设计好了一张电脑端的首页banner时,

也要按照手机的尺寸来设计一张手机端的banner。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

在首页内添加全宽模块(图片的话便添加全宽图像,幻灯片则选择添加全宽幻灯片)

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

设置成功banner格式后点击全宽模块设置,对模块进行设计

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

点击设计面板中的,扩展的—可见性

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

在可见性的禁用选项中勾选电话,

这样电脑版的banner在预览时便不会在手机中显示

(电脑样式在手机内隐藏都是选择禁用中的电话选项)

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

设置好之后保存,回答页面中,在下方复制一个全宽banne。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

添加成功后点击下方的banner模块设置。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

在幻灯片的背景里删除原来的图像替换成手机版的banner。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

替换成功后在下方的覆盖中选择合适,

这样图片才能适应手机进行展示。

如何在手机、电脑端显示和隐藏WordPress的Divi模块? 如何在手机、电脑端显示和隐藏WordPress的Divi模块?

可以在背景中去掉底色,

这样可以使画面比较舒适干净。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

设置成功后,再次点击全宽模块设置。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

点击设计面板中的,扩展的—可见性

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

在可见性的禁用选项中勾选“平板和桌面”,

这样手机版的banner在预览时便不会在电脑中显示

(手机样式在电脑内隐藏都是选择禁用中的平板和桌面)

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

设置好了之后我们可以点击下方的紫色按钮,

选择旁边的手机样式,可以预览手机样式

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

如果发现图片和实际大小不一样,

那么我们可以进入页面板块设置中的文本框中多添加几次换行,

让图片和实际大小一样。

如何在手机、电脑端显示和隐藏WordPress的Divi模块? 如何在手机、电脑端显示和隐藏WordPress的Divi模块?

设置成功后点击,

电脑按钮可回到原来电脑桌面设置效果。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

设置成功后在前台预览效果中右击选择“检查”设置,

点击左下方的手机标识,就可以预览到手机样式了。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

在一个页面中我们会发现有些电脑的展示和手机不一样时,

我们要进行修改时选择对应的模块设置。

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

在相对应要修改的设置中点击手机按钮,

选择电话就可以对手机页面进行编辑,(若是编辑电脑页面就选择桌面设置)

这样在调整手机或者电脑端时,不会同时发生变化。

可以方便我们适应不同的客户端预览时的效果

(每一个模块的设置都是一样的)

如何在手机、电脑端显示和隐藏WordPress的Divi模块?

WP花园结语

WordPress的幻灯片在网页中同时能适应手机和电脑也是非常重要的,

可以方便访问者的访问渠道,在divi中就能够快速灵活的设置适应手机和电脑不同效果。

建设WordPress响应式网站的另一个好处,是容易在搜索引擎上获取较高的排名!

在使用divi主题的过程中,如果你遇到各种问题,欢迎给我们留言。

 

电子邮箱
  • 专家邮箱
QQ群
  • WordPress爱好者交流群 WordPress爱好者交流群
关注微信
  • 扫一扫,有惊喜
google 广告投放