Ejercicio FSE

 

🧩 EJERCICIO PRÁCTICO DE FSE EN WORDPRESS

🎯 Objetivo:

Crear una página de inicio personalizada para una web ficticia de portafolio personal con varias secciones, utilizando el Editor del Sitio, patrones y estilos globales.

---

✅ Requisitos previos

• WordPress 6.2 o superior.
• Tema compatible con FSE (como Twenty Twenty-Four).
• Acceso al Editor del sitio completo (Apariencia > Editor).

---

🏗️ Estructura del ejercicio

Vas a construir una página de inicio con las siguientes secciones:

1. Cabecera con imagen de fondo y llamada a la acción (Patrón de cabecera o creado manualmente)
2. Sobre mí (dos columnas: imagen + texto)
3. Proyectos destacados (galería de tarjetas o cuadrícula de proyectos)
4. Testimonios (bloques de citas con nombre)
5. Formulario de contacto (con plugin o HTML básico)
6. Pie de página personalizado (patrón o bloques reutilizables)

---

🧩 Paso a paso

1. 🧱 Accede al editor de sitio

Ve a Apariencia > Editor (beta).

---

2. 🏁 Crea una nueva plantilla de página de inicio

• En el menú lateral, ve a Plantillas > Añadir nueva.
• Selecciona «Página».
• Llama a la plantilla “Página de inicio” o “Inicio”.
• Elige que esa sea la página de inicio desde Ajustes > Lectura > Página de inicio estática.

---

3. 🖼️ Sección 1: Cabecera llamativa (Hero)

Objetivo: Imagen de fondo, título y botón.

✅ Puedes usar un patrón como:

• Encabezado con imagen y texto centrado
• O crear el tuyo con un bloque Grupo + Imagen de fondo + Encabezado + Botón.

[ Imagen de fondo ]
[ ¡Hola! Soy Ana ]
[ Desarrolladora web y diseñadora UX ]
[ Botón: Ver portafolio ]

---

4. 🙋‍♀️ Sección 2: Sobre mí

✅ Usa un patrón de dos columnas:

• Izquierda: Imagen
• Derecha: Texto con bloques de encabezado + párrafo

[ Foto ]  |  [ Encabezado: Sobre mí ]
          |  [ Texto: Soy una profesional... ]

---

5. 🧑‍💻 Sección 3: Proyectos destacados

✅ Usa un patrón tipo galería o cuadrícula de tarjetas. Puedes usar bloques Group o Columnas.

Ejemplo:

[ Proyecto 1 ] [ Proyecto 2 ] [ Proyecto 3 ]
[ Imagen     ] [ Imagen     ] [ Imagen     ]
[ Título     ] [ Título     ] [ Título     ]
[ Descripción] [ Descripción] [ Descripción]

---

6. 💬 Sección 4: Testimonios

✅ Usa un patrón de testimonios o crea el tuyo con bloques de Cita o Quote.

“Trabajar con Ana fue increíble, todo salió perfecto.”
— Cliente feliz, Nombre Empresa

---

7. 📬 Sección 5: Formulario de contacto

✅ Puedes insertar un bloque de shortcode de contacto con un plugin como Contact Form 7 o WPForms o usar HTML básico:

<form>
 <label>Nombre</label><br>
 <input type="text" /><br>
 <label>Email</label><br>
 <input type="email" /><br>
 <label>Mensaje</label><br>
 <textarea></textarea><br>
 <button>Enviar</button>
</form>

---

8. ⚓ Pie de página personalizado

✅ Inserta un patrón de pie de página o crea uno con bloques de Navegación, Texto, Iconos sociales.

[ Enlaces de navegación ]    [ Redes sociales ]
[ © 2025 Ana Meraga ]

---

🎨 Opcional: Personaliza el estilo global

• Ve a Editor del sitio > Estilos.
• Cambia:
  • Tipografía
  • Paleta de colores
  • Estilo de botones

---

🧪 Desafíos adicionales

• Crea un patrón personalizado con tu sección de “Testimonios” y guárdalo para reutilizar.
• Haz que la página sea completamente responsive verificándola en vista móvil.
• Usa bloques condicionales (si usas plugins como Block Visibility).