如何为 COVID-19 更新构建 Divi 通知框（免费下载）

网站上总是需要通知框。 它们是有用的补充，可以向用户提供重要信息，让他们可以看到。 不幸的是，不断增长的 COVID-19 流行使许多网站迫切需要让用户保持最新状态。 通知框是一个很好的方法。

今天，我们赠送了一个免费的 Divi 通知框部分布局（包含所有必要的代码/功能），供您添加到您的任何 Divi 页面或模板中。

别担心，我们还将向您展示如何从头开始构建它以及如何使用它。

让我们开始吧！

抢先看

下面是对通知框及其功能的快速浏览。

免费下载 Divi 通知框部分布局

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

下载文件

免费下载

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

下载

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。 请记住，这是一个分区布局，因此在构建器中创建新分区时，您需要将此布局添加到页面、帖子或模板。

有关如何将通知框部分布局添加到页面或模板的信息，请参阅帖子底部

让我们进入教程，好吗？

第 1 部分：向 Divi 库添加新的部分布局

对于此设计，我们首先将通知框构建为 Divi 库中的部分布局。 这样，一旦分区布局完成并保存，我们就可以方便地将分区布局从 Divi 库添加到任何 Divi 页面、帖子或模板。 我们的想法是在库中为我们需要站点通知框/部分的每个实例准备好它。

添加布局

首先，导航到 Divi > Divi 库。

单击“添加新”按钮将新布局添加到库中。

在“添加新布局”弹出窗口中，为布局命名（即“通知部分”）并选择“部分”布局类型。

然后点击提交。

第 2 部分：设计通知框部分布局

在前端构建

这将部署布局编辑器，其功能与使用 Divi Builder 的普通页面非常相似。 由于我们要可视化地构建布局，因此单击“在前端构建”。

部分背景和填充

打开部分设置，并更新背景和填充如下：

• 渐变背景左颜色：
• 渐变背景右颜色：
• 填充：0px 顶部，0px 底部

部分 CSS ID

通知框需要一些自定义 CSS/JQuery 来提供可点击功能来关闭框/部分。 将以下 CSS ID 添加到该部分，以便我们稍后可以使用代码对其进行定位。

• CSS ID：通知部分

添加行和行宽

向该部分添加一列行。

然后使用 max-width 更新行设置，如下所示：

• 最大宽度：700px

为通知文本添加文本模块

在行内，添加一个新的文本模块。 这将是我们为通知框添加文本内容的地方。

文字内容

使用通知所需的文本更新正文内容，如下所示：

<h2>COVID-19 Notice</h2>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

文字设计

在设计选项卡下，更新文本样式如下：

• 文字字体：小屋
• 文字文字大小：18px
• 文本对齐：居中
• 标题 2 文字大小：46 像素（桌面）、38 像素（平板电脑）、28 像素（手机）
• 标题 2 行高：1.3em

添加两列行

在带有文本模块的行下，添加一个新的两列 (1/2 – 1/2) 行。

行宽

使用以下最大宽度更新行：

• 最大宽度：600px

添加 CTA 按钮

此通知框的左侧将有一个“了解更多”CTA 按钮，可用于将用户重定向到包含更多信息的另一个页面。

要创建按钮，请将新按钮模块添加到第 1 列。

按钮内容

使用“了解更多”更新按钮文本并添加按钮链接 URL 以将用户重定向到另一个页面以获取更多信息。

按钮设计

更新以下设计选项：

• 按钮对齐：居中
• 为按钮使用自定义样式：是
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#f6ae55
• 按钮边框宽度：0px
• 按钮字体: Cabin
• 按钮字体粗细：粗体

为了让按钮跨越列的整个宽度，将以下自定义 CSS 添加到主元素：

display: block !important;

添加关闭按钮

在此通知框的右栏中，我们将显示“知道了！” 折叠/关闭通知框的按钮。 对于这个按钮，除了背景和文字颜色之外，我们将保留上一个按钮的大部分设计。 我们还需要给这个按钮一个 CSS ID，以便稍后用代码定位它。

将按钮复制并粘贴到右列

要快速启动按钮的设计，请复制第 1 列中的按钮并将其粘贴到第 2 列中。

内容

更新按钮文本。

• 按钮文字：明白了！

设计

然后更新按钮文字颜色和背景颜色如下：

• 按钮文字颜色：#121212
• 按钮背景颜色：rgba(255,255,255,0.4)

按钮 CSS 类

对于此按钮，添加以下 CSS 类以稍后使用折叠/关闭通知框所需的代码定位按钮。

• CSS 类：关闭通知

创建通知框关闭图标（“x”）。

添加行

为了在通知框的右上角创建关闭图标，一个新的一列行。

行设置

