Cómo usar el editor de bloques de WordPress: guía para principiantes

El editor de bloques de WordPress puede resultar confuso al abrirlo por primera vez. El diseño es diferente, todo funciona en bloques y encontrar las opciones básicas puede llevar más tiempo del esperado para los principiantes.

Sin embargo, el editor de bloques está incluido con todas las instalaciones de WordPress de forma predeterminada, lo que lo convierte en una herramienta gratuita para los usuarios.

Entonces, una vez que sepa cómo funcionan los bloques, podrá crear páginas más rápido, formatear contenido fácilmente y controlar sus diseños mejor que nunca en el editor clásico.

El editor de bloques está diseñado para ser intuitivo y flexible, permitiendo a los usuarios arrastrar y soltar bloques. Con un poco de práctica, puedes crear y personalizar páginas en tan solo unos minutos.

Resumen

• El editor de WordPress, también conocido como Gutenberg, reemplazó al editor clásico en WordPress 5.0 y te permite crear contenido utilizando bloques individuales.

• Cada elemento de tu página, incluido texto, imágenes, botones y diseños, se encuentra en su propio bloque con configuraciones dedicadas.

• Puede personalizar los colores, el espaciado, la tipografía y la alineación directamente desde el panel de configuración del bloque sin ningún código.

• Los patrones de bloques le brindan diseños listos para usar con los que comenzar, mientras que los bloques reutilizables le permiten guardar y reutilizar sus propios elementos en todo el sitio.

¿Qué es el editor de bloques de WordPress?

El editor de bloques, también conocido como Gutenberg, es el editor de contenido predeterminado de WordPress. Reemplazó al editor clásico en WordPress 5.0 en diciembre de 2018.

En lugar de un área de texto, creas contenido usando bloques individuales. Cada párrafo, imagen, encabezado, botón y vídeo tiene su propio bloque que puedes mover, formatear y personalizar de forma independiente.

WordPress pasó a un sistema basado en bloques para que usted tenga más control sobre los diseños de sus páginas sin necesidad de un generador de páginas independiente ni de un código personalizado.

Editor de bloques de WordPress vs. Editor clásico

El editor clásico ofrecía un área de texto básica con opciones de formato limitadas. Crear algo más allá del texto y las imágenes estándar requería instalar complementos adicionales o tener conocimientos técnicos.

Con el editor de bloques, cada elemento tiene su propio bloque con ajustes específicos. Puedes mover contenido, crear diseños de columnas, añadir botones, incrustar contenido multimedia y ajustar el espaciado sin escribir una sola línea de código.

WordPress ya no desarrolla activamente el editor clásico. Cambiar al editor de bloques te da acceso a todo lo que WordPress ofrece actualmente, incluyendo la edición completa del sitio, patrones de bloques y bloques reutilizables.

¿Cómo navegar por la interfaz del editor de bloques?

Al abrir el editor de bloques por primera vez, puede parecer que hay mucha actividad en la pantalla. Sin embargo, hay tres aspectos principales que debes conocer. Una vez que comprendas cada uno, navegar por el editor será mucho más fácil.

• Barra de herramientas superior: La barra de herramientas superior se encuentra en la parte superior de la pantalla. Úsala para añadir bloques, corregir errores, previsualizar el contenido y acceder a la configuración de publicación.

• Panel de configuración: El panel de configuración se encuentra a la derecha de la pantalla. Muestra la configuración del bloque al hacer clic en él y, si no hay nada seleccionado, muestra la configuración de la publicación, como categorías, etiquetas e imagen destacada. Puedes acceder a la pestaña del bloque para configurarlo.

• Insertador de bloques: El insertador de bloques es el botón azul con el signo más en la esquina superior izquierda. Haz clic en él para usar la barra de búsqueda y encontrar e insertar bloques rápidamente, explorar por categoría o encontrar cualquier bloque reutilizable que hayas guardado.

También puede utilizar la Vista de lista para administrar y organizar sus diseños de manera más efectiva.

Tipos de bloques disponibles

El editor de bloques organiza todo en cinco categorías. Cada categoría agrupa los bloques según su función, lo que facilita encontrar exactamente lo que necesitas al crear tus páginas y entradas.

Los bloques predeterminados cubren una amplia gama de tipos de contenido, lo que permite a los usuarios crear páginas ricas en multimedia con imágenes, videos, galerías y más.

Esto es lo que cubre cada uno:

• Bloques de texto: Párrafos, encabezados, listas, citas, fragmentos de código y tablas. Todo lo que escribas en tu página se incluye en esta categoría.

• Bloques multimedia: Imágenes, vídeos, archivos de audio, galerías de imágenes y archivos descargables. Puedes usar varios bloques, incluyendo galerías de imágenes, para crear contenido visualmente atractivo y páginas ricas en contenido multimedia.

