Distribuir contenido en columnas

Tiempo estimado de lectura: 6 minutos

 

Cómo distribuir contenido en columnas

Todos hemos necesitado alguna vez distribuir contenido en columnas, por ejemplo, tener una imagen y un texto a su lado. Si trabajas con el editor Gutenberg no tendrás problema, simplemente creas varias columnas (las que necesites) y les insertas un bloque de texto.

El problema viene si trabajas con el Editor Clásico, ya que esa opción no está contemplada. Siempre puedes utilizar un plugin del tipo Column Shortcodes, pero si eres de los que prefiere hacer lo con código y así ahorrarte un plugin (plugin a plugin, todo cuenta), aquí te presento una buena solución para lograrlo.

Código que vamos a utilizar

Como siempre, en primer lugar te muestro el código que utilizaremos y después te explicaré qué es lo que hace realmente y te diré cómo puedes adaptarlo a tus necesidades.

En este caso vamos a utilizar código CSS para lograrlo, con lo cual puedes copiarlo y pegarlo directamente en el Personalizador de tu tema activo. El código que vamos a utilizar es el siguiente:

/* Código CSS para poner el contenido en dos columnas */
.columnar {
float: left;
width: 49.9%;
}

Este código crea una clase llamada columnar, que sirve precisamente para eso, para columnar tu contenido. Este clase le dice al contenido que debe alinearse a la izquierda y que su tamaño será del 49.9%.

Si te fijas, podríamos haberle puesto directamente un 50%, pero no lo hacemos precisamente para que el contenido tenga algo de aire, que respire. Imagínate que en una de las columnas utilizas cualquier otro código que afecte al contenido (por ejemplo un margin o un padding), en estos casos, es posible que dicho contenido se desborde y se salga fuera de la columna. Pues con esta medida, evitamos eso, de todas formas, te aconsejo que cambies el tamaño de columna y que vayas probando hasta que tus columnas se vean bien en tu web.

Si quieres dividir tu contenido en tres columnas, debes poner un width, por ejemplo, de un 33.3% (ya sabes, que lo más cerca del 100% sin llegar a él, para evitar los desbordamientos).

¿Eres usuario de Microsoft Word?, entonces sabrás que aún no hemos terminado

Como bien dice el título de este apartado, si eres usuario de Microsoft Word, sabrás que, cuando columnamos contenido, tenemos que dejar un intro para separar el contenido columnado en dos o tres columnas (o las que utilices), del contenido normal (a una sola columna).

Este intro es fundamental, ya que lo que hace es separar secciones. Secciones con un número de columnas concretas, de secciones con otro número de columnas. Pues con este código en CSS también tenemos que decirle a WordPress (y al navegador), que vamos a dejar de escribir contenido en varias columnas y que volvemos a escribir en una sola.

Para lograr esto, utilizaremos el siguiente código:

/* Código para separar el contenido siguiente */
.clearfix::after {
content: "";
clear: both;
display: table;
}

Este código lo que hace es borrar después de las columnas (clearfix:: after;) y formatear el siguiente contenido en una línea aparte del contenido anterior, de las columnas (clear: both;).

En realidad, clear:both; lo que hace es indicar que el elemento (el siguiente texto), no debe envolver a ningún contenido flotante (en este caso el anterior float: left;). Por último, both le indica que no lo debe hacer ni a la izquierda ni a la derecha.

Con todo esto, el código completo que vamos a utilizar, es el siguiente:

.columnar {
float: left;
width: 49.9%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}

¿Qué hacemos a continuación?, pues evidentemente probar si funciona 🙂

Esto es muy sencillo, escribimos tres textos: dos para las dos columnas que queremos crear, y uno para el contenido que irá después de las columnas.

Título de la Columna 1

Contenido de la columna 1

Título de la Columna 2

Contenido de la columna 2

Texto que se mostrará a continuación de las columnas.

A continuación, a este texto le aplicamos la clase creada para las columnas (columnar), y el clearfix y nos quedará algo como esto:

<div class="columnar">
<h2>Título de la Columna 1</h2>
Contenido de la columna 1
</div>
<div class="columnar">
<h2>Título de la Columna 2</h2>
Contenido de la columna 2</div>
<div class="clearfix"></div>
Texto que se mostrará a continuación de las columnas.

El resultado será este:

Resultado final sobre cómo distribuir contenido en columnas
Resultado final sobre cómo distribuir contenido en columnas

Sencillo, ¿verdad?.


¿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. *