Crear diseños de varias columnas solía requerir conocimientos de HTML o la ayuda de un desarrollador, pero ya no. ✨
A través de nuestras pruebas de las funciones de edición de contenido de WordPress, hemos encontrado una forma fácil de usar para dividir tu contenido en columnas sin tocar ningún código.
Estos diseños pueden hacer que tus publicaciones sean más fáciles de leer y más atractivas visualmente, especialmente cuando comparas características, enumeras pros y contras, u organizas grandes bloques de texto.
En esta guía, compartiremos los métodos más sencillos que hemos descubierto para agregar contenido de varias columnas a tus publicaciones de WordPress.
💡Respuesta rápida: Cómo agregar contenido de varias columnas en WordPress
Aquí tienes un resumen rápido de los métodos que cubriremos para agregar columnas a tus publicaciones y páginas de WordPress.
- Usando el Editor de Bloques: El método más sencillo es usar el bloque incorporado 'Columnas' para crear diseños sin necesidad de plugins.
- Usando el Editor Clásico: Para los usuarios que todavía usan el editor antiguo, te mostraremos cómo usar el plugin Column Shortcodes para agregar un diseño de cuadrícula.
¿Por qué agregar contenido de varias columnas en WordPress?
La razón principal para agregar contenido de varias columnas es hacer que tus publicaciones sean más escaneables y visualmente organizadas, lo que ayuda a mantener a los lectores interesados.
Si bien los diseños de una sola columna son comunes en línea, los diseños de cuadrícula son una herramienta poderosa para mejorar la experiencia del usuario. Estos son los beneficios clave de usar un diseño de varias columnas en WordPress:
- Mejora la legibilidad: Al igual que los periódicos y las revistas, las columnas dividen las líneas largas de texto, lo que hace que tu contenido sea más fácil de leer y escanear rápidamente para los visitantes.
- Mejor organización: Son perfectas para organizar información una al lado de la otra. Esto es ideal para comparaciones de productos, listas de pros y contras, o para mostrar imágenes junto a descripciones de texto.
- Destaca información clave: Puedes usar un diseño de columnas para atraer la atención del lector hacia las partes más importantes de tu artículo.
- Aumenta la Interacción: Al hacer que tu contenido sea más fácil de digerir, creas una mejor experiencia de usuario. Esto puede animar a los visitantes a pasar más tiempo en tu sitio.
Dicho esto, veamos cómo puedes agregar contenido en varias columnas en el editor de bloques y el editor clásico. Simplemente puedes hacer clic en los enlaces a continuación para saltar al método que deseas usar:
- Agregar contenido en varias columnas en el editor de bloques de WordPress – La forma fácil
- Agregar varias columnas en el antiguo editor clásico de WordPress
- Preguntas Frecuentes sobre Cómo Agregar Contenido Multicolumna en WordPress
Agregar contenido en varias columnas en el editor de bloques de WordPress – La forma fácil
Crear contenido en varias columnas, también conocido como contenido en columnas de cuadrícula en WordPress, ahora es fácil porque es una función predeterminada. El editor de bloques de WordPress incluye un bloque de Columnas.
Para agregar un diseño de varias columnas, necesitas crear una nueva publicación o editar una existente. Una vez que estés en el editor de contenido, haz clic en el ícono '+' en la parte superior para agregar un bloque.
A continuación, debes seleccionar el bloque Columnas en la pestaña 'Diseño'.
A continuación, deberás seleccionar el número de columnas y los diseños que deseas utilizar para tu publicación de blog.
WordPress te mostrará diferentes opciones para elegir. Por ejemplo, puedes elegir un diseño de columna 50/50, usar un diseño 33/66 y más.
Después de elegir un diseño, puedes agregar bloques a tus columnas. El bloque Columnas te permite agregar bloques dentro de cada columna.
Por ejemplo, puedes seleccionar el bloque de Párrafo y agregarle contenido.
También podrás ver la configuración del bloque en la columna derecha de la pantalla de edición de la publicación en el panel de configuración. Aquí, puedes editar el ancho de las columnas.
Además del texto, también puedes agregar imágenes y incrustar videos en las columnas de WordPress.
Simplemente lleva el mouse a una de las columnas y haz clic en el botón ‘+’ para agregar un bloque. También puedes agregar un bloque escribiendo ‘/’ y luego el nombre del bloque.
Por ejemplo, agregamos una imagen en una columna y algo de texto en la otra columna.
Agregar varias columnas en el antiguo editor clásico de WordPress
Si no has actualizado tu WordPress a Gutenberg y todavía estás usando el Editor Clásico, entonces necesitarás instalar un plugin por separado para crear un diseño de columnas en cuadrícula.
Primero, instala y activa el plugin Column Shortcodes. Para obtener instrucciones detalladas, sigue nuestra guía paso a paso sobre cómo instalar un plugin en WordPress.
📌 Descargo de Responsabilidad: Ten en cuenta que el plugin no ha sido probado con la última versión de WordPress. Sin embargo, cuando lo probamos en nuestro sitio web de demostración, funcionó bien. Si aún no estás seguro, consulta nuestra guía para principiantes sobre el uso de plugins desactualizados.
Después de la activación, puedes crear una nueva publicación o editar una antigua. Una vez que estés en el editor clásico, simplemente haz clic en el botón ‘[ ]’ en la barra de herramientas.
El plugin ahora te mostrará una lista de shortcodes de columnas para tu entrada de blog.
Puedes elegir cualquier diseño que desees agregar a tu blog de WordPress. También hay opciones para editar el relleno de las columnas.
Una vez que hayas seleccionado un shortcode, aparecerá automáticamente en el editor clásico. Por ejemplo, elegimos el shortcode ‘one half’ para este tutorial.
Luego puedes ingresar tu contenido entre los shortcodes.
A continuación, puedes hacer clic en el icono del shortcode ‘[ ]’ nuevamente para agregar otro shortcode de columna.
Agreguemos el shortcode ‘one half (last)’ para mostrar dos columnas una al lado de la otra. A partir de aquí, solo necesitas agregar tu contenido a la otra columna.
Después de eso, puedes previsualizar tu publicación y publicarla.
Así es como se veía en nuestro sitio de prueba.
Preguntas Frecuentes sobre Cómo Agregar Contenido Multicolumna en WordPress
Aquí tienes algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo agregar contenido multicolumna en sus sitios web:
¿Cómo se ven las columnas de WordPress en dispositivos móviles?
WordPress maneja esto automáticamente por ti. En pantallas más pequeñas, como teléfonos móviles, las columnas se apilarán verticalmente una encima de la otra.
Este diseño adaptable asegura que tu contenido sea siempre legible y fácil de usar, independientemente del dispositivo.
¿Puedo ajustar el ancho de un bloque de columna individual de WordPress?
Sí. Para ajustar el ancho, haz clic para seleccionar un bloque de Columna individual (no el contenedor padre 'Columnas'). En la barra lateral de configuración del bloque a la derecha, puedes especificar un valor de ancho.
Puedes usar porcentajes (%), píxeles (px) y otras unidades web para un control preciso.
¿Qué pasa si necesito opciones de diseño más avanzadas?
El bloque de Columnas predeterminado es excelente para la mayoría de los diseños simples. Sin embargo, si necesitas un control más avanzado sobre el espaciado, la alineación, la configuración adaptable, o quieres crear diseños de cuadrícula más complejos, entonces un plugin de constructor de páginas es la mejor solución.
Recomendamos usar una herramienta como SeedProd para una total libertad de diseño con arrastrar y soltar.
Esperamos que este artículo te haya ayudado a aprender cómo agregar contenido de varias columnas en las publicaciones y páginas de WordPress. También te puede interesar nuestra guía sencilla sobre cómo agregar una lista de verificación de publicaciones de blog en el editor de WordPress y nuestro tutorial sobre cómo agregar plantillas de contenido en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Genial, finalmente sé cómo hacerlo en Gutenberg también. De hecho, por eso cambié a Elementor porque encontré que Gutenberg no era muy intuitivo. Quizás solo era demasiado perezoso para aprenderlo. Sin embargo, en Elementor, entendí y encontré esta función de inmediato. Ahora sé cómo manejar Gutenberg también :). ¡Gracias!
Ralph
¡Gracias! Fue realmente simple con tu guía. Usar 3 columnas definitivamente hará que parte de mi contenido se vea mejor que un muro de texto aburrido.
Soporte de WPBeginner
¡Nos alegra que nuestra guía pudiera ayudar!
Administrador
Nishant Kumar
Realmente muy útil. No sé cómo agregar una sección de columnas en el blog de WordPress. Ahora lo entendí.
Soporte de WPBeginner
Glad our guide could help
Administrador
Matt
Hola, gracias por esta publicación, es realmente útil. Una pregunta rápida: ¿el texto se asigna automáticamente a cada una de las (dos) columnas para asegurar que las columnas tengan la misma altura en la página, o es algo que tienes que probar/gestionar al ingresar el texto?
Soporte de WPBeginner
Necesitarías asegurarte manualmente de que tu contenido tenga la misma longitud o una longitud similar si quisieras eso.
Administrador
Sir Newton
Por favor, ¿cómo puedo hacer que mi sitio web de comercio electrónico muestre la vista de productos en dos columnas en dispositivos móviles.
Gracias
Soporte de WPBeginner
Deberías consultar con el soporte de tu tema o con el plugin de comercio electrónico que estás utilizando para modificar el estilo de la página de tu tienda.
Administrador
Stuart
Hola, necesito 11 columnas. ¿Hay alguna forma de exceder lo que calculo como máximo (10)?
Soporte de WPBeginner
Por el momento no tenemos un método recomendado para tener 11 columnas de ancho. Dependiendo de lo que quieras mostrar, podrías considerar crear una tabla en lugar de columnas.
Administrador
Caite Adamek
¿Hay alguna forma de transferir las columnas automáticamente? Cuando configuré mis 2 columnas, puse las imágenes en la primera columna y luego el texto en la segunda. Noté que la versión móvil no puede mostrar las 2 columnas una al lado de la otra, por lo que las imágenes se muestran primero y luego el texto. Me gustaría que el texto se mostrara primero y luego las imágenes. ¿Tengo que volver a escribirlo todo o hay alguna forma ingeniosa de cambiar el contenido de las 2 columnas?
Soporte de WPBeginner
Por el momento no, podrías crear un área de 2 columnas debajo de donde la tienes actualmente y colocar el contenido como quieras allí, luego eliminar la original.
Administrador
Kimberly Kelley
Usando las columnas múltiples (2), los videos se superponen. ¿Hay alguna forma de ajustar el ancho máximo de los videos, ya que la única forma en que parece que puedo agregarlos es por URL, no por código de inserción?
Soporte de WPBeginner
Es posible que quieras verificar si los videos se superponen al no verlos en el editor, de lo contrario, podrías buscar en la sección CSS avanzada y establecer el ancho usando ese selector: https://www.wpbeginner.com/glossary/css/
Administrador
Nicole
¿Hay alguna forma de centrar verticalmente los elementos en una columna con los nuevos bloques/editor de Gutenberg? Por ejemplo, me gustaría una imagen centrada verticalmente a la izquierda y texto a la derecha. Digamos 30 líneas de texto y una imagen de 200 px de altura, ¿hay una forma más fácil que insertar y dimensionar manualmente bloques espaciadores?
Soporte de WPBeginner
Para lo que parece que buscas, podrías usar el bloque de medios y texto en lugar del bloque de columnas.
Administrador
Rob Tait
Hola
¿Cómo escribo en 1 columna y luego en 2 columnas para el siguiente párrafo y luego de regreso a 1 columna para el tercer párrafo?
¿Alguna ayuda muy apreciada?
Gracias
Rob
Ashish
¿Por qué no podemos simplemente usar Elementor o cualquier otro plugin de creación de páginas similar? Es mucho más fácil de usar con tantas funciones adicionales.
dimiter kirov
Este plugin no se ha actualizado en 3 años y, para colmo, no funciona con el plugin Gutenberg.
Jenny
Hola,
Intenté agregar columnas a una de mis páginas y el botón de Columna Avanzada no apareció. Revisé mis plugins y decía que estaba instalado. ¿Sabes cuál podría ser el problema?
¡Gracias!
Jenny
Rob Tait
Necesitas instalar un editor visual avanzado como TIny MCE para poder ver el botón. No se mostrará en el editor visual estándar por defecto. Acabo de tener el mismo problema, pero ahora se muestra después de instalar lo anterior, que es gratis.
Espero que eso ayude
Rob
Dennis
Genial. Justo lo que estaba buscando y, finalmente, alguien que pueda explicar todo paso a paso.
Heather
Instalé el plugin y lo activé. Se muestra como "activado". Aún así, no hay ningún botón. ¿Cómo soluciono esto? Ya sé cómo instalar un plugin, así que esa solución no es aplicable.
Kirk
Instalé el plugin con un tema básico gratuito, y el botón de columna nunca apareció en mi editor de Páginas. Sé que no eres el creador del plugin, solo quería compartir nuestra experiencia
om zho
al pegar desde el editor de texto, el espaciado del texto es extraño ya que no hay una selección de "formato limpio" para columnas avanzadas de WP... ¿cómo puedes arreglarlo?
Martine S.
¡Hola, esto suena genial! Pero, ¿cómo se verá en los teléfonos? Estoy usando un plugin similar para tener dos columnas, una para noruego y otra para inglés. Pero cuando la gente lee mi blog a través del teléfono, la segunda columna aparece justo después de la primera, ¡así que parece un texto completo, en dos idiomas diferentes!
Joe Nelo
¿Qué plugin estás usando para mostrar dos columnas de texto? Estoy intentando hacer lo mismo para inglés y esperanto.
Elizabeth
¿Cómo se activa el plugin??
Soporte de WPBeginner
Hola Elizabeth,
Por favor, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Administrador
PB
¿Hay alguna forma de asegurar que el texto en estas columnas se muestre como una lista, es decir, con saltos de línea duros entre elementos en lugar de como un solo bloque de texto continuo?
Muchas gracias de antemano por tu consejo
Steve Elliott
¿Hay alguna forma de darles a estas columnas un color de fondo?
Bhagyashree barlingay
No puedo copiar y pegar material que ya he escrito en estas columnas.
Naveed
Estoy usando WordPress versión 4.5, pero este plugin no es compatible con mi tema. ¿Puedo usar este plugin para mi tema?
ik
¿Puedes agregar imágenes a cada columna? ¿O puedes agregar botones de acción a cada columna?
Soporte de WPBeginner
Sí.
Administrador
Kate
Las columnas funcionan, pero cuando intento incrustar un VIDEO dentro de las columnas, solo se muestra el texto del código...
Daniel Speraw
Se ve bien cuando se agregan columnas a la publicación, pero cuando la veo publicada, ha vuelto a 1 columna centrada. Lo he intentado varias veces y en dos navegadores. ¿Alguna idea?
Este es, de lejos, el plugin más fácil. REALMENTE quiero usarlo.
Muchas gracias,
Daniel
Meshellklip
¿Puedes agregar imágenes a cada columna? ¿O puedes agregar botones de acción a cada columna?
Sri Harsha Chilakapati
Hola,
Mi sitio usa el tema responsive Customizr, y no quiero perder esa capacidad de respuesta. ¿Puedo agregar columnas responsivas usando este plugin?
Chris Xphstos
¡Hola!
¿Hay alguna forma de presentar un diseño con columnas pero no una publicación con 2-3-4 columnas, etc.?
Cada columna dentro de una página será una publicación separada. Algo así como el Diseño de Blog de Joomla...
Soporte de WPBeginner
Para eso, deberías buscar un tema de WordPress con varias columnas, hay muchos temas de ese tipo disponibles.
Administrador
Karen
¡Gracias! He querido aprender a hacer esto por un tiempo, ¡todo bien ahora! xx
Debra Torres
¡Esto es exactamente lo que necesitaba! He estado intentando usar tablas para las columnas y me he frustrado mucho. ¡Gracias, gracias, gracias!
Mark Corder
Debo decir que, si necesitas usar varias columnas con regularidad, esta parece una gran solución, ¡incluso si SABES HTML/CSS! Me encanta el hecho de que incluyeron un punto de interrupción en las Opciones para adaptarse a diseños responsivos...