為 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 文件，以通過您的網站增加社交參與度。 如果您有任何問題或建議，請務必在下方評論區留言！