WordPress divi主题

如何在 Divi 中设计具有有效 CTA 的演讲嘉宾部分

by | May 15, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

无论您有播客还是主持 WordCamp(或任何演讲者活动),为您的网站设置演讲嘉宾部分总是一个好主意。 像推荐一样,展示客座演讲者是提升价值并在听众中建立信誉的有效方式。 特邀演讲者部分也是为您的下一个活动或剧集吸引一些新候选人的关键场所。 本教程向您展示如何设计一个演讲嘉宾部分,该部分不仅以优雅的方式展示演讲者,还鼓励新演讲者通过有效的号召性用语来申请。

google广告开户

但在我们进入之前,先来看看最终设计。

抢先看

演讲嘉宾部分

演讲嘉宾部分

这是一个额外的悬停效果,我也会向您展示。

演讲嘉宾部分

让我们开始吧!

订阅我们的 Youtube 频道

构建基本结构和内容

如果您还没有这样做,请创建一个新页面并部署 Divi Builder 以在前端构建。

WordPress divi主题

的,添加一个 新部分 一列行。

添加一个 文本模块 到具有以下内容的行:

<h2>Guest Speaker</h2>

演讲嘉宾部分

下一个, 添加分隔模块 直接在文本模块下。

演讲嘉宾部分

现在我们要添加一个 具有四列结构的新行 举行我们的演讲嘉宾。

演讲嘉宾部分

在该行的第一列中,添加一个人员模块。

演讲嘉宾部分

更新 Person 模块内容如下:

fiverr建站WordPress程序员

姓名: [blank]
脸书个人资料网址: [add “#” for now]
推特资料网址: [add “#” for now]
领英个人资料网址: [add “#” for now]

对于描述,添加以下内容:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

注意: hr 标签生成一个分隔线,它具有一些内联样式,使其宽度为 90 像素并浮动到左侧。 包裹在姓氏周围的强标签使其成为独特的设计元素的粗体。

演讲嘉宾部分

现在您已准备好内容,请保存人员模块设置。

独立站选品工具

复制您刚刚创建的人员模块并将其粘贴到剩余的每一列中,以便在四列中的每一列中都有相同的人员模块。 要复制和粘贴,您可以使用右键单击菜单选项或快捷键 cmd+c cmd+v (mac) 或 ctrl+c ctrl+v (win)。

演讲嘉宾部分

在第 4 列打开 person 模块的设置并更新内容,使 in 仅包含以下内容:

名称:“这可能是你!”
描述:“使用下面的按钮申请在我们的活动中发言。”

演讲嘉宾部分

高质量外链购买

保存您的设置。

接下来,在第 4 列的 person 模块下直接添加一个按钮模块,并将按钮文本内容更新为“立即申请”。 并保存您的设置。

演讲嘉宾部分

回到第 1-3 列中的前三个人物模块,并为每个嘉宾演讲者肖像添加图像。 确保它们具有相同的大小,具有相同的高度和宽度尺寸,并且它们足够大以考虑所有浏览器尺寸的列宽(理想情况下为 600 像素 x 600 像素)。

演讲嘉宾部分

JasperAI 10000字免费额度试用

这就是您的嘉宾演讲布局此时应该是这样的。

演讲嘉宾部分

设置嘉宾演讲者布局样式

样式化部分

打开部分设置并更新以下内容:

背景图片: [I’m using one from our Agency Layout]

背景渐变左颜色:#293039
背景渐变右颜色:rgba(41,48,57,0.89)
顶部分隔线样式:见截图
顶部分隔线颜色:#293039
顶部分隔器高度:30vw

WordPress备份工具updrafplus

演讲嘉宾部分

更改行宽

由于我们希望两行具有相同的宽度,因此使用多选来选择两行并单击其中一个设置图标以打开元素设置。

演讲嘉宾部分

然后更新以下内容:

自定义宽度:80%

演讲嘉宾部分

现在您的两行都将具有相同的自定义宽度。

设计标题

打开包含您的部分标题“Guest Speakers”的文本模块的设置并更新以下内容:

标题 2 字体:蒙特塞拉特
标题 2 字体粗细:粗体
标题 2 字体样式:TT
标题 2 文本对齐:右
标题 2 文字颜色:#74bf46
标题 2 文字大小:70px(桌面),50px(智能手机)

保存设置。

现在打开 Divider 设置并更新以下内容:

颜色:#ffffff
高度:0px
宽度:90 像素
模块对齐:右

演讲嘉宾部分

设计人员模块

由于我们希望为所有个人模块提供相同的初始样式,因此请使用多选选择每个模块,然后单击其中一个模块的设置图标以部署元素设置模式。

演讲嘉宾部分

更新以下元素设置:

图标颜色:#74bf46
标题字体:蒙特塞拉特
标题字体粗细:Light
标题文字颜色:#ffffff
标题文字大小:20px
正文字体:蒙特塞拉特
正文文本颜色:#ffffff
正文字母间距:2px
车身线高:1.8em

演讲嘉宾部分

样式化 CTA 人员​​模块

我们将此人员模块用作号召性用语,以吸引新的演讲嘉宾申请演讲活动。 因此,我们可以保留默认图像(剪影)作为显示空白点的创造性方式。 但是我们需要添加一些样式调整来完成设计。 打开第 4 列中人员模块的设置并更新以下内容。

图片边框宽度:18px
图片边框颜色:#d2d2d2
图像不透明度:50%

标题字体粗细:粗体
标题行高:1.5em

演讲嘉宾部分

现在剩下要做的就是为我们的按钮设置样式。 打开按钮模块设置并更新以下内容:

按钮文字颜色:#293039
按钮背景颜色:#74bf46
按钮边框半径:50px
按钮字体:蒙特塞拉特
字体粗细:粗体

现在让我们来看看最终的结果。

演讲嘉宾部分

演讲嘉宾部分

额外提示:图像缩放悬停效果

演讲嘉宾部分

不要忘记 Divi 中提供的所有内置悬停选项。 事实上,您可以在我们的博客上查看有关这些悬停效果的一些鼓舞人心的教程。 但是对于这个设计,我想我会跳出框框思考一下,给你一些 CSS 片段,这将使你的人物图像在悬停时略微缩放(或缩放)。

如果您正在寻找一种微妙的悬停效果来将您的个人模块分开,这里是如何做到的。

使用多选选择第 1、2 和 3 列中的人员模块。打开元素设置。 在高级选项卡下输入以下 CSS 主要元素

overflow: hidden;

此代码将防止扩展图像扩展到模块容器之外。

接下来在下面添加以下CSS 会员形象

transition: all 0.3s; 

当图像按比例缩放时,这会增加平滑过渡。

要在悬停时添加 CSS,请单击悬停图标并选择悬停选项卡并输入以下 CSS:

transform: scale(1.1) translateY(-4.5%);

这会将图像缩放(或扩展)到稍大的尺寸并将其向上移动一点。

演讲嘉宾部分

现在图像将在悬停时产生微妙的缩放效果。

演讲嘉宾部分

最后的想法

好吧,我希望你喜欢这个教程,或者至少留下一些有用的设计技巧。 可以以多种方式使用此客座扬声器部分布局。 另一个完美的应用程序是员工页面同时列出当前员工并鼓励其他人申请职位。 随时与我们分享一些想法。

我期待在下面的评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题