Full Site Editing (FSE): La revolución del diseño web en WordPress


El Full Site Editing en WordPress ha revolucionado la forma de diseñar y gestionar sitios web en esta plataforma. Con esta nueva función, se puede personalizar la apariencia de sus sitios de manera sencilla, sin necesidad de conocimientos técnicos, ni conocimientos avanzados de CSS. Los bloques y las plantillas permiten modificar la estructura y los estilos globales.

Sin embargo, este enfoque también presenta desafíos, como el cambio de mentalidad en el desarrollo de temas y la gestión de expectativas. El Full Site Editing tiene el potencial de mejorar la experiencia de diseño y cambiar la manera en que se administran los sitios web en WordPress.

¿Qué es el Full Site Editing?

El Full Site Editing es una innovadora funcionalidad que forma parte de la segunda fase del proyecto Gutenberg en WordPress. En la primera fase ya se introdujo la maquetación con bloques semánticos y ahora van un paso más allá, con el que la primera fase cobra más sentido.

Esta herramienta revolucionaria permite a los usuarios modificar la apariencia y personalizar sus sitios web de manera intuitiva y sin necesidad de conocimientos técnicos avanzados ni de tener que depender de otros plugins o builder como el conocido Elementor. A través del editor de sitios, se pueden realizar cambios en la estructura de las páginas, estilos globales y configuraciones predeterminadas utilizando bloques y plantillas.

Definición de Full Site Editing

El Full Site Editing se refiere al proceso de diseño y administración de sitios web en WordPress, donde se puede personalizar la apariencia de manera global, desde la estructura de las páginas hasta los estilos aplicados. Puedes realizar modificaciones en tiempo real, visualizando directamente cómo quedará su sitio web sin tener que recurrir a desarrolladores front-end con conocimientos más avanzados en CSS o a builders externos que pueden complicar en exceso la complejidad del diseño.

Importancia del Full Site Editing en el diseño web

El Full Site Editing representa un avance significativo en el diseño web dentro del ecosistema WordPress, permitiendo a los usuarios tener un mayor control sobre la apariencia visual de sus sitios. Anteriormente, los cambios de diseño requerían la intervención de expertos en desarrollo, lo que limitaba la capacidad de personalización para muchos usuarios.

Con el Full Site Editing, se brinda a los usuarios la libertad de experimentar y diseñar sus sitios web de acuerdo a sus necesidades y preferencias, sin depender de terceros. Hay que tener en cuenta que estamos hablando de diseño, por lo que para temas de ampliar funcionalidades se seguirá requiriendo de un profesional con conocimientos técnicos. Si es tu caso, puedes escribirme.

Ventajas y beneficios del Full Site Editing en WordPress

  • Simplifica el proceso de diseño web al permitir modificar la apariencia y estructura del sitio de manera visual y en tiempo real.
  • No se requieren conocimientos técnicos avanzados para realizar cambios en el diseño.
  • Mayor flexibilidad y libertad para personalizar el sitio web según las necesidades y preferencias individuales.
  • Aumenta la productividad al agilizar el proceso de diseño y evitar la necesidad de realizar cambios a través de código.
  • Permite a los usuarios crear diseños únicos y personalizados sin depender de temas predefinidos.
  • Mayor facilidad para crear sitios “bonitos” sin necesidad de utilizar un builder de terceros como Elementor, Divi o Beaver Builder.
  • Mejor personalización de las plantillas utilizadas para los Custom Post Types (CPT).
  • Posibilidad de Importar/Exportar diseños de manera nativa, lo que permite una reutilización de los componentes más eficiente.

Fundamentos del Full Site Editing

El Full Site Editing se basa en tres elementos fundamentales: el editor de sitios, los bloques y plantillas, y el uso de block themes y el archivo theme.json. Estos elementos son clave para permitir a los usuarios diseñar y personalizar sus sitios web de forma intuitiva y sin requerir conocimientos técnicos avanzados.

Editor de sitios y su funcionamiento

El editor de sitios es la herramienta central del Full Site Editing. Permite a los usuarios realizar cambios en la estructura y apariencia de sus sitios web de manera visual, utilizando bloques para crear y modificar contenido. Este editor se integra directamente en WordPress, lo que facilita su utilización y acceso para todos los usuarios.

Bloques y plantillas en el Full Site Editing

