Elementor 条件显示:显示或隐藏任何元素

说你的商店在下午6点关闭,你希望“立即订购”按钮变成一个“我们关闭了,在下班后回到上午9点”通知。或者定价表显示一个价格给注销的访客,另一个价格给会员。你可以构建两个页面并用手交换它们。没有人愿意每天这样做两次。

Elementor 条件显示修复它:在同一页面上构建两个版本,然后为每个版本附加一条规则,决定谁看到它以及何时看到它 显示条件扩展 在主插件中,将其添加到每个 Elementor 元素中,免费,无代码。

下面:每种条件类型、和/或逻辑的实际行为方式、悄悄咬人的设置(输出 HTML)以及这种方法在何处不合时宜。

条件显示实际上做什么

Elementor的每个元素,无论是容器、小部件还是列,都会拾取一个 显示条件 面板在其中 高级 tab。打开它,你可以附加规则。访客通过,他们看到元素。访客失败,它已经消失了。

每个规则读起来都像一个句子,分为三部分:检查什么、运算符(是或不是)和值。 “登录状态 於 登录。”“浏览器 是不是 Safari。” 就是整个模型,下面所有内容都是它的变体。

首先打开扩展

显示条件附带主插件,但开箱即用。转到 主插件 > 设置 > 扩展、动态小部件组下找到它,打开它,保存。

Skip that 和显示条件面板从未出现在高级选项卡中,这是遥远而遥远的最常见的 “它不工作” 消息我们得到 如果你还没有插件, 从 WordPress。org 免费安装主插件.

显示打开设置:所有条件与任何条件

在元素上启用显示条件,您将获得一个 显示在 dropdown with two choose。Picking wrong one is the most common reason a rule “doesn’t work。”

所有条件均满足 是AND逻辑,所以每条规则都必须通过。 满足任何条件 是OR逻辑,所以一个传递规则就足够了。

这就是实践中的含义。假设您设置了两个条件:“浏览器是 Chrome”, “用户角色是 Administrator.”

论 所有条件均满足者,只有一个恰好在 Chrome 中浏览的管理员看到该元素,在 Firefox 上同一个管理员什么也看不到。

论 满足任何条件、每个 Chrome 访问者都会看到它,任何浏览器上的每个管理员也会看到它。这比大多数人在添加第二条规则时所想到的受众要多得多。

因此,如果某个元素向人们显示它不应该,请在触摸其他内容之前检查此下拉。

Output HTML 切换(在隐藏任何敏感内容之前请阅读此内容)

坐在主肘节正下方 输出 HTML的, 并且它自己的标签拼写出它所做的: “如果启用,HTML 代码将存在于页面上,但小部件将使用 CSS。”隐藏

这比安静的位置所暗示的要重要得多。

离开它 关的,这是默认的,元素也从来没有渲染过,根本不在页面源里面,条件失败的人不能查看-源并读取,谷歌也不会索引。

转动它 上 元素被渲染到 HTML 中,然后用 CSS 隐藏。任何人都可以打开 dev 工具、删除一行并读取整个内容。

So keep Output HTML for any you actually want keep private: a members-only price, a hiddle download link, a internal note。set existing at all is that some scripts need the markup present in the DOM to work, which comes up with slider, tab systems, and counters that measure elements

While we are here, blunt版本:条件显示是一个演示工具,而不是访问控制系统,关闭输出HTML它非常适合日常使用,但必须被锁定的内容,就像付费课程或门控文件一样,属于真正的保护背后 限制内容小部件 为此而存在,并且是正确的 WordPress 会员设置 是任何你收取费用的正确答案。

您可以使用的所有条件

打开条件下拉,您将获得四个组。

他们每个人都配对 是 或 不是的,这悄悄地使单个规则所能做的事情增加了一倍。

仅向登录用户显示内容

选择元素,打开 高级 > 显示条件、打开它,默认条件已经 登录状态 设置为 是者, 意思是登录的访客看到它,而其他人没有看到它。你不必改变任何事情。

Now 为已注销的访客构建相反的版本, 选择第二个元素, 启用显示条件, 并翻转操作符到 不是.

将这两个页面堆叠在一个页面上,您就有一个标头,可以按姓名向会员打招呼,并向其他人推销注册信息,并且无需重复页面即可保持同步。

针对特定的用户角色

相同的流量,不同的条件。选择 用户角色 从下拉中选择您所追求的角色:管理员、编辑器、订阅者、客户,无论您的网站有什么。 WooCommerce 和会员插件都会将自己的角色添加到此列表中。

