Encuéntrelo en el mercado Divi
¡ Divi Next Blurb está disponible en Divi Marketplace! Eso significa que ha pasado nuestra revisión y se ha encontrado que cumple con nuestros estándares de calidad. Puede visitar Divi Next en el mercado para ver todos sus productos disponibles. Los productos comprados en Divi Marketplace vienen con uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días (al igual que Divi).
Compra en el mercado Divi
Divi Next Blurb es un módulo de propaganda de terceros que agrega varias funciones para crear diseños publicitarios únicos. El módulo muestra íconos e imágenes al mismo tiempo, le permite personalizar prácticamente todos los elementos de forma independiente e incluso agrega muchos efectos de desplazamiento a la mayoría de los elementos. En este artículo, echaremos un vistazo a Divi Next Blurb y veremos lo que puede hacer.
Módulo Divi Next Blurb
Una vez que carga y activa Divi Next Blurb, se agrega un nuevo módulo a Divi Builder llamado Next Blurb. No tendrás que configurar nada. Está listo para usar.
Pestaña de contenido Divi Next Blurb
La pestaña Contenido incluye configuraciones para el texto, lo que le permite habilitar un texto de encabezado previo, ingresar el texto, elegir la etiqueta del encabezado y habilitar el texto del encabezado de la publicación. También puede agregar contenido.
El encabezado anterior coloca el texto sobre el encabezado, mientras que el encabezado posterior coloca el texto debajo del encabezado. Puede cambiar la etiqueta de encabezado para cada uno.
Añade una imagen y un icono al mismo tiempo o de forma independiente. El módulo de publicidad Divi estándar solo muestra uno u otro. Divi Next Blurb abre muchas posibilidades de diseño al permitirle mostrar ambos al mismo tiempo.
Incluya un botón con el estilo de botón estándar.
También incluye muchas opciones de color de fondo para el título, la descripción, la imagen, el icono y el botón. Puede habilitarlos y ajustarlos de forma independiente. Elige un color o un degradado para cada uno.
Pestaña de diseño Divi Next Blurb
La pestaña Diseño incluye configuraciones para la imagen, el icono, los efectos de desplazamiento, el título y el texto de descripción, y el texto del botón, el icono y los efectos de desplazamiento. La mayoría de los elementos también tienen secciones separadas para espaciado, bordes y sombras de cuadro. Hay muchos ajustes para diseñar su propaganda.
Siguiente imagen de Blurb
La configuración de la imagen le permite seleccionar la ubicación de la imagen y ajustar el borde. Este ejemplo coloca la imagen en la parte inferior izquierda.
Éste coloca la imagen en el centro derecho. Agregué un borde y cambié su color. También he añadido una sombra de caja.
Para este ejemplo, he colocado la imagen en la parte inferior central. Quité el borde y redondeé las esquinas. Este tiene una sombra de caja diferente.
El icono también incluye opciones de ubicación. También puede ajustar el tamaño, el color, el borde, etc. Para este ejemplo, he colocado el icono en la parte inferior derecha.
Siguiente icono de Blurb
Este ejemplo muestra el icono en el centro izquierdo. Aumenté el tamaño, agregué un borde y cambié el color del borde.
Este ejemplo muestra el icono en la parte superior central. Reduje el tamaño, agregué una sombra de cuadro y redondeé las esquinas para crear un círculo.
Siguiente Efectos de desplazamiento de Blurb
El efecto de desplazamiento incluye una opción 2D e inclinación. La opción 2D proporciona 16 efectos para elegir.
Este ejemplo muestra el efecto de desplazamiento del pulso.
El efecto de inclinación incluye opciones de deslumbramiento, una opción inversa, perspectiva, velocidad, puntos inicial y final, etc. Este ejemplo muestra la opción de inclinación estándar con deslumbramiento habilitado. He dejado la configuración por defecto.
Este ejemplo agrega más brillo y perspectiva. Hay muchas maneras de personalizar la inclinación.
Siguiente texto de Blurb
El texto del título tiene configuraciones para el texto previo, de encabezado y posterior. Incluyen todas las configuraciones que esperaría para el texto. He ajustado los tres conjuntos de texto en este ejemplo.
El texto de la descripción incluye todas las configuraciones de texto estándar, incluidos los ajustes del texto, los enlaces, las viñetas, las comillas, etc. En este ejemplo, aumenté el tamaño de la fuente, la cambié a rojo y agregué un efecto de sombra.
Siguiente botones de Blurb
Se incluyen todos los ajustes de íconos y texto de botones estándar. He aumentado el tamaño de la fuente y cambiado el color. Este ejemplo muestra la configuración del icono del botón.
Button Hover incluye muchos ajustes, incluidos 2D, fondo, trazo e icono. La configuración 2D incluye muchos efectos de desplazamiento.
Button Hover incluye muchos ajustes, incluidos 2D, fondo, trazo e icono. La configuración 2D tiene muchos efectos de desplazamiento. El efecto de fondo incluye otro conjunto de efectos. Esto muestra el botón al pasar el mouse.
Stroke agrega ajustes de fondo y borde, así como varios efectos de desplazamiento. Este ejemplo agrega un borde alrededor del interior y cambia los colores.
Icon también agrega una gran cantidad de efectos de desplazamiento que solo afectarán al icono al pasar el mouse.
Ejemplo uno de Divi Next Blurb
Como ejemplo, quiero reemplazar el texto Venta en el lado derecho en el diseño de Leather Company con un módulo Next Blurb y agregar algunas funciones.
Normalmente se hace con un módulo de texto y un botón, como puede ver aquí en la vista de estructura alámbrica. El fondo negro se agrega a la columna.
Aquí está la llamada a la acción de venta recreada usando solo el módulo Next Blurb. Todavía estoy usando el fondo negro para la columna en este ejemplo.
Aquí hay un vistazo a la vista de estructura alámbrica. El módulo funciona bien con las secciones de especialidad.
Ahora puedo agregar efectos y funciones que no podía obtener con la imagen y el botón en el diseño original. Por ejemplo, agregué un efecto de desplazamiento 2D Grow Rotate. Dado que coloqué el texto del encabezado y el botón sobre el fondo negro para ese espacio de columna, la tarjeta parece permanecer en su lugar mientras el contenido se inclina.
Este incluye el efecto de inclinación. Agregué un resplandor para que la tarjeta sea visible en el fondo al pasar el mouse.
Para este ejemplo, he agregado una imagen a la propaganda. Lo dejé en la parte superior de la tarjeta publicitaria.
Para este, agregué el efecto pop hover, solo para mostrar la animación. Esta es una buena manera de captar la atención de los visitantes mientras se desplazan sobre la propaganda.
Este incluye el efecto de inclinación sin deslumbramiento habilitado. La tarjeta se inclina dentro de la columna, pero los bordes de la tarjeta no se perciben.
Eliminé el fondo de la columna y lo agregué al módulo. Esto mantiene el fondo negro detrás del texto. También agregué una sombra de cuadro solo a la imagen. Eliminé el borde, así que cuando uso un efecto de inclinación, el borde no se muestra.
Así es como se ve con el efecto de inclinación. Hace un gran trabajo al agregar perspectiva a la imagen. Me encanta el aspecto de la sombra de la caja.
Ejemplo dos de Divi Next Blurb
Para este ejemplo, quiero reemplazar los anuncios publicitarios en el diseño de la página de inicio de inicio con los módulos Next Blurb y hacerlos un poco más complejos en su diseño.
Fue fácil recrear la publicidad con su configuración actual. Todo lo que he hecho aquí es agregar la imagen, el título y el contenido. Ahora, haré algunos ajustes.
Moví la imagen hacia la parte superior izquierda y agregué una sombra de cuadro tanto a la imagen como al cuerpo del texto. Las esquinas del borde están redondeadas y el cuerpo del texto ahora tiene 5 píxeles de relleno para la parte superior e inferior.
Para este, coloqué el ícono en el centro derecho y ajusté el espaciado de la imagen para alinearlo con el texto del encabezado. Hice el texto en blanco y le di al fondo del cuerpo el color del texto original. Para el texto del encabezado, hice que el fondo fuera un degradado.
Aquí están los resultados. Agregué relleno en la parte superior del texto del encabezado, centré todo el texto y agregué un botón con un borde inferior. Agregué las imágenes al centro inferior y aumenté su tamaño. Las imágenes incluyen un toque de relleno en la parte superior para agregar algo de espacio entre ellas y el área de contenido. Los botones tienen una sombra de cuadro que apenas se nota. He ocultado los bordes superior y lateral para que solo se muestre el borde inferior. Para el efecto de desplazamiento, agregué inclinación 3D.
Así es como se ven los Next Blurbs dentro del diseño.
Divi Next Blurb Precio y dónde comprar
Divi Next Blurb tiene tres licencias disponibles:
- Licencia Individual – $25.00
- Licencia Ilimitada – $49.00
- Licencia de por vida – $99.00
Puedes comprarlo desde el sitio web del desarrollador .
pensamientos finales
Divi Next Blurb es un módulo interesante para Divi. Solo he arañado la superficie de lo que puede hacer y lo que se puede diseñar con él. Tiene muchas más configuraciones y ajustes de los que esperaba. Casi todos los elementos tienen su propia configuración de borde, espaciado y sombra de cuadro.
Hay algunas características que parecen que podrían colocarse en áreas más estándar. Por ejemplo, el selector de etiquetas de encabezado está en la pestaña de contenido en lugar de en la pestaña de diseño. Todavía es fácil averiguar dónde están las cosas y no tuve problemas para entender lo que hace cualquiera de las configuraciones.
Me gusta mucho Divi Next Blurb. Si está interesado en un módulo de propaganda fácil de usar que hace mucho más que el módulo Divi estándar, vale la pena echarle un vistazo a Divi Next Blurb.
Queremos escuchar de ti. ¿Has probado Divi Next Blurb? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada a través de Leonid Zarubin / shutterstock.com