En este breve tutorial vamos a ver cómo dar un toque de color a tus entradas y páginas con estas 6 cajas de contenido: :)
Esto es un ejemplo de una caja de contenido con color para que puedas destacar parte del contenido de tus entradas, posts o páginas.
Esto es un ejemplo de una caja de contenido con color para que puedas destacar parte del contenido de tus entradas, posts o páginas.
Esto es un ejemplo de una caja de contenido con color para que puedas destacar parte del contenido de tus entradas, posts o páginas.
Esto es un ejemplo de una caja de contenido con color para que puedas destacar parte del contenido de tus entradas, posts o páginas.
Esto es un ejemplo de una caja de contenido con color para que puedas destacar parte del contenido de tus entradas, posts o páginas.
Esto es un ejemplo de una caja de contenido con color para que puedas destacar parte del contenido de tus entradas, posts o páginas.
CSS para crear las cajas de color
Para crear las cajas de color vamos a añadir un poco de CSS desde Apariencia > Personalizar > CSS adicional:
/* Cajas de color
------------------------------------------------------------ */
.caja-contenido-azul,
.caja-contenido-gris,
.caja-contenido-verde,
.caja-contenido-purpura,
.caja-contenido-rojo,
.caja-contenido-amarillo {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
.caja-contenido-azul {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
.caja-contenido-gris {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}
.caja-contenido-verde {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
.caja-contenido-purpura {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}
.caja-contenido-rojo {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
.caja-contenido-amarillo {
background-color: #fef5c4;
border: 1px solid #fadf98;
}
Etiquetado HTML para incluir las cajas de color en tu contenido
Para incluir las cajas de color en tus entradas, o páginas, lo único que tendrás que hacer es envolver tu contenido a destacar con unos DIV utilizando la siguiente sintaxis:
<div class="caja-contenido-azul">Aquí tu texto.</div>
Para los demás colores sólo deberás sustituir la clase CSS ‘caja-contenido-azul’ por ‘caja-contenido-gris’, ‘caja-contenido-verde’, ‘caja-contenido-purpura’, ‘caja-contenido-rojo’ o ‘caja-contenido-amarillo’.
Fuente... https://asithemes.com/como-anadir-cajas-con-color-a-tus-posts-y-paginas-en-genesis/