Encuéntrelo en el mercado Divi
¡ Divi Blurb Extended 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 Extended 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
El módulo de propaganda de Divi es uno de los módulos más populares que he visto en uso. Es genial para mostrar imágenes o íconos con un título y texto corto en un solo módulo. A menudo se utilizan con módulos de botones para ampliar su uso. A veces veo módulos de imágenes, texto y botones que se usan en lugar de módulos publicitarios si se necesitan más funciones. Otra opción es utilizar un complemento de terceros llamado Divi Blurb Extended .
Divi Blurb Extended es un módulo publicitario con nuevas características que se pueden usar en lugar de múltiples módulos. Las características añadidas incluyen múltiples posiciones de íconos, nuevas formas de íconos, un botón de leer más y cambios de color al pasar el mouse.
Funciona con Extra y el complemento Divi Builder. Estoy usando Divi Blurb Extended versión 1.1.0, Divi versión 3.3.1 y WordPress versión 4.9.6.
Instalación de Divi Blurb Extended
Antes de cargar el complemento, primero debe descomprimir el archivo de descarga. Dentro del archivo hay dos carpetas más:
- Divi Blurb Extended (este es el archivo del complemento)
- Divi Blurb Extended Layouts JSON (este es un archivo de diseño opcional que se puede cargar en la Biblioteca Divi)
Cargue y active el complemento dentro de la carpeta. No se necesita ninguna otra configuración.
Módulo extendido Divi Blurb
Se agrega un nuevo módulo llamado Divi Blurb Extended a Divi Builder . Es verde, por lo que se destaca.
La pestaña Contenido incluye la configuración familiar de publicidad para el título y el texto del contenido, la URL, la imagen y el icono, y el fondo. Agrega una función para el botón, completa con texto y opciones de estilo.
La pestaña Diseño incluye configuraciones para el diseño (elija entre clásico, flipbox, easbox, borderbox y tarjeta de imagen), ubicación de imágenes e íconos (elija entre arriba, derecha o izquierda), estado de desplazamiento, texto, texto de título, texto del cuerpo, tamaño, borde, sombra de cuadro y animación.
La pestaña Avanzado incluye campos CSS para todos los elementos publicitarios. Tiene acceso a la imagen publicitaria, el título, el contenido, el botón Leer más y el botón Leer más.
Ejemplos extendidos de Divi Blurb
Reemplacé los anuncios publicitarios en el paquete de diseño de Doctor’s Office con módulos Divi Blurb Extended. Los únicos cambios que hice con los colores y el tamaño del icono. El tamaño predeterminado del icono era de 96 píxeles. Lo configuré en 16. Si fui más pequeño, el círculo permaneció del mismo tamaño mientras que el ícono dentro de él se hizo más pequeño. Sería fácil hacer que la propaganda se parezca al original. Haré algunos cambios personalizados que son más exclusivos de este módulo.
Nota: al principio funcionó muy bien con Frontend Builder, pero tuve que volver al backend builder porque el módulo no estaba visible después de crear el primero. Puede colocar los módulos dentro del Frontend Builder, pero tendrá que usar el backend builder para realizar los ajustes.
Cambie la forma del icono seleccionando su elección en un cuadro desplegable. Elija entre círculo, cuadrado o hexágono. Aquí está el mismo diseño con iconos cuadrados.
Aquí están los iconos con forma de hexágono. Cambié el tamaño del ícono a 66 y agregué un efecto de desplazamiento para cambiar el color del ícono y el fondo al pasar el mouse. También agregué una sombra de cuadro y algo de relleno para alejar el texto del borde.
Aquí hay un vistazo a los anuncios publicitarios estándar en el paquete de diseño de Arquitectura. Utilizan un módulo de botones para vincular a más información. Con Divi Blurb Extended podemos eliminar el módulo de botones extra. Uno de estos anuncios publicitarios no es como los demás.
Recreé uno de los módulos y dejé los originales para comparar. Puedes decir cuál es el mío. Estoy usando las mismas fuentes y estilos, imagen, etc. El mío solo usa un módulo, así que no tuve que agregar el módulo de botones. Tuve que agregar relleno en CSS para crear la cantidad adecuada de espacio entre el texto y el botón. Sin embargo, lo único que no hice fue eliminar el margen del botón, por lo que el mío no está alineado con el lado izquierdo del texto como lo están los demás.
Ahora he recreado todas las publicidades con los módulos Divi Blurb Extended. Para estos, he elegido opciones de diseño que incluyen animación. El izquierdo usa Flipbox y el derecho usa Easebox.
Para el Flipbox, puede tener diferentes colores o imágenes para el anverso y el reverso de la tarjeta si lo desea. Para este, he agregado una imagen para el frente. Cambié el color del texto del encabezado y agregué un efecto de texto para que sea fácil de leer.
Al pasar el mouse, la tarjeta se voltea para revelar el color que configuré como fondo.
Agregué un efecto de borde para el interior de la tarjeta, que se puede ver a medida que la tarjeta gira.
Los otros dos diseños no están animados. El de la izquierda es Borderbox y el de la derecha es Imagecard. He diseñado el borde de la izquierda para que coincida con el texto del botón. Eliminé el ícono para ambos, pero también puedes diseñar el ícono. Sin agregar CSS para el relleno, colocó las imágenes en lugares incómodos.
Diseños extendidos de Divi Blurb
El archivo de descarga incluye un archivo JSON comprimido. Descomprima el archivo llamado Divi Blurb Extended Layouts JSON e importe el archivo JSON a la Biblioteca Divi.
La búsqueda de Divi Blurb Extended en Divi Library muestra tres diseños: Classic, Image Card y Easebox. Estas son páginas completas con módulos prediseñados. Algunos de ellos incluyen un poco de CSS para el relleno.
Esta es una captura de pantalla del diseño clásico. Incluye todos los módulos en la página de demostración del editor y muestra lo que puede hacer el módulo. En este ejemplo, paso el cursor sobre la publicidad en la parte superior derecha. Utiliza un efecto de desplazamiento para cambiar el fondo del ícono a azul y el ícono a blanco.
Este usa un agradable efecto de desplazamiento para el botón leer más. Me gustan especialmente los hexágonos para los iconos. Muestra los módulos sobre un fondo de paralaje.
Aquí hay otra sección del diseño clásico. El conjunto de módulos en la parte superior incluye un fondo de paralaje. Los módulos de la parte inferior muestran un buen ejemplo de fondos de colores.
El diseño de Imagecard es interesante. Muestra tres cartas sin espacio entre ellas. Los iconos se superponen a la imagen y muestran las tres opciones de ubicación. La tarjeta se parece a una tarjeta de blog. Esto funcionaría bien para enlaces a artículos, páginas, servicios, etc.
El diseño de Easebox incluye muchos ejemplos. Los anuncios publicitarios en la parte superior usan los íconos como enlaces, mientras que los anuncios publicitarios en la parte inferior usan animación de desplazamiento para mostrar el botón leer más y cambiar el color del fondo y el texto.
Aquí hay otra sección del diseño de Easebox, que también usa animación flotante. El botón leer más se revela al pasar el mouse.
Divi Blurb extendido con extra
Divi Blurb Extended funcionó igual de bien con Extra. Este es el diseño de Easebox.
Este es el diseño de Imagebox. No se necesitaron cambios de estilo para que funcione con Extra.
Licencia extendida, documentación y soporte de Divi Blurb
Puede comprar Divi Blurb Extended desde el sitio web del editor . Hay dos licencias disponibles:
- Sitio único – $19
- Extendido – $49
La documentación se proporciona mediante preguntas frecuentes en el sitio del editor. El soporte se proporciona a través de correo electrónico.
pensamientos finales
Divi Blurb Extended funciona de la misma manera que el módulo Divi Blurb estándar, pero agrega varias características nuevas que incluyen formas de íconos, un botón para leer más y algunos diseños con animación. Los diseños agregados brindan un buen punto de partida y le muestran algunas de las cosas que puede hacer el módulo.
Si sabe cómo usar el módulo de publicidad estándar, no tendrá ningún problema para usar este. Encontré la configuración intuitiva de usar y si conoces CSS puedes personalizar los elementos aún más. Si desea más funciones para sus anuncios publicitarios, vale la pena echarle un vistazo a Divi Blurb Extended.
Queremos escuchar de ti. ¿Has probado Divi Blurb Extended? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada vía SilviaC / shutterstock.com