Cómo agregar múltiples columnas en WordPress (2 métodos)

La práctica de organizar el contenido en columnas se remonta a los primeros días de la imprenta. Este formato puede ser una forma versátil de organizar su texto, imágenes y más. Sin embargo, agregar varias columnas en WordPress y colocarlas correctamente puede ser un poco complicado.

Afortunadamente, no tiene por qué ser así. Ahora puede usar el editor de bloques para agregar fácilmente múltiples columnas a sus publicaciones y páginas de WordPress en un par de pasos cortos.

También puede lograr este diseño utilizando el editor clásico y un complemento de creación de páginas.

En este tutorial, veremos cómo agregar varias columnas en WordPress.

¡Empecemos!

Por qué usar un diseño de varias columnas

Desde elegir el tema correcto hasta agregar fuentes personalizadas, personalizar el diseño de su sitio es fundamental para establecer su marca. Tus publicaciones y diseños de página también son parte de este rompecabezas. Experimentar con diferentes opciones de formato puede ser una forma interesante de agregar variedad estructural a su contenido.

Dado que no existe un formato único que sea mejor para la legibilidad, puede ser creativo y encontrar una apariencia que funcione para usted. Puede cambiarlo de una página a otra para adaptarse a varios tipos de contenido y crear un sitio de WordPress que consta de páginas con diferentes diseños, como en esta demostración:

Las columnas son un formato especialmente versátil. Si está buscando utilizar su espacio económicamente, son una manera fácil de segmentar su texto.

También puede usar columnas para emparejar diferentes widgets de manera cohesiva, como muestra el tema BuddyBoss:

O bien, puede que le interese utilizar un formato flexible que se pueda quitar o remodelar según sus necesidades. Independientemente de su razonamiento, las columnas pueden agregar algo de variedad y organización a su sitio.

Cómo agregar múltiples columnas en WordPress (2 métodos fáciles)

En los primeros días de WordPress, los usuarios necesitaban tener un conocimiento práctico de HTML y poder editar su código con confianza para agregar columnas a sus publicaciones. En aquel entonces, la redacción y edición de contenido no era la experiencia más fácil de usar.

Afortunadamente, ahora hay dos métodos fáciles para agregar columnas en WordPress: no se requiere HTML.

El editor de bloques viene con una función de columna incorporada e intuitiva, y aquellos que prefieren el editor clásico estarán felices de saber que aún puede evitar la codificación manual de columnas con la ayuda de un complemento.

Ahora, veamos los dos métodos.

Método uno: use la funcionalidad nativa del editor de bloques

Comenzaremos agregando varias columnas usando el editor de bloques (Gutenberg). La nueva interfaz predeterminada de creación de contenido de WordPress ofrece una gran cantidad de funciones útiles, todas enfocadas en bloques de contenido fáciles de mover.

Una de estas características es el bloque Columnas, que se llama acertadamente y te ayuda a crear tantas columnas como quieras.

Para comenzar, ingrese "columnas" en el cuadro de búsqueda del editor de bloques que puede abrir haciendo clic en el botón +. Alternativamente, puede simplemente hacer clic en la pantalla y comenzar a escribir "/columnas" para que aparezca la misma opción.

Esto abrirá una ventana donde puede elegir un diseño de columna:

Comenzar con las dos columnas predeterminadas y ajustar la configuración más tarde también es una opción.

Una vez que haya especificado cuántas secciones desea y cómo desea dividirlas, puede arrastrar y soltar el bloque donde desee.

A continuación, puede anidar otros bloques dentro del bloque Columnas. Todos podrían ser bloques de texto, o puedes sacudirlo. Intente mejorar una columna de texto colocándola junto a una imagen o columna de calendario para que se destaque:

No tenga miedo de aprovechar la flexibilidad del editor mezclando y combinando elementos.

Después de eso, puede volver a la configuración del bloque Columnas y ajustar la relación de ancho para que se ajuste a sus necesidades. Cada columna individual se puede ajustar según el tipo de aspecto que esté buscando.

Gracias a la interfaz visual del editor de bloques, su trabajo en el backend se traducirá bastante directamente al frontend. Como referencia, así es como se ve nuestro ejemplo después de publicarlo:

Una vez que domines los conceptos básicos, hay más para explorar con las columnas.

Si está buscando más funcionalidad con el editor de bloques, puede considerar descargar un complemento de bloque que aumente las funciones y experimentar con nuevas combinaciones de contenido.

Método dos: use el editor clásico y el generador de páginas de SiteOrigin

Si eres más tradicionalista y aún usas el editor clásico, también puedes agregar múltiples columnas a tus publicaciones y páginas sin código. Todo lo que necesitas es un complemento. Hay muchas opciones que pueden hacer el trabajo, por lo que lo primero que debe hacer es elegir una.

Como soy un gran admirador del complemento Page Builder de SiteOrigin, usaré este para crear un diseño de varias columnas en el editor clásico:

Page Builder es una opción gratuita sólida que utiliza una interfaz intuitiva de arrastrar y soltar y tiene más de 1 millón de instalaciones activas.

Una vez que haya instalado y activado el complemento en su sitio, vaya a su página de configuración haciendo clic en el menú Configuración > Creador de página en la barra lateral izquierda.

Aquí, seleccione la pestaña General y marque la opción Usar editor clásico para nuevas publicaciones :

Tenga en cuenta que también necesita tener el complemento Classic Editor instalado y activado en su sitio para que esta opción funcione.

Ahora, puede agregar columnas abriendo una publicación existente o creando una nueva y navegando a la pestaña Generador de páginas en la esquina superior derecha:

Aquí, haga clic en el botón Agregar fila que creará una nueva fila donde puede agregar sus columnas:

Esto abrirá una interfaz donde puede ajustar algunas configuraciones iniciales, incluido el número, la proporción y la dirección de sus columnas:

Especifique el número de columnas y decida cuáles serán sus proporciones. Luego, haga clic en Insertar para colocarlos en su publicación.

Similar al editor de bloques, el complemento Page Builder by SiteOrigin le permite insertar diferentes widgets en la estructura de la columna.

Seleccione la columna a la que le gustaría agregar el widget, luego haga clic en el botón Agregar widget , que abrirá el siguiente panel:

Elija el elemento que desea incorporar y rellénelo con su contenido.

El backend de su publicación ahora debería verse así:

Finalice sus cambios.

Esto se traducirá en un resultado en la interfaz que se parece a esto:

Intente jugar con diferentes combinaciones de widgets para lograr una apariencia única para su sitio. Es un proceso fácil que puede revertir en cualquier momento, así que no tenga miedo de romper el molde y ser creativo.

Conclusión

Agregar columnas a su sitio de WordPress puede ayudar a mantener su diseño fresco y atractivo. Si bien el proceso de hacerlo ocasionalmente puede ser un poco desafiante, existen métodos simples que puede usar para hacerlo más fácil.

En este tutorial, cubrimos dos métodos paso a paso para agregar múltiples columnas en WordPress:

1. Uso del bloque Columnas integrado del editor de bloques
2. Instalar un complemento como Page Builder para usarlo con el editor clásico

¿Cuál es tu forma favorita de agregar columnas en WordPress? ¡Háganos saber en la sección de comentarios!