Curso WordPress

Editor de Bloques de WordPress: Tutorial Paso a Paso

editor de bloques de WordPress

Tabla de contenidos

Ya vimos cómo personalizar colores y tipografías en el Curso de WordPress, continuemos ahora con uno te los demás más importantes de este curso.

El editor de bloques de WordPress ha transformado la forma en que se crea contenido en WordPress, permitiendo a los usuarios diseñar páginas y publicaciones de manera intuitiva y eficiente.

En este tutorial paso a paso, exploraremos en profundidad qué es un editor de bloques, los principales editores disponibles, y compararemos las opciones más populares para ayudarte a elegir el mejor para tus necesidades.

¿Qué es un Editor de Bloques en WordPress?

Un editor de bloques es una herramienta de edición visual que permite a los usuarios construir contenido utilizando bloques modulares. Cada bloque puede ser un párrafo, una imagen, un encabezado, un video, una lista, entre otros, lo que permite una gran flexibilidad y creatividad en el diseño de páginas y publicaciones.

Otro nombre que se les suele dar a los editores de bloques es maquetadores o en inglés: Builders.

Principales Editores de Bloques en WordPress

  1. Gutenberg: El editor de bloques nativo de WordPress, introducido en la versión 5.0. Es fácil de usar y está completamente integrado con el núcleo de WordPress.
  2. Elementor: Un popular constructor de páginas de arrastrar y soltar que ofrece un control detallado sobre el diseño y la apariencia de las páginas.
  3. Divi: Parte del tema Divi de Elegant Themes, es un editor visual potente con una gran cantidad de opciones de personalización.
  4. Stackable: Un plugin gratuito que añade una amplia variedad de bloques adicionales y avanzados al editor de Gutenberg.
  5. Beaver Builder: Un constructor de páginas robusto y flexible.

Elementor vs Editor de Bloques de WordPress (Gutenberg)

Elementor es uno de los maquetadores más populares, pero se trata de un maquetador externo a WordPress, es decir, es de propiedad privada y le pertenece a una empresa quien ofrece el servicio. Por otro lado, el editor de bloques predeterminado de WordPress o también llamado Gutenberg, ya viene incorporado cuando instalas WordPress, no necesitas instalar ningún plugin adicional.

Gutenberg:

  • Ventajas: Integrado en el núcleo de WordPress, ligero, mejora continua, sin costo adicional.
  • Desventajas: Menos funcionalidades avanzadas en comparación con constructores dedicados como Elementor.

Elementor:

  • Ventajas: Funcionalidades avanzadas, plantillas prediseñadas, widgets adicionales, flexibilidad de diseño.
  • Desventajas: Puede ralentizar el sitio si se usa excesivamente, costo para funcionalidades Pro.

Comparación Detallada:

  • Facilidad de Uso: Elementor ofrece una experiencia más intuitiva con su interfaz de arrastrar y soltar.
  • Funcionalidades: Elementor tiene más widgets y opciones de personalización sin necesidad de plugins adicionales.
  • Rendimiento: Gutenberg, siendo parte del núcleo de WordPress, es más ligero y rápido.
  • Precio: Gutenberg es gratuito, mientras que Elementor tiene una versión gratuita y una versión Pro de pago.

¿Cuál es el Mejor Editor de Bloques de WordPress?

La elección del mejor editor de bloques depende de tus necesidades específicas:

  • Para Principiantes: Gutenberg es una excelente opción por su simplicidad y porque está integrado en WordPress.
  • Para Diseñadores y Desarrolladores: Gutenberg cada vez se está convirtiendo en la mejor opción, sin embargo, sigue en desarrollo, para proyectos más grandes en este momento Divi y Elementor son las mejores opciones. La desventaja económicamente hablando de estos dos últimos es que son de pago.

Editor de Bloques de WordPress paso a paso

Ahora que ya conoces que son los maquetadores y cómo funcionan. Te explicaré todo lo que necesitas para que puedes usar el editor de bloques de WordPress.

Cada vez que accedes a una página o una entrada, el editor de bloque de WordPress está activado automáticamente. Puedes arrastrar y soltar bloques para diseñar tu página. Para lograrlo, cuentas con muchos bloques que encuentras haciendo clic sobre el botón azul «+» que se encuentra en la parte superior izquierda.

También puedes ver estos bloques al hacer clic sobre una columna o en el botón «+» color negro que aparece dentro del área de trabajo de la página.

Un uso muy común es agregar bloques de columnas y dentro de estas columnas agregar otros bloques como imágenes y textos. En este video te muestro en 1 minuto de que es capaz.

