Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo crear un layout de landing para WordPress sin depender de ningún page builder, usando únicamente HTML y CSS (y una mínima integración PHP para que WordPress reconozca la plantilla). El enfoque es crear una página ligera, rápida y responsive que puedas adaptar a cualquier proyecto de marketing o producto.

Requisitos y consideraciones previas

• Conocimientos mínimos: HTML, CSS y nociones básicas de WordPress (temas, templates, functions.php).
• Entorno: Tema hijo o tema propio (nunca tocar un tema padre en producción sin un child theme).
• Objetivo: Una plantilla de página llamada Landing Simple que se pueda seleccionar desde el editor de páginas de WordPress.
• Arquitectura: HTML semántico mínimo dentro de la plantilla todo el estilo en un archivo CSS dedicado.

Estructura de archivos sugerida

1. wp-content/themes/tu-tema-child/page-templates/landing.php
2. wp-content/themes/tu-tema-child/css/landing.css
3. wp-content/themes/tu-tema-child/functions.php (para encolar el CSS)

Paso 1 — Crear la plantilla de página (landing.php)

Crea el archivo page-templates/landing.php en tu tema hijo. El archivo debe declarar el nombre de la plantilla en un comentario y usar las funciones de cabecera y pie del tema para mantener menús y scripts esenciales.

  
  

    

      

        
Tu título irresistible aquí
        
Una frase que explique el valor en una línea corta y directa.
        

          Empieza ahora
          Ver más
        
        

          
✅ Prueba gratuita
          
🔒 Pago seguro
          
📞 Soporte 24/7
        
      
      

        lt!-- Sustituye por ltimg src=... alt=...>gt -->
        /images/hero-mockup.png alt=Mockup del producto>
      
    
  

  
  

    

      
Características principales
      

        

          
Rápido
          
Diseñado para cargar en milisegundos.
        
        

          
Diseño adaptativo
          
Se adapta a cualquier pantalla.
        
        

          
Fácil de usar
          
Interfaz minimalista y clara.
        
      
    
  

  
  

    

      
Regístrate y comienza
      
 method=post class=signup-form>
        
        
          Nombre
          
        
        
          Email
          
        
        Empezar
      
    
  

  
  

Notas sobre la plantilla

• Usamos get_header() y get_footer() para mantener scripts, head y pie del tema.
• Las clases (.container, .hero, .features-grid) son puramente de estilo — puedes renombrarlas según tu convención BEM o similar.
• El formulario apunta a admin-post.php para permitir el procesamiento en server-side sin plugins (ver más abajo).

Paso 2 — CSS para la landing (landing.css)

Guarda este archivo en css/landing.css. Es un CSS modular, con variables, diseño responsive usando flex y grid, y reglas para elementos clave: hero, features, CTA y footer.

/ landing.css - Estilos base para la landing /
:root{
  --max-width: 1200px
  --gap: 24px
  --bg: #ffffff
  --text: #1f2937
  --muted: #6b7280
  --accent: #0ea5a4
  --accent-dark: #0b8b88
  --radius: 8px
  --container-padding: 16px
}

/ Reset ligero /
{box-sizing: border-box}
html,body{height:100%}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial color:var(--text) background:var(--bg) margin:0 -webkit-font-smoothing:antialiased}

/ Contenedor centrado /
.landing .container{
  max-width:var(--max-width)
  margin:0 auto
  padding:0 var(--container-padding)
}

