Introducción
En este tutorial aprenderás a diseñar una tabla de precios responsive para WordPress sin utilizar plugins, únicamente con HTML y CSS. La idea es crear un bloque limpio que puedas pegar en un bloque Custom HTML y añadir el CSS en el personalizador (Apariencia → Personalizar → CSS adicional) o en el archivo de estilos del tema hijo. El resultado será una tabla de precios moderna, accesible y fácil de personalizar.
Concepto y decisiones de diseño
En lugar de usar una estructura basada en div, utilizaremos una lista (ul / li) como contenedor de las tarjetas de precios. Esto facilita el orden semántico y hace más sencillo adaptarlo a pantallas pequeñas con flexbox. Cada tarjeta contendrá título, precio, lista de características y un enlace que actúa como botón.
Estructura HTML (qué pegar en el bloque Custom HTML)
Pega el siguiente HTML en un bloque Custom HTML de WordPress. Observa que usamos clases para poder aplicar estilos desde CSS:
-
Básico
€9/mes
- 1 proyecto
- Soporte por email
- 2 GB almacenamiento
-
Pro
€29/mes
- Proyectos ilimitados
- Soporte prioritario
- 50 GB almacenamiento
-
Empresa
€99/mes
- Soporte 24/7
- IP dedicada
- Almacenamiento ilimitado
CSS (añádelo en CSS adicional o en tu tema hijo)
Este CSS estiliza las tarjetas, controla la respuesta en distintos anchos y añade estados visuales como la tarjeta destacada.
/ Contenedor principal /
.pricing {
list-style: none
margin: 0
padding: 0
display: flex
gap: 24px
justify-content: center
flex-wrap: wrap
align-items: stretch
}
/ Cada tarjeta /
.plan {
box-sizing: border-box
background: #ffffff
border: 1px solid #e6e9ee
border-radius: 12px
padding: 24px
width: 320px / base width /
flex: 1 1 260px / flexible, con mínimo /
display: flex
flex-direction: column
align-items: stretch
transition: transform 220ms ease, box-shadow 220ms ease
}
/ Pequeña elevación al pasar el ratón /
.plan:hover {
transform: translateY(-6px)
box-shadow: 0 14px 30px rgba(20,20,40,0.08)
}
/ Tarjeta destacada (por ejemplo popular) /
.plan.popular {
border-color: #1e88e5
background: linear-gradient(180deg, #fff 0%, #fbfdff 100%)
box-shadow: 0 10px 30px rgba(30,136,229,0.08)
transform: translateY(-2px)
}
/ Título y precio /
.plan-title {
margin: 0 0 8px 0
font-size: 1.12rem
text-align: center
color: #222
}
.plan-price {
margin: 0 0 18px 0
font-weight: 700
text-align: center
font-size: 1.6rem
color: #111
}
.plan-price .currency {
font-size: 0.9rem
vertical-align: top
margin-right: 4px
color: #666
}
.plan-price .period {
display: block
font-size: 0.9rem
font-weight: 500
color: #777
margin-top: 6px
}
/ Lista de características /
.features {
list-style: none
padding: 0
margin: 0 0 20px 0
color: #444
flex-grow: 1 / empuja el CTA hacia abajo /
}
.features li {
padding: 8px 0
border-top: 1px dashed #f0f2f5
font-size: 0.95rem
}
/ Botón (enlace estilizado) /
.cta {
display: inline-block
text-decoration: none
text-align: center
padding: 12px 16px
border-radius: 8px
background-color: #1e88e5
color: #fff
font-weight: 700
transition: background-color 160ms ease, transform 160ms ease
}
.cta:hover,
.cta:focus {
background-color: #1669b3
transform: translateY(-2px)
outline: none
}
/ Variación visual para el plan popular (botón más destacado) /
.plan.popular .cta {
background-color: #ff7043
}
.plan.popular .cta:hover {
background-color: #e65b33
}
/ Responsive: en pantallas pequeñas apila y ajusta tamaños /
@media (max-width: 880px) {
.pricing {
gap: 16px
padding: 0 12px
}
.plan {
width: 100%
max-width: 540px
padding: 18px
}
.plan-price {
font-size: 1.45rem
}
}
/ Mobile: ajustar aún más /
@media (max-width: 420px) {
.plan {
padding: 14px
border-radius: 10px
}
.plan-title { font-size: 1rem }
.plan-price { font-size: 1.2rem }
.cta { padding: 10px 12px font-size: 0.95rem }
}
Cómo integrarlo en WordPress paso a paso
- Bloque HTML: Edita la página o entrada donde quieras la tabla y añade un bloque Custom HTML. Pega el código HTML del bloque anterior.
- CSS: Ve a Apariencia gt Personalizar gt CSS adicional y pega el CSS proporcionado. Guarda cambios.
- Verifica: Comprueba en móvil y escritorio que la tabla se adapta. Si usas caché, purga la caché del sitio y del navegador.
- Enlaces reales: Sustituye los href=# por las URLs de pago o formularios reales. Usa enlaces con HTTPS y agrega parámetros UTM si quieres seguimiento.
Personalizaciones rápidas
- Cambiar colores: modifica los valores hexadecimales en el CSS (.plan, .cta, .plan.popular).
- Mostrar descuentos: añade un elemento span con clase old-price dentro de .plan-price y dale estilo (tachado, color secundario).
- Añadir iconos: puedes incluir iconos SVG inline dentro de cada li de .features para más claridad (pega SVG directamente en el HTML del Custom HTML).
- Animación de entrada: aplica animation o transition para efectos al cargar la página.
Accesibilidad y SEO
- Textos descriptivos: usa títulos claros (Básico, Pro, Empresa) y descripciones concisas en la lista de características.
- Enlaces accesibles: añade aria-label a los enlaces CTA para describir la acción exacta (ej. Comprar plan Pro).
- Contraste: asegúrate de que los colores del botón y el texto cumplan contrast ratio suficiente para legibilidad.
Pruebas y resolución de problemas
- Si el estilo no se aplica, comprueba la especificidad. Añade !important temporalmente para diagnosticar conflictos con CSS del tema, y luego refactoriza si es necesario.
- Si el HTML se filtra o cambia, usa un bloque Custom HTML en lugar de visual o comprueba si el constructor del tema está modificando etiquetas.
- Comprueba en varios navegadores y limpia la caché cuando actualices estilos.
Resumen
Con una estructura semántica basada en ul/li y CSS moderno (flexbox y media queries) puedes crear una tabla de precios responsive, ligera y sin plugins para WordPress. Pega el HTML en un bloque Custom HTML y el CSS en el personalizador para obtener un resultado profesional y fácilmente modificable.
Leave a Reply