在 Divi 中設計圓形元素的有用指南

每隔一段時間，網站設計就需要一些圓形元素。 這是打破網頁上標準框設計單調乏味的好方法。 創建圓形元素可能聽起來很簡單（實際上確實如此！），但是如果您不熟悉一些基本規則，您可能會遇到一些不必要的障礙，這些障礙可能會非常令人沮喪。

例如，有時很難讓內容以正確的間距對齊並適合圓形元素。 或者您可能會發現很難讓圓圈對移動設備做出響應。 出於這個原因，有些人轉而使用圓形圖像背景作為內容。 但是，如果您不想使用自定義圖像背景，那麼下一個最佳選擇是使用 CSS。 好消息是，Divi 不需要為製作圓形元素而提出自己的自定義 CSS，從而使過程變得更加容易。 所以，如果你想在 Divi 中給一個元素一個圓形，這就是你的帖子。

在本教程中，我將帶您了解如何在 Divi 中創建圓形元素（包括部分、行和模塊）的基礎知識。 然後我將向您展示在預製佈局上實施這些技術是多麼容易。

一探究竟！

搶先看

免費下載示例圓形元素佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

你需要什麼開始

首先，在 Divi 中創建一個新頁面。 然後給你一個頁面標題並在前端部署Divi builder。 選擇“從頭開始構建”選項。

稍後我們還將向我們的頁面添加預製佈局，但現在我們可以從頭開始構建。

現在你準備好了！

創建圓形元素的三個基本步驟

創建圓形元素實際上只有三個簡單的步驟。 為了說明這些步驟，我將使用 Divi Builder 將這些步驟應用到 Call to Action Module。

第 1 步：調整具有相等高度和寬度值的元素

第一步是將高度和寬度設置為相同的相等值。 基本上，我們想讓元素成為一個完美的正方形，然後再把它變成一個完美的圓形。 在這個例子中，讓我們給號召性用語模塊的高度和寬度設置為 10vw。

第 2 步：為所有四個角添加 50% 的邊框半徑

第二步是將元素（或模塊）的邊框半徑在所有四個角上設置為 50%。 在 Divi 中，您可以在標記為“圓角”的選項下更改元素的邊框半徑。

第 3 步：對齊圓形元素內的內容

第三步，對齊圓形元素的內容。 我們可以通過調整元素的填充來做到這一點。 （此外，我會在本文後面介紹一種使用 flex 將內容垂直居中的方法）

在這個例子中，我們可以添加以下填充來讓我們的內容更接近圓形元素的中心：

自定義填充：18vw 頂部，3vw 左，3vw 右

當然，仍可能需要進行一些調整以確保文本/內容適合移動設備上的圓形元素，但這確實涵蓋了基本設置。

您可能會注意到我使用了 vw 長度單位來確定圓形元素的大小和間距。 這有助於創建更一致的響應式設計。 我來解釋一下。

使用相對長度單位使圓形元素具有響應性

使用 VW 長度單位作為高度和寬度

在所有相對長度單位中，vw 長度單位是我最喜歡的響應式設計之一。 由於 vw 長度單位是相對於瀏覽器窗口（而不是父元素）的寬度，您可以獲得一致的設計，可以隨著瀏覽器窗口大小平滑調整。

讓我們看一下當我縮小瀏覽器寬度時，我們的示例循環調用操作模塊的外觀。

將 VW 長度單位用於圓形元素內容

將 vw 長度單位用於圓形元素的大小和內容是響應式設計的一個很好的組合。 基本上，這允許內容（如文本或圖像）與圓形元素的大小無縫調整，以在所有瀏覽器上實現一致的設計。 但是，您需要小心使用 vw 長度單位作為正文文本，因為文本在移動設備上可能變得太小。 我喜歡使用 vw 長度單位作為標題，然後根據需要使用像素調整正文的大小。

此外，如果您打算在手機顯示屏上保留圓形元素設計，則需要將內容保持在最低限度，並調整圓形元素的大小以獲得最大空間。

使用我們當前的例子，你可以給你的標題文本一個 vw 長度值，然後在移動設備上調整模塊的大小，如下所示：

標題文字大小：4vw
寬度（手機）：70vw
身高（手機：70vw

如您所見，所有內容現在也很好地位於手機顯示屏上的圓形元素中。

