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

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 los iconos de Blurb GRATIS

Para poner sus manos en los ejemplos de fondo de icono de publicidad gratuita, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Suscríbete a nuestro canal de Youtube

Pasos generales

Agregar nueva sección

Fondo

Para recrear estos diseños creativos de fondo publicitario, 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.

• Relleno superior e inferior: 120px

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

Antes de agregar cualquier módulo, 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, agrega un fondo blanco.

• Color de fondo: Blanco #ffffff

Borde

Luego, agregue algo de radio de borde.

• Esquinas redondeadas: 2vw las cuatro esquinas

Sombra de la caja

Finalmente, agregue una sombra de cuadro.

• Box-Shadow: Primera Opción
• Fuerza de desenfoque de sombra de cuadro: 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

Agregue el 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 publicidad y borre todo el título y el cuerpo del texto predeterminados.

Elegir icono

Luego, elige un icono en lugar de una imagen.

• Icono: Enlace

Fondo

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

• 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: superior
• Tamaño de fuente del icono:
  
  • Escritorio: 3vw
  • Tableta: 11vw
  • Teléfono: 13vw

Dimensionamiento

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

• Ancho de 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

Borde

Para darle al ícono una forma única, agregue un radio de borde a cada una de las esquinas, excepto a la esquina inferior 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 cuadro: 50px

CSS personalizado

El icono tiene, por defecto, 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 de Blurb: margen inferior: 0px;

Agregar módulo de texto a la columna 1

Agregar contenido H3

Debajo del ícono, 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: Gradiente
• 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 Texto Título Nivel: H3
• Fuente H3: Josefin Sans
• Alineación H3: Centro
• Color de fuente H3: Negro #oooooo
• Tamaño de texto H3:
  
  • Escritorio: 2.4vw
  • Tableta: 3.4vw
  • Teléfono: 4.8vw
• Espaciado entre letras H3: 0em

Dimensionamiento

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

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

Espaciado

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

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

Transformar

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

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

Agregue el módulo de llamada 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úrate 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: Texto carmesí
• Alineación del texto del cuerpo: Izquierda
• Color del cuerpo del texto: Gris oscuro #666666
• Tamaño del cuerpo del texto:
  
  • Escritorio: 1.2vw
  • Tableta: 2.6vw
  • Teléfono: 3.1vw
• Altura de la línea del cuerpo: 1,8 em

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
• Relleno de botón izquierdo y derecho: 3vw

Espaciado

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

• Acolchado izquierdo y derecho: 7vw

Eliminar columna dos y clonar columna 1

Ajuste la configuración en la columna 2

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

Módulo de publicidad

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

• Color del icono: Aguamarina #00ffd4

Módulo de texto

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

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

Recrear el Ejemplo #2

Agregue el módulo Blurb a la columna 1

Eliminar contenido predeterminado

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

Elegir icono

Luego, elige un ícono.

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 ícono: Blanco #ffffff
• Ubicación del icono: superior
• Tamaño de fuente del icono:
  
  • Escritorio: 3vw
  • Tableta: 11vw
  • Teléfono: 12vw

Dimensionamiento

Una vez que el color y el fondo estén diseñados, ajuste el tamaño del módulo.

• Ancho de contenido: 100%

Espaciado

Modifique también la configuración de espaciado.

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

Borde

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

• Esquinas redondeadas: 2vw las cuatro esquinas

Sombra de la caja

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

• 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 que se aplica al ícono de publicidad agregando una sola línea de código CSS a la pestaña avanzada.

• Imagen de Blurb: margen inferior: 0px;

Agregue el módulo de llamada a la acción a la columna 1

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

Debajo del módulo de propaganda, agregue un módulo de llamada a la acción e inserte algún 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.

• Título Nivel de encabezado: 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,3 em

Cuerpo de texto

Luego, aplique estilo al cuerpo del texto.

• Fuente del cuerpo: Texto carmesí
• Alineación del texto del cuerpo: Izquierda
• Color del cuerpo del texto: Gris oscuro #666666
• Tamaño del cuerpo del texto:
  
  • Escritorio: 1.1vw
  • Tableta: 2.2vw
  • Teléfono: 3.1vw
• Altura de la línea del cuerpo: 1,8 em

Botón

Pase a la configuración del botón y 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: 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
• Relleno de botón izquierdo y derecho: 3vw

Espaciado

Ahora, ajusta el espaciado.

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

Borde

Luego, redondea 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 cuadro: 50px

Eliminar columna dos y clonar columna 1

Ajuste la configuración en la columna 2

Similar al 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 publicidad

Cambie el fondo del módulo de publicidad de amarillo a aguamarina.

• Color del icono de fondo: Aguamarina #00ffd4

Módulo de llamada a la acción

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

• Cambiar el contenido del título
• Cambiar enlace

Recrear el Ejemplo #3

Agregue el módulo Blurb a la columna 1

Eliminar contenido predeterminado

¡Vamos al siguiente y último ejemplo! Agregue un módulo de publicidad 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

Haz que el ícono sea negro y ajusta su ubicación

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

Dimensionamiento

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

• Ancho de 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

Borde

Agregue un poco de radio de borde también.

• Esquinas redondeadas: 2vw en todas las esquinas

Sombra de la caja

Luego, agrega una sombra de cuadro.

• Box-Shadow: Primera Opción

Transformar

Finalmente, cambie la posición del módulo utilizando valores de traducció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.

Agregue el módulo de llamada a la acción a la columna 1

Agregar contenido de título, cuerpo y 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 llamada a la acción, comience agregando un color de fondo negro.

• Color de fondo: Negro #oooooo

Texto del título

Ajuste la configuración de texto H3 a continuación.

• Título Nivel de encabezado: 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,3 em

Cuerpo de texto

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

• Fuente del cuerpo: Texto carmesí
• Alineación del texto del cuerpo: Izquierda
• Color del cuerpo del texto: Blanco #000000
• Tamaño del cuerpo del texto:
  
  • Escritorio: 1.2vw
  • Tableta: 2.2vw
  • Teléfono: 3.1vw
• Altura de la línea del cuerpo: 1,8 em

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
• Relleno de botón izquierdo y derecho: 3vw

Dimensionamiento

Pase a 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

Borde

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.

• Sombra de caja: primera opción

Transformar Traducir

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

• eje y: -18vw

Eliminar columna dos y clonar columna 1

Ajuste 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 contenido y color.

Módulo de publicidad

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

• Color del icono de fondo: Aguamarina #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 olvides 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 publicitarios pueden hacer que sus diseños publicitarios sean mucho más interesantes. Al usar módulos publicitarios combinados con una llamada a la acción y módulos de texto, hay muchas posibilidades creativas. Estos estilos de diseños son perfectos para exhibiciones de servicios o secciones de productos. ¿Qué opinas? Dinos en los comentarios.