En esta captura de pantalla de abajo, puedes ver las diferentes partes que te aparecen siempre que accedas a editar una entrada o una página. Esta vista siempre será la misma independientemente al tema que uses.

editor de bloques de gutenberg wordpress
  1. Nuevo bloque +. Este botón azul te muestra la lista completa de bloques disponibles en WordPress para que les puedas hacer clic para agregarlos o los arrastres y sueltes donde quieras.
  2. Buscador. Una vez que ya te familiarices con los nombres de los bloques, será más fácil que los encuentres usando el buscador.
  3. Bloques. Existen decenas de bloques, en esta pestaña encontrarás todos los que tienes disponibles. Incluso se pueden agregar más bloques instalando plugins.
  4. Área de trabajo. Toda esta área en blanco es la parte visual de tu sitio web, es decir, así es como se va a ver y desde aquí podrás ir trabajando en tu web.
  5. Barrita de herramientas. Cada vez que seleccionas un bloque dentro de tu área de trabajo, se pone un borde azul alrededor del bloque que sirve para indicarnos el espacio que abarca ese bloque. También nos aparece una pequeña barra de herramientas, las herramientas en esa barrita cambian de acuerdo al tipo de bloque.
  6. Barra de propiedades. Esta barra siempre se encuentra al costado derecho de tu pantalla. Siempre se dividirá en 2 pestañas: Página, que tiene configuraciones generales de la página y Bloque, donde se muestran propiedades que pueden personalizar para cada bloque. Ojo, estas propiedades cambian según el bloque que tengas seleccionado.

En esta misma pantalla de edición, hay un elemento que yo uso mucho y te quiero recomendar hacer lo mismo. Se trata de la vista de lista de los bloques de la página. El botón para activar esta vista lo encuentras en la barra superior y la barra que muestra comparte espacio con el listado de bloques, por lo que sólo uno de los dos será visible.

vista de lista en resumen wordpress

Esta vista de lista, te muestra todos los elementos o bloques que tienes agregados, pero lo más interesante es que te los muestra en jerarquía, esto nos facilita ver cómo están distribuidos nuestros bloques y cuales están dentro de cuales.

Para mi esta es una gran, pero gran herramienta para trabajar, yo suelo arrastrar y soltar elementos en esta vista de lista para moverme más rápidamente. Una vez que la sabes usar, te ahorra mucho tiempo para evitar tener que hacer scroll en toda la página para mover tus elementos o encontrar alguno en particular.

Stackable: El Mejor Complemento al Editor de Bloques Gratis

Stackable es un plugin que expande significativamente las capacidades del editor de bloques de WordPress. Algunas de sus características destacadas incluyen:

  • Amplia Variedad de Bloques: Más de 20 bloques adicionales, incluyendo galerías avanzadas, columnas, y más.
  • Diseños Personalizables: Opciones de personalización avanzadas para cada bloque.
  • Compatibilidad: Totalmente compatible con Gutenberg, asegurando un rendimiento óptimo.
  • Plantillas Prediseñadas: Viene con plantillas de bloques que facilitan la creación de contenido atractivo.
  • Gratis: Aunque tiene una versión Pro con funcionalidades adicionales, la versión gratuita es muy poderosa.

Aquí puede ver como se ve el mismo editor de bloques, pero ahora usando Stackable. En la barra izquierda puedes ver los bloques adicionales los cuales tienen ese color degradado rosa. También puedes ver la barra a la derecha, como tiene más propiedades de las predeterminadas que vienen con WordPress, lo que te permite personalizar más a la medida cada uno de tus bloques.

editor de bloques de wordpress con stackable

Aunque Stackable tiene una versión de pago, yo sólo uso la versión gratuita. Para instalarlo, simplemente dirígete al menú Plugins -> Añadir Nuevo e instala.

Conclusión

El editor de bloques de WordPress ha democratizado la creación de contenido, permitiendo a usuarios de todos los niveles crear páginas y publicaciones atractivas y funcionales.

Para una experiencia más completa y avanzada sin costo adicional, Stackable es una excelente opción que complementa perfectamente a Gutenberg, brindándote una herramienta potente y versátil para crear contenido impresionante en tu sitio de WordPress.

Ahora que ya entiendes como usar el editor de bloques de WordPress, en el módulo siguiente del Curso de WordPress, aprenderás a como diseñar una página web con el editor de bloques de WordPress, conocerás que secciones debe tener y como se hacen usando los bloques de WordPress y Stackable.

Deja el primer comentario