Los bloques son los elementos básicos de construcción en el Full Site Editing. Permiten a los usuarios agregar contenido y funcionalidad a sus sitios web de manera modular. Pueden incluir desde párrafos de texto hasta imágenes, formularios, galerías y mucho más. Ya se introdujeron en la primera fase de Gutemberg y son ampliables mediante plugins que incluyen bloques más avanzados como Kadence o Spectra.

Las plantillas, por otro lado, son conjuntos prediseñados de bloques que pueden ser utilizados como base para la creación de páginas o secciones completas del sitio web. También hay temas o plugins de WordPress que añaden nuevas plantillas. Además, puedes crear las tuyas propias para reutilizarlas en la misma web o en otras distintas.

Uso de block themes y archivo theme.json

Los block themes son temas de WordPress diseñados específicamente para aprovechar al máximo las capacidades del Full Site Editing. Estos temas están construidos en torno a los bloques y permiten una personalización más profunda del sitio web. En el buscador de la administración de WordPress, puedes encontrar temas gratuitos de este tipo.

El archivo theme.json es una configuración especial que permite definir reglas de estilo y configuraciones predeterminadas para los bloques y plantillas, asegurando una experiencia de diseño más consistente. Este archivo que permite personalizar los estilos globales de un tema de WordPress, especialmente los temas de bloques o FSE (Full Site Editing). 

Con este archivo, puedes definir y aplicar aspectos como la paleta de colores, las fuentes, el espaciado, los estilos de los bloques y más, sin necesidad de usar código. También puedes asignar plantillas y partes de plantilla para los temas FSE. El fichero theme.json se introdujo en WordPress 5.9 y se basa en un lenguaje de etiquetas llamado JSON. Hay herramientas que te pueden ayudar a generar y personalizar este archivo de forma más fácil.

Desafíos y consideraciones del Full Site Editing

El Full Site Editing en WordPress plantea diversos desafíos y consideraciones que los desarrolladores y usuarios deben tener en cuenta para aprovechar al máximo esta nueva funcionalidad. A continuación, se abordan tres aspectos clave relacionados con el Full Site Editing.

Cambio de mentalidad en el desarrollo de temas

El Full Site Editing requiere un cambio de mentalidad en el desarrollo de temas en WordPress. Los desarrolladores deben adaptarse a la idea de que el diseño y la personalización del sitio se realizan a través de bloques y plantillas en lugar de depender únicamente de la programación tradicional.

Es fundamental comprender cómo aprovechar al máximo los block themes y el archivo theme.json para definir reglas de estilo y configuraciones predeterminadas, con el objetivo de lograr una experiencia de diseño más consistente.

Gestión de expectativas sobre las capacidades actuales

Es importante tener en cuenta que el Full Site Editing, si bien ofrece nuevas oportunidades de diseño y personalización, aún está en desarrollo y puede presentar limitaciones en comparación con métodos de desarrollo más tradicionales.

Los usuarios y desarrolladores deben gestionar sus expectativas sobre las capacidades actuales del Full Site Editing, comprendiendo que algunas funcionalidades complejas pueden requerir soluciones alternativas o complementarias.

Viabilidad del Full Site Editing para producción

Si bien el Full Site Editing ofrece una forma más intuitiva y accesible de diseñar y personalizar sitios web en WordPress, es importante evaluar su viabilidad para entornos de producción. Al tratarse aún de una funcionalidad en desarrollo, es recomendable realizar pruebas exhaustivas y considerar los posibles impactos en la estabilidad y rendimiento del sitio antes de implementar el Full Site Editing en entornos en vivo. Es necesario valorar las ventajas y beneficios del Full Site Editing con la necesidad de mantener la funcionalidad y eficiencia del sitio web.

Personalización y diseño en el Full Site Editing

Modificación de la apariencia de los sitios web

El Full Site Editing proporciona a los usuarios la capacidad de modificar la apariencia de sus sitios web de manera sencilla e intuitiva. Mediante la edición de bloques y plantillas, es posible realizar cambios en la estructura y el diseño de las páginas, permitiendo una personalización completa.

Cambio de estilos globales y estructura de las páginas

Con el Full Site Editing, también es posible realizar cambios en los estilos globales de un sitio web. Puedes ajustar colores, fuentes, tamaños de fuente y otros aspectos visuales, lo que te permite adaptar el diseño a tus necesidades y preferencias. Además, se puede modificar la estructura de las páginas, añadiendo o eliminando secciones y bloques según sea necesario.

