WordPress divi主题

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

by | May 8, 2022 | Divi主题使用教程 | 0 comments

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

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

google广告开户

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

让我们开始吧!

免费下载 Sticky Sidebar CTA 模板

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

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

让我们来看看教程好吗?

你需要什么开始

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

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

之后,您就可以出发了。

抢先看

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

WordPress divi主题

粘性侧边栏 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 提供两个部分。

粘性边栏

改变列结构后,将帖子内容模块拖到中心列。

更新行设置

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

fiverr建站WordPress程序员
  • 使用自定义装订线宽度:是
  • 天沟宽度:2
  • 宽度:100%(台式机)、90%(平板电脑)
  • 最大宽度:1500px

粘性边栏

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

更新列 1 设置

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

粘性侧边栏 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 类:

JasperAI 10000字免费额度试用

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

桌面

margin-top: 50%

药片

margin-top: 0%

divi 帖子模板

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

WordPress备份工具updrafplus

利润

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

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

divi 帖子模板

然后将以下 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 的高度更大/更小,则需要向上或向下调整 130 像素。

保存设置

完成后,保存模板布局。

divi 帖子模板

然后保存主题生成器设置

粘性边栏

最后结果

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

粘性侧边栏 CTA

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

粘性侧边栏 CTA

它在移动显示器上。

divi博客文章模板

最后的想法

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

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

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

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

干杯!

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