• 主页
  • 文章
  • 主题
  • 如何将粘性侧边栏 CTA 添加到 Divi 中的博客帖子模板

如何将粘性侧边栏 CTA 添加到 Divi 中的博客帖子模板

已发表: 2019-11-27

粘性侧边栏 CTA 在吸引访问者的注意力方面非常有效，而且不会霸道或分散注意力。 诀窍是在侧边栏中包含一个或两个元素，当用户向下滚动页面时，这些元素“粘住”或固定在帖子内容的一侧。 这是传统侧边栏布局的一种令人耳目一新的替代方案，因为它提供了现代全宽（无侧边栏）布局的感觉，并在必要时在页面一侧展示重要的 CTA。

在本教程中，我们将向您展示如何使用 Divi Theme Builder 将粘性侧边栏 CTA 添加到博客文章模板。 这种布局的应用是深远的。 它几乎适用于任何页面或帖子模板。 另外，您不必局限于 CTA； 您可以选择添加您喜欢的任何 Divi 模块。

让我们开始吧！

免费下载粘性侧边栏 CTA 模板

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

下载文件
免费下载

免费下载

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

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

要将布局导入您的页面，只需提取 zip 文件并使用 Theme Builder Portability 选项将 json 文件之一添加到 Divi Theme Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要安装并激活 Divi 主题。 确保您拥有最新版本的 Divi。

您还需要至少一篇使用 Divi Builder 创建的帖子用于测试目的，以显示预期结果。

之后，您就可以开始了。

抢先看

以下是已添加到 Divi 中的博客文章模板的粘性侧边栏 CTA 的快速浏览。

粘性侧边栏 CTA

如何在 Divi 中将粘性侧边栏 CTA 添加到您的博客帖子模板

添加主题生成器模板

第一步包括将我们的预制模板导入到我们的网站。 我们将使用 Divi Theme Builder Pack #1 中的帖子模板。

首先，导航到 Divi > Theme Builder。 单击页面右上角的便携性图标。 在可移植性模式中，选择导入选项卡并从文件夹中选择 divi-theme-builder-pack-1-post-template.json 文件。 如果您的站点上当前安装了任何模板，请确保取消选中任何可能覆盖您当前模板的选项。 然后点击导入按钮。

粘性边栏

构建博客帖子模板

导入模板后，我们准备开始将新的粘性侧边栏 CTA 添加到模板布局中。 为此，请单击自定义正文区域的编辑图标。

粘性侧边栏 CTA

添加双侧边栏布局以容纳侧边栏 CTA

在模板布局编辑器中，找到包含帖子内容模块的行，并将列布局更改为五分之一五分之三五分之一（1/5 3/5 1/5）列结构。 这将允许我们保留帖子内容的居中列，同时在两侧为我们的粘性侧边栏 CTA 提供两个部分。

粘性边栏

更改栏目结构后，将帖子内容模块拖到中心栏目。

更新行设置

打开行设置并更新以下设计选项：

  • 使用自定义装订线宽度：是
  • 天沟宽度：2
  • 宽度：100%（桌面），90%（平板电脑）
  • 最大宽度：1500px

粘性边栏

这将为我们提供双侧边栏设置所需的空间。

更新第 1 列设置

接下来，打开第 1 列的设置并为该列指定一个自定义 CSS 类：

  • CSS 类：sticky-cta

粘性侧边栏 CTA

向左列添加侧边栏 CTA

现在我们已准备好迎接第一次行动呼吁。 将号召性用语模块添加到最左侧的列。

粘性边栏

设计侧边栏 CTA

更新设置如下：

内容
  • 按钮：“点击这里”
  • 正文：“您的内容在这里。 内联或在模块内容设置中编辑或删除此文本。”
  • 按钮链接网址：#

粘性边栏

正文设计
  • 正文字体：蒙特塞拉特
  • 正文字体粗细：半粗体
  • 正文对齐：右
  • 正文颜色：#444444
  • 正文大小：22px（桌面），18px（平板）
  • 车身线高：1.3em

粘性侧边栏 CTA

按钮
  • 按钮文字大小：14px
  • 按钮文字颜色：#ffffff
  • 按钮背景颜色：#6148df
  • 按钮边框宽度：0px
  • 按钮边框半径：80px
  • 按钮字体粗细：粗体
  • 按钮字体样式：TT
  • 按钮填充：顶部 12 像素，底部 12 像素，左侧 22 像素，右侧 22 像素

粘性边栏

宽度、对齐方式、填充和边框
  • 宽度：100%
  • 最大宽度：320px
  • 模块对齐：右
  • 填充：左 10 像素，右 10 像素
  • 顶部边框宽度：10px
  • 顶部边框颜色：#eeeeee
  • 底部边框宽度：10px
  • 底部边框颜色：#eeeeee

粘性侧边栏 CTA

将侧边栏 CTA 添加到右列

要为右侧的列创建 CTA，请复制我们刚刚创建的 CTA 并将其粘贴到最右侧的列中。 然后按如下方式更新副本的设置：

  • 正文对齐方式：左
  • 模块对齐方式：左

正确的 CTA

更新第 3 列设置

对于右栏中的此 CTA，我们将向该列添加一些上边距，以便在页面下方的某个点建立侧边栏 CTA 的起始位置。

首先，打开第 3 列的设置并添加我们添加到第 1 列的相同 CSS 类：

  • CSS 类：sticky-cta

然后将以下自定义 CSS 添加到主元素：

桌面

margin-top: 50%

药片

margin-top: 0%

div 帖子模板

这将为我们提供右列上的粘性 CTA 的不同起点，它等于行宽的 50%。 您可以根据自己的博客文章的需要随意调整此值。

利润

使用代码模块将自定义 CSS 添加到模板

为了获得侧边栏 CTA 的“粘性”定位，我们需要添加一些自定义 CSS。 为此，请在帖子内容模块（或页面上的任何位置）下创建一个新的代码模块。

div 帖子模板

然后将以下 CSS 粘贴到代码框中： 

<style> 
@media only screen and (min-width: 980px) {
  #page-container { 
    overflow-y:visible !important; } 
  .sticky-cta {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(50vh - 130px) !important;
  }
  }
</style>

粘性边栏

此代码中的顶部偏移量是在滚动时将 CTA 垂直居中放置在页面上的计算。 50vh 基本上是浏览器窗口高度的一半，130px 大约是 CTA 高度的一半。 如果您的 CTA 具有更大/更小的高度，则需要向上或向下调整 130px。

保存设置

完成后，保存模板布局。

div 帖子模板

然后保存主题构建器设置

粘性边栏

最后结果

要查看最终结果，请访问使用该模板的博客文章。

粘性侧边栏 CTA

这就是粘性侧边栏 CTA 将如何粘在滚动条上的方式。 您可以看到这对于较长的帖子内容如何最有效。

粘性侧边栏 CTA

这是在移动显示器上。

divi 博客帖子模板

最后的想法

这些粘性侧边栏 CTA 是传统侧边栏的令人耳目一新的替代品。 它们非常适合极简设计，因为它们不那么具有侵入性，并且不会给帖子带来杂乱的感觉。 此外，您可以将 CTA 放置在页面下方更远的位置，使其逐渐出现并固定在滚动条上，使其对访问者更加突出。 不要忘记。 您可以用任何 Divi 模块或模块组合替换 CTA，以创建几乎任何您想要的东西。 您也可以选择只在一侧保留一个 CTA。 它似乎有很多应用程序。

我希望这将有助于改进您在帖子模板上显示 CTA 的方式。

如需更多灵感，请查看我们关于粘性元素的类似帖子。

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

干杯!