El uso de iconos de presentación como toques estéticos puede darle a su diseño un diseño único en el que quizás nunca haya pensado. Además de colocar el icono de un módulo de presentación para cubrir 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 totalmente único.
En este tutorial, le mostraré cómo estilizar los iconos de presentación como acentos de diseño para su contenido en Divi.
vista
Estos son algunos ejemplos del diseño que crearemos en este tutorial.
Descargue los diseños de muestra para este tutorial
Para tener en sus manos el diseño de los patrones de acento del módulo de publicidad gratis, primero debe descargarlo usando el botón a continuación. Para obtener acceso a la descarga, debe suscribirse a nuestra lista de correo Divi Daily utilizando el formulario abajo. Como nuevo suscriptor, recibirás aún más bondades de Divi y un paquete Divi Layout todos los lunes. gratis ! 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á “reinscrito” ni recibirá correos electrónicos adicionales.
Descargar
Comience con el diseño desde cero
Para comenzar, cree una nueva página y asigne un título a su página. Luego, implemente el generador Divi en el sistema de partes públicas. 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:
Utilice el ancho de canal personalizado: SÍ
Ancho de canal personalizado: 1
Esto eliminará cualquier margen personalizado entre módulos.
Crear el módulo de texto
Luego agregue un módulo de texto dentro de la línea.
Actualice el módulo de texto con el siguiente texto de relleno:
Nuestros servicios esta sección muestra el listado de los diferentes servicios que ofrecemos a nuestros clientes.
Estilizar el modulo de texto.
Ahora, actualice el resto del parámetro del módulo de texto de la siguiente manera:
- Color de fondo: #ffffff
- Título 2 Fuente: Nunito
- Título 2 Peso de fuente: Negrita
- Título 2 Estilo de fuente: TT
- Título 2 Color del texto: #f24a5b
- Título 2 Tamaño del texto: píxeles 42 (escritorio), píxeles 32 (tableta), píxeles 22 (teléfono)
- Título 2 espaciado entre letras: 16px
- Título 2 Altura de línea: 1.3em
- Ancho: 500px (escritorio), 490px (tableta)
- Alineación del módulo: centro
- Relleno personalizado (escritorio): 40px en la parte superior, 40px en la parte inferior, 50px a la izquierda, 50px a la derecha
- Relleno personalizado (teléfono): 20px a la izquierda, 20px a la derecha
- Ancho del borde: 10px
- Color del borde: #ffffff
Dado que vamos a superponer el módulo de texto con los iconos de presentación, debemos asegurarnos de que el módulo de texto esté encima de los iconos en el orden del espacio z. Para hacer esto, primero debemos agregar el siguiente fragmento de CSS en el área de CSS del elemento principal del módulo de texto:
posición: relativa;
Luego establezca el valor del índice z en 1.
Ahora, este módulo de texto se colocará encima de cualquier otro módulo que se superponga, lo cual es importante para el diseño.
Crea el icono de Blurb
Ahora estamos listos para crear el primer ícono de publicidad. Para hacer esto, primero debemos agregar un módulo de Blurb y arrastrarlo a la parte superior del módulo de texto. Luego borre el contenido marcador de posición (el texto del título y el texto del cuerpo) y haga clic para usar un icono en lugar de una imagen para el texto publicitario.
Luego actualice los siguientes parámetros de diseño:
- Color del icono: # 2ea3f2
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 100px
- Margen personalizado: 0px en la parte inferior (esto elimina el margen inferior predeterminado entre los módulos, no es necesario si está utilizando el ancho de canal 1)
Luego, dado que no usamos ningún texto con el módulo (solo el ícono), podemos eliminar el margen inferior predeterminado debajo del ícono de diseño. Para hacer esto, agregue el siguiente código CSS personalizado al área CSS de la imagen de Blurb:
Blurb Image CSS:
margen inferior: 0px
Duplica el ícono de Blurb
Antes de comenzar a colocar la propaganda, sigamos adelante, dupliquemos el módulo de propaganda y arrástrelo debajo del módulo de texto. Ahora debería tener un icono de presentación encima y debajo del módulo de texto.
Colocación de iconos de presentación mediante Transform Translate
Para posicionar los iconos de la presentación usaremos las opciones de transformación de Divi, que nos permiten colocar el módulo de presentación con el icono en cualquier lugar de la página.
Icono de posicionamiento Blurb #1
Para colocar el icono de propaganda superior, abra la configuración del módulo de propaganda y actualice lo siguiente:
- Transforme el eje X (escritorio): -242px
- Transformar traducir eje Y (escritorio): 50px
- Transformar traducir X eje (teléfono): -170px
Sin embargo, puede agregar esto de acuerdo con la configuración que haya realizado.
Icono de posicionamiento Blurb # 2
Antes de colocar este icono de presentación, hagámoslo más grande. Para hacer esto, abra la configuración del módulo Blurb y cambie el tamaño de fuente del icono a 150px.
Luego coloque el icono de presentación actualizando las siguientes opciones de transformación:
- Transforme el eje X (escritorio): 242px
- Transformar traducir eje Y (escritorio): -100px
- Transformar traducir X eje (teléfono): 190px
Creación de otra sección
A partir de ahora, podemos inspirarnos en lo que hemos hecho, para crear otra zona con una disposición diferente. Todo lo que necesita hacer es crear una nueva columna y copiar los módulos anteriores. Para realizar una copia múltiple, coloque el cursor sobre cada módulo mientras mantiene presionada la tecla CTRL en su teclado.
Resultado final
Ahora veamos el resultado final.
Consideraciones finales
Agregar íconos de presentación 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 a explorar varias variaciones de diseño. Siéntete libre de explorar diferentes íconos y combinaciones de colores para crear algo que se adapte a tus propias necesidades.
Espero saber de ti en los comentarios.
