Cómo ser creativo con el fondo de tu icono de Blurb en Divi

Los módulos Blurb son algunos de los elementos más versátiles que puedes encontrar en Divi. En esta publicación, le mostraremos cómo dar un paso más y ser creativo con el fondo del ícono de propaganda. Usaremos una combinación de módulos de propaganda, módulos de texto y módulos de llamada a la acción. Estos diseños únicos son perfectos para páginas de servicios y páginas de categorías de productos. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado de los tres ejemplos en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Móvil

Ejemplo # 2

Escritorio

Móvil

Ejemplo # 3

Escritorio

Móvil

Descargue los ejemplos de fondo de The Blurb Icon GRATIS

Para poner sus manos en los ejemplos de fondo de iconos de propaganda gratuitos, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

Pasos generales

Agregar nueva sección

Fondo

Para recrear estos diseños de fondo publicitarios creativos, abra una nueva página o agregue una nueva sección a una página existente. Antes de agregar una fila, agregue un color de fondo a su sección.

• Color de fondo: # f7f7f7

Espaciado

Agregue un poco de relleno superior e inferior personalizado a la sección también.

• Acolchado superior e inferior: 120 px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Antes de agregar módulos, ajuste el tamaño de la fila.

• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Luego, ajuste el relleno en la configuración de espaciado.

• Acolchado superior: 8vw
• Acolchado inferior: 15vw
• Acolchado izquierdo y derecho: 12vw

Columna 1

Una vez que haya terminado de modificar la configuración de la fila, realice algunos cambios en la primera columna.

Fondo

Primero, agregue un fondo blanco.

• Color de fondo: blanco #ffffff

Frontera

Luego, agregue un poco de radio de borde.

• Esquinas redondeadas: 2vw en las cuatro esquinas

Sombra de la caja

Finalmente, agregue una sombra de caja.

• Box-Shadow: primera opción
• Fuerza de desenfoque de sombra de caja: 47px

Clonar fila dos veces

Queda un último paso antes de que comencemos a agregar módulos. Clona la fila dos veces.

Recrear el ejemplo n. ° 1

Agregar módulo Blurb a la columna 1

Borrar contenido predeterminado

Ahora que hemos configurado nuestras filas y columnas, podemos comenzar a agregar módulos a la columna 1 de la primera fila. Primero, agregue un módulo de propaganda y borre todo el título y el texto del cuerpo predeterminados.

Elegir icono

Luego, elija un ícono en lugar de una imagen.

• Icono: Enlace

Fondo

Agregue un color de fondo negro al módulo de propaganda.

• Color de fondo: Negro # 000000

Configuración de iconos

Luego, cambie la configuración del icono.

• Color del icono: amarillo # edf000
• Ubicación del icono: Arriba
• Tamaño de fuente del icono:
  • Escritorio: 3vw
  • Tableta: 11vw
  • Teléfono: 13vw

Dimensionamiento

Continúe ajustando el tamaño del módulo.

• Ancho del contenido: 100%
• Ancho:
  • Escritorio: 11vw
  • Tableta: 19vw
  • Teléfono: 22vw

Espaciado

Agregue también algunos valores de espaciado.

• Margen superior: -5vw
• Margen inferior: 0vw
• Margen izquierdo: -1vw
• Acolchado superior y acolchado inferior: 4vw

Frontera

Para darle al ícono una forma única, agregue un radio de borde a cada una de las esquinas excepto a la de abajo a la izquierda.

• Esquinas redondeadas: 50vw, 0vw en la esquina inferior izquierda.

Sombra de la caja

Finalmente, agregue una sombra de cuadro.

• Box-Shadow: primera opción
• Fuerza de desenfoque de sombra de caja: 50px

CSS personalizado

El icono tiene, de forma predeterminada, un margen inferior adjunto. Para deshacernos de eso, agregaremos una sola línea de código CSS al cuadro CSS personalizado de la imagen publicitaria.

• Imagen publicitaria: margen inferior: 0px;

margin-bottom: 0px;

Agregar módulo de texto a la columna 1

Agregar contenido H3

Debajo del icono, agregue un módulo de texto con algún contenido H3 de su elección.

Fondo

Vaya a la configuración de fondo y agregue un fondo degradado.

