5 diseños creativos de módulos Divi Blurb

Vistazo

Aquí hay un adelanto de los 5 estilos de módulos publicitarios que crearé en este tutorial.

5 diseños creativos de módulos Divi Blurb

Suscríbete a nuestro canal de Youtube

Empezando

Para comenzar, deberá crear una nueva página. Desde su Panel de WordPress, vaya a Páginas > Agregar nuevo. Luego, asigne un título a su página e implemente el generador visual. Seleccione la opción «Construir desde cero». Una vez que el generador visual se carga en la página, está listo para comenzar a diseñar.

Este tutorial está diseñado para facilitar la creación de cada uno de estos diseños de estilo publicitario de forma individual, así que siéntase libre de saltar a la publicación hasta el diseño que desea crear. En otras palabras, no tienes que empezar con el primero.

1. Blurbs emergentes con listas de características

En este primer ejemplo, vamos a divertirnos un poco expandiendo anuncios fuera de la fila para crear un efecto emergente. Luego, podemos usar las columnas adyacentes al lado de cada una para agregar algunos anuncios publicitarios con íconos alineados a la izquierda para que sirvan como elementos destacados de la lista.

Para empezar, crea una nueva sección y una fila con una estructura de cuatro columnas.

Luego continúe y actualice la configuración de la fila de la siguiente manera:

Color de fondo: #2e3858

Hacer esta fila de ancho completo: SÍ

Usar ancho de medianil personalizado: SÍ

Ancho de medianil: 1

Igualar alturas de columna: SÍ

Margen personalizado: 5vw arriba, 5vw abajo

Relleno personalizado: 0px arriba, 0px abajo

Guardar ajustes.

Luego, en la primera columna, agregue su primer módulo publicitario.

Elimina la última oración en el cuadro de contenido para acortar un poco la cantidad de texto. Luego seleccione usar un ícono en lugar de una imagen y elija un ícono (cualquiera lo hará).

Luego actualice lo siguiente:

Color de fondo: #df4570

Color del icono: #ffffff

Orientación del texto: Centro

Fuente del título: Codificar Sans Semicondensado

Estilo de fuente del título: TT

Espaciado entre letras del título: 2px

Margen personalizado (escritorio): -5vw Superior, -5vw Inferior

Margen personalizado (tableta): 0px arriba, 0px abajo

Relleno personalizado: 5vw arriba, 5vw abajo, 3vw izquierda, 3vw derecha

Sombra de cuadro: ver captura de pantalla

Desenfoque de sombra de cuadro Intensidad: 80px

Con la opción de menú del botón derecho o las teclas de acceso rápido cmd+c y cmd+v, copie el módulo que acaba de crear y péguelo en la columna 3. Luego actualice la configuración del nuevo módulo publicitario con otro color de fondo brillante (pero complementario):

Color de fondo: #24c4a3

Ahora es el momento de agregar los anuncios publicitarios de elementos de lista adyacentes a los anuncios publicitarios emergentes que acabamos de crear.

Para hacer esto, agregue una nueva publicidad en la columna 2. Luego elimine el texto simulado en el cuadro de contenido para que solo quede el texto del título. Luego agregue un ícono para reemplazar su imagen como antes. Luego actualice la configuración de diseño de la siguiente manera:

Color del icono: #df4570

Ubicación de la imagen/icono: Izquierda

Fuente del título: Codificar Sans Semi Condensed

Relleno personalizado: 20px arriba, 20px abajo, 3vw izquierda, 3vw derecha

Duplique la propaganda dos veces para obtener tres propagandas de lista en total en la columna. Luego use la función Multiselect de Divi para seleccionar los tres anuncios publicitarios y luego cópielos y péguelos en la columna 4.

También puede usar la selección múltiple para seleccionar los tres anuncios publicitarios en la columna 4 y editar en masa la configuración del elemento para cambiar el color del icono de los tres a #24c4a3.

¡Eso es todo! La creación de anuncios publicitarios emergentes es una forma divertida de hacer que sus anuncios publicitarios se destaquen y tener anuncios publicitarios de lista adyacentes en el costado le brinda algunas opciones adicionales para diseños más creativos.

Aquí esta el resultado final.

2. Blurb promocional con imagen de fondo personalizada.

Este estilo de publicidad es excelente para presentar contenido y ofertas promocionales como un libro gratuito. La idea básica es colocar el contenido de la publicidad a la izquierda del módulo para dejar espacio para la imagen de fondo personalizada. Hagámoslo.

