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

Vistazo

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

Descargue el diseño completo de este tutorial GRATIS

Para poner sus manos en el diseño gratuito de Diseños de texto rotado, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» 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 a Divi Builder.

Ahora volvamos al tutorial.

Cosas a tener en cuenta al rotar texto

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

Si desea rotar el texto para una visualización vertical, es posible que no esté seguro de en qué dirección rotar el texto. Puede girar el texto en el sentido contrario a las agujas del reloj para que se lea de abajo hacia arriba. O bien, puede rotar 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ía intentar obtener una pista a partir de la orientación de los títulos de los libros en una estantería. Pero 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 hacia abajo).

En este tutorial, 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éntase 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 de transformación y rotación. Para solucionar el problema, puede agregar un valor de origen de transformación de 51 % o 52 % a lo largo del eje X. Esto debería solucionar el problema.

Parte 1: Crear el encabezado con texto vertical

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

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

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

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

• Imagen de fondo: [agregar imagen con al menos 1920px de ancho]
• Columna 1 Color de fondo: #121212

• Ancho personalizado: 100%
• Ancho del canalón: 1
• Igualar alturas de columna: SÍ
• Relleno personalizado (escritorio): 0px arriba, 0px abajo
• Relleno personalizado (tableta): 40% derecho
• Relleno personalizado (teléfono): 30% derecho
• Relleno personalizado de la columna 1 (escritorio): 200 px arriba, 200 px abajo
• Columna 1 Relleno personalizado (tableta): 150 px arriba, 150 px abajo

• Sombra de caja: 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

Creación del 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.

Actualice el siguiente contenido:

• Título: Divi Diseño
• Contenido: Su contenido va aquí.
• Icono de uso: SÍ
• Icono: bombilla

• Color del icono: #f6454e
• Tamaño de fuente del icono: 32 px
• Orientación del texto: centro
• Título Nivel de encabezado: 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 cuerpo del texto: #cccccc
• Espaciado entre letras del cuerpo: 4px
• Ancho: 500px
• Alineación del módulo: centro

Nota importante: dado que giraremos el módulo de publicidad para que quede vertical, el ancho personalizado de 500 px se convertirá en la altura del módulo de publicidad vertical. Por lo tanto, es importante que el contenido encaje dentro de este módulo. 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.

Rotación del módulo 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.

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: rotar. Para solucionar esto, puede ajustar ligeramente el origen de la transformación de la siguiente manera:

• Transformar el eje Y del origen: 51 %

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

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.

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ón: 1

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

• 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 entre letras de botones: 9px
• Peso de fuente: ligero
• Estilo de fuente: TT
• Icono de botón: flecha derecha

Rotación y posicionamiento del botón

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

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

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 ser apropiado ya que queremos que el usuario se desplace hacia abajo.

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

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

Aquí está 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.

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: 32 px
• Acolchado personalizado: 3vw abajo, 3vw izquierda, 3vw derecha

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
• Igualar alturas de columna: SÍ

Este próximo paso es crucial para cuando agreguemos nuestro diseño de etiqueta de módulo de texto rotado. 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:

Columna 2 Elemento principal CSS:

Columna 3 Elemento principal CSS:

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 del texto con la palabra «Destacado».

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

• Color de fondo: #f6454e
• Fuente del texto: Muli
• Peso de fuente de texto: semi negrita
• Texto Color del texto: #ffffff
• Espaciado entre letras de texto: 3px
• Altura de la línea de texto: 2,5 em
• Orientación del texto: centro

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

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

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

• Transformar Traducir eje X: -25%
• Transformar Traducir eje Y: 70%

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

Transformar Rotar eje X: -45 grados

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.

Parte 3: Creación de encabezados verticales para su contenido

La siguiente parte del diseño utiliza técnicas similares para rotar y colocar un módulo de texto como 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 único.

Aquí está cómo hacerlo.

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

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

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

• Colocación de la imagen/publicidad: 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

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

Creación del 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 sobre el módulo de publicidad.

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

Este 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 listas sorprendentes .

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 de texto de lista desordenada: 15px
• Tipo de estilo de lista desordenada: Ninguno
• Sangría de elemento de lista desordenada: 0.01px

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

• Título 5 fuente: Muli
• Encabezado 5 Peso de fuente: ultra ligero
• Título 5 Estilo de fuente: TT
• Título 5 Tamaño del texto: 62px

Cambiar el tamaño, rotar y colocar el módulo de texto

Ahora que tenemos el diseño del texto en su lugar, vamos a darle 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

Para rotar el texto, actualice lo siguiente:

• Transformar Rotar eje X: -90 grados (escritorio), 0 grados (teléfono)

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

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

• Transformar Traducir eje X: -10 % (escritorio), 0 % (teléfono)
• Transformar Traducir eje Y: 50 % (escritorio), 0 % (teléfono)

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

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

Duplicar la Sección y Actualizar 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 la lista ordenada seguirá siendo “1”. Para cambiar esto, debe reemplazar la etiqueta de lista ordenada de apertura (ol) con lo siguiente:

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

Eso es todo. ¡Todos hemos terminado!

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

Escritorio

Tableta y teléfono

Pensamientos finales

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

Espero escuchar de usted en los comentarios.

¡Salud!