A muchas personas les gusta el aspecto del texto en múltiples columnas, un formato que se parece al de los periódicos. Existen varias razones por las cuales podrías querer formatear tu blog de WordPress de esta manera. Sin embargo, no es precisamente la cosa más sencilla de hacer. Puedes buscar temas específicos o comprar caros plugins que lo hagan por ti, ¿pero realmente quieres hacer eso? La mayoría de personas que crean sitios web de WordPress lo hacen para sus blogs personales o como sitios web para pequeños negocios, por lo que no quieren (o no se pueden permitir) gastar mucho dinero en ello. Afortunadamente, este tutorial de WordPress te guiará a través de los pasos necesarios para crear tu propio diseño de columnas.
Crear estas columnas implica hacer algo de trabajo en el código HTML de tu blog de WordPress. Por suerte, en realidad es bastante fácil de hacer. Sólo tienes que hacer clic en el editor de textos e introducir el código correcto. Si quieres crear un blog de tres columnas, éste es el código:
<div style = “width:33%; padding:0 10px 0 0;float:left;”>
Después escribe el contenido de la primera columna. Cuando hayas terminado, termina la línea final del contenido con </div>.
Después añade esta línea:
<div style = “width:33%; padding:0 10px 0 0;float:left;”>
Esto creará la columna central. Una vez más, termina la última línea del contenido con </div>.
Para la tercera columna:
<div style = “width:33%; padding:0 10px 0 0;float:right;”>
Esto creará la tercera columna y alineará todo lo que haya en su interior a la derecha. De este modo, obtendrás algo como esto:
Columna 1 Columna 2 Columna 3
Las primeras dos columnas estarán alineadas a la izquierda, mientras que la tercerá estará alineada a la derecha.
Puedes cambiar el aspecto de las columnas modificando el código. Vamos a analizar lo que hace realmente esta línea de HTML.
<div style = “width:33%; padding:0 10px 0 0;float:left;”>
div style – éste es el comando que le dice a WordPress que estás creando una división de texto, la cual puede ser un párrafo, una columna o incluso una frase.
width: 33% – éste es el ancho de la columna. Para tres columnas que tienen el mismo ancho, dividirías toda el área por tres. Así que un 100% de ancho dividido por 3 columnas significa que cada columna tendrá más o menos un 33% del tamaño total.
padding: 0 10px 0 0; – ésta es la cantidad de relleno entre las columnas y el resto de la página. Los cuatro números corresponden al espacio en blanco de la parte superior, la parte derecha, la parte inferior y la parte izquierda de la columna. En este caso, hay un relleno superior de 0, 10 píxeles (px) de relleno derecho, 0 de relleno inferior y 0 de relleno izquierdo. El relleno derecho de 10px se asegura de que haya un poco de espacio entre tus columnas. Puedes aumentar o disminuir este espacio si lo deseas. Si quieres que las columnas destaquen del contenido situado por encima y por debajo de ellas, puedes añadir un poco de relleno en la parte superior e inferior.
float:left; – Éste es el alineamiento del texto. Puedes cambiarlo a la derecha (right) si quieres.
Este metodo te ofrece un control completo del aspecto de tus columnas, y es totalmente gratis.
