使用 Divi Scroll Motion 效果創建浮動接觸部分

每個網站都需要一個聯繫部分，但這並不意味著您需要採用標准設計。 使用 Divi 的滾動效果，您可以創建一個突出的浮動聯繫人部分。 通過垂直滾動聯繫部分佈局改善您的用戶交互，該佈局將邀請訪問者與您的聯繫表單互動。 在這篇文章中，我們將向您展示如何創建可以添加到任何頁面的全寬浮動聯繫人部分。 您甚至可以使用 Divi Theme Builder 在站點範圍的頁腳頂部添加它。

在下面，您將找到一個可免費下載的文件夾，其中包含 JSON 佈局，可上傳到您自己的 Divi 庫。 我們還提供了一個 PSD 模板來幫助您重新創建地圖背景，以及一個地圖圖釘的 SVG，以便您可以使用自己的顏色對其進行個性化設置。

讓我們開始吧！

預覽

在我們開始構建聯繫表單佈局之前，先看看不同屏幕尺寸的結果。

桌面

移動的

免費下載浮動接觸部分

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

下載文件

免費下載

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

下載

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

1.為浮動接觸部分創建地圖背景

打開谷歌地圖

本教程的第一步是創建黑白地圖背景。 要創建自己的，請按照以下步驟操作：

• 首先，打開谷歌地圖並蒐索您的地址。
• 當它加載時，縮小以便您可以看到您地址周圍的大部分城市或街道。

• 接下來，定位地圖，使您的位置位於地圖的右上角象限。
• 然後，取下定位銷。
• 最後，對地圖進行截圖，避開角落上的選項卡。

個性化 Pin 圖

在上面的可下載文件中，我們包含了我們在設計中使用的引腳的 SVG 文件。 歡迎您使用它並使用矢量圖形編輯器更改顏色。 如果您想在 Photoshop 中更改顏色，我們還包含了一個透明的 PNG。

對 SVG 引腳執行以下步驟：

• 首先，下載本教程開頭的免費文件並解壓文件夾。
• 其次，使用 Illustrator、Inkscape 或您最喜歡的矢量編輯器打開 SVG 圖釘圖形。
• 第三，更改顏色以匹配您的品牌或網站。
• 最後，另存為透明的 PNG。

在 Photoshop 上編輯

現在是時候把它們放在一起了。 首先，在您最喜歡的圖形編輯器中打開地圖以降低顏色的飽和度。 其次，添加引腳。

如果你有 Photoshop，你可以使用我們包含的 PSD 文件，只需將你的地圖截圖添加到第二層的智能對像中。

要使用智能對象，請按照下列步驟操作

• 打開 PSD 文件。
• 雙擊橙色圖層。 將打開一個新窗口。
• 用你的地圖替換我們的地圖。
• 不要忘記點擊保存。
• 返回主編輯窗口並在那裡單擊保存。
• 將網頁導出為 .jpg。

如果您沒有 Photoshop，請按照以下步驟操作：

• 首先，創建一個 1920 px x 700 px 的新項目。
• 其次，將地圖截圖放到畫布上。 確保將您的位置保持在右上象限，略高於中心。
• 第三，使用圖像調整將圖像變成黑白。
• 另外，添加一些對比。
  1. 亮度：-25
  2. 對比度：-50
• 然後，單擊圖像層，並在大約 55% 處添加透明度。
• 如果您要在具有非白色背景的網頁上創建此設計，請在圖像下方添加一個白色圖層，以保持基色為白色，無論網站的背景顏色是什麼。
• 繼續將圖釘放在您的位置。 將其大小調整為大約 90px 高。 把它留在最頂層。
• 最後，下載為 .jpg。

2. 創建元素結構

添加新部分

背景

現在是時候開始使用 Divi Builder 構建浮動接觸部分了！ 我們要做的第一件事是打開一個新頁面或現有頁面並添加一個新部分。

在內容選項卡中，添加您在 Photoshop 中創建的地圖背景。

• 背景圖片：您編輯過的地圖

間距

然後，在設計選項卡中自定義節的間距設置。

• 上下邊距：50vh
• 底部填充：0vw

能見度

接下來，將溢出調整為可見。

• 水平和垂直溢出：可見

位置

最後，將截面的 Z 索引設置為 10。

• Z指數：10

添加新行

列結構

現在是添加一些元素的時候了。 首先，添加一行 2 列。

漿紗

打開行設置並按如下方式調整大小。

• 寬度
  • 台式機：90%
  • 平板電腦和手機：80%
• 最大寬度：90%

能見度

單擊高級選項卡，然後調整溢出。

• 水平和垂直溢出：可見

位置

通過修改位置設置完成行設置。

• 職位：相對
• 偏移原點：左上角
• 垂直偏移
  • 桌面：-8vw

第 1 列設置

背景

在添加模塊之前，我們需要為各個列設置樣式。 向第 1 列添加背景顏色。

• 純色：#25274d

間距

接下來調整間距設置。

• 頂部和底部填充
  • 台式機和平板電腦：7vw
• 左右填充
  • 台式機：3vw
  • 平板電腦和手機：6vw

邊界

然後，在邊框設置中添加一些圓角。

• 圓角：四個角均為 10px

滾動效果

最後但並非最不重要的一點是，在滾動效果設置中使用一些垂直運動。 這將幫助我們創建浮動效果。

• 滾動變換效果：垂直運動
• 設置垂直運動/桌面
  • 起始偏移：4
  • 中間偏移：0（50%）
  • 結束偏移：-4
• 設置垂直運動/平板電腦和手機
  • 起始偏移：4
  • 中間偏移：0（在 40% 和 60% 處）
  • 結束偏移：-3
