如何使用 Divi 創建漂亮的移動社交 Follow Bios（免費下載！）

當您創建個人網站時，擁有一個可以輕鬆鏈接到的社交關註生物頁面會很有幫助。 它是一張很棒的在線訪問卡，其中包含您所做的工作以及人們可以在哪裡看到您的工作的摘要。 在移動社交關注 bios 中共享的信息通常僅限於您的圖片、姓名、職位、簡短的描述和投資組合鏈接。 您還可以添加額外的 CTA 以幫助訪問者與您取得聯繫。

在這篇文章中，我們將向您展示如何使用 Divi 創建兩個漂亮的移動社交關注 bios。 在本教程結束時，我們還將共享兩個示例的 JSON 文件，以便您可以立即開始使用。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下我們將從頭開始重新創建的兩個示例。

示例 1

示例 2

開始重新創建示例 #1

添加新部分

背景顏色

讓我們從第一個例子開始吧！ 創建一個新頁面或打開一個現有頁面並向其中添加一個常規部分。 打開部分設置並添加白色背景色。

• 背景顏色：#ffffff

間距

然後，轉到該部分的間距設置並進行一些更改。 您會注意到這些值因屏幕尺寸而異。 我們通過隨時修改左右內邊距，在不同的屏幕尺寸上保持相同的纖薄設計。

• 頂部填充：50px（桌面和平板電腦），0px（手機）
• 底部填充：50px（桌面和平板電腦），0px（手機）
• 左填充：36vw（桌面）、23vw（平板電腦）、0vw（手機）
• 右填充：36vw（桌面）、23vw（平板電腦）、0vw（手機）

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

背景顏色

尚未添加任何模塊，打開行設置並添加背景顏色。

• 背景顏色：#333333

漿紗

然後，轉到設計選項卡中的大小設置並刪除列和行之間的所有自定義空間。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

盒子陰影

我們還添加了一個框陰影以在較大的屏幕尺寸上創建一些深度。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

添加圖像模塊

上傳圖片

是時候開始添加模塊了！ 從比例為 1:1 的圖像模塊開始。 例如，我們使用的圖像的寬度和高度為“500px”。

結盟

上傳圖像後，轉到設計選項卡並更改圖像對齊方式。

• 圖像對齊：居中

漿紗

接下來，我們將通過修改大小設置中的寬度來縮小圖像的大小。

• 寬度：33%
• 模塊對齊：居中

邊界

我們還通過將“50vw”添加到邊框設置中的每個角來將圖像變成一個圓圈。 最重要的是，我們將使用以下設置添加一個白色邊框：

• 邊框寬度：8px
• 邊框顏色：#ffffff

盒子陰影

最後但並非最不重要的一點是，添加框陰影以創建立體設計。

• 框陰影垂直位置：40px
• 框陰影模糊強度：100px
• 陰影顏色：#000000

添加文本模塊 #1

添加H3內容

進入下一個模塊！ 在帶有一些 H3 內容的圖像模塊正下方添加一個文本模塊。

H3 文本設置

繼續轉到設計選項卡並更改 H3 文本設置。

• 標題 3 字體：Open Sans
• 標題 3 字體粗細：半粗體
• 標題 3 文本對齊：居中
• 標題 3 文本顏色：#ffffff
• 標題 3 行高：0.1em

間距

我們還添加了一些上邊距以在圖像模塊和此文本模塊之間創建空間。

• 上邊距：30px

添加文本模塊 #2

添加內容

我們需要的下一個模塊是另一個文本模塊。 將您的職位添加到內容框中。

文字設置

然後，轉到設計選項卡並更改文本設置。

• 文字字體：Open Sans
• 文字字體粗細：常規
• 文字顏色：#919191
• 文字方向：居中

添加文本模塊 #3

添加內容

繼續添加另一個帶有簡短描述的文本模塊。

文字設置

轉到文本設置並進行一些更改。

• 文字字體：Open Sans
• 文字顏色：#b7b7b7
• 文本行高：1.6em
• 文字方向：居中

漿紗

還要修改模塊的寬度。

• 寬度：68%
• 模塊對齊：居中

間距

並添加一些頂部和底部邊距以創建額外的空間。

• 上邊距：30px
• 下邊距：30px

添加按鈕模塊

添加副本

我們在這一行中需要的下一個也是最後一個模塊是按鈕模塊。 添加一些副本。

結盟

然後，轉到設計選項卡並更改按鈕對齊方式以使其與之前的模塊匹配。

• 按鈕對齊：居中

按鈕設置

繼續更改按鈕設置中按鈕的外觀。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：13px
• 按鈕文字顏色：#ffffff
• 顏色 1：#ad32ff
• 顏色 2：#32baff
• 梯度方向：96度
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：30px
• 按鈕字體：Open Sans
• 字體粗細：超粗
• 字體樣式：大寫

