spot_img
HomeDivi主题使用教程WordPress的Divi主题教程8:可视化图文标blurb模块(免费)

WordPress的Divi主题教程8:可视化图文标blurb模块(免费)

在使用WordPress做网站的时候,经常需要使用图文标来显示,模块可以放置在您创建的任何列中。

图文展示的信息模式是WordPress建站中最常用的样式之一。

很多新手不懂得如何在WordPress中创建图文模块。

在这篇文章中,

WP花园将教会大家如何使用divi主题中的blurb图文标模块创建丰富多彩的数据样式。

请确保自己正确安装了divi主题

然后我们开始上课了!

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

什么是图文标模块

图文标是一个可以直观的显示技能和功能信息的板块,

是图像、图标和文本的组合搭配使用。

在图像和图标中只能选择其中一个

如果您为“使用图标”设置选择了“是”此选项将为您提供了配合使用的可用图标列表。

如果选择使用图像,那便将图像上传便可设置图像信息

真实案例需求

我们有个客户需求,创建一个PDF文件下载的模块,

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

让模块显示特定的图像和文件名,

整个模块大概长这个样子:

WordPress的divi主题可视化图文标blurb模块教程(免费)

那么使用DIVI的图文标的模块,就能够非常轻松的解决这个问题。

WordPress的divi主题可视化图文标blurb模块教程(免费)

divi的blurb图文标模块编辑步骤

接下来,

我将用使用图像加文字的模板来演示如何制作如下的模块

WordPress的divi主题可视化图文标blurb模块教程(免费)

首先先在的页面中点击灰色+号按钮插入“图文标”

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

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

添加成功之后,

在文本的编辑页面可输入你想要的文字即可,

WordPress建站服务

若不想要标题或正文可直接删除即可。

WordPress的divi主题可视化图文标blurb模块教程(免费)

如果需要文件下载,

那么我们首先需要在媒体库上上传指定的文件,

点击“选择文件”上传所要的文件

WordPress的divi主题可视化图文标blurb模块教程(免费)

上传成功后,点开文件,

将文件链接复制下来

WordPress的divi主题可视化图文标blurb模块教程(免费) WordPress的divi主题可视化图文标blurb模块教程(免费)

将复制的链接复制到图文标—内容—链接(模块链接URL)中,

WordPress divi主题

这样可在内面中查看文件内容。

WordPress的divi主题可视化图文标blurb模块教程(免费)

接下来便是图像的使用,

先上传指定的图像,

后可在设计页面内图像和图标中设置调整位置。

wordpress建站公司

WordPress的divi主题可视化图文标blurb模块教程(免费)

WordPress的divi主题可视化图文标blurb模块教程(免费)

在图像/图标的放置中选择靠左可将图像放在文字前面。

WordPress的divi主题可视化图文标blurb模块教程(免费)

若要将文字与图片在一水平上可在文本设置中设置文本的行高设置,

可调整文字上下位置。

WordPress的divi主题可视化图文标blurb模块教程(免费)

调整好位置之后可点击盒子阴影,

加入立体效果

(若是要调整字体与阴影的距离,可在间距内适当调整)

WordPress的divi主题可视化图文标blurb模块教程(免费)

点击保存便可以在页面中看到这次的图文标设置展示效果,

之后点击文字便能跳转到文件内容之中。

WordPress的divi主题可视化图文标blurb模块教程(免费)

WordPress的divi主题可视化图文标blurb模块教程(免费)

WP花园结语

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

一个图文标的模块中便能设置出许多样式选择,

在页面设置文件的显示内容,

提供了我们浏览时能快速方便获取信息资讯。

也能够快速灵活的创建出丰富多彩的功能模块。

在使用divi主题的过程中,

如果你遇到各种问题,

欢迎给我们留言。

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

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