Cómo mostrar widgets de WordPress en columnas

Los widgets te permiten agregar contenido dinámico a áreas que no puedes editar usando el editor de contenido estándar de WordPress. La gente a menudo agrega widgets a la barra lateral, pero puedes mostrarlos en otras áreas en múltiples columnas.

Este enfoque te permite organizar y presentar el contenido de manera más efectiva, haciendo que tu sitio web sea visualmente atractivo y más fácil de navegar.

En WPBeginner, hemos utilizado el pie de página de nuestro sitio web para mejorar la experiencia del usuario y aumentar la participación. Al organizar cuidadosamente múltiples widgets en columnas, podemos mostrar nuestras marcas, proporcionar acceso fácil a herramientas gratuitas, ofrecer enlaces a recursos importantes y fomentar una mayor exploración de nuestro sitio web.

En este artículo, te mostraremos cómo mostrar fácilmente widgets de WordPress en columnas.

¿Por qué mostrar widgets de WordPress en columnas?

Los widgets son una excelente manera de agregar galerías de imágenes, feeds de redes sociales, calendarios, citas aleatorias, publicaciones populares y otro contenido dinámico a tu sitio web de WordPress.

Sin embargo, si agregas muchos widgets, puede empezar a verse confuso y desordenado.

Si esto sucede, te recomendamos organizar tus widgets en columnas. Esto te permite mostrar mucho contenido de manera estructurada. Incluso puedes agregar subtítulos a las columnas para ayudar a los visitantes a encontrar lo que buscan más rápido.

Teniendo esto en cuenta, veamos cómo puedes mostrar widgets en columnas. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

• Método 1: Revisa si tu tema de WordPress tiene un pie de página listo para widgets
• Método 2: Usa el editor de páginas y entradas (funciona con todos los temas)
• Método 3: Crea un tema personalizado de WordPress (totalmente personalizable)
• Método 4: Usa el editor de sitio completo (solo temas basados en bloques)
• Extra: Muestra fotos de WordPress en columnas

Método 1: Revisa si tu tema de WordPress tiene un pie de página listo para widgets

Algunos temas de WordPress tienen múltiples áreas listas para widgets en el pie de página. En este caso, cada área aparecerá como una columna separada.

Esto es perfecto si deseas listar información o enlaces en el pie de página de tu sitio web. Por ejemplo, podrías mostrar tu información de contacto, una lista de todos los productos en tu tienda WooCommerce, o los enlaces más importantes de tu sitio web.

Para más ideas, por favor consulta nuestra lista de verificación de cosas para agregar al área del pie de página de WordPress.

Para verificar si tu tema tiene múltiples áreas listas para widgets en el pie de página, ve a Apariencia » Widgets en el panel de administración de WordPress.

Aquí, busca cualquier área etiquetada como 'Pie de página' o similar.

El tema anterior tiene dos áreas listas para widgets, por lo que podemos usarlas para mostrar widgets en columnas.

Simplemente haz clic para expandir cualquiera de estas áreas y comienza a agregar los widgets que deseas mostrar. Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo agregar y usar widgets en WordPress.

Hecho esto, haz clic para expandir la siguiente área de pie de página lista para widgets, y luego agrega los widgets que deseas mostrar en esa columna.

Simplemente repite estos pasos para cada área de pie de página.

Cuando hayas terminado de agregar widgets, no olvides hacer clic en el botón 'Actualizar' para guardar tus cambios. Ahora puedes visitar tu sitio web de WordPress y desplazarte hasta el pie de página para ver tus widgets organizados en columnas.

Método 2: Usa el editor de páginas y entradas (funciona con todos los temas)

Otra opción es usar el editor de bloques de WordPress predeterminado para agregar columnas a tus páginas y publicaciones. Esto te permite controlar exactamente dónde aparecen los widgets en tu sitio, incluso dentro del contenido de la publicación.

También es una buena opción si deseas mostrar widgets únicos en cada página.

Sin embargo, necesitarás agregar los widgets a cada página y publicación manualmente. Dicho esto, este método puede llevar mucho tiempo, especialmente si deseas mostrar los mismos widgets en cada página.

Para usar este método, abre la página o publicación donde deseas agregar widgets en columnas. Luego, haz clic en el botón ‘+’ y escribe ‘Columnas’.

Cuando aparezca el bloque correcto, arrástralo y suéltalo en tu diseño.

Ahora puedes elegir el número de columnas que deseas mostrar y cuánto espacio debe ocupar cada columna.

Por ejemplo, en la siguiente imagen, estamos creando tres columnas que ocupan el 33% del espacio disponible cada una.

Hecho esto, haz clic en el ícono ‘+’ en la primera columna.

En el menú emergente que aparece, selecciona el widget que deseas agregar a esta columna.