翻转到 不是管理员 并且除了管理员之外的所有人都看到了该元素。这对于 “这里是如何编辑本节” 来说很方便,请注意您的客户端在页面上看到的,而您无需每次打开网站时都查看它。

One catch:用户角色只存在于登录的人身上,注销的访问者根本没有角色,所以用户角色规则永远不会匹配他们,无论你设置什么,如果你需要抓到注销的人,那就是登录状态规则。

按日期、时间或一周中的日期显示内容

3个基于时间的条件,而且它们比列表中的其他任何东西都节省更多的工作。

日期范围 take start and an end date。10月搭建黑色星期五横幅,设置范围,算了吧,它自己出现和消失。

一天中的时间 取时间窗口,这是本文顶部的开放与封闭交换。

一周中的某一天 需要一天或多天,添加为标签。

将其设置为周一至周五,用于带有支持 now"小部件的"“聊天,并让"给我们留言"块覆盖周末。将星期几与星期几结合起来 所有条件均满足 您已经用两条规则描述了真实的开放时间。

不过要小心时钟。时间条件在你身上运行 WordPress 网站时区 (设置>一般),而不是访问者的,如果您的销售应该在午夜为客户结束,并且您的服务器在您的客户在纽约时坐在UTC上,那么它会提前五个小时结束,在您安排任何需要花钱的事情之前检查该设置。

通过浏览器或操作系统显示内容

挑 浏览器 或 操作系统 并针对 Chrome、Firefox、Safari、Edge、Windows、macOS、Linux 等。

OS定位的真正用途是应用程序下载。向Mac访问者显示Mac按钮,向Windows访问者显示Windows按钮,而不是一排四个按钮,其中三个按钮对于谁在寻找谁是错误的。

Browser 瞄准范围比人们预期的要窄,这是为了偶尔的 “这个功能在 Safari” 通知中表现不同,而不是为了每个浏览器发货不同的设计,如果某个部分仅在 Chrome 中工作,请修复 CSS。不要向 Firefox 访问者隐藏它并称之为完成。

也值得直白地说:这不是设备定位。Elementor的响应式控件已经隐藏了每个屏幕尺寸的元素,这是手机与桌面的正确工具。操作系统是关于平台的,而不是屏幕的大小。

在那里这变得真正有用

一些值得窃取的设置。

从一个模板运行两个标头:在您的 主题构建器 header,在登录状态下放置一个 “登录” 按钮 不是登录状态下还有一个"“我的帐户”按钮 是.一头,两受众,同招在 脚踏车.

Date Range 条件下让销售以促销栏运行,预定提前几周,因此没有上午 6 点启动日的争夺。在页面上留下客户端说明,并设置仅限管理员的注释为用户角色 是 Administrator,坐在它需要的地方,而不是埋在电子邮件中。

您还可以对元素施加条件 里面 a 涓锛涓锛 弹出窗口因此,单个弹出窗口以不同的方式为登录和注销的访问者提供服务,并使用分类存档条件对每个产品类别存档运行不同的优惠。

为了更深入的个性化,将条件与 动态标签 (支持ACF),因此在规则中幸存下来的版本会拉取实时数据而不是静态文本。

让人着迷的事情

• 无显示条件面板。 扩展未启用。主插件 > 设置 > 扩展。
• 该元素向所有人展示。 当您表示 “所有条件都满足.” 时,显示设置为 “任何条件都满足.”
• 它适合您,但不适合访客。 您以管理员身份登录。每次都在私人窗口中进行测试。
• 页面源中会出现隐藏内容。 HTML 输出已开启。将其关闭。
• 时间规则在错误的时间点开火。 站点时区,而不是访客时区。设置 > 一般。
• 变化不会在现场网站上显示。 Page缓存正在服务于存储的副本,大多数缓存插件无法改变每个用户的缓存页面,因此,激进的整页缓存和基于登录的条件相互对抗,将这些页面从缓存中排除,或者清除它并再次测试。

常见问题

包裹起来

Elementor 条件显示将一页变成您需要的尽可能多的版本 启用扩展,在任何元素上打开高级 > 显示条件,并编写规则:检查某件事,是或不是,完成两个设置决定它是否按照您期望的方式行事。 显示在 控制和与 OR 的对比,以及 输出 HTML 控制隐藏内容是否真正不存在或只是被涂掉。

是《》的一部分 免费主插件扩展集的, 所以在你尝试之前没有什么可买的, 如果你最终想要工具包的其余部分之后, 这就是什么 专业计划 是为了。

相关阅读: 元素入口动画, elementor 中如何创建粘性标头、和 如何在 Elementor 中添加年龄验证.