/ Hero /
.hero{
  padding:60px 0
  background: linear-gradient(180deg, rgba(14,165,164,0.05), transparent 60%)
}
.hero-inner{
  display:flex
  align-items:center
  gap:var(--gap)
}
.hero-content{
  flex:1 1 480px
  max-width:640px
}
.hero-content h1{
  font-size:clamp(28px, 4.5vw, 44px)
  margin:0 0 12px
  line-height:1.05
}
.lead{color:var(--muted) font-size:18px margin:10px 0 20px}
.cta-row{display:flex gap:12px align-items:center margin-bottom:16px}
.btn{
  display:inline-block
  padding:12px 18px
  border-radius:var(--radius)
  text-decoration:none
  border:1px solid transparent
  cursor:pointer
  font-weight:600
}
.btn.primary{background:var(--accent) color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.btn.ghost{background:transparent color:var(--accent) border-color:var(--accent)}

/ Hero media /
.hero-media{flex:0 0 420px display:flex justify-content:center}
.hero-media img{max-width:100% height:auto border-radius:12px box-shadow:0 10px 30px rgba(17,24,39,0.08)}

/ Trust list /
.trust{display:flex gap:14px list-style:none padding:0 margin:20px 0 0}
.trust li{color:var(--muted) font-size:14px}

/ Features /
.features{padding:48px 0}
.features h2{margin:0 0 20px}
.features-grid{
  display:grid
  grid-template-columns:repeat(3,1fr)
  gap:20px
}
.feature{background:#fff padding:20px border-radius:10px box-shadow:0 6px 20px rgba(17,24,39,0.04)}
.feature h3{margin-top:0}

/ Signup form /
.signup{padding:48px 0 background:#f9fafb}
.signup-form{display:flex gap:12px flex-wrap:wrap align-items:center}
.signup-form label{display:flex flex-direction:column flex:1 1 220px}
.signup-form input{padding:10px 12px border-radius:8px border:1px solid #e5e7eb}
.signup-form button{border:none}

/ Footer /
.landing-footer{padding:20px 0 text-align:center color:var(--muted)}

/ Responsive /
@media (max-width: 920px){
  .hero-inner{flex-direction:column-reverse text-align:center}
  .hero-media{flex-basis:auto}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .trust{justify-content:center}
}
@media (max-width: 560px){
  .features-grid{grid-template-columns:1fr}
  .cta-row{flex-direction:column gap:10px}
  .signup-form{flex-direction:column}
}

Consejos de estilo

• Usa variables CSS (como –accent) para que puedas cambiar rapidamente colores globales.
• Mantén las imágenes optimizadas en WebP y con srcset si es posible.
• Evita cargas externas innecesarias que ralenticen la landing.

Paso 3 — Encolar el CSS desde functions.php

En el functions.php de tu tema hijo, añade una función para encolar el archivo landing.css solo cuando se cargue la plantilla de landing (mejor rendimiento).

Importante

El uso de filemtime garantiza que el navegador recargue el CSS cuando se actualice durante el desarrollo. En producción puedes reemplazar por un número de versión estático.

Paso 4 — Procesar el formulario (opcional, PHP)

Si quieres que el formulario funcione sin plugins, usa admin-post.php y añade hooks para manejar la acción. A continuación una implementación simple (no olvides sanitizar y validar para producción).

 name ? name : email,
    post_content => Email:  . email,
    post_status => publish,
    post_type => lead // opcional
  ))

  wp_safe_redirect( wp_get_referer() . #form?status=ok )
  exit
}
add_action(admin_post_nopriv_landing_signup, landing_handle_signup)
add_action(admin_post_landing_signup, landing_handle_signup)
?>

Optimización y buenas prácticas

• Carga crítica: Mantén el CSS esencial en landing.css y evita cargas de fuentes pesadas. Considera inlining del CSS crítico si la landing tiene tráfico elevado.
• Imágenes responsivas: Usa srcset y tamaños adecuados sirve WebP si es posible.
• Accesibilidad: Asegura contrastes y labels en formularios. Añade atributos alt en todas las imágenes.
• Medición: Integra herramientas de analítica minimalistas o server-side para medir conversiones sin perjudicar la velocidad.
• SEO: Añade meta tags en el head (puede hacerse desde get_header() o con plugins de SEO) y usa un título claro y descripción única por landing.

Pruebas y validación

1. Selecciona la plantilla Landing Simple en una página nueva y publica en modo privado o staging.
2. Verifica en móviles y tablets (usa Chrome DevTools para pruebas rápidas).
3. Haz pruebas de velocidad con herramientas como PageSpeed Insights y Lighthouse.
4. Revisa el formulario: envíos, redirecciones y recepción de datos.

Checklist final antes de lanzar

• Archivo landing.php en page-templates y sin errores PHP.
• landing.css en la ruta correcta y encolado conditionalmente.
• Imágenes optimizadas y con alt.
• Formulario seguro y tratamiento de datos conforme a legislación aplicable.
• Pruebas responsive completadas y validación de accesibilidad básica.

Resumen

Con esta plantilla y estilos tienes una base robusta para crear landings sin depender de builders. Mantén el CSS modular, optimiza recursos y procesa formularios con seguridad. Puedes extender la plantilla añadiendo bloques dinámicos, A/B testing, o integración con tu CRM directamente desde la función PHP mostrada.