Primero agregue una sección regular con una estructura de fila de dos columnas. En la columna de la izquierda, agregue un nuevo módulo publicitario.

Actualice el texto del título y elimine la última oración del contenido simulado para reducir la cantidad de texto. Luego actualice su imagen con una imagen de libro (o una imagen de su producto). Un ícono de un libro o algo así también funcionará.

Estoy usando los activos de imagen del paquete de diseño de blog de viajes , así que siéntase libre de comenzar el diseño tomando esas imágenes.

SUGERENCIA: También puede agregar una URL de enlace de módulo a este módulo para que se pueda hacer clic en todo el módulo, ya que puede servir como una promoción.

A continuación, agregue una imagen de fondo al módulo. Asegúrese de que la imagen de fondo sea una imagen similar a un encabezado con el punto focal de la imagen en el lado derecho, de esa manera puede agregar su contenido a la izquierda de la imagen con el fondo distrayendo del texto.

Luego agregue un degradado de fondo para que sirva como una superposición parcial que se encuentra detrás del contenido y se superpone a la imagen de fondo para que el texto sea más legible. Para agregar el degradado de fondo, actualice lo siguiente:

Color izquierdo del degradado de fondo: rgba(255,255,255,0.8)

Color derecho del degradado de fondo: rgba(255,255,255,0)

Dirección del degradado: 90

grados Posición inicial: 40 %

Posición final: 70 %

Colocar degradado encima de la imagen de fondo: SÍ

Luego actualice lo siguiente:

Sombra del cuadro de imagen: vea la captura de pantalla

Fuente del título: Noto Serif

Tamaño del texto del título: 26 px

Fuente del cuerpo: Noto Sans

Tamaño del texto del cuerpo: 16 px

Ancho de la imagen: 150 px

Ancho del contenido (escritorio): 60 %

Ancho del contenido: (teléfono inteligente): 80 %

Relleno personalizado: 2vw abajo, 2vw izquierda, 2vw derecha

La técnica de diseño clave aquí es dar tanto a la imagen como al contenido un ancho personalizado para que el contenido pueda colocarse a la izquierda más adelante.

Ahora necesitamos agregar una sombra de cuadro en la parte superior de la publicidad para crear la impresión de que la imagen del libro se extiende por encima del módulo para lograr un buen efecto de superposición. Para hacer esto, actualice lo siguiente:

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: 0px

Posición vertical de sombra de cuadro: 50px

Color de sombra: #ffffff

El último paso involucra un pequeño fragmento de CSS personalizado necesario para alinear el contenido de la propaganda al lado izquierdo del módulo. Para hacer esto, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado en el cuadro de entrada Contenido de Blurb:

¡Ahora mira el resultado!

CONSEJO: No se olvide de las opciones de desplazamiento que están disponibles. ¡Intenta darle a la imagen del libro un borde al pasar el mouse para que las cosas cobren vida!

3. Circule el estilo de Blurb usando el degradado de fondo

Este estilo de propaganda simple utiliza gradientes de fondo para servir como un fondo circular para el contenido de su propaganda. Esta es una alternativa divertida a convertir todo el módulo de propaganda en un círculo usando CSS personalizado.

Comience agregando una nueva sección regular con una estructura de fila de tres columnas.

Luego agregue un módulo de propaganda a la columna de la izquierda.

Luego, elimine la última oración del contenido para disminuir la cantidad de texto. Es importante para este diseño mantener la cantidad de texto algo pequeña porque lo ajustará dentro de un círculo.

Luego agregue un degradado de fondo para crear el fondo del círculo de la siguiente manera:

Color izquierdo del degradado de fondo: #fa7f28

Color derecho del degradado de fondo: rgba(255,255,255,0)

Tipo de degradado: radial

Posición inicial: 60 %

Posición final: 0 %

Colocar degradado encima de la imagen de fondo: SÍ

Luego actualice el resto de la configuración de diseño de la siguiente manera:

Orientación del texto: Centro

Fuente del título: Oswald

Estilo de fuente del título: TT

Espaciado entre letras del título: 1 px

Fuente del cuerpo: Peso de la fuente del cuerpo del robot

: Tamaño del texto del cuerpo ligero

: 16 px

Ancho (tableta): 80 %

Alineación del módulo: Centro

Relleno personalizado (escritorio): 20 % Superior, 25 % Inferior, 20 % Izquierda, 20 % Derecha

Relleno personalizado (smartphone): 20 % Superior, 25 % Inferior, 10 % Izquierda, 10 % Derecha

