El editor de bloques de WordPress es como cualquier otro constructor de páginas que te permite crear y diseñar contenidos y páginas web increíbles para tu sitio web. Está integrado en WordPress, por lo que cualquiera puede crear un sitio web desde cero.
El editor de bloques de Gutenberg, también conocido como editor de bloques, es el nuevo editor que ha sustituido al antiguo editor clásico. El editor de bloques funciona de forma diferente al editor clásico.
Editor de bloques de WordPress ¿Qué es esto?
WordPress Block Editor es el nuevo editor por defecto basado en bloques. Los bloques son como los elementos de contenido necesarios para construir un sitio web o contenido.
Ofrece un enfoque moderno y basado en bloques para la creación de contenidos, lo que facilita el diseño y el formateo de páginas y entradas sin necesidad de grandes herramientas de codificación o de terceros.
Interfaz del editor de bloques
Veamos la interfaz del editor de bloques de Gutenberg y su funcionalidad.
Aquí tienes un rápido repaso a los elementos de la interfaz del editor Gutenberg:
- Añadir bloque
- Botón Rehacer/Deshacer
- Resumen del documento
- Ver
- Ajustes (Bloques y Postes)
- Opciones para el editor
Hay incluso más. Echa un vistazo a la siguiente imagen.
- Opción de barra de búsqueda
- Añadir título de la entrada o página
- Añadir bloques en el área de contenido
- Bloques instalados y principales de WordPress
- Botón Añadir bloque
- Opciones para entradas y páginas
- Opciones de bloque
- Estilos de bloque y configuración
- Bloques, patrones y soportes
Ahora que ya estás familiarizado con la interfaz del editor de bloques, veamos los bloques que vienen con Gutenberg.
Bloques principales de WordPress
Dado que el Editor de bloques de Gutenberg está basado en bloques, aprendamos qué bloques vienen con el Editor de bloques y qué hacen exactamente.
Bloques de contenido
Estos bloques son la base para crear contenidos basados en texto:
- Párrafo: Permite añadir texto normal con opciones de formato.
- Rúbrica: Para crear títulos con seis niveles (H1 a H6).
- Lista: Añade listas ordenadas (numeradas) o desordenadas (con viñetas).
- Cita: Formatea el texto como una cita en bloque con citación opcional.
- Código: Muestra fragmentos de código sin formato en un bloque formateado.
- Preformateado: Añade texto conservando el espaciado y la alineación.
- Cuadro: Crea tablas sencillas para la presentación de datos.
- Verso: Para poemas u otros textos preformateados con espaciado especial.
Cree bonitas mesas
Con el editor de bloques
Bloques multimedia
Estos bloques permiten incrustar y mostrar diversos tipos de medios:
- Imagen: Añade imágenes individuales con subtítulos y opciones de alineación.
- Galería: Crea galerías de imágenes con diseños personalizables.
- Vídeo: Incrusta los vídeos cargados en la Mediateca.
- Audio: Añade archivos de audio reproducibles directamente a la página.
- Archivo: Carga y enlaces a archivos para descargar.
- Medios y texto: Combina texto y medios en un mismo bloque.
- Portada: Añade una imagen o vídeo con texto superpuesto, perfecto para cabeceras o secciones.
Bloques de diseño
Estos bloques ayudan con la estructura de la página y el diseño visual:
- Columnas: Crea diseños de varias columnas.
- Grupo: Agrupa múltiples bloques para una mejor organización y estilo.
- Fila: Alinea los bloques horizontalmente en una fila.
- Botones: Añade botones personalizables con enlaces.
- Espaciador: Añade espacio entre bloques para ajustar el diseño.
- Separador: Inserta líneas horizontales para dividir secciones.
Bloques incrustados
WordPress permite incrustar contenido de varias plataformas con estos bloques:
- YouTube: Incrusta vídeos de YouTube.
- Twitter: Incrusta tweets directamente en la página.
- Instagram: Incrusta publicaciones de Instagram.
- Spotify: Incrusta listas de reproducción, álbumes o canciones de Spotify.
- Otras incrustaciones: Soporte para Vimeo, Facebook, TikTok, SoundCloud y más.
Bloques temáticos
Estos bloques se utilizan para añadir contenido relacionado con el tema:
- Título del puesto: Muestra el título de la entrada o página actual.
- Contenido: Muestra el contenido de la entrada o página actual.
- Publicar en Imagen destacada: Muestra la imagen destacada de una entrada.
- Bucle de consulta: Muestra dinámicamente una lista de entradas en función de criterios específicos.
- Navegación: Añade menús de navegación.
Bloques de widgets
Permite añadir contenido de widgets tradicionales en diseños basados en bloques:
- Buscar en: Añade una barra de búsqueda.
- Últimas entradas: Muestra una lista de mensajes recientes.
- Categorías: Muestra una lista de categorías de entradas.
- Nube de etiquetas: Muestra las etiquetas en un formato visualmente atractivo.
Bloques reutilizables y personalizados
Bloques reutilizables: Guarde cualquier bloque o grupo de bloques para reutilizarlos en todo el sitio.
- HTML personalizado: Añade HTML personalizado para una personalización avanzada.
Estos bloques centrales proporcionan la base para crear varios diseños de página y tipos de contenido sin herramientas adicionales, lo que hace que WordPress sea versátil y accesible para usuarios de todos los niveles.
¿Cómo utilizar el editor de bloques de WordPress?
El editor de bloques es un juego de niños, ya que es muy fácil de usar. El editor de bloques de WordPress es potente y flexible, y te permite diseñar páginas y entradas fácilmente. Si te familiarizas con sus funciones, podrás crear rápidamente contenidos visualmente atractivos y atrayentes.
Inserción de bloques
Este nuevo editor admite la función de arrastrar y soltar, lo que significa que puede arrastrar y soltar los bloques para crear nuevos diseños y secciones de una página web. Para arrastrar y soltar bloques, haga clic en "Añadir nuevo bloque" en la parte superior y arrastre y suelte el
Puede añadir o insertar bloques simplemente pulsando el botón "añadir bloque" en el editor, escribir el nombre del bloque e insertarlo en el editor.
Existe otro método para añadir bloques al editor. Basta con escribir "/Nombre." A continuación encontrará una demo. No dejes de verla.
Duplicar un bloque
Duplicar bloques es un proceso sencillo. Puede duplicar un bloque seleccionándolo y utilizando la tecla de acceso directo Ctrl+Mayús+D.
También puede hacerlo manualmente. Seleccione un bloque y haga clic en los tres puntos verticales del menú de configuración del bloque (1) para duplicarlo. A continuación, seleccione la opción "Duplicar". (2). Una vez pulsado, el bloque se duplicará al instante.
Puede duplicar bloques seleccionando el bloque y utilizando la tecla de acceso directo Ctrl+Mayús+D.
Mover un bloque
Puede mover bloques mediante la función de arrastrar y soltar o los botones arriba y abajo.
Selecciona el bloque y verás dos flechas (arriba y abajo). Haz clic en la flecha arriba o abajo para mover el bloque verticalmente.
También puede utilizar el asa de arrastre para reposicionar el bloque donde desee.
Borrar o eliminar un bloque
Borrar o eliminar un bloque es superfácil. Seleccione el bloque y pulse la tecla de acceso directo Mayús+Alt+Z desde el teclado.
Puede hacerlo manualmente haciendo clic en los ajustes de bloqueo y seleccionando la opción de eliminar bloqueo.
Crear patrón
Una característica destacada del editor de bloques es Crear patrón. Se trata de bloques que puedes guardar y reutilizar en varias entradas o páginas. Esta función es increíblemente práctica, ya que te permite ahorrar tiempo reutilizando bloques diseñados a medida.
Para crear un patrón, abra los ajustes de bloque de los bloques seleccionados o de un bloque haciendo clic en los tres puntos y seleccione Crear patrón.
A continuación, asigna un nombre (1) y categorías (2) a su bloque o bloques y haga clic en el botón Añadir botón (3).
Esto guarda tu bloque en la biblioteca de bloques de Gutenberg, haciéndolo accesible para su uso futuro. Cuando lo necesites, simplemente inserta el bloque reutilizable como cualquier otro bloque.
Atajos de teclado
Puedes aprovechar el uso del editor de bloques de Gutenberg mediante atajos de teclado. Estos atajos pueden ayudar a los usuarios a navegar rápidamente, dar formato al texto y gestionar bloques sin depender del ratón.
Estos atajos funcionan en toda la interfaz del editor:
- Ctrl + S (Windows) / Cmd + S (Mac): Guarda el borrador.
- Ctrl + Z (Windows) / Cmd + Z (Mac): Deshacer la última acción.
- Ctrl + Y: Rehace la última acción.
- Ctrl + Mayús + Alt + M (Windows) / Cmd + Mayús + Opción + M (Mac): Cambia entre los modos Visual y Editor de código.
- Ctrl + Mayús + D: Duplicar un bloque seleccionado
- Ctrl + Mayús + , : Ocultar o mostrar el panel de configuración
Si lo desea, puede ver los atajos de teclado del editor de WordPress.org.
Añade más bloques con Ultimate Blocks
Los bloques predeterminados del editor de bloques son fantásticos para crear entradas y páginas visualmente atractivas. Pero, ¿y si necesitas más flexibilidad?
Afortunadamente, el editor de bloques admite el desarrollo de bloques personalizados, lo que permite a los desarrolladores crear sus propios bloques únicos. Esto ha dado lugar a una amplia gama de impresionantes plugins de bloques Gutenberg creados por la comunidad. Uno de estos plugins es Bloques definitivos.
Bloques definitivos es un potente plugin diseñado para potenciar el editor de bloques de WordPress con 25+ bloques personalizables. Perfecta para blogueros y vendedores, incluye funciones como bloques de reseñas, filtros de contenido y bloques de llamada a la acción para mejorar el compromiso y la funcionalidad.
Reflexiones finales
Dominar el editor de bloques Gutenberg abre infinitas posibilidades para crear contenido atractivo y visualmente impactante en tu sitio de WordPress.
Espero que el tutorial haya sido útil y fácil de seguir. Hágame saber sus pensamientos en la sección de comentarios a continuación. Además, haz que tus amigos conozcan esta sencilla guía a través de tus redes sociales.
Más información
- Ultimate Blocks Revisión: Características, pros, contras y más
- Cómo crear Flip Boxes en WordPress en 4 sencillos pasos
- Cómo añadir un cuadro de revisión a las entradas/páginas de WordPress de 2 formas sencillas
- Cómo hacer que un encabezado de tabla sea adhesivo en WordPress (3 sencillos pasos)
- Cómo cambiar el color del botón Hover en WordPress en 3 sencillos pasos