• Fondo: degradado
• Color uno: transparente
• Color dos: amarillo # edf000
• Dirección del gradiente: 180 grados
• Posición inicial y final: 74%

Texto del título

Luego, aplique estilo al texto H3.

• Título del texto Nivel de encabezado: H3
• Fuente H3: Josefin Sans
• Alineación H3: Centro
• Color de fuente H3: negro #oooooo
• Tamaño del texto H3:
  • Escritorio: 2.4vw
  • Tableta: 3.4vw
  • Teléfono: 4.8vw
• Espaciado de letras H3: 0em

Dimensionamiento

En la configuración de tamaño, ajuste el ancho para la tableta y el teléfono.

• Ancho:
  • Tableta: 50%
  • Teléfono: 60%

Espaciado

Continúe yendo a la configuración de espaciado y ajustando los valores de los márgenes.

• Margen izquierdo y derecho: 5vw
• Acolchado superior: 1vw

Transformar

Finalmente, rote el módulo con las opciones de transformación.

• Transformar Traducir:
  • eje x: -20vw
  • eje y: 13vw
• Transformar Girar: Primera opción, 280 grados

Agregar módulo de llamado a la acción a la columna 1

Eliminar contenido de título predeterminado, agregar botón y contenido de texto

El siguiente y último módulo que necesitamos en la columna 1 es un módulo de llamada a la acción. Agregue algún contenido de su elección y elimine la copia del título.

Añadir enlace

Agregue un enlace relevante al botón.

Fondo

Asegúrese de que el fondo no tenga color.

Cuerpo de texto

Luego, vaya a la pestaña de diseño y cambie la configuración del texto del cuerpo.

• Fuente del cuerpo: Crimson Text
• Alineación del texto del cuerpo: izquierda
• Color del texto del cuerpo: gris oscuro # 666666
• Tamaño del texto del cuerpo:
  • Escritorio: 1.2vw
  • Tableta: 2.6vw
  • Teléfono: 3.1vw
• Altura de la línea del cuerpo: 1.8em

Botón

Modifique también los estilos de los botones.

• Tamaño del texto del botón:
  • Escritorio: 1vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Color del texto del botón: gris muy oscuro # 3f3f3f
• Color del borde del botón: gris muy oscuro # 3f3f3f
• Fuente del botón: Josefin Sans
• Margen del botón: 3vw
• Acolchado superior e inferior del botón: 1vw
• Acolchado del botón izquierdo y derecho: 3vw

Espaciado

Complete la configuración del módulo agregando algo de relleno izquierdo y derecho.

• Acolchado izquierdo y derecho: 7vw

Eliminar la columna dos y clonar la columna 1

Ajustar la configuración en la columna 2

Ahora, vuelva a la configuración de la fila y elimine la segunda columna. Inmediatamente después, clona la primera columna. En los siguientes pasos, ajustaremos algunas configuraciones en la columna duplicada.

Módulo de propaganda

Comience cambiando el color del icono del módulo de propaganda.

• Color del icono: Aqua # 00ffd4

Módulo de texto

Cambie el fondo degradado y copie el módulo de texto a continuación.

• Color de fondo: Aqua # 00ffd4
• Cambiar contenido

Recrear el ejemplo n. ° 2

Agregar módulo Blurb a la columna 1

Eliminar contenido predeterminado

¡Pasemos al segundo ejemplo! Agregue un módulo de propaganda a la columna 1 y elimine todo el contenido predeterminado.

Elegir icono

Luego, elija un icono.

Fondo

Ahora, agregue un color de fondo amarillo.

• Color de fondo: amarillo # edf000

Icono

Continúe modificando la configuración del icono en la pestaña de diseño.

• Color del icono: blanco #ffffff
• Ubicación del icono: Arriba
• Tamaño de fuente del icono:
  • Escritorio: 3vw
  • Tableta: 11vw
  • Teléfono: 12vw

Dimensionamiento

Una vez que se hayan diseñado el color y el fondo, ajuste el tamaño del módulo.

• Ancho del contenido: 100%

Espaciado

Modifique también la configuración de espaciado.

• Margen inferior: 0vw
• Margen izquierdo y derecho: 3vw
• Acolchado superior e inferior: 2vw

Frontera

Agregue un poco de radio de borde a cada esquina a continuación.

