WordPress 6.9 y el Editor de Sitio (Full Site Editing - FSE)

Te voy a explicar WordPress 6.9 y el Editor de Sitio (Full Site Editing - FSE) de forma práctica:

Guía Completa: WordPress 6.9 - Editor de Sitio (FSE)

¿Qué es el Editor de Sitio?

El Editor de Sitio (Full Site Editing - FSE) te permite diseñar todo tu sitio web visualmente, sin código:

Guía Completa: WordPress 6.9 - Editor de Sitio (FSE)
  • Header (cabecera)
  • Footer (pie de página)
  • Plantillas (home, páginas, entradas, archivo, 404, etc.)
  • Estilos globales (colores, tipografías, espaciados)

Diferencia con el editor clásico:

  • ❌ Antes: Solo editabas el contenido de páginas/entradas
  • ✅ Ahora: Editas TODO el sitio completo

Requisitos para Usar el Editor de Sitio

1. WordPress 6.9 (o superior)

Verifica tu versión en: Escritorio → Actualizaciones

2. Tema compatible con FSE (Block Theme)

Temas FSE recomendados GRATIS:

  • Twenty Twenty-Four (viene con WP 6.4+) ⭐ El mejor predeterminado
  • Twenty Twenty-Three (minimalista y elegante)
  • Twenty Twenty-Two (primer tema FSE oficial)
  • Blocksy (muy potente y flexible)
  • Kadence (excelente para negocios)
  • GeneratePress (ligero y rápido)
  • Spectra One (moderno con patrones)
  • Frost (del equipo de WP Engine)

⚠️ Temas que NO funcionan con FSE:

  • Astra (versión gratuita)
  • OceanWP
  • Avada
  • Divi (usa su propio builder)
  • Elementor Hello (necesita Elementor)

Cómo Acceder al Editor de Sitio

Método 1: Desde el menú principal

  1. Ve a Apariencia → Editor
  2. Se abrirá el Editor de Sitio completo

Método 2: Desde la barra de administración

  1. Estando en el frontend, haz hover en la barra superior
  2. Click en "Editar sitio"

Interfaz del Editor de Sitio

Panel izquierdo - Navegación:

  • 🎨 Estilos: Colores, tipografías, espaciados globales
  • 📄 Páginas: Gestiona tus páginas
  • 📝 Plantillas: Diseño de diferentes tipos de páginas
  • 🧩 Patrones: Bloques de contenido reutilizables
  • ⚙️ Navegación: Menús del sitio

Panel central:

  • Vista previa del sitio con edición en vivo

Panel derecho (Settings):

  • Opciones del bloque seleccionado
  • Configuración de la plantilla/página

Paso 1: Cambiar Estilos Globales (Lo Primero)

Acceder a Estilos:

  1. Apariencia → Editor
  2. Click en el ícono 👁️ Estilos (arriba a la derecha)

Opciones Disponibles:

A) Explorar Variaciones de Estilo

  • WordPress 6.9 incluye style variations predefinidas
  • Click en diferentes variaciones para ver cambios instantáneos
  • Prueba todas las que vienen con tu tema

B) Personalizar Colores

  1. En el panel de Estilos, click en "Colores"
  2. Opciones:
    • Paleta: Cambia la paleta de colores completa
    • Color de fondo: Color principal del sitio
    • Color del texto: Color de fuente por defecto
    • Enlaces: Color de los links
    • Botones: Colores de botones

Añadir colores personalizados:

1. Click en "+ Añadir color"
2. Escoge tu color con el selector
3. Ponle un nombre (ej: "Azul corporativo")

C) Cambiar Tipografías

  1. Click en "Tipografía"
  2. Opciones:
    • Familia de fuentes: Cambia la fuente (Google Fonts incluidas)
    • Tamaño del texto: Base, pequeño, mediano, grande, XL
    • Altura de línea: Espaciado entre líneas
    • Peso de fuente: Light, Regular, Bold, etc.
    • Letra mayúscula: Transformaciones

Tipografías disponibles en 6.9:

  • Fuentes del sistema (rápidas)
  • Google Fonts integradas
  • Fuentes personalizadas (subir tu propia fuente)

D) Ajustar Layout (Diseño)

  1. Click en "Layout"
  2. Opciones:
    • Ancho del contenido: Máximo ancho del contenido (ej: 1200px)
    • Ancho amplio: Para bloques de ancho completo
    • Padding: Espaciado interno general
    • Margen: Espaciado externo

