Lo más destacado del complemento Divi: lógica de pantalla Divi

¿Qué sucede si desea que se muestre un elemento de diseño Divi específico en función de las condiciones que elija? Esto abriría algunas posibilidades de diseño, como mostrar una versión de una página basada en el estado de inicio de sesión del usuario, la hora del día o su ubicación geográfica. Un complemento llamado Divi Display Logic le da a Divi esta característica.

Divi Display Logic es un complemento de terceros de Tortoise IT que funciona tanto con Divi como con Extra para agregar lógica de visualización. En este complemento destacado, echaremos un vistazo al complemento y veremos algunos ejemplos de lo que puede hacer.

Las imágenes de estos ejemplos se tomaron de Unsplash.com y de los diseños gratuitos de Divi disponibles aquí en el blog de Elegant Themes.

Instalación de lógica de pantalla Divi

Cargue y active el complemento de forma normal. Se agrega un nuevo elemento de menú al panel de control en complementos llamado Divi Display Logic. Aquí agregará su clave de licencia. Esto asegurará que obtendrá actualizaciones de complementos.

Display Logic ahora se agrega a todas las secciones, filas y módulos en la pestaña Contenido dentro del backend Divi Builder. Las características incluyen una selección de fecha y hora, un cuadro desplegable donde puede elegir la lógica predefinida y un cuadro que muestra el código abreviado que crea el complemento para su lógica.

Lógica predefinida

El cuadro desplegable Lógica predefinida tiene 18 opciones lógicas prefabricadas para elegir. Hay algunos más que puede copiar y pegar en el área de shortcode. Puede agregar sus propias opciones de lógica si desea codificar y puede manipular el código abreviado para crear variaciones.

Las opciones son mostrar u ocultar en función de una hora determinada, entre horas determinadas, en días específicos, mostrar si tiene una categoría de NOTICIAS, si el usuario está conectado, en un rol de usuario determinado, en una ubicación determinada y en función de código PHP. Todos estos pueden ser modificados.

Código abreviado de lógica

Una vez que elige una lógica predefinida, crea automáticamente un código abreviado. No necesitará usar este shortcode, pero puede editarlo aquí si lo desea.

También puede usar cualquier código corto de encapsulación (un código corto con una etiqueta de inicio y final [código corto] [/ código corto]) para crear sus propios argumentos. Esto se explica en la descripción debajo del campo de código abreviado, pero también me gustaría ver un ejemplo dentro de la descripción.

Para editar, simplemente resalte la parte dentro del código abreviado y realice sus cambios.

Aquí hay un ejemplo que ocultará el contenido los días de semana. Si quisiera mostrar el contenido en lugar de ocultarlo, cambiaría «ocultar» a «mostrar» en el código abreviado. Otra opción sería reemplazar los números 1-5 con «6,7», lo que ocultará el contenido los fines de semana.

Descubrí que manipular el código corto es intuitivo porque la mayoría de las palabras clave en la cadena son sencillas.

Ejemplos de códigos abreviados incorporados

El primer enlace (etiquetado Haga clic aquí) en el área Lógica de visualización proporciona ejemplos detallados de los códigos abreviados. Estos son especialmente útiles para los ejemplos de PHP. Puede copiarlos y pegarlos en el campo de código abreviado.

Selección de fecha y hora

Para usar la selección de fecha/hora, haga clic en el texto «Si usa fechas, haga clic aquí». Esto abrirá dos campos donde puede elegir mostrar y ocultar fechas. Estas son condiciones de tiempo que determinarán cuándo se mostrará la sección, la fila o el módulo. La lógica de la pantalla se elegirá de la lista Lógica predefinida.

Seleccione la fecha y la hora haciendo clic en los campos para Mostrar fecha y Ocultar fecha. Esto abre un calendario con controles deslizantes de horas y minutos. Encima de los campos hay un mensaje que muestra la hora actual de su servidor.

Es importante utilizar la hora de su servidor en lugar de la hora real. Aquí es donde WordPress obtiene la hora actual y es la hora que usará Divi Display Logic.

El módulo ahora mostrará el contenido entre la fecha y la hora que elegí.

Esto abre muchas posibilidades. Por ejemplo:

  • Puede crear un sitio de ventas con ofertas relámpago usando un temporizador de cuenta regresiva para mostrar cuándo finaliza la oferta y comienza la siguiente.
  • Podría tener una venta para comenzar en un momento determinado.
  • Tener un acuerdo para terminar en un momento determinado.
  • Mostrar contenido dentro de un artículo en un momento determinado, incluso después de que se haya publicado el artículo.
  • Mostrar contenido diferente basado en am o pm

Ejemplos de lógica de pantalla Divi: llamada a la acción escolar

Para mi primer ejemplo, estoy creando una página de destino para una escuela. La página tendrá un llamado a la acción de registro para estudiantes en los EE. UU., pero nadie fuera de los EE. UU. podrá registrarse. Este ejemplo utiliza el diseño de página de inicio para universidades y colegios .

