spot_img
HomeDivi主题使用教程WordPress的Divi主题教程11:标签tab模块新手使用

WordPress的Divi主题教程11:标签tab模块新手使用

在使用WordPress做网站的时候,

有时候会需要展示某个主项目的各种不同子项目内容选项展示,

那么使用WordPress的tab标签模块,便可以放置在您创建的任何列中。

如果你使用的是著名的divi主题,

那么您可以很方便地使用divi主题的内置tab标签模块创建这种数据结构。

在这篇文章中,

WP花园将会深度探讨divi主题中的标签tab模块。

做好笔记!

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

什么是tab标签模块

tab标签模块是在单个系统中整合信息的好方法。

打开列表中的新的项目框时,

将关闭先前打开的项目框,并显示新项目的内容。这样可以方便信息项目的整合。

贷款申请在线申请,高额度,快速下款!

真实案例分析

我们有一位WordPress建站客户,在她的WordPress网站中,

有某一个服务项目的主项下面,有两个子项。

客户需要在这个服务项目主项中,同时显示两个子项。

那么使用divi主题中的tab标签模块,

就能很好地满足这个需求。

模块编辑步骤

确保你安装好了divi主题

然后我们将用使用标签模板来演示如何制作如下的模块:

WordPress的Divi主题中标签tab模块新手使用教程

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

首先我们在页面中点击灰色按钮添加标签(此模块只能在行的内部添加)。

WordPress的Divi主题中标签tab模块新手使用教程

添加成功之后,

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

WordPress建站服务

单击+添加新项可以添加新的标签面板添加到模块中。

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

WordPress的Divi主题中标签tab模块新手使用教程

divi标签内容选项

标题:[输入标题]在标签关闭该项目时将显示标题,

在打开该项目时将在标签内容文本上方显示标题。

内容:[输入内容]点击标签项目后,

标题下方将在项目框中显示内容。

WordPress的Divi主题中标签tab模块新手使用教程

若是需要在标签页面下方添加图片时,

可以点击正文的添加媒体插入图片

WordPress divi主题

WordPress的Divi主题中标签tab模块新手使用教程

选中对应的图片之后,

在右下方中附件设置进行对应的图片设置

WordPress的Divi主题中标签tab模块新手使用教程

设置完成后,

wordpress建站公司

图片就会在对应的标签中显示出来了。

WordPress的Divi主题中标签tab模块新手使用教程

若是我们需要调整标题的高度时,

在对应的内容设计中的行高设置。

WordPress的Divi主题中标签tab模块新手使用教程

在标签页设置—设计选项里对标签进行页面设计。

可以用来调整标签中的文字和颜色以及标签的页面设计。

WordPress的Divi主题中标签tab模块新手使用教程

若是要修改标签的样式修改,

点击设置模块设置里的“选项卡”设置,

里的设计可编辑标签选项设计。

WordPress的Divi主题中标签tab模块新手使用教程

在设计中的标签页文本可以设置标签活动和非活动的颜色设计。

(在相对应的设置中选择对应的样式颜色即可)

WordPress的Divi主题中标签tab模块新手使用教程

WP花园结语

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

标签模块是单个系统中整合信息展示的好方法,

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

我们WP花园在为客户使用WordPress开发营销型外贸站点的时候,

经常使用tab标签模块展示大量的内容,

方便访客浏览时快速方便获取信息资讯。

同时,配合divi主题的gallery图片画廊模块,让你的WordPress网站更丰富!

在使用divi主题的过程中,

如果你遇到各种问题,欢迎给我们留言!

 

siteground 小红书电商教程
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES
spot_img

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据