Puedes personalizar el widget usando la configuración en el menú del lado derecho. Por ejemplo, podrías cambiar el color de fondo, agregar enlaces o cambiar el tamaño de fuente.

También puedes usar bloques para crear subtítulos, listas y otro contenido. Esto puede agregar estructura y contexto adicionales a tus widgets.

Simplemente repite estos pasos para agregar más widgets a las columnas.

Cuando estés satisfecho con la configuración de las columnas, haz clic en ‘Actualizar’ o ‘Publicar’ para que las columnas y los widgets estén en vivo.

Método 3: Crea un tema personalizado de WordPress (totalmente personalizable)

Si bien es posible organizar y mostrar widgets en varias columnas utilizando las herramientas integradas de WordPress, a veces puedes necesitar más control sobre el diseño.

Es posible que también desees agregar columnas a páginas de destino o páginas de ventas atractivas que tengan un diseño completamente personalizado.

En ese caso, te recomendamos usar SeedProd.

SeedProd es el mejor plugin constructor de páginas de WordPress del mercado y te permite diseñar tu tema sin escribir una sola línea de código. Esto significa que puedes agregar tantas columnas y widgets como desees a cualquier área de tu sitio web.

SeedProd también tiene una biblioteca creciente de kits de sitios de plantillas profesionales que puedes agregar a tu sitio con un solo clic.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Nota: Existe una versión gratuita de SeedProd que te permite crear páginas personalizadas, incluidas páginas de mantenimiento y páginas de "próximamente", sin importar tu presupuesto. Sin embargo, en esta guía, utilizaremos el plugin premium, ya que viene con el constructor de temas. Ten en cuenta que necesitarás el plan SeedProd Pro o superior para usar el constructor de temas.

Al activar, dirígete a SeedProd » Configuración e ingresa tu clave de licencia.

Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de eso, haz clic en el botón ‘Verificar clave’.

Hecho esto, dirígete a la página de SeedProd » Theme Builder y haz clic en el botón ‘Theme Template Kits’.

Ahora verás la biblioteca de kits de sitios web de SeedProd.

Para ver más de cerca cualquier plantilla, simplemente pasa el mouse sobre ella y luego haz clic en el ícono de la lupa cuando aparezca.

Esto abre el kit de plantillas en una nueva pestaña.

Dado que es un kit de sitio web completo, puedes ver más páginas y diseños haciendo clic en los diferentes enlaces, botones y elementos del menú.

SeedProd tiene kits de plantillas para diferentes industrias y nichos como sitios web de restaurantes, blogs de viajes, consultorías de marketing y más.

Cuando encuentres un kit de plantillas que quieras usar, simplemente pasa el cursor sobre él y luego haz clic en el ícono de marca de verificación cuando aparezca.

SeedProd ahora agregará todas las diferentes plantillas al panel de WordPress.

Para ver más de cerca, ve a SeedProd » Theme Builder. Es posible que veas opciones ligeramente diferentes dependiendo del kit que estés utilizando.

Simplemente pasa el cursor sobre la plantilla donde deseas agregar las columnas de widgets y luego haz clic en el enlace ‘Editar diseño’.

Por ejemplo, si quisieras mostrar columnas de widgets en el área del pie de página, entonces necesitarías editar la plantilla del pie de página.

Esto carga el editor de SeedProd con la plantilla a la derecha de la pantalla.

En el lado izquierdo, verás un menú con diferentes opciones.

La mayoría de los kits ya vienen con bloques integrados. Para personalizar un bloque, simplemente haz clic para seleccionarlo en la vista previa de la página y luego realiza cualquier cambio en el menú de la izquierda.

Por ejemplo, si quisieras reemplazar un marcador de posición, necesitarías seleccionar el bloque de Texto o Encabezado y luego escribir en el pequeño editor de texto.

También puedes cambiar completamente el aspecto del kit usando la configuración en el menú de la izquierda, incluyendo cambiar el esquema de color, la elección de fuente, el color de los enlaces, los botones y más.

La mayoría de estas configuraciones son bastante autoexplicativas, por lo que vale la pena seleccionar diferentes bloques en tu diseño y luego revisar la configuración.

Para crear tus columnas, desplázate hasta la sección 'Estándar' en el menú de la izquierda.

Aquí, encuentra el bloque 'Columna' y arrástralo al área donde deseas organizar los widgets en columnas.

Ahora puedes elegir cuántas columnas deseas crear y cuánto espacio debe ocupar cada columna.

Para hacer esto, simplemente haz clic en el diseño que deseas usar.

Ahora puedes empezar a agregar widgets a tus columnas.

En el menú de la izquierda, busca cada widget y luego arrástralo a la columna donde deseas mostrar ese widget.

Después de agregar un widget, haz clic para seleccionarlo en la vista previa en vivo.

