Pasar un diseño aprobado a WordPress es la parte del proyecto que más horas consume y la que menos se nota desde fuera. El cliente ya vio el diseño en Figma; para él, la web "ya está hecha". Para ti empieza el trabajo de verdad: reconstruir cada sección, conectar cada texto a un campo editable y migrar sin romper nada.
Esta guía repasa las opciones que tienes, qué te cuesta cada una y cómo acortar el proceso cuando el objetivo es un WordPress estándar que el cliente pueda editar.
Las tres formas habituales de llevar un diseño a WordPress
Casi todos los equipos acaban en una de estas tres vías:
| Opción | Cómo funciona | Lo mejor | Lo que cuesta |
|---|---|---|---|
| Maquetar a mano un tema a medida | HTML y CSS sección por sección, después plantillas PHP y campos | Control total y código ligero | Días por página y campos conectados uno a uno |
| Page builder (Elementor, Divi, Bricks) | Reconstruyes el diseño arrastrando bloques | Rápido de montar y fácil de tocar para el cliente | El diseño se rehace a mano igualmente y el sitio queda atado al plugin |
| Tema prediseñado | Eliges un tema y lo adaptas | Arranque inmediato | El diseño se adapta al tema, no al revés |
Ninguna es mala por sí misma. El problema aparece cuando el presupuesto del proyecto cubre las horas de una opción rápida y el cliente espera la fidelidad de un desarrollo a medida.
Qué tiene que tener el resultado
Antes de elegir herramienta conviene fijar qué entregas. Para una agencia o un freelancer, un buen WordPress a partir de un diseño cumple cuatro cosas:
- Respeta el diseño: espaciados, tipografías y colores del original, en escritorio y en móvil.
- Es editable sin riesgo: el cliente cambia textos, imágenes y botones desde el escritorio de WordPress sin tocar la maqueta.
- Es estándar: plantillas de página, menús nativos y un tema que cualquier desarrollador entiende dentro de un año.
- Se sube a producción sin sorpresas: las URLs del entorno de pruebas no aparecen en el sitio final.
Cómo hacerlo con Design2Press en cuatro pasos
Design2Press parte del diseño real, en forma de capturas, y genera las plantillas del tema con Tailwind CSS y los campos editables a la vez.
1. Crea el proyecto
Cada proyecto tiene su propio WordPress con SQLite, Secure Custom Fields y el tema base ya instalados. Al crearlo indicas el dominio final y una frase sobre la marca, el sector y el tono, que se usa al generar todas las plantillas.
2. Sube las capturas del diseño
Exporta cada página desde Figma, Sketch, Adobe XD o la herramienta que uses. El Studio acepta PNG, JPG o WebP, hasta 10 imágenes de 10 MB por tanda. Puedes generar una plantilla por imagen o unir varias capturas de una página larga en una sola plantilla.
3. Revisa el resultado
La plantilla aparece en la vista previa del Studio, sobre un WordPress real. Puedes alternar entre el resultado y el diseño original para compararlos, ver la página en escritorio, tablet y móvil, y regenerarla si algo no te convence. Al subir las capturas también puedes añadir instrucciones, por ejemplo «los testimonios en un carrusel». En nuestras pruebas internas, cada plantilla tarda unos dos minutos.
4. Exporta a producción
Descargas solo el tema, para un WordPress que ya existe, o el sitio completo: WordPress, plugins, tema, imágenes y base de datos, con la URL de producción ya aplicada en todo el contenido.
Cómo preparar las capturas para que el resultado se parezca al diseño
La calidad de la entrada marca la del resultado. Estas pautas ahorran regeneraciones:
- Exporta a 1440 o 1920 píxeles de ancho. Con capturas pequeñas se pierden detalles de tipografía y espaciado.
- Una captura por página. Si la página es muy larga, divídela en varias y elige la opción de unirlas en una plantilla.
- Usa textos reales o muy cercanos a los finales. El contenido de ejemplo se convierte en el contenido inicial de los campos.
- Incluye los estados que importan. Si el menú móvil tiene un diseño propio, añade su captura.
- Pon nombres claros a las páginas: Inicio, Servicios, Contacto. Ese nombre se usa en la página de WordPress y en el archivo de la plantilla.
Qué revisar antes de entregar al cliente
Aunque la generación sea rápida, la entrega sigue siendo tu responsabilidad. Antes de exportar, repasa:
- La página en móvil, sobre todo los menús, los botones y las imágenes grandes.
- Que cada texto visible tenga su campo en el editor y que los campos tengan nombres que el cliente entienda.
- Los menús del header y del footer en Apariencia → Menús.
- Las imágenes de ejemplo: sustitúyelas por las definitivas antes de publicar.
- La URL de producción configurada en el proyecto, para que la exportación la aplique.
Preguntas frecuentes
¿Funciona con diseños de Figma?
Sí. Design2Press trabaja con capturas, así que da igual la herramienta de diseño: Figma, Sketch, Adobe XD, Penpot o incluso una web existente.
¿El cliente podrá editar la web?
Cada texto, imagen, botón y lista queda conectado a un campo de Secure Custom Fields, agrupado por secciones. El cliente edita desde el escritorio de WordPress sin tocar la maqueta.
¿Necesito plugins de pago?
No. El sitio exportado es WordPress estándar y solo depende de Secure Custom Fields, que es gratuito y está en el directorio oficial de plugins.
¿Puedo seguir desarrollando el tema a mano?
Sí. El tema usa plantillas de página de WordPress y Tailwind CSS compilado, con el código fuente de los estilos incluido para volver a compilarlo.