Caso de estudio · Plugins WordPress
WPilot h2w, de un diseño en HTML a una web editable en WordPress
Dos plugins que importan un sitio hecho en HTML, CSS y JavaScript y lo convierten en páginas editables con los elementos nativos de Beaver Builder (h2w-beaver) o de Elementor Free (h2w-elementor). Esta web está hecha con h2w-beaver.
Mi papel
Diseño, desarrollo y mantenimiento
Estado
h2w-beaver 1.0.9 · h2w-elementor 2.1.0
Tipo
Dos plugins WordPress y dos skills de IA
Stack
PHP · Beaver Builder · Themer · Elementor · Tests con snapshots
Un diseño aprobado en HTML se pasa a un constructor visual a mano, sección por sección, y el resultado rara vez coincide con el diseño. Si se entrega como HTML, el cliente no puede editarlo. Y si después el diseño cambia, hay que volver a montarlo todo.
- Un contrato de marcado: el HTML declara sus secciones, columnas, listas y campos editables con atributos
data-bb-*. Lo acompaña una skill de IA que genera prototipos que ya lo cumplen. - Parser y builder: el plugin lee ese HTML y construye filas, columnas y módulos nativos de Beaver Builder. La cabecera y el pie se convierten en plantillas de Themer.
- Reimportar sin perder ediciones: cada nodo guarda una huella, así que al importar una versión nueva del diseño se conservan los cambios que hizo el cliente.
- Informe de importación: muestra qué parte del diseño quedó como módulo nativo y qué parte como HTML.
- La web sigue funcionando sin el plugin: el resultado son páginas normales de Beaver Builder.
h2w-elementor aplica la misma idea a Elementor Free: cada sección se convierte en un widget propio con sus controles, listas repetibles, formularios con reCAPTCHA y las pantallas de WooCommerce dentro de la cabecera y el pie del sitio.
03 · En cifras
En cifras
wpilot.app y esta web se importaron con h2w-beaver.
469
commits entre los dos plugins
97
casos de test con snapshots de referencia
2
constructores: Beaver Builder y Elementor Free
Siguiente caso
WPilot Site Control →
Panel self-hosted para monitorizar webs WordPress, con Next.js, PostgreSQL y Redis.