Escritura y edición

Editor de WordPress: Uso de bloques

El editor de WordPress es la herramienta que te permite crear páginas y entradas en tu sitio web. A continuación, te explicamos cómo utilizar el editor.

Esta es una guía completa sobre todas las funciones del editor de WordPress.

Si prefieres ponerte en marcha rápidamente, salta directamente a Añadir contenido a través de bloques, echa un vistazo a estos videos o lee nuestros tutoriales básicos.

Tabla de contenido

el editor de WordPress con un bloque de fondo, texto y un botón.
El editor de bloques de WordPress.com

Puedes usar el editor de WordPress para crear entradas y páginas con excelente contenido multimedia y para controlar su diseño con facilidad. No te preocupes por la alineación y la organización del texto, de las citas y de las imágenes. Ahora cada elemento de una entrada o página tiene su propio bloque para que puedas centrarte en crear contenido.

Si tu editor y el que se describe en esta guía no tienen el mismo aspecto, consulta esta información importante sobre los diferentes editores.


Elementos del editor de WordPress

El editor de WordPress se compone de tres áreas diferentes: el menú superior, los menús de la barra lateral y el área principal de contenido.

Menú superior del editor de WordPress

opciones de la parte superior del editor para añadir un bloque, publicar una entrada y abrir el menú de configuración.
Menú superior del editor de WordPress

Opciones del menú superior

un icono de signo +.

Añadir bloques: explora todos los bloques, patrones de bloques y bloques reutilizables disponibles.

un icono de lápiz

Modos – Herramientas te ofrece diferentes formas de seleccionar y editar bloques Para seleccionar, pulsa Escape. Para volver a la edición, pulsa Intro.

iconos de flecha apuntando a izquierda y derecha

Hacer y deshacer: te permite deshacer una acción o rehacer una acción previamente deshecha.

Icono de información con una I y un círculo alrededor

Detalles: el número de caracteres, palabras, títulos, párrafos y bloques del documento.

tres líneas horizontales paralelas

Esquema: una vista de lista de todos los bloques utilizados en la página. Útil para navegar a través de los diferentes bloques.

Antes de publicar tu página o entrada, podrás ver las siguientes opciones:

Guardar borrador: guarda un borrador de tu página o entrada
Vista previa: vista previa del aspecto de tu página/entrada con el tema aplicado.
Publicar: publica tu página/entrada.

Antes de publicar tu página o entrada, podrás ver las siguientes opciones:

Cambiar a borrador: anula la publicación de una página o entrada y la convierte en borrador.
Vista previa: vista previa del aspecto de tu página/entrada con el tema aplicado.
Actualizar: actualiza la página/entrada publicada con el nuevo contenido añadido.

un icono de configuración

Configuración: muestra/oculta el menú de ajustes de la página, el documento y el bloque en la barra lateral.

un icono con una A en medio.

Estilos globales: si utilizas un tema que admite estilos globales, esta opción te permite cambiar los estilos de fuente de todo tu sitio.

un icono verde y blanco de Jetpack.

Jetpack: te permite activar/desactivar los Me gusta y la opción de compartir en páginas y entradas específicas, previsualizar el contenido que comparte en redes y obtener el enlace corto de tu página o entrada.

icono de tres puntos verticales.

Opciones: abre el menú Ver opciones, el estilo del editor y las herramientas adicionales.

Menú de barra lateral del editor de WordPress

Los iconos de Configuración, Estilos globales y Jetpack del menú superior abren diferentes menús de la barra lateral.

📌

Si no puedes ver un menú de la barra lateral cuando estás en el Editor de bloques, haz clic en uno de los tres iconos del menú superior situados junto al botón Publicar/Actualizar.

Ajustes

El menú de la barra lateral Ajustes incluye los ajustes de la página/el documento:

Cuando haces clic en un bloque específico, el menú de la barra lateral Ajustes incluye configuraciones adicionales específicas para cada tipo de bloque.

el menú superior con el icono de ajustes activo.
Icono de ajustes

Estilos globales

La barra lateral Estilos globales te permite cambiar las fuentes predeterminadas que se utilizan para los títulos y las fuentes básicas de tu sitio.

el menú superior con el icono de Estilos globales activo.
Icono de estilos globales

Jetpack

El menú de la barra lateral Jetpack te permite:

