Cómo rotar texto para diseños de diseño únicos en Divi (Tutorial + Descarga de diseño GRATUITA)


La mayoría de nosotros estamos acostumbrados a leer texto de derecha a izquierda y de arriba a abajo. Pero cuando se trata de diseño web, podría ser una buena idea liberarse de la norma. Una forma de hacer esto es con la rotación de texto. Rotar texto en su sitio web puede parecer poco práctico, pero parece tener un lugar. De hecho, la orientación vertical del texto parece ser común en el diseño web moderno. Y, aunque la mayoría rotan el texto únicamente con fines de diseño, se puede argumentar que el texto rotado (o vertical) (aunque más difícil de leer) puede ser una técnica eficaz para llamar la atención.

Con Divi puedes rotar cualquier elemento de tu página usando las opciones de transformación integradas. Entonces, en este tutorial, le mostraré cómo rotar texto con éxito para crear diseños de diseño únicos en Divi. Para hacer esto, diseñaré un diseño de tres partes que incorpora ejemplos de texto rotado.

Empecemos.

Vistazo

Aquí hay un adelanto de todo el diseño que crearemos en el tutorial. Observe que hay ejemplos de texto rotado en tres secciones diferentes del diseño.

rotar texto en divi

rotar texto en divi

Descargue el diseño completo de este tutorial GRATIS

Para poner sus manos en el diseño gratuito de diseños de texto girado, 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.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Ahora volvamos al tutorial.

Cosas a tener en cuenta al rotar texto

¿En qué dirección debe girar el texto?

Si desea rotar texto para una visualización vertical, es posible que no esté seguro en qué dirección rotar el texto. Puede girar el texto en sentido antihorario para que se lea de abajo hacia arriba. O bien, puede girar el texto en el sentido de las agujas del reloj para que se lea de arriba a abajo. Si se pregunta cuál es más fácil de leer, no estoy seguro de que haya una respuesta. Podrías intentar obtener una pista de la orientación de títulos de libros en una estantería. Pero los diferentes países hacen esto de manera diferente (el estándar en los EE. UU. Es en el sentido de las agujas del reloj, de arriba a abajo).

En este tutorial, voy a rotar el texto en sentido antihorario en la mayoría de los casos, principalmente porque me gusta cómo se ve en el lado izquierdo de la página (tal vez prefiero inclinar la cabeza hacia la izquierda). Pero siéntete libre de probar diferentes direcciones.

El problema del desenfoque

En algunos navegadores (como Chrome y Safari), el texto se vuelve un poco borroso cuando se usa la propiedad transform rotate. Para solucionar el problema, puede agregar un valor de origen de transformación del 51% o 52% a lo largo del eje X. Esto debería solucionar el problema.

Parte 1: Construir el encabezado con texto vertical

rotar texto en divi

Para esta primera parte del diseño, crearemos un encabezado con texto vertical. Para hacer esto, rotaremos un módulo de propaganda usando las opciones de transformación.

Para comenzar, cree una sección regular con una fila de dos columnas.

rotar texto en divi

Antes de agregar un módulo, elimine el relleno superior e inferior de la sección actualizando la siguiente configuración de la sección:

Relleno personalizado: 0px arriba, 0px abajo

rotar texto en divi

A continuación, actualice la configuración de Fila de la siguiente manera:

  • Imagen de fondo: (agregue una imagen con al menos 1920 px de ancho)
  • Color de fondo de la columna 1: # 121212

rotar texto en divi

  • Ancho personalizado: 100%
  • Ancho del canal: 1
  • Ecualizar alturas de columna: SÍ
  • Relleno personalizado (escritorio): 0px arriba, 0px abajo
  • Acolchado personalizado (tableta): 40% a la derecha
  • Relleno personalizado (teléfono): 30% a la derecha
  • Relleno personalizado de la columna 1 (escritorio): 200 px arriba, 200 px abajo
  • Relleno personalizado de la columna 1 (tableta): 150 px arriba, 150 px abajo

rotar texto en divi

  • Box Shadow: ver captura de pantalla
  • Posición horizontal de la sombra del cuadro: 0px
  • Posición vertical de la sombra del cuadro: -100px
  • Color de sombra: # f6454e

