Editor del sitio

El Editor del sitio te permite diseñar todo el sitio, incluidos el encabezado, el pie de página y todo lo que hay entre ellos, con bloques. Te ofrece un mayor control sobre el aspecto de tu sitio. 

El Editor del sitio está disponible únicamente cuando instalas y activas un tema de bloques en tu sitio.

Cómo acceder al Editor del sitio

Para trabajar con el Editor del sitio, necesitas utilizar un tema de bloques en tu sitio. Un tema de bloques es un tema que utiliza bloques para todas las partes de un sitio, incluidos los menús de navegación, el encabezado, el contenido y el pie de página del sitio. 

Todos los bloques disponibles en el Editor de bloques de WordPress pueden utilizarse en el Editor del sitio. Hay un conjunto de bloques llamados bloques de tema creados específicamente para el Editor del sitio.

Para encontrar temas de bloques, desde el escritorio de WordPress, ve a Apariencia > Temas y haz clic en Añadir nuevo. En la página Añadir temas, selecciona Temas de bloques para encontrar la lista creciente de temas de bloques en el directorio de temas de WordPress.

Una vez que hayas instalado y activado un tema de bloques en tu sitio, ve a Apariencia > Editor para abrir el Editor del sitio.

Qué puedes hacer en el Editor del sitio

Una vez que entres en el Editor del sitio, verás cinco elementos de menú.

• Navegación: te permite explorar tus menús y realizar cambios básicos.
• Estilos: proporciona acceso directo para editar las variaciones de estilo de tu sitio’s.
• Páginas: ahora puedes editar el contenido de tus páginas dentro del propio Editor del sitio.
• Plantillas: revisa los diferentes diseños predeterminados para las distintas secciones de tu sitio, así como las páginas personalizadas (resultados de búsqueda, 404, etc.).
• Patrones: aquí puedes gestionar tus patrones sincronizados y partes de plantilla.

También verás un icono de una lupa. Haz clic en él para acceder a la Paleta de comandos.

A continuación se muestra una descripción general de las diferentes secciones del Editor del sitio.

El espacio de trabajo del Editor del sitio

El Editor del sitio carga la página de inicio de tu sitio (según lo que hayas configurado en los Ajustes de lectura) para comenzar a editar.

El menú superior del Editor del sitio incluye las siguientes opciones:

1. El icono del sitio (o el icono W, si no se ha establecido ningún icono del sitio): vuelve al escritorio o cambia a otra sección del Editor del sitio: Navegación, Estilos, Páginas, Plantillas o Patrones. Si eliges volver al escritorio, se te pedirá que guardes los cambios o que salgas del Editor del sitio sin guardar los cambios.

2. El botón + del insertador de bloques: añade un nuevo bloque, patrón de bloques, contenido multimedia o patrón sincronizado (si el sitio tiene patrones sincronizados) al Editor del sitio.

3. Herramientas: cambia entre editar un bloque y seleccionar un bloque. Elige la herramienta Seleccionar (o pulsa la tecla Escape en tu teclado) para seleccionar bloques individuales. Una vez seleccionado un bloque, pulsa la tecla Enter en tu teclado para volver a editar.

4. Deshacer: deshace la acción más reciente realizada.
5. Rehacer: rehace una acción que hayas revertido mediante el botón Deshacer.
6. Vista de lista: muestra una lista de todos los bloques que hay en la página y permite navegar fácilmente entre ellos. Es útil para ver la estructura de la página y editar, mover y eliminar bloques.
7. Paleta de comandos: haz clic aquí para acceder rápidamente a todo el contenido, las plantillas y los patrones de tu sitio, así como para ejecutar otras acciones (ajustes, nueva página, etc.).

8. Guardar: guarda los cambios que hayas realizado en el Editor del sitio.
   • Cuando haces clic en el botón Guardar , verás una lista de todos los patrones sincronizados, menús de navegación, plantillas y partes de plantilla en los que hayas realizado cambios.
   • Puedes elegir guardar todos o solo algunos de ellos.
   • Ten en cuenta que algunos cambios (como los cambios en las plantillas de encabezado y pie de página) se aplicarán a todas las páginas de tu sitio que utilicen esas plantillas, y no solo a la página en la que estabas trabajando.

9. Ajustes: muestra u oculta el menú lateral de Ajustes de plantilla y de bloque.

10. Estilos: explora las variaciones de estilo disponibles para el tema que tienes, establece la tipografía, las paletas de colores y el diseño para todo el sitio, o personaliza la apariencia de bloques específicos para todo el sitio.
11. Más opciones: haz clic en el icono de los tres puntos verticales para abrir ajustes y herramientas adicionales.

Mostrar la barra de herramientas superior: muestra u oculta la barra de herramientas superior del editor. Al activar esta opción, las barras de herramientas de los bloques se fijan en la parte superior del Editor de bloques de WordPress (justo debajo de la barra de herramientas superior) en lugar de aparecer directamente encima del bloque.

Modo de foco: todos los bloques aparecen atenuados excepto aquel en el que estás trabajando, para que puedas concentrarte en un solo bloque a la vez.

Sin distracciones: cuando se activa esta opción, se ocultan todas las partes no esenciales de la interfaz para ofrecer una experiencia de edición más inmersiva.

Editor: de forma predeterminada, estarás en el Editor visual. Cambia al Editor de código para ver toda la página en el editor de código HTML.

Plugins: aquí puedes cambiar entre Ajustes y Estilos en la barra lateral del Editor del sitio.

Herramientas: aquí puedes descargar tu tema con las plantillas y estilos actualizados (Exportar), consultar los atajos de teclado, visitar la guía de bienvenida del Editor del sitio, copiar todos los bloques o ver artículos de soporte adicionales.

Preferencias: utiliza el menú Preferencias para personalizar la experiencia de edición y cambiar la forma en que interactúas con los bloques.

Cómo utilizar el Editor del sitio

Para editar los estilos del sitio

Puedes utilizar el Editor del sitio para personalizar los estilos de todo el sitio web y de los bloques. Los ajustes de estilos están disponibles independientemente de la plantilla o parte de plantilla que estés editando. 

• Ve a Apariencia > Editor.
• Haz clic en el elemento de menú Estilos o en el icono situado junto a la barra lateral de ajustes del bloque.

En la sección Estilos, puedes explorar las variaciones de estilo disponibles para el tema que tienes, cambiar las paletas de colores y la tipografía, y modificar el diseño de todo el sitio, así como cambiar la apariencia de los bloques, lo que también se aplicará a todo el sitio.

Para revisar tus revisiones de estilo o restablecer completamente los cambios que hayas realizado, haz clic en el icono del menú de tres puntos en la esquina derecha y selecciona cualquiera de las opciones.

Obtén más información sobre los estilos en este artículo de soporte: Descripción general de los estilos.

Para personalizar el diseño del sitio

Puedes utilizar el Editor del sitio para construir la estructura y el diseño de todo tu sitio mediante bloques. Por ejemplo, áreas como los encabezados, los pies de página y la apariencia estructural de las entradas y páginas de tu sitio. 

Todos los bloques disponibles en el Editor de bloques de WordPress pueden utilizarse en el Editor del sitio. Hay un conjunto de bloques llamados bloques de tema creados específicamente para el Editor del sitio.

Ejemplos: el bloque de bucle de consulta te permite personalizar el aspecto y el estilo del diseño de tus entradas; el bloque de navegación te permite personalizar el menú de navegación del sitio; y el bloque de título del sitio ayuda a personalizar el título del sitio, entre otras cosas.

Consulta la lista completa de bloques de tema.

Ejemplo – Cómo personalizar Twenty Twenty-Three mediante el Editor del sitio

Twenty Twenty-Three admite el Editor del sitio y puede personalizarse mediante él. Como ejemplo, vamos a eliminar el espacio de la parte superior de la página de inicio de Twenty Twenty-Three. Para ello, elimina el relleno de la parte inferior de la parte de plantilla del encabezado y el relleno de la parte superior del área de contenido.

Primero, elimina el relleno inferior de las partes de plantilla del encabezado.

1. Desde la pantalla de administración, selecciona Apariencia > Editor.
2. Selecciona Patrones > Partes de plantilla > Encabezado > Encabezado y haz clic en el icono del lápiz para editarlo.
3. Selecciona el bloque Grupo > Fila. Utiliza la navegación de bloques inferior.
4. En los ajustes del bloque, haz clic en Estilos.

5. Desplázate hasta Relleno > Inferior. El valor actual es 2.
6. Establécelo en 0.
7. Guarda las partes de plantilla.

A continuación, elimina el relleno superior del área de contenido.

8. Vuelve al Editor del sitio.
9. Selecciona Plantillas > Inicio y haz clic en el icono del lápiz para editarla.
10. Selecciona el bloque Grupo superior. Utiliza la navegación de bloques inferior.
11. En los ajustes del bloque, haz clic en Estilos.

12. Desplázate hasta Relleno > Superior. El valor actual es 3.
13. Establécelo en 0.
14. Guarda la plantilla.

Para explorar las plantillas y las partes de plantilla

Desde el Editor del sitio puedes explorar fácilmente las plantillas y las partes de plantilla disponibles para tu sitio.

• Ve a Apariencia > Editor para abrir el Editor del sitio. Esto te llevará a una vista en la que podrás elegir explorar tus plantillas o partes de plantilla.
• Haz clic en Plantillas para previsualizar la lista de plantillas disponibles para tu sitio.
• Haz clic en Patrones para previsualizar la lista de partes de plantilla.

Para gestionar las plantillas del sitio

WordPress utiliza plantillas para crear el diseño y la estructura de tipos de página específicos de tu sitio. El Editor del sitio muestra las opciones de plantilla que puedes añadir a tu sitio y te permite crear plantillas personalizadas mediante el Editor de plantillas.

Desde Apariencia > Editor, se te mostrará una vista que incluye una barra lateral con tu lista de plantillas y patrones, incluida la lista de partes de plantilla.

Obtén más información sobre las plantillas en este artículo de soporte: Editor de plantillas.

Para gestionar las partes de plantilla

Una parte de plantilla es un bloque para gestionar las áreas globales repetitivas del sitio, como el encabezado, el pie de página, la barra lateral, etc. Su objetivo principal es definir la estructura del sitio y pueden reutilizarse. También puedes crear partes de plantilla personalizadas que se pueden reutilizar en las plantillas.

Desde Apariencia > Editor, haz clic en la opción Patrones. Desde Todas las partes de plantilla, puedes acceder a ellas.

Obtén más información sobre las partes de plantilla en este artículo de soporte: Parte de plantilla.

Para gestionar páginas

Desde la versión 6.3, es posible gestionar, editar y crear páginas mediante el Editor del sitio, en la sección “Páginas”.

Obtén más información sobre la gestión de páginas mediante el Editor del sitio en este artículo de soporte: Páginas del Editor del sitio

Cómo volver al escritorio

Para volver a tu escritorio, haz clic en el icono de WordPress (o en el icono del sitio, si has establecido uno) para abrir la navegación izquierda del Editor del sitio. Selecciona < para volver a tu escritorio de WordPress. Se te pedirá que guardes los cambios que hayas realizado en el Editor del sitio antes de salir.

Cómo exportar plantillas y estilos

Puedes exportar tu tema con los cambios que hayas realizado en el Editor del sitio, incluidas las plantillas, las partes de plantilla y los ajustes de estilo, de forma similar a la opción Herramientas > Exportar.

• Abre el Editor del sitio yendo a Apariencia > Editor.
• Selecciona el icono de los tres puntos verticales situado junto a la opción de ajustes de Estilos.
• En Herramientas, selecciona Exportar. Esto iniciará el proceso de exportación y recibirás un archivo zip descargado de tu tema con las plantillas y las partes de plantilla incluidas.

Herramientas útiles al usar el Editor del sitio

Las siguientes herramientas son útiles al usar el Editor del sitio.

La paleta de comandos

La paleta de comandos te ofrece una forma rápida de navegar por el contenido de tu sitio y ejecutar distintas acciones, como crear nuevas entradas/páginas, activar o desactivar preferencias y acceder a tus ajustes de estilos y CSS personalizado.

Puedes abrir la paleta de comandos en la vista del sitio, en la barra lateral, haciendo clic en el icono de búsqueda y. En la vista de edición, la paleta de comandos está en la barra de título superior. También puedes usar el atajo de teclado Cmd+k en Mac o Ctrl+k en Windows

Obtén más información sobre la paleta de comandos en este artículo de soporte: Paleta de comandos del Editor del sitio.

Vista de lista

La vista de lista te ayuda a navegar por diseños de bloques complejos y estructuras de bloques anidados. Puedes seleccionar exactamente el bloque que necesitas y obtener una vista general rápida del diseño de bloques de la página en la que estás trabajando. Puedes seleccionar fácilmente varios bloques y editarlos, moverlos o agruparlos.

Obtén más información sobre la vista de lista en este artículo de soporte:  Vista de lista.

Patrones de bloques

Los patrones de bloques son una colección de bloques predefinidos que puedes insertar en entradas y páginas. Después puedes personalizarlos más. WordPress incluye un conjunto de patrones de bloques estándar. También puedes encontrar patrones de bloques incluidos con los temas de bloques.

Obtén más información sobre los patrones de bloques en este artículo de soporte: Patrón de bloques.

Copiar y pegar estilos

Con WordPress 6.2, se añadió una nueva opción que permite copiar y pegar estilos de bloques, lo que facilita reutilizar los diseños que hayas creado. Puedes encontrarla en el menú de tres puntos de cualquier bloque y su finalidad es copiar y pegar entre bloques del mismo tipo:

Aplicar cambios de estilo globalmente

Si te sientes más cómodo usando opciones avanzadas al crear un diseño o personalizar bloques individuales, desde WordPress 6.2 puedes tomar los cambios realizados en un bloque individual y aplicarlos a todos los bloques del mismo tipo. Por ejemplo, podrías aplicar el diseño de un solo bloque individual a todos los bloques de tu sitio mediante una nueva opción en la sección Avanzado de los ajustes del bloque.

Cambiar el tamaño de la vista previa del Editor del sitio

Cuando estás en el Editor del sitio, es posible que quieras cambiar la vista previa de la plantilla o parte de plantilla que estás viendo. Puedes hacerlo seleccionando los controles de la barra lateral gris oscuro y moviéndola a tu gusto.

Enlaces de recursos

• Guía adicional para usar el Editor del sitio
• Diseño de sitios sencillo y edición completa del sitio
• Introducción al Editor del sitio y al Editor de plantillas