如何使用 Divi 的位置選項創建交互式圖像拼貼

已發表: 2020-01-29

Divi 的新位置選項為使用絕對位置屬性創建獨特的圖像拼貼佈局打開了大門。這使您可以為設計的每個元素進行更精確的放置。一旦您將其與 Divi 中無數的設計設置組合相結合，您就可以設計出一些非常令人驚嘆的圖像拼貼畫。

在本教程中，我將向您展示如何使用 Divi 的內置位置選項在幾分鐘內為您的 Divi 網站創建漂亮的交互式圖像拼貼。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的交互式圖像拼貼佈局的快速瀏覽。

Divi 交互式圖像拼貼

免費下載佈局

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

下載文件

免費下載

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

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

要將佈局導入您的頁面，只需提取 zip 文件並將 JSON 文件拖到 Divi Builder 中。

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

首先，您需要執行以下操作：

如果您還沒有安裝並激活 Divi 主題。
在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

使用 Divi 的位置選項創建交互式圖像拼貼

優化行列

首先，創建一個單列行。

Divi 交互式圖像拼貼

行設置

接下來，我們需要更新行，以便模塊之間沒有任何額外的空間（通過裝訂線寬度），因此我們將裝訂線寬度設置為 1。我們還需要確保行跨越瀏覽器窗口的整個寬度所以我們可以利用 vw 長度單位來定位我們的圖像（vw（視口寬度）長度單位與瀏覽器窗口的寬度有關）。將寬度設置為 100%，我們可以使用 vw 長度單位在行/列中定位我們的圖像，以便在所有瀏覽器寬度上保持位置不變，以實現無縫響應式設計。為了隱藏行外的任何圖像溢出，我們需要將溢出設置為隱藏。

為此，請按如下方式優化行設置：

Divi 交互式圖像拼貼

設置列高

默認情況下，列的高度由它包含的內容（或 Divi 模塊）的高度決定。 Divi 模塊（與 HTML 中的所有 div 一樣）默認情況下將具有靜態位置，這意味著它們將向其父列添加實際空間/高度，因為它位於頁面的正常流中。但是，具有絕對位置的 Divi 模塊會脫離正常流程，並且不會為列創建實際空間/高度。出於這個原因，我們需要為列添加指定的高度，以便我們可以將圖像放置在預定的空間內。

為此，請打開行設置並通過將以下自定義 CSS 添加到主元素來更新列設置。