为 Divi 下载带有 5 个调色板的独特社交关注设计

网站和社交媒体常常齐头并进。 社交网络用于为网站带来流量，但反之亦然，尤其是当您想增加社交网络的参与度时。 这就是为什么大多数网站在各个页面上都包含指向其社交网络的链接的原因。 您可以采用经典方式并添加图标，也可以尝试更独特的方法。

我们创建了一个令人惊叹且富有创意的社交关注设计，您可以下载并在使用 Divi 构建的任何网站上使用。 最重要的是，我们还为您提供了 5 种不同的调色板，它们看起来非常适合此设计。

让我们开始吧！

预览

让我们首先看看这种设计的不同变体以及不同屏幕尺寸上的视图。

免费下载社交关注设计

要使用 5 种不同调色板的社交关注设计，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您很快就会成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

调色板

我们将逐步指导您完成整个过程。 但在我们这样做之前，请继续选择一个喜欢的调色板，并将颜色代码放在附近。 我们将在整个教程中引用颜色编号。

调色板 #1

• 颜色 #1：#D09CF1
• 颜色 #2：#00e2df

调色板 #2

• 颜色 #1：#ffa0a0
• 颜色 #2：#10007f

调色板 #3

• 颜色 #1：#ff3273
• 颜色 #2：#050042

调色板 #4

• 颜色 #1：#f954ee
• 颜色 #2：#00aeff

调色板 #5

• 颜色 #1：#ffca3a
• 颜色 #2：#ff6005

从头开始重新创建社交跟随设计

添加第 1 节

渐变背景

首先向新页面或现有页面添加常规部分。 打开部分设置并应用渐变背景：

• 颜色 1：颜色 #1（在调色板中查找）
• 颜色 2：颜色 #2（在调色板中查找）
• 渐变类型：径向
• 径向：中心
• 起始位置：6%

背景图片

然后，通过转到下载的文件夹 > 背景图案上传您可以找到的背景图案。 将背景图案与以下背景设置相结合：

• 背景图片尺寸：实际尺寸
• 背景图像位置：底部中心
• 背景图像重复：空间

顶部分隔线

接下来打开分隔线设置并添加顶部分隔线。

• 分隔线样式：在列表中查找
• 分隔线颜色：rgba(72,0,79,0.08)
• 分隔线高度：500px
• 分隔线翻转：垂直

底部分隔线

还要添加一个底部分隔线。

• 分隔线样式：在列表中查找
• 分隔线颜色：#FFFFFF
• 分隔线高度：500px

间距

然后，转到间距设置并添加一些自定义填充。

• 顶部填充：220px
• 底部填充：329px

动画片

最后，为该部分添加一个微妙的动画。

• 动画风格：幻灯片
• 动画方向：下
• 动画强度：2%
• 动画开始不透明度：100%

添加行

列结构

我们现在可以使用以下列结构添加新行：

添加文本模块

添加内容

我们在这一行中唯一需要的模块是文本模块。 向内容框添加标题和段落。

文字设置

然后，转到文本设置并进行一些修改。

• 文字大小：16px
• 文本行高：2em
• 文字方向：居中
• 文字颜色：浅

H1/H2 文本设置

更改您选择的标题的设置。

• 标题字体：魔方
• 标题字体样式：大写
• 标题文字大小：100 像素（桌面）、42 像素（平板电脑）、32 像素（手机）
• 标题线高度：1.2em

浆纱

接下来减小模块的宽度。

• 宽度：71%
• 模块对齐：居中

添加第 2 节

在上一部分的正下方，继续添加一个新的常规部分。 无需对部分设置进行任何更改。

添加行

列结构

使用以下列结构添加一行：

浆纱

然后，在大小设置中使行全宽。

• 使这一行全宽：是

将图像模块添加到第 2 列

上传样机

是时候开始添加模块了！ 首先将图像模块添加到第二列。 上传与您选择的调色板相匹配的模型。 您可以通过转到下载的文件夹 > Mockups找到所有种类的模型。

浆纱

也更改图像模块的大小。

• 宽度：82%（桌面），100%（平板电脑和手机）
• 模块对齐：居中

间距

要重叠图像模块和上一部分，请向图像模块添加一些负边距。

• 上边距：-300px

将 Blurb 模块添加到第 3 列

添加内容

我们现在可以添加所有社交网络！ 为了创建它们，我们使用了 Blurb 模块。 继续将第一个 Blurb 模块添加到第三列并更改内容。

添加链接

接下来添加指向社交页面的链接。

选择图标

也选择您的图标。

背景颜色

继续转到背景设置并使用稍微透明的背景颜色。

• 背景颜色：rgba(255,255,255,0.79)

图标设置

然后，更改图标设置。 在这里，我们使用 Instagram 的官方颜色之一。

• 图标颜色：#fb3958
• 图标位置：左

标题文字设置

接下来对标题文本设置进行一些更改。

• 标题字体粗细：半粗体
• 标题文字颜色：#fb3958
• 标题行高度：1.7em

间距

为了与模型重叠，我们将添加一些间距值。

• 上边距：-170px（桌面）、-800（平板）、-700（手机）
• 左边距：-60%（桌面），0%（平板和手机）
• 右边距：60%（桌面），0%（平板和手机）
• 顶部填充：20px
• 底部填充：20px
• 左填充：50px
• 右填充：50px

边界

我们也将使用边框设置。

• 左上边框：20px
• 左下边框：20px
• 右边框宽度：5px
• 右边框颜色：#fb3958

盒子阴影

添加框阴影会给设计元素一些深度。

• 框阴影模糊强度：80px
• 框阴影扩散强度：-11px

动画片

最后，我们使用滑入式动画风格来模仿人们熟悉的移动通知效果。

• 动画风格：幻灯片
• 动画方向：左

克隆 Blurb 模块三次

为了节省时间，我们将克隆 Blurb 模块 3 次。 然后，我们将修改每个副本以创建我们想要的结果。

删除重复项的负上边距

为了保持良好的概览，我们将首先删除每个重复项的负自定义边距。

独特的模糊模块设置

模糊模块 #2

更改副本

打开第三列中的第二个 Blurb Module 并更改内容。

选择图标

也选择另一个图标。

图标设置

更改图标颜色以匹配它所代表的社交网络。

• 图标颜色：#3b5998

标题文字设置

标题文本颜色也使用相同的颜色。

• 标题文字颜色：#3b5998

间距

要在手机的另一侧创建另一个重叠，请更改间距值。

• 左边距：-170%（桌面），0%（平板和手机）
• 右边距：170%（桌面），0%（平板和手机）

边界

接下来修改边框设置。

• 右上角：20px
• 右下角：20px
• 左边框宽度：5px
• 左边框颜色：#3b5998

动画片

也让这个 Blurb Module 从另一侧滑入，并有一个小的延迟。

• 动画方向：右
• 动画延迟：100ms

模糊模块 #3

更改副本

第三个 Blurb 模块也需要一些不同的副本。

选择图标

接下来选择另一个图标。

图标设置

将图标颜色更改为与其所代表的社交网络相匹配的颜色。

• 图标颜色：#1da1f2

标题文字设置

标题文本颜色使用相同的颜色。

• 标题文字颜色：#1da1f2

间距

也更改间距设置。

• 左边距：-80%（桌面），0%（平板和手机）
• 右边距：80%（桌面），0%（平板和手机）

边界

也可以在边框设置中更改边框颜色。

• 右边框颜色：#1da1f2

动画片

最后，为已经存在的动画添加一个小的延迟。

• 动画延迟：200ms

模糊模块 #4

更改副本

对于最后一个 Blurb 模块，我们从更改内容开始。

选择图标

接下来在图像和图标设置中选择另一个社交图标。

图标设置

使图标颜色与显示的社交网络相匹配。

• 图标颜色：#0077B5

标题文字设置

标题文本使用相同的颜色。

• 标题文字颜色：#0077B5

间距

也使用不同的间距设置将 Blurb 模块推到左侧。

• 左边距：-180%（桌面），0%（平板和手机）
• 右边距：180%（桌面），0%（平板和手机）

边界

然后，修改边框设置。

• 右上角：20px
• 右下角：20px
• 左边框宽度：5px
• 左边框颜色：#0077B5

动画片

最后但并非最不重要的一点是，向此 Blurb 模块添加不同的动画方向和一些动画延迟。

• 动画方向：右
• 动画延迟：300ms

预览

现在我们已经完成了所有步骤，让我们最后看看结果。

最后的想法

在这篇文章中，我们分享了一个独特的社交关注设计，您可以免费下载。 我们还为您提供了 5 种不同的调色板，您可以对其进行应用。 随意使用您创建的任何 Divi 网站上的 JSON 文件，以通过您的网站增加社交参与度。 如果您有任何问题或建议，请务必在下方评论区留言！