Publicado en ,
4 minutos

Cómo crear columnas con Gutenberg en WordPress

Cómo crear columnas con Gutenberg en WordPress
Aprende a editar páginas de tu web, y descubre cómo crear columnas con Gutenberg en Wordpress.
Carlos Soriano
Carlos Soriano

Diseñador Web en WordPress

Tabla de Contenidos

WordPress ha revolucionado la forma en que creamos y publicamos contenido en línea. Con la introducción del editor de bloques Gutenberg, la experiencia de edición se ha vuelto más intuitiva y visualmente atractiva. Ya que son muchas las funciones que incorpora, he decidido ir escribiendo sobre las más importantes. Por tanto, en este tutorial, te explicaré cómo crear columnas con Gutenberg en WordPress, aprovechar los bloques para editar páginas en tu sitio web.

Al menos, para cierto sector entre los creadores de contenidos que usan este CMS, Gutenberg es una buena herramienta. Aunque, el Editor Clásico de WordPress, que sigue disponible en su repositorio, supera los cinco millones de descargas, Gutenberg parece haber llegado para quedarse. Y, es por eso que, seguiré creando tutoriales sobre su funcionamiento.

Pero, antes de continuar, si no conoces Gutenberg, te recomiendo que leas este tutorial. Y, si ya lo conoces, pero aún no te has aventurado a utilizarlo, será mejor que pases primero por el tutorial, donde te cuento cómo usar Gutenberg, el editor de WordPress.

Si ya lo has hecho, puedes continuar con este tutorial.

Crear columnas con Gutenberg

Para comenzar, asegúrate de que estás utilizando la última versión de WordPress, que incluye el editor de bloques Gutenberg por defecto. Te recuerdo que WordPress cambió a este editor a partir de la versión 5.0.

1. Accede al Panel de Administración de WordPress

Accede a tu panel de administración de WordPress y dirígete al apartado del menú “Páginas”. Selecciona la página que deseas editar o crea una nueva.

Haz clic en el botón "+" para añadir un bloque.

2. Añade el bloque «Columnas»

Una vez en el editor, puedes añadir un bloque de columnas haciendo clic en el ícono «+» y buscando «Columnas». Este bloque te permitirá crear diseños de varias columnas que se adaptan automáticamente a diferentes tamaños de pantalla.

Busca inserta el bloque "Columnas"

3. Ajusta el número de columnas y su distribución

Después de añadir el bloque de columnas, puedes ajustar el número de columnas y la distribución del espacio entre ellas. Haz clic en el bloque y utiliza las herramientas de la barra de herramientas flotante, o del menú de personalización del bloque, en la barra lateral de “Herramientas”, para personalizar tu diseño.

Selecciona la distribución de columnas que quieras

4. Añade bloques a las columnas

Dentro de cada columna, puedes añadir diferentes tipos de bloques, como párrafos, imágenes, botones o cualquier otro bloque disponible en Gutenberg. Simplemente haz clic en el ícono «+» dentro de la columna y selecciona el tipo de bloque que deseas añadir.

5. Personaliza el bloque de Columnas

Gutenberg también ofrece opciones de personalización para los bloques de columnas. Puedes cambiar el color de fondo, el tamaño del texto y otros estilos directamente desde la barra lateral de “Herramientas” del bloque. Recuerda que, para ver las herramientas de edición de un bloque, debes hacer clic sobre el primero. Con las columnas, esto puede ser algo más complicado, ya que puedes editar el conjunto de columnas, pero también cada columna por separado. Si no consigues seleccionar el bloque columnas, puedes buscarlo en el botón «Resumen del documento», que se encuentra en la barra superior opciones.

Edita los estilos de la columna

4. Previsualiza antes de publicar

Antes de publicar, siempre es una buena práctica previsualizar tu página para asegurarte de que todo se vea como esperas. Gutenberg te permite echar un vistazo, cómo se verá tu diseño, en diferentes dispositivos, lo cual es esencial para garantizar una experiencia de usuario óptima. Haz clic en el botón que parece la pantalla de un portátil. Selecciona el tipo de dispositivo en que quieres previsualizar la página, y haz clic en «Previsualizar en nueva pestaña».

Previsualiza la página, antes de publicarla.

Y listo

Con estos pasos, ya sabes cómo crear columnas con Gutenberg en WordPress. Te recomiendo que pierdas el miedo a practicar. Recuerda que, en vez de publicar, puedes guardar tu página nueva en el borrador. Así que no dudes en experimentar y explorar todas las posibilidades que Gutenberg tiene para ofrecer.

Por mi parte, seguiré redactando tutoriales sencillos, sobre las diversas opciones de diseño que permite Gutenberg. Si quieres estar al tanto, suscríbete, y te enviaré puntualmente consejos y tutoriales como este, a tu buzón de correo.

¡Hasta la próxima!

Este sitio funciona con Hostinger. ¿Quieres un Alojamiento Web para tu WordPress?
Etiquetas:
Facebook
Twitter
LinkedIn
WhatsApp
Telegram

Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos requeridos están marcados *

Juan Carlos Soriano Hernández, como Responsable de tratamiento de datos de Carlos Soriano - Diseño Web, te comunica que la finalidad de la recogida y tratamiento de los datos personales se debe a gestionar tus comentarios y responder a tus comentarios, así como al control antispam. La Legitimación se establece al marcar la casilla de aceptación, dando tu legítimo consentimiento. No se cederán datos a terceros destinatarios, salvo por obligación legal. Tienes Derecho a acceder, rectificar, limitar y suprimir tus datos. Para ello contacta con

dieciseis + once =

Publicar comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.