En la primera pantalla tu visitante decide si se queda o se va. Esta guía práctica une copywriting y UX para que, en 3 segundos, tu web explique qué haces, para quién y cómo contactarte. Menos ruido, más acciones: llamadas, WhatsApp o formularios enviados.

Anatomía del hero: H1, promesa y CTA visible

El hero (primer pantallazo) debe responder sin scroll a: ¿qué ofreces?, ¿qué gano? y ¿qué hago ahora?

• H1 con keyword + beneficio: evita frases decorativas. “Diseño web WordPress claro y rápido para pymes”.
• Sub-párrafo de valor (2 líneas): concreta plazos, método o resultado. “Web lista en 12–20 días, optimizada para SEO y con soporte inicial.”
• CTA único y visible: botón destacado, verbo de acción y expectativa clara. “Quiero mi web clara”.
• Elementos de confianza en el hero: mini-reseña (★4,9), “precio cerrado”, “soporte incluido”.

Prueba social y objeciones (FAQs)

Las dudas matan conversiones. Coloca prueba social cerca del hero y crea una sección breve de FAQs que responda objeciones reales.

Micro-caso (1–2 líneas): “Rediseño para clínica → +48% solicitudes en 60 días”.

FAQ 1 — “¿Precio y plazos?” → “Precio cerrado por fases y entrega en 12–20 días.”

FAQ 2 — “¿Y si no tengo textos?” → “Los escribimos contigo. Copy orientado a conversión.”

FAQ 3 — “¿SEO?” → “Estructura con keyword, schema y Google Business Profile alineado.”

Técnicas de copy para 3 segundos:
— Regla de una idea por pantalla: un mensaje, una acción.
— Beneficio + prueba: “carga <2s porque optimizamos INP/CLS y scripts”.
— Microcopy de fricción baja: “Sin spam. Te respondo hoy.”

Diseño con Divi: bloques reutilizables y consistencia

Con Divi, la consistencia se logra diseñando secciones reutilizables y un sistema visual estable: los usuarios reconocen patrones y confían.

• Biblioteca de Divi: guarda módulos de hero, CTA, testimonios y FAQs como layouts globales.
• Jerarquía tipográfica (H1/H2/H3): tamaño, peso y espaciado coherentes. El ojo agradece el orden.
• Guía de componentes: tarjetas de servicio, listas con iconos, tablas de precios. Misma sombra, borde y radio.
• Contraste y accesibilidad: colores con ratio AA/AAA; foco visible en botones y formularios.
• Navegación simple: menú escueto (Servicios, Trabajos, Blog, Contacto). Evita submenús infinitos.

Velocidad web (INP/CLS) sin sacrificar diseño

Una web lenta no se entiende en 3 segundos. Optimiza Core Web Vitals sin renunciar a la estética.

1. Imágenes responsivas (srcset) y compresión adecuada (WebP/AVIF). Evita full-width pesadas en móvil.
2. Tipografías: precarga (preload) y subset; usa font-display: swap para evitar “saltos”.
3. JS crítico: diferido/async; quita lo que no aporta. Menos plugins, más foco.
4. Caché y CDN: páginas, objetos y navegador. Prioriza servidores cercanos a tu audiencia.
5. Layout estable: reserva alturas para evitar CLS en carruseles, banners o fuentes.

KPIs de calidad:
— INP ≤ 200 ms (interacción fluida).
— CLS ≤ 0,1 (sin saltos).
— TTFB bajo en móvil.
— CTR al CTA del hero ≥ 3–5% en primeras 2–4 semanas.

Mapa de contenido para “3 segundos” (plantilla práctica)

• Hero: H1 (+keyword), sub-promesa con prueba y CTA único.
• Beneficios (3–5 bullets): orientados a negocio, no a características.
• Servicios (tarjetas): qué incluye, plazo y resultado esperado.
• Prueba social: reseñas breves + logos + 1 micro-caso.
• FAQs: objeciones reales (precio, plazos, contenido, soporte).
• CTA final: mismo texto/estilo que el del hero (consistencia).

Errores a evitar:
— Múltiples CTAs compitiendo.
— Párrafos largos en la primera pantalla.
— Fotos de stock genéricas sin relación con el servicio.
— Menús saturados y sliders que no aportan.

Mini-framework de copy (llénalo en 5 minutos)

1. Quién: “Ayudo a [autónomos/pymes] a [objetivo].”
2. Qué: “Diseño web en WordPress con SEO y velocidad real.”
3. Prueba: “Proyectos listos en 12–20 días. Reseñas ★4,9.”
4. CTA: “Quiero mi web clara”.

Quiero mi web clara