WordPress divi主题

如何在您的 Divi 站点中实现暗模式切换

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

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

暗模式作为一种方便的选择,让用户在减轻眼睛疲劳的情况下体验网络,越来越受欢迎。 让我们面对现实吧,我们都倾向于花更多的时间看屏幕而不是我们应该花的时间,所以对用户体验的任何额外舒适(如黑暗模式)都可以起到很长的作用。 操作系统、程序和浏览器通常包含内置的暗模式功能,但一些开发人员通过为其网站提供自定义暗模式体验,将其提升到另一个层次。 这个想法是更好地控制他们的网站在黑暗模式下的外观,而不必在品牌和/或设计上妥协。

google广告开户

在本教程中,我们将向您展示如何在没有插件的情况下从头开始在 Divi 中创建自定义暗模式切换。 借助此暗模式切换功能,您将可以控制暗模式设计,并为您的品牌量身定制更好的用户体验。

让我们开始吧!

抢先看

下面是我们将在本教程中构建的设计的快速浏览。

这是我们将构建的自定义暗模式切换。

在divi中切换暗模式

这是应用于我们预制布局之一的黑暗模式的前后。

在divi中切换暗模式

这是添加到全局标题的暗模式切换。 请注意在您浏览网站时如何保持亮/暗模式。

免费下载布局

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

WordPress divi主题

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

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

然后单击导入按钮。

迪维通知框

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

fiverr建站WordPress程序员

第 1 部分:构建暗模式切换

在本教程的第一部分,我们将在 Divi 中构建一个带有页面的暗模式切换。 使用代码创建切换后,您将能够将其保存到 Divi 库并将其添加到您网站上的任何位置。

首先,在从头开始在前端使用 Divi 构建时,将单列行添加到默认部分。

在divi中切换暗模式

添加模糊

为了构建自定义切换,我们将设计一个带有一点自定义 CSS 的简介模块。

将新的简介模块添加到该行。

独立站选品工具

在divi中切换暗模式

内容

取出标题和正文的默认模拟内容。 然后添加方形图标代替图像。

在divi中切换暗模式

设计

跳转到设计设置并更新以下内容:

  • 图标颜色:#666666
  • 图像/图标对齐:左
  • 图标字体大小:22px

在divi中切换暗模式

高质量外链购买
  • 宽度:50 像素
  • 模块对齐:中心
  • 高度:25 像素

在divi中切换暗模式

  • 边距:0px 底部
  • 圆角:4px
  • 边框宽度:2px
  • 边框颜色:#666666

在divi中切换暗模式

自定义 CSS

设计到位后,跳转到高级选项卡。 在自定义 CSS 下,将以下自定义 CSS 添加到主元素,以确保溢出不会隐藏在圆角样式中。

overflow: visible !important;

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

content: "light";
position: absolute;
left: -35px;
top:0px;

这会为简介模块添加一个标签,我们将在点击时将其从“浅色”更改为“深色”。

JasperAI 10000字免费额度试用

在divi中切换暗模式

正文文字设计

由于 after 伪元素中的文本继承了正文文本样式,我们可以使用 Divi 选项添加正文文本样式,如下所示:

  • 正文字体:Roboto
  • 正文颜色:#666666
  • 正文大小:13px
  • 正文字母间距:1px

在divi中切换暗模式

使用代码模块添加自定义代码

要添加必要的代码 (CSS/JQuery) 以使暗模式切换发挥其魔力,我们将使用代码模块。

在同一列中的简介模块下创建一个新的代码模块。

WordPress备份工具updrafplus

在divi中切换暗模式

然后在代码框中粘贴以下代码:


<style>
/**
 * Dark Mode Toggle Styles
 */
.et-dark-mode {
  transition: all .5s;
  }
.et-dark-toggle {
  cursor: pointer;
  transition: all .5s;
  }
body.et-dark-mode .et-dark-toggle {
  border-color: #666666;
  }
body.et-dark-mode .et-dark-toggle:after {
  content:"dark";
  color: #666666;
  left: 54px;
  }
body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {
  text-align:right;
  }
body.et-dark-mode .et-dark-toggle .et-pb-icon {
  color: #666666;
  }
/**
 * Body Dark Mode Style
 */
body.et-dark-mode {
  background-color: #23282d !important;
  }
/**
 * Divi Element Dark Mode Styles
 *
 * Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".
 */
/* Section with dark mode */
.et_pb_section.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  background-blend-mode: overlay;
  transition: opacity .5s ease-in-out;
  color: #dddddd !important;
  }
 /* Row with dark mode */
.et_pb_row.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
}
/* Column with dark mode */
.et_pb_column.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
  }
