Cómo diseñar iconos de Blurb como acentos de diseño para contenido en Divi


El uso de íconos publicitarios como acentos de diseño puede darle al diseño de su página un diseño único en el que nunca antes había pensado. Además de colocar el icono de un módulo de propaganda para superponer un módulo de texto, puede usar el fondo y el borde del módulo de texto para darle estilo al icono. Esto crea un acento de diseño agradable que enmarca el contenido mientras le da a sus íconos un diseño completamente único.

En este tutorial, le mostraré cómo diseñar iconos de propaganda como acentos de diseño para su contenido en Divi.

¡Vamos a sumergirnos!

Vistazo

Aquí hay algunos ejemplos del diseño que crearemos en este tutorial.

iconos de propaganda

iconos de propaganda

iconos de propaganda

iconos de propaganda

iconos de propaganda

iconos de propaganda

Descargue los diseños de ejemplo para este tutorial

Para poner sus manos en el diseño de diseños de acento del módulo de propaganda gratuita, primero deberá descargarlo 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.

Introducción a la creación del diseño desde cero

Para comenzar, cree una nueva página y asigne un título a su página. Luego, implemente el constructor Divi en la parte frontal. Agregue una sección regular con una fila de una columna. Antes de agregar su primer módulo, actualice la configuración de la fila con lo siguiente:

Usar ancho de canalón personalizado: SÍ
Ancho de canalón personalizado: 1

Esto eliminará los márgenes personalizados entre módulos.

Crear el módulo de texto

Luego agregue un módulo de texto dentro de la fila.

iconos de propaganda

Actualice el módulo de texto con el siguiente texto de relleno:

Our Services

Your content goes here. Edit or remove this text inline or in the module Content settings.

iconos de propaganda

Aplicar estilo al módulo de texto

Ahora actualice el resto de la configuración del módulo de texto de la siguiente manera:

Color de fondo: #ffffff