E) Personalizar Bloques Específicos

  1. En Estilos, baja hasta "Bloques"
  2. Personaliza cada tipo de bloque globalmente:
    • Botones: Esquinas redondeadas, relleno
    • Encabezados: Tamaños, colores específicos
    • Párrafos: Espaciado, tamaño
    • Imágenes: Bordes, sombras

Paso 2: Editar Plantillas (Templates)

¿Qué son las Plantillas?

Definen cómo se ven diferentes tipos de páginas:

  • Inicio (Home)
  • Página (Single Page)
  • Entrada (Single Post)
  • Archivo (Archive - listado de entradas)
  • 404 (Página no encontrada)
  • Búsqueda (Search Results)

Editar una Plantilla:

  1. Apariencia → Editor → Plantillas (ícono 📄)
  2. Verás lista de todas las plantillas disponibles
  3. Click en la que quieras editar (ej: "Inicio")
  4. Se abre el editor visual

Elementos que puedes añadir/editar:

Bloques de Tema (Theme Blocks):

  • Site Logo: Logo del sitio
  • Site Title: Nombre del sitio
  • Site Tagline: Eslogan
  • Navigation: Menú de navegación
  • Query Loop: Listado de entradas
  • Post Title, Date, Author: Metadatos de entradas
  • Post Featured Image: Imagen destacada
  • Post Content: Contenido del post

Bloques Comunes:

  • Párrafo, Encabezado, Imagen
  • Botones, Espaciador
  • Columnas, Grupo
  • Cover (imagen de fondo con texto)
  • Media & Texto

Ejemplo: Personalizar la Plantilla de Inicio

1. Editor → Plantillas → "Inicio"
2. Click en el header existente
3. Cambia el logo: Click en Site Logo → Subir tu logo
4. Edita el menú: Click en Navigation → Editar elementos
5. Añade un hero section:
   - Click en + (añadir bloque)
   - Busca "Cover"
   - Sube imagen de fondo
   - Añade título y botón
6. Modifica el listado de posts:
   - Click en Query Loop
   - Panel derecho: Cambia número de posts, layout
7. Guarda: Click "Guardar" arriba a la derecha

Paso 3: Personalizar Header y Footer

Editar Header (Cabecera):

Método 1 - Desde Plantillas:

  1. Editor → Plantillas → Partes de plantilla → Header
  2. Edita directamente

Método 2 - Desde cualquier plantilla:

  1. Abre cualquier plantilla
  2. Click en el header existente
  3. Barra de herramientas → Click en "Editar" (ícono de lápiz)

Elementos típicos del Header:

Estructura básica:
- Grupo (contenedor)
  ├─ Site Logo
  ├─ Site Title
  └─ Navigation (menú)

Estructura avanzada:
- Columnas (2 o 3)
  ├─ Columna 1: Logo + Title
  ├─ Columna 2: Navigation
  └─ Columna 3: Botón CTA / Search / Social

Hacer header sticky (fijo al hacer scroll):

  1. Selecciona el grupo principal del header
  2. Panel derecho → Avanzado
  3. Añade clase CSS: sticky-header
  4. Añade CSS personalizado (ver sección de CSS más abajo)

Editar Footer (Pie de página):

  1. Editor → Plantillas → Partes de plantilla → Footer
  2. Diseño típico: - Grupo con fondo de color ├─ Columnas (3 o 4) │ ├─ Widget 1: Sobre nosotros │ ├─ Widget 2: Enlaces rápidos │ ├─ Widget 3: Contacto │ └─ Widget 4: Social media └─ Párrafo: Copyright © 2025

Paso 4: Crear y Usar Patrones (Patterns)

¿Qué son los Patrones?

Diseños predefinidos que puedes insertar con un click:

  • Secciones hero
  • Testimonios
  • Llamadas a la acción
  • Galerías
  • Pricing tables

Usar Patrones Existentes:

  1. En el Editor, click en + (añadir bloque)
  2. Pestaña "Patrones"
  3. Navega por categorías o busca
  4. Click en un patrón para insertarlo
  5. Personaliza texto e imágenes

Crear tus Propios Patrones:

  1. Diseña una sección en el editor
  2. Selecciona todos los bloques (Shift + click)
  3. Menú de opciones (⋮) → "Crear patrón"
  4. Dale un nombre y categoría
  5. Click "Crear"

Reutilizar tu patrón:

    • → Patrones → Tus patrones → Selecciona

Paso 5: Gestionar Navegación (Menús)

Crear/Editar Menús:

Método 1 - Desde el Editor de Sitio:

  1. Editor → Navegación (ícono ☰)
  2. Edita menús existentes o crea nuevos
  3. Añade páginas, enlaces personalizados, categorías

Método 2 - Desde el bloque Navigation:

  1. Click en el bloque Navigation en tu header
  2. Click "Editar" en la barra de herramientas
  3. Añade elementos:
    • Enlace de página
    • Enlace personalizado
    • Submenú (anidado)

Crear menú desplegable (dropdown):

1. Selecciona un elemento del menú
2. Barra de herramientas → Click "Añadir submenú"
3. Añade items hijos
4. Al hacer hover, se desplegará automáticamente

Paso 6: Configuración de Bloques Avanzados

Query Loop (Listado de Entradas)

Muestra posts dinámicamente:

  1. Añade bloque Query Loop
  2. Panel derecho - Settings:
    • Heredar query: Posts de la página actual
    • Número de items: Cantidad de posts
    • Orden: Fecha, título, aleatorio
    • Categorías: Filtrar por categoría
    • Etiquetas: Filtrar por tags
    • Autor: Filtrar por autor
  3. Personalizar diseño interno:
    • Click dentro del Query Loop
    • Edita: Post Title, Excerpt, Featured Image, Date
    • Cambia layout: Lista, Grid (cuadrícula)

Crear grid de posts:

Query Loop
└─ Post Template (configurar como Grid)
   ├─ Post Featured Image
   ├─ Post Title
   ├─ Post Excerpt
   └─ Read More link

Galería de Imágenes

  1. Añade bloque Galería
  2. Sube múltiples imágenes
  3. Panel derecho:
    • Columnas: 2, 3, 4, 5...
    • Crop images: Mismo tamaño
    • Enlace a: Archivo multimedia, página adjunto, ninguno
    • Tamaño: Miniatura, medio, grande

Cover (Hero Section)

  1. Añade bloque Cover
  2. Sube imagen de fondo o selecciona color
  3. Añade contenido dentro:
    • Título
    • Párrafo
    • Botones
  4. Panel derecho:
    • Opacidad del fondo: Oscurecer imagen
    • Punto focal: Dónde centrar la imagen
    • Altura mínima: Ej: 500px para hero grande
    • Contenido alineado: Centro, arriba, abajo

Paso 7: CSS Personalizado (Cuando lo necesites)

Añadir CSS Global:

Opción 1 - Estilos Adicionales (Recomendado en 6.9):

  1. Apariencia → Editor → Estilos
  2. Menú (⋮) arriba a la derecha
  3. Click en "CSS adicional"
  4. Escribe tu CSS aquí

Opción 2 - theme.json (Avanzado): Para desarrolladores, editar el archivo theme.json del tema

Ejemplos de CSS Útiles:

Header sticky:

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Animación de hover en botones:

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

Espaciado consistente en secciones:

.wp-block-group {
    padding: 60px 20px;
}

Mejorar legibilidad del texto:

p {
    line-height: 1.8;
    margin-bottom: 1.5em;
}

Paso 8: Responsive Design (Móviles)

Ver cómo se ve en móvil:

  1. En el Editor, parte inferior izquierda
  2. Click en ícono de dispositivo 📱
  3. Cambia entre: Desktop, Tablet, Mobile

Ajustar para móviles:

WordPress 6.9 es responsive por defecto, pero puedes ajustar:

  1. Ocultar elementos en móvil:
    • Selecciona el bloque
    • Panel derecho → Avanzado → Clases CSS
    • Añade: hide-on-mobile
    • CSS adicional:
    @media (max-width: 768px) { .hide-on-mobile { display: none !important; } }
  2. Cambiar número de columnas:
    • Bloque Columnas
    • Panel derecho → Responsive
    • Ajusta apilamiento en móvil
  3. Tamaños de texto responsive:
    • Usa tamaños relativos (em, rem) en vez de px
    • WordPress 6.9 ya gestiona esto automáticamente

Paso 9: Exportar e Importar Estilos

Exportar tu Configuración:

  1. Apariencia → Editor → Estilos
  2. Menú (⋮) → "Exportar"
  3. Descarga archivo JSON
  4. Úsalo como backup o para otro sitio

Importar Estilos:

  1. Apariencia → Editor → Estilos
  2. Menú (⋮) → "Importar"
  3. Sube archivo JSON
  4. Se aplicarán todos los estilos

Paso 10: Consejos y Trucos Avanzados

1. Duplicar plantillas para variaciones