rotar texto en divi

Creando el Módulo Blurb

Ahora estamos listos para agregar nuestro contenido de encabezado. Para hacer esto, agregue un módulo de propaganda a la columna izquierda de la fila.

rotar texto en divi

Actualice el siguiente contenido:

  • Título: Divi Design
  • Contenido: su contenido va aquí.
  • Usar icono: SÍ
  • Icono: bombilla

rotar texto en divi

  • Color del icono: # f6454e
  • Tamaño de fuente del icono: 32px
  • Orientación del texto: centro
  • Nivel de encabezado del título: H1 (porque es el encabezado principal de la página)
  • Fuente del título: Muli
  • Estilo de fuente del título: TT
  • Color del texto del título: #ffffff
  • Tamaño del texto del título: 70 px (escritorio), 50 px (tableta), 36 px (teléfono)
  • Color del texto del cuerpo: #cccccc
  • Espaciado de letras del cuerpo: 4px
  • Ancho: 500px
  • Alineación del módulo: centro

rotar texto en divi

Nota importante: dado que giraremos el módulo de propaganda para que quede vertical, el ancho personalizado de 500 px se convertirá en la altura del módulo de propaganda vertical. Por eso es importante que el contenido encaje dentro de este módulo con. Para este ejemplo, estoy usando una pequeña cantidad de texto y cambiando el tamaño de la fuente del título en diferentes dispositivos para que el texto no se rompa en una nueva línea y arruine el diseño.

Rotar el módulo de Blurb usando las opciones de transformación

Para rotar el módulo de propaganda (y todo su contenido), actualice las siguientes opciones de transformación:

  • Transformar Girar eje X: -90 grados

Tendrá que ingresar el valor de -90 grados manualmente. Esto le dará una alineación vertical de abajo hacia arriba del contenido.

rotar texto en divi

Puede notar que el texto está un poco borroso si está usando Chrome o Safari. Esto a veces puede suceder cuando se usa la propiedad transform: rotate. Para solucionar este problema, puede ajustar ligeramente el origen de transformación de la siguiente manera:

  • Transformar el eje Y del origen: 51%

Puede que tenga que ajustar un poco este valor hasta que el texto sea claro. Por ejemplo, el 52% puede verse claro en algunos diseños.

rotar texto en divi

Crear un botón vertical

A continuación, agregaremos un botón en la parte inferior de nuestro encabezado para recordarle al usuario que se desplace hacia abajo en la página. Luego podemos rotar el botón usando las opciones de transformación tal como lo hicimos con el módulo de propaganda.

Cree una nueva fila con una estructura de una columna.

rotar texto en divi

Antes de agregar nuestro módulo de botones, actualice la configuración de la fila de la siguiente manera:

  • Color de fondo: # f6454e
  • Ancho personalizado: 100%
  • Ancho del canal: 1

rotar texto en divi

A continuación, agregue un módulo de botón a la fila y actualice las siguientes opciones de botón:

  • Alineación de botones: centro
  • Usar estilos personalizados para el botón: SÍ
  • Tamaño del texto del botón: 16px
  • Color del texto del botón: #ffffff
  • Ancho del borde del botón: 0px
  • Espaciado de letras de botones: 9px
  • Peso de fuente: ligero
  • Estilo de fuente: TT
  • Icono de botón: flecha derecha

rotar texto en divi

Girar y colocar el botón

Para rotar y posicionar el botón, usaremos una combinación de márgenes y rotar transformación de la siguiente manera:

  • Margen personalizado (escritorio): -50 px arriba, 50 px abajo, -50 px izquierda
  • Margen personalizado (tableta): 0 px a la izquierda
  • Transformar Girar eje X: 90 grados

rotar texto en divi

Esta vez, el botón se gira 90 grados (en el sentido de las agujas del reloj) para obtener una visualización vertical de arriba a abajo para el texto. Esto parece apropiado ya que queremos que el usuario se desplace hacia abajo.

Parte 2: Rotar módulos de texto para crear etiquetas diagonales

rotar texto en divi

