Cómo ser creativo con el fondo del 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 ir un paso más allá y ser creativo con el fondo del icono de publicidad. Utilizaremos una combinación de módulos de publicidad, 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ás descargar el archivo JSON gratis!

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

Blurb background 1

Móvil

Ejemplo # 2

Escritorio

Móvil

Ejemplo # 3

Escritorio

Móvil

Descargar The Blurb Icon Background Ejemplos GRATIS

Para poner sus manos sobre los ejemplos de fondo del icono de publicidad gratuita, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=2NROumLNNVo (/ incrustar)

Suscríbase a nuestro canal de Youtube

Pasos generales

Agregar nueva sección

Antecedentes

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

ajustes de fondo

Espaciado

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

  • Acolchado superior e inferior: 120px

ajustes de relleno

Agregar nueva fila

Estructura de columna

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

fila de dos columnas

Dimensionamiento

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

  • Ancho: 100%
  • Ancho Máx .: 100%

diferir el tamaño

Espaciado

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

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

ajustes de relleno

Columna 1

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

Antecedentes

Primero, agregue un fondo blanco.

  • Color de fondo: blanco #ffffff

fondo de la columna uno

Frontera

Luego, agregue un poco de radio de borde.

  • Esquinas redondeadas: 2vw las cuatro esquinas

esquinas redondeadas de columna

Sombra de la caja

Finalmente, agregue un cuadro de sombra.

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

cuadro sombra columna uno

Clone Row Twice

Queda un último paso antes de comenzar a agregar módulos. Clone la fila dos veces.

fila duplicada

Recrear Ejemplo # 1

Blurb background 1

Agregar módulo de difusión 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 texto del cuerpo predeterminados.

borrar contenido predeterminado

Elegir icono

Luego, elija un icono en lugar de una imagen.

  • Icono: Enlace

Elige un icono

Antecedentes

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

  • Color de fondo: negro # 000000

blackbackground "width =" 880 "height =" 427 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/08/blackbackground.png 880w, https: //www.elegantthemes. com / blog / wp-content / uploads / 2019/08 / blackbackground-300x146.png 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/08/blackbackground-768x373.png 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/08/blackbackground-610x296.png 610w "tamaños =" (ancho máximo: 880px) 100vw, 880px "></p>
<h4>Configuraciones de iconos</h4>
<p>Luego, cambie la configuración del icono.</p>
<ul>
<li>Color del icono: Amarillo # edf000</li>
<li>Colocación del icono: arriba</li>
<li>Tamaño de fuente del icono:
<ul>
<li>Escritorio: 3vw</li>
<li>Tableta: 11vw</li>
<li>Teléfono: 13vw</li>
</ul>
</li>
</ul>
<p><img class=

Dimensionamiento

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

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

tamaño de icono

Espaciado

Agregue algunos valores de espaciado también.

  • Margen superior: -5vw
  • Margen inferior: 0vw
  • Margen izquierdo: -1vw
  • Relleno superior y relleno inferior: 4vw

espaciado para el icono

Frontera

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

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

icono esquinas redondeadas

Sombra de la caja

Finalmente, agregue un cuadro de sombra.

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

sombra de cuadro de icono

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;
margin-bottom: 0px;

icono css

Agregar módulo de texto a la columna 1

Añadir contenido H3

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

agregar contenido h3

Antecedentes

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%

diseñar el H3

Texto del título

Luego, dale estilo al texto H3.

  • Nivel de título del texto del título: 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 de letras H3: 0em

diseñar el fondo h3

Dimensionamiento

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

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

ancho para móvil

Espaciado

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

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

margen y relleno

Transformar

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

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

transformarse en vertical

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

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

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

agregar una llamada al módulo de acción

Añadir enlace

Agregue un enlace relevante al botón.

aprender más enlace

Antecedentes

Asegúrese de que el fondo no tenga color.

sin color de fondo

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

texto del cuerpo cta 2

Botón

Modifique los estilos de los botones también.

  • 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
  • Botón de relleno superior e inferior: 1vw
  • Botón de relleno izquierdo y derecho: 3vw

estilo de texto cta

botón marg pad

Espaciado

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

  • Relleno izquierdo y derecho: 7vw

acolchado cta

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 próximos pasos, ajustaremos algunas configuraciones en la columna duplicada.

borrar y dup

Módulo de publicidad

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

  • Color del icono: Aqua # 00ffd4

color de icono aqua

Módulo de texto

