5 geniales ejemplos de diseño que demuestran el poder de las nuevas opciones de fuentes de Divi

La forma en que representa el contenido escrito en su sitio web es una gran parte de cómo sus visitantes recibirán el mensaje. Darle una atención especial y tratar de elaborar algo único es una de las cosas que pueden ayudarlo a comunicarse de una manera memorable. Es por eso que le mostraremos algunos de los fantásticos resultados que puede crear con Divi y sus nuevas opciones de fuente en cualquier tipo de sitio web que esté creando. Por supuesto, hay mucho más que es posible con estas nuevas configuraciones de diseño de lo que le mostraremos en esta publicación, pero para iniciar su propio proceso de descubrimiento y diseño, hemos reunido cinco ejemplos de diseño geniales que demuestran el poder. de las nuevas opciones de fuente de Divi. ¡Disfrutar!

Resultado

Antes de sumergirnos en el tutorial, echemos un vistazo a los ejemplos que le mostraremos cómo recrear, paso a paso. Cada uno de estos ejemplos se crea utilizando solo un módulo de texto (con la configuración adecuada) que puede colocar donde desee en su sitio web.

Ejemplo 1

Ejemplo #2

Ejemplo #3

Ejemplo #4

 

Ejemplo #5

5 combinaciones geniales de las nuevas opciones de fuentes de Divi


Suscríbete a nuestro canal de Youtube

Recrear el ejemplo n.º 1

Para el primer ejemplo, estamos usando una combinación de un fondo degradado, una familia de fuentes invertidas y una sombra de texto que dará un borde al texto que usamos dentro del Módulo de texto.

Fondo degradado

Después de haber agregado un módulo de texto, lo primero que deberá hacer es agregar un fondo degradado. Aunque puede elegir el fondo degradado que le gustaría que apareciera, para este ejemplo, hemos utilizado la siguiente configuración:

  • Primer color: rgba(255,255,255,0)
  • Segundo color: #eeef8b
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 180 grados
  • Posición inicial: 60%
  • Posición final: 0%

Configuración de texto

Luego, vaya a la pestaña Diseño y realice los siguientes cambios en la subcategoría Texto:

  • Fuente de texto: Zilla Slab Highlight
  • Peso de fuente de texto: Negrita
  • Tamaño del texto: 100 px (escritorio), 62 px (tableta), 38 px (teléfono)
  • Color del texto: #FFFFFF
  • Altura de línea de texto: 1em

Dentro de la subcategoría Texto, agregue también la siguiente Sombra de texto:

  • Longitud horizontal de la sombra de texto: 0em
  • Longitud vertical de la sombra del texto: 0em
  • Fuerza de desenfoque de sombra de texto: 0.06em
  • Color de sombra de texto: #000000
  • Orientación del texto: Centro

Recrear el Ejemplo #2

Lo más especial de este segundo ejemplo es el uso del subrayado ondulado en combinación con una sombra de texto que hará que parezca que hay un subrayado ondulado doble en el texto. Además de eso, también estamos usando un borde doble para el lado izquierdo y derecho del módulo de texto.

Configuración de texto

Después de agregar un Módulo de texto, puede comenzar realizando los siguientes cambios en la subcategoría Texto dentro de la pestaña Diseño:

  • Fuente del texto: Sofía
  • Peso de fuente de texto: regular
  • Estilo de fuente de texto: Subrayado
  • Color de subrayado de texto: rgba(131,0,233,0.15)
  • Estilo de subrayado de texto: Ondulado
  • Tamaño del texto: 78 px (escritorio), 36 px (tableta), 25 px (teléfono)
  • Color del texto: #606060
  • Espaciado de texto: 12px
  • Altura de línea de texto: 1em

Agregue también la siguiente Sombra de texto a la subcategoría Texto:

  • Longitud horizontal de la sombra de texto: 0em
  • Longitud vertical de la sombra del texto: 0,17 em
  • Fuerza de desenfoque de sombra de texto: 0.05em
  • Color de sombra de texto: rgba(162,181,0,0.13)
  • Orientación del texto: Centro

Borde

Continúe abriendo la subcategoría Borde y use la siguiente configuración para los estilos de borde izquierdo y derecho:

  • Ancho del borde: 11px
  • Color del borde: rgba(162,181,0,0.18)
  • Estilo de borde: Doble

Recrear el Ejemplo #3

Para el tercer ejemplo, hacemos coincidir el color de nuestra fuente con el color de fondo de la sección. Si está utilizando otro color de fondo, asegúrese de cambiar también el color del texto. También agregaremos una sombra de texto para crear los bordes del texto. Además de eso, también estamos usando un subrayado en el texto para enfatizarlo.

Configuración de texto

