Introducción

Este tutorial explica paso a paso cómo crear un layout de landing simple y moderno —hero 3 columnas CTA— usando solo HTML y CSS. Está pensado para integrarse en WordPress como parte de una plantilla, un bloque personalizado o contenido HTML en un editor que acepte código. No se utilizan frameworks ni JavaScript el objetivo es obtener un resultado ligero, accesible y completamente responsive.

Resumen de la estructura visual

• Hero: bloque superior con fondo (imagen o color), título grande, subtítulo y llamada a la acción primaria.
• Sección de 3 columnas: filas con icono/imágen, título y texto descriptivo por columna.
• CTA final: franja destacada con mensaje corto y botón para conversión.

Recomendaciones previas

• Usa imágenes optimizadas (WebP/AVIF si es posible) y tamaños adaptativos.
• Mantén la tipografía y colores definidos en variables CSS para fácil personalización.
• Prioriza accesibilidad: contraste, roles ARIA si es necesario y semántica en el HTML (en WordPress puedes envolver con etiquetas semánticas en la plantilla PHP).

Estructura HTML (marcado)

A continuación tienes el HTML mínimo que representa el layout. Pégalo en tu plantilla de página, en un bloque HTML o en un archivo parcial del theme.

  

    
Título principal de la landing
    
Subtítulo explicativo que refuerza el mensaje.
    Empezar ahora
  



  

    

      
      
Beneficio 1
      
Descripción breve del beneficio o característica.
    
    

      
      
Beneficio 2
      
Descripción breve del beneficio o característica.
    
    

      
      
Beneficio 3
      
Descripción breve del beneficio o característica.
    
  



  

    

      
¿Listo para comenzar?
      
Mensaje corto que motive la acción.
    
    Contactar
  

CSS completo y explicado

Este CSS cubre estilos base, tipografías, layout responsive y estados de botones. Puedes añadirlo en el archivo style.css de tu theme o encolar un archivo CSS específico desde functions.php.

:root{
  --color-bg: #ffffff
  --color-primary: #0d6efd
  --color-primary-700: #0b5ed7
  --color-accent: #ff6b6b
  --color-text: #222
  --max-width: 1200px
  --container-padding: 1rem
  --radius: 8px
  --shadow: 0 6px 24px rgba(16,24,40,0.08)
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}

/ Reset ligero /
{box-sizing:border-box}
img{max-width:100%height:autodisplay:block}

/ Contenedor central /
.container{
  max-width:var(--max-width)
  margin:0 auto
  padding-left:var(--container-padding)
  padding-right:var(--container-padding)
}