• 運動效果觸發器：元素中間

第 2 列設置

位置

現在，進入第二列設置。 相應地調整位置設置。

• 職位：相對
• 偏移原點：左上角
• 垂直偏移
  • 台式機：25vw

滾動效果

我們也為此列添加了一些垂直運動。

• 滾動變換效果：垂直運動
• 設置垂直運動/桌面
  • 起始偏移：2
  • 中間偏移：0（50%）
  • 結束偏移：-2
• 設置垂直運動/平板電腦和手機
  • 起始偏移：0
  • 中間偏移：0（50%）
  • 結束偏移：-2
• 運動效果觸發器：元素頂部

將文本模塊添加到第 1 列

內容

是時候添加模塊了，從第 1 列中的文本模塊開始。添加一些您選擇的 H2 內容。

標題文字

轉到設計選項卡並按如下方式設置 H2 文本的樣式。

• 標題級別：H2
• 字體：Palanquin Dark
• 字體粗細：粗體
• 字體樣式：TT
• 顏色：黃色#ffd868
• 尺寸
  • 台式機：5vw
  • 平板電腦：10vw
  • 電話：12vw
• 字母間距：4px

將聯繫表單模塊添加到第 1 列

內容

在文本模塊下方，添加聯繫表單。 這些是我們正在使用的字段：

• 姓名
• 電子郵件
• 主題
• 信息

垃圾郵件防護

在樣式化聯繫表單模塊之前。 打開垃圾郵件保護並連接您的 ReCaptcha 帳戶。

• 使用垃圾郵件防護服務：是
• 服務提供商：ReCaptcha
• 選擇賬戶

字段

轉到設計選項卡並按如下所示設置字段樣式。

• 背景顏色：深藍色 #25274d
• 文字顏色：淺灰色#d1d1d1
• 焦點背​​景顏色：深藍色 #25274d
• 焦點文本顏色：淺灰色 #d1d1d1
• 字體: Palanquin
• 風格：TT
• 字體大小
  • 台式機：0.9vw
  • 平板電腦：2vw
  • 電話：3vw
• 字母間距：1px

按鈕

然後，設置按鈕樣式。

• 自定義樣式：是
• 文字大小：20px
• 文字顏色：深藍色 #25274d
• 背景顏色：黃色#ffd868
• 邊框半徑：7px
• 圖標顏色：深藍色 #25274d
• 上邊距：5px

漿紗

接下來我們將修改大小設置。

• 寬度：100%
• 最大寬度：100%

間距

我們也會添加一些頂部填充。

• 頂部填充：4vw

邊界

通過自定義邊框設置完成模塊設置。

• 輸入圓角：四個角均為 6px
• 輸入邊框樣式：所有四個邊
• 輸入邊框寬度：2px
• 輸入邊框顏色：黃色 #ffd868

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

內容

移至第 2 列並添加社交媒體模塊。 使用您需要的所有社交媒體網絡。

• Facebook
• 推特
• 領英

關聯

在樣式化之前，添加到相應網絡的鏈接。

項目背景

現在，打開第一個社交網絡並更改背景顏色。

• 顏色: 深藍色#25274d

項目圖標

在相同元素的設計選項卡中，更改圖標設置如下。

• 顏色：黃色#ffd868
• 圖標字體大小
  • 台式機和平板電腦：31px
  • 電話：26px

項目間距

然後，添加一個小的邊距以將圖標彼此分開。

• 右邊距：1vw

複製和粘貼項目樣式

要設置其餘社交網絡的樣式，請返回主內容窗口並複制第一個圖標的項目樣式。 然後，將項目樣式粘貼到其餘社交網絡上。

結盟

移至主設計選項卡並確保模塊與左側對齊。

• 模塊對齊：左

漿紗

然後，調整模塊的大小。

• 寬度：100%

間距

也擦除所有默認填充。

• 上、下、左、右填充：0vw

邊界

最後，在邊框設置中添加一些圓角。 這將一次調整所有圖標的邊框。

• 圓角
  • 左上和右上：7px
  • 左下和右下：0px

將文本模塊添加到第 2 列

內容

在社交媒體模塊下方，添加另一個文本模塊。 添加一些您選擇的內容。 我們添加了兩個地址、一個電話號碼和一個電子郵件。 在所有大寫的每個項目的標題上使用粗體。

• 總部： 1587 Sukhumvit Soi 21，曼谷，泰國。
• 零售地點: Emporium Mall, 2nd Floor
• 電話 : (321) 564 2398
• 電子郵件： [電子郵件保護]

背景

修改模塊的背景顏色。

• 顏色：深藍色#25274d

文本

轉到設計選項卡並設置文本樣式。

• 字體: Palanquin
• 顏色：黃色#ffd868
• 尺寸：18px

間距

也添加一些自定義間距值。

• 上邊距
  • 桌面：-60px
  • 平板電腦和手機：-50px
• 頂部、底部、左側和右側填充
  • 台式機：3vw
  • 平板電腦：6vw
  • 電話：8vw

邊界

並通過在邊框設置中添加圓角來完成模塊。 就是這樣！

• 圓角：10px 右上角、左下角和右下角。

預覽

現在我們已經完成了浮動接觸部分的重新創建，最後看看不同屏幕尺寸的結果。

桌面

移動的

您已完成重新創建浮動接觸部分佈局！

使用新的 Divi 滾動效果有助於將任何標準佈局變成出色的設計。 通過創建自己的地圖背景，您可以更好地控製完成設計的外觀。 如果您有任何問題或建議，請在下方評論區留言！