Edición completa del sitio de WordPress: una guía para principiantes

La edición completa del sitio (FSE) es la novedad más reciente en WordPress. Aunque ha habido temas premium que utilizan esta tecnología emergente durante varios años, finalmente se ha convertido en la corriente principal gracias a la adopción de Gutenberg en 2018. En esta publicación, le daremos la información más detallada sobre qué es la edición completa del sitio de WordPress, en qué se basa y cómo usarla. Hagámoslo.

¿Qué es la edición completa del sitio de WordPress?

En años pasados, WordPress ha tenido una estructura muy distinta. Usaría el Editor de WordPress para agregar contenido a publicaciones y páginas, luego instalaría complementos para una funcionalidad adicional. Los archivos principales de WordPress eran responsables de los encabezados, pies de página, áreas de contenido, barras laterales y otros elementos. En los últimos años, la edición completa del sitio de WordPress ha cambiado todo eso. Basado en bloques, la edición completa del sitio hace que sea mucho más posible editar todos los aspectos de su sitio de WordPress. Puede crear encabezados y pies de página personalizados y crear contenido personalizado prácticamente en cualquier lugar. La edición completa del sitio también se extiende más allá del núcleo de WordPress con creadores de páginas como Divi que lo llevan a un nivel completamente nuevo de capacidades de diseño.

¿Beneficios de la edición completa del sitio en WordPress?

Uno de los mayores beneficios de la edición completa del sitio es la capacidad de personalizar su sitio de la forma que desee de arriba a abajo. Por ejemplo, ahora puede crear y editar plantillas de publicaciones y páginas, encabezados y pies de página, todo en la interfaz. Además, puede agregar estilos globales a su sitio y bloques y crear sus propias paletas de colores, fuentes, espaciado y más. Permite a los usuarios de WordPress crear sitios personalizados más fácilmente que en el pasado debido a los requisitos mínimos de codificación. Como se mencionó anteriormente, los temas de edición de sitios completos utilizan bloques, por lo que puede utilizarlos en todas las áreas de su sitio para crear un sitio personalizado adaptado específicamente a usted.

Fácil de usar

Otro beneficio de la edición completa del sitio en WordPress es la facilidad de uso para sus clientes. Si es un profesional independiente o una agencia web que desea poder entregar un sitio web una vez finalizado, los temas de FSE son el camino a seguir. No es necesario que profundicen en el código del tema para realizar cambios de diseño. Verá, los temas de edición de sitios completos utilizan un archivo theme.json que permite a los desarrolladores agregar estilos y funcionalidades fácilmente. La creación de una paleta de colores global, la asignación de fuentes y otros estilos se pueden configurar globalmente, lo que facilita a los usuarios finales agregar y editar contenido.

Optimizado para la velocidad

Por último, los FSE suelen ser más rápidos. Por lo general, tienen menos hinchazón, están configurados de manera óptima y procesan las solicitudes mucho más rápido que los temas tradicionales de WordPress. Dicho esto, el alojamiento es un factor, por lo que debe elegir un proveedor de alojamiento de buena reputación que utilice el almacenamiento en caché, sea compatible con la última versión de PHP y, preferiblemente, ofrezca opciones de alojamiento en la nube. Para obtener más información, consulte cómo optimizar la velocidad de la página para SEO.

La edición completa del sitio de WordPress solo está disponible en los temas de bloque

Es importante tener en cuenta que no todos los temas admiten la edición completa del sitio. Construido sobre bloques de Gutenberg, que se lanzó en 2018, es la base de FSE. Cuando se introdujeron por primera vez, los bloques solo se admitían en el área de contenido de los sitios web, como publicaciones y páginas. Con los temas FSE, esa funcionalidad se expande literalmente a todos los aspectos del tema. Como se mencionó anteriormente, el archivo theme.json controla todas las configuraciones y estilos globales del sitio. En generaciones anteriores, el personalizador de temas controlaba la configuración del sitio. Ahora, el Editor del sitio de WordPress controla todos los estilos y configuraciones globales, además de brindar a los usuarios la posibilidad de agregar bloques en todo el tema.