• Esquinas redondeadas: 2vw en las cuatro esquinas

Sombra de la caja

Complete el diseño del módulo agregando una sombra de caja sutil.

• Box-Shadow: primera opción

Eliminar la sombra del cuadro y el color de fondo de la columna 1

Abra la configuración de la columna 1 a continuación y elimine el color de fondo y la sombra del cuadro.

CSS personalizado

Elimine el margen inferior predeterminado aplicado al icono de propaganda agregando una sola línea de código CSS a la pestaña avanzada.

• Imagen publicitaria: margen inferior: 0px;

margin-bottom: 0px;

Agregar módulo de llamado a la acción a la columna 1

Agregar contenido de título, contenido de cuerpo y contenido de botón

Debajo del módulo de propaganda, agregue un módulo de llamado a la acción e inserte el contenido de su elección.

Añadir enlace

Agregue un enlace al botón siguiente.

Fondo

Continúe agregando un fondo blanco.

• Color de fondo: blanco #ffffff

Texto del título

En la pestaña de diseño, aplique estilo al texto del título H3.

• Nivel de encabezado del título: H3
• Fuente H3: Josefin Sans
• Color de fuente H3: Gris muy oscuro # 3f3f3f
• Tamaño H3:
  • Escritorio: 2vw
  • Tableta: 4vw
  • Teléfono: 6vw
• Altura de la línea H3: 2.3em

Cuerpo de texto

Luego, aplique estilo al texto del cuerpo.

• Fuente del cuerpo: Crimson Text
• Alineación del texto del cuerpo: izquierda
• Color del texto del cuerpo: gris oscuro # 666666
• Tamaño del texto del cuerpo:
  • Escritorio: 1.1vw
  • Tableta: 2.2vw
  • Teléfono: 3.1vw
• Altura de la línea del cuerpo: 1.8em

Botón

Continúe con la configuración de los botones y modifique el estilo del botón de la siguiente manera:

• Tamaño del texto del botón:
  • Escritorio: 1vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Color del texto del botón: gris muy oscuro # 3f3f3f
• Fuente del botón: Josefin Sans
• Ancho del borde del botón: 2-x
• Color del borde del botón: gris muy oscuro # 3f3f3f
• Margen superior e inferior del botón: 3vw
• Acolchado superior e inferior del botón: 1vw
• Acolchado del botón izquierdo y derecho: 3vw

Espaciado

Ahora, ajuste el espaciado.

• Margen inferior: -1vw
• Acolchado superior: 6vw
• Acolchado izquierdo y derecho: 7vw

Frontera

Luego, redondee las esquinas en la configuración del borde.

• Esquinas redondeadas: 2vw

Sombra de la caja

Finalmente, agregue una sombra de cuadro.

• Box-Shadow: primera opción
• Fuerza de desenfoque de sombra de caja: 50px

Eliminar la columna dos y clonar la columna 1

Ajustar la configuración en la columna 2

Al igual que en el ejemplo anterior, vaya a la configuración de la fila y elimine la segunda columna. Duplique la primera columna y ajuste algunas configuraciones.

Módulo de propaganda

Cambia el fondo del módulo de propaganda de amarillo a aguamarina.

• Color del icono de fondo: Aqua # 00ffd4

Módulo de llamada a la acción

Cambie también el contenido y el enlace del módulo de llamada a la acción.

• Cambiar el contenido del título
• Cambiar enlace

Recrear el ejemplo n. ° 3

Agregar módulo Blurb a la columna 1

Eliminar contenido predeterminado

¡Pasemos al siguiente y último ejemplo! Agregue un módulo de propaganda a la columna 1 y borre el contenido predeterminado.

Elegir icono

Elige un icono.

Fondo

Agregue un fondo amarillo brillante al módulo.

• Color de fondo: amarillo # f7f426

Icono

Haga que el icono sea negro y ajuste su ubicación

• Color del icono: Negro # 000000
• Colocación del icono: izquierda
• Tamaño de fuente del icono:
  • Escritorio: 3vw
  • Tableta + Teléfono: 8vw

Dimensionamiento

Continúe modificando el ancho y el alto del módulo.

• Ancho del contenido: 100%
• Altura: 23vw

Espaciado

Además, ajuste la configuración de espaciado.

