Cómo diseñar iconos de Blurb como acentos de diseño para contenido en Divi
Publicado: 2019-03-25El 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 que se superponga a 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.
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 gratuito, 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.
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.
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!
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.
Actualice el módulo de texto con el siguiente texto de relleno:
<h2>Our Services</h2> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>
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
- 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
- Ancho: 500 px (escritorio), 490 px (tableta)
- Alineación del módulo: centro
- Relleno personalizado (escritorio): 40 píxeles en la parte superior, 40 píxeles en la parte inferior, 50 píxeles a la izquierda, 50 píxeles a la derecha
- Relleno personalizado (teléfono): 20 px a la izquierda, 20 px a la derecha
- Ancho del borde: 10px
- Color del borde: #ffffff
Dado que superpondremos el módulo de texto con iconos de propaganda, debemos asegurarnos de que el módulo de texto se encuentre encima de los iconos en el orden del 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.
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 ícono 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 texto del cuerpo) 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
Duplica el ícono de Blurb
Antes de comenzar a colocar la propaganda, sigamos adelante y 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.
Colocación de los iconos de Blurb usando Transform Translate
Para posicionar 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 ícono de propaganda superior, abra la configuración del módulo de propaganda y actualice lo siguiente:
- Transformar Traducir eje X (escritorio): -242px
- Transformar Traducir eje Y (escritorio): 50px
- Transformar Traducir eje X (teléfono): -170px
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 ícono de propaganda actualizando las siguientes opciones de transformación:
- Transform Translate X-axis (escritorio): 242px
- Transformar Traducir eje Y (escritorio): -100px
- Transformar Traducir eje X (teléfono): 190px
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). 
A continuación, use 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.
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 cambiarlos en la dirección opuesta a lo largo del eje x.
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
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 que lea "Servicio".
- Tamaño del texto del encabezado 2: 28 px (escritorio), 22 px (tableta), 18 px (teléfono)
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
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
Resultado final
Ahora echemos un vistazo al resultado final.
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 icono en el modal de configuración y seleccione Buscar y reemplazar.
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.
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.
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 íconos y combinaciones de colores para crear algo para sus propias necesidades.
Espero tener noticias tuyas en los comentarios.
¡Salud!