spot_img
HomeDivi主题使用教程如何使用 Divi 为任何类型的网站设计有吸引力的订阅部分

如何使用 Divi 为任何类型的网站设计有吸引力的订阅部分

人们创建网站的主要原因之一是找到一种接触目标受众的新方法。 一旦迈出第一步并开始构建网站,您就会开始想知道如何才能与潜在客户取得联系。 已证明可以帮助很多网站所有者的事情之一是列表构建。 这一切都是关于从访问者那里收集电子邮件地址,通过电子邮件营销将他们转化为潜在客户(最终成为客户)。

通过列表构建,可以在您的网站上创建有吸引力的订阅部分。 您希望您的订阅部分引人注目,更重要的是,您希望您的订阅部分进行转换。 对于本教程,我们创建了一个令人惊叹的订阅部分,它无疑会吸引访问者的注意力。 我们将巧妙的设计与为什么要注册电子邮件列表的争论结合起来。 除此之外,我们还将分享三种调色板,您可以在创建设计时从中进行选择。

让我们开始吧!

订阅我们的 Youtube 频道

谷歌SEO优化服务

预习

在我们深入学习教程之前,让我们看一下不同屏幕尺寸的结果。

订阅部分

调色板 #1

订阅部分

  • 颜色 #1: RGBA(79,35,255,0.88)
  • 颜色#2: #e09900
  • 颜色 #3: #4f23ff

调色板 #2

订阅部分

  • 颜色 #1: RGBA(255,35,97,0.75)
  • 颜色#2: #e09900
  • 颜色 #3: #d80e00

调色板 #3

订阅部分

WordPress divi主题
  • 颜色 #1: rgba(41,17,147,0.75)
  • 颜色#2: #00ffd8
  • 颜色 #3: #291193

方法

选择上面的调色板之一(或创建您自己的调色板)并在整个教程中使用这些颜色。 当我们在设置中使用颜色时,我们将参考颜色#1、#2 或#3。 我们还使订阅模块重叠两列,并强调注册电子邮件列表的好处。

重新创建订阅部分

添加新部分

顶部分隔线

打开您要添加订阅部分的页面并添加一个新的标准部分。 立即打开您的部分的设置并添加以下顶部分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#FFFFFF
  • 分隔线高度:200px
  • 分频器翻转:垂直

订阅部分

底部分隔线

在您的部分底部添加相同类型的分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#FFFFFF
  • 分隔线高度:200px
  • 分频器翻转:垂直

订阅部分

间距

接下来打开间距设置,通过在顶部和底部填充中添加“0px”来删除您部分的所有默认填充。

订阅部分

添加新行

列结构

现在我们已经完成了所有部分设置,我们可以添加一个新行。 为其选择以下列结构订阅部分

渐变背景

打开行设置并继续添加以下渐变背景:

  • 第一种渐变颜色:颜色#1
  • 第二渐变颜色:颜色#2
  • 渐变方向:123deg
  • 将渐变置于背景图像之上:是

订阅部分

H10的年终大促

背景图片

继续添加所选的背景图像。 此背景图像只会显示一点。 也选择“封面”作为背景图像大小。

订阅部分

第 2 列背景色

接下来,添加“rgba(255,255,255,0.87)”作为第 2 列的背景色。

订阅部分

浆纱

我们还将减少两列之间的空间,并通过应用以下大小调整设置使行占据屏幕的整个宽度:

  • 使此行全宽:是
  • 使用自定义装订线宽度:是
  • 排水沟宽度:1
  • 均衡列高:是

订阅部分

间距

您需要在行设置中做的最后一件事是添加一些自定义填充:

  • 顶部和底部填充:0px
  • 第 1 列顶部填充:200px
  • 第 1 列底部填充:100px
  • 第 2 列顶部填充:300px(桌面)50px(平板电脑和手机)
  • 第 2 列底部填充:100 像素(平板电脑和手机)
  • 第 2 列左右内边距:50px

订阅部分

将 Blurb 模块 #1 添加到第 1 列

添加简介标题

现在让我们开始添加我们的模块! 我们将从第一列开始,添加一个 Blurb 模块。 一旦我们完成了对 Blurb 模块的修改,我们也将对其他两个重新使用它的设置。 添加 Blurb 模块后,为其命名。

订阅部分

高质量外链购买

添加 Blurb 图标

接下来向您的 Blurb 模块添加一个图标。 我们为第一个模块使用了以下图标:

订阅部分

图标设置

通过添加以下设置更改图标的外观:

  • 图标颜色:#FFFFFF
  • 图标放置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:43px

