在您可以将推荐模块添加到您的页面之前,您必须首先访问 Divi Builder。 一旦 Divi主题 安装在您的网站上,您会注意到一个按钮 使用Divi Builder 创建新页面时,在帖子编辑器上方。 单击此按钮以激活Divi Builder并访问其提供的所有模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 启用Visual Builder 如果您已连接到WordPress仪表板,则在前台浏览网站时。

使用Divi视觉生成器

进入Visual Builder后,您可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面,请记住首先在页面中添加一行。

Wordpress推荐模块

在模块列表中找到推荐模块,然后单击将其添加到页面中。 模块列表是可搜索的,这意味着您也可以键入“ testimonial”,然后按Enter键以自动查找并添加推荐模块! 添加模块后,模块选项列表将为您打招呼。 这些选项分为三个主要组: 包装内容 , 概念 et 先进 .

用例示例:产品页面的推荐部分

添加推荐部分是最好的方法之一 促进 您的产品或服务。 在此示例中,我将向您展示如何使用推荐模块在登陆页面底部创建推荐部分,以 促进 您的产品或服务。 推荐部分的标题是“快乐的客户”。 拥有一个既具有创意又具有相关性的有效标题非常重要。 所有三个推荐都很简短,采用三栏布局,页面底部有一个 CTA 按钮。

divi推荐的示例内容

要将见证部分添加到页面,请使用可视化构建器添加具有三列的行的标准部分。 然后,将证明模块添加到该行的第一列。

迪维证词科使用以下更新证书模块设置:

内容选项卡

作者姓名:[输入名称]
文章标题:[输入标题]
公司名称:[输入公司]
内容:[输入证词的内容]
人像图片网址:[下载90×90图片]
报价图标
:

设计选项卡

文字颜色:浅
文字方向:
身体军警:Roboto Light
正文字体大小:20px
身体线的高度:1.5em

Divi Wordpress推荐示例现在,您已经创建了第一个推荐模块,将其复制两次并拖动重复的模块以填充第二和第三列。

Divi证词的例子

由于所有设计参数都已转移到第二和第三行中重复的模块中,因此您只需返回并更新每一个的内容即可。

仅此而已。

推荐模块的内容参数

divi模块内容的参数内容选项卡上的设置分为几组,您可以打开这些组以查看更多选项。 这使您更容易找到所需的设置。 您也可以使用顶部的搜索栏一次搜索所有设置选项卡以查找所需的设置。 它将使您直达主题!

文本

您可以在此处添加推荐作者的姓名,文章标题,公司以及推荐本身的内容。

图片

如果您有个人资料照片或其他类型的图像随身携带,请在此处添加。

留置权

您可以在此处添加作者或公司URL并控制其打开。

分子

在这里,您可以选择使报价图标可见或隐藏。

背景

在这里,您可以选择向您的推荐添加背景色或图像。

管理员标签

在此下拉列表中,您可以添加一个管理标签,该标签将显示在仪表板以及可视化构建器视图的构建器中。

推荐模块的设计参数

参数设计分区“设计”选项卡上的设置分为以下几组,以便更轻松地找到所需的设置。 请记住,您还可以使用搜索栏找到更快的设置!

报价图标

您可以在此处调整报价图标的颜色。

肖像

纵向设置可让您调整可能已在“内容”选项卡中添加的图像的边框半径,纵向宽度和纵向高度。

文本

这些设置使您可以更改文本的颜色和方向。

正文文本

这些设置使您可以调整字体,粗细,大小,颜色,间距,行高等。

接壤

在这里您可以选择使用边框。 如果选择使用边框,则还可以选择其颜色,更改其宽度并选择其样式。

间距

在间隔区域中,可以将自定义填充添加到推荐的顶部,右侧,底部或左侧。 您还可以为台式机,平板电脑或移动设备更改这些值。

推荐模块的高级参数

预先设置divi推荐在证明模块的高级选项卡中,您可以添加一个ID(标识符)和一个唯一的CSS类。 您还可以在自定义css下拉列表的视频滑块模块中,将自定义css添加到各种预定义(和预选)的css选择器中。 最后,在可见性下拉列表中,您可以调整模块在手机,平板电脑和台式机上的可见性。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程