A partir de WordPress 5.0, los usuarios de este sistema CMS cuentan con un nuevo editor de creación de contenido web. Al crear un sitio, utiliza el llamado bloques Se pueden editar bloques individuales. En el siguiente tutorial, hablaremos sobre cómo usar el editor Gutenberg para crear contenido para un sitio web.
¿Qué es Gutenberg?
Gutenberg es el nuevo editor predeterminado de WordPress . Funciona con un principio diferente al del editor TinyMCE utilizado hasta ahora. Ofrece una experiencia de diseño web completamente nueva al crear bloques usando bloques. En bloques individuales es posible trabajar con texto como en un editor de texto.
Los bloques se pueden mover y agrupar en la página según las ideas específicas del usuario. Gracias a Gutenberg, el usuario tiene la oportunidad de personalizar mejor la apariencia y el diseño de la página.
¿Qué es un bloque?
Los bloques son piezas de contenido en una página . Puede crear un bloque para texto, widgets, imágenes, video, citas y similares. Es posible seguir trabajando con cada bloque. El beneficio de crear un sitio web es la función de arrastrar y soltar , que se puede usar para mover bloques fácilmente.
Cómo crear una página en el editor de Gutenberg
Para crear una nueva página, vaya a Páginas ›Agregar nuevo en la administración de la página. Se abrirá la siguiente página:
Escriba un título en el bloque que se muestra. También encontrarás la opción de editar el servicio del sitio . Puedes editar el slug en cualquier momento haciendo clic en el título. Simplemente haga clic en el botón Editar junto a la URL de la página.
Creando bloques
Después de escribir el título, puede agregar más texto al bloque de entrada de texto preestablecido o puede insertar su propio bloque. Para ello, haga clic en el icono más:
. Aquí puede seleccionar el tipo de contenido que desea agregar.
En mi ejemplo, elegí agregar un párrafo. En el bloque de párrafo, encontrará opciones de fuente, alineación y un icono para insertar un enlace. Al final de la barra de herramientas de edición de bloques, encontrará un botón para obtener más opciones de edición.
. Por ejemplo, puede usarlo para ocultar configuraciones de bloques, duplicar, editar como HTML, agregar bloques reutilizables y eliminar un bloque.
Puede encontrar más opciones para el texto en el lado derecho de la pantalla . Los ajustes de fuente están disponibles. Puede elegir un tamaño de fuente entre varias opciones preestablecidas o establecer el suyo propio. También puede elegir un color de fondo, un color de texto o establecer sus propios ajustes avanzados.
Las opciones para editar bloques directamente sobre el bloque, así como en la parte derecha de la pantalla, difieren según los tipos de bloques individuales.
Cambiar tipo de bloque
Puede cambiar el tipo de bloque en cualquier momento mientras crea la página. Para ello, haga clic en el primer botón sobre el bloque activo. Aquí siempre se muestra el carácter del tipo de bloque activo. Después de hacer clic, aparecerá una lista de bloques entre los que puede elegir.
Tipos de bloque
Hay varios tipos de bloques disponibles al crear páginas. Están ordenados en una lista clara, que se divide en varias partes:
Más utilizados : aquí se muestran los tipos de bloques más utilizados, como párrafo, imagen, galería y similares.
Elementos directos : hay un bloque para la imagen directa.
Bloques comunes : aquí encontrará bloques para imágenes, videos, archivos, listas, citas y otras partes de la página que se usan comúnmente.
Formateo : le permite agregar contenido formateado, como tablas, códigos, HTML personalizado, pero también un bloque en un editor de texto clásico de WordPress.
Elementos de diseño : aquí encontrará bloques para saltos de página, botones, columnas o un bloque con un diseño creado previamente para medios y texto.
Widgets : gracias a las opciones disponibles, puede agregar códigos cortos, categorías, una lista de comentarios recientes y similares.
Integrado : le permite integrar contenido externo como YouTube, Twitter, Instagram, Facebook y otros contenidos.
Cómo crear un diseño básico en una página
Comencemos con una página simple. Será suficiente si tiene un título, texto, imagen, lista con viñetas y galería de imágenes.
Añadir texto
Después de ingresar el título, simplemente comience a escribir en el bloque preestablecido. Gutenberg crea un bloque separado para cada párrafo. No tienes que agregarlo a la página cada vez. Todo lo que tienes que hacer es presionar Enter. El nuevo bloque de párrafo se crea solo.
Añadir una imagen
Para agregar una imagen, seleccione el bloque apropiado de la lista de bloques. La lista de bloques se muestra haciendo clic en la imagen del icono más en la parte superior izquierda de la pantalla. Puede seleccionar una imagen de la biblioteca multimedia o subirla a la página.
Aparecerá en el diseño de la página tan pronto como se haya cargado. En la parte derecha de la pantalla, establezca el tamaño de la imagen, complete el texto alternativo o inserte un enlace.
Agregar una lista con viñetas
Seleccione el bloque apropiado de la lista. Al editar texto, también tiene la opción de elegir una lista numerada, insertar un enlace, etc.
Añadir galería de imágenes
Seleccione un bloque para la galería de la lista de bloques. Luego sube las fotos. En el bloque de la galería, puede ajustar la alineación, insertar o eliminar una imagen. En la parte derecha de la pantalla encontrará funciones para configurar el número de columnas y recortar imágenes en la galería.
Cómo mover bloques
Los bloques individuales se pueden mover en la página. Los botones necesarios aparecen cuando pasa el cursor sobre el bloque que desea mover. Hay dos flechas hacia arriba y hacia abajo para moverse. Estos siempre mueven el bloque seleccionado una posición hacia arriba o hacia abajo. Entre las flechas encontrará un icono para la función de arrastrar y soltar
. Cuando mueva el mouse sobre él, aparecerá una mano, que simplemente puede sostener el bloque y moverlo a la ubicación deseada.
Cómo reutilizar bloques creados
Si ha creado un bloque que le gustaría volver a utilizar más tarde, haga clic en el icono Más opciones. Lo encontrará en el menú de funciones en la parte superior del bloque. Seleccione Agregar a bloques reutilizables aquí.
De esta manera tendrás acceso a los bloques creados cada vez que crees una nueva publicación. Los bloques guardados aparecen en la lista de tipos de bloques en Reutilizable . También se pueden gestionar. Puede volver a convertirlos en un bloque normal o eliminarlos del menú.
Características adicionales
Hay varias características más útiles disponibles para crear páginas o artículos. Primero, veamos los botones en la parte superior de la página.
Ya he mencionado el primero de los iconos. Se utiliza para agregar un bloque a una página.
No es necesario representar las flechas hacia atrás y hacia adelante ; lo llevarán un paso hacia adelante o hacia atrás.
i – aquí puedes ver la estructura del contenido.
Una función interesante es la que ofrece la navegación por último bloque de botones. Además de mostrar el orden de los bloques individuales, también se usa para saltar rápidamente al bloque seleccionado.
Encontrará más funciones en el lado derecho de la página. Es posible que ya conozca algunos de trabajos anteriores con WordPress. Otros son nuevos.
Documento : le permite acceder a la configuración del documento, como editar la URL de la página, agregar una imagen de ilustración y habilitar comentarios. La asignación de categorías y etiquetas también está disponible en la página de publicación. También puede agregar texto para el resumen.
Bloque – Ya mencioné algunas de las funciones de este botón en la sección Creación de bloques. Se diferencian según el tipo de bloque seleccionado.
Vista previa : el botón de vista previa muestra una vista previa en vivo de la página o publicación.
Publicar : utilice este botón para publicar la página. Si está editando una página existente, aparece un botón Actualizar en lugar del botón Publicar.
Enlace permanente : edite la parte de texto de la URL aquí.
Propiedades de página : se utiliza para configurar una plantilla de página y asignar una página principal.
Mostrar más herramientas y opciones : el último botón en la esquina superior derecha de la página es Mostrar más herramientas y opciones . Aquí hay algunas características como el modo de foco para ayudarlo a enfocarse en el contenido de un bloque específico al crear una página.
También encontrarás el cambio entre el editor visual y el editor de código, así como el modo de pantalla completa. Además, encontrará atajos de teclado, la capacidad de administrar bloques reutilizables y otras opciones de configuración de página.
Consejos avanzados
También mencionaré algunas funciones más avanzadas del editor:
Creación rápida de bloques
Puede facilitar su trabajo para que no tenga que buscar siempre un bloque específico en la lista. Todo lo que tiene que hacer es ingresar una barra oblicua y las primeras letras del nombre del bloque en el bloque preestablecido :
/názov bloku
Tan pronto como comience a escribir, verá una lista de opciones coincidentes.
Editando el código fuente
Puede editar el código fuente de una página en cada paso de su creación. Puede hacerlo haciendo clic en el icono . Busque la opción del editor de código aquí.
Activar el modo de pantalla completa
En el editor de Gutenberg, puede trabajar sin distracciones innecesarias al ofrecer el menú de la página. Desplácese hasta la parte superior derecha de la página y haga clic en . Aquí encontrará la función Modo de pantalla completa. También puede seleccionar el modo Spotlight para enfocarse aún mejor en un bloque específico.
Uso de atajos de teclado
Gutenberg le permite usar muchos atajos de teclado especiales además de los atajos habituales. Por ejemplo:
- Mostrar u ocultar la configuración de la barra lateral Ctrl + Shift +
- deshacer los cambios recientes Ctrl + Z
- hacer cambios revocados nuevamente Ctrl + Shift + Z
Use Ctrl + Shift + H para abrir una lista de accesos directos.
Ampliar opciones con complementos
Para expandir sus opciones de diseño, instale uno de los complementos de Gutenberg. El complemento Stackable , por ejemplo, ofrece una colección de bloques preparados previamente. Crearás interesantes páginas principales. Otter Blocks también es un gran complemento. Cree bloques como precios, Google Maps y más.
Aquí hay algunas respuestas a las preguntas más frecuentes.
¿Qué pasa si no quiero usar Gutenberg?
Algunos usuarios preguntan si WordPress le permite usar el editor TinyMCE anterior. Sí, es posible. Gutenberg se puede desactivar en este caso. Todo lo que tienes que hacer es instalar el plugin de WordPress Classic Editor .
¿Cambiará el contenido anterior?
Todo el contenido que ya tiene en el sitio permanecerá sin cambios. Gutenberg coloca una página o artículo específico en un bloque. Gutenberg está disponible para este propósito. así llamado bloque clásico. Esto le permite trabajar con el contenido original como en el editor clásico de TinyMCE.
Simplemente puede editar el contenido original en un bloque clásico o convertirlo en bloques . Encontrará la función requerida debajo del icono Más opciones . También puedes trabajar con el contenido como si lo hubieras creado en un editor de bloques.
