blog webempresa

Widgets en columnas para WordPress

por | Mar 8, 2021 | Plugins WordPress

Widgets en columnas para WordPress

¿Has usado las zonas de widgets que tiene tu theme?

Esta funcionalidad depende de tu theme y varía de un theme a otro, es una funcionalidad nativa de WordPress, y aunque podrías hacer algo similar con un constructor, siempre puedes usar las zonas de widgets de tu theme como una opción.

En este artículo veremos cómo dar un poco de flexibilidad a la zona de widgets que trae tu theme agregando columnas y cambiando el aspecto visual de las filas en las que se muestran los widgets.

 

Plugin para añadir columnas de Widgets

El plugin que usaremos para añadir columnas a la zona de widgets será: Easy Widget Columns

Plugins Widgets en Columnas

 

Ajustes del plugin

Tras instalar el plugin verás que tienes una pantalla de ajustes generales en: Ajustes > Columnas del Widget.

Ajustes plugin Widgets en Columnas

Básicamente son dos opciones para configurar: la primera de ellas es para la carga de estilos.
La segunda opción lista el código CSS de estilos que se cargará.

Si ya estas usando un tema que se basa en el tema Genesis Framework, o si copias y pegas ese código CSS al archivo style.css de tu theme, entonces ya no será necesario cargar los estilos del plugin.

 

Widgets de fila y subfila

El plugin te crea dos widgets de organización, una de fila y subfila, tal como se muestra en la imagen

Nuevos widgets plugin Widgets en Columnas

El widget de fila además de servir de agrupación, tiene opciones avanzadas adicionales, tal como muestra la imagen.

Widget filas opciones  adicionales

 

Definiendo ancho de columna en los Widgets

Adicionalmente a las opciones propias de cada widget que tengas en tu sitio, se creará una opción adicional para establecer el ancho de la columna.

Widgets en Columnas ancho fila

Si quieres por ejemplo una fila de dos widgets tienes que establecer para cada widget adicional 1/2 de ancho.

 

Ejemplo de construcción

En la siguiente imagen, hemos dividido la zona de widgets “Bajo la cabecera” del theme StoreFront, en dos columnas las cuales están agrupadas en una fila

ejemplo uso Widgets en Columnas

Los Widgets son dos widgets de imagen y cada uno tiene 1/2 ancho de columna.

La fila tiene márgenes y una imagen de fondo, al final obtendremos algo similar a como se muestra en la siguiente imagen.

Resultado final Widget en Columnas

 

Columnas de bloques con Gutenberg

Es posible también usar un diseño de columnas a través del editor Gutenberg, en este caso el diseño será parte del contenido.

Desde el editor buscamos el bloque de Columnas, tal como se muestra en la siguiente imagen:

Bloque columnas en Gutenberg

El bloque se colocará como parte del contenido y solicitará el ancho de columnas:

seleccionar ancho columna Gutenberg

En nuestro ejemplo seleccionaremos dos columnas de 50/50, luego por cada columna se puede seleccionar nuevamente los bloques que serán parte de su contenido.

agregando bloque en columna Gutenberg

 

Conclusión

Tal como hemos visto, es posible agregar columnas como parte del diseño de tu sitio, ya sea a través de la zonas de widgets, usando un plugin, o directamente a través del editor Gutenberg como parte del contenido.

Ahora podrás aprovechar el espacio e incluir los mejores widgets para WordPress en tu página web.

 

 

¿Te ha resultado útil este artículo?

Video tutorial, paso a paso y demo del editor de contenidos

 

La verdad es que este creador de webs con IA me tiene algo enamorado, y aquí te envío un vídeo de cómo es “por dentro”, para terminar de convencerte y animarte a que lo utilices.

Durante el vídeo voy a:

  • Configurar la web desde cero, con el asistente (que hemos visto en el apartado anterior).
  • Añadir información sobre mi web (una web para un restaurante vegano en madrid, especializado en verduras de la huerta).
  • Ver el resultado y explorar las características principales de WeBuilder en cuanto a configuración y posibilidades generales.

Ten en cuenta que este vídeo no es un curso completo sobre la herramienta, es un recorrido por encima para que te hagas una idea de las posibilidades que tiene.

 

 

 

Conclusión

Crear una web con IA y WeBuilder te permite centrarte en tu negocio o tu pasión, dejando la parte técnica en manos de algoritmos inteligentes. Ahorro de tiempo, costes reducidos y resultados profesionales son solo el comienzo.

  1. Define tu proyecto y palabras clave.
  2. Deja que la IA genere la estructura y contenido.
  3. Personaliza el diseño y las funcionalidades.
  4. Publica y mantén tu sitio siempre optimizado.
  5. Delega la parte técnica y las dudas al equipo de soporte de Webempresa.

Prueba WeBuilder hoy mismo y lleva tu proyecto a un nivel que no pensabas alcanzable hasta antes de leer este artículo, y todo gracias a la potencia de la inteligencia artificial en Webempresa.

¡Espero de todo corazón que este artículo te haya servido para darte un empujoncito a llevar a cabo esa puesta a punto de tu web o prueba de concepto de tu proyecto, y nos vemos en el siguiente artículo!

Promo hosting Webempresa julio 2025