Crea cajas texto en WordPress con código

Marketing Digital

¿Qué son?

Las cajas de texto en WordPress son simples líneas de código que añadimos en nuestro archivo style.css de nuestro tema en WordPress que estemos usando, para crear estos efectos tan chulos sin necesidad de ningún plugin extra.

Ejemplo de caja Gris

Ejemplo de caja Roja

¿Cómo lo añado a mi web?

Copia primeramente todo el contenido de este código en tu archivo dentro de tu tema style.css.

/* Cajas con contenido de color */

.box-gray,
.box-grey,
.box-red

{
margin:0 0 25px;
overflow:hidden;
padding:20px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.box-gray {
background-color:#e2e2e2;
border:1px solid #bdbdbd;
}

.box-grey {
background-color:#F5F5F5;
border:1px solid #DDDDDD;
}

.box-red {
background-color:#f9dbdb;
border:1px solid #e9b3b3;
}

En este primer código lo que hemos  hecho es definir la clase y darle valores, por ejemplo el .box-red puede ser todo lo rojo que quieras , simplemente varia el color #f9dbdb y del borde #e9b3b3

Por último, sólo tienes que insertar este código en cualquier contenido de WordPress ya sea Páginas, entradas o contenidos personalizados.

<div class=»box-grey» style=»text-align: center;»>
<p style=»text-align: left;»>Ejemplo de caja Gris</p>

</div>

Para este ejemplo vemos como hemos usado cajas de color gris, pero también podemos usar cajas de color rojo, o las que queramos, únicamente habrá que definir la clase cuando definimos un color .box-red (puede ser el tipo de rojo que le digamos). ¡Adelante, que lo disfrutes! Además, es responsive!! 🙂

Si quieres ver como quedan estas cajas puedes hacer pruebas con esta herramienta para ver como se adapta a cualquier formato de pantalla.