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

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

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

让我们开始吧！

预览

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

免费下载社交关注设计

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

调色板

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

调色板 #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 文字设置

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

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

浆纱

接下来减小模块的宽度。

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

添加第 2 节

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

添加行

立柱结构

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

浆纱

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

• 使这一行全宽：是

将图像模块添加到第 2 列

上传样机

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

浆纱

更改图像模块的大小。

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

间距

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

将 Blurb 模块添加到第 3 列

添加内容

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

添加链接

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

选择图标

也选择你的图标。

背景颜色

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

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

图标设置

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

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

标题文本设置

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

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

间距

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

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

边界

我们还将使用边框设置。

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

盒子阴影

添加一个盒子阴影会给设计元素一些深度。

• 盒子阴影模糊强度：80px
• 盒子阴影传播强度：-11px

动画片

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

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

克隆 Blurb 模块 3 次

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

删除重复项的负上边距

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

独特的模糊模块设置

模糊模块 #2

更改副本

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

选择图标

也选择另一个图标。

图标设置

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

标题文本设置

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

• 标题文字颜色：#3b5998

间距

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

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

边界

接下来修改边框设置。

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

动画片

让这个 Blurb 模块从另一侧滑入，并稍加延迟。

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

模糊模块#3

更改副本

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

选择图标

接下来选择另一个图标。

图标设置

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

标题文本设置

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

• 标题文字颜色：#1da1f2

间距

更改间距设置。

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

边界

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

• 右边框颜色：#1da1f2

动画片

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

模糊模块#4

更改副本

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

选择图标

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

图标设置

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

标题文本设置

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

• 标题文字颜色：#0077B5

间距

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

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

边界

然后，修改边框设置。

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

动画片

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

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

预览

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

最后的想法

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