Elementor 根据根据 url 参数显示文字图片组件

在网站推广等营销活动中，常常需要根据不同的 utm 追踪参数显示不同的内容，本文将详细介绍通过 elementor 插件实现该功能，核心原理是通过动态标签功能设置 css 类来隐藏或者显示内容，过程中无需使用js等复杂代码。

本示例中需要实现的效果是让用户打开 你的域名/form/?utm_source=client 时显示表单 B 隐藏表单 A，默认情况用户打开显示表单 A 。

首先，在需要根据参数显示的组件中找到 css 类，选择动态标签（Request Parameter），设置 Type 为 Get，Parameter Name 设置为 utm_source（这个根据 url ? 后的设置参数）

在高级设置中添加另外一个css类 show-for-client ，这个css类控制表单 B 的状态，注意输入类名之后加一个空格。

第二步，按照以上步骤同样设置，区别在高级设置时，类名改成 show-for-default，同样最后加一个空格。

第三步，设置自定义CSS，在页面设置中，添加全局的css用以控制表单的显示与隐藏。

.show-for-client{
    display:none;
}
.show-for-client.client{
    display: flex;
}
.show-for-default.client{
    display: none;
}

这样就完成了，完成之后发布页面。

打开 你的域名/form 就会显示表单 A；

打开 你的域名/form/?utm_source=client 就会显示表单 B。