Dicho esto, todavía no hay un montón de opciones para editar temas de sitios completos. Hay miles de temas de WordPress, con solo una pizca de más de 160 temas FSE disponibles actualmente. Si bien la edición de sitios completos está ganando popularidad, la tecnología recién ahora está comenzando a afianzarse.

¿Qué es un tema de bloque?

En pocas palabras, un tema de bloque es un tema de WordPress que contiene plantillas completamente construidas sobre bloques. Esto no solo incluye publicaciones y páginas, sino literalmente todo lo demás. Barras laterales, pies de página, encabezados, plantillas de publicación y todos los demás aspectos del contenido del tema.

En el pasado, los sitios web de WordPress consistían en una serie de archivos PHP tradicionales. Ahora, los temas de bloques se basan en plantillas de bloques. Como se mencionó anteriormente, todos los temas de bloques tienen un archivo theme.json que permite a los desarrolladores y usuarios agregar funcionalidades adicionales, establecer estilos globales y más.

Los temas predeterminados, como Twenty Twenty-Two, se consideran temas de bloque. En lugar de usar el antiguo personalizador de WordPress para agregar los eslóganes de su sitio, elegir colores o seleccionar fuentes, use el Editor del sitio de WordPress para controlar esas cosas. Además, utiliza bloques para agregar contenido a las plantillas para personalizarlo.

¿Cuál es la diferencia entre bloques estáticos y dinámicos (temáticos)?

Antes de comenzar a mostrarle cómo usar la edición completa del sitio en WordPress, hay algunos conceptos básicos que debe comprender con respecto a los bloques de WordPress. Hay dos tipos de bloques en WordPress FSE: bloques estáticos y bloques temáticos dinámicos. Los bloques estáticos se componen de contenido que se conoce en el momento de crear y publicar una publicación. Algunos ejemplos de bloques estáticos son párrafo, encabezado, imagen (aunque también pueden ser dinámicos), citas, saltos de página, botones y más.

Por otro lado, los nuevos bloques dinámicos FSE (llamados Bloques temáticos o Bloques de sitio) están diseñados para usarse al crear plantillas y pueden extraer contenido del backend de su sitio de forma dinámica para mostrarlo en su sitio. Estos bloques temáticos dinámicos se pueden generar para fuentes de publicaciones de blog (con un bloque de bucle de consulta), títulos de publicaciones, contenido de publicaciones, imágenes destacadas y mucho más. El bloque de contenido de la publicación es un gran ejemplo porque cualquier cambio en el contenido de la publicación en el backend actualizará automáticamente cada instancia de ese bloque de contenido de la publicación en todo su sitio.

Primeros pasos con la edición completa del sitio en WordPress

Ahora que tiene una comprensión básica de lo que es la edición completa del sitio, hablemos sobre cómo usarla. En esta sección, lo ayudaremos a comprender cómo elegir un tema de bloque, cómo personalizar las plantillas contenidas en el tema, establecer estilos globales, usar bloques de tema dinámicos y presentarle los patrones de bloque.

Elegir un tema que admita la edición completa del sitio

Actualmente, hay más de 150 temas de edición de sitios completos disponibles en el repositorio de WordPress. Hay dos formas de elegir un tema FSE. Puede elegir uno gratuito del repositorio de WordPress o comprar uno de un proveedor premium. Para esta publicación, elegiremos un FSE en el repositorio de WordPress.

Primero, inicie sesión en su panel de WordPress y haga clic en Apariencia > Temas . A continuación, haga clic en el botón Agregar nuevo .

A continuación, haga clic en el enlace Filtro de características para configurar las opciones de filtrado.

Hay tres opciones para ordenar incluyendo tema, características y diseño. Puede elegir el tema del tema si lo desea, de lo contrario, solo necesita marcar la casilla Editor del sitio . Una vez que haya realizado sus selecciones, haga clic en Aplicar filtros .

Su pantalla se actualizará y revelará las opciones disponibles para usted. Puede elegir un tema para seguir junto con este tutorial, o simplemente elegir el tema Twenty Twenty-Two, que es el que usaremos para esta publicación. Una vez que haga su elección, active su tema para comenzar.

Personalización de una plantilla