然后更新行宽和填充如下：

• 宽度：100%
• 最大宽度：100%
• 填充：0px 顶部，0px 底部

添加模糊模块/图标

在行内，添加一个新的模糊模块。

内容

然后删除标题和正文中的模拟内容，以使用“x”图标作为简介。

关闭图标的模糊设置

在设计选项卡下，更新以下内容：

• 图标颜色：#ffffff
• 使用图标字体大小：是
• 图标字体大小：40px
• 宽度：40px
• 高度：40px

图标位置

要将图标放置在框的右上角，请打开“高级”选项卡，然后更新以下内容：

• 位置：绝对
• 位置：右上角
• 垂直偏移：20px
• 水平偏移：20px

模糊/图标 CSS 类

现在将相同的 CSS 类添加到您为“明白了！”所做的宣传语中。 关闭按钮（两者都将用于关闭通知框）。

• CSS 类：关闭通知

添加自定义代码

对于此通知框，我们将添加自定义 CSS/Javascript 以执行以下操作：

• 单击关闭按钮或关闭图标时关闭通知框。
• 通过向上滑动通知框（及其下方的页面内容）来关闭通知框（此类框的常见趋势）。
• 在用户的浏览器中记录事件，以便在关闭后弹出窗口不会在会话期间继续显示。

为了添加功能，我们将把代码添加到代码模块中。 继续在关闭按钮模块下（或页面上的任何地方）添加一个新的代码模块。

然后将以下代码粘贴到代码模块内容区域：

<style>
  .close-notice {
    cursor: pointer;
  }
  #notice-section {
    display:none;
  }
  .et-fb-post-content #notice-section {
    display: block !important;
  }
</style>
<script>
function storageAvailable(type) {
  try {
      var storage = window[type],
          x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
  }
  catch(e) {
      return e instanceof DOMException && (
          // everything except Firefox
          e.code === 22 ||
          // Firefox
          e.code === 1014 ||
          // test name field too, because code might not be present
          // everything except Firefox
          e.name === 'QuotaExceededError' ||
          // Firefox
          e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
          // acknowledge QuotaExceededError only if there's something already stored
          storage.length !== 0;
  }
}
jQuery(document).ready(function($) {
  var storageAvailable = window.storageAvailable('sessionStorage');
  $(".close-notice").click(function() {
    $("#notice-section").slideUp();
    if (storageAvailable) {
      sessionStorage.setItem('etNoticeState','hidden'); 
    }    
  });
  if (storageAvailable) {
    if ('hidden' !== sessionStorage.getItem('etNoticeState')){
      $("#notice-section").show();
    }
  } else {
    $("#notice-section").show();
  }
});
</script>

关于守则

在样式标签中，您会注意到我们实际上是用这个来隐藏通知框/部分的……

#notice-section {display:none;} 

这样我们就可以检查以确保浏览器具有记录项目所需的存储空间。

相同的代码段还将隐藏 Divi Builder（在前端）中的部分。 为了覆盖它，我们添加了另一个片段来显示 Divi Builder 中的部分，以便您可以直观地进行编辑。

.et-fb-post-content #notice-section {display:none;} 

JS 函数“storageAvailable(type)”检查浏览器的存储情况。

jQuery 代码段完成了所有其他需要的工作……

• 单击带有“close-notice”类的按钮和图标时关闭该部分（#notice-section）。
• 如果浏览器有可用的会话存储，单击任一按钮关闭该框会在用户浏览器会话的其余部分期间隐藏该框，只要浏览器打开，该会话就会持续。

完成后，请确保保存部分布局。

将通知框（部分布局）添加到页面

要使用 Divi Builder 将通知框部分布局添加到页面，请在 Divi Builder 中打开一个页面，然后单击蓝色图标向页面添加一个新部分。

打开从库添加选项卡并从列表中选择通知框部分布局。 在本例中，我们将其命名为“通知部分”。

确保将该部分放置在页面顶部（或您可能想要的任何其他位置）并保存页面。

将通知框（部分布局）添加到 Divi 主题模板

我们还可以将通知框部分布局添加到任何页面/帖子模板、全局页眉或全局页脚。 该过程与将其添加到常规 Divi 页面相同。

要将其添加到模板，请打开 Divi Theme Builder。

然后单击 编辑要添加通知框部分布局的模板区域。

在模板布局编辑器中，单击以添加新部分并从 Divi 库中选择已保存的部分布局。

保存模板布局。

就是这样！

最后结果

这是实时页面上通知框的最终结果。

最后的想法

我希望这个 Divi 通知框能派上用场。 像这样的东西真的有很多美妙的用途。 尽管世界仍在应对 COVID-19，但我们期待在不久的将来收到许多积极的通知。

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

干杯!