在使用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的divi主题可视化图文标blurb模块教程(免费)

如果需要文件下载,

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

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

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

上传成功后,点开文件,

将文件链接复制下来

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

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

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

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

接下来便是图像的使用,

先上传指定的图像,

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

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主题的过程中,

如果你遇到各种问题,

欢迎给我们留言。

Google广告官方大中华地区官方合作谷歌广告开户 送WordPress网站

预充30000元广告(15%服务费),立刻送您WordPress外贸独立站!

WordPress客服二维码