如何在新选项卡/窗口中打开 Divi 全角标题和滑块按钮

已发表: 2017-06-06

我们都知道，建立一个吸引特定受众并与之交谈的网站是一个过程。他们在您的网站上采取的每一项操作都很重要，因为这是他们客户旅程的一部分。每位访客和潜在客户都需要感到亲近和理解。

使您的网站准确无误需要很多东西，例如良好的设计、深思熟虑的内容和足够多的 CTA，可以促使您的访问者采取您和他们想要的行动。

在网站上支持号召性用语的最常用元素之一是按钮。您通常可以在网站的各个部分找到按钮。他们可能会导致该网站的不同部分或可以参考一个访问者的外部网站。

使用 Divi，我们允许创建网站的每个人在他们想要的任何位置以及他们想要的位置包含他们的按钮。如果您想快速与目标受众互动，并且想从他们访问您网站的一开始就激发他们的好奇心，那么在您的英雄部分添加 CTA 是一件好事。

为什么要在新标签页/窗口中自动打开链接？

我们无法影响在新窗口中打开链接。这是过去很多人滥用的东西，现在，这完全取决于用户的偏好。但是，我们确实可以选择在新选项卡中而不是在同一窗口中打开某个链接。您想在新标签页中打开链接的原因有很多，以下是其中一些：

不要让您的访问者离开网站

一旦您失去访问者，就很难让他们重新回到您的网站上。当您单击按钮将它们发送到同一窗口内的外部网站时，通常就是这种情况。

那么，一开始为什么要把他们送走呢？通过在新选项卡中打开按钮，您可以确保他们的选项卡中仍然有一个页面打开，其中包含您的网站。他们可以返回到您的页面，而无需查看他们的历史记录。

在关闭他们打开的链接后继续留在您的网站上

每当您阅读完内容时，关闭标签是很自然的事情。要么就是这样，要么你点击了。在这两种情况下，从他们开始下一步行动的那一刻起，他们就离你又差了一步。

在新标签页或窗口中自动打开链接有助于提醒人们他们最初是如何到达其他地方的；通过您的网站。

稍后选择打开的选项卡

您不会是第一个将一堆标签并排排列数天的人。这正是让您的内容出现在人们的浏览器中很有价值的原因。如果访问者在几天后在他们打开的标签中找到您的网站，他们可能有时间让您的内容沉入其中并再进行一轮。

很可能在第二次、第三次或第四次阅读时，内容会更容易被理解。

入门：在新选项卡中打开全角标题和滑块按钮

当我们不使用带有全角标题或全角滑块的全角部分时，我们通常会添加一个标准部分并手动向其添加按钮模块。在每个按钮模块的内容选项卡中，您可以选择是要在同一窗口中打开链接还是在新选项卡中打开链接。您可以在“内容”选项卡的“链接”子类别中找到此选项。

在全角标题和滑块中，不包括这些可能性。而且因为 HTML 是预定义的，我们不能简单地修改随之而来的 HTML 代码。这就是为什么我们要添加 jQuery 代码，使 Fullwidth Header 和 Fullwidth Slider 按钮在新选项卡/窗口中打开。

创建全角标题

让我们从向现有页面或新页面添加新的全角部分开始。

在该全角部分中，选择全角标题。 Fullwidth Header 为网站提供了一个漂亮的标题，其中包含它需要的一切。现在，向下滚动 Fullwidth 标题的 Content 选项卡并写下您希望在按钮上显示的文本。之后，还要添加指向该按钮的链接。

然后，转到全角标题的高级选项卡并向下滚动，直到遇到按钮字段。在这种情况下，我们只想使用第一个按钮。假设您想在新选项卡中打开第二个按钮，您必须使用分配给第二个按钮的类。

单击 Button One 字段并观察类以橙色字体颜色显示。该类是“.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button”。我们将在我们的 jQuery 代码中需要这个类。如果您希望在新选项卡或窗口中打开第二个按钮，请继续将该类保存在某处。

创建全角滑块

如果您想添加一个全角滑块，请继续添加一个新的全角部分。这一次，在该部分放置一个全角滑块。记下“内容”选项卡中的按钮文本，然后转到“高级”选项卡。

向下滚动该选项卡，直到找到“滑动按钮”选项。复制属于全角滑块的按钮的指定类。

将 jQuery 代码添加到 Divi 主题选项

我们将用于帮助在全角标题和滑块的新选项卡中打开链接的代码是不同的。除此之外，我们还可以通过两种不同的方式将 jQuery 代码集成到我们的网站中。最常见的一种是向 Divi 网站的主题选项添加代码。

人们最常使用此选项的原因是因为它适用于整个网站。在您网站的任何页面上，代码都将适用。如果您在网站的不同页面中重复使用某些部分或元素，这是向网站添加自定义代码的最简单方法。

要将代码添加到您的整个网站，请转到Divi > Theme Options > Integration 并将以下代码添加到您网站的 <head> ：

全角标题按钮的 jQuery 代码

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

全宽滑块按钮的 jQuery 代码

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

不要忘记在 <script> 标签之间添加文本，如上面的打印屏幕所示。

如您所见，全宽标题和全宽滑块的代码略有不同。您可以在代码的第三行注意到每个按钮的类是如何写在括号之间的。因此，假设您想让代码应用于全角标题的第二个按钮，只需将写入的类替换为分配给第二个按钮的类。

之后，保存更改。该代码将立即应用于您的整个网站。

将 jQuery 代码添加到代码模块

将代码添加到您的网站的另一种可能性是使用代码模块。当您要包含的代码仅适用于一页时，通常会使用此模块。

打开要应用更改的页面，然后在页面顶部添加一行，其中包含一列。之后，将代码模块添加到该行。

复制相同的代码并将其粘贴到内容选项卡的文本子类别中的内容框中。

全角标题按钮的 jQuery 代码

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

全宽滑块按钮的 jQuery 代码

<script>
jQuery(function($){
$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');
});
</script>

保存更改。

不要忘记在 <script> 标签之间添加文本，如上面的打印屏幕所示。该代码现在仅适用于该网站的该页面。

最后的想法

仅当您希望在全角部分中使用全角标题和滑块时在新选项卡中打开按钮时，才需要在您的网站上添加以下代码。使用按钮模块，您可以在 Divi Builder 中包含一个选项，您可以选择在新选项卡中打开链接。

如果您想在网站的多个页面中使用该代码，请将其添加到您网站的主题选项中。但是，如果您只使用一个全宽标题或全宽滑块的代码，则最好将代码添加到该特定页面的代码模块中。

您多久在新标签页中打开链接，为什么？ 在下面的评论部分让我们知道！