如何创建 Divi 重叠徽标

几乎所有网站的标准调整之一是网站的徽标。 在某些形状、形式或时尚中，网站所有者会希望设计他们的徽标以使其脱颖而出。 吸引人们注意您的徽标的最佳方法之一是使其偏移并重叠其背后的元素。 在本教程中，我们将向您介绍如何偏移您网站的徽标，使其与整个网站标题重叠。 让我们深入挖掘！

效果预览

让我们来看看我们今天要实现的目标。

桌面

移动的

创建并上传您的全局标题

我们要做的第一件事是下载我们的一个免费页眉和页脚包。 对于本文，我们使用的是电子商店布局包，因此我们将下载匹配的免费赠品页眉和页脚包以便稍后上传。

接下来，前往 Divi Theme Builder。 您可以在 WordPress 管理仪表板的下方找到它 Divi – 主题生成器. 要上传我们下载的页眉和页脚包，请单击 上下箭头图标 在页面的右上角。 这将打开 Theme Builder 可移植性选项。

然后你想点击 进口 选项卡，为页眉和页脚包选择提取的 JSON 文件，然后单击 导入 Divi 主题生成器模板 按钮。

在此之后，您可以单击绿色区域，上面写着 全局标题. 这样做将打开可视化构建器。 如果您选择 覆盖默认网站模板 在上一步中，标题已经到位。 如果没有，只需像从库中的任何其他布局包一样加载它。

创建重叠徽标

现在，是时候开始设计标志本身的样式了。 首先，打开第二部分的菜单模块。

到达那里后，您将前往 先进的 选项卡并找到 菜单标志 下一节 自定义 CSS. 有几种不同的方法可以使用 CSS 实现这种效果。

使用负底边距

你可以用一行 CSS 代码来做到这一点。 我们将为站点徽标添加负边距，将其拉下并重叠其后面的菜单元素。 具体而言，您使用的值将取决于您的徽标和标题。 使用相对值，例如 vh, 大众， 或者 % 可以帮助使重叠徽标在各种设备上更加一致。

CSS 代码边距底部； -60%； CSS 代码

您还需要使用不同的显示视口检查结果。 最有可能的是，它需要专门针对移动设备和桌面设备进行调整。 为此，只需将鼠标悬停在 菜单标志 标题并选择 M电话图标. 然后导航到 手机标签.

现在，您对 CSS 代码所做的任何更改都将仅适用于移动设备大小的视口。

仅适用于台式机

但是，如果您只希望在桌面上发生重叠徽标效果，请启用上述响应选项，仅将值设置为 0。这将导致非桌面版本保持在默认位置，同时保持桌面效果你设计的。

使用变换翻译

实现此效果的另一种方法是通过 transform: translate CSS 属性。 这是您在 X、Y 轴上重新定位元素并精确指定您希望元素出现在页面上的位置的地方。 使用此属性，您可以更好地控制徽标的位置。

CSS CODE 转换：translate(0%, 150%); CSS 代码

使用这种 CSS 操作方法，您可以做的不仅仅是垂直重叠。 您可以有效地将徽标移动到您想要的任何位置，重叠 任何 页面上的元素，而不仅仅是紧随其后的部分。

第一个数字将指示徽标在 X 轴（水平）上的位置，第二个值是 Y 轴（垂直）。 一个值 (0,0) 是徽标的默认位置。

考虑到这一点，对于仅限桌面的设计，您需要启用响应式选项并更改任何 变换：翻译 值设置为 (0,0)，因此它们在非桌面设备上保持不变。

保存您的更改

最后一步就是保存您的更改。 请务必点击模块设置中的绿色对勾和右下角的绿色保存按钮。 然后保存以单击屏幕右上角的 X。

完成重叠徽标的最后一步是确保已保存所有主题生成器更改。 一定要点击 节省 各种模板上方的按钮。

当它说 已保存所有更改，您的新重叠徽标将在您的网站上生效。

最终结果

让我们看看你的辛勤工作给你带来了什么，好吗？ 如果您使用与我们相同的免费赠品标题布局包，您应该会看到与此类似的内容。

桌面

移动的

包起来

将您的徽标与页面上的其他元素重叠可能是您的网站所需要的视觉风格。 这是一个简单、快速的效果，您可以直接在 Divi 构建器中使用一行 CSS 代码来实现。 事实上，虽然我们在本教程中使用了 Theme Builder，但您可以将相同的代码和效果应用于页面上的其他图像和元素，以将它们移动并赋予它们视觉上的提升。

您如何看待重叠 Divi 徽标？ 让我们在评论中知道！