WordPress divi主题

使用号召性用语自定义 Divi 的二级菜单栏

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

Divi 的二级菜单不仅仅是列出社交网络和托管搜索栏的地方。 这是一个吸引观众并以某种方式呼吁他们采取行动的好地方。 我们的许多免费页眉/页脚包都充分利用了二级菜单。 在本教程中,我们将介绍将号召性用语添加到 Divi 网站的二级菜单栏的过程。

google广告开户

预览号召性用语模块

桌面

桌面预览

移动的

移动搜索结果

添加带有辅助菜单栏的标题菜单

对于本文,我们将使用 Creative CV 布局包和免费赠品标题。 我们的第一步是转到标题帖子并下载 .json 文件。

迪维json

接下来,进入您的 WordPress 仪表板。 然后导航到 Divi – 主题生成器 并点击 上下箭头 图标以打开 Divi 可移植性选项。

可移植性选项

在弹出窗口中,单击 进口 选项卡,找到 .json 您下载的标头的文件,然后单击 导入 Divi 主题生成器模板.

进口

完成后,您可以点击进入 全局标题 进入 Divi Builder。 如果出现提示,请选择 创意简历 从下拉菜单中。

WordPress divi主题

将号召性用语添加到辅助菜单栏

当您为标题输入 Divi Builder 时,请务必确定哪个菜单栏是主要的,哪个是次要的。 我们将主菜单栏标识为带有主导航栏的菜单栏。 因此,我们将在最顶部的栏中添加我们的号召性用语。

寻找次要

添加新行

由于我们使用的标题布局,我们希望 CTA 在不破坏设计的情况下拥有尽可能多的空间。 我们选择此布局包的标题是因为它使用较大的中心列和较小的侧列。 无论用户使用什么设备,这都会使其在网站上突出。 如果您使用的标头与我们不同,您可以在下面看到它。

插入新行

调整现有模块的可见性

如果您使用与本教程相同的标题布局,您将需要进入 所有行的选项,并确保每一列在所有设备上都是单独可见的。 这是下 行设置——列设置——高级——可见性.

列可见性

请务必取消选中您希望在其上查看列内容的任何设备。

添加号召性用语模块

接下来,我们将点击 黑色 + 图标以将新模块添加到新行。 我们正在使用 呼吁采取行动 Divi 中的模块,您可以在靠近顶部的位置找到它 插入模块 落下。

插入模块

编辑号召性用语模块

如果您在下面的屏幕截图中注意到,默认 呼吁采取行动 模块大小和样式不太适合标题菜单。 或者大多数网站,直接开箱即用。 所以我们要适当地设计它,这样它就不会显得格格不入。

fiverr建站WordPress程序员

cta 模块

更改背景颜色

首先,让我们将背景调整为 透明 这样无论 CTA 位于何处,它都与周围的设计相匹配。 您可以在 背景 下的区域 内容 号召性用语模块的选项卡。 使背景透明的选项是调色板中的圆圈,带有 方格上的红色斜线.

透明背景

调整 CTA 内容

号召性用语模块用途广泛,您可以使用这个单一模块同时拥有标题、正文和按钮。 此外,真正的实用程序在于您可以使用 CTA 模块链接到 两个不同的网址 取决于您如何使用它(一个用于按钮,一个用于正文/标题)。

但是,由于可以包含如此多的信息,该模块可能会变得非常大。 因此,我们将让 CTA 的内容保持简洁,编辑标题、正文和按钮文本以更轻松地适应标题的二级菜单栏。 这些编辑选项位于 号召性用语设置 在下面 内容 标签。 您可以在 文本 标题。

独立站选品工具

内容

调整号召性用语的大小和间距

确保号召性用语模块很好地适合标题是非常重要的。 于是进入 设计 模块设置选项卡并找到 间距 部分。 设置 最佳 利润 用于 CTA 模块 -3vh 底边距-10vh. 这应该将菜单栏拉到更窄的位置。

cta 边距

接下来进入 响应能力 设置并将移动的边距设置为 -9vh 在顶部和 -20vh 在底部。

移动边距

高质量外链购买

自定义 CTA 颜色

CTA 需要引人注目。 它还会如何呼吁您的任何访问者采取行动? 考虑到这一点,我们想进入 设计选项卡 对于 CTA 模块并找到 按钮 标题。 在它下面, 使能够 读取的切换 为按钮使用自定义样式.

自定义样式

我们将保持简单,并让 CTA 中的按钮与现有的按钮相匹配 文件夹 标题布局中的按钮。 放 按钮文字颜色白色(#ffffff), 按钮背景#fe5a25, 按钮边框宽度4像素, 和 按钮边框颜色白色(#ffffff).

完成自定义设计以匹配现有布局后,单击绿色保存您的工作 节省 按钮,然后单击右下角的 X 图标 在右上角返回主题生成器。

cta 节省

JasperAI 10000字免费额度试用

在主题生成器中,确保上面的绿色按钮显示 已保存所有更改. 如果它说 保存更改,您所做的更新尚未生效。

已保存所有更改

行动号召模块的最终结果

完成所有自定义后,您的网站应如下所示:

桌面

桌面预览

移动的

移动搜索结果

WordPress备份工具updrafplus

结论

将号召性用语添加到 Divi 站点的二级菜单栏中是一个非常简单的过程。 在页面顶部显示 CTA 模块可能是吸引观众的绝佳方式。 用户可能会对弹出窗口和各种模式变得不敏感,但一个好的、老式的号召性用语永远不会引起他们的注意。

您如何在您的网站上使用号召性用语? 让我们在评论中知道!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题