361 361Sale WordPress Care by Openbyt · WordPress 修复与运维

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

Harry
,

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

需要工程师帮你判断?

把症状、错误提示和最近改动发过来。

我们先判断风险、可能原因和安全下一步,再决定是否需要登录后台或服务器。

开始初诊

需要把这篇文章里的排查落到你的网站上吗?

把网址、错误提示、最近改动和影响范围发过来。我们先判断风险、备份状态和安全下一步;涉及数据库、支付、订单或安全问题时,不建议直接在生产站连续试错。

免费初诊 · 无需注册 · 先判断风险 提交后再决定是否修复
可上传错误截图、后台报错或页面异常截图,帮助更快判断。
提交前提醒先保留备份和错误提示,不要在生产站连续试错。