2.4Construir una página de inicio atractiva
Lo esencial en 30 segundos
- La página de inicio dispone de unos segundos para convencer: un héroe con un título potente, un subtítulo y un botón de acción.
- Cada sección transmite un solo mensaje y guía hacia el objetivo: quién soy → qué ofrezco → la prueba → la acción.
- Los patrones ofrecen una base profesional inmediata; se personalizan en lugar de partir de cero.
Minicaso hilado — la página de inicio del taller
La página de inicio del Atelier Bahja debe seducir desde el primer momento: mostrar la belleza de las cerámicas, explicar el trabajo artesanal y dar ganas de visitar la tienda o contactar con Hassan. Samir parte de un patrón de héroe y después añade secciones dedicadas a las colecciones, al proceso y a los testimonios. Evita extender todo el sitio en una sola página.
Continuación del caso 2.3 — las zonas están listas, construimos el escaparate.
1. El héroe y la propuesta de valor
La sección héroe es la gran apertura de la página: un título atractivo, un subtítulo que precisa la oferta y un botón de acción visible, a menudo sobre una imagen de fondo. En unos segundos, el visitante debe entender quién es el taller, qué ofrece y qué puede hacer después. Es la parte más importante de la página.
La propuesta de valor debe ser concreta: «Cerámicas artesanales torneadas en Casablanca» dice más que «Bienvenido a nuestro sitio». Samir evita los eslóganes vagos y los textos centrados en la empresa: habla de lo que obtiene el cliente.
2. Estructurar y convertir
Una página de inicio eficaz sigue una progresión: quién soy, qué ofrezco, la prueba (testimonios, cifras, galería) y después la acción. Cada sección transmite una idea y termina idealmente con una llamada a la acción. Se evitan los enlaces dispersos: un objetivo principal y unas pocas acciones secundarias.
Los patrones (patterns) ofrecen secciones listas —héroe, servicios, testimonios— que se personalizan. Samir los utiliza como base, sustituye los textos y las imágenes y después revisa la lógica de arriba abajo. Publica y define la página como inicio (sección 1.5).
🔎 Ejemplo concreto — Componer el inicio del taller (caso Samir)
Héroe: «Cerámicas torneadas a mano en Casablanca» + botón «Descubrir las colecciones».
Sección 2: tres colecciones (mesa, decoración, jardín).
Sección 3: el proceso artesanal en tres etapas.
Sección 4: testimonios de clientes.
Sección final: «Visitar el taller» + contacto.
→ Publicar y definir como página de inicio.Resultado: un recorrido fluido hacia el contacto o la tienda.
Lección: cada sección prepara la acción final.
Vocabulario de la sección
- Sección héroe
- Gran sección de apertura: título, subtítulo, botón de acción y, a menudo, una imagen.
Ejemplo sencillo: el título «Cerámicas torneadas a mano».
Lo que no es: abrir con un simple logo sin mensaje.
Reflejo: los 3 segundos decisivos = héroe.
- Llamada a la acción (CTA)
- Botón o enlace que invita a actuar: presupuesto, compra, contacto, visita.
Ejemplo sencillo: «Descubrir las colecciones».
Lo que no es: multiplicar diez botones competidores.
Reflejo: un objetivo principal, una CTA clara.
- Patrón (pattern)
- Maquetación lista (héroe, tarifas, testimonios) insertada y después personalizada.
Ejemplo sencillo: un patrón de testimonios adaptado al taller.
Lo que no es: reconstruir cada sección a mano.
Reflejo: base pro = patrón personalizado.
- Propuesta de valor
- Lo que debe quedar claro en la parte superior: quién eres, qué aportas y a quién.
Ejemplo sencillo: artesanía local, piezas únicas, entrega cuidada.
Lo que no es: «Bienvenido a nuestro sitio» como único mensaje.
Reflejo: concreto y orientado al cliente.
- Un mensaje por sección
- Principio: cada sección transmite una sola idea, no un cajón de sastre.
Ejemplo sencillo: una sección para las colecciones y otra para el proceso.
Lo que no es: mezclar colecciones, historia y contacto en un solo bloque.
Reflejo: una idea, una sección, una acción.
En la práctica — Componer una página de inicio que convierte
- Crea o edita la página de inicio e inserta un patrón de héroe.
- Sustituye el título por una propuesta de valor clara y añade un botón de acción.
- Añade una sección de colecciones, una sección de prueba (testimonios) y una sección de contacto.
- Revisa la progresión de arriba abajo, publica y define la página como inicio.
Guion listo para decir — explicar la lógica del inicio (25 s)
«Arriba, el visitante entiende al instante qué hace usted y puede descubrir sus colecciones. Después muestro su saber hacer, opiniones de clientes y un botón para contactar con usted. Cada parte lo acerca a la acción.»
Mostrar el recorrido como una historia, no como una lista de bloques.
Modelo copiar-pegar — plano de la página de inicio
HÉROE: título _______________ / subtítulo _______________ / CTA _______________
SECCIÓN 2: colecciones / servicios
SECCIÓN 3: prueba (testimonios, cifras)
SECCIÓN 4: proceso o galería
SECCIÓN FINAL: CTA contacto
OBJETIVO PRINCIPAL: _______________Escaparate artesano
Fotos potentes, relato del saber hacer, contacto sencillo.
Tienda
Héroe orientado al producto, colecciones en primer plano, CTA de tienda.
Servicio local
Zona de intervención, horarios y botón de llamada visibles.
Portafolio
Galería en el héroe, casos prácticos y contacto al final del recorrido.
✓ Buenas prácticas
- Escribir la propuesta de valor antes de elegir las imágenes.
- Un objetivo principal, una CTA dominante.
- Partir de un patrón y después personalizarlo.
✗ Errores frecuentes
- Mostrarlo todo en el inicio sin jerarquía.
- Multiplicar los botones competidores.
- Escribir un eslogan vago y centrado en uno mismo.
Puntos clave
- El héroe dice quién, qué y qué hacer en 3 segundos.
- Cada sección transmite un solo mensaje.
- La progresión conduce a una acción clara.
- Los patrones aceleran la composición profesional.
Reto 48h — aplícalo mañana
Escribe en una frase la propuesta de valor de un proyecto y después compón un héroe con un botón. Añade tres secciones como máximo y comprueba que cada una conduce a la acción. 30 minutos.
- Redacto una propuesta de valor clara.
- Compongo un héroe con una llamada a la acción.
- Estructuro el inicio en una progresión hacia la acción.
Preguntas frecuentes
¿Cuántas secciones poner en la página de inicio?
Las suficientes para cubrir quién, qué, prueba y acción; a menudo de cuatro a seis. Más allá, el visitante se pierde. Mejor aligerar y remitir a páginas dedicadas para el detalle.
¿Hace falta una imagen de fondo en el héroe?
No obligatoriamente. Una buena foto del oficio ayuda, pero un fondo liso con un título potente y un botón puede ser más legible y más rápido. Lo esencial es la claridad del mensaje y del contraste.
¿Cómo definir esta página como inicio?
En Ajustes → Lectura, elige «Una página estática» y selecciona la página compuesta. Si mantienes un blog, designa otra página como página de entradas.
¿Qué debe decir la sección de apertura (héroe) de la página de inicio?