間距

接下來添加一些自定義邊距和填充。

• 下邊距：50px
• 頂部填充：15px
• 底部填充：15px
• 左填充：50px
• 右填充：50px

盒子陰影

並通過添加框陰影完成按鈕設計。

• 框陰影垂直位置：20px
• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.69)

添加第 2 行

列結構

進入下一行！ 使用以下列結構：

漸變背景

尚未添加任何模塊，打開行設置並添加漸變背景：

• 顏色 1：#1e1e1e
• 顏色 2：#3f3f3f
• 漸變類型：徑向
• 徑向：左上角
• 起始位置：26%
• 將漸變放在背景圖像上方：是

背景圖片

將以下圖像保存到您的計算機並將其用作該行的背景圖像：

以及以下背景設置：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中心
• 背景圖像重複：不重複
• 背景圖像混合：強光

漿紗

然後，轉到設計選項卡並刪除列和行之間的所有空間。 這將幫助我們充分利用我們獲得的行空間。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

接下來添加一些自定義填充。

• 頂部填充：84px
• 底部填充：84px
• 左填充：4vw（桌面）、7vw（平板電腦）、14vw（手機）
• 右填充：4vw（桌面）、7vw（平板電腦）、14vw（手機）

盒子陰影

伴隨著一個盒子陰影。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

展示

為了確保所有社交關注圖標彼此相鄰，我們將向行的主要元素添加一行 CSS 代碼。

display: flex;

將社交媒體關注模塊添加到第 1 列

結盟

我們在第 1 列中需要的第一個模塊是社交媒體關注模塊。 添加模塊後，在設計選項卡中更改項目對齊方式。

• 物品對齊：居中

添加新的社交網絡

繼續添加新的社交網絡。 在這個例子中，我們使用 Dribbble。

關聯

添加指向您的 Dribbble 個人資料的鏈接。

漸變背景

然後，使用以下設置更改漸變背景：

• 顏色 1：#ea0061
• 顏色 2：#ea4c8d
• 梯度方向：136deg

間距

並通過添加一些自定義填充來增加模塊的大小。

• 頂部填充：20px
• 底部填充：20px
• 左填充：20px
• 右填充：20px

邊界

我們還通過向邊框設置中的每個角添加“20vw”來將模塊變成一個圓圈。

盒子陰影

最後但並非最不重要的是，添加一個框陰影。

• 框陰影垂直位置：20px
• 框陰影模糊強度：80px
• 陰影顏色：#000000

將文本模塊 #1 添加到第 1 列

添加內容

接下來將文本模塊添加到第一列。

文字設置

更改文本設置。

• 文字字體：Open Sans
• 文字字體粗細：超粗
• 文字顏色：#ffffff
• 文字方向：居中

將文本模塊 #2 添加到第 1 列

添加內容

在前一個下方添加另一個。

文字設置

也更改此模塊的文本設置。

• 文字字體：Open Sans
• 文字顏色：#898989
• 文字大小：11px
• 文字方向：居中

克隆第 1 列中的模塊兩次並在剩餘列中放置重複項

完成第 1 列中的所有模塊的自定義後，您可以繼續克隆它們兩次。 將重複項放在該行的剩餘兩列中。

改變社交網絡

當然，您需要更改社交網絡。

更改社交網絡鏈接

隨著鏈接。

更改社交網絡漸變背景

和網絡漸變背景。

• 顏色 1：#0043ff
• 顏色 2：#00aced

• 顏色 1：#ea2c59
• 顏色 2：#fed270

開始重新創建示例 #2

添加新部分

背景顏色

繼續下一個例子！ 添加一個白色背景色的新部分。

• 背景顏色：#ffffff

間距

接下來添加一些自定義填充。

• 頂部填充：50px（桌面和平板電腦），0px（手機）
• 底部填充：50px（桌面和平板電腦），0px（手機）
• 左填充：36vw（桌面）、23vw（平板電腦）、4vw（手機）
• 右填充：36vw（桌面）、23vw（平板電腦）、4vw（手機）

添加第 1 行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，轉到行設置的設計選項卡並更改大小設置。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

添加圖像模塊

上傳圖片

是時候開始添加模塊了！ 我們需要的第一個模塊是比例為 1:1 的圖像模塊。

結盟

更改圖像對齊方式。

• 圖像對齊：居中

漿紗

也修改寬度。

• 寬度：33%
• 模塊對齊：居中

邊界

並在邊框設置中的每個角上添加“20px”。

盒子陰影

通過添加微妙的框陰影來完成圖像設計。

• 框陰影模糊強度：51px
• 陰影顏色：rgba(0,0,0,0.37)

添加文本模塊 #1

添加H3內容

我們需要的下一個模塊是文本模塊。 添加一些選擇的 H3 內容。

H3 文本設置

在設計選項卡中更改 H3 文本設置。

