¿Alguna vez ha intentado experimentar con familias de fuentes y espaciado entre letras al mismo tiempo? Déjame decirte que puede traer resultados llamativos. Le da una sensación abstracta a su diseño y también coincide con las tendencias de diseño en 2018.
No solo puede agregar espaciado de letras adicional a su texto, sino que también puede usar espaciado de letras negativo para acercar a los personajes entre sí. En este tutorial, que está inspirado en uno de los diseños de Roney Gibson , le mostraremos cómo usar el espaciado entre letras de manera creativa y efectiva para obtener resultados hermosos en todos los tamaños de pantalla. Para esto, estamos usando Divi y sus opciones integradas únicamente.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido a lo que puede esperar de este tutorial en diferentes tamaños de pantalla.
Paleta de colores #1
- Color n.° 1: #f44f34
- Color n.° 2: #c81a33
- Color #3: #e03933
- Color #4: #f29d96
- Color #5: #44cae1
Paleta de colores #2
- Color #1: #dddddd
- Color #2: #b2b2b2
- Color #3: #cccccc
- Color #4: #5b5b5b
- Color #5: #ff0022
Cómo usar efectivamente el espaciado entre letras para crear un diseño impresionante con Divi
Suscríbete a nuestro canal de Youtube
Acercarse
- Hay dos paletas de colores que puedes aplicar a este diseño.
- Elija una paleta de colores y mantenga la numeración como está
- A lo largo del tutorial, nos referiremos a un determinado número de color que debe obtener de la paleta de colores de su elección.
- Luego, aún puede clonar una sección y aplicarle la otra paleta de colores.
- Usamos espaciado entre letras adicional y negativo para crear la apariencia general
- El valor del espaciado entre letras depende del tamaño de la fuente
- Eso significa que tendremos que cambiar el espacio entre letras para cada tamaño de fuente (computadora de escritorio, tableta, teléfono)
Agregar una nueva sección estándar
Fondo degradado
Cree una nueva página o abra una existente y cambie a Visual Builder. Agregue una nueva sección a continuación, abra la configuración y aplíquele el siguiente color de fondo degradado:
- Primer color degradado: color n.º 1
- Segundo Color de Degradado: Color #2
- Tipo de gradiente: lineal
- Dirección del gradiente: 160 grados
- Posición final: 53%
Espaciado
Luego, pase a la pestaña Diseño, abra la subcategoría Espaciado y cree un espacio en la parte superior e inferior de su sección agregando el siguiente relleno personalizado:
- Relleno superior: 60px
- Relleno inferior: 180px
Agregar primera fila
Estructura de la columna
Una vez que haya terminado con la configuración de la sección, puede agregar su primera fila usando la siguiente estructura de columnas:
Espaciado
Antes de agregar cualquier módulo, abra la configuración de la fila y agregue ‘150px’ al relleno inferior.
Agregar módulo de texto de nombre
Configuración de texto
Ahora podemos comenzar a agregar los módulos deseados a esta fila. Lo primero que haremos será agregar un módulo de texto para el nombre. El tamaño del texto y el espacio entre letras serán diferentes para cada tamaño de pantalla. Estamos usando espaciado de letras negativo para acercar los caracteres entre sí mientras mantenemos el tamaño del texto:
- Peso de fuente de texto: ultra negrita
- Estilo de fuente de texto: Mayúsculas
- Tamaño del texto: 300 px (escritorio), 210 px (tableta), 125 px (teléfono)
- Color del texto: Color #3
- Espaciado entre letras de texto: -20 px (escritorio), -15 px (tableta), -8 px (teléfono)
- Altura de línea de texto: 1em
- Longitud vertical de la sombra del texto: 0,03 em
- Fuerza de desenfoque de sombra de texto: 0.02em
- Color de sombra de texto: rgba(0,0,0,0.47)
- Orientación del texto: Centro
Agregar módulo de texto de apellido
Configuración de texto
Justo debajo del módulo de texto anterior, agregue otro que contenga el apellido. Aplique la siguiente configuración de texto:
- Fuente del texto: Allura
- Tamaño del texto: 88 px (escritorio), 78 px (tableta), 39 px (teléfono)
- Color del texto: rgba(255,255,255,0.86)
- Altura de línea de texto: 1em
- Orientación del texto: Centro
Espaciado
Para hacer que este módulo de texto se superponga al anterior, agregue también el siguiente margen superior:
- Margen superior: -200 px (escritorio), -150 px (tableta), -100 px (teléfono)
Agregar módulo de texto de título de trabajo
Configuración de texto
El último módulo de texto de esta fila se usa para compartir el título del trabajo (o cualquier otra cosa que desee compartir). Para este módulo de texto, estamos usando espacios entre letras adicionales para crear contraste.
- Estilo de fuente de texto: Mayúsculas
- Tamaño del texto: 17 px (escritorio), 16 px (tableta), 14 px (teléfono)
- Color del texto: Color #4
- Espaciado entre letras: 22 px (escritorio), 14 px (tableta), 8 px (teléfono)
- Altura de línea de texto: 1,5 em
- Orientación del texto: Centro
Espaciado
También agregaremos ‘100px’ al margen superior de este Módulo de texto para crear suficiente espacio entre este Módulo de texto y los anteriores.
Agregar segunda fila
Estructura de la columna
Ahora que hemos terminado con la primera fila, podemos pasar a la siguiente. Necesitaremos la siguiente estructura de columnas:
Color de fondo
Antes de agregar cualquier módulo, abra la configuración de la fila y use ‘#ffffff’ como color de fondo de la fila.
Color de fondo de la columna 1
También aplicaremos un color de fondo ligeramente gris a la primera columna usando el código de color ‘#f7f7f7’.
Dimensionamiento
Queremos que las columnas tengan la misma altura, por eso habilitaremos la opción ‘Ecualizar alturas de columna’ en la subcategoría Tamaño.
Espaciado
Y para eliminar todo el espacio por encima y por debajo de las columnas, agregaremos ‘0px’ al relleno superior e inferior de nuestra fila.
Sombra de la caja
Por último, aplicaremos un Box Shadow con bastante intensidad de desenfoque en combinación con un color de sombra más oscuro:
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba (0,0,0,0,49)
Agregue el primer módulo de texto a la columna 1
Configuración de texto
Ahora, comencemos a agregar módulos a la primera columna. Comenzaremos con un módulo de texto ‘conóceme’ para el cual usaremos la siguiente configuración de texto:
- Fuente del texto: Allura
- Peso de fuente de texto: Negrita
- Tamaño del texto: 29px
- Color del texto: Color #5
Espaciado
Para centrar verticalmente el módulo de texto en el escritorio, necesitaremos agregar un margen superior. También crearemos un espacio en el lado izquierdo:
- Margen superior: 250 px (escritorio), 50 px (tableta y teléfono)
- Margen izquierdo: 17 % (escritorio), 10 % (tableta y teléfono)
Agregue el segundo módulo de texto a la columna 1
Configuración de texto
Justo debajo del módulo de texto anterior, agregue otro módulo de texto. Una vez que haya agregado su contenido, aplique la siguiente configuración de texto:
- Fuente del texto: Adamina
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: Mayúsculas
- Tamaño del texto: 71 px (escritorio), 50 px (tableta), 45 px (teléfono)
- Color del texto: Color #2
- Espaciado entre letras: -5 px (la diferencia de tamaño de texto entre los tamaños de pantalla es insignificante, por eso usamos este valor en todos los tamaños de pantalla)
- Altura de línea de texto: 1em
Espaciado
Abra la subcategoría Espaciado a continuación y aplíquele el siguiente margen personalizado:
- Margen inferior: 50 px (tableta y teléfono)
- Margen izquierdo: 17 % (escritorio), 10 % (tableta y teléfono)
Agregar módulo de imagen a la columna 2
Cargar imagen
Hemos agregado todos los módulos necesarios a la primera columna, por lo que ahora podemos pasar a la segunda. Lo primero que agregaremos es un módulo de imagen.
Alineación de imagen
Vaya a la pestaña Diseño a continuación y habilite la Alineación de imagen izquierda en la subcategoría Alineación. Además, asegúrese de que la opción ‘Centrar siempre la imagen en el móvil’ esté desactivada.
Espaciado
Vamos a hacer que esta imagen se superponga a la parte superior de la fila usando el siguiente margen superior:
- Margen superior: -50 px (solo escritorio)
- Margen izquierdo: 5% (tableta)
Borde
También vamos a agregar un borde a esta imagen usando la siguiente configuración:
- Ancho del borde: 35px
- Color del borde: #ffffff
- Estilo de borde: Sólido
Sombra de la caja
Por último, agregaremos una sombra de cuadro para crear algo de profundidad:
- Posición vertical de la sombra del cuadro: 24px
- Fuerza de desenfoque de sombra de cuadro: 41px
- Color de sombra: rgba(0,0,0,0.3)
Agregar módulo de texto a la columna 2
Configuración de texto
Justo debajo del módulo de imagen que ha agregado, agregue un módulo de texto para su descripción. Después de agregar su contenido, aplique la siguiente configuración de texto:
- Tamaño del texto: 15px
- Color del texto: #828282
- Altura de la línea de texto: 1,4 em
- Orientación del texto: Justificar
Dimensionamiento
También vamos a cambiar el ancho de este Módulo de texto abriendo la subcategoría Tamaño y asignando ‘70%’ al Ancho.
Espaciado
Por último, también agregaremos algunos márgenes superior e izquierdo:
- Margen superior: 50 px (solo escritorio)
- Margen izquierdo: 10% (tableta y teléfono)
Alineación de botones
El último módulo que necesitaremos agregar es el Módulo de botones. Una vez que haya agregado su CTA, abra la subcategoría Alineación dentro de la pestaña Diseño y habilite la Alineación del botón izquierdo.
Configuración de botones
Estamos cambiando la apariencia del botón usando la siguiente configuración:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 13px
- Color del texto del botón: #ffffff
- Color de fondo del botón: Color #5
- Ancho del borde del botón: 0px
- Espaciado entre letras de botones: 6px
- Estilo de fuente del botón: Mayúsculas
Espaciado
Por último, pero no menos importante, para crear más espacio de fondo para el botón, aplicaremos el siguiente relleno personalizado:
- Relleno superior: 10px
- Relleno derecho: 40px
- Relleno inferior: 10px
- Relleno izquierdo: 40px
Paso extra preferencial
Siempre puedes llevar estos diseños de tutoriales un paso más allá y hacerlos únicos. Una de las cosas que puede hacer es agregar un divisor superior vibrante, por ejemplo:
Agregar divisor superior a la sección
Para agregar este divisor superior, vaya a la pestaña Diseño de su sección, abra la subcategoría Divisores y aplíquele la siguiente configuración:
- Estilo de divisor: Buscar en la lista
- Color del divisor: Color #5
- Altura del divisor: 500 px (escritorio), 300 px (tableta), 250 px (teléfono)
Avance
Ahora que hemos seguido todos los pasos, e incluso compartimos un paso adicional preferencial que puede agregar, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales
Experimentar con el espaciado entre letras dentro de su diseño puede brindar resultados sorprendentes. Para ilustrar eso, le mostramos cómo crear un diseño impresionante que usa espaciado entre letras adicional y negativo. También le proporcionamos dos paletas de colores que se ven muy bien cuando se aplican a este diseño. Hay un rojo llamativo y un gris más sutil. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!