如何使用 Divi 創建不規則形狀的截面過渡
已發表: 2017-10-26提升網站設計的最佳方法之一是使用不同的部分過渡。 在上一篇文章中，我們向您展示瞭如何僅使用 Divi 內置選項來做到這一點。 但是，如果您希望創建更高級或更個性化的內容，您也可以創建不規則形狀的部分過渡。 由於它們的複雜性，解決此問題的最佳方法是使用具有透明邊框的圖像。
在這篇文章中，我們將向您展示如何做到這一點。 我們不僅將向您展示在 Divi Builder 中的操作，而且還將向您展示如何使用 Photoshop 通過幾個步驟在圖像上創建這些透明邊框。
示例結果
讓我們來看看具有令人驚嘆的不規則形狀截面過渡的佈局示例：
您可以注意到，您可以在整個站點和不同部分中使用這些透明邊框。 重要的是要記住，根據透明邊框的大小，您應該在各部分中留出足夠的空間以適應您嘗試共享的不同內容。 它還將在各個部分之間創造一個很好的平衡。
如何使用 Divi 創建不規則形狀的截面過渡
訂閱我們的 YouTube 頻道
使用 Photoshop 創建透明邊框
您可以使用 Photoshop 隨心所欲地獲得原始形狀。 您還可以選擇名為 GimpShop 的免費替代品。 對於本教程，我們將使用 Photoshop。
打開 Photoshop
首先在您的計算機上打開 Photoshop。
打開圖片
完成後，打開您要處理的圖像。
雙擊圖像並創建圖層
在 Photoshop 中上傳圖像後，雙擊圖像層並為其創建一個新層（層 0）。
添加另一層
要添加透明邊框，您還需要另一個圖層，因此請繼續單擊我們在下面的打印屏幕中標記的圖標來添加它。 創建圖層（圖層 1）後，請確保將其放置在包含圖像的圖層上方。
選擇畫筆和大小
在激活第 1 層時，繼續並單擊畫筆圖標。
完成後，您可以根據自己的喜好調整用於畫筆的大小和圖案。 互聯網上有大量免費的 Photoshop 畫筆，因此根據您創建的網站類型，選擇合適的畫筆。 此外，請確保不透明度設置為 100%。
開始在邊框上使用畫筆
一旦你的刷子就位，開始在你想要透明的一側使用它。 確保用刷子覆蓋整個邊框，以便之後全部變得透明。
CTRL (Windows) 或 Command (Mac) + 選擇新圖層
完成後，您可以按鍵盤上的 CTRL（適用於 Windows）或 Command（適用於 Mac）並同時單擊第 1 層。 您將看到 Photoshop 將選擇您添加到該圖層的所有內容，在本例中，即形狀邊框。
使新圖層不可見
接下來，通過移除下面打印屏幕中標記的眼睛，使第 1 層不可見。
選擇圖像並刪除新圖層
然後，單擊包含圖像的圖層並按鍵盤上的刪除按鈕。 一旦你這樣做了，你會看到邊框將變得透明。
選擇矩形選框工具並單擊圖像
單擊矩形選框工具並隨機按圖像上的某處。
將圖像另存為 PNG
最後，您需要將圖像另存為 PNG，以便您可以在您的網站上使用它。
為 Divi 添加背景
一旦你創建了你想要在你的 Divi 網站中使用的不同圖像（通過使用上面的 Photoshop 技術），剩下的就很簡單了。 您創建的圖像用作特定部分的背景。 我們只會向您展示如何構建我們示例的英雄部分，因為相同的方法也適用於不同的部分。
添加新標準截面
添加一個新頁面，切換到 Visual Builder 並向該頁面添加一個新的標準部分。
上傳背景圖片
將要顯示的所有模塊放置在英雄部分後，您可以繼續添加您在本文前一部分中創建的圖像。
添加背景顏色
完成此操作後，您可以決定在圖像的透明部分顯示什麼顏色。 在本例中，我們使用“#dddddd”作為背景色。 您可以立即看到顏色將出現在圖像的透明部分。
確保有足夠的填充
根據您在英雄部分使用的模塊數量和透明邊框的大小，您可能需要添加一些自定義填充。 使用不同的部分填充值，看看哪一個能給你最好的結果。
為下一節添加相同的背景顏色
為了確保不同的部分彼此很好地融合，請在下一部分中使用您在英雄部分使用的相同背景顏色。 這並不一定意味著您必須為下一部分使用一種顏色的背景顏色，您可以使用漸變背景，只要兩個部分的顏色融合得很好。
例子
如前所述，您可以根據需要創建任意數量的圖像邊框，並在整個網站中以創造性的方式使用它們。 為了讓您體驗一下，我們創建了以下示例預覽：
最後的想法
在這篇文章中，我們向您展示瞭如何輕鬆使用不規則形狀的截面過渡。 通過使用這種方法，您基本上可以創建您想要的任何類型的部分過渡。 除了向您展示如何在 Photoshop 中通過幾個步驟創建這些不規則形狀外，我們還向您展示瞭如何在 Divi Builder 中使用它。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論！
請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！