Columnas en entradas de Wordpress

El diseño web de una página o blog puede cambiar radicalmente la forma en que los usuarios leen un artículo. Por supuesto que un diseño web elegante siempre será favorable y ayudará a ganar lectores que nos visiten con continuidad.

Muchos blogs muestran su contenido en una sola columna, pero también es posible mostrarlo en varias, como si fuese un periódico de verdad. Hay varias formas de maquetar un artículo, en este caso vamos a mostrarte como separar el párrafo en varias columnas simplemente con código CSS.

iseño y maquetacion webA la hora de maquetar una revista hay multitud de aplicaciones que nos sirven para mejorar su diseño y aspecto visual. Cuando se trata de una pagina web, mi herramienta preferida es CSS3.

Y es que cuando se trata de diseño web, las posibilidades son incluso mayores que cuando se trata de medios impresos. Por ejemplo cuando maquetas una revista, el tamaño de la impresión siempre será el mismo. En cambio en la página web puede variar lo que da la opción de jugar con el texto y hacerlo fluido.

Para provocar que todo el texto del artículo fluya por la página, tan solo debemos añadir una propiedad de CSS de esta forma incluso si cambiamos el tamaño de la ventana del navegador el texto de la pagina segura fluyendo, esta característica es importante para los diseños web responsive. Para conseguir este efecto vamos a usar el siguiente código.

<div class="content">
 <p>Lorem ipsum..</p>
 <p>Lorem ipsum..</p>
 <p>Lorem ipsum..</p>
</div>
.content {
 -moz-column-count: 3;
 -moz-column-gap: 50px;
 -moz-column-rule: none;
 -webkit-column-count: 3;
 -webkit-column-gap: 50px;
 -webkit-column-rule: none;
 column-count: 3;
 column-gap: 50px;
 column-rule: none;
 }

De este forma el texto se mostrará en tres columnas diferentes, espaciadas por 50px una de otra. También puedes añadirsi quieres mostrar el texto justificado.

 text-align:justify

Hay más métodos para mostrar el contenido en columnas como instalar un plugin o separar el contenido en <div> con un ancho de página determinado, 45% para dos columnas o 27% para tres por ejemplo. Pero nunca ofrecerá unos resultados tan fluidos como el método mencionado. En mi opinion, siempre intento introducir el código manualmente en mi diseño web.

Con esta facilidad puedes añadir columnas a tus blogs o paginas web, incluso puedes usarlo en plantillas de WordPress. ves que es de fácil implantación pero si tuvieras alguna duda contacta conmigo, siempre intentaré ayudarte con el diseño web o con el desarrollo del código de tu página web.

También te puede gustar

Deja un comentario