homefinance blog
La mayoría de nosotros estamos acostumbrados a leer el texto de derecha a izquierda y de arriba a abajo. Pero cuando se trata de diseño web, podría ser una buena idea deshacerse de la norma. Una forma de hacerlo es rotando el texto. Rotar el 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 gira el texto solo para 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 efectiva para atraer atención.
Con Divi puede rotar cualquier elemento en su página utilizando las opciones de transformación Built -In. Entonces, en este tutorial, le mostraré cómo rotar con éxito el texto para crear patrones de apariencia únicos. Para hacer esto, diseñaré un aspecto de tres partes, que incorpora ejemplos de texto rotado. Vamos a empezar. Él hace un vistazo a una breve mirada a todo el aspecto que construiremos en el tutorial. Observe que hay ejemplos de texto rotado en tres secciones diferentes de la apariencia.
Descargue el aspecto completo de este tutorial de forma gratuita para poner su mano en la apariencia gratuita de los modelos de texto rotados, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargue la aparición de regístrese gratuito y se registre libremente en el boletín informativo de la Divic y le enviaremos una copia de la división de página de página final, además de muchos otros recursos, consejos y trucos sorprendentes. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Ahora volvamos al tutorial. Cosas para recordar cuando giras el texto ¿En qué dirección debes girar el texto? Si desea rotar el texto para una pantalla vertical, es posible que no esté seguro en qué dirección girar el texto. Puede rotar el texto en la dirección opuesta a la aguja del reloj, de modo que el texto se lea desde abajo hacia arriba. O bien, puede rotar el texto en sentido horario para que el texto se lea de arriba a abajo. Si te preguntas cuál es más fácil de leer, no estoy seguro de que haya una respuesta. Podrías intentar obtener una indicación de la orientación de los títulos de tarjetas en un estante. Pero diferentes países hacen esto diferente (el estándar en los EE. UU. Es en sentido horario, de arriba a abajo).
En este tutorial, giraré el texto en la dirección opuesta al reloj en la mayoría de los casos, principalmente porque me gusta la forma en que se ve en el lado izquierdo de la página (que prefiera inclinar la cabeza hacia la izquierda). Pero no dudes en probar diferentes direcciones. El problema de desenfoque en algunos navegadores (como Chrome y Safari), el texto se vuelve un poco poco claro cuando se usa la propiedad de rotación de transformación. Para remediar el problema, puede agregar un valor del origen de la transformación del 51% o 52% a lo largo del eje x. Esto debería resolver el problema. Parte 1: Construyendo el encabezado con texto vertical para esta primera parte de la apariencia, crearemos un encabezado de texto vertical. Para hacer esto, giraremos un módulo de propaganda utilizando las opciones de transformación. Para comenzar, cree una sección normal con dos columnas.
Antes de agregar un módulo, retire el llenado superior e inferior de la sección que actualiza la siguiente configuración de la sección: trenza personalizada: 0 px hacia arriba, 0 px hacia abajo
Luego actualice la configuración de la fila de la siguiente manera:
Imagen de fondo: [Agregue una imagen con un ancho de al menos 1920px]
Columna 1 Color de fondo: # 121212
Ancho personalizado: 100%
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Trenza personalizada (escritorio): 0 px arriba, 0 px abajo
Trenza personalizada (tableta): 40% correcto
Trenza personalizada (teléfono): 30% correcto
Columna 1 trenza personalizada (escritorio): 200 px arriba, 200 px abajo
Columna 1 Lining personalizado (tableta): 150 px arriba, 150 px abajo
Box Shadow: Ver captura de pantalla
Posición horizontal de la sombra de la caja: 0 px
Box Shadow Posición vertical: -100px
Color de la sombra: # F6454E
Creando el módulo de propaganda ahora estamos listos para agregar el contenido del encabezado. Para hacer esto, agregue un módulo de propaganda a la columna izquierda de la fila. Permita el siguiente contenido:
Título: Diseño Div
Contenido: su contenido va aquí.
Usa el icono: si
Icono: bombilla
Icono de color: # f6454e
Icono de tamaño de fuente: 32 PX
Orientación de texto: centro
Título Título Nivel: H1 (porque es el título de la página principal)
Título de la fuente: multi
Título del estilo de fuente: TT
Color de texto del título: #ffffff
Título Tamaño de texto: 70 PX (escritorio), 50 PX (tableta), 36 PX (teléfono)
El color del texto del cuerpo: #CCCCCC
Espacio de letras del cuerpo: 4 PX
Ancho: 500 PX
Alineación del módulo: centro
Nota importante: Debido a que rotaremos el módulo de la propaganda para que se mantenga verticalmente, el ancho personalizado de 500 PX se convertirá en la altura de la propaganda vertical. Por lo tanto, es importante que el contenido coincida con este módulo. Para este ejemplo, uso una pequeña cantidad de texto y redimensional la fuente de título en diferentes dispositivos, para que el texto no se rompa en una nueva línea y confunda el diseño. Rotando el módulo de la propaganda utilizando opciones de transformación para rotar el módulo de blurbs (y todo su contenido), actualice las siguientes opciones de transformación:
Transporte de la Roción AXA X: -90 grados
Deberá escribir el valor -90deg manualmente. Esto le dará una alineación vertical ascendente del contenido.
Puede notar que el texto no está claro si usa Chrome o Safari. Esto a veces puede suceder cuando se usa la propiedad de transformación: rotada. Para remediar esto, puede ajustar fácilmente el origen de transformación de la siguiente manera:
Transforme el eje Y de origen: el 51%puede tener que ajustar este valor poco hasta que el texto esté claro. Por ejemplo, el 52% puede parecer claro en algunos modelos.
Creando un botón vertical, entonces agregaremos un botón en la parte inferior de nuestro encabezado para recordarle al usuario que desplazue la página hacia abajo. Luego podemos rotar el botón usando opciones de transformación tal como lo hicimos en el módulo de la propaganda.
Cree una nueva fila con una estructura de 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%
El ancho de la canaleta: 1
Luego agregue un módulo de botón en una fila y actualice las siguientes opciones de botón:
Alineación de botones: centro
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 16 PX
El color del texto del botón: #ffffff
El ancho del nudo del botón: 0 PX
Distancia entre letras y botones: 9 PX
Peso de fuente: luz
Estilo de fuente: TT
Icono del botón: flecha derecha
Girando y posicionando el botón para girar y colocar el botón, usaremos una combinación de bordes y giraremos la rotación de la siguiente manera:
Margen personalizado (escritorio): -50 px en la parte superior, 50 px en la parte inferior, -50 px a la izquierda
Margen personalizado (tableta): izquierda 0 px
Transporte de la Roción AXA X: 90 grados
Esta vez, el botón gira con 90 grados (en sentido horario) para obtener una pantalla vertical de arriba a texto. Esto parece ser adecuado porque queremos que el usuario se agote. Parte 2: módulos de texto giratorios para crear etiquetas diagonales
En la siguiente sección de la apariencia, crearemos tres borrones con módulos de texto rotativos utilizados como etiquetas. Esta es una excelente manera de mostrar los elementos recomendados en su página, aquí es cómo hacerlo. Cree una nueva sección habitual con una fila de tres columnas. Luego agregue un módulo de propaganda a la primera columna. Elija usar el icono de la bombilla en lugar de la imagen predeterminada. Luego actualice el módulo de la propaganda de la siguiente manera:
Icono de color: # f6454e
Icono de tamaño de fuente: 32 PX
Revestimiento personalizado: 3VW hacia abajo, 3VW a la izquierda, 3VW a la derecha
Luego actualice la configuración de la fila de la siguiente manera:
Columna 1 Color de fondo: #EEEEEE
Columna 2 Color de fondo: #EEEEEE
Columna 3 Color de fondo: #EEEEEE
Igualar las alturas de la columna: sí
El siguiente paso es crucial para cuando agregamos el diseño rotativo de la etiqueta de nuestro módulo de texto. Queremos superar el módulo de texto para ocultar fuera de la columna. Para garantizar que esto suceda, debemos agregar la propiedad “desbordamiento: oculto” a cada una de las columnas como un CSS personalizado. En la pestaña avanzada, agregue los siguientes CSS personalizados: Columna 1 Elemento principal CSS: Overflow: Oculto;
Columna 2 Artículo principal CSS: Overflow: Oculto;
Columna 3 Elemento principal CSS: Overflow: Oculto;
Agregando y girando el módulo de texto como etiqueta y luego 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 “recomendado”.
Luego estilice el módulo de texto de la siguiente manera:
Color de fondo: # F6454E
Texto de fuentes: muchos
El peso de la fuente de texto: semi audac.
Color de texto de texto: #ffffff
Texto de la carta de espacio: 3 PX
Altura de la línea de texto: 2.5em
Orientación de texto: centro
Ahora le dé al módulo de texto un ancho personalizado de la siguiente manera: Ancho: 180 PX
Alineación del módulo: izquierda
Luego coloque el módulo de texto en la esquina superior izquierda de la columna utilizando las siguientes opciones de transformación:
Transformar el eje x traducido: -25%
Transformar el eje Y traducido: 70%
Es importante usar valores porcentuales aquí para hacer que el diseño sea más receptivo, por lo que tendrá que ingresarlos manualmente.
Transporte de la Roción AXA X: -45 grados
Observe que superar el módulo de texto está oculto fuera de la columna para completar el diseño. Todo lo que tenemos que hacer es copiar los módulos en la columna uno y pegarlos en la columna 2 y la columna 3. Aquí están el resultado final.
Parte 3: Creación de títulos verticales para su contenido.
La siguiente parte de la apariencia utiliza técnicas similares para rotar y colocar un módulo de texto como una posición vertical para su contenido. Este es un aspecto útil para presentar cosas como servicios. También demostraré una forma creativa de usar listas para crear un título vertical único. Aquí le mostramos cómo hacerlo. Cree una nueva sección habitual con una fila de una columna. Luego copie uno de los módulos de propaganda en las tres columnas del aspecto anterior. Esto nos dará un avance en términos de diseño.
Luego actualice la configuración de la propaganda de la siguiente manera:
Ubicación de la imagen / imagen: izquierda
Margen personalizado (escritorio): restante 200 PX
Margen personalizado (teléfono): Izquierda 0 PX
Revestimiento 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 la propaganda de la siguiente manera:
Ancho fronterizo: 2 PX
Color de borde: #EEEEEEEEELE 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 sobre el módulo de la propaganda. Después de eso, agregue el siguiente HTML al cuadro de contenido (asegúrese de que la pestaña de texto esté seleccionada):
Design
lorem ipsum dolor sit amet
Esta es HTML utiliza 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 H5 por separado utilizando las opciones de diseño incorporadas del módulo de texto. Esta técnica se puede utilizar para crear algunos modelos de listas increíbles. Luego pase a la pestaña de diseño y actualice lo siguiente:
Fuente Lista de inordinos: muchos
Lista de peso de fuente desordenada: fácil
Tamaño del texto de la lista no ordinaria: 15 PX
Tipo de estilo de lista desordenado: ninguno
Indenciones de la lista desordenada: 0.01 PX
Lista ordenada de fuentes: Abril Fatface
El color del texto de la lista ordenada:
Lista de texto de tamaño ordenada: 40 PX
Lista ordenada Spravation of Letters: 4 PX
Lista de pedido de línea de altura: 1.3em
Tipo de estilo de la lista: cero principal decimal cero
Fuente del título 5: muchos
Título 5 Peso de fuente: Ultra Light
Título 5 Estilo de fuente: TT
Título 5 Dimensión de texto: 62 PX
Dimensión, girando y posicionando el módulo de texto ahora que tenemos el diseño del texto en su lugar, para darle un ancho personalizado. Recuerde que el ancho del módulo se convertirá en la altura del módulo una vez que giramos para mostrarlo verticalmente.
Ancho personalizado: 300 PX
Alineación del módulo: izquierda
Para rotar el texto, actualice lo siguiente: Transformación del eje x: -90deg (escritorio), 0deg (teléfono)
Necesitamos restablecer la rotación de regreso a 0deg para mostrar su teléfono.
Actualizar la siguiente opción de transformación:
Translación del eje X de transformación: -10% (escritorio), 0% (teléfono)
Transforma el eje Y traducido: 50% (escritorio), 0% (teléfono)
La configuración de transformación ajusta fácilmente la posición del módulo de texto. Pero para enderezar nuestro espacio, debemos reemplazar el espacio negativo dejado por el módulo de texto sobre el módulo de la propaganda. Para hacer esto, debemos 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): 0 PX a continuación
Duplicar la sección y actualizar la lista de inicio de ordenadas para crear más secciones de este aspecto, puede duplicar la sección. El número de la lista ordenada continuará siendo “1”. Para cambiar esto, debe reemplazar la etiqueta de la lista de aperturas ordenada (OL) con la siguiente:
Esto permitirá que la lista comience con el número 2 en lugar de 1. Eso es todo. ¡Todos hemos terminado! Diseño final del modelo con patrones de texto de rotación de escritorio
Tableta y teléfono
Pensamientos finales Saber cómo rotar el texto (o cualquier verdaderamente contenido) en DIV es una excelente manera de llamar la atención sobre su contenido. Si lo hace correctamente, puede hacer que el diseño se destaque. Espero que este tutorial se inspire en cómo puede implementar la rotación del texto para aún más bello. Espero tener noticias suyas en los comentarios. ¡Suerte!
