使用全局预设优化您的 Divi 站点的徽标图像

在 Divi 中优化您网站的徽标是您网站设计的重要组成部分。 但是，它不必是一项神秘或艰巨的工作。 事实上，Divi 使用 Divi Theme Builder 和所有可用的内置设计选项使其变得非常简单。

在本教程中，我们将向您展示如何在 Divi 中使用正确的大小、位置和样式来优化徽标。 然后我们将向您展示如何将这些设计保存为可用于未来开发的全局预设。

让我们跳进去！

免费下载徽标图像预设布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要在全局标题上使用此徽标图像布局，您必须首先将其导入 Divi 库，如下所示：

1. 转到 Divi > Divi 库。
2. 单击页面顶部的导入/导出按钮。
3. 在可移植性弹出窗口中选择导入选项卡
4. 选择导入预设
5. 单击导入按钮

然后转到主题构建器并编辑全局标题。 在您希望徽标所在的位置添加一个图像模块，并使用预设来相应地设置徽标的样式和位置。

标志尺寸

在我们使用 Divi 优化徽标图像之前，重要的是要考虑在将徽标图像上传到图像模块之前优化其大小。 当您计划以 100 像素 x 50 像素显示徽标时，您不希望将 1920 像素 x 1080 像素的徽标图像上传到您的网站。 当然，有办法在事后调整徽标图像的大小（即 srcset 和图像优化插件）。 但是，这不是最佳实践，因为这可能会导致页面加载时间变慢。 而且，让我们面对现实，您的徽标太重要了，不能满足于凌乱的快捷方式。

以下是要考虑的常见徽标图像尺寸列表：

对于水平布局：

• 250 像素 x 150 像素
• 350 像素 x 75 像素
• 400 像素 x 100 像素

对于垂直（方形）布局：

• 160 像素 x 160 像素（大）
• 60 像素 x 60 像素（小）

您可能需要比您想象的更大的徽标尺寸。

在台式机上需要较小的徽标而在平板电脑（甚至手机）上需要较大的徽标是很常见的。 在 Divi 中，您的列布局在平板电脑和手机显示器上堆叠成一列布局是很常见的。 而且由于平板电脑浏览器的宽度通常有 980 像素的最大宽度，这对于您的徽标来说比桌面上的要大得多。 因此，您可能需要选择更大的徽标尺寸并根据设备调整最大高度或宽度。 如果您在平板电脑上上传的徽标比您需要的要小，则无法在不影响图像清晰度的情况下增加尺寸。 简而言之，确保徽标与所有浏览器宽度上的最大显示尺寸一样大。

使用全局预设优化您的 Divi 站点的徽标大小和位置

编辑您的全局标题徽标

首先，通过转到 Divi > Theme Builder 导航到 Divi Theme Builder。 然后单击以在默认网站模板中构建新的全局标题。

然后选择选项“从头开始构建”。

在本教程中，我们将使用 Divi Theme Builder 优化包含在自定义全局标题中的徽标。 欢迎您使用现有的页眉设计或从我们的博客导入我们预制的全局页眉（和页脚）模板之一。 为了简单起见，我们将构建一个非常简单的带有徽标和菜单的标题布局。

添加行和列布局

在全局标题布局编辑器中，添加四分之一四分之三的列行。

在右栏中，添加一个图像模块作为占位符，以帮助我们可视化标题上的徽标位置。

添加图片模块显示Logo图片

将图像模块添加到左列。

使用图像模块制作徽标

对于更传统的标题设计，您可以利用 Divi 的菜单模块来显示您的徽标。 但是，借助 Divi 的动态内容功能，您可以使用任意数量的 Divi 模块显示站点的徽标。 基本上，您可以在任何可以在 Divi 中显示图像的地方显示您的徽标。 例如，您可以选择在简介模块图像上显示站点徽标，或者根据需要甚至作为背景图像显示。 在本教程中，我们将专注于使用图像模块来显示站点徽标。 这允许徽标成为一个完全独立的元素（不与模块中的其他元素连接，如菜单模块或模糊模块）。 此外，图像模块是为设计图像而构建的，这为我们提供了许多额外的设计选项来设计我们的徽标图像。 跳转到文章末尾，了解有关如何将站点徽标添加为动态图像的更多信息。

由于我们将测试几种不同的徽标图像大小，因此我们将在示例中粘贴常规图像而不是动态站点徽标。

示例 1：构建左对齐徽标全局预设

对于第一个示例，我们将为 60 像素 x 60 像素的左对齐徽标构建一个简单的预设。

打开图像模块设置并将 60 像素 x 60 像素的徽标图像上传到图像模块。

更新图像设计设置如下：

• 图像对齐：居中
• 最大宽度：60px
• 模块对齐（桌面）：左
• 模块对齐（平板电脑和手机）：居中

尽管这是为左对齐徽标设计的，但图像对齐设置为居中，因为图像对齐与模块对齐不同。 图像对齐在模块内居中。 由于模块的最大宽度为 60 像素，因此图像对齐实际上并不重要，因为模块对齐现在将决定徽标图像的对齐。