Con su nuevo tema activo, el siguiente paso es comenzar a personalizar. Para este tutorial, no entraremos en la edición de theme.json. Nos apegaremos a los conceptos básicos de Twenty Twenty-Two para que se acostumbre a cómo funcionan los temas de edición de sitios completos. Dicho esto, dirígete a Apariencia > Editor .

Una vez que se cargue el editor del sitio, volverá a la plantilla de la página de inicio.

Para editar otras plantillas dentro de su tema, simplemente haga clic en el logotipo de WordPress en la esquina superior izquierda del editor del sitio y luego haga clic en Plantillas . En Twenty Twenty-Two, hay una serie de plantillas que puede editar, incluidas publicación única, página, 404, en blanco, archivo de búsqueda y más. Para seleccionar una plantilla diferente para editar, haga clic en ella para activar el editor del sitio para esa página. Además, puede crear una nueva plantilla para su sitio haciendo clic en el botón Agregar nuevo en la esquina superior derecha del panel.

Hay varias opciones para las nuevas plantillas en Twenty Twenty-Two, incluidas las páginas de portada, autor, categoría, fecha, etiqueta y taxonomía. Dicho esto, estas opciones diferirán según el tema que haya elegido en la sección anterior.

Partes de la plantilla

La siguiente área que puede editar en una plantilla de página son las partes de la plantilla. En Twenty Twenty-Two, puede editar las partes de la plantilla de encabezado y pie de página en cada plantilla. Sin embargo, cada plantilla tiene diferentes partes de plantilla que se pueden editar. Por ejemplo, la plantilla de la página de inicio también ofrece una parte de plantilla de blog.

Para este ejemplo, editemos la parte de la plantilla del encabezado. Aquí puede editar los bloques existentes o agregar nuevos a la plantilla. Para agregar más bloques, cambie el insertador de bloques haciendo clic en el botón azul + en la esquina superior izquierda del editor.

Esto revelará todos los bloques disponibles para usted. Puede agregar un bloque de una de dos maneras. Haga clic y arrastre el bloque elegido a la parte de la plantilla, o haga clic en el ícono + para agregar uno.

Además, puede editar bloques existentes dentro de una plantilla. Simplemente haga clic en el bloque que desea editar para que aparezcan sus opciones. Por ejemplo, si desea editar el logotipo del sitio, haga clic en él para agregar una nueva imagen.

Cómo establecer estilos globales

Otra gran característica de un tema de edición de sitio completo es la capacidad de establecer estilos globales. Puede elegir fuentes, colores, temas de color y ajustar el espaciado. Puede optar por establecer estilos en todo su sitio, o solo en ciertos bloques. Este es un gran ahorro de tiempo en comparación con los temas del pasado.

Para acceder a los estilos de su sitio, haga clic en el icono de estilos en la parte superior derecha del editor del sitio.

Una vez activado, puede explorar los estilos disponibles en el tema Twenty Twenty-Two haciendo clic en el enlace de estilos de exploración para elegir un esquema de color para su sitio.

La siguiente opción, tipografía, le permite elegir las opciones de fuente para su texto y enlaces. Esto incluye la familia de fuentes, el tamaño, la altura de la línea y el peso de la fuente (apariencia).

En colores, puede editar los colores utilizados en su paleta de colores global. Puede asignar colores al fondo, el texto y los enlaces. En Twenty Twenty-Two hay 17 colores sólidos y 20 degradados. Además, puede agregar colores y degradados personalizados a su sitio, lo cual es excelente para fines de marca.

Por último, puede ajustar el relleno a su diseño. El relleno se puede configurar para la parte superior, izquierda, derecha e inferior como un todo, o se puede configurar individualmente.

Uso de bloques temáticos dinámicos

El editor de bloques contiene más de 90 bloques que se pueden utilizar para crear plantillas de página en el editor de sitios. Entre ellos, hay algunos bloques de temas dinámicos que completarán el contenido dinámico que se muestra en la parte frontal de su sitio. Por ejemplo, al hacer clic en la plantilla de publicación única, verá algunas que se utilizan, incluido el título de la publicación, la imagen destacada de la publicación y los bloques de contenido de la publicación. Estos son útiles para crear una plantilla dinámica para mostrar las publicaciones de su blog de forma dinámica.