• Margen izquierdo: 3vw
• Margen derecho: 25vw
• Acolchado superior: 2vw
• Acolchado izquierdo: 1vw

Frontera

Agregue un poco de radio de borde también.

• Esquinas redondeadas: 2vw en todas las esquinas

Sombra de la caja

Luego, agregue una sombra de cuadro.

• Box-Shadow: primera opción

Transformar

Finalmente, reposicione el módulo usando valores de conversión de transformación personalizados.

• eje x: -6vw
• eje y: 1vw

Eliminar el color de fondo y la sombra del cuadro de la columna 1

Vaya a la configuración de la columna 1 y elimine el color de fondo y la sombra del cuadro.

Agregar módulo de llamado a la acción a la columna 1

Agregar título, cuerpo y contenido de botón

Debajo del módulo de propaganda, agregue un módulo de llamada a la acción. Agregue algún contenido de su elección.

Añadir enlace

Luego, agregue un enlace al botón.

Fondo

Para diseñar el módulo de llamado a la acción, comience agregando un color de fondo negro.

• Color de fondo: negro #oooooo

Texto del título

A continuación, ajuste la configuración de texto H3.

• Nivel de encabezado del título: H3
• Fuente H3: Josefin Sans
• Color de fuente H3: amarillo brillante # f7f426
• Tamaño de fuente H3:
  • Escritorio: 2vw
  • Tableta: 4vw
  • Teléfono: 6vw
• Altura de la línea H3: 2.3em

Cuerpo de texto

Cambie también la configuración del texto del cuerpo.

• Fuente del cuerpo: Crimson Text
• Alineación del texto del cuerpo: izquierda
• Color del texto del cuerpo: Blanco # 000000
• Tamaño del texto del cuerpo:
  • Escritorio: 1.2vw
  • Tableta: 2.2vw
  • Teléfono: 3.1vw
• Altura de la línea del cuerpo: 1.8em

Botón

Luego, diseñe el botón de la siguiente manera.

• Tamaño del texto del botón:
  • Escritorio: 1vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Color del texto del botón: Aqua # 00ffd4
• Color del borde del botón: Aqua # 00ffd4
• Fuente del botón: Josefin Sans
• Margen superior e inferior del botón: 3vw
• Acolchado superior e inferior del botón: 1vw
• Acolchado del botón izquierdo y derecho: 3vw

Dimensionamiento

Continúe con la configuración de tamaño y realice algunos cambios.

• Ancho: 90%
• Alineación del módulo: centro

Espaciado

Modifique también la configuración de espaciado.

• Margen superior: -9vw
• Acolchado superior: 5vw
• Acolchado izquierdo y derecho: 7vw

Frontera

Abra la configuración del borde a continuación y agregue un radio de borde a cada una de las esquinas.

• Esquinas redondeadas: 2vw

Sombra de la caja

También estamos usando una sombra de caja sutil.

• Box Shadow: primera opción

Transformar Traducir

Finalmente, cambie la posición del módulo de llamada a la acción modificando la configuración de traducción de transformación.

• eje y: -18vw

Eliminar la columna dos y clonar la columna 1

Ajustar la configuración en la columna 2

Ahora que la primera columna está lista, eliminaremos la segunda y duplicaremos la primera. Luego, ajustaremos algunos de los detalles de color y contenido.

Módulo de propaganda

En la configuración del módulo de propaganda, cambie el fondo de amarillo a aguamarina.

• Color del icono de fondo: Aqua # 00ffd4

Módulo de llamada a la acción

En la configuración del módulo de llamada a la acción, cambie el contenido del título, el color del título y el color del botón. ¡No olvide cambiar el enlace del botón también y listo!

• Color del texto del título: Aqua # 00ffd4
• Contenido
• Color del botón: # 00ffd4

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Móvil

Ejemplo # 2

Escritorio

Móvil

Ejemplo # 3

Escritorio

Móvil

Conclusión

Como ha visto en esta publicación, los fondos de iconos de propaganda pueden hacer que sus diseños de propaganda sean mucho más interesantes. Al utilizar módulos de propaganda combinados con una llamada a la acción y módulos de texto, existen muchas posibilidades creativas. Este estilo de diseños es perfecto para vitrinas de servicios o secciones de productos. ¿Qué piensas? Dinos en los comentarios.