在使用WordPress做网站的时候,

有时候会需要展示项目的某些有内在联系的结构性内容,

那么使用divi的手风琴accordion模块,

可以通过伸缩的方式展示您网站的内容结构。

divi主题是WordPress界中最著名的主题之一,divi有着各种优于其他WordPress主题的特点。

在这篇文章中,我们将向大家展示如何使用divi主题中内置的手风琴模块创建有趣的动态文字模块效果。

拿好你的小本子,开始上课了!

在使用Divi主题模块之前,你需要购买正版的Divi主题,这里是我们WP花园的Divi主题70%折扣购买通道。

什么是accordion手风琴模块

手风琴accordion模块是在单个系统中整合信息的好方法。

与选divi主题中的tab项卡模块非常相似

能够方便用户在网页中流量相关信息。

但是手风琴模块的不同之处在于项目显示在垂直列表中。

打开手风琴列表中的新项目时,会关闭先前打开的项目,并显示新项目的内容。

案例需求

当需要在页面中设置问题及解答FAQ版块时,

那么使用DIVI的手风琴模块,

就能够非常轻松的解决这个问题。

这个是实现的效果:

WordPress的divi主题中内置手风琴Accordion模块使用教程

那么我们将开始教大家如何在WordPress的divi主题中创建这个手风琴模块!

WordPress的divi主题中内置手风琴Accordion模块使用教程

divi的手风琴模块编辑步骤

首先,确保你安装好了正版的divi主题

接下来,

将用使用手风琴模板来演示如何制作如下的模块,

向产品页面添加产品功能。

WordPress的divi主题中内置手风琴Accordion模块使用教程

首先先在的页面中点击灰色+号按钮插入“手风琴”

(此模块只能在行的内部添加)

添加模块成功之后将为您提供模块的选项

WordPress的divi主题中内置手风琴Accordion模块使用教程

点击模块后,

就能看到设置界面:

WordPress的divi主题中内置手风琴Accordion模块使用教程

添加成功之后,

在文本的编辑页面在“内容”选项卡下,

单击+添加新项可以添加新的手风琴添加到模块中。

需要编辑时点击设置按钮可对面板内容进行编辑调整。

WordPress的divi主题中内置手风琴Accordion模块使用教程

内容选项

标题:[输入标题]在手风琴关闭该项目时将显示标题,在打开该项目时将在手风琴内容文本上方显示标题。
内容:[输入内容]点击手风琴项目后,标题下方将在项目框中显示内容。

WordPress的divi主题中内置手风琴Accordion模块使用教程

在内容选项卡中,

您将找到模块的所有内容元素,

例如文本,

链接和背景设置。

凡是控制什么出现在模块中总是该选项卡中找到。

WordPress的divi主题中内置手风琴Accordion模块使用教程

在设计选项卡中,

您将找到模块的所有样式选项,例如字体,颜色,大小和间距。

这是用于更改模块外观的选项卡。

每个Divi模块都有一长串设计设置,

您可以用来更改所有的文字和面板内容。

WordPress的divi主题中内置手风琴Accordion模块使用教程

每个切换选项中,

你可以为不同的板块设置不同的颜色背景,

切换打开背景颜色和关闭背景颜色时的背景颜色都不同,

可以调整设置不同的颜色

(打开切换背景颜色是在点击时所出现的颜色,关闭是在关闭选项状态时所出现的颜色)

WordPress的divi主题中内置手风琴Accordion模块使用教程

WordPress的divi主题中内置手风琴Accordion模块使用教程

如果要调整切换开关的背景颜色,

则可能需要调整图标颜色,

以更好地补充自定义颜色。

WordPress的divi主题中内置手风琴Accordion模块使用教程

点击保存便可以在页面中看到这次的手风琴设置展示效果。

WordPress的divi主题中内置手风琴Accordion模块使用教程

若是想要手风琴页面点击时才能展示内容时,

我们需要添加一个新的手风琴页面。

WordPress的divi主题中内置手风琴Accordion模块使用教程

将它移植最上方

WordPress的divi主题中内置手风琴Accordion模块使用教程

点击设置按钮,进入设计页面。

WordPress的divi主题中内置手风琴Accordion模块使用教程

点击扩展的—自定义CSS—主要元素

WordPress的divi主题中内置手风琴Accordion模块使用教程

输入“display:none:”

WordPress的divi主题中内置手风琴Accordion模块使用教程

就可以在前台预览时需要点击才会展示项目内容。

WordPress的divi主题中内置手风琴Accordion模块使用教程

WP花园结语

如果你想使用本文中的Divi模块,可以从这里购买Divi正版主题,享受70%的折扣。

divi的手风琴模块是单个系统中整合信息展示的好方法,

能够快速灵活的创建出您所想要展示的项目内容的选项展示。

我们公司在使用WordPress为客户开发外贸营销型网站的时候

经常会用到手风琴accordion模块来为客户添加FAQ常见问题页面的信息。

访客在看到FAQ信息后,

就会对公司和网站产生信任感,

从而下单购买,

提高谷歌SEO排名!

在使用divi主题的过程中,

如果你遇到各种问题,

欢迎给我们留言。

 

正规公司 正版软件做一个有流量的WordPress独立站

想要了解更多WordPress外贸独立站相关资讯,欢迎资讯我们的营销顾问Jack

WordPress客服二维码