/ HERO /
.landing-hero{
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.25)), url(ruta/a/fondo-hero.jpg)
  background-size:cover
  background-position:center
  color: #fff
  padding:4.5rem 0
  display:flex
  align-items:center
}
.hero-inner{
  width:100%
  max-width:980px
  margin:0 auto
  text-align:center
  padding:2rem 1rem
}
.hero-title{
  font-family:var(--font-sans)
  font-size: clamp(1.8rem, 4vw, 3.5rem)
  line-height:1.05
  margin:0 0 .75rem 0
  font-weight:700
}
.hero-subtitle{
  font-size:1.125rem
  opacity:0.95
  margin:0 0 1.25rem 0
}
.btn{
  display:inline-block
  text-decoration:none
  padding:.75rem 1.25rem
  border-radius:6px
  font-weight:600
  transition:transform .15s ease, box-shadow .15s ease
}
.btn:focus{outline:2px solid #fff outline-offset:3px}
.btn-primary{
  background:var(--color-primary)
  color:#fff
  box-shadow:var(--shadow)
}
.btn-primary:hover{transform:translateY(-3px) background:var(--color-primary-700)}

/ 3 columnas /
.features-3cols{
  padding:3rem 0
  background:var(--color-bg)
  color:var(--color-text)
}
.features-3cols .container{
  display:grid
  grid-template-columns:repeat(3, 1fr)
  gap:1.5rem
  align-items:start
}
.feature{
  background:#fff
  border-radius:var(--radius)
  padding:1.5rem
  box-shadow:0 6px 18px rgba(10,10,10,0.04)
  text-align:center
}
.feature-icon{width:64pxheight:64pxmargin:0 auto 1rem}
.feature-title{margin:.5rem 0 font-size:1.125rem}
.feature-text{color: #555 font-size:0.975rem margin:0}

/ CTA strip /
.cta-strip{
  background:linear-gradient(90deg, #071A52 0%, var(--color-primary) 100%)
  color:#fff
  padding:1.5rem 0
  margin-top:2rem
}
.cta-inner{
  display:flex
  gap:1rem
  align-items:center
  justify-content:space-between
  flex-wrap:wrap
}
.cta-text h2{margin:0 font-size:1.25rem}
.btn-cta{background:#fffcolor:var(--color-primary) padding:.6rem 1rem border-radius:6px}

/ Responsive /
@media (max-width: 900px){
  .features-3cols .container{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 600px){
  .landing-hero{padding:3rem 0}
  .cta-inner{flex-direction:column align-items:stretch text-align:center}
  .features-3cols .container{grid-template-columns:1fr}
  .hero-inner{padding:1rem}
  .btn{width:100%}
  .btn-primary{max-width:320pxmargin:0 auto}
}

Explicación de puntos clave del CSS

• Variables CSS: facilitan cambio de paleta y ajustes globales.
• Hero: usa una imagen de fondo con un overlay semitransparente para garantizar legibilidad del texto.
• Grid para columnas: se aplica grid con gap para mantener consistencia y hacer el switch a 2/1 columnas vía media queries.
• Botones: se diseñan como enlaces para conservar semántica si el destino es otra URL. Si necesitas comportamiento de formulario, cambia por ltbuttongt en tu plantilla.

Accesibilidad y SEO

• Incluye atributos alt descriptivos en las imágenes y iconos.
• Usa encabezados (h1/h2/h3) en orden lógico: en el ejemplo el h1 está en el hero, y los subtítulos en h3 ajusta según el contexto de tu plantilla.
• Contraste: verifica que el texto sobre imágenes cumple con ratios WCAG emplea overlays cuando sea necesario.
• Velocidad: carga diferida (loading=lazy) en imágenes no críticas y optimiza tamaños.

Integración en WordPress

A continuación un ejemplo breve para encolar el CSS desde functions.php y ofrecer el HTML dentro de una plantilla de página o un bloque personalizado.

// En functions.php del theme (ejemplo)
function tema_enqueue_landing_styles() {
  wp_enqueue_style( landing-layout, get_stylesheet_directory_uri() . /css/landing-layout.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, tema_enqueue_landing_styles )

Coloca el HTML del bloque dentro de una plantilla de página (por ejemplo page-landing.php) o pégalo en un bloque HTML del editor de WordPress. Si quieres crear un shortcode:

// Shortcode simple en functions.php
function landing_shortcode() {
  ob_start()
  ?>
  
  
 ... 
  
Variantes y personalización

Modificar el hero para que use un vídeo como background (considera autoplay muted loop y poster para fallback).
Agregar un formulario simple en la CTA final usando un formulario de contacto o un shortcode de formulario (por ejemplo Contact Form 7 o Gravity Forms).
Usar CSS variables para tematizar por campaña: cambia colores, radios y sombras sin tocar el resto del CSS.

Consejos finales y buenas prácticas

Prueba el layout en dispositivos reales y con diferentes resoluciones para ajustar breakpoints.
Mantén el HTML lo más semántico posible dentro de tu integración en WordPress (usa templates o bloques con etiquetas ltheadergt, ltmaingt etc. en los archivos PHP, aunque en este artículo no se muestran).
Audita rendimiento y accesibilidad con Lighthouse o herramientas similares antes de publicar.

Conclusión
Con HTML y CSS puros puedes construir una landing page limpia y efectiva compuesta por un hero, una sección de 3 columnas y una CTA final. La solución propuesta es modular, responsive y fácil de integrar en WordPress mediante la encolación de estilos y el uso de plantillas o shortcodes. Personaliza colores, tipografías e imágenes según tu marca y mantén las buenas prácticas de accesibilidad y rendimiento.