• Bloques de diseño: Columnas, botones, grupos, separadores y espaciadores. Puedes combinar varios bloques y otros bloques para crear diseños complejos y controlar la presentación del contenido.

• Bloques de widgets: Barras de búsqueda, listas de archivo, listas de categorías, últimas publicaciones y calendarios. Estos son los elementos funcionales que aportan valor a tus páginas.

• Bloques para incrustar: YouTube, Vimeo, Spotify, Twitter y muchas otras plataformas. El editor de bloques permite incrustar fácilmente contenido de fuentes externas, como YouTube y Vimeo, directamente en sus páginas sin necesidad de código.

Bloques comunes de WordPress que los principiantes usan con más frecuencia

Al empezar, no es necesario aprender todos los bloques a la vez. Estos son los bloques que usarás en casi todas las páginas y publicaciones.

Bloques de párrafo y encabezado

El bloque de párrafo es el bloque más básico del editor. Cada vez que empiezas a escribir, estás usando uno. Puedes cambiar el tamaño de fuente, el color del texto y la alineación directamente desde la barra de herramientas de bloques, sin necesidad de modificar el código.

Los bloques de encabezado funcionan junto con los bloques de párrafo para estructurar tu contenido. Puedes elegir entre H1 y H6 según cómo quieras organizar tu página.

El uso correcto de los niveles de encabezado también ayuda a los motores de búsqueda a comprender su contenido, lo que es importante para el SEO.

Bloques de imágenes y medios

El bloque de imágenes te permite subir imágenes directamente desde tu biblioteca multimedia o desde una URL. Una vez que la imagen esté colocada, puedes alinearla a la izquierda, a la derecha o al centro, ajustar su tamaño y añadir texto alternativo para SEO y accesibilidad.

Para varias imágenes, el bloque de galería las muestra en una cuadrícula ordenada. Puedes controlar el número de columnas, el tamaño de las imágenes y si aparecen subtítulos debajo de cada imagen.

Bloques de botones y enlaces

El bloque de botones te permite añadir una llamada a la acción en cualquier parte de tu página sin necesidad de conocimientos de diseño. Puedes cambiar el texto del botón, el enlace, el color de fondo, el radio del borde y el color del texto desde el panel de configuración del bloque.

Para crear enlaces en línea, simplemente resalta el texto en un bloque de párrafo y haz clic en el icono de enlace en la barra de herramientas. Sin código ni plugins, solo un hipervínculo limpio añadido en segundos.

Bloques de lista y cotización

El bloque de lista crea listas numeradas o con viñetas con un solo clic. Puedes cambiar de estilo, sangrar elementos para crear listas anidadas y dar formato al texto dentro de cada elemento de la lista, como en un bloque de párrafo.

El bloque de citas resalta declaraciones o citas importantes en tu contenido. Añade énfasis visual al texto, destacándolo del resto de la página.

Úselo para testimonios, puntos clave o cualquier cosa que desee que los lectores noten.

¿Cómo agregar, mover y eliminar bloques?

Cada acción que realizas en el editor Gutenberg se reduce a tres cosas: añadir bloques, moverlos y eliminarlos. Así es como funciona cada una.

Agregar bloques en el editor de WordPress

Puedes añadir un bloque a tu página o publicación de tres maneras. Puedes añadir un nuevo bloque haciendo clic en el botón "Añadir nuevo bloque" o usando el comando de barra diagonal (escribe / seguido del nombre del bloque):

• Insertador de bloques: Haga clic en el botón azul "+" en la esquina superior izquierda para abrir el insertador de bloques. Aquí puede buscar o explorar cualquier bloque que necesite, y también explorar la biblioteca de patrones de bloques para encontrar patrones y diseños de bloques prediseñados que puede insertar y personalizar.

• Insertador en línea: coloque el cursor entre los bloques existentes en su página y haga clic en el pequeño botón más que aparece entre ellos.

• Comando de barra diagonal: Haga clic en cualquier bloque de párrafo vacío y escriba una barra diagonal (/) seguida del nombre del bloque. Esta es una forma rápida de agregar un nuevo bloque al instante.

Mover y reorganizar bloques en Gutenberg

Hay tres formas de mover un bloque a una nueva posición en tu página:

• Botones de flecha: Cada bloque tiene dos botones de flecha en su barra de herramientas. Úsalos para mover el bloque hacia arriba o hacia abajo una posición a la vez.

• Controlador de arrastre: tome el controlador de arrastre de seis puntos en el lado izquierdo del bloque y arrástrelo a cualquier parte de su página.

• Descripción general del documento: abra el panel de descripción general del documento desde la barra de herramientas superior para ver todos los bloques enumerados en orden y arrástrelos a su lugar desde allí.

