Resaltado del complemento Divi - Owl Carousel Pro

¿Alguna vez ha querido mostrar publicaciones, proyectos, tipos de publicaciones personalizadas e imágenes dentro de un carrusel usando Divi Builder? Las publicaciones e imágenes generalmente se muestran dentro de un control deslizante, que muestra una publicación o imagen a la vez, pero ¿qué pasa si desea un carrusel real que muestre varias publicaciones a la vez? Puede hacer esto fácilmente con un complemento llamado Owl Carousel Pro.

Owl Carousel Pro es un complemento de terceros que agrega dos nuevos módulos a Divi Builder. El primero muestra tipos de publicaciones como proyectos, publicaciones y tipos de publicaciones personalizadas. El segundo es un carrusel de imágenes que compite con el editor visual para agregar cualquier tipo de contenido que desees.

Hay una versión gratuita del complemento disponible. Estoy echando un vistazo a la versión pro, que agrega varias características nuevas que incluyen:

• tipos de publicaciones personalizadas
• mostrar campos personalizados
• consulta personalizada
• cambiar el tamaño de la miniatura
• cambiar el número de imágenes mostradas
• abrir imagen en caja de luz

Las imágenes de los ejemplos se han tomado de Unsplash.com.

Instalación de Owl Carousel Pro

Sube y activa el complemento como de costumbre. Luego verá dos nuevos módulos en Divi Builder: DP Owl Carousel y DP Owl Image Carousel. Los módulos tienen un color diferente al de los módulos Divi estándar para ayudarlos a diferenciarse. Esta es mi preferencia por los módulos de terceros porque los hace más fáciles de encontrar.

Carrusel de búhos DP

DP Owl Carousel muestra publicaciones, proyectos y tipos de publicaciones personalizadas dentro de un carrusel. Mostrará sus últimas 10 publicaciones o de las categorías o etiquetas que seleccione. Su pestaña de contenido incluye configuraciones para contenido y elementos. La pestaña de diseño incluye texto, texto del título de la publicación, metatexto de la publicación, texto del extracto de la publicación, texto archivado personalizado, espaciado, flechas, controles y miniaturas.

La pestaña avanzada contiene la configuración CSS esperada, pero también agrega acción de clic, animación (determina el tiempo para el desplazamiento), fondo y visibilidad. Los colores de fondo en ambos módulos son de un solo color, por lo que no hay degradados ni imágenes disponibles. Normalmente no miraría en la pestaña avanzada a menos que quisiera usar CSS, por lo que me habría perdido estas configuraciones, ya que esperaba que estuvieran en la pestaña de contenido.

Puede crear una consulta personalizada (ejemplos en el sitio web) o puede utilizar la configuración dentro del módulo para controlar lo que se muestra. Incluye varias configuraciones para controlar la visualización, como el número de publicaciones, un número de compensación, el nombre del tipo de publicación personalizado, categorías, etiquetas para incluir y etiquetas para excluir. Agregó mis tipos de publicaciones personalizadas automáticamente.

Las consultas personalizadas se agregan a su tema secundario dentro del código PHP (siempre realice cambios de PHP en un tema secundario y no en el tema principal para que no pierda sus cambios cuando se actualice el tema). El sitio web del desarrollador incluye algunos ejemplos.

Nota: pruebe siempre el código en un sitio de prueba antes de agregarlo a su sitio en vivo.

Ejemplos de carrusel de búhos DP

Este es el diseño estándar (he agregado un fondo para ayudarlo a destacar). Muestra mis últimas 10 publicaciones en todas las categorías. He incluido el encabezado Divi y la meta de la publicación para mostrar cómo se ve dentro de la página. Al hacer clic en cualquiera de las imágenes, accederá a la publicación.

Este agrega el título, la categoría y la fecha. También puede mostrar campos personalizados si los tiene configurados.

Este muestra el título y el extracto de la publicación con los 270 caracteres predeterminados.

En este, configuré el extracto de la publicación en 70 caracteres.

En este he desactivado las flechas y los controles. La animación sigue funcionando, pero los usuarios no pueden desplazarse por las diapositivas.

En este, cambié los tamaños y colores de la fuente, hice que las flechas fueran rojas, aumenté el tamaño de los controles y los hice de color púrpura, aumenté el tamaño de las miniaturas, reduje el margen a 0 y lo configuré para que muestre 3 imágenes. El segundo color de los controles es una versión más oscura del color que elegí. El segundo color lo proporciona el complemento.

En este, agregué un fondo en el módulo y cambié el margen del elemento para que el fondo se muestre entre las publicaciones. También cambié los colores de la fuente y esta vez ajusté la altura y el espaciado de la línea. Muestra 4 publicaciones por pantalla y he reducido el tamaño de la miniatura. Puse las flechas en grande y los controles en pequeño.

