Digamos que su tienda cierra a las 6 p. m. y desea que el botón “Pedir ahora” se convierta en un aviso de “Estamos cerrados, volvamos a las 9 a. m.” fuera de horario. O la tabla de precios muestra un precio para los visitantes registrados y otro para los miembros. Podrías construir dos páginas e intercambiarlas a mano. Nadie quiere hacer eso dos veces al día.
La pantalla condicional Elementor lo corrige: crea ambas versiones en la misma página, luego adjunta una regla a cada una que decide quién la ve y cuándo. El Extensión de condiciones de visualización en Master Addons agrega esto a cada elemento Elementor, gratis, sin código.
Abajo: cada tipo de condición, cómo se comporta realmente la lógica AND/OR, la única configuración que muerde silenciosamente a las personas (HTML de salida) y dónde se queda sin camino este enfoque.
Qué hace realmente la visualización condicional
Cada elemento Elementor, ya sea un contenedor, un widget o una columna, capta un Condiciones de visualización panel en su Avanzado pestaña. Enciéndelo y podrás adjuntar reglas. El visitante pasa, ven el elemento. El visitante falla, ya no está.
Cada regla se lee como una oración dividida en tres partes: qué verificar, un operador (es o no es) y un valor. “Estado de inicio de sesión es Inició sesión.” “Navegador no es Safari.” Ese es el modelo completo. Todo lo que aparece a continuación es una variación del mismo.
Encienda la extensión primero
Las condiciones de visualización se envían con complementos maestros pero no están activas desde el primer momento. Ir a Complementos maestros > Configuración > Extensiones, encuéntrelo en el grupo Widgets dinámicos, actívelo y guárdelo.
Omita eso y el panel Condiciones de visualización nunca aparece en la pestaña Avanzado, que es de lejos el mensaje más común que recibimos de “no funciona”. Si aún no tienes el complemento, instale complementos maestros gratis desde WordPress.org.
La configuración Display On: todas las condiciones frente a cualquier condición
Habilite Condiciones de visualización en un elemento y obtendrá un Mostrar encendido desplegable con dos opciones. Elegir el equivocado es la razón más común por la que una regla “no funciona”
Todas las condiciones cumplieron es Y lógica, por lo que cada regla tiene que pasar. Cualquier condición cumplida es lógica OR, por lo que una regla de aprobación es suficiente.
Esto es lo que eso significa en la práctica. Digamos que establece dos condiciones: “El navegador es Chrome” y “La función del usuario es el administrador”
En Todas las condiciones cumplieron, sólo un administrador que esté navegando en Chrome ve el elemento. Ese mismo administrador en Firefox no ve nada.
En Cualquier condición cumplida, todo visitante de Chrome lo ve, al igual que todos los administradores de cualquier navegador. Esa es una audiencia mucho mayor de la que la mayoría de la gente tiene en mente cuando agregan una segunda regla.
Entonces, si un elemento le muestra a la gente que no debería, consulte este menú desplegable antes de tocar cualquier otra cosa.
El interruptor HTML de salida (lea esto antes de ocultar cualquier cosa sensible)
Sentado justo debajo del interruptor principal está Salida HTML, y su propio sello explica lo que hace: “Si está habilitado, el código HTML existirá en la página pero el widget se ocultará mediante CSS”
Eso importa mucho más de lo que sugiere su ubicación tranquila.
Déjalo apagado, que es el valor predeterminado y el elemento nunca se representa. No está en absoluto en la fuente de la página. Alguien que falla la condición no puede ver la fuente ni leerla, y Google no la indexará.
Conviértelo en y el elemento se representa en HTML y luego se oculta con CSS. Cualquiera puede abrir herramientas de desarrollo, eliminar una línea y leerlo todo.
Así que mantenga el HTML de salida desactivado para cualquier cosa que realmente desee mantener privada: un precio exclusivo para miembros, un enlace de descarga oculto, una nota interna. La razón por la que existe la configuración es que algunos scripts necesitan que funcione el marcado presente en el DOM, que incluye controles deslizantes, sistemas de pestañas y contadores que miden elementos en la carga de la página. Ese es el caso para activarlo, y no mucho más.
Mientras estamos aquí, la versión contundente: la visualización condicional es una herramienta de presentación, no un sistema de control de acceso. Con el HTML de salida desactivado, es perfectamente sólido para el uso diario. Pero el contenido que debe bloquearse, como un curso pago o un archivo cerrado, pertenece a la protección real. El Restringir el widget de contenido existe para eso y es un adecuado Configuración de membresía de WordPress es la respuesta correcta para cualquier cosa por la que cobres dinero.
Todas las condiciones que puedes usar
Abra el menú desplegable Condición y obtendrá cuatro grupos.
| Grupo | Condiciones | Uso típico |
|---|---|---|
| Visitante | Estado de inicio de sesión, función de usuario, sistema operativo, navegador | Precios para miembros, notas solo para administradores, botones “Descargar para Mac” |
| Fecha y hora | Rango de fechas, hora del día, día de la semana | Ventas vencidas, horarios de apertura, ofertas de fin de semana |
| Soltero | Página, publicación, página estática, tipo de publicación, publicación tiene plazo | Encabezado CTA que cambia en determinadas páginas |
| Archivo | Archivo de taxonomía, archivo de términos, archivo de tipo de publicación, archivo de fecha, archivo de autor, resultados de búsqueda | Banners específicos de cada categoría, un mensaje sobre resultados de búsqueda vacíos |
Cada uno de ellos se empareja con Es o No es, que silenciosamente duplica lo que puede hacer una sola regla.
Mostrar contenido únicamente a usuarios que hayan iniciado sesión
Seleccione el elemento, abra Avanzado > Condiciones de visualización, enciéndelo. La condición predeterminada ya es Estado de inicio de sesión establecer en Es, lo que significa que los visitantes que han iniciado sesión lo ven y nadie más lo ve. No tienes que cambiar nada.
Ahora cree la versión opuesta para los visitantes que cierran sesión. Seleccione ese segundo elemento, habilite Condiciones de visualización y active el operador No es.
Apila esos dos en una página y tendrás un encabezado que saluda a los miembros por su nombre y presenta un registro a todos los demás, sin una página duplicada para mantener sincronizada.
Apunte a un rol de usuario específico
Mismo flujo, condición diferente. Elegir Rol del usuario desde el menú desplegable y elija el rol que busca: Administrador, Editor, Suscriptor, Cliente, lo que sea que tenga su sitio. WooCommerce y los complementos de membresía agregan sus propios roles a esta lista.
Voltearlo a No es administrador y todos, excepto los administradores, ven el elemento. Eso es útil para una nota de “aquí se explica cómo editar esta sección” que su cliente ve en la página, sin que tenga que mirarla cada vez que abre el sitio.
Un problema: un rol de usuario solo existe para alguien que ha iniciado sesión. Un visitante que ha cerrado sesión no tiene ningún rol, por lo que una regla de rol de usuario nunca los coincidirá, sin importar lo que establezca. Si necesita atrapar a personas que hayan cerrado sesión, esa es una regla de estado de inicio de sesión.
Mostrar contenido por fecha, hora o día de la semana
Tres condiciones basadas en el tiempo y ahorran más trabajo que cualquier otra cosa en la lista.
Rango de fecha toma una fecha de inicio y finalización. Construye el banner del Black Friday en octubre, configura la gama, olvídalo. Aparece y desaparece por sí solo.
Hora del día requiere una ventana de tiempo, que es el intercambio de apertura versus cierre desde la parte superior de este artículo.
Día de la semana tarda uno o más días, se agrega como etiquetas.
Configure de lunes a viernes para obtener un widget de “chat con soporte ahora” y deje que un bloque de “déjanos un mensaje” cubra el fin de semana. Combine el día de la semana con la hora del día Todas las condiciones cumplieron y has descrito los horarios de apertura reales en dos reglas.
Sin embargo, ten cuidado con el reloj. Las condiciones de tiempo corren en tu Zona horaria del sitio de WordPress (Configuración > General), no la del visitante. Si se supone que su venta finaliza a medianoche para el cliente y su servidor se encuentra en UTC mientras sus clientes están en Nueva York, finaliza cinco horas antes para ellos. Verifique esa configuración antes de programar algo que cueste dinero.
Mostrar contenido por navegador o sistema operativo
Elegir Navegador o Sistema operativo y apunte a Chrome, Firefox, Safari, Edge, Windows, macOS, Linux, etc.
El verdadero uso de la orientación del sistema operativo son las descargas de aplicaciones. Muestre el botón Mac a los visitantes de Mac y el botón de Windows a los visitantes de Windows, en lugar de una fila de cuatro botones donde tres de ellos son incorrectos para quien esté buscando.
La orientación del navegador es más limitada de lo que la gente espera. Es para algún aviso ocasional de “esta característica se comporta de manera diferente en Safari”, no para enviar diferentes diseños por navegador. Si una sección solo funciona en Chrome, corrija el CSS. No lo ocultes a tus visitantes de Firefox y llámalo listo.
También vale la pena decirlo claramente: esto no es la orientación al dispositivo. Los controles responsivos de Elementor ya ocultan elementos por tamaño de pantalla, y esa es la herramienta adecuada para el teléfono versus el escritorio. El sistema operativo se trata de la plataforma, no del tamaño de la pantalla.
Donde esto se vuelve realmente útil
Algunas configuraciones que vale la pena robar.
Ejecute dos encabezados desde una plantilla: en su Creador de temas encabezado, coloque un botón “Iniciar sesión” en Estado de inicio de sesión No esy un botón “Mi cuenta” en Estado de inicio de sesión Es. Un encabezado, ambas audiencias. El mismo truco funciona en el pie de página.
Deje que las ventas se realicen solas con una barra de promoción en una condición de rango de fechas, programada con semanas de anticipación, para que no haya revueltas el día del lanzamiento a las 6 a. m. Deje las instrucciones del cliente en la página con una nota solo de administrador configurada en Función de usuario Es Administrador, sentado exactamente donde se necesita en lugar de enterrado en un correo electrónico.
También puedes poner condiciones a los elementos interior a ventana emergente, por lo tanto, una única ventana emergente ofrece visitantes que inician y cierran sesión de manera diferente, y utiliza las condiciones de Taxonomy Archive para ejecutar una oferta diferente en cada archivo de categoría de producto.
Para una personalización más profunda, combine las condiciones con Etiquetas dinámicas (Apoyado por ACF), por lo que la versión que sobrevive a las reglas extrae datos en vivo en lugar de texto estático.
Cosas que atrapan a la gente
- Panel sin condiciones de visualización. La extensión no está habilitada. Complementos maestros > Configuración > Extensiones.
- El elemento se lo muestra a todos. Display on está configurado en “Cualquier condición cumplida” cuando quiso decir “Todas las condiciones cumplidas”
- Funciona para ti pero no para los visitantes. Has iniciado sesión como administrador. Pruebe en una ventana privada, siempre.
- El contenido oculto aparece en la fuente de la página. La salida HTML está activada. Apágalo.
- El tiempo gobierna el fuego en la hora equivocada. Zona horaria del sitio, no zona horaria de visitantes. Configuración > General.
- Los cambios no se muestran en el sitio en vivo. Un caché de página sirve como copia almacenada. La mayoría de los complementos de almacenamiento en caché no pueden variar una página almacenada en caché por usuario, por lo que el almacenamiento en caché agresivo de página completa y las condiciones basadas en inicio de sesión combinan entre sí. Excluya esas páginas del caché o borrelas y pruebe nuevamente.
Preguntas frecuentes
¿qué es la visualización condicional en Elementor?
La visualización condicional le permite mostrar u ocultar cualquier elemento Elementor según reglas, como si el visitante ha iniciado sesión, su rol de usuario, su navegador o el día de la semana. Creas una página con varias versiones de una sección y cada visitante solo ve la versión que se les aplica.
¿puedo usar la visualización condicional en Elementor de forma gratuita?
Sí. La extensión Condiciones de visualización viene con el complemento gratuito Master Addons. Habilite en Complementos maestros, luego Configuración, luego Extensiones y aparecerá un panel Condiciones de visualización en la pestaña Avanzado de cada elemento.
¿El contenido oculto está realmente oculto a los visitantes?
Con HTML de salida desactivado (el valor predeterminado), el elemento nunca se representa, por lo que no está en la fuente de la página en absoluto. Active HTML de salida y el marcado se cargue, pero está oculto con CSS, que cualquiera puede deshacer en las herramientas de desarrollo. Manténgalo desactivado para cualquier cosa sensible.
¿Por qué no funciona mi condición de visualización?
Por lo general, una de tres cosas: la pantalla desplegable está configurada en “Cualquier condición cumplida” en lugar de “Todas las condiciones cumplidas”, estás probando mientras inicias sesión como administrador o un complemento de almacenamiento en caché sirve una copia almacenada de la página. Pruebe en una ventana privada con el caché borrado.
¿las condiciones basadas en el tiempo utilizan la zona horaria del visitante?
No. Se ejecutan en la zona horaria de su sitio de WordPress, configurados en Configuración y luego en General. Si sus visitantes se sientan en una zona horaria diferente, una venta que finaliza a medianoche en su servidor finaliza a una hora diferente para ellos, así que configure la zona horaria del sitio deliberadamente.
Envolviendo
La pantalla condicional Elementor convierte una página en tantas versiones como necesite. Habilite la extensión, abra Avanzado > Condiciones de visualización en cualquier elemento y escriba la regla: verifique algo, esté o no hecho. Dos configuraciones deciden si se comporta como espera. Mostrar encendido controles Y versus OR, y Salida HTML controla si el contenido oculto está realmente ausente o simplemente pintado.
Es parte del conjunto de extensiones Master Addons gratuito, entonces no hay nada que comprar antes de probarlo. Si terminas queriendo el resto del kit de herramientas más tarde, eso es lo que dice Planes profesionales son para.
Lectura relacionada: Animaciones de entrada de elementores, cómo crear un encabezado adhesivo en Elementor, y cómo agregar verificación de edad en Elementor.