Creación de bloques personalizados y opciones de configuración

Una de las ventajas principales del Full Site Editing es la posibilidad de crear bloques personalizados con opciones de configuración. Esto permite adaptar completamente el contenido y la funcionalidad de tu sitio web. Mediante la creación de bloques a medida, se pueden añadir elementos interactivos, como formularios o galerías de imágenes, brindando una experiencia única para los visitantes del sitio.

Es impresionante cómo el Full Site Editing en WordPress ha cambiado la forma en que los usuarios pueden personalizar y diseñar sus sitios web. Con esta nueva funcionalidad, se brinda una verdadera libertad creativa y se elimina la dependencia de conocimientos técnicos o la ayuda de desarrolladores front-end. Sin duda, esta capacidad de personalización y diseño aumenta la versatilidad de WordPress como plataforma para la creación de sitios web.

Impacto del Full Site Editing en la gestión y diseño de sitios web

Potencial del Full Site Editing para mejorar la experiencia de diseño

El Full Site Editing ha abierto nuevas posibilidades para personalizar y diseñar sitios web en WordPress. Con esta funcionalidad, los usuarios pueden enfocarse en la estética y la apariencia visual de sus sitios sin depender de desarrolladores front-end. Esto reduce la barrera de entrada para aquellos que deseen crear y administrar sus propios sitios web con una mayor libertad creativa.

Al permitir modificar la estructura de las páginas y los estilos globales a través de bloques y plantillas, el Full Site Editing brinda a los usuarios un control completo sobre la apariencia de su sitio, mejorando así la experiencia de diseño de manera significativa.

Cambios en la forma de diseñar y administrar sitios web en WordPress

El Full Site Editing ha revolucionado la forma en que se diseñan y administran los sitios web en WordPress. Hasta ahora, el proceso requería conocimientos técnicos y habilidades de desarrollo front-end, lo que limitaba la participación de muchos usuarios en la personalización y diseño de sus sitios. Sin embargo, con esta nueva funcionalidad, los usuarios pueden realizar cambios sin necesidad de tener conocimientos avanzados de programación. Esto significa que más personas pueden involucrarse en el diseño y gestión de sus propios sitios web, lo que democratiza el proceso y promueve la creatividad.

Futuro del Full Site Editing y su influencia en el desarrollo web

El Full Site Editing tiene el potencial de transformar la forma en que se desarrollan los sitios web en el futuro. A medida que más personas adopten esta funcionalidad y se familiaricen con su uso, es probable que veamos una mayor demanda de temas compatibles con el Full Site Editing y una mayor integración de esta herramienta en el ecosistema de WordPress.

Esto no solo facilitará la personalización de los sitios web, sino que también impulsará la evolución del diseño web en general. A medida que el Full Site Editing continúe desarrollándose y mejorando, es emocionante pensar en las infinitas posibilidades que ofrecerá para la creación de sitios web visualmente impactantes y altamente personalizados.

  • Mayor libertad creativa en la personalización y diseño de sitios web en WordPress.
  • Democratización del proceso de diseño y gestión de sitios web al no requerir conocimientos técnicos avanzados.
  • Promoción de la participación de más personas en el diseño de sus propios sitios web.
  • Mayor demanda de temas compatibles con el Full Site Editing.
  • Impulso en la evolución del diseño web en general.
  • Posibilidades infinitas para la creación de sitios web altamente personalizados y visualmente impactantes.

A medida que el Full Site Editing continúa evolucionando en WordPress, su impacto en el diseño y gestión de sitios web es cada vez más evidente. Esta nueva forma de personalizar y editar los sitios web ofrece posibilidades emocionantes para los usuarios, permitiéndoles tener un mayor control sobre la apariencia y funcionalidad de sus páginas.

El poder de la personalización

Una de las principales ventajas del Full Site Editing es la capacidad de personalizar el diseño y los estilos de un sitio web de manera más intuitiva. Los usuarios pueden acceder y modificar directamente los elementos visuales, como los títulos, las fuentes, los colores y los diseños de los bloques, sin necesidad de conocimientos técnicos profundos.

Esto no solo permite a los usuarios adaptar su sitio web para que se ajuste a su marca y estilo visual, sino que también brinda la posibilidad de crear experiencias únicas y atractivas para los visitantes.

Facilidad de uso y versatilidad