Cuando cambie el tamaño de la miniatura, solo se ajustará para adaptarse a la cantidad de publicaciones que muestra. Entonces, si desea que las imágenes sean más grandes, deberá reducir manualmente la cantidad de publicaciones que se muestran.

Carrusel de imágenes de búhos DP

El carrusel de imágenes de búhos de DP muestra imágenes dentro de un carrusel. Te permite agregar imágenes y mostrar las flechas y los controles. Las configuraciones de diseño incluyen texto, texto del título de la imagen, texto del contenido de la imagen, espaciado, flechas, controles y miniaturas. La pestaña avanzada es la misma que la del módulo DP Owl Carousel.

Puede agregar tantas imágenes como desee, hacer que se abran en una caja de luz y usar una versión copiada de la imagen o la imagen original. He elegido deliberadamente imágenes de diferentes tamaños para ver cómo funciona.

Las imágenes se muestran muy bien. Me gusta que puedas enlazar a una URL o abrirlas en una caja de luz. Me gustaría ver superposiciones agregadas a las imágenes, ya que esto mejoraría aún más la experiencia.

Ejemplos de carrusel de imágenes de búhos DP

Así es como se ve el módulo en la página usando la configuración predeterminada. Agregué un fondo en la sección para ayudarlo a destacar.

En este ejemplo, agregué títulos y texto a las imágenes. También configuré las flechas y los controles en colores grandes y cambiados para cada uno.

Éste muestra 4 imágenes. Aumenté el tamaño de la imagen y disminuí el margen del elemento de 8 a 4. A continuación, ajusté los tamaños y colores de las fuentes, flechas y controles. Las fuentes del título tienen un mayor espaciado.

Este usa un fondo oscuro con nuevos colores para las fuentes, los controles y las flechas.

Así es como se ven las imágenes cuando las abres en una caja de luz. La animación de desplazamiento todavía funciona en segundo plano.

Tipos de publicaciones personalizadas

En el módulo Owl Carousel Pro, asegúrese de que Consulta personalizada esté deshabilitada (esto solo se usa si desea crear sus propios filtros personalizados en lugar de elegir categorías de la lista) y elija su tipo de publicación en Nombre de tipo de publicación personalizada. Instalé WooCommerce y ahora automáticamente tengo Producto como una opción.

Cada una de mis categorías de productos se agrega automáticamente a la lista de categorías. Ahora puedo desplazarme hacia abajo y seleccionar los productos que quiero mostrar en el carrusel.

Los productos se mostrarán, pero para mostrar los precios, necesito habilitar el campo personalizado, elegir el campo para mostrar y agregar una etiqueta para mostrar mi símbolo de moneda deseado. Desplácese hacia abajo y habilite Mostrar campos personalizados. Agregue _price a los nombres de los campos personalizados y $ a las etiquetas de los campos personalizados.

Ahora tengo un carrusel de productos que muestra las categorías de WooCommerce que seleccioné. Seleccioné mostrar 4 publicaciones, aumenté el tamaño de la imagen, cambié los colores de fuente para el título, meta y campos personalizados, y aumenté los tamaños de fuente para el título y los campos personalizados. En este ejemplo, solo estoy mostrando la fecha de la meta, pero al igual que las publicaciones regulares, podría mostrar la metainformación y un extracto.

Uso de Owl Carousel Pro con Extra y el complemento Divi Builder

Owl Carousel Pro también funciona muy bien con Extra. Este es el carrusel de imágenes.

Aquí hay un vistazo al complemento con el complemento Divi Builder instalado en el tema Twenty Seventeen WordPress. Este muestra mis productos WooCommerce.

Licencia

El complemento se puede utilizar en sitios web ilimitados para usted y sus clientes. Incluye 1 año de actualizaciones y soporte.

Pensamientos finales

Owl Carousel Pro agrega dos bonitos módulos al Divi Builder que le permiten mostrar publicaciones, proyectos, tipos de publicaciones personalizadas e imágenes dentro de un carrusel personalizable. Se incluyen la mayoría de las personalizaciones esperadas del módulo Divi, así como algunas funciones nuevas para controlar la pantalla.

Encontré que casi todas las funciones y configuraciones son intuitivas. Encontré los filtros personalizados confusos para el usuario promedio. Me gustaría ver varios ejemplos completos de creación de filtros, ya que esto demostraría las vastas capacidades de este complemento. Incluso si no desea lidiar con el código, la versión pro agrega suficientes características para que valga la pena considerarla.

Nos gustaría saber de ti. ¿Has probado Own Carousel Pro? Cuéntanos tu experiencia en los comentarios.

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