el menú superior con el icono de Jetpack activo.
Icono de Jetpack

Área de contenido del editor de WordPress

En este tercer elemento del editor de WordPress es donde pasarás la mayor parte del tiempo. Esta es la sección principal del editor, desde donde añades bloques de contenido.

De este modo, el editor te facilita la experiencia de creación y de mantenimiento de tus páginas. Los bloques te permiten añadir y personalizar rápidamente varios elementos multimedia y visuales que antes solían requerir el uso de métodos complejos como códigos abreviados, código HTML personalizado e incrustaciones.

💡

También puedes empezar a escribir directamente y pensar en el diseño de la página más adelante (o directamente omitirlo)

Aquí puedes consultar una guía útil para utilizar el editor de WordPress como escritor/a o bloguero/a.


↑ Tabla de Contenido ↑

Añadir contenido a través de bloques

En el editor de WordPress, se utilizan bloques para crear contenido. Existe un bloque para cada tipo de elemento que desees añadir: texto, imágenes, video, sonido, columnas, espacios, saltos de página, botones de pago, calendarios y mucho más.


↑ Tabla de Contenido ↑

Añadir un bloque

Hay multitud de tipos de bloque  para elegir ordenados por categoría. Puedes editar o mover los bloques por separado y, a menudo, cada uno de ellos tiene su propia configuración de formato para que puedas controlar mejor su diseño y función.

una grabación en pantalla de los diferentes métodos para añadir nuevos bloques al editor de WordPress.
Adición de bloques nuevos

Hay muchas formas de añadir un bloque y elegir el tipo que necesitas.

💡

La manera más rápida de añadir un bloque es buscar el icono + en la pantalla. Cada vez que veas el icono +, podrás hacer clic en él para añadir un bloque.

También puedes empezar a escribir en un área en blanco y el bloque se definirá de forma predeterminada como un bloque de párrafo.

  1. Haz clic en el icono + de color negro junto a un bloque vacío.
  2. Haz clic en el icono + situado en la parte superior izquierda del editor. Esta opción es ideal para previsualizar diferentes estilos de bloques.
  3. En el bloque elegido, haz clic en la tecla Entrar para crear un nuevo bloque debajo.
  4. Haz clic en los tres puntos que hay justo encima de un bloque elegido y escoge si quieres añadir un bloque encima o debajo del actual.

Una vez que te hayas familiarizado con los nombres de los diferentes bloques, puedes añadir uno. Para ello, escribe una barra diagonal seguida del nombre del bloque. Por ejemplo, /image o /heading.

ejemplo de cómo usar el acceso directo / del teclado para buscar diferentes bloques.
Acceso directo para añadir un bloque

Visualización de los bloques más usados

Para habilitar la categoría de bloques más usados, sigue estos pasos:

  1. Haz clic en el icono de tres puntos situado en la esquina superior derecha de la pantalla del editor.
  2. Selecciona Preferencias.
  3. Marca la casilla Mostrar bloques más utilizados.
Mostrar bloques más utilizados

Cuando hayas seleccionado la opción de los bloques más utilizados, podrás explorar los bloques que más utilizas en la biblioteca de bloques.

Haz clic en el icono + en el menú superior para acceder a la biblioteca de bloques. Los bloques que más utilizas aparecerán en la parte superior de la biblioteca.

la biblioteca de bloques ampliada mostrando los bloques más utilizados.
Categoría de bloques más utilizados

↑ Tabla de Contenido ↑

Mover bloques

Para mover un bloque, haz clic y arrastra los seis puntos que aparecen en la barra de herramientas del bloque cuando haces clic en él. También puedes usar las flechas de arriba y abajo para mover un bloque una posición hacia arriba o hacia abajo.

Cómo mover bloques

↑ Tabla de Contenido ↑

Personalizar bloques

Cada bloque tiene su propia configuración. Para buscar los bloques, haz clic en un bloque y se mostrará una barra de herramientas en la parte superior de este. También verás opciones de configuración adicionales en la barra lateral que hay a la derecha del editor.

📌

Si no ves Ajustes del bloque, a la derecha del editor, haz clic en el icono Ajustes ⚙️(la rueda dentada) que hay al lado del botón Publicar/Actualizar para ampliar el menú de la barra lateral.

el icono de ajustes resaltado junto al botón Publicar.

