创建一个酒吧 提升 Divi 中的页面模板动画可以成为宣传时尚产品和优惠的好方法，而无需依赖插件。 使用Divi强大的设计功能，您可以直观地创建 提升 当您在 Divi Theme Builder 中编辑模板时。 然后，一旦模型准备好， 提升 将出现在分配给该模板的任何页面上。 

我们还将向您展示如何使促销栏固定（或发粘）。

你需要什么才能开始

首先，您必须 安装并激活Divi主题 。 确保您具有最新版本的Divi。

您还需要至少一个用Divi Builder创建的页面用于测试，这将受到促销栏模板的影响。

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

创建一个新模板

从WordPress仪表板，转到Divi>主题生成器。 然后单击“添加新模板”框以创建新模板。

将模板分配到应该在其中显示促销栏的页面。

在新模板上，单击“添加自定义主体”框，然后选择“构建自定义主体”。

注意：我们将升级栏添加到模型主体区域（而不是标题），以便它可以与Divi默认标题以及所有标题一起使用您以后可以添加的自定义。

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

在模型中添加促销栏

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

首先在常规部分添加一个单列行。

线路设置

添加模块之前，请按以下方式更新Row参数：

• 左背景渐变：＃4a42ec
• 右侧背景渐变：＃521d91
• 渐变方向：90deg
• 使用自定义装订线宽度：是
• 装订线宽度：1
• 宽度：100％
• 最大宽度：100％
• 室内装潢：顶部是0px，底部是0px

这支持我们创建的促销栏的背景颜色和宽度。

列参数

退出行设置之前，单击以打开列设置。 然后将以下定制CSS添加到main列元素中：

display: flex;align-items: center;justify-content: center;

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

我们现在准备添加 内容 到促销栏。

添加Blurb模块

对于此促销示例的内容，我们将包括一个带有小图标的演示模块和一个右侧带有按钮的文本博客（非常类似于Elegantthemes.com上的促销栏）。

单击灰色圆圈以及该行内的图标，然后添加一个演示模块。

对于演示文本的内容，输入以下信息：

• 标题：[输入促销文字]
• 使用图标：是
• 图标：礼物图标（请参见屏幕截图）

更新演示文稿设计设置，如下所示：

• 图标颜色：＃ff4a9e
• 图片/图标位置：左
• 使用图标字体大小：是
• 图标字体大小：16px
• 文字标题大小：16px（桌面），14px（电话）
• Hewight标题行：1.3em
• 最大宽度：230px（仅电话）
• 填充：顶部10px
• 动画样式：幻灯片
• 动画方向：向右
• 动画延迟：250ms

添加按钮模块

然后在Blurb模块下添加一个按钮模块。 由于flex属性，该模块将显示在Blurb的右侧而不是下方。

更新按钮设计参数，如下所示：

• 对按钮使用自定义样式：是
• 按钮文字大小：15px（桌面），13px（电话）
• 按钮文字颜色：#ffffff
• 按钮边框的宽度：0px
• 按钮边框的半径：20px
• 字体粗细：半粗体

• 保证金（桌面）：左侧为20px
• 保证金（电话）：左侧为10px
• 室内装饰（办公室）：顶部0px，底部0px
• 填充（电话）：顶部2px，底部2px，左侧8px，右侧8px
• 动画风格：弹跳
• 动画延迟：1000ms

栏目设置

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

• 室内装潢：顶部是0px，底部是0px
• 动画风格：弹跳
• 动画方向：下
• 动画时间：500ms
• 动画延迟：250ms
• 动画的起始不透明度：100％
• Z-Index：999

添加全角内容发布模块

至此，促销栏已准备就绪。 但是，由于这是模板，因此我们需要确保添加内容发布模块以使用此模板显示页面的内容。

对于使用Divi Builder构建（或将要构建）的页面，您将需要使用全角帖子内容模块来最大化内容区域。

（注意：对于使用默认编辑器的页面，您将希望在常规部分中使用标准的帖子内容mod，以便默认情况下实现类似的最大1080px宽度。）

添加全宽部分

在包含促销栏的部分下，添加一个全角部分。

以全角格式添加内容模块

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

或多或少。 现在确定并保存布局，然后退出编辑器。

然后为主题构建器保存更改。

最终结果

先锋

现在是在页面上分配促销栏之前的页面。

APRES

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

使促销栏变粘

为了使促销栏适合Divi的默认标题，我们可以向包含促销栏的部分添加一个简单的CSS代码段。

position: fixed;width: 100%;

打开部分设置，然后将以下CSS代码添加到主桌面元素：

然后将以下CSS代码添加到平板电脑的主要元素：

position: relative;

现在检查结果。

对于以前的转换，还可以在“行设置”链接选项下，将链接URL添加到整个行。

最后的想法

在本教程中，我们向您展示了如何使用 Divi Theme Builder（从头开始）设计促销栏。 促销栏配有多种动画和设计，使其真正可见 游客. 您甚至可以在向下滚动页面时修复促销栏以获得更多可见性。 并且由于能够控制促销栏在您网站上的位置，该应用程序非常方便。