如何用Elementor在WordPress网站中添加暗色模式

为网站添加暗色模式对于提供更好的用户体验和使网站更易于访问非常重要。Elementor 是 WordPress 最受欢迎的页面构建工具之一，只需几个简单的步骤，就能轻松添加暗色模式。

为什么要添加深色模式？

在探讨如何在 Elementor 中实施暗模式之前，让我们先了解一下它对网站的好处。它有两个主要优点： 增强用户体验和提高可访问性。

• 增强的用户体验：黑暗模式提供了更舒适的浏览体验，尤其是在光线昏暗的环境下。它能最大限度地减少眼睛疲劳，提高可读性，使网站对访问者更具吸引力。
• 改进的可访问性：暗色模式还能提高有视觉障碍或对强光敏感的人的可访问性。这使他们能够更舒适地浏览和参与您网站的内容，而不会造成任何不便。

步骤1：安装并激活 Elementor 的 Unlimited Elements 免费版本

必须安装并激活 Elementor 的 Unlimited Elements 免费版本。

步骤2：在 “Unlimited Elements “中安装暗色模式小工具

找到 “黑暗模式 “小部件，将光标移至其上，你会看到一个 “安装 “按钮。点击该按钮即可设置 Widget。

步骤3：将深色模式小部件添加到 Elementor 页面。

将 “黑暗模式 “部件拖放到页面上。

根据自己的喜好自定义黑暗模式设置。

1、动画速度

调整在浅色和深色模式之间切换时发生转换的速度。

2、按钮水平位置

确定暗色模式切换按钮在 widget 中的水平位置。

3、按钮垂直位置

指定暗色模式切换按钮在 widget 中的垂直位置。

4、按钮垂直偏移

微调暗色模式切换按钮相对于默认位置的垂直对齐方式。

5、按钮水平偏移

调整暗模式切换按钮相对于其默认位置的水平对齐方式。

6、按钮图标

自定义暗色模式切换按钮上显示的图标。

7、保存在 Cookie 中

选择是否将用户的暗色模式偏好保存在 Cookie 中，以便将来访问。

8、不影响图像

选择从暗模式转换中排除图像，以获得更好的可见性或美观性。

9、自动匹配操作系统主题

自动将小部件的暗模式与操作系统的主题同步（如果可用）。

10、深色模式混合颜色

定义与深色模式背景混合的混合颜色，以提高可读性或设计一致性。

11、深色模式背景颜色

设置小部件内暗模式显示的背景颜色。

总结

用Elementor在你的WordPress网站上添加暗色模式，不仅能让用户按自己喜好浏览，还能让网站独具一格，彰显出对多样性和用户体验的重视。目标是创造一个灵活的环境，让用户能够根据自己的习惯选择浏览方式，从而让他们更愿意参与并感到满意。如果在设置暗色模式时遇到困难，可以在我们的”问答社区“求助或找联系我们的客服帮忙。