iconos de propaganda

  • Fuente del encabezado 2: Nunito
  • Peso de fuente del encabezado 2: Negrita
  • Estilo de fuente del título 2: TT
  • Color del texto del encabezado 2: # f24a5b
  • Tamaño del texto del encabezado 2: 42 px (escritorio), 32 px (tableta), 22 px (teléfono)
  • Encabezado 2 letras Sp (acing: 16px
  • Altura de la línea del rumbo 2: 1.3em

iconos de propaganda

  • Ancho: 500px (escritorio), 490px (tableta)
  • Alineación del módulo: centro
  • Relleno personalizado (escritorio): 40 px arriba, 40 px abajo, 50 px izquierda, 50 px derecha
  • Relleno personalizado (teléfono): 20 px a la izquierda, 20 px a la derecha
  • Ancho del borde: 10px
  • Color del borde: #ffffff

iconos de propaganda

Dado que superpondremos el módulo de texto con iconos de propaganda, debemos asegurarnos de que el módulo de texto se encuentre sobre los iconos en orden de espacio z. Para hacer esto, primero debemos agregar el siguiente fragmento de CSS al cuadro CSS del elemento principal del módulo de texto:

position: relative;

Luego, establezca el valor del índice z en 1.

iconos de propaganda

Ahora, este módulo de texto se ubicará sobre cualquier otro módulo superpuesto que sea importante para el diseño.

Creación del icono de Blurb

Ahora estamos listos para crear el primer icono de propaganda. Para hacer eso, primero debemos agregar un módulo de propaganda y arrastrarlo a la parte superior del módulo de texto. Luego elimine el contenido simulado (el texto del título y el cuerpo del texto) y haga clic para usar un icono en lugar de una imagen para la propaganda.

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

  • Color del icono: # 2ea3f2
  • Usar tamaño de fuente de icono: SÍ
  • Tamaño de fuente del icono: 100px
  • Margen personalizado: 0px inferior (esto elimina el margen inferior predeterminado entre módulos; no es necesario si está utilizando un ancho de canalón de fila de 1)

A continuación, dado que no estamos usando ningún texto con el módulo (solo el ícono), podemos deshacernos del margen inferior predeterminado debajo del ícono de propaganda. Para hacer esto, agregue el siguiente CSS personalizado al cuadro CSS de imagen de Blurb:

CSS de la imagen de Blurb:

margin-bottom: 0px

iconos de propaganda

Duplica el ícono de Blurb

Antes de comenzar a colocar la propaganda, sigamos adelante, dupliquemos el módulo de propaganda y arrastremos el duplicado debajo del módulo de texto. Ahora debería tener un icono de propaganda encima y debajo del módulo de texto.

iconos de propaganda

Colocación de los iconos de Blurb usando Transform Translate

Para colocar los íconos de propaganda, usaremos las opciones de transformación de Divi que nos permiten colocar el módulo de propaganda con el ícono en cualquier lugar que queramos en la página.

Colocación del icono de propaganda n. ° 1

Para colocar el icono de propaganda superior, abra la configuración del módulo de propaganda y actualice lo siguiente:

  • Transformar Traducir eje X (escritorio): -242px
  • Transform Translate Y-axis (escritorio): 50px
  • Transformar Traducir eje X (teléfono): -170px

iconos de propaganda

Colocación del icono de propaganda n. ° 2

Antes de colocar este icono de propaganda, hagámoslo un poco más grande. Para hacer esto, abra la configuración del módulo de propaganda y cambie el Tamaño de fuente del icono a 150px.

Luego, coloque el icono de propaganda actualizando las siguientes opciones de transformación:

  • Transform Translate X-axis (escritorio): 242px
  • Transform Translate Y-axis (escritorio): -100px
  • Transformar Traducir eje X (teléfono): 190px

iconos de propaganda

Crear la fila de dos columnas

Para crear la siguiente columna, duplique la fila existente y cambie el diseño de la columna de la fila a un diseño de dos columnas (1/2 1/2).
iconos de propaganda

A continuación, utilice la función de selección múltiple de Divi para seleccionar los tres módulos en la columna de la izquierda y luego cópielos y péguelos en la segunda columna.

iconos de propaganda

Luego, elimine el ícono de propaganda inferior en la columna uno.

Alineación de los iconos de Blurb en la columna 2

Para los íconos de Blurb en la columna 2, necesitamos mover el ícono superior a la izquierda y el ícono inferior a la derecha. Podemos hacer esto simplemente cambiando el valor del eje X de Transform Translate.

Abra la configuración del módulo de propaganda para el módulo de propaganda superior en la columna 2 y actualice lo siguiente:

  • Transform Translate X-axis (escritorio): 242px
  • Transformar Traducir eje X (teléfono): 170px

Básicamente, todo lo que está haciendo es cambiar estos valores de negativo a positivo para cambiarlo en la dirección opuesta a lo largo del eje x.

iconos de propaganda

A continuación, actualice el valor de conversión de transformación para el módulo de propaganda inferior en la columna 2 de la siguiente manera:

  • Transformar Traducir eje X (escritorio): -242px
  • Transformar Traducir eje X (teléfono): -190px

iconos de propaganda

Actualizar estilos de módulo de texto en la segunda fila

La segunda fila de contenido sirve como un subconjunto de servicios destacados. Por lo tanto, queremos que el tamaño de la fuente del título sea diferente y más pequeño que nuestro encabezado. Para actualizar los dos módulos de texto al mismo tiempo, use la selección múltiple para seleccionar ambos módulos de texto. Luego actualice lo siguiente:

Cambie el contenido del título h2 para leer "Servicio".

  • Tamaño del texto del encabezado 2: 28 px (escritorio), 22 px (tableta), 18 px (teléfono)

iconos de propaganda

Guardar ajustes.

Ahora abra la configuración modal para el módulo de texto en la columna 2 y actualice lo siguiente:

  • Orientación del texto: Derecha

iconos de propaganda

Ajustar el espaciado del diseño

En este momento, probablemente haya demasiado espacio en blanco (o negativo) entre las dos filas de contenido. Para quitar algo de ese espacio, podemos agregar un margen inferior negativo al módulo de propaganda inferior en la fila superior de la siguiente manera:

  • Margen personalizado: -100px inferior

iconos de propaganda

Resultado final

Ahora echemos un vistazo al resultado final.

iconos de propaganda

iconos de propaganda

iconos de propaganda

Probar otros iconos

Para probar diferentes iconos para su diseño, puede usar la función de buscar y reemplazar. Abra la configuración de propaganda para uno de los anuncios que contienen su icono. Luego haga clic derecho en el ícono en el modal de configuración y seleccione Buscar y Reemplazar.

iconos de propaganda

En la ventana emergente Buscar y reemplazar, actualice lo siguiente:

  • Dentro de: esta sección
  • Reemplazar con: (seleccione nuevo icono)

Después de eso, haga clic en el botón reemplazar.

iconos de propaganda

Esto cambiará todos los anuncios en su sección por uno nuevo.

A continuación, se muestran algunos ejemplos del diseño con diferentes iconos.

iconos de propaganda

iconos de propaganda

iconos de propaganda

Pensamientos finales

Agregar íconos publicitarios como acentos de diseño a su contenido es un ejemplo de cómo se pueden combinar dos módulos para crear un diseño completamente único. En este caso, el fondo y el borde del módulo de texto sirven como una superposición parcial para los iconos circundantes. El resultado es único y abre la puerta para explorar más variaciones de diseño. Siéntase libre de explorar diferentes iconos y combinaciones de colores para crear algo para sus propias necesidades.

Espero tener noticias tuyas en los comentarios.

¡Salud!