Poner texto vertical en WordPress

Tiempo estimado de lectura: 10 minutos

 

Cómo poner texto vertical en WordPress

Hoy vamos a ver un efecto bastante llamativo, se trata de poner texto vertical en WordPress. Crearemos un efecto simpático, por ejemplo, para tus cajas de contenido.

Imagínate que tienes contenidos en divs pero ya estás aburrido de las cabeceras para poner los títulos a esos contenidos. Pues bien, a continuación te mostraré cómo poner los títulos de estas cajas en la parte lateral izquierda, y además con un efecto de rotación de 90 grados.

¿Curioso, verdad?. Vamos a ver cómo podemos hacerlo.

Código que vamos a utilizar

Lo que vamos a hacer es utilizar código CSS para hacerlo más sencillo. Cuando necesitemos hacer algún efecto ya sea en tipografías o en imágenes, seguramente podamos hacerlo con código CSS, si lo que estamos buscando hacer un efecto de rotación sencillo, podemos rotar elementos 90 grados en sentido anti horario.

El código que vamos a utilizar en este ejemplo es el siguiente:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
margin-top: 50px;
}
section {
width: 610px;
margin: 0 auto;
}
.wrapper {
width: 300px;
min-height: 250px;
position: relative;
border: 2px solid black;
border-left: 40px solid black;
padding: 15px;
color: rgba(0, 0, 0, 0.5);
font-size: small;
display: inline-block;
}
.wrapper h3 {
font-size: 1rem;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 0;
left: 0;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}

Al ser un código CSS, puedes pegarlo directamente en el Personalizador de tu WordPress, para ello debes ir a Ajustes, Personalizar, CSS adicional. Y como siempre, puedes ajustar los parámetros a tus necesidades.

¿Qué hace este código?

Básicamente este código crea una caja de color negro, con un tamaño de 610 píxeles de longitud, a continuación formatea el texto con una tipografía, un tamaño y un color concretos, por último, crea un encabezado <h3> para el título, que lo transforma en mayúscula y lo gira 270 grados.

Ahora creamos las cajas para el contenido

A continuación, lo que tenemos que hacer es crear las cajas con el contenido y el título que hemos rotado. Puedes utilziar un código HTML como este:

<section>
<div class="wrapper">
<h3>Título 1</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.</p>
</div>
</div>
<div class="wrapper">
<h3>Título 2</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.</p>
</div>
</div>
</section>

Recuerda que al ser código HTML, deberás pegarlo en el modo HTML del Editor 😉

Resultado final

Si todo ha ido bien, deberías tener algo parecido a esto:

Resultado final del efecto para poner texto vertical en WordPress
Resultado final del efecto para poner texto vertical en WordPress


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *