在 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 布局中加入一些圆形元素真的很有趣。 随意探索制作圆形模块、行，甚至整个部分！

我期待在评论中收到您的来信。

干杯!