5 diseños creativos de módulos Divi Blurb

Publicado: 2018-10-22

En esta publicación, exploraremos una de las características más populares de Divi, el Módulo Blurb. Aunque aparentemente simple desde el principio, tiene muchas características personalizables que pueden dar vida a los elementos de su sitio web. Generalmente, el Módulo Blurb se usa para cosas como servicios, beneficios, información de contacto, etc., pero con Divi, las posibilidades son infinitas.

¡Vamos a divertirnos un poco!

Vistazo

Aquí hay un adelanto de los 5 estilos de módulos de propaganda 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 constructor visual. Seleccione la opción "Construir desde cero". Una vez que el constructor 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 individualmente, así que siéntase libre de saltar de la publicación al diseño que desea construir. En otras palabras, no tienes que empezar con el primero.

1. Desenfoques emergentes con listas de funciones

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

Para comenzar, cree 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 canalón personalizado: SÍ
Ancho de la canaleta: 1
Ecualizar alturas de columna: SÍ
Margen personalizado: 5vw superior, 5vw inferior
Relleno personalizado: 0px arriba, 0px abajo

Guardar ajustes.

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

Saque la última oración del 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: Encode Sans Semi Condensed
Estilo de fuente del título: TT
Espaciado de letras de título: 2px
Margen personalizado (escritorio): -5vw superior, -5vw inferior
Margen personalizado (tableta): 0px superior, 0px inferior
Acolchado personalizado: 5vw superior, 5vw inferior, 3vw izquierda, 3vw derecha
Box Shadow: ver captura de pantalla
Fuerza del desenfoque de la sombra del cuadro: 80px

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

Color de fondo: # 24c4a3

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

Para hacer esto, agregue una nueva propaganda en la columna 2. Luego saque 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: Encode Sans Semi Condensed
Relleno personalizado: 20px superior, 20px inferior, 3vw izquierda, 3vw derecha

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

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

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

Aquí esta el resultado final.

2. Anuncio publicitario con imagen de fondo personalizada.

Este estilo de propaganda es ideal para presentar contenido y ofertas promocionales como un libro gratuito. La idea básica es colocar el contenido de la propaganda 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 de propaganda.

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 icono de un libro o algo así también funcionará.

Estoy usando los recursos de imagen del paquete de diseño de blogs de viajes, así que siéntete 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 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 que distraiga del texto.

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

Color de degradado de fondo a la izquierda: rgba (255,255,255,0.8)
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Dirección del gradiente: 90 grados
Posición inicial: 40%
Posición final: 70%
Colocar degradado sobre la imagen de fondo: SÍ

Luego actualice lo siguiente:

Image Box Shadow: ver captura de pantalla
Fuente del título: Noto Serif
Tamaño del texto del título: 26px
Fuente del cuerpo: Noto Sans
Tamaño del texto del cuerpo: 16px
Ancho de la imagen: 150px
Ancho del contenido (escritorio): 60%
Ancho del contenido: (teléfono inteligente): 80%
Acolchado personalizado: 2vw inferior, 2vw izquierdo, 2vw derecho

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

Ahora necesitamos agregar una sombra de cuadro en la parte superior de la propaganda 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:

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: 50px
Color de sombra: #ffffff

El último paso implica un pequeño fragmento de CSS personalizado necesario para alinear el contenido de la propaganda con el 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:

margin-left: 0;

¡Ahora mira el resultado!

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

3. Estilo de propaganda circular con degradado de fondo

Este estilo simple de propaganda utiliza degradados 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 filas de tres columnas.

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

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

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

Color de degradado de fondo a la izquierda: # fa7f28
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Tipo de degradado: radial
Posición inicial: 60%
Posición final: 0%
Colocar degradado sobre 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 de letras de título: 1px
Fuente del cuerpo: Robot
Peso de la fuente del cuerpo: Ligero
Tamaño del texto del cuerpo: 16px
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 canalón de 1.

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

Agregar imagen de fondo
Color de degradado de fondo a la izquierda: rgba (2,0,76,0.51)
Gradiente de fondo Color derecho: rgba (2,0,76,0.84)
Colocar degradado sobre la imagen de fondo: SÍ

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