Al editar temas, puede utilizar bloques de temas para crear encabezados, pies de página y más. En total, hay 27 bloques temáticos. No los revisaremos todos aquí, pero revisaremos algunos para que comprenda bien lo que puede hacer.

Crear un nuevo encabezado para sus plantillas

Demostremos cómo usar algunos bloques temáticos para crear una nueva plantilla de encabezado para su sitio. Comience navegando al menú Plantillas . A continuación, haga clic en Plantilla en blanco para comenzar.

Si desea poder ver qué bloques se utilizan en su página, puede usar la vista de capas. Es accesible haciendo clic en el icono de capas en la parte superior izquierda de la pantalla de edición de su sitio.

Haga clic en el ícono azul + para revelar los bloques, luego desplácese hacia abajo hasta las opciones de bloques temáticos. El primer bloque de tema que seleccionaremos es el bloque de elementos de plantilla. Esto es muy útil para crear secciones globales para su sitio. Vamos a usar una parte de la plantilla para crear un encabezado personalizado para su sitio que se puede asignar a ciertas páginas.

Arrastra el bloque de la parte de la plantilla a la página en blanco del editor de tu sitio. Seleccione comenzar en blanco para crear una nueva pieza de plantilla.

Asigne un nombre a la parte de su plantilla y luego haga clic en crear .

Primero, abra los bloques y busque el espaciador, luego agréguelo a su mesa de trabajo. Dale una altura de 20px. Esto agregará 20px de espacio en la parte superior de su plantilla.

A continuación, busque el bloque de columnas . Arrástralo a la mesa de trabajo. Seleccione la variación de columna 33/33/33 . Esto pondrá tres columnas en su fila. Cada columna ocupará el 33% del espacio disponible del sitio.

Su parte de la plantilla ahora debería verse así:

Agregue bloques a su plantilla de encabezado

Abra el menú de bloques haciendo clic en el icono azul + . Desplácese hacia abajo hasta los bloques temáticos y arrastre el bloque del logotipo del sitio a la primera columna. Cargue una imagen o asigne una desde su galería de medios.

A continuación, arrastre el bloque de navegación a la segunda columna. Para el bloque de navegación, puede agregar páginas de su sitio web al menú o crear enlaces personalizados. Agregar menús en temas de edición de sitio completo es un poco diferente que en otros temas. Ya no usas Apariencia > Menús para agregarlos. Ahora, todos los menús se crean y agregan en el editor del sitio. Haga clic en comenzar vacío para crear enlaces para su sitio o seleccionar páginas. Para agregarlos, presione la tecla Intro en su teclado.

Finalmente, agregue el bloque de enlaces sociales a su tercera columna. Agregue los íconos de redes sociales que desea destacar haciendo clic en + en el sitio derecho del bloque de íconos sociales.

NOTA: No está limitado a agregar Bloques temáticos a sus plantillas. Puedes usar cualquier bloque de WordPress. En este ejemplo, el bloque de enlaces sociales no es un bloque de tema dinámico, pero sigue siendo un elemento útil para agregar a un encabezado.

Con todos sus bloques agregados, su encabezado ahora debería verse así.

Ajuste del diseño de la plantilla

Ahora que tiene todos los bloques en su nuevo encabezado, notará que el espaciado parece un poco fuera de lugar. No se preocupe, como ocurre con todos los aspectos de la edición completa del sitio, también puede ajustar eso. Primero, haga clic en la primera columna en la vista de capas. En el panel de configuración, en Configuración de columna > Ancho , haga clic en el menú desplegable para revelar las diferentes opciones de tamaño. Elija % . Escriba 20 para el ancho de la primera columna.

Repita los pasos para ajustar la segunda columna al 60 %, luego la tercera columna al 20 %. Su encabezado ahora debería tener un mejor espaciado. Guarde su plantilla haciendo clic en el botón Publicar en la esquina superior derecha.

Su plantilla ahora debería verse así.

Uso de patrones de bloques para impulsar sus diseños