El diseño incluye una fila con módulos de texto y botones. Quiero que el texto y el botón se reemplacen por diferentes módulos para cualquier persona fuera de los EE. UU.

Dentro de la configuración de la fila, elegí «Ocultar el contenido si el usuario está en los EE. UU.».

A continuación, cambié «ocultar» en el código abreviado a «mostrar», creando efectivamente un nuevo código abreviado.

Cloné la fila y seleccioné ocultar el contenido para los usuarios en los EE. UU. para la nueva fila.

Ahora solo se mostrará una de las filas según la ubicación del visitante.

Los visitantes de EE. UU. ven el eslogan original y el botón para aplicar.

Todos los visitantes fuera de los EE. UU. ven un eslogan y un botón diferentes con un título diferente.

Ejemplos de lógica de visualización de Divi: venta relámpago

Esta es una página de ventas simple que solo muestra un producto como una venta flash. Cuando el temporizador de cuenta regresiva llega a cero, toma su lugar un nuevo producto con un nuevo temporizador de cuenta regresiva.

Si bien solo se muestra una sección, la página real ha cerrado algunas secciones más. Dentro de cada sección he configurado la lógica para mostrar el contenido en un momento específico. Las secciones no se cargan cuando la página se carga en el navegador, por lo que puede agregar tantas como desee con todo el CSS que desee y no ralentizarán el tiempo de carga.

El temporizador de cuenta regresiva y la lógica de visualización funcionan de forma independiente. He configurado el tiempo para que el contador coincida con el tiempo que mostrará la lógica de visualización.

Ejemplos de lógica de pantalla Divi: sitio de autor con área de membresía

Este ejemplo utiliza el diseño gratuito de Elegant Authors . Quiero mostrar contenido diferente en función de si el visitante ha iniciado sesión o no. Los visitantes que no hayan iniciado sesión verán la pantalla de la imagen de arriba que incluye una llamada a la acción.

Los visitantes que hayan iniciado sesión no verán una llamada a la acción. En su lugar, verán un enlace a un área especial del sitio web a la que solo aquellos que hayan iniciado sesión tendrán acceso. El acceso especial se puede controlar utilizando un complemento de membresía de WordPress o asignando una capacidad de usuario para ver el contenido y eligiendo esa capacidad como la lógica.

En lugar de clonar toda la sección, solo cloné el botón. Todo lo demás seguirá igual. De esta manera, si decido cambiar la imagen de fondo, solo necesito cambiarla en una sección.

Configuré la lógica para que el botón superior mostrara el contenido solo a los usuarios que cerraron sesión.

El segundo botón solo se mostrará a los usuarios registrados.

Alternativamente, podría haber usado ‘MOSTRAR este contenido si el usuario tiene la capacidad de «ver_contenido».’

Los usuarios que han iniciado sesión ahora ven el nuevo botón que les proporciona un enlace a una página o publicación específica.

Ejemplos de lógica de pantalla Divi: sitio de autor con nueva página de destino

Por supuesto, otra posibilidad es mostrar una página completamente diferente. Este ejemplo usa el mismo diseño que el ejemplo anterior, pero he agregado dos nuevas secciones que incluyen un encabezado de ancho completo y un módulo de blog.

He establecido la lógica para cada sección. Todas las secciones que componen la página de destino se mostrarán a los usuarios que no hayan iniciado sesión. Las dos secciones inferiores, que crean una página de blog con un encabezado de ancho completo, se mostrarán a los usuarios que hayan iniciado sesión.

Ahora los usuarios registrados no verán la página de ventas. Si cambio el artículo de venta a algo que quiero que todos los usuarios vean, simplemente cambio la lógica de visualización.

Usando Divi Display Logic con Extra

Divi Display Logic también funciona con Extra . Este ejemplo muestra el módulo Carrusel de publicaciones en el Generador de categorías.

Licencia

Divi Display Logic se puede utilizar en sitios web ilimitados para usted y sus clientes. Incluye 6 meses de soporte y 12 meses de actualizaciones. Una vez transcurridos los 12 meses, deberá volver a comprar el complemento para recibir actualizaciones. El precio de recompra es el 50% del precio de compra inicial.

Pensamientos finales

Divi Display Logic proporciona muchas opciones para determinar cuándo se mostrará una sección, una fila o un módulo. Con opciones de visualización que incluyen hora, fecha, geolocalización, si el usuario está conectado o no y el nivel del usuario, las posibilidades de diseño son prácticamente infinitas.

Encontré el complemento intuitivo de usar. Los códigos cortos son fáciles de manipular. Algunos ejemplos más serían útiles, especialmente para PHP. Si desea mostrar una sección, fila o módulo en función de una condición, Divi Display Logic es una excelente opción.

Consulte Divi Display Logic en Tortoise IT para obtener información sobre compras.

Queremos escuchar de ti. ¿Has usado Divi Display Logic? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de phipatbig / shutterstock.com