订阅部分

标题文本设置

我们只使用了一个简介标题。 这就是为什么我们只需要修改 H4 的文本设置:

JasperAI 10000字免费额度试用
  • 标题字体:Yeseva One
  • 标题文本对齐方式:居中
  • 标题文字颜色:#FFFFFF
  • 标题字母间距:-1px

订阅部分

浆纱

我们还将根据不同的屏幕尺寸修改 Blurb 模块的宽度:

  • 内容宽度:150px
  • 宽度:33%(台式机)、40%(平板电脑)、60%(手机)
  • 模块对齐:居中

订阅部分

间距

最后,将以下自定义填充也添加到您的 Blurb 模块:

  • 顶部和底部填充:50px

订阅部分

两次克隆 Blurb 模块并修改特色 Blurb 模块

更改图标和内容

您现在可以继续克隆 Blurb 模块两次。 将它们全部保留在第一列中。 对于每个新的 Blurb 模块,继续更改图标和标题,使其与您要发送的消息相匹配。

订阅部分

订阅部分

添加背景颜色

我们将突出显示中间的 Blurb 模块。 为此,我们将首先为其添加白色背景色。

订阅部分

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

更改图标和标题文本颜色

我们还将图标的颜色和 H4 标题更改为“#000000”。

订阅部分

添加圆角

接下来,我们将“5px”添加到边框设置中的每个角。

订阅部分

箱影

最后但同样重要的是,我们将使用第一个框阴影选项添加一点深度。

订阅部分

将文本模块 #1 添加到第 2 列

文本设置

让我们继续第二栏! 我们需要的第一个模块是文本模块。 添加内容后,对其应用以下文本设置:

  • 文字字体:Yeseva One
  • 文字颜色:#000000
  • 文字大小:54px
  • 文本行高:1em

订阅部分

将文本模块#2 添加到第 2 列

间距

在该文本模块的正下方,我们将为描述添加另一个文本模块。 添加内容后,将“20px”添加到上边距。

订阅部分

将电子邮件选择模块添加到第 2 列

背景颜色

我们需要添加的下一个模块是电子邮件选择模块。 添加后,继续将背景颜色更改为“rgba(255,255,255,0)”。

订阅部分

电邮帐户

添加您的电子邮件帐户,然后选择您选择的服务提供商。

订阅部分

字段

继续打开“字段”设置并禁用“名字”和“姓氏”字段。

订阅部分

字段设置

我们还将修改 Field 设置。 通过向每个角添加“0px”来移除圆角。 还要添加第一个框阴影选项。

订阅部分

订阅部分

按钮设置

接下来,更改按钮的外观:

  • 按钮文字颜色:#FFFFFF
  • 按钮背景颜色:颜色 #3
  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 按钮字体:Yeseva One
  • 显示按钮图标:是
  • 按钮图标颜色:#FFFFFF
  • 按钮图标位置:左
  • 仅在按钮悬停时显示图标:否
  • Box Shadow:选择第一个选项

订阅部分

订阅部分

订阅部分

订阅部分

间距

最后,使用以下间距设置使订阅模块与两列重叠:

tiktok siteground
  • 顶部边距:20px(桌面),0px(平板电脑和手机)
  • 左边距:-60%(台式机和平板电脑),0px(手机)
  • 右边距:60%(台式机)、50%(平板电脑)、0px(手机)

订阅部分

将社交媒体关注模块添加到第 2 列

根据需要添加尽可能多的社交网络

最后但同样重要的是,我们将添加一个社交媒体关注模块。 继续添加您希望显示的社交网络。

订阅部分

圆角

添加完所有社交网络后,将“50px”添加到边框设置中的每个角。

订阅部分

间距

我们还将通过向顶部边距添加“50px”来下推模块。

订阅部分

单独更改每个社交网络的背景颜色

最后但同样重要的是,将每个社交网络的背景颜色分别更改为“#000000”。

订阅部分

预习

现在我们已经完成了所有步骤,让我们最后看看在不同屏幕尺寸上的结果。

订阅部分

最后的想法

订阅部分是您网站的重要组成部分。 它们可帮助您建立电子邮件列表、启用电子邮件营销并在短时间内将潜在客户转化为访问者。 在这篇文章中,我们向您展示了如何创建一个与任何类型的网站相匹配的令人惊叹的订阅部分。 我们将使用华丽的设计与提供注册优势相结合。 如果您有任何问题或建议,请确保在下面的评论部分发表评论!

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

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

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