Al crear plantillas, hay una manera fácil de colocar una serie de bloques para facilitar el proceso de diseño. Estos grupos de bloques se denominan patrones de bloques. WordPress viene de serie con algunos patrones de bloques que puede usar, o puede crear los suyos propios para reutilizarlos en todo su sitio. Para acceder a los patrones de bloques, haga clic en el ícono azul + en la parte superior izquierda del editor del sitio, luego haga clic en la pestaña de patrones. Hay varias categorías de patrones de bloques para elegir, incluidos pies de página, encabezados, botones, galerías, columnas y más.

Cada patrón de bloque se puede editar para adaptarse a sus opciones de diseño. Los estilos de color, fuente y relleno se pueden ajustar dentro de bloques individuales en el patrón. Si desea guardar un patrón de bloques que ha creado, simplemente haga clic en el menú de puntos suspensivos en la vista de lista y luego haga clic en Agregar a bloques reutilizables . Alternativamente, también puede guardarlo como un elemento de plantilla .

Divi: el tema de edición de sitio completo definitivo para WordPress

Si está buscando un tema de edición de sitio completo versátil y repleto de funciones para WordPress, no busque más allá de Divi. Lleve la edición completa del sitio a un nivel completamente diferente utilizando el Visual Builder más avanzado del mundo. Los usuarios pueden aplicar efectos de desplazamiento, agregar divisores de formas, aplicar animaciones, editar elementos a granel y aplicar estilos globales y paletas de colores, por nombrar algunas características. Además, Divi tiene más de 200 elementos en su arsenal para ayudarte a crear un sitio web impresionante y altamente funcional. Con elementos como blogs, controles deslizantes, llamadas a la acción, precios, testimonios y más, los usuarios pueden crear un sitio web verdaderamente único.

Creador de temas Divi

Además de las capacidades de diseño ilimitadas de Divi, los usuarios también pueden expandir las personalizaciones a todo su sitio web. Puede diseñar encabezados, pies de página, plantillas de productos, categorías y páginas de archivo, plantillas 404, plantillas de publicaciones y más. Además, puede hacer todo esto con Visual Builder, propiedad de Divi, que le permite ver los cambios de diseño en tiempo real. No hay límite para la cantidad de plantillas que puede crear. Además, las plantillas de Theme Builder se pueden asignar como elementos globales o a páginas individuales si se desea.

Contenido Dinámico Divi

Divi también tiene la capacidad incorporada para crear contenido dinámico para su sitio web. Utilizando el Creador de plantillas y/o el Creador visual, los usuarios pueden asignar contenido dinámico a publicaciones, páginas, productos y plantillas. Puede usar contenido dinámico en todos los elementos Divi, lo que le permite crear módulos dinámicos para mostrar información extraída directamente de su base de datos.

Módulos Dinámicos en Divi

Los módulos dinámicos son excelentes para usar en todo tipo de sitios web. Se pueden usar para crear módulos para sitios web de viajes, recetas, servicios de alquiler y más. Con Visual Builder de Divi, puede asignar contenido dinámico según el tipo de plantilla que desea crear. Por ejemplo, al crear plantillas de publicaciones o categorías, el contenido dinámico disponible para un módulo de texto tiene opciones que difieren de las de un módulo de imágenes. Para los módulos con texto, puede elegir elementos como el título de la publicación/archivo, el extracto de la publicación, la fecha de publicación, el recuento de comentarios, las etiquetas, la descripción de la categoría y más. Por otro lado, los módulos de imagen se utilizan para establecer contenido dinámico, como la imagen destacada, la imagen de perfil del autor y la imagen del logotipo del sitio.

Módulos dinámicos de WooCommerce

Los propietarios de sitios web de comercio electrónico obtienen una bonificación adicional con Divi. Cuando se instala WooCommerce, Divi agrega una serie de módulos dinámicos de WooCommerce que ofrecen la capacidad de agregar contenido dinámico al crear plantillas de productos, carritos y páginas de pago. Ya no es necesario utilizar CSS al usar WooCommerce para que las páginas de productos y carritos de su sitio coincidan con su marca. Además, los módulos de WooCommerce se pueden usar en cualquier lugar dentro de Divi para resaltar productos, crear galerías de productos y mucho más.

