Resaltado del complemento Divi - Lógica de visualización Divi

¿Qué pasaría si quisiera que se mostrara un elemento de diseño Divi específico en función de las condiciones que eligió? Esto abriría algunas posibilidades de diseño, como mostrar una versión de una página según 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 con Divi y Extra para agregar lógica de visualización. En este complemento destacado, veremos el complemento y veremos algunos ejemplos de lo que puede hacer.

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

Instalación de Divi Display Logic

Sube y activa el complemento como de costumbre. Se agrega un nuevo elemento de menú al tablero en complementos llamados Divi Display Logic. Aquí agregará su clave de licencia. Esto asegurará que obtenga actualizaciones de complementos.

Display Logic ahora se agrega a todas las secciones, filas y módulos en la pestaña Contenido dentro del Divi Builder backend. 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 corto que crea el complemento para su lógica.

Lógica predefinida

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

Las opciones son mostrar u ocultar en función de un cierto tiempo, entre ciertos horarios, en días específicos, mostrar si tiene una categoría de NOTICIAS, si el usuario está conectado, a un determinado rol de usuario, a una determinada ubicación y según Código PHP. Todos estos se pueden modificar.

Código corto lógico

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

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

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

Aquí hay un ejemplo que ocultará el contenido los días de semana. Si quisiera mostrar el contenido en lugar de ocultar, cambiaría "ocultar" a "mostrar" en el código corto. Otra opción sería reemplazar los números del 1 al 5 por “6,7” que ocultará el contenido los fines de semana.

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

Ejemplos de shortcode incorporados

El primer enlace (denominado Haga clic aquí) en el área Display Logic proporciona ejemplos detallados de los códigos cortos. 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, fila o 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 de Mostrar fecha y Ocultar fecha. Esto abre un calendario con controles deslizantes de horas y minutos. Sobre los campos hay un mensaje que muestra la hora actual de su servidor.

Es importante utilizar el tiempo de su servidor en lugar del tiempo real. Aquí es donde WordPress obtiene la hora actual y es la hora que utilizará 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 utilizando un temporizador de cuenta regresiva para mostrar cuándo termina la oferta y comienza la siguiente.
• Podría tener una venta para comenzar en un momento determinado.
• Tener un trato para terminar en un momento determinado.
• Muestre el contenido de un artículo en un momento determinado incluso después de la publicación del artículo.
• Muestre contenido diferente basado en am o pm

Ejemplos de lógica de visualización de Divi: llamada a la acción de la escuela

Para mi primer ejemplo, estoy creando una página de destino para una escuela. La página tendrá una llamada a la acción para inscribirse para los estudiantes en los EE. UU., Pero cualquier persona fuera de los EE. UU. No podrá inscribirse. Este ejemplo utiliza el diseño de la 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 sean reemplazados 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 corto a "mostrar", creando efectivamente un nuevo código corto.

Cloné la fila y seleccioné ocultar el contenido para los usuarios de 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 postularse.

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

Ejemplos de lógica de visualización de Divi: venta flash

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

Si bien solo se muestra una sección, la página real ha abandonado algunas secciones más. Dentro de cada sección, establecí la lógica para mostrar 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 la pantalla funcionan de forma independiente. Configuré el tiempo para que el contador coincida con el tiempo en el que se mostrará la lógica de visualización.

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

Este ejemplo utiliza el diseño gratuito 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 en 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 tendrán acceso aquellos que hayan iniciado sesión. El acceso especial se puede controlar mediante complementos de membresía separados o asignando una capacidad de usuario para ver el contenido y eligiendo esa capacidad como 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 muestre el contenido solo a los usuarios desconectados.

El segundo botón solo se mostrará a los usuarios que hayan iniciado sesión.

Alternativamente, podría haber usado 'MOSTRAR este contenido si el usuario tiene la capacidad "view_content".'

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 visualización de 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 agregué dos secciones nuevas que incluyen un encabezado de ancho completo y un módulo de blog.

Establecí 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 encabezado de ancho completo, se mostrarán para 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 vean todos los usuarios, simplemente cambio la lógica de visualización.

Uso de 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 ofrece muchas opciones para determinar cuándo se mostrará una sección, fila o 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. ¿Ha utilizado Divi Display Logic? Háganos saber lo que piensa al respecto en los comentarios.

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