Ejemplos de varias barras de herramientas de bloques

barra de herramientas de bloque de párrafo situada encima del bloque.
Barra de herramientas de bloque de párrafo
barra de herramientas de bloque de imagen situada encima del bloque.
Barra de herramientas de bloque de imagen
barra de herramientas de bloque de lista situada encima del bloque.
Barra de herramientas de bloque de lista

Ajustes del bloque: barra de herramientas

Haz clic en los tres puntos a la derecha de la barra de herramientas de bloque para ver las opciones adicionales presentes en la mayoría de los bloques.

  1. La opción Ocultar ajustes del bloque permite cerrar el menú de configuración.
  2. La opción Duplicar permite crear otro bloque con el mismo contenido en la misma página.
  3. La opción Insertar antes/después permite añadir un bloque nuevo antes o después del actual.
  4. La opción Editar como HTML permite transformar el bloque en su versión HTML para que puedas editar el código directamente. Al editarlo como HTML, esta opción cambia a Editar visualmente.
  5. La opción Añadir a los bloques reutilizables te permite crear un bloque que se pueda usar en otras páginas manteniendo el contenido y el estilo del bloque. Consulta más información.
  6. La opción Quitar bloque permite eliminar el bloque de tu página o entrada.
El menú de tres puntos (Más opciones) extendido mostrando las opciones de bloque adicionales.
Opciones de barra de herramientas de bloque adicionales

⚠️

No todos los códigos funcionan cuando editas como HTML. Si tu código está bien creado y no contiene errores, comprueba que aparezca en la lista de etiquetas HTML aprobadas y que no se trate de un código restringido, como JavaScript.

Ajustes del bloque: barra lateral

Los Ajustes del bloque, a la derecha del editor, ofrecen varias opciones en función del bloque que estés usando.

En la captura de pantalla de la derecha, el bloque activo es un párrafo y, por eso, hay opciones para cambiar el tamaño de la fuente, la fuente y el color de fondo y opciones avanzadas para crear saltos de página o añadir una clase CSS.

📌

Si no ves Ajustes del bloque, a la derecha del editor, haz clic en el icono Ajustes ⚙️(la rueda dentada) que hay al lado del botón Publicar/Actualizar para ampliar el menú de la barra lateral.

el icono Ajustes resaltado junto al botón Publicar.
La barra lateral Ajustes del bloque mostrando opciones del bloque de párrafo como Texto, Color y Configuración de AMP.
Los Ajustes del bloque de la barra lateral incluyen opciones adicionales especificas del bloque que se está editando.

↑ Tabla de Contenido ↑

Cambiar el tipo de bloque

¿Y si quieres cambiar un tipo de bloque? ¡No hay problema! Puedes transformar cada bloque en otro tipo de bloque similar o relacionado. Por ejemplo, puedes convertir un párrafo en un encabezado, una lista o una cita.

una grabación en pantalla mostrando la opción de la barra de herramientas del bloque para cambiar el tipo de bloque de un párrafo a una cita o un título.
Cambio de un tipo de bloque

↑ Tabla de Contenido ↑

Algunos bloques se anidan dentro de otros bloques (denominados bloques “principales”) y necesitas una forma sencilla de seleccionar esos últimos. 

Por ejemplo, tienes un bloque Columnas y quieres que ocupe la anchura total. Al hacer clic en una columna, no se te proporcionará esa opción. Sin embargo, si navegas hasta el bloque principal (el bloque Columnas), podrás cambiar el estilo de diseño del bloque Columnas.

Para seleccionar el bloque principal, coloca el ratón sobre el icono más a la izquierda de la barra de herramientas del bloque, como en esta captura de pantalla:

grabación en pantalla sobre cómo colocar el ratón sobre la opción del bloque principal en la barra de herramientas del bloque.

Esto puede resultar especialmente útil si dispones de texto dentro de un bloque de columna y tienes que seleccionarlo o si dispones de varios botones dentro de un bloque de botones y tienes que seleccionar el bloque de botones general.

También puedes utilizar el menú Detalles para navegar a través de los bloques que hayas añadido a tu página/entrada:

menú Detalles del menú superior extendido para mostrar la vista de lista de los bloques usados en la página o entrada.