Eliminar y quitar bloques en WordPress

Quitar un bloqueo sólo lleva unos segundos:

• Menú de tres puntos: seleccione el bloque, haga clic en el menú de tres puntos en la barra de herramientas del bloque y seleccione Eliminar.

• Atajo de teclado: seleccione el bloque y presione Retroceso o Eliminar en su teclado para eliminarlo instantáneamente.

• Deshacer un error: presione Control Z en Windows o Comando Z en Mac para recuperar un bloque que eliminó por accidente.

Personalizar bloques sin codificación

No necesitas saber código para personalizar la apariencia de tus bloques. Cada bloque del editor de WordPress incluye su propio panel de configuración en el lado derecho de la pantalla.

Seleccione cualquier bloque y la barra lateral se actualizará instantáneamente para mostrarle exactamente lo que puede cambiar para ese bloque.

Esto es lo que puedes controlar directamente desde el panel de configuración del bloque:

• Configuración de texto: cambie el tamaño de fuente, el grosor de fuente, la altura de línea y el espaciado entre letras para que coincidan con el estilo de su contenido.

• Opciones de color: actualice el color del texto y el color de fondo de cualquier bloque utilizando el selector de color o ingresando un código hexadecimal.

• Controles de espaciado: ajuste el relleno y el margen alrededor de su bloque para controlar cuánto espacio queda encima, debajo y alrededor de su contenido.

• Configuración de alineación: alinee su bloque a la izquierda, al centro, a la derecha o configúrelo en ancho completo según sus necesidades de diseño.

• Patrones reutilizables: Guarda cualquier bloque o grupo de bloques como patrón reutilizable. Úsalo en varias páginas y publicaciones sin tener que reconstruirlo cada vez.

Uso de patrones de bloques y bloques reutilizables

Tanto los patrones de bloques como los bloques reutilizables te ahorran tiempo al crear páginas, pero funcionan de forma diferente. Aquí te explicamos la función de cada uno.

Los patrones de bloque son diseños predefinidos que vienen integrados en el editor de WordPress. Los encontrarás en el insertador de bloques, en la pestaña Patrones. También puedes acceder a la biblioteca oficial de patrones de bloque para encontrar una amplia selección de diseños prediseñados en WordPress.org.

Elige uno que te guste, colócalo en tu página, añade tu propio contenido y listo. Sin necesidad de crearlo desde cero.

Los bloques reutilizables ahora se llaman Patrones Sincronizados. Estos te permiten crear y guardar tu propio contenido, que puedes reutilizar en todos los bloques de tu sitio.

Una vez guardado, puedes colocar un patrón sincronizado en cualquier página o publicación y, si lo editas, el cambio se aplicará automáticamente en todos los lugares donde aparezca.

Perfecto para cosas como secciones de llamada a la acción, detalles de contacto o descargos de responsabilidad que usas repetidamente.

Errores comunes que cometen los principiantes con el editor de bloques

La mayoría de los principiantes se enfrentan a los mismos problemas al empezar a usar el editor de bloques. A continuación, se detallan los aspectos a tener en cuenta:

• Uso excesivo de bloques: No todo necesita su propio bloque. Agregar demasiados bloques separados para fragmentos pequeños de contenido dificulta la gestión de la página y ralentiza el flujo de trabajo de edición.

• Ignorar la estructura de los encabezados: Muchos principiantes eligen el tamaño de los encabezados basándose en su apariencia, no en su significado. Los niveles de encabezado indican a los motores de búsqueda cómo está organizado el contenido. Saltarse del H2 al H4 o usar el H1 varias veces perjudica el SEO.

• No usar la configuración de la barra lateral: El panel de configuración de bloques es donde se realiza la mayor parte de la personalización. Omitirlo implica perderse los controles de tipografía, las opciones de color y la configuración de espaciado que ya vienen integrados.

• Romper diseños accidentalmente: Mover bloques con el controlador de arrastre es fácil, pero soltar un bloque en el lugar equivocado puede arruinar tu diseño. Presiona Control Z en Windows o Comando Z en Mac para deshacer y recuperar rápidamente.

Conclusión

El editor Gutenberg parece intimidante al abrirlo por primera vez. Cada elemento es un bloque, la interfaz es nueva y cuesta un poco acostumbrarse a encontrar las opciones básicas.

Una vez que conoces el funcionamiento de los bloques, crear páginas y escribir contenido se vuelve más rápido y flexible. Controlas tus diseños, personalizas tu contenido y administras todo tu sitio sin tocar ni una sola línea de código.

Empieza con los bloques que más usas. Aprende a usar el panel de configuración. Ahorra tiempo con patrones y bloques reutilizables. Cuanto más uses el editor, más natural te resultará.

Preguntas frecuentes sobre el editor de bloques de WP