在使用WordPress做网站的时候,
有时候会需要展示项目的某些有内在联系的结构性内容,
那么使用divi的手风琴accordion模块,
可以通过伸缩的方式展示您网站的内容结构。
divi主题是WordPress界中最著名的主题之一,divi有着各种优于其他WordPress主题的特点。
在这篇文章中,我们将向大家展示如何使用divi主题中内置的手风琴模块创建有趣的动态文字模块效果。
拿好你的小本子,开始上课了!
在使用Divi主题模块之前,你需要购买正版的Divi主题,这里是我们WP花园的Divi主题70%折扣购买通道。
什么是accordion手风琴模块
手风琴accordion模块是在单个系统中整合信息的好方法。
能够方便用户在网页中流量相关信息。
但是手风琴模块的不同之处在于项目显示在垂直列表中。
打开手风琴列表中的新项目时,会关闭先前打开的项目,并显示新项目的内容。
案例需求
当需要在页面中设置问题及解答FAQ版块时,
那么使用DIVI的手风琴模块,
就能够非常轻松的解决这个问题。
这个是实现的效果:
那么我们将开始教大家如何在WordPress的divi主题中创建这个手风琴模块!
divi的手风琴模块编辑步骤
首先,确保你安装好了正版的divi主题。
接下来,
将用使用手风琴模板来演示如何制作如下的模块,
向产品页面添加产品功能。
首先先在的页面中点击灰色+号按钮插入“手风琴”
(此模块只能在行的内部添加)
添加模块成功之后将为您提供模块的选项
点击模块后,
就能看到设置界面:
添加成功之后,
在文本的编辑页面在“内容”选项卡下,
单击+添加新项可以添加新的手风琴添加到模块中。
需要编辑时点击设置按钮可对面板内容进行编辑调整。
内容选项
标题:[输入标题]在手风琴关闭该项目时将显示标题,在打开该项目时将在手风琴内容文本上方显示标题。
内容:[输入内容]点击手风琴项目后,标题下方将在项目框中显示内容。
在内容选项卡中,
很多做跨境电商的朋友往往需要外国人的服务,比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商,分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
您将找到模块的所有内容元素,
例如文本,
链接和背景设置。
凡是控制什么出现在模块中总是该选项卡中找到。
在设计选项卡中,
您将找到模块的所有样式选项,例如字体,颜色,大小和间距。
这是用于更改模块外观的选项卡。
每个Divi模块都有一长串设计设置,
您可以用来更改所有的文字和面板内容。
每个切换选项中,
你可以为不同的板块设置不同的颜色背景,
切换打开背景颜色和关闭背景颜色时的背景颜色都不同,
可以调整设置不同的颜色
(打开切换背景颜色是在点击时所出现的颜色,关闭是在关闭选项状态时所出现的颜色)
如果要调整切换开关的背景颜色,
则可能需要调整图标颜色,
以更好地补充自定义颜色。
点击保存便可以在页面中看到这次的手风琴设置展示效果。
若是想要手风琴页面点击时才能展示内容时,
我们需要添加一个新的手风琴页面。
将它移植最上方
点击设置按钮,进入设计页面。
点击扩展的—自定义CSS—主要元素
输入“display:none:”
就可以在前台预览时需要点击才会展示项目内容。
WP花园结语
如果你想使用本文中的Divi模块,可以从这里购买Divi正版主题,享受70%的折扣。
divi的手风琴模块是单个系统中整合信息展示的好方法,
能够快速灵活的创建出您所想要展示的项目内容的选项展示。
我们公司在使用WordPress为客户开发外贸营销型网站的时候,
经常会用到手风琴accordion模块来为客户添加FAQ常见问题页面的信息。
访客在看到FAQ信息后,
就会对公司和网站产生信任感,
从而下单购买,
提高谷歌SEO排名!
在使用divi主题的过程中,
如果你遇到各种问题,
欢迎给我们留言。