Para este ejemplo, necesitará la siguiente configuración para la subcategoría Texto del Módulo de texto:

  • Fuente de texto: Bungee en línea
  • Peso de fuente de texto: regular
  • Estilo de fuente de texto: Subrayado
  • Color de subrayado del texto: #FFFFFF
  • Estilo de subrayado de texto: Sólido
  • Tamaño del texto: 69 px (escritorio), 45 px (tableta), 29 px (teléfono)
  • Color del texto: #ededed
  • Altura de línea de texto: 1em

Por último, usa también la siguiente sombra de texto:

  • Longitud horizontal de la sombra de texto: 0em
  • Longitud vertical de la sombra del texto: 0em
  • Fuerza de desenfoque de sombra de texto: 0.05em
  • Color de sombra de texto: #000000
  • Orientación del texto: Centro

Recrear el Ejemplo #4

Para el siguiente ejemplo, estamos combinando un color de fondo con esquinas redondeadas y un estilo de borde. El color que usamos para el estilo del borde es el mismo que usamos para el estilo de fuente tachado. Para asegurarnos de que nuestro texto aún sea legible, estamos usando un color ligeramente transparente.

 

Color de fondo

Comience agregando ‘#f2f2f2’ como color de fondo de su módulo de texto.

Configuración de texto

Luego, pase a la subcategoría Diseño y realice los siguientes cambios en la subcategoría Texto:

  • Fuente del texto: Ribeye Marrow
  • Peso de fuente de texto: regular
  • Estilo de fuente de texto: tachado
  • Color de tachado de texto: rgba(224,43,32,0.18)
  • Estilo de tachado de texto: Doble
  • Tamaño del texto: 78 px (escritorio), 46 px (tableta), 31 px (teléfono)
  • Color del texto: #000000
  • Altura de línea de texto: 1,1 em
  • Orientación del texto: Centro

Espaciado

A continuación, aplique el siguiente relleno personalizado a la subcategoría Espaciado:

  • Superior: 15px
  • Abajo: 15px

Borde

Por último, realice los siguientes cambios en la subcategoría Borde:

  • Esquinas redondeadas (todas): 100px
  • Estilo de borde: Todos los lados
  • Ancho del borde: 4px
  • Color del borde: rgba (224,43,32,0.18)
  • Estilo de borde: Doble

 

Recree el Ejemplo #5

En el último ejemplo, estamos combinando un fondo degradado con esquinas redondeadas, un estilo de borde superior y una sombra de cuadro para agregar el toque final a nuestro Módulo de texto.

Fondo degradado

Comience agregando un fondo degradado a su módulo de texto:

  • Primer color: rgba(155,175,193,0.2)
  • Segundo Color: rgba(244,244,244,0)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 180 grados
  • Posición inicial: 48%
  • Posición final: 0%

Configuración de texto

Luego, vaya a la pestaña Diseño y aplique los siguientes cambios a la subcategoría Texto:

  • Fuente del texto: Codystar
  • Peso de fuente de texto: Negrita
  • Tamaño del texto: 60 px (escritorio), 35 px (tableta), 22 px (teléfono)
  • Color del texto: #494949
  • Altura de línea de texto: 1,1 em
  • Orientación del texto: Centro

Dimensionamiento

A continuación, vaya a la subcategoría Dimensionamiento y realice los siguientes cambios:

  • Ancho: 78 % (escritorio), 76 % (tableta), 86 % (teléfono)
  • Alineación del módulo: Centro

Espaciado

También necesitaremos agregar el siguiente relleno a la subcategoría Espaciado:

  • Superior: 15px
  • Abajo: 15px

Borde

Luego, abra la subcategoría Borde y aplique los siguientes cambios:

  • Esquinas superior izquierda e inferior derecha: 500px
  • Esquinas inferior izquierda y superior derecha: 20px
  • Ancho del borde superior: 2px
  • Color del borde superior: rgba (0,0,0,0,44)
  • Estilo de borde superior: Doble

Sombra de la caja

Por último, pero no menos importante, también agregaremos una sombra de cuadro sutil a nuestro módulo de texto:

  • Posición horizontal de la sombra del cuadro: 5px
  • Posición vertical de la sombra del cuadro: -10px
  • Fuerza de desenfoque de sombra de cuadro: 0px
  • Fuerza de propagación de sombra de cuadro: 2px
  • Color de sombra: rgba (155.175.193, 0,66)
  • Posición de la sombra del cuadro: Sombra exterior

Pensamientos finales

En esta publicación, le mostramos algunas formas geniales de diseñar los módulos de texto en su sitio web. Por supuesto, hay muchas más posibilidades, pero con estos ejemplos, tiene una ventaja inicial. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!

Imagen destacada por vladwel / shutterstock.com