Otra ventaja es que el FSE WordPress simplifica el proceso de diseño y personalización, ya que se basa en bloques y plantillas. Los usuarios pueden arrastrar y soltar los bloques para construir las páginas y modificarlas fácilmente según sea necesario. Esto facilita el flujo de trabajo tanto para los diseñadores web como para los propietarios de sitios, ya que no necesitan depender de desarrolladores front-end para realizar cambios.

Además, el Full Site Editing brinda una gran versatilidad en cuanto a la creación de bloques personalizados y opciones de configuración. Los usuarios pueden definir sus propios bloques con funcionalidades específicas y configurar opciones de personalización avanzadas, lo que les permite adaptar su sitio web a sus necesidades exactas.

Cómo utilizar un tema de bloques con Full Site Editing

Para seleccionar un tema compatible con Full Site Editing, puedes ir al menú Apariencia > Temas > Añadir nuevo tema, como harías para añadir cualquier nuevo tema del repositorio de WordPress. La diferencia es que, en la barra superior, deberás seleccionar Temas de bloques para que sólo te aparezcan el tipo de temas que te interesa.

Cómo encontrar temas de bloques en Wordpress

Un ejemplo de este tipo de temas es el conocido Twenty Twenty-Four, desarrollado por Wordpress.org. Quizás no sea el más avanzado o personalizable, pero te puede servir como punto de partida para probar esta nueva forma de personalizar los diseños de WordPress.

El primer cambio que notarás será en el menú de administración de WordPress. Habrá aparecido la opción Apariencia > Editor.

Apariencia de la nueva opción de menú para temas de bloques en WordPress

Una vez dentro del editor, encontramos las siguientes opciones para empezar a personalizar.

  • Navegación. Aquí se definen los menús de la web. Tanto el menú de la cabecera como otros posibles menús en el pie de página, en la barra lateral o en cualquier otro punto donde definamos que aparezca un bloque de tipo Navegación.
  • Estilos. Cada tema de bloques puede traer definidos un conjunto de estilos por defecto, cada uno con sus colores y tipografías. Desde aquí podemos seleccionar de qué estilo queremos partir.
  • Páginas. Para personalizar cada página en particular, incluida la página de inicio de la web.
  • Plantillas. Aquí se definen las plantillas que utilizarán los tipos de página que se repiten varias veces a lo largo de la web, como pueden ser las páginas de archivos o las de cada entrada. Lo bueno es que se pueden distinguir por Custom Post Type (CPT) o dar un formato a una única entrada en particular.
  • Patrones. Se puede definir componentes compuestos por uno o varios bloques y hacerlos globales, de forma que sean muy fáciles de reutilizar o replicar en varios sitios a lo largo de la web.

Recomendaciones para aprovechar al máximo el Full Site Editing

Familiarízate con los block themes y el archivo theme.json

Para aprovechar al máximo las capacidades del Full Site Editing, es importante comprender cómo funcionan los block themes y el archivo theme.json. Estos elementos clave permiten a los desarrolladores definir reglas de estilo y configuraciones predeterminadas, lo que garantiza una experiencia de diseño más consistente. Investiga, experimenta y aprende a utilizar estas herramientas para optimizar tus diseños.

Actualiza tu mentalidad y procesos de desarrollo temático

El Full Site Editing representa un cambio significativo en la forma en que se desarrollan los temas en WordPress. Es fundamental actualizar la mentalidad y los procesos de desarrollo para adaptarse a esta nueva metodología. En lugar de enfocarse solo en el aspecto del tema, se debe considerar cómo se estructuran los bloques y cómo interactúan entre sí. Esto requiere una comprensión más profunda de los bloques y una visión global del diseño del sitio.

Gestiona las expectativas y pruebas

Es importante reconocer que, a pesar de las mejoras y oportunidades que brinda el Full Site Editing, aún existen limitaciones y desafíos por enfrentar. Es necesario gestionar las expectativas de los usuarios y realizar pruebas exhaustivas para comprender las capacidades y limitaciones de esta nueva funcionalidad. Esto permitirá ofrecer una experiencia de usuario sólida y evitar frustraciones innecesarias.


Deja un comentario

Información sobre protección de datos

Vicente SG te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Vicente Sancho Guijarro (Vicente SG) como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Banahosting.com (proveedor de hosting de Vicente SG) dentro de la UE. Ver política de privacidad de Banahosting.com. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected] así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://vicentesg.com, así como consultar mi política de privacidad.

Logo mínimo de Vicente Sancho
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.