Configura la identidad global
En Apariencia → Personalizar → Colores y fuentes define primero la paleta y las tipografías. Esto evita corregir cada bloque de manera individual.
Guía práctica
De este prototipo a WordPress + Kadence.
Esta página traduce la propuesta visual a ajustes y bloques disponibles en Kadence. No necesitas programar para reproducir su estructura principal.
Sistema visual
Paleta con mayor profundidad.
Rojo Vertiz
#BF0000Negro carbón
#1C1C1CCrema
#F5F2ECVerde mineral
#304744Arena textil
#D5C6B5Latón mate
#B28A5BBlanco cálido
#FFFDF8Gris piedra
#777169Personalizador de Kadence
Ajustes globales recomendados.
| Elemento | Escritorio | Tableta | Móvil | Configuración |
|---|---|---|---|---|
| Contenido máximo | 1240 px | 32 px laterales | 16 px laterales | Filas y páginas sin barra lateral. |
| H1 / DM Serif Display | 70–116 px / 0.90 | 64–88 px / 0.92 | 56–78 px / 0.94 | Peso 400, espaciado −0.04 em y sin mayúsculas forzadas. Un solo H1 principal por página. |
| H2 / DM Serif Display | 50–78 px / 0.98 | 46–64 px / 1.00 | 42–58 px / 1.02 | Peso 400 y espaciado −0.03 em. Títulos de las secciones principales. |
| H3 / Barlow Condensed | 30–38 px / 1.05 | 28–34 px / 1.05 | 26–30 px / 1.08 | Peso 600 y mayúsculas. Productos, servicios, valores y bloques internos. |
| H4–H6 / Barlow Condensed | 18–28 px / 1.15 | 18–26 px / 1.15 | 17–24 px / 1.20 | Peso 600. Solo cuando exista una subsección real; no utilizarlos para cambiar el tamaño visual. |
| Antetítulos / Barlow Condensed | 14 px / 1.20 | 14 px / 1.20 | 13 px / 1.20 | Peso 600, mayúsculas y espaciado 0.16 em. Ejemplos: Servicios, Aplicaciones y Así trabajamos. |
| Cuerpo / Inter | 16–18 px / 1.75 | 16 px / 1.70 | 16 px / 1.65 | Peso 400. Párrafos, navegación, botones y formularios. |
| Espaciado de sección | 96–120 px | 82–96 px | 68–82 px | Padding superior e inferior de Row Layout. |
| Botones | 54 px alto | 52–54 px | 52 px alto | Inter 700, sin redondeo; rojo para la acción primaria. |
Sistema tipográfico definitivo
DM Serif Display aporta personalidad y elegancia a los H1 y H2 completos. Barlow Condensed conserva la voz gráfica de la marca en antetítulos, H3–H6, cifras y etiquetas. Inter permanece en párrafos, navegación y controles para asegurar una lectura clara.
Equivalencias
Qué bloque usar.
| Sección del prototipo | Bloques Kadence | Configuración clave |
|---|---|---|
| Hero inicial | Row Layout 2 columnas + Text (Adv) + Buttons + Image | Etiqueta el título principal como H1 y aplica DM Serif Display al encabezado completo. El texto corto superior se mantiene en Barlow Condensed. |
| Encabezados de sección | Text (Adv) | Etiqueta el título principal como H2 en DM Serif Display. Coloca encima un antetítulo independiente en Barlow Condensed; no lo conviertas en otro encabezado si solo cumple una función visual. |
| Banda de confianza | Row Layout 3 columnas + Text (Adv) | Fondo verde mineral, texto crema y separadores verticales. |
| Productos destacados | Row Layout 4 columnas + Info Box | Tarjetas de igual altura, fondo blanco cálido, borde fino y línea roja superior. Usa 2 columnas en tableta y 1 en móvil. |
| Enlaces por categoría | Enlace de Info Box + Ancla HTML | Destinos: productos/#enrollables, #cortinas, #exterior y #motorizacion. Añade un solo botón general debajo. |
| Servicios especializados | Row Layout 2 columnas + Row Layout 4 columnas | Presenta fabricación, instalación, lavado y reparación como servicios independientes. |
| Forma de trabajo | Row Layout 4 columnas + Icon List / Text | Explica la secuencia del cliente; fondo verde mineral, número rojo y adaptación responsiva. |
| FAQ | Accordion | Un panel abierto al inicio, borde superior fino y acento rojo. |
| Contacto | Row Layout 2 columnas + Kadence Form | Incluye nombre, teléfono o WhatsApp, correo, ubicación, interés y mensaje. Añade al costado WhatsApp, correo y horarios; deja el mapa al final solo si existe una dirección pública. |
Orden de trabajo
Implementación sin programación.
Construye el encabezado
Usa el Header Builder de Kadence: logo a la izquierda, navegación principal al centro y un botón de Contacto a la derecha. En móvil conserva logo y menú desplegable.
Crea una plantilla de página
Trabaja con ancho de contenido de 1240 px, sin barra lateral y título de WordPress oculto. Cada página inicia con una fila de ancho contenido y espacios amplios.
Replica la portada por secciones
Usa Row Layout, Advanced Heading, Text, Advanced Button e Info Box. Guarda como patrones las bandas de prueba, el proceso, el llamado rojo y el pie de página.
Integra contenido real
Sustituye las composiciones abstractas por fotografías propias en WebP. Mantén encuadres de interiores, buena luz y proporciones consistentes para conservar la dirección visual.
Conecta la conversión
Cuando tengas WhatsApp y correo oficiales, enlaza todos los botones principales y configura Kadence Forms con aviso de privacidad y confirmación de envío.