WordPress divi主题

如何在 Divi 中为您的页面模板创建动画促销栏

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

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

在 Divi 中为您的页面模板创建动画促销栏可能是一种无需依赖插件即可以时尚方式宣传产品和交易的好方法。 使用 Divi 强大的设计功能,您可以在 Divi 的 Theme Builder 中编辑模板时直观地构建促销栏。 然后,一旦模板准备好,促销栏将在已分配给该模板的任何页面上弹出。 简单的!

google广告开户

让我们开始吧!

抢先看

这是我们将在本教程中创建的促销栏的快速浏览。

我们还将向您展示如何使促销栏固定(或粘滞)。

免费下载促销栏页面模板

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

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

让我们来看看教程好吗?

WordPress divi主题

订阅我们的 Youtube 频道

你需要什么开始

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

您还需要至少一个使用 Divi Builder 创建的页面用于测试目的,以便将促销栏模板分配给该页面以显示结果。

之后,您就可以出发了。

在页面模板顶部创建动画促销栏

创建新模板

从 WordPress 仪表板,导航到 Divi > Theme Builder。 然后单击“添加新模板”框以创建新模板。

将模板分配给您希望显示促销栏的页面。

在新模板上,单击“添加自定义正文”区域,然后选择“构建自定义正文”。

注意:我们将促销栏添加到模板的正文区域(不是标题),以便它可以与 Divi 的默认标题以及您将来可能添加的任何自定义标题一起使用。

fiverr建站WordPress程序员

然后选择“从头开始构建”选项。

将促销栏添加到模板

在模板布局编辑器中,我们可以开始使用 Divi Builder 构建促销栏。

首先向常规部分添加一列行。

独立站选品工具

行设置

在添加模块之前,更新行设置如下:

  • 背景渐变左颜色:#4a42ec
  • 背景渐变正确颜色:#521d91
  • 渐变方向:90度
  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%
  • 内边距:0px 顶部,0px 底部

这负责我们正在创建的促销栏的背景颜色和宽度。

列设置

在离开行设置之前,点击打开列的设置。 然后将以下自定义 CSS 添加到列主元素:

高质量外链购买
display: flex;
align-items: center;
justify-content: center;

此 CSS 使用 flex 属性将列中的内容(或模块)对齐以水平堆叠(并排)。 它还将模块在垂直和水平方向居中。 我们这样做的原因是为了避免使用多列行结构,这些结构将在移动设备上相互堆叠。 使用此设置,内容将在所有浏览器宽度上保持水平对齐。

现在我们准备向促销栏添加一些内容。

添加模糊模块

对于这个示例促销的内容,我们将包含一个带有小图标的简介模块和一个右侧带有按钮的文本博客(很像 Elegantthemes.com 上的促销栏)。

单击行内的灰色圆圈加号图标并添加一个简介模块。

JasperAI 10000字免费额度试用

对于简介的内容,请输入以下内容:

  • 标题: [enter the promo text]
  • 使用图标:是
  • 图标:礼物图标(见截图)

更新简介设计设置如下:

  • 图标颜色:#ff4a9e
  • 图像/图标位置:左
  • 使用图标字体大小:是
  • 图标字体大小:16px
  • 标题文字大小:16px(桌面),14px(手机)
  • 标题行高度:1.3em
  • 最大宽度:230 像素(仅限手机)
  • 内边距:10px 顶部
  • 动画风格:幻灯片
  • 动画方向:右
  • 动画延迟:250ms

WordPress备份工具updrafplus

添加按钮模块

接下来在 blurb 模块下添加一个按钮模块。 由于 flex 属性,模块将出现在简介的右侧而不是其下方。

更新按钮设计设置如下:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:15px(桌面),13px(手机)
  • 按钮文字颜色:#ffffff
  • 按钮边框宽度:0px
  • 按钮边框半径:20px
  • 按钮字体粗细:半粗体

  • 边距(桌面):20px
  • 边距(电话):还剩 10 像素
  • 填充(桌面):0px 顶部,0px 底部
  • 内边距(手机):顶部 2px,底部 2px,左侧 8px,右侧 8px
  • 动画风格:弹跳
  • 动画延迟:1000ms

部分设置

要完成促销栏设计,请更新包含促销栏的部分,如下所示:

  • 内边距:0px 顶部,0px 底部
  • 动画风格:弹跳
  • 动画方向:下
  • 动画时长:500ms
  • 动画延迟:250ms
  • 动画开始不透明度:100%
  • Z指数:999

添加全角帖子内容模块

此时,促销栏已准备就绪。 但是由于这是一个模板,我们需要确保并添加帖子内容模块以使用此模板显示页面的内容。

对于使用 Divi Builder 构建(或将要)构建的页面,您将需要使用全角帖子内容模块以最大化内容区域。

(注意:对于使用默认编辑器的页面,您需要在常规部分中使用常规帖子内容模块,以便默认情况下具有类似的最大宽度 1080 像素。)

添加全角部分

在包含促销栏的部分下,添加全角部分。

添加全角帖子内容模块

然后选择全角帖子内容模块。

差不多就行了。 现在确保在退出编辑器之前保存布局。

然后也保存主题生成器的更改。

最后结果

现在这里是使用促销栏分配模板之前的页面。

这是带有促销栏的新模板的同一页面。

这里是移动端。

这是页面加载时的促销栏动画。

使促销栏具有粘性

为了使促销栏贴在默认的 Divi 标题下,我们可以在包含促销栏的部分添加一个简单的 CSS 片段。

打开部分设置并将以下 CSS 添加到桌面上的主元素:

position: fixed;
width: 100%;

然后将以下 CSS 添加到平板电脑的主元素中:

position: relative;

现在查看结果。

不要忘记链接

建立促销栏后,您需要将链接 URL 添加到促销优惠或页面。 您可以在按钮设置内容选项卡中添加按钮链接 URL。

即使是转换,您也可以在行设置链接选项下将链接网址添加到整行。

最后的想法

在本教程中,我们向您展示了如何使用 Divi Theme Builder 设计促销栏(从头开始)。 促销栏配有多种动画和设计,使其真正吸引游客。 您甚至可以在向下滚动页面时固定促销栏以获得更多可见性。 并且能够控制促销栏在整个站点中的显示位置,该应用程序非常实用。

希望这会激发您创建自己的一些促销栏。

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

干杯!

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