En la siguiente sección del diseño, vamos a crear tres anuncios con módulos de texto rotados que se usan como etiquetas. Esta es una excelente manera de mostrar elementos destacados en su página.

He aquí cómo hacerlo.

Cree una nueva sección regular con una fila de tres columnas. Luego agregue un módulo de propaganda a la primera columna.

rotar texto en divi

Elija utilizar el icono de la bombilla en lugar de la imagen predeterminada.

Luego actualice el módulo de propaganda de la siguiente manera:

  • Color del icono: # f6454e
  • Tamaño de fuente del icono: 32px
  • Relleno personalizado: 3vw inferior, 3vw izquierda, 3vw derecha

rotar texto en divi

A continuación, actualice la configuración de la fila de la siguiente manera:

  • Color de fondo de la columna 1: #eeeeee
  • Color de fondo de la columna 2: #eeeeee
  • Color de fondo de la columna 3: #eeeeee
  • Ecualizar alturas de columna: SÍ

rotar texto en divi

Este siguiente paso es crucial para cuando agreguemos nuestro diseño de etiqueta de módulo de texto girado. Queremos que el desbordamiento del módulo de texto se oculte fuera de la columna. Para asegurarnos de que esto suceda, debemos agregar la propiedad "overflow: hidden" a cada una de las columnas como CSS personalizado.

En la pestaña avanzada, agregue el siguiente CSS personalizado:

Columna 1 Elemento principal CSS:

overflow: hidden;

Columna 2 Elemento principal CSS:

overflow: hidden;

Columna 3 Elemento principal CSS:

overflow: hidden;

rotar texto en divi

Agregar y rotar el módulo de texto como una etiqueta

A continuación, agregue un módulo de texto justo encima del módulo de propaganda en la columna 1.

Actualice el contenido de texto con la palabra "Destacado".

rotar texto en divi

Luego, diseñe el módulo de texto de la siguiente manera:

  • Color de fondo: # f6454e
  • Fuente de texto: Muli
  • Peso de la fuente del texto: Semi negrita
  • Color del texto del texto: #ffffff
  • Espaciado de letras de texto: 3px
  • Altura de la línea de texto: 2.5em
  • Orientación del texto: centro

rotar texto en divi

Ahora dale al módulo de texto un ancho personalizado de la siguiente manera:

  • Ancho: 180px
  • Alineación del módulo: izquierda

rotar texto en divi

A continuación, coloque el módulo de texto en la esquina superior izquierda de la columna usando las siguientes opciones de transformación:

  • Transformar trasladar eje X: -25%
  • Transformar traslación del eje Y: 70%

Es importante usar valores porcentuales aquí para hacer que el diseño sea más receptivo, por lo que deberá ingresarlos manualmente.

rotar texto en divi

Transformar Girar eje X: -45 grados

rotar texto en divi

Observe que el desbordamiento del módulo de texto está oculto fuera de la columna para completar el diseño.

Todo lo que nos queda por hacer es copiar los módulos en la columna uno y pegarlos en la columna 2 y la columna 3.

Aquí esta el resultado final.

rotar texto en divi

Parte 3: Creación de títulos verticales para su contenido

rotar texto en divi

La siguiente parte del diseño utiliza técnicas similares para rotar y colocar un módulo de texto como un encabezado vertical para su contenido. Este es un diseño útil para mostrar cosas como servicios. También demostraré una forma creativa de usar listas para crear un encabezado vertical muy exclusivo.

He aquí cómo hacerlo.

Cree una nueva sección regular con una fila de una columna.

Luego, copie uno de los módulos de propaganda en la fila de tres columnas en el diseño de arriba. Esto nos dará una ventaja en el diseño.

rotar texto en divi

Luego actualice la configuración de propaganda de la siguiente manera:

  • Colocación de imagen / propaganda: izquierda
  • Margen personalizado (escritorio): 200 px a la izquierda
  • Margen personalizado (teléfono): 0px a la izquierda
  • Relleno personalizado: 100 px arriba, 100 px abajo

rotar texto en divi

El margen izquierdo crea el espacio que necesitaremos para el módulo de texto vertical que agregaremos.