像素呢？

如果您想使用絕對長度單位（如像素）來確定圓的大小，那完全沒問題。 您只需要確保在平板電腦和手機顯示屏的每個斷點處進行必要的大小調整，以確保圓形元素適合瀏覽器窗口。 在某些情況下，使用像素可以更輕鬆地在平板電腦和手機顯示屏上使您的尺寸恰到好處（或更精確）。

例如，讓我們採用相同的號召性用語模塊並使用像素（而不是 vw）來調整模塊的大小和空間。

您可以按如下方式更新高度、寬度和填充：

寬度：500px
高度：500px
自定義填充：頂部 200 像素，左側 20 像素，右側 20 像素

這種設計在桌面上看起來很相似，但是當您在手機顯示屏上查看圓形元素時就會出現問題。 由於圓形元素的大小使用像素（絕對長度單位），因此圓形元素將延伸到手機顯示屏上的容器和瀏覽器之外。

這就是為什麼在移動顯示器上調整寬度和填充像素值很重要的原因。 例如，您可能需要將寬度和高度改為 300px。

為什麼 % 長度單位不能很好地用於調整圓形元素的大小

如果您想要一個響應更快的圓形元素解決方案，您可能認為使用百分比是答案。 但是，當調整網頁上的元素大小時，高度的百分比長度單位與寬度的百分比長度單位不同。 這是因為元素的默認高度通常保留為默認值（高度：自動）。 因此，例如，如果您嘗試為 Divi 模塊設置 100% 高度，該模塊將不會調整，因為父容器（列、行、節等）都有未定義的高度值。 瀏覽器基本上不會嘗試將模塊設置為 100% 無（它不能）。 這不是寬度的情況。 任何塊元素（或 div）的默認寬度為 100%。 因此，除非設置更改，否則所有部分、行和模塊都具有默認的 100% 寬度。 這就是為什麼在嘗試構建響應式圓形元素時，% 長度單位不是最好的選擇。 圓形元素需要在所有瀏覽器尺寸上具有相同的高度和寬度，因此使用百分比長度單位作為高度很難實現這一點。 但是，有一些方法可以使 100% 的高度和寬度與應用於父元素的更多自定義 CSS 一起使用。 但是為了在 Divi 中製作圓形元素，您可能會發現 vw 長度單位更容易使用。

對齊圓形元素內的內容

如果您想在圓形元素內對齊內容，那麼在使用 Divi 時，您確實有兩個我認為很簡單的選項。 您可以使用填充來對齊內容，這使您可以更好地控制內容在圓形元素中的顯示位置。 或者您可以使用 flex 屬性（帶填充）來確保內容直接顯示在圓的中心。

使用填充對齊圓形元素內容

要使用填充對齊圓形元素內部的內容，我建議使用相對長度單位（如 % 或 vw），以便填充將隨著容器或瀏覽器寬度的大小而增加或減少。 您不想使用絕對長度單位在使用相對單位調整大小的圓形元素內部進行填充。 結果會不一致，設計會在移動設備上崩潰。 例如，如果您有一個高度為 10vw 和寬度為 10vw 的圓形元素。 隨著瀏覽器寬度的縮小，該元素的尺寸也會縮小。 如果您在元素頂部添加了 100 像素的內邊距，那麼只要您調整瀏覽器寬度並破壞設計，100 像素就會保持不變。 但是，如果您添加了 3vw 填充，則此填充會與元素很好地調整。

這就是為什麼我建議在我們的號召性用語模塊示例中使用 vw 填充。

使用 Flex 屬性對齊圓形元素內容

如果您不想太擔心讓頂部和底部填充到位以確保內容垂直居中，您可以使用 flex 屬性。 通過向父元素（圓形元素）添加一些 css 片段，您可以確保所有內容保持垂直居中。 然後您可以使用對齊、填充或邊距來確保內容也保持水平居中。

這就是我的意思。

使用我們的示例，打開號召性用語模塊設置。

然後將頂部和底部填充設置為 0px。

然後轉到高級選項卡，並將以下 CSS 片段添加到主元素：

display:flex;
align-items: center;

對於這個特定的模塊，在促銷描述下有一些額外的填充，這會稍微偏離對齊。 因此，您可以通過將以下 CSS 添加到促銷說明中來擺脫它：