El menú Detalles es una lista desplegable de todos los bloques que has insertado en tu página o entrada. Facilita la visualización de la estructura de tu página y la selección de un bloque ya creado en el que quieras trabajar.


Para acceder al menú Detalles, haz clic en el icono en forma de lista con viñetas diminutas con tres líneas horizontales. Se encuentra después de la estructura de contenido (icono de información), en la esquina superior izquierda del editor.

El menú Detalles resulta especialmente útil para seleccionar bloques a los que es difícil de acceder, como una columna individual dentro de un bloque Columnas o un bloque dentro de un bloque Grupo:

grabación en pantalla con el menú Detalles extendido donde se selecciona un bloque específico para activarlo.
Usa la herramienta de navegación de bloques para ir directamente a cualquier bloque de la página y editarlo.

↑ Tabla de Contenido ↑

Eliminar un bloque

Para eliminar un bloque, elígelo y haz clic en los tres puntos de la barra de herramientas que hay justo encima de este. Entre las opciones de configuración, verás la opción de eliminar el bloque.

menú de tres puntos de la barra de herramientas del bloque extendido para seleccionar la opción de Eliminar bloque resaltada.
Cómo eliminar un bloque

↑ Tabla de Contenido ↑

Patrones de bloque

Los patrones de bloques son una serie de bloques que puedes insertar en entradas y páginas. Son una forma sencilla de añadir contenido en patrones visualmente atractivos.

Por ejemplo, hay un patrón de bloque para insertar tres imágenes una al lado de la otra.

Para insertar un patrón de bloque:

  1. Haz clic en el icono + en el menú superior para añadir un nuevo bloque.
  2. Haz clic en la pestaña Patrones.
  3. Haz clic en el patrón que quieras insertar y se introducirá en el documento donde se coloque el cursor.
icono + del menú superior extendido y la opción Patrones seleccionada para mostrar los diferentes patrones de bloques disponibles.

Para obtener más información, consulta nuestra guía para patrones de bloque.


↑ Tabla de Contenido ↑

Previsualizar la página o entrada

Aunque el editor de bloques ofrece una representación visual de cómo se verá la página cuando se publique, puede haber pequeños cambios en el aspecto una vez que hayas aplicado el tema o la personalización del tema.

La opción Vista previa resaltada.
La opción Vista previa en el menú superior

La opción Vista previa carga la página en la que estás trabajando, junto con el tema y las personalizaciones guardadas del tema (como CSS personalizado).

Esta opción también te permite ver el aspecto de tu página o entrada en un dispositivo de escritorio, móvil o tableta. Si tienes un plan Business o superior de WordPress, también puedes previsualizar el aspecto de tu página en motores de búsqueda y redes sociales.

opciones de previsualización en equipos de escritorio, tabletas, móvil o redes sociales desde la opción Vista previa.
Vista previa en diferentes dispositivos

↑ Tabla de Contenido ↑

Configuración del documento

A la derecha del Editor de bloques, verás el menú Ajustes del documento, con el que puedes añadir etiquetas y categorías, elegir una imagen destacada, o ver y cambiar el estado de tu entrada, entre muchas otras cosas. Estas opciones se aplican a la página o a la entrada en su totalidad.

Haz clic en la flecha hacia abajo que hay al lado de cada encabezado en Ajustes del documento para editar las opciones correspondientes.

📌

Si no ves Ajustes del documento a la derecha del Editor de bloques, haz clic en el icono Ajustes (la rueda dentada) ⚙️ que hay en la parte superior derecha para abrir Ajustes del documento.

el icono Ajustes resaltado junto al botón Publicar.

↑ Tabla de Contenido ↑

Más opciones

Personaliza la experiencia de edición para que se ajuste a tus necesidades mediante los tres puntos que hay a la derecha del icono Ajustes.

Ver

Ofrece opciones sobre el lugar en el que aparecen las barras de herramientas de los bloques cuando se editan.

Editor

Por defecto, se accede al editor visual. Cambia al Editor de código para ver toda la página en código HTML.

No todos los códigos funcionan cuando editas como HTML. Si tu código está bien creado y no contiene errores, comprueba que aparezca en la lista de etiquetas HTML aprobadas y que no se trate de un código restringido, como JavaScript.

Herramientas

Gestiona los bloques reutilizables existentes, copia todo el contenido y pégalo en otra página o descubre más información sobre los accesos directos del teclado.