• 標題 3 字體：Open Sans
• 標題 3 字體粗細：超粗體
• 標題 3 字體樣式：大寫
• 標題 3 文本對齊：居中
• 標題 3 文本顏色：#000000
• 標題 3 字母間距：-1px
• 標題 3 行高：0.9em

間距

接下來添加一些上邊距。

• 上邊距：30px

添加文本模塊 #2

添加內容

添加另一個文本模塊。

文字設置

修改文本設置。

• 文字字體：Open Sans
• 文字顏色：#919191
• 文字方向：居中

添加第 2 行

列結構

繼續使用以下列結構添加新行：

背景顏色

尚未添加任何模塊，打開行設置並更改行背景顏色。

• 背景顏色：#ffffff

第 2 列背景顏色

也為第二列添加背景顏色。

• 第 2 列背景顏色：#efefef

結盟

確保您使用的是左行對齊方式。

• 行對齊方式：左

漿紗

接下來轉到大小設置並進行一些更改。

• 使用自定義寬度：是
• 單元： ％
• 自定義寬度：67%
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

我們還向行及其列添加了一些自定義填充。

• 頂部填充：0px
• 底部填充：0px
• 第 1 列頂部填充：20px
• 第 1 列底部填充：20px
• 第 2 列頂部填充：20px
• 第 2 列底部填充：20px

邊界

在左上角、右上角和左下角添加“14px”。

盒子陰影

並通過添加微妙的框陰影來完成行設計。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.17)

將社交媒體關注模塊添加到第 1 列

結盟

在第一列中，我們需要一個社交媒體關注模塊。 更改項目對齊方式。

• 物品對齊：居中

添加新的社交網絡

然後，添加一個新的社交網絡。 我們正在使用 Dribbble。

關聯

將鏈接添加到您的 Dribbble 投資組合。

漸變背景

並改變社交網絡的漸變背景。

• 顏色 1：#ea0061
• 顏色 2：#ea4c8d
• 梯度方向：136deg

間距

接下來添加一些自定義填充值。

• 頂部填充：20px
• 底部填充：20px
• 左填充：20px
• 右填充：20px

邊界

並在社交網絡的每個角落添加“10px”。

盒子陰影

通過添加微妙的框陰影來完成模塊設計。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

將文本模塊 #1 添加到第 2 列

添加內容

將文本模塊添加到第二列。

文字設置

相應地更改文本設置：

• 文字字體：Open Sans
• 文字字體粗細：超粗
• 文字顏色：#000000
• 文字方向：居中

間距

接下來通過添加一些頂部邊距來創建空間。

• 上邊距：10px

將文本模塊 #2 添加到第 2 列

添加內容

我們在第 2 列中需要的第二個模塊是另一個文本模塊。

文字設置

更改文本設置。

• 文字字體：Open Sans
• 文字顏色：#898989
• 文字大小：11px
• 文字方向：居中

克隆行 #2

完成修改行後，您可以繼續克隆一次。

交換模塊

接下來交換模塊。

添加第 1 列背景顏色

然後，將第 1 列的背景顏色添加到重複行。

• 第 1 列背景顏色：#dbdbdb

刪除第 2 列的背景顏色

接下來刪除第 2 列的背景顏色。

更改行對齊方式

也更改行對齊方式。

• 行對齊：右

更改行大小

以及尺寸設置中的自定義寬度。

• 自定義寬度：66.99%

更改行邊框

我們還確保“14px”僅分配給右上角和右下角。

改變社交關注網絡

繼續更改社交網絡。

更改社交關注網絡漸變背景

隨著漸變背景。

• 顏色 1：#0043ff
• 顏色 2：#00aced

克隆兩個社交關注行

完成兩個社交關注行後，您可以克隆它們中的每一個。

更改副本 #1 的邊框

更改第一個副本的圓角。

更改重複 #1 的社交關注網絡

隨著社交網絡。

更改副本 #1 的漸變背景

還有漸變背景。

• 顏色 1：#ea2c59
• 顏色 2：#fed270

更改重複 #2 的邊框

繼續更改第二個副本的圓角。

更改重複 #2 的社交關注網絡

隨著社交網絡。

更改副本 #2 的漸變背景

再一次，分配給社交網絡的漸變背景。

• 顏色 1：#00306b
• 顏色 2：#007bb6

免費下載 Mobile Social Follow Bios

要使用免費的移動社交關注部分，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

預覽

現在我們已經完成了所有步驟，讓我們最後看看我們重新創建的兩個示例的結果。

示例 1

示例 2

最後的想法

在這篇文章中，我們向您展示瞭如何為移動設備創建令人驚嘆的社交關注 bios。 您可以將這些設計用作您的在線訪問卡，並將人們重定向到此頁面，以便他們聯繫或查看您的投資組合鏈接。 如果您有任何問題或建議，請務必在下方評論區留言！