Para obtener espacio adicional, siempre puede disminuir el tamaño del ícono de propaganda 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 de selección múltiple de Divi para realizar ediciones masivas en todos los módulos a la vez.

Consejo adicional: convertir todo el módulo 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 propaganda:

En el cuadro Elemento principal:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

En el cuadro Contenido de Blurb:

margin: auto;

Este CSS personalizado anula el conjunto de relleno en la configuración del módulo de propaganda, 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 propaganda dentro del círculo. Esto será de utilidad.

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

4. Anuncio enmarcado con bordes y sombras de caja

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 caja en nuestro diseño de propaganda de promoción anteriormente, donde creamos el efecto de superposición. Pero también puede usar sombras de cuadro 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 caja de una manera única.

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

Agrega una imagen a la propaganda. Luego, asigne a la imagen de 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: 8px
Color del borde superior de la imagen: # 2f3854
Ancho del borde izquierdo de la imagen: 8px
Color del borde izquierdo de la imagen: # 2f3854

Sombra de cuadro de imagen: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -20px
Posición vertical de la sombra del cuadro: -30px
Color de sombra: # f89da9

A continuación, actualice la fuente y el espaciado del título y el cuerpo de la siguiente manera:

Fuente del título: Yeseva One
Fuente del cuerpo: Montserrat
Margen personalizado: 50px inferior
Acolchado personalizado: parte inferior 2vw

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

Ancho del borde derecho: 15px
Color del borde derecho: # 2f3854
Ancho del borde inferior: 15px
Color del borde inferior: # 2f3854

Sombra de cuadro de imagen: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 20px
Posición vertical de la sombra del cuadro: 35px
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. Aplicar estilo a los desenfoques como 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 propaganda para envolver los elementos de su página. En este ejemplo, voy a curvar la lista para ajustarla al lado derecho de un ícono de propaganda 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 de propaganda, asigne a su fila un ancho personalizado y un ancho de canaleta actualizando la configuración de su fila de la siguiente manera:

Ancho personalizado: 700px
Ancho de la canaleta: 2

Ahora creemos el ícono de propaganda grande agregando el módulo de propaganda en la columna de la izquierda. Luego saque el texto del título y el contenido. Y luego elige el ícono 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): 400px
Tamaño de fuente del icono (teléfono inteligente): 200px

En la columna de la derecha, agregue un nuevo módulo de propaganda. Este será el primero de cinco anuncios publicitarios totales que compondrá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 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 del icono: #ffffff
Ubicación de la imagen / icono: Izquierda
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente del icono: 30px
Fuente del título: Raleway
Color del texto del título: #ffffff
Tamaño del texto del título: 20px
Altura de la línea de título: 1.5em
Margen personalizado: 5% inferior
Relleno personalizado: 3% arriba, 10% izquierda, 2% derecha

Duplique el módulo cuatro veces hasta que obtenga un total de cinco anuncios apilados en la columna de la derecha.

Luego, dé a la segunda propaganda 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% izquierda, 0% 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 propaganda.

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

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

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

Color de fondo: # 96a6bd
Margen personalizado (escritorio): 20% a la izquierda, -20% a la derecha
Margen personalizado (tableta): 0% izquierda, 0% derecha
Esquinas redondeadas: 50 px arriba a la derecha, 50 px abajo a la derecha

Para la cuarta propaganda, actualice lo siguiente:

Para la quinta propaganda, simplemente copie las esquinas redondeadas en la cuarta propaganda y péguelas.

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

Más inspiración de estilo Blurb

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

Puede utilizar fondos curvados asimétricamente para los desenfoques.
Puede enmarcar sus módulos publicitarios con diseños creativos utilizando 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 iconos de propaganda para crear un elemento gráfico centrado para su sección en la publicación en sombras de cuadro de un solo lado.
Y no te olvides de explorar nuestros diseños prediseñados de Divi gratuitos disponibles en Divi Builder para obtener estilos publicitarios aún más inspiradores.

Bueno, espero que estos ejemplos te hayan inspirado a 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, el simple hecho de cambiar los colores y las fuentes puede darles un aspecto completamente nuevo, así que siéntete libre de tomar estas ideas y personalizarlas.

Espero tener noticias tuyas en los comentarios.

¡Salud!