El editor Gutenberg se centra en 'Bloque', al insertar contenido como texto, imágenes, etc., la esencia es añadir un tipo de bloque correspondiente y editarlo. Este enfoque es muy flexible y proporciona un control preciso sobre el estilo y la posición de cada elemento. He aquí los pasos detallados:
I. Insertar texto: Construir contenido con bloques de párrafo y encabezado
El texto es el cuerpo principal del artículo, y Gutenberg logra la disposición del texto a través de los bloques 'Párrafo' y 'Título', que funcionan de la siguiente manera:
1. Insertar texto de párrafo (contenido del cuerpo)
- Método 1Cuando entre en la página de edición del artículo, aparecerá por defecto el mensaje "Empezar a escribir o teclear / para añadir bloque". Cuando introduzca el texto directamente, el sistema creará el bloque "Párrafo" automáticamente.
- Método 2Haga clic en el icono "+" (insertador de bloques) de la zona de edición, busque "párrafo" y haga clic en él para generar un bloque de párrafo en blanco y, a continuación, introduzca el contenido.
formato：
Seleccione un bloque de párrafo y aparecerá a la derecha el panel Bloque (Configuración del bloque) para configurarlo:
- Alineación (justificado a la izquierda, centrado, justificado a la derecha, justificado a los extremos);
- Tamaño del texto (pequeño, normal, grande, extragrande);
- Color del texto (haz clic en el cuadrado de color para elegirlo, procurando que contraste con el color de fondo para garantizar la legibilidad);
- Color de fondo (para añadir un color de base a los párrafos y resaltar el contenido importante).
2. Inserción de títulos (jerarquía de contenidos)
El título sirve para distinguir la estructura del artículo (por ejemplo, capítulo, sección), y se recomienda utilizarlo según la jerarquía "H1-H6" (H1 suele ser el título principal del artículo, que se ha colocado por defecto en la parte superior de la página de edición, por lo que no es necesario añadirlo repetidamente).
procedimiento：
- Haga clic en el icono "+" de la zona de edición, busque "Título" y selecciónelo para generar un bloque de título.
- Introduzca el texto del título (por ejemplo, "I. Preparación para la instalación").
- Seleccione el bloque y elija H2-H6 (H2 para el subtítulo de nivel 1, H3 para el subtítulo de nivel 2, y así sucesivamente) en el "Nivel de encabezamiento" del panel derecho.
finuraDespués de introducir el texto, selecciónelo y pulse la tecla Ctrl+B(negrita) o Ctrl+I(en cursiva) para estilizar rápidamente el texto.
II. Insertar imágenes: utilizar el bloque "Imágenes" para añadir imágenes y optimizarlas
Las imágenes dan vida a las entradas, y el bloque "Imágenes" de Gutenberg permite cargarlas, cambiar su tamaño y optimizarlas en los siguientes pasos:
1. 3 formas de insertar imágenes
- Forma 1: Cargar una nueva imagenHaz clic en el icono "+" → Busca "Imágenes" → Haz clic en "Cargar" → Selecciona un archivo de imagen en tu ordenador → Espera a que se complete la carga.
- Forma 2: Utilizar imágenes de la mediatecaSi ya se ha cargado una imagen (por ejemplo, una imagen insertada anteriormente), haga clic en el bloque "Imágenes" y seleccione "Biblioteca multimedia" → Marque la imagen de destino → Haga clic en "Seleccionar".
- Forma 3: Pegar la imagen directamenteCopie la imagen en su ordenador (haga clic con el botón derecho en "Copiar"), vuelva al área de edición y haga clic con el botón derecho en "Pegar", el sistema creará automáticamente el bloque de imagen y lo subirá.
2. Ajuste de los estilos de imagen (deben estar optimizados)
Con el bloque de imagen seleccionado, el panel derecho le permite configurar los siguientes parámetros clave:
- alineación：
- Alineado a la izquierda / Alineado a la derecha: las imágenes se muestran contra el lateral y el texto se muestra a su alrededor;
- Alineación central: Las imágenes se muestran centradas con el texto por encima y por debajo;
- Alineación amplia: la imagen ocupa todo el ancho del área de edición (adecuado para imágenes grandes).
- magnitudArrastre el control deslizante "Anchura" para ajustar la escala (se recomienda mantener marcada la opción "Restringir escala" para evitar la distorsión de la imagen).
- enlaceHaga clic en la casilla de entrada "Enlace" para enlazar la imagen con otras páginas (por ejemplo, haga clic en la imagen para saltar a la página de imágenes de alta resolución), no es necesario enlazar puede dejarse en blanco.
- Texto alternativo (Alt Text): Introduzca una descripción de la imagen (por ejemplo, "Captura de pantalla de los pasos de instalación de WordPress") para ayudar a los motores de búsqueda a reconocer el contenido de la imagen, mejorar el SEO y facilitar la accesibilidad.
3. Resolución de problemas comunes
- Fallo al cargar imágenes: Compruebe el tamaño de la imagen (se recomienda no más de 5 MB), el formato (admite JPG, PNG, WebP) o actualice la página e inténtelo de nuevo.
- Imágenes borrosas: asegúrate de subir la imagen original (con una resolución de al menos 1000px de ancho) y evita ampliar más allá del tamaño original.
Insertar vídeo: añada vídeo local o en línea con el bloque "Vídeo".
Tanto si se trata de un vídeo grabado por ti mismo como de un vídeo de YouTube, Station B u otras plataformas, puedes insertarlo a través del bloque "Vídeo":
1. Inserta un vídeo local (que hayas subido tú mismo)
- Haz clic en el icono "+" → busca "Vídeo" → selecciona "Cargar" → selecciona el archivo de vídeo en tu ordenador (se admiten los formatos MP4, WebM).
- Una vez finalizada la carga, el vídeo se muestra automáticamente en el bloque y puede probarse haciendo clic en reproducir.
tenga en cuentaLos archivos de vídeo locales son grandes y pueden ocupar espacio en el servidor y ralentizar la velocidad de carga. Se recomienda utilizar este método sólo para vídeos pequeños (menos de 100 MB) y dar prioridad a las plataformas en línea para los vídeos grandes.
2. Insertar vídeo en línea (¡recomendado!)
Insertado a través de un enlace a una plataforma de vídeo, no ocupa espacio en el servidor y se carga más rápido:
- Abre la plataforma de vídeo (por ejemplo, YouTube, B Station, Tencent Video), busca el vídeo de destino y copia el enlace para compartirlo (por ejemplo
https://www.bilibili.com/video/BV123456）。 - En el área de edición de Gutenberg, pega directamente el enlace → el sistema reconocerá y creará automáticamente el bloque de vídeo y mostrará el reproductor de vídeo.
Plataformas compatiblesPuedes utilizar YouTube, B-Site, Tencent Video, Youku, Aqiyi y otras plataformas convencionales, y esperar 2-3 segundos a que se cargue el enlace después de pegarlo.
3. Ajuste del estilo de vídeo
Seleccione el bloque de vídeo y podrá ajustar el panel derecho:
- Alineación (igual que la imagen, la alineación izquierda/derecha permite que el texto se enrolle);
- Anchura (cambiar el tamaño del reproductor de vídeo, se recomienda no superar los 1000px de anchura para evitar una visualización incompleta en teléfonos móviles);
- Reproducción automática: no recomendada (la mayoría de los navegadores bloquean la reproducción automática, lo que afecta a la experiencia).
Cuarto, insertar enlaces: que el texto, las imágenes asociadas a otros contenidos
Los enlaces son los "vasos sanguíneos" de un sitio web, que pueden asociar contenidos con otras páginas y sitios web externos, y Gutenberg permite añadir enlaces a texto e imágenes:
1. Añadir enlaces al texto (hipervínculos)
- Seleccione el texto al que desea añadir un enlace (por ejemplo, "Haga clic para ver el tutorial detallado").
- Haga clic en el icono "Enlace" (forma de cadena) de la barra de herramientas que aparece arriba, o pulse la tecla de acceso directo
Ctrl+K。 - Pegue la dirección del enlace (por ejemplo, un enlace a una página del sitio) en el cuadro de entrada.
https://你的域名/教程o enlaces externoshttps://example.com）。 - Ajustes opcionales:
- Marque "Abrir en nueva pestaña" (se recomienda utilizar enlaces externos para evitar que los visitantes abandonen su sitio);
- Haga clic en el icono "Configuración del enlace" (rueda dentada pequeña) para añadir un título al enlace (texto de sugerencia que se muestra al pasar el ratón por encima).
- Pulse "Intro" o "Aplicar" para completar la configuración; el texto se volverá azul y aparecerá subrayado, lo que indica que el enlace se ha añadido correctamente.
2. Añadir enlaces a las imágenes
- Seleccione el bloque de imagen y busque el cuadro de entrada "Enlace" en el panel derecho.
- Introduzca la dirección del enlace (por ejemplo, haga clic en la imagen para ir a la página de detalles del producto).
- Marque "Abrir en nueva pestaña" (si lo desea) y haga clic en el espacio en blanco para guardar.
3. Eliminación de enlaces
- Enlace de texto: Seleccione el texto con enlace, haga clic en el icono "Eliminar enlace" (cadena con cruz) de la barra de herramientas o pulse
Ctrl+KBorre después la dirección del enlace. - Enlace de imagen: seleccione la imagen y elimine la dirección en el cuadro de entrada "Enlace" de la derecha.
V. Consejos para operadores noveles
- Atajos de las operaciones en bloque：
- Añadir rápidamente un bloque: introduzca
/+ nombre del bloque (por ejemplo/图片(Trae directamente el bloque de imágenes); - Mover bloque: Seleccione el bloque y pulse
↑/↓o arrastre el icono "⋮⋮" a la izquierda del bloque; - Borrar bloque: Seleccione el bloque y pulse
Deleteo haga clic en el icono "Eliminar" de la barra de herramientas del bloque.
- Añadir rápidamente un bloque: introduzca
- Vista previa en tiempo realHaga clic en el botón "Vista previa" situado en la esquina superior derecha de la página de edición para comprobar si el enlace funciona y la imagen/vídeo se muestra correctamente.
- Evite la tipografía excesivaEl color del texto y del fondo no debe ser excesivo (no más de 3), para mantener la página limpia y ordenada; el tamaño de las imágenes y los vídeos es uniforme (por ejemplo, la anchura está fijada en 800px), para mejorar la estética.
Con los pasos anteriores, puedes insertar y editar fácilmente texto, imágenes, vídeos y enlaces en el Editor de Gutenberg. Recuerda: cada elemento es un "bloque" independiente, selecciónalo y ajusta la configuración en el panel derecho para obtener un diseño preciso. Practica unas cuantas veces más y pronto le cogerás el truco.
Español