Opciones

Elige las opciones de configuración del documento que quieres que se muestren en la barra lateral.

el menú de tres puntos extendido en la barra de herramientas superior mostrando los ajustes de vista, editor, plugins y otros ajustes de visualización del editor de bloques.
Más opciones

↑ Tabla de Contenido ↑

Preguntas frecuentes

¿Cómo puedo editar código HTML en el Editor de WordPress?

Existe un bloque HTML personalizado que puedes añadir si quieres crear tu propio código HTML.

Puedes encontrar otras opciones para editar el código HTML en el editor de WordPress aquí.

No todos los códigos funcionan cuando editas como HTML. Si tu código está bien creado y no contiene errores, comprueba que aparezca en la lista de etiquetas HTML aprobadas y que no se trate de un código restringido, como JavaScript.

¿Cómo se verá mi contenido actual?

Si has pasado del editor clásico al editor de bloques, el contenido actual debe tener la misma apariencia que antes. Si editas una entrada o página existente en el nuevo editor, todo el contenido se colocará en un bloque clásico, que lo tratará de la misma forma que el editor anterior. Aquí tienes más información sobre la conversión a bloques.

¿Por qué mi contenido no se ve igual en el editor que en el sitio?

Es posible que veas ciertas diferencias entre tu contenido en el editor y en el sitio, y se debe en gran parte a la forma en que tu tema muestra los distintos elementos visuales. Algunos temas tienen estilos que permiten que el contenido en el editor sea más parecido al del front end del sitio, pero otros no. Si tu tema incluye una barra lateral, por ejemplo, no la verás en el editor, lo que podría afectar el ancho de tu contenido cuando se muestre en el front end del sitio.

¿Por qué algunas opciones de configuración están disponibles en algunos de mis sitios, pero no en otros?

Si tienes el Plan Business de WordPress.com en un sitio, es posible que dispongas de plugins para añadir bloques personalizados a tu editor. Pero estos no estarán disponibles en otro sitio que no tenga dicho plugin.

Ciertas opciones de configuración de los bloques (como el ancho o ancho completo) tienen que ser compatibles con tu tema. Si bien algunos bloques se muestran en diferentes sitios, la configuración específica que puedes aplicarles puede variar en función del tema que tengas activo.

¿Podré seguir usando el editor anterior?

También puedes utilizar el antiguo editor, también conocido como el editor clásico, desde el editor de bloques gracias al bloque Clásico. Aquí te explicamos cómo utilizar el bloque Clásico.

¿Los shortcodes todavía funcionan?

Sí. El editor incluye un bloque Shortcode que puedes usar para los shortcodes, tal como hacías hasta ahora. Próximamente, muchos shortcodes se convertirán en bloques por sí mismos.

¿Se trata de un editor accesible?

Nuestro objetivo es que el editor de WordPress sea tan accesible como los editores anteriores, o incluso más. Queremos que todo el mundo pueda usarlo. Los estándares de código y accesibilidad de WordPress (WordPress Accessibility Coding Standards) establecen que “Todo el código nuevo o actualizado que se utilice en WordPress debe cumplir los requisitos del nivel AA de las directrices WCAG 2.0.“. Y esta no será una excepción. Si tienes algún problema de accesibilidad, ponte en contacto con nosotros.

¿Tengo que usar un tema en específico con el nuevo editor?

No. El nuevo editor de bloques funcionará con todos los temas. Sin embargo, es posible que solo algunos temas sean compatibles con ciertas funciones de diseño específicas (como el contenido ancho o de ancho completo).

¿Dónde puedo ver una lista completa de atajos de teclado?

Dispones de una lista completa de atajos de teclado en el Manual de WordPress.

¿Cómo puedo ver elementos como el recuento y la comprobación ortográfica?

Para ver el número de palabras utilizadas en tu página o entrada, haz clic en el icono de información (la letra “i” con un círculo alrededor), en la parte superior izquierda de la pantalla. Esta opción solo puede visualizarse en ordenadores, no en dispositivos móviles.

No existe la comprobación ortográfica y gramatical porque todos los navegadores modernos incluyen actualmente la comprobación ortográfica de forma predeterminada. Puedes confiar en esa función para corregir los errores ortográficos en las entradas.

¿Te ha resultado útil esta guía?