Cambie el fondo degradado y la copia del módulo de texto a continuación.

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

gradiente aqua

Recrear Ejemplo # 2

Agregar módulo de difusión a la columna 1

Eliminar contenido predeterminado

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

borrar contenido predeterminado

Elegir icono

Luego, elija un icono.

Elige un icono

Antecedentes

Ahora, agregue un color de fondo amarillo.

  • Color de fondo: amarillo # edf000

blurb fondo amarillo

Icono

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

  • Color del icono: Blanco #ffffff
  • Colocación del icono: arriba
  • Tamaño de fuente del icono:
    • Escritorio: 3vw
    • Tableta: 11vw
    • Teléfono: 12vw

tamaño de icono 2

Dimensionamiento

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

  • Ancho del contenido: 100%

icono de dimensionamiento

Espaciado

Modifique la configuración de espaciado también.

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

icono de margen y relleno

Frontera

Agregue un poco de radio de borde a cada esquina siguiente.

  • Esquinas redondeadas: 2vw las cuatro esquinas

icono de esquinas redondeadas

Sombra de la caja

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

  • Box-Shadow: primera opción

cuadro de iconos shadow2

Eliminar la sombra de la caja 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.

eliminar la sombra de la caja

eliminar el fondo

CSS personalizado

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

  • Imagen de Blurb: margen inferior: 0px;
margin-bottom: 0px;

css personalizado

Agregar un Llamado al Módulo de Acción a la Columna 1

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

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

contenido para cta

Añadir enlace

Agregue un enlace al botón siguiente.

ajuste de enlace

Antecedentes

Continúe agregando un fondo blanco.

  • Color de fondo: blanco #ffffff

fondo para cta

Texto del título

En la pestaña de diseño, diseñe el texto del título H3.

  • Nivel de título 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 línea H3: 2.3em

Título estilo Josefin Sans

Cuerpo de texto

Luego, peina el texto del cuerpo.

  • Fuente del cuerpo: Texto carmesí
  • 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

texto del cuerpo de cta

Botón

Pase a la configuración del botón y aplique 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
  • Botón superior e inferior Margen: 3vw
  • Botón de relleno superior e inferior: 1vw
  • Botón de relleno izquierdo y derecho: 3vw

botón marg pad 2

Espaciado

Ahora, ajuste el espacio.

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

espaciado 3

Frontera

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

  • Esquinas redondeadas: 2vw

esquinas redondeadas 4

Sombra de la caja

Finalmente, agregue un cuadro de sombra.

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

cuadro sombra 2

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 propagación de amarillo a aguamarina.

  • Color del icono de fondo: Aqua # 00ffd4

Módulo de llamado a la acción

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

  • Cambiar contenido del título
  • Cambiar enlace

Recrear Ejemplo # 3

Agregar módulo de difusión a la columna 1

Eliminar contenido predeterminado

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

borrar contenido predeterminado

Elegir icono

Elige un icono.

Elige un icono

Antecedentes

Agregue un fondo amarillo brillante al módulo.

  • Color de fondo: amarillo # f7f426

propaganda de fondo amarillo

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 la altura del módulo.

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

Espaciado

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

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

Frontera

Agregue también un radio de borde.

  • Esquinas redondeadas: 2vw en todas las esquinas

Sombra de la caja

Luego, agregue un cuadro de sombra.

  • Box-Shadow: primera opción

Transformar

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

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

Elimine 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 título, cuerpo y contenido del botón

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

agregar una llamada a la acción ahora

Añadir enlace

Luego, agregue un enlace al botón.

Antecedentes

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.

  • Nivel de título 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 línea H3: 2.3em

Cuerpo de texto

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

  • Fuente del cuerpo: Texto carmesí
  • 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, peina 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
  • Botón de margen superior e inferior: 3vw
  • Botón de relleno superior e inferior: 1vw
  • Botón de relleno 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 la configuración de espaciado también.

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

Frontera

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

  • Esquinas redondeadas: 2vw

Sombra de la caja

También usamos una sombra de cuadro sutil.

  • Box Shadow: primera opción

Transformar Traducir

Finalmente, reposicione el módulo de llamada a la acción modificando la configuración de transformación de 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: Aqua # 00ffd4

Módulo de llamado 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 también el enlace del botó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

Blurb background 1

Móvil

Ejemplo # 2

Escritorio

Móvil

Ejemplo # 3

Escritorio

Móvil

Conclusión

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