Luego agregue un borde al módulo de propaganda de la siguiente manera:

  • Ancho del borde: 2px
  • Color del borde: #eeeeee

rotar texto en divi

Crear el módulo de texto

Con el contenido de la propaganda en su lugar, ahora podemos agregar nuestro módulo de texto. Cree un nuevo módulo de texto y luego colóquelo directamente encima del módulo de propaganda.

Después de eso, agregue el siguiente html en el cuadro de contenido (asegúrese de que la pestaña de texto esté seleccionada):

  1. Design
    • Lorem ipsum dolor sit amet

Esto es html que usa una lista ordenada (ol), una etiqueta h5 y una lista desordenada (ul). Esto nos permite personalizar cada uno de los elementos de la lista y el h5 por separado utilizando las opciones de diseño integradas de Divi dentro del módulo de texto.

Esta técnica se puede utilizar para crear algunos diseños de lista increíbles.

A continuación, vaya a la pestaña de diseño y actualice lo siguiente:

  • Fuente de lista desordenada: Muli
  • Peso de fuente de lista desordenada: Ligero
  • Tamaño del texto de la lista desordenada: 15px
  • Tipo de estilo de lista desordenada: Ninguno
  • Sangría de elemento de lista desordenado: 0.01px

rotar texto en divi

  • Fuente de la lista ordenada: Abril Fatface
  • Color de texto de lista ordenada:
  • Tamaño del texto de la lista ordenada: 40px
  • Espaciado de letras de la lista ordenada: 4px
  • Altura de la línea de lista ordenada: 1.3em
  • Tipo de estilo de lista ordenada: decimal inicial cero

rotar texto en divi

  • Fuente del encabezado 5: Muli
  • Peso de la fuente del encabezado 5: ultraligero
  • Estilo de fuente del título 5: TT
  • Tamaño del texto del encabezado 5: 62px

rotar texto en divi

Dimensionamiento, rotación y colocación del módulo de texto

Ahora que tenemos el diseño del texto en su lugar, démosle un ancho personalizado. Recuerde que el ancho del módulo se convertirá en la altura del módulo una vez que lo giremos para mostrarlo verticalmente.

  • Ancho personalizado: 300px
  • Alineación del módulo: izquierda

rotar texto en divi

Para rotar el texto, actualice lo siguiente:

  • Transformar Girar eje X: -90deg (escritorio), 0deg (teléfono)

Necesitamos restablecer la rotación a 0 grados para la visualización del teléfono.

rotar texto en divi

A continuación, actualice la opción Transformar traducción:

  • Transformar Traducir eje X: -10% (escritorio), 0% (teléfono)
  • Transformar el eje Y de la traducción: 50% (escritorio), 0% (teléfono)

rotar texto en divi

La configuración de transformación ajusta ligeramente la posición del módulo de texto. Pero, para que nuestro espaciado sea correcto, necesitamos reemplazar el espacio negativo dejado por el módulo de texto sobre el módulo de propaganda. Para hacer esto, necesitamos agregar un margen inferior negativo al módulo de texto de la siguiente manera:

  • Margen personalizado (escritorio): -150 px en la parte inferior
  • Margen personalizado (teléfono): 0px inferior

rotar texto en divi

Duplique la sección y actualice el número de inicio de la lista ordenada

Para crear más secciones de este diseño, puede duplicar la sección. El número de lista ordenada seguirá siendo "1". Para cambiar esto, debe reemplazar la etiqueta de lista ordenada de apertura (ol) con lo siguiente:

rotar texto en divi

Esto permitirá que la lista comience con el número 2 en lugar del 1.

Eso es. ¡Hemos terminado!

Diseño final del diseño con diseños de texto girado

Escritorio

rotar texto en divi

Tableta y teléfono

rotar texto en divi

Pensamientos finales

Saber cómo rotar texto (o cualquier contenido en realidad) en Divi es una excelente manera de llamar la atención sobre su contenido. Además, si lo hace bien, realmente puede hacer que el diseño se destaque. Espero que este tutorial te inspire un poco sobre cómo implementar la rotación de texto para diseños aún más hermosos.

Espero tener noticias tuyas en los comentarios.

¡Salud!