/* Module with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode {
  background-color: transparent !important;
  color: #dddddd !important;
  }
/* Text Headings with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,
.et_pb_module.et-dark-mode-capable.et-dark-mode h1,
.et_pb_module.et-dark-mode-capable.et-dark-mode h2,
.et_pb_module.et-dark-mode-capable.et-dark-mode h3,
.et_pb_module.et-dark-mode-capable.et-dark-mode h4,
.et_pb_module.et-dark-mode-capable.et-dark-mode h5,
.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {
color: #dddddd !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');
      $(".et-dark-toggle").click(function() {
          $(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
          if ( storageAvailable ) {
              $("body").hasClass("et-dark-mode") ?
              sessionStorage.setItem('etDarkModeEnabled','1'):
              sessionStorage.removeItem('etDarkModeEnabled');
          }
      });
      if (storageAvailable) {
          '1' == sessionStorage.getItem('etDarkModeEnabled') ?
          $(".et-dark-mode-capable,body").addClass("et-dark-mode"):
          $(".et-dark-mode-capable,body").removeClass("et-dark-mode");
      }
  });
</script>


在divi中切换暗模式

添加自定义 CSS 类

自定义代码要求您将自定义 CSS 类添加到简介模块或切换。 这将允许简介在点击时触发暗模式切换和功能。

模糊模块类

打开 blurb 模块设置并添加自定义 CSS 类,如下所示:

  • CSS 类:et-dark-toggle

在divi中切换暗模式

暗模式能力等级

我们还需要为每个想要具有暗模式功能的 Divi 元素添加自定义 CSS 类。 一旦元素具有 CSS 类,该元素将继承我们添加的代码中的“黑暗模式”自定义 CSS,一旦开启了黑暗模式。 这种方法让我们可以更好地控制暗模式设计,因为某些元素可能不需要任何暗模式样式。

首先,我们可以将暗模式添加到包含暗模式切换的部分。

打开部分设置并添加以下 CSS 类:

  • CSS 类:et-dark-mode-capable

在divi中切换暗模式

第 2 部分:将暗模式功能添加到 Divi 页面

现在我们已经有了代码和 CSS 类,我们准备将暗模式功能和设计应用到 Divi 中的整个页面。 为此,我们将使用我们的移动应用登陆页面预制布局。

要添加布局,请打开可视化构建器底部的设置菜单,然后单击添加新布局图标。

然后从预制布局选项卡下选择移动应用登陆页面布局。

确保未选择“替换现有内容”选项。 您不想使用暗模式切换删除该部分。

在divi中切换暗模式

由于暗模式样式仅适用于具有 CSS 类“et-dark-mode-capable”的元素,我们可以选择几种不同的方式添加到页面。

  1. 我们可以将 CSS 类单独添加到页面上的每个元素。
  2. 我们可以将 CSS 类扩展到整个页面的元素(这比手动完成每个元素要快)。 例如,我们可以打开顶部的部分设置,并将该部分的 CSS 类扩展到整个页面的所有部分。
    在divi中切换暗模式
  3. 我们可以将 CSS 类添加到元素的全局默认值中。 这会将 CSS 类应用于站点范围内的所有元素,在整个站点中添加暗模式功能。 例如,我们可以打开部分设置并单击全局默认图标来编辑全局部分默认值。 然后我们可以添加 CSS 类并将其保存为站点范围内所有部分的 CSS 类。
    在divi中切换暗模式

将 CSS 类添加到页面元素

对于此示例,我们将通过将 CSS 类添加到部分和文本模块的全局默认值来更新页面元素。 我们还将在页面上的其他元素中添加一些内容。

所有部分

要将 CSS 类添加到所有部分,请打开包含暗模式切换的顶部部分的设置。 然后编辑该部分的全局默认值并将以下 CSS 类添加到部分全局默认值中:

  • CSS 类:et-dark-mode-capable

在divi中切换暗模式

所有专业部分

也将 CSS 类添加到专业部分的全局默认值中。

在divi中切换暗模式

文本模块

接下来,打开页面上其中一个文本模块的设置,并将相同的 CSS 类添加到 Text Global Defaults。

在divi中切换暗模式

简介

接下来,在页面布局中打开其中一个简介的设置,并将 CSS 类添加到 Blurb Global Defaults。

在divi中切换暗模式

见证专栏

在页面布局的下方,有一些推荐,每个推荐都在一个带有自定义白色背景的列中。 要在暗模式下覆盖列样式,请将 CSS 类添加到其中一列并将其扩展到行中的其他列。

注意:将 CSS 类添加到列的全局默认值不是一个好主意,因为这会破坏一些设计元素(即,当大多数时间列背景为所有列时,它不是一个好主意是透明的)。

在divi中切换暗模式

在divi中切换暗模式

要测试结果,请跳转到实时页面并单击页面顶部的暗模式切换。

以下是浅色模式下页面的外观。

在divi中切换暗模式

这是页面在黑暗模式下的样子。

在divi中切换暗模式

第 3 部分:将暗模式切换添加到全局标题

如果您想在站点范围内扩展暗模式功能,最好将暗模式切换添加到 Divi Global Header。 这样一来,整个站点的用户都可以在一个方便的地方使用它。

将暗模式切换和代码保存到 Divi 库

但在你这样做之前,我们需要将暗模式切换和代码保存到 Divi 库。 这将更容易添加到我们网站的其他区域,包括全局标题。

回到…

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