如果您想为徽标添加背景图像或使容器变圆，这将很有帮助。 本质上，这使徽标图像容器与徽标图像本身的大小相同。

请注意，模块对齐更改为平板电脑的中心，因为列将在移动设备上堆叠。

从当前样式创建新预设

现在徽标设计已完成，您可以通过单击预设下拉菜单并选择“从当前样式创建新预设”为图像模块创建全局预设。

为徽标图像预设一个唯一的名称。 在这种情况下，我们可以给它命名为“Logo Left (60px x 60px)”，让我们确切地知道要使用什么尺寸的图像以及在选择使用预设时徽标将如何对齐。

示例 2：构建右对齐徽标全局预设

对于下一个示例，我们将创建一个右对齐的徽标全局预设。 使用我们当前的设计和预设，这将很容易做到。 只需将列布局更改为四分之三四分之一，将菜单移至左列，并将徽标移至右列。

打开包含我们刚刚创建的徽标图像预设的图像模块的设置。

然后更新设计设置以将模块对齐更改为右侧。

足够简单。 N0w 单击预设下拉列表并从当前样式创建一个新预设。

为预设命名为“Logo Right (60px x 60px)”。

示例 3：构建居中徽标全局预设

对于下一个示例，我们将构建一个居中的徽标全局预设。 由于这是一个居中的徽标，因此我们可以在示例中使用更大的徽标。

首先，将列布局更改为 0ne-四分之一二分之一四分之一结构，以便在徽标中间有一个更大的列。 然后将徽标移动到中心列

上传 250 像素 x 150 像素的新徽标图片。

在设计选项卡下，更新以下内容：

• 最大宽度：250px
• 模块对齐：居中

然后从当前样式添加一个新的全局预设。

并将其命名为“徽标中心（250 像素 x 150 像素）”。

示例 4：构建左对齐的大徽标全局预设

对于下一个示例，我们将为较大的左对齐徽标（400 像素 x 100 像素）创建一个预设。

因为徽标将有 400 像素宽，所以我们需要一个列结构，为徽标提供所需的空间。

让我们回到两列结构，左侧是徽标，右侧是菜单。 但是，让我们将结构更改为三分之一三分之二。

如果我们保持默认的行最大宽度为 1080 像素，这将为我们提供大约 320 像素宽的列。

打开图像模块设置并添加一个 400 像素 x 100 像素的徽标图像。

在设计选项卡下，更新以下内容：

• 最大宽度：400px
• 模块对齐（桌面）：左
• 模块对齐（平板电脑）：居中

正如我所提到的，该列的最大宽度为 320 像素，这意味着徽标图像将无法在桌面上扩展到其全宽。 但是，一旦列堆叠，它将能够在平板电脑上。 出于这个原因，我们希望将图像的最大宽度设置为 400 像素。

现在，平板电脑上的徽标略大并且居中。

然后从当前样式添加一个新的全局预设。

将其命名为“左徽标（400 像素 x 100 像素）”并保存预设。

示例 5：使用悬停效果全局预设构建左对齐徽标

对于最后一个示例，我们将向左对齐的徽标添加一些悬停效果，并将其保存为新的全局预设。

通常，人们将他们的徽标链接到主页。 添加悬停效果可以通过使其可点击性更加明显来改善用户体验。

在此示例中，我们将使用 60 像素 x 60 像素的徽标图像和“徽标左（60 像素 x 60 像素）”预设。 打开图像设置并从列表中选择预设。

现在我们可以使用一些悬停效果样式调整预设，然后再将其保存为新预设。

更新以下内容：

• 圆角：50%

• 盒子阴影：见截图
• 框阴影水平位置：0px
• 框阴影垂直位置：0px（桌面）5px（悬停）
• 阴影颜色：#ac3cf7

然后在悬停时添加以下变换旋转：

• 变换旋转 Z 轴（悬停）：90 度

然后从当前样式创建一个新预设并将其命名为“Logo Left w/ Hover (60px x 60px)”。

这是结果。

在图片模块中添加动态站点标志

要将站点徽标动态添加到图像模块，首先，您需要确保并在 Divi 主题选项下上传站点徽标。

请记住您选择的徽标的大小。

然后转到具有全局预设的图像模块并打开设置。 删除当前图像，然后单击动态内容图标。 从下拉列表中，选择站点徽标。

现在您的图像模块将动态拉取您网站的徽标。

不要忘记向徽标添加动态主页链接。

最后的想法

希望本教程将有助于简化向 Divi 标题添加徽标的过程。 在将徽标图像上传到 Divi 主题之前，它首先要优化徽标图像的大小。 然后就可以使用 Divi 的内置设计设置，针对不同的列布局和不同的设备调整图像的大小和位置。

当然，每个网站都需要自己独特的风格，其中一些会违反这些示例中设置的准则。 但我相信，通过一些调整，您可以轻松地为任何独特的布局创建新的预设！

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

干杯!