Uso de texto lateral y vertical para crear una página de destino única con Divi

Lo que estarás haciendo

El resultado final de lo que te estoy explicando hoy es simple, limpio y, ¿me atrevo a decirlo? – elegante. El texto vertical no es un efecto que desee usar en exceso, por lo que estoy pensando en que quizás sea un horario de conciertos o tal vez una lista de horarios de clase. Incluso un menú de camión de comida o un horario de ubicación. Básicamente, cualquier información que sea rápida y que deba ser llamativa y memorable.

¡Ahora vamos a hacer que suceda para ti!

Uso de texto lateral y vertical para crear una página de destino única con Divi

Suscríbete a nuestro canal de Youtube

¡Agregue una sección de especialidad!

Cuando abres una nueva página en Divi , se te presenta un lienzo casi en blanco. Comienzas con una sección regular. Pero no queremos una sección regular. Queremos una  sección especializada . Así que presione el círculo azul +, haga clic en el botón de la sección de especialidad en el medio y elija el último en el nuevo modal. Luego elimine esa aburrida sección regular.

Ahora, te queda una sección de especialidades de color naranja brillante que te tratará como mereces que te traten: especial. Dentro, esto es lo que desea agregar: una fila de dos columnas con 1 módulo de texto en la columna izquierda y 4 módulos de texto en la derecha. Luego, usará un módulo de una sola imagen en el lugar independiente a la derecha.

Además, tome nota: esta es la Vista de estructura alámbrica dentro del generador visual, y funciona igual que el generador de back-end, pero es más rápido. Si no lo has probado, por favor pruébalo. Es realmente asombroso.

Próxima parada: CSS personalizado

Incluso si no está totalmente interesado en CSS, estos fragmentos son fáciles de usar e implementar, y me aseguré de comentar el código para que sepa lo que hace cada línea. Tenga en cuenta que al linter incorporado de WP no le gusta la orientación del texto: vertical; . Sin él, esto no funcionará. Este es un caso en el que puede ignorar ese triángulo amarillo.

Puede copiar y pegar este código en el  campo CSS personalizado de Opciones de tema Divi (en la pestaña General).

Siéntete libre de ajustar los nombres y colores de las clases según lo necesites para tu diseño. Simplemente me gustó cómo se veían el amarillo y el blanco con el fondo que usé. Hablando de los antecedentes…

Haciendo tu fondo

Creo que este tipo de sitios atrevidos se ven geniales con paletas de colores no tan naturales. Los duotonos están realmente de moda en este momento, así que quería algo así. Hay muchas maneras de ajustar los colores de tus imágenes a duotono, pero Flywheel tiene un tutorial increíble sobre cómo usar Photoshop para hacer uno . Esta vez, sin embargo, no usé Photoshop, solo jugué en Snagit e hice algo que me gustó.

Usé una de las increíbles fotos de Joy como base. (¡Siéntete libre de descargar esta imagen y úsala como quieras también!). Aquí está el original:

Lo recorté un poco (a 2000 × 920 desde 2000 × 1333), abrí la  ventana Efectos en la esquina inferior derecha y jugué con la  configuración de Ajuste de color .

• Brillo: -13%
• Contraste: -1%
• Tono: -157
• Saturación: 13%
• gama: 1,69

No es  exactamente un duotono, pero me dio el mismo tipo de paleta con la que trabajar.

Una vez hecho eso, fui a construir con Divi.

Haciéndolo con Divi

Al igual que nuestro texto, comencemos en la parte superior izquierda y avancemos hacia abajo en la página. En primer lugar, me aseguré de etiquetar todos los módulos en la  sección Etiqueta de administración de la configuración del módulo. También puede escribirlo en línea usando Wireframe View.

Texto de lado

Hicimos el texto lateral con una sola línea de CSS:  transformar: rotar (90 grados); Tenga en cuenta que no es una  transformación de texto,  solo  transform . Eso significa que cualquier cosa (imágenes, videos, etc.) en este módulo se rotará 90 grados. (O la cantidad que pones).

Para la configuración de Divi, desea realizar estos cambios:

• Pestaña Diseño, Espaciado: 45 % relleno superior, 15 % relleno izquierdo
• Pestaña Avanzado, ID y clases de CSS: «texto lateral» en el campo de clase de CSS (sin «.» para indicar que es una clase)

Texto de título vertical

Para el cuadro de texto del título vertical… no tiene que hacer absolutamente nada. Configuré este en H2 y presioné guardar (aparte de darle una etiqueta de administrador). (Esta es la vista de cuadrícula en Visual Builder en caso de que se lo pregunte).

Meses verticales, fechas, horas

Estos son, nuevamente, módulos de texto apilados uno encima del otro. Debido al CSS que ingresamos anteriormente, puede escribir lo que quiera en el cuadro de contenido y aparecerá verticalmente. Cuando ingrese y comience un nuevo párrafo, estará a la izquierda del anterior (gracias al  modo de escritura: vertical-lr; snippet). Si desea los nuevos párrafos a la derecha, puede cambiarlos al  modo de escritura: vertical-rl; donde las dos últimas letras representan de izquierda a derecha o de derecha a izquierda.

Esto es lo mismo para todos y cada uno de estos módulos. La única personalización que hice fue agregar la  clase CSS vertical-amarillo o  vertical-blanco . La razón de esto es que, sí, el CSS que ingresamos con monoespaciado y mayúsculas ayuda mucho, pero la sección Divi Specialty ya está alineada para que el contenido esté bien contenido. Es por eso que elegí usar especialidad en lugar de normal. Requiere mucho menos jugar con los márgenes, el relleno  y la alineación que la mayoría de las secciones, filas y columnas.

Ahora, dependiendo de su imagen de fondo cuando haga esto, es posible que tenga que mover las cosas con márgenes o diferentes secciones especiales. Siento que una imagen de fondo enfocada en el centro funciona bien para este tipo de sitio, pero si tiene uno donde el elemento principal está a la izquierda o a la derecha (o arriba o abajo, incluso), el posicionamiento puede requerir un poco más de ajuste.

Otra cosa: también puede escribir varias palabras. Este ejemplo resulta ser una palabra por línea. Las oraciones completas están bien, aunque son más difíciles de leer. Sea breve, pero no está limitado a solo palabras en solitario.

El módulo de imagen solitaria

Pienso en esto agregando un módulo aquí como opcional. Está ahí como parte de la sección de especialidad, y creo que un logo se ve bien en la mayoría de los casos. Sin embargo, si desea dejarlo en blanco, puede hacerlo. El espacio que proporciona la sección especializada de Divi mantiene alineado el resto de la página independientemente. Este no está en una fila, lo que significa que es independiente del estilo y el espacio que le des a ese contenedor y los elementos que coloques encima y debajo de él.

Resultado final

Creo que estarás orgulloso de las cosas que puedes crear con estos efectos geniales. Esto es lo que obtendrán los pasos anteriores, una vez más.

Ahí tienes

Cuando combinas la ridícula cantidad de opciones que obtienes de Divi (como secciones especializadas) con solo un par de líneas geniales (y algo oscuras) de CSS, puedes crear algunas páginas realmente únicas. Si bien este efecto no es adecuado para todos los sitios, la inclusión de texto lateral y vertical realmente puede hacer que las páginas se destaquen y sean más memorables que una página de destino tradicional. Así que adelante, Divi Nation, y vea qué cosas geniales puede hacer con el texto vertical y las rotaciones laterales.

¿Qué efectos geniales has podido hacer con texto lateral o vertical?