- Crea plantilla "Página" base
- Duplica para crear "Página con sidebar"
- Duplica para crear "Página full width"

2. Usar variables CSS

En CSS adicional:

:root {
    --color-primario: #0066cc;
    --color-secundario: #ff6b6b;
    --espaciado-base: 20px;
}

.mi-clase {
    color: var(--color-primario);
    padding: var(--espaciado-base);
}

3. Atajos de teclado útiles

  • Ctrl/Cmd + Z: Deshacer
  • Ctrl/Cmd + Shift + Z: Rehacer
  • Ctrl/Cmd + D: Duplicar bloque
  • Ctrl/Cmd + Shift + D: Duplicar selección múltiple
  • /: Búsqueda rápida de bloques

4. Modo lista para organización

  • En el editor, panel izquierdo
  • Click en ícono "Vista de lista"
  • Ves estructura jerárquica
  • Arrastra para reorganizar

5. Lock de bloques (evitar cambios accidentales)

  • Selecciona bloque
  • Menú (⋮) → "Bloquear"
  • Opciones: Bloquear todo, solo mover, solo eliminar

Temas FSE Recomendados por Tipo de Proyecto

Blogs y Noticias:

  • Twenty Twenty-Four
  • Blocksy
  • Frost

Negocios y Corporativo:

  • Kadence
  • Spectra One
  • GeneratePress

Portfolio y Creativos:

  • Twenty Twenty-Three
  • Tove
  • Eksell

eCommerce (WooCommerce):

  • Blocksy (mejor integración FSE + Woo)
  • Kadence
  • Storefront (actualizado para FSE)

Minimalistas:

  • Twenty Twenty-Two
  • Emptytheme (canvas en blanco)

Recursos y Documentación

Oficiales:

  • WordPress.org Patterns: https://wordpress.org/patterns/
  • Block Editor Handbook: https://developer.wordpress.org/block-editor/
  • Theme.json Documentation: https://developer.wordpress.org/themes/theme-json/

Comunidad:

  • WP Tavern: Noticias sobre FSE
  • Learn WordPress: Tutoriales oficiales
  • YouTube: "Full Site Editing WordPress" tiene muchos tutoriales

Solución de Problemas Comunes

No veo "Editor" en el menú Apariencia

Causa: Tu tema no es compatible con FSE
Solución: Cambia a un Block Theme (Twenty Twenty-Four, etc.)

Los cambios no se guardan

Causa: Permisos de archivo o caché
Solución:

  1. Limpia caché (plugin + navegador)
  2. Verifica permisos de /wp-content/themes/

El sitio se ve roto después de editar

Solución:

  1. Editor → Menú (⋮) → "Restablecer estilos"
  2. Vuelve a la variación por defecto
  3. O restaura desde backup

No puedo editar una parte específica

Causa: Bloque bloqueado o heredado de plantilla padre
Solución:

  1. Vista de lista → Busca el bloque
  2. Verifica si está bloqueado (icono candado)
  3. Desbloquear desde menú (⋮)

Flujo de Trabajo Recomendado

Para un Sitio Nuevo:

1. Instalar WordPress 6.9
2. Activar tema FSE (Twenty Twenty-Four)
3. Configurar Estilos Globales primero
   - Colores
   - Tipografía
   - Espaciados
4. Diseñar Header y Footer
5. Crear plantilla de Inicio personalizada
6. Crear otras plantillas necesarias
7. Añadir contenido en páginas/posts
8. Probar responsive
9. Optimizar y lanzar

Para Personalizar un Tema Existente:

1. Crear Child Theme (opcional pero recomendado)
2. Editor → Estilos → Crear variación personalizada
3. Modificar Header/Footer
4. Ajustar plantillas específicas
5. Crear patrones personalizados
6. Exportar configuración como backup

Conclusión

WordPress 6.9 con FSE te da control total visual sobre todo tu sitio sin tocar código. Es perfecto para:

✅ Diseñadores: Control visual completo
✅ Desarrolladores: Menos PHP, más componentización
✅ Clientes: Pueden editar sin romper el diseño
✅ Freelancers: Entregas más rápidas y mantenibles

La curva de aprendizaje vale la pena porque:

  • Ya no necesitas page builders pesados
  • Todo está nativo en WordPress
  • Mejor rendimiento
  • Más control y flexibilidad
  • Futuro de WordPress

¡Empieza experimentando con Twenty Twenty-Four y vas a ver lo potente que es! 🚀

Post con fecha:
Categorias: : , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)