Preguntas frecuentes sobre la edición completa del sitio de WordPress

Después de toda la información que te hemos entregado, estamos seguros de que tienes algunas preguntas. No se preocupe, tenemos respuestas para usted.

Si cambio a un tema de edición de sitio completo, ¿qué sucederá con mi sitio web?

Afortunadamente, los temas de edición de sitios completos se basan en bloques. Por lo tanto, si está cambiando de otro tema basado en bloques, solo debe hacer algunas cosas para que su sitio se vea bien. Lo primero es establecer un logotipo de sitio y navegación creando una parte de plantilla de encabezado. Lo más probable es que tu antiguo tema usaba el Personalizador. Con los temas de FSE, el editor del sitio se usa para crear el encabezado de su sitio.

¿Dónde puedo encontrar un tema de edición de sitio completo?

Hay dos formas de encontrar un tema de edición de sitio completo. La primera forma es realizar una búsqueda filtrada en la sección de temas de WordPress de su panel de administración. Hay más de 160 temas para elegir. La segunda forma es comprar un tema premium de edición de sitio completo como Divi.

Mi antiguo sitio utiliza widgets. ¿Se mantendrán en su lugar si cambio a un tema de edición de sitio completo?

Dado que un tema de FSE se basa completamente en bloques, no utiliza widgets como en el pasado. Sin embargo, hay bloques de widgets que están disponibles. Probablemente necesitará reemplazar los widgets antiguos con nuevos bloques de widgets o agregar nuevos patrones de bloques para ayudar a acelerar el proceso.

¿Qué versión de WordPress necesito para usar un tema de edición de sitio completo?

La edición completa del sitio es compatible con las versiones de WordPress desde el lanzamiento de 5.8 y se han agregado más bloques de temas en versiones recientes. Si su instalación no tiene 5.8, deberá actualizarla para usar un tema FSE. La buena noticia es que necesita actualizar de todos modos, ya que el uso de versiones desactualizadas de WordPress deja su sitio vulnerable a los ataques de seguridad y todo tipo de otros problemas desagradables.

No soy muy experto en tecnología. ¿Puedo usar un FSE?

¡Sí! Es fácil para casi todo el mundo aprender a crear un sitio web mediante la edición completa del sitio. Debido a que los temas de FSE utilizan la edición visual de arrastrar y soltar, es fácil crear hermosos diseños con facilidad.

¿El uso de un tema de edición de sitio completo acelerará mi sitio?

Sí, puede, pero hay más que eso. En primer lugar, los temas de edición de sitios completos pueden aumentar el rendimiento porque están construidos de una manera que requiere menos complementos para una funcionalidad adicional. Por lo tanto, no debería necesitar instalar muchos para obtener el sitio donde lo desea. Dicho esto, los temas de FSE no están diseñados automáticamente para ser más rápidos desde el primer momento. Hay otras consideraciones, como los proveedores de alojamiento. Un buen proveedor de alojamiento como SiteGround ejecutará la última versión de PHP y proporcionará una CDN y otras mejoras de velocidad que harán que los sitios web funcionen más rápido.

La edición completa del sitio es el futuro de WordPress

La edición completa del sitio está ganando terreno en la comunidad de WordPress. Con la capacidad de editar todos los aspectos de los sitios web, los desarrolladores y los creativos comienzan a ver el valor que tiene. Los temas premium como Divi han estado usando esta tecnología desde 2021 y se han mantenido a la vanguardia. Dicho esto, con el lanzamiento del tema WordPress Twenty Twenty-Two a principios de este año, podemos esperar que los temas completos de edición del sitio se conviertan en la norma en breve. Saber cómo utilizar la edición completa del sitio en el desarrollo de WordPress es un paso esencial para mantenerlo preparado para el futuro.

¿Usas la edición completa del sitio en WordPress? Danos tu opinión al respecto a continuación.

Divulgación: esta publicación contiene enlaces de afiliados que respaldan a nuestro equipo y mantienen el flujo de contenido gratuito del blog. Cuando compra algo después de hacer clic en un enlace de afiliado, podemos recibir una comisión.