Divi 的内置条件选项允许我们根据页面访问条件显示内容。 这允许您仅在用户显示任何 Divi 元素 访问过特定页面 在您的网站上。 换句话说，在用户访问页面之前，内容将保持隐藏状态。 此功能非常适合在访问目标网页后使用公告栏重新定位访问者。 因为已经证明访问者很感兴趣（他们回到了登录页面），我们可以通过显示公告（折扣、限时优惠、促销等）来利用这一点来引导他们朝着正确的方向前进。
在本教程中，我们将向您展示如何利用 Divi 的内置条件选项在 Divi 中使用公告栏重新定位登录页面访问。 只需点击几下。
让我们开始吧！
抢先看
下面是我们将在本教程中构建的设计的快速浏览。
该公告栏将在用户访问该页面后显示。
免费下载布局
要掌握本教程的布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
要将部分布局导入 Divi 库，请导航到 Divi 库。
单击导入按钮。
在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。
然后单击导入按钮。
完成后，部分布局将在 Divi Builder 中可用。
关键概念
如何仅在访问者访问特定页面时显示部分
如前所述，Divi 的内置条件选项包括一个页面访问条件，该条件允许您仅在用户 访问过特定页面 在您的网站上。 换句话说，在用户访问页面之前，内容将保持隐藏状态。
或者，您可以选择仅当用户显示 Divi 元素 尚未访问特定页面. 换句话说，在用户访问页面之前，内容将对用户保持隐藏。
在本教程中，我们将使用 Divi 的条件选项，仅当用户访问了登录页面时才显示公告栏。 可以使用 Divi Builder 轻松构建公告栏，以包含您想要的任何类型的内容或设计。 构建后，您可以通过执行以下简单步骤将页面访问条件添加到公告栏（在本例中为 Divi 部分）：
- 打开用于创建公告栏的部分的部分设置。
- 在高级选项卡下，单击显示条件下的加号图标以向该部分添加新条件。
- 从条件下拉列表中，从列表中选择页面访问条件。
- 在页面访问条件设置弹出窗口中，选择仅当用户显示 访问过特定页面.
- 从您网站的页面列表中选择特定页面（在本例中为登录页面）。
就是这样！ 完成后，通知栏（或部分）将不会出现在用户之前，直到他们之前第一次访问着陆页。
现在您已经掌握了关键概念，让我们进入教程，好吗？
你需要什么开始
要开始，您需要执行以下操作：
- 如果您还没有，请安装并激活 Divi 主题。
- 在 WordPress 中创建一个新页面，并使用 Divi Builder 在前端（可视化构建器）编辑页面。
- 选择“从头开始构建”选项。
之后，您将有一个空白画布开始在 Divi 中进行设计。
如何使用 Divi 中的公告栏重新定位目标网页访问
第 1 部分：加载电子商店登陆页面布局
在我们重新定位登陆页面之前，我们需要先构建一个。
为了加快这个过程，我们将使用 Divi 的 Electronics Store Layout Pack 中的 Electronics Store Landing Page Layout，它可从 Divi Builder 中获得。
要将布局加载到页面，请单击设置菜单中的从库添加按钮（加号图标）。 在预制布局选项卡下，选择电子商店登陆页面布局，然后单击使用此布局按钮。
当然，您可以使用网站上现有的登录页面，或者选择自己构建一个。 但就目前而言，这将起作用。
第 2 部分：创建具有页面访问条件的部分
为了构建公告栏，我们将使用 Divi 部分。 继续并在布局的现有顶部部分下添加一个新的常规部分。
添加后，将该部分拖到页面布局的顶部，然后将四分之三 0ne-fourth 行添加到该部分。
打开部分设置并将以下背景颜色添加到部分：
- 背景颜色：#5e10da
在设计选项卡下，更新间距并为该部分添加动画效果，如下所示：
- 内边距：0px 顶部，0px 底部
- 动画风格：幻灯片
- 动画方向：下
- 动画开始不透明度：100%
这将缩短公告栏的高度，并在页面加载时为其提供醒目的动画效果。
在高级选项卡下，通过执行以下操作添加新的显示条件：
- 单击显示条件下的加号图标以向该部分添加新条件。
- 从条件下拉列表中，从列表中选择页面访问条件。
- 在页面访问条件设置弹出窗口中，选择仅当用户显示 访问过特定页面.
- 从您网站的页面列表中选择特定页面（在本例中为登录页面）。
- 保存设置。
现在，您将拥有该部分的新页面访问显示条件。
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
注意：如果您使用的是缓存插件，则应将此页面从缓存中排除，以使显示条件正常运行。
第 3 部分：创建公告栏内容
此时，我们的公告栏的部分和行已经到位。 我们的部分有页面视图显示条件处于活动状态。 所以，我们在 section 中添加的任何内容都将继承其父容器（section）的显示条件。 我们现在需要做的就是用内容填充该部分以完成公告栏的创建。
第一条内容将是公告栏文本。 要添加文本，请将文本模块复制到布局的现有标题部分中行的右列中的相机图像下方。 然后将文本模块粘贴到公告栏部分行的左列中。
添加新文本模块后，打开文本设置并更新以下内容：
- 标题 3 文本对齐（平板电脑和手机）：居中
- 标题 3 文字大小（电话）：12px
- 内边距：5px 顶部
在公告栏的右栏中，我们将添加一个按钮。 为此，请在布局的现有标题部分的行右列中复制倒数计时器上方的现有按钮模块。
然后将按钮模块粘贴到公告栏部分的行的右列中。
添加后，打开按钮模块的设置并更新以下内容：
- 按钮对齐（平板电脑和手机）：居中
- 填充（平板电脑和手机）：5px 顶部，5px 底部
第 4 部分：调整行设置
要对公告栏的设计进行最后润色，请打开该行的设置并更新大小选项，如下所示：
- 天沟宽度：1
- 宽度：95%
- 最大宽度：980px
- 内边距：顶部 20 像素，底部 15 像素
最后结果
就是这样！ 要在实时页面上查看结果，请记住，在您访问登录页面（或您为页面查看条件选择的任何页面）之前，您不会看到公告栏。
这是公告栏出现后的样子。
这是页面加载时公告栏的动画。
最后的想法
本教程中突出显示的页面视图显示条件只是 Divi 中可用的众多条件选项之一。 随意将页面查看条件与对公告栏有意义的其他条件结合起来。 例如，您还可以包含产品购买条件，以仅向尚未购买的访问者提供首次购买折扣。 此外，您还可以尝试显示除公告栏以外的其他内容。 玩得开心！
我期待在评论中收到您的来信。
干杯!