La clave aquí es ajustar correctamente el relleno personalizado para que el círculo de fondo esté alineado con el contenido en el centro. Es posible que deba ajustar esta configuración según la cantidad de contenido que tenga.

Ahora puede copiar y pegar el módulo en las columnas restantes.

Luego actualice la configuración de la fila para que tenga un ancho personalizado del 80 % y un ancho de medianil de 1.

Para completar el diseño, puede agregar una imagen de fondo y un degradado a su sección de la siguiente manera:

Añadir imagen de fondo

Fondo degradado Color izquierdo: rgba(2,0,76,0.51)

Fondo degradado Color derecho: rgba(2,0,76,0.84)

Colocar degradado encima de la imagen de fondo: SÍ

¡Eso es todo! ¡Mira el diseño final!

Para obtener espacio adicional, siempre puede reducir el tamaño del ícono de la publicidad a algo así como 50 px para evitar que los círculos colisionen en anchos de navegador más pequeños. Al realizar ajustes, no olvide aprovechar la función Multiselect de Divi para realizar ediciones masivas en todos los módulos a la vez.

Sugerencia adicional: convertir todo el módulo de Blurb en un círculo con CSS personalizado

Si estaba buscando convertir todo el módulo en un círculo (en lugar de usar el degradado de fondo), reemplace el degradado con un color de fondo normal y agregue este CSS personalizado en la pestaña Avanzado de la configuración del módulo de publicidad:

En el cuadro Elemento principal:

En el cuadro Contenido de Blurb:

Este CSS personalizado anula el conjunto de relleno en la configuración del módulo de publicidad, por lo que es posible que deba eliminar ese fragmento si desea recuperar el control de esa configuración. Además, este css usa flex para centrar el contenido de la publicidad dentro del círculo. Esto será de utilidad.

Se verá así si se aplica a los tres módulos.

4. Blurb enmarcado con bordes y sombras de cuadro

Una de mis características de diseño Divi favoritas de todos los tiempos para divertirme son las sombras de caja. Ya presentamos un uso creativo para las sombras de los cuadros en nuestro diseño de promoción publicitaria anteriormente, donde creamos el efecto de superposición. Pero también puede usar las sombras de los cuadros como una forma creativa de enmarcar su contenido con diseños de cuadrícula rota. En este diseño, te mostraré cómo combinar bordes y sombras de cuadros de una manera única.

Para comenzar, agregue una nueva sección regular con una estructura de fila de tres columnas. Luego agregue el módulo de propaganda a la primera columna.

Agregue una imagen a la propaganda. Luego, dele a la imagen de la propaganda un borde y una sombra de cuadro actualizando la configuración de diseño de la siguiente manera:

Ancho del borde superior de la imagen: 8 px

Color del borde superior de la imagen: #2f3854

Ancho del borde izquierdo de la imagen: 8 px

Color del borde izquierdo de la imagen: #2f3854

Sombra de cuadro de imagen: ver captura de pantalla

Posición horizontal de sombra de cuadro: -20 px

Posición vertical de sombra de cuadro: -30 px

Color de sombra: #f89da9

Luego actualice la fuente y el espaciado del título y el cuerpo de la siguiente manera:

Fuente del título: Yeseva One

Body Fuente: Montserrat

Margen personalizado: 50 px Inferior Relleno

personalizado: 2vw Inferior

Finalmente, dele a su módulo de publicidad un borde personalizado y una sombra de cuadro para equilibrar el diseño del marco de la siguiente manera:

Ancho del borde derecho: 15 px

Color del borde derecho: #2f3854

Ancho del borde inferior: 15 px

Color del borde inferior: #2f3854

Sombra de cuadro de imagen: ver captura de pantalla

Posición horizontal de sombra de cuadro: 20 px

Posición vertical de sombra de cuadro: 35 px

Color de sombra: #dddddd

Ahora copie y pegue el módulo en las columnas 2 y 3 y actualice las imágenes publicitarias para terminar el diseño.

Aquí esta el resultado final.

5. Diseñar Blurbs como una lista curva

Este próximo diseño es una forma divertida de crear listas usando anuncios publicitarios. Usando algunos márgenes personalizados, puede curvar los elementos de su lista de publicidad para envolver elementos en su página. En este ejemplo, voy a curvar la lista para que se ajuste al lado derecho de un ícono de publicidad grande. Y puedes ser un poco creativo

Primero, agregue una nueva sección regular con una estructura de fila de dos columnas.

Antes de agregar cualquier módulo publicitario, asigne a su fila un ancho personalizado y un ancho de medianil actualizando la configuración de su fila de la siguiente manera:

Ancho personalizado: 700 px

Ancho del canalón: 2

Ahora vamos a crear el icono de publicidad grande agregando el módulo de publicidad en la columna de la izquierda. Luego saque el texto del título y el contenido. Y luego elige el icono de la bombilla. Ahora solo debería estar visible el icono. A continuación, actualice el color y el tamaño del icono de la siguiente manera:

Color del icono: #96a6bd

Tamaño de fuente del icono (escritorio): 400 px

Tamaño de fuente del icono (smartphone): 200 px

En la columna de la derecha, agregue un nuevo módulo publicitario. Este será el primero de cinco anuncios publicitarios totales que conformarán nuestra lista. Luego abra la configuración del módulo y saque el contenido dejando solo el texto del título. Luego elija el ícono de la flecha hacia la derecha para la propaganda.

A continuación, actualice la configuración de diseño de la siguiente manera:

Color de fondo: #bb7860

Color de icono: #ffffff

Colocación de imagen/icono: Izquierda

Usar tamaño de fuente de icono: SÍ

Tamaño de fuente de icono: 30 px Fuente de

título: Raleway

Color de texto de título: #ffffff

Tamaño de texto de título: 20 px

Altura de línea de título: 1,5 em

Margen personalizado : 5 % inferior

Relleno personalizado: 3 % superior, 10 % izquierdo, 2 % derecho

Duplica el módulo cuatro veces hasta que obtengas un total de cinco anuncios publicitarios apilados en la columna de la derecha.

Luego, dele a la segunda publicidad un nuevo color, márgenes personalizados para empujarla hacia la derecha y esquinas redondeadas creativas de la siguiente manera:

Color de fondo: #393e56

Margen personalizado (escritorio): 10 % a la izquierda, -10 % a la derecha

Margen personalizado (tableta): 0 % a la izquierda, 0 % a la derecha

Esquinas redondeadas: 50 px arriba a la derecha, 50 px abajo a la izquierda

Antes de salir de este módulo, copie las esquinas redondeadas haciendo clic derecho en la opción en la configuración de la publicidad.

Luego, guarde la configuración de la publicidad y haga clic con el botón derecho en el primer módulo (superior) que creó y pegue el estilo de las esquinas redondeadas del módulo.

Ahora continuemos actualizando los últimos tres módulos con los colores, espacios y diseños de esquinas redondeadas adecuados.

Para la tercera propaganda de la columna, actualice lo siguiente:

Color de fondo: #96a6bd

Margen personalizado (escritorio): 20 % a la izquierda, -20 % a la derecha

Margen personalizado (tableta): 0 % a la izquierda, 0 % a la derecha

Esquinas redondeadas: 50 px arriba a la derecha, 50 px abajo a la derecha

Para la cuarta propaganda, actualice lo siguiente:

Color de fondo: #393e56

Margen personalizado (escritorio): 10 % a la izquierda, -10 % a la derecha

Margen personalizado (tableta): 0 % a la izquierda, 0 % a la derecha

Esquinas redondeadas: 50 px arriba a la izquierda, 50 px abajo a la derecha

Para el quinto anuncio, simplemente copie las esquinas redondeadas en el cuarto anuncio y péguelas.

¡Eso es todo! Veamos el diseño final.

Más inspiración de estilo de Blurb

Si está interesado en explorar diseños de módulos publicitarios más divertidos, consulte los enlaces a continuación:

• Puede utilizar fondos curvados asimétricamente para los anuncios publicitarios.
• Puede enmarcar sus módulos publicitarios con diseños creativos usando divisores de sección .
• Puede crear su propia forma de imagen de fondo para crear un diseño de cuadrícula geométrica .
• Aprenda a combinar íconos publicitarios para crear un elemento gráfico centrado para su sección en la publicación en sombras de cuadro de un lado .
• Y no te olvides de explorar nuestros diseños prefabricados de Divi gratuitos disponibles en Divi Builder para obtener estilos publicitarios aún más inspiradores.

¡Bueno, espero que estos ejemplos te hayan inspirado para ver lo que es posible con el módulo Divi Blurb! El cielo es el límite aquí. Este módulo es extremadamente popular y probablemente se usará en casi todos los sitios que cree, por lo que es bueno tener un conjunto versátil de ideas para que los diseños no comiencen a verse iguales. A veces, simplemente cambiar los colores y las fuentes puede darles un aspecto completamente nuevo, ¡así que siéntete libre de tomar estas ideas y hacerlas tuyas!

Espero escuchar de usted en los comentarios.

¡Salud!