Luego puedes usar la configuración en el menú de la izquierda para personalizar ese widget. Para ver aún más configuraciones de personalización, haz clic en la pestaña 'Avanzado'.

Aquí, puedes agregar animaciones CSS, cambiar el espaciado, agregar un borde y más.

Simplemente repite estos pasos para agregar más widgets a tus columnas. Cuando estés satisfecho con el aspecto de la página, haz clic en el botón 'Guardar' para almacenar tus cambios.

Ahora puedes continuar editando el resto de tu tema de WordPress. Para más detalles, consulta nuestra guía completa sobre cómo crear un tema personalizado de WordPress para principiantes.

Cuando estés satisfecho con la configuración de las plantillas, es hora de poner el kit en vivo.

En el panel de WordPress, ve a SeedProd » Theme Builder y haz clic en el interruptor ‘Enable SeedProd Theme’ para que muestre ‘Yes.’

Ahora puedes visitar tu blog de WordPress o sitio web para ver el nuevo tema personalizado en acción.

Método 4: Usa el editor de sitio completo (solo temas basados en bloques)

Si estás utilizando un tema de WordPress habilitado para bloques, entonces puedes agregar columnas a cualquier área de tu sitio web usando el editor de sitio completo.

Incluso puedes editar áreas que no puedes cambiar usando el editor de contenido estándar de WordPress. Por ejemplo, puedes agregar widgets y columnas a la plantilla de página 404 de tu sitio.

Para empezar, dirígete a Apariencia » Editor en el panel de WordPress.

Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema, pero puedes agregar columnas y widgets a cualquier área.

Para ver todas las opciones disponibles, simplemente seleccione 'Plantillas' o 'Partes de plantilla'.

Ahora puedes hacer clic en la plantilla o parte de plantilla que deseas editar.

WordPress ahora mostrará una vista previa del diseño. Para continuar y editar esta plantilla, haz clic en el pequeño ícono del lápiz.

Hecho eso, haz clic en el ícono azul ‘+’ y escribe ‘Columns.’

Cuando aparezca el bloque correcto, arrástralo y suéltalo en el diseño de tu página.

Ahora puedes elegir el diseño que deseas usar.

Por ejemplo, en nuestras imágenes, estamos usando el diseño 33/33/33, que crea tres columnas que ocupan cada una el 33% del ancho disponible.

Hecho eso, haz clic en el ícono azul ‘+’ y luego busca el primer widget que deseas usar.

Luego, simplemente puedes arrastrar y soltar este widget en la columna donde deseas mostrarlo.

Si es necesario, puedes ajustar cada bloque usando la configuración en el menú de la derecha.

Simplemente repite estos pasos para agregar más widgets a tus columnas.

Cuando estés satisfecho con los cambios, haz clic en ‘Guardar’ para publicarlos. Ahora, si visitas tu sitio web de WordPress, verás los nuevos widgets y columnas en acción.

Extra: Muestra fotos de WordPress en columnas

Si tienes un sitio de fotografía, entonces también querrás mostrar todas tus fotografías en columnas y filas ordenadas.

Para hacer esto, puedes usar Envira Gallery, que es el mejor plugin de galería de WordPress del mercado. Te permite crear una galería atractiva donde todas las imágenes se organizan en filas y columnas para que se vean visualmente atractivas.

Además, ofrece otras funciones como ventanas emergentes tipo lightbox, marcas de agua, texto alternativo de imagen y más.

Después de activar el plugin, simplemente visita la página Envira Gallery » Agregar Nueva y haz clic en el botón 'Seleccionar archivos de otras fuentes' para subir todas tus imágenes desde la biblioteca de medios.

Una vez que hagas eso, desplázate hacia abajo hasta la sección 'Actualmente en tu galería' y cambia a la pestaña 'Configuración'.

Aquí, puedes elegir diferentes diseños y el número de columnas para las imágenes de tu galería según tu gusto.

Una vez que hayas terminado, haz clic en el botón 'Publicar' en la parte superior para guardar tu configuración. Luego, debes abrir la publicación donde deseas agregar tus imágenes en filas y columnas y hacer clic en el botón 'Agregar bloque' (+).

Esto abrirá el menú de bloques. Ahora, simplemente arrastra y suelta el bloque Envira Gallery y luego elige la galería de imágenes que creaste desde el menú desplegable dentro del bloque.

Finalmente, haz clic en el botón 'Actualizar' o 'Publicar' para guardar tu configuración. Ahora puedes visitar tu sitio de WordPress para ver las imágenes en filas y columnas.

Para más información, consulta nuestro tutorial sobre cómo mostrar fotos de WordPress en columnas y filas.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar widgets de WordPress en columnas. También te puede interesar nuestra guía sobre cómo mostrar tus comentaristas principales en la barra lateral de WordPress o nuestras selecciones expertas de los mejores temas compatibles con Gutenberg para 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.