padding-bottom: 0px

查看這篇關於如何垂直對齊內容的帖子以獲取更多信息。

付諸實踐：將圓形元素添加到預製佈局

現在您對如何在 Divi 中創建圓形元素有了更好的了解，讓我們看看這在實際佈局設計中如何工作。 對於此示例，我將使用 Farmer Layout Pack 中的 Divi 的 Farmer Landing Page。

將農民登陸頁面佈局加載到您的頁面

首先，讓我們將 Farmer Landing Page Layout 添加到頁面中。 為此，請打開設置菜單和 Divi Builder 的底部，然後單擊從庫中加載按鈕。 在從庫彈出加載中，找到 Farmer Layout Pack 並選擇它。 然後單擊以使用農民登陸頁面。

這會將佈局加載到頁面。

製作圓形部分標題

對於第一個示例，我們要將佈局的頂部標題部分轉換為圓形元素。 為此，我們將使用三個基本規則：

1：具有相等高度和寬度值的尺寸元素
2：為所有四個角添加 50% 的邊框半徑
3：對齊圓形元素內的內容

打開部分設置並更新以下內容：

寬度：70vw（桌面）、70vw（平板）、80vw（手機）
最大寬度：1080px
截面對齊：居中
高度：70vw（桌面）、70vw（平板）、80vw（手機）
最大高度：1080px

請注意，我為平板電腦和手機添加了額外的高度和寬度值，此外還添加了最大高度和最大寬度。 重要的是確保所有高度值和所有寬度值都相等。

現在我們需要在所有四個角上添加 50% 的邊框半徑。

圓角：50%（所有四個角）

由於這是一個部分，因此內容包括具有多個模塊的兩列行。 有了這麼多內容，我們需要對模塊進行一些大小調整，以確保內容適合該部分。

首先，在包含該部分標題的第 1 列中打開頂部文本模塊的設置。 然後更新標題文字大小如下：

標題文字大小：4vw

然後在包含標題的文本模塊正下方的文本模塊中減少正文文本的數量。

現在我們可以通過調整行間距來對齊內容。 打開行設置並更新以下內容：

自定義邊距：10vw top（桌面）、5vw（平板電腦）、0vw（手機）
自定義填充：左 3vw，右 3vw

為了使圓形更引人注目，我們可以添加一個頂部分隔符並將背景圖像位置移動到左上角。

現在讓我們看看結果。

製作圓形模糊模塊

現在讓我們嘗試在此佈局上製作一些圓形宣傳語。 在這個例子中，讓我們使用標題為“我們的產品”部分下的四個簡介模塊。 找到後，打開第 2 列頂部的模糊模塊的設置。

然後更新模塊的大小如下：

圖像寬度：7vw
寬度：50vw（桌面），80vw（手機）
最大寬度：400px
模塊對齊：居中
高度：50vw（桌面），80vw（手機）
最大高度：400px

接下來，添加您的邊框半徑或圓角：

圓角：50%

之後，讓我們更新內容設計和間距如下：

圖像/圖標放置：頂部
標題文字大小：2vw（桌面），20px（平板）
文字方向：居中

自定義填充：0vw 頂部，0vw 底部，4vw 左，4vw 右

最後，讓我們通過將以下自定義 CSS 添加到 Main Element 來使用 flex 屬性垂直對齊內容：

display: flex;
align-items: center;

將圓形樣式擴展到該部分中的所有 Blurbs

這負責我們第一個模塊的圓形設計。 現在我們需要做的就是將簡介模塊設計設置擴展到該部分中剩餘的三個簡介。 為此，右鍵單擊我們剛剛設計的模糊模塊並選擇“擴展模糊樣式”。 在“擴展樣式”彈出窗口中，選擇在整個部分擴展樣式。

最後結果

現在讓我們看看最終的結果。

最後的想法

我希望你學到了一些關於如何在 Divi 中創建圓形元素的有用技巧。 通過了解三個基本步驟以及如何正確使用長度單位來調整元素的大小和空間，您可以非常輕鬆地創建您正在尋找的圓形設計。 而且，在現有或預製的 Divi 佈局中加入一些圓形元素真的很有趣。 隨意探索製作圓形模塊、行，甚至整個部分！

我期待在評論中收到您的來信。

乾杯!