Cómo convertir una página de Elementor en HTML y CSS simples

Una página creada con Elementor la montan WordPress y PHP en cada visita, pero lo que llega al navegador es HTML, CSS y JavaScript corrientes. Por eso es posible hacer una copia estática: se queda con el resultado y prescinde de la maquinaria que lo produjo. Se hace para alojar una landing page terminada en cualquier sitio, para dejar de mantener una instalación de WordPress en un sitio que nunca cambia o para que una página pesada cargue más rápido.

Elementor no tiene un botón para esto. Su propia exportación produce un archivo de plantilla en JSON, pensado para volver a importarlo en Elementor, no HTML que se pueda alojar. Así que el trabajo se hace en tres pasos: guardar la página renderizada, reducir el CSS a lo que realmente usa y sustituir las partes que dependían de WordPress.

Qué sobrevive a la migración y qué no

Si la página es sobre todo lo de las dos primeras filas, una copia estática es una victoria fácil. Si vive de formularios, listados de tienda o un feed de blog, déjela en WordPress y acelérela allí.

Paso 1: guardar la página renderizada

Cierre primero la sesión de WordPress, o abra la página en una ventana privada. Una visita con la sesión iniciada añade al HTML la barra de administración y sus estilos, y no quiere ninguna de las dos cosas en la copia.

Una página: guárdela desde el navegador

1. Abra la página en Chrome, con la sesión cerrada.
2. Pulse Ctrl+S (Cmd+S en un Mac) y elija Webpage, Complete (Página web completa).
3. Obtendrá un archivo HTML y, a su lado, una carpeta con las imágenes, hojas de estilos y scripts que cargó la página.

Un sitio entero: use un plugin de exportación estática

Para más de un puñado de páginas, un plugin de sitio estático como Simply Static recorre el sitio de WordPress y escribe cada página con sus recursos en una carpeta o en un archivo ZIP. También reescribe los enlaces internos, algo tedioso de hacer a mano. Aun así, revise el resultado página por página: los plugins pueden pasar por alto archivos que solo pide JavaScript.

Paso 2: reducir el CSS a lo que usa la página

Una página típica de Elementor carga la hoja de estilos del tema, el CSS de frontend de Elementor, un archivo CSS por cada tipo de widget, un archivo generado para la propia página y a menudo uno o dos archivos de fuentes. La mayoría de esas reglas dan estilo a widgets que no están en la página. La forma más fiable de encontrar las que sí se usan es dejar que Chrome las grabe.

1. Abra la página publicada, con la sesión cerrada, y abra DevTools.
2. Abra el menú de los tres puntos, luego More tools (Más herramientas), luego Coverage (Cobertura), y pulse su botón de recarga.
3. Use la página: abra el menú móvil, recorra las pestañas y los acordeones, y cambie el tamaño de la ventana a los anchos de su teléfono y su tableta.
4. Pulse Export (Exportar) en el panel Coverage y guarde el archivo JSON.
5. Arrastre ese archivo a la página Coverage JSON a CSS y pulse Extraer CSS usado.
6. Guarde el resultado como una sola hoja de estilos, sustituya las etiquetas <link rel="stylesheet"> de la página por un único enlace a ella y conserve los archivos de fuentes a los que hace referencia.

El eliminador de CSS no utilizado vuelve a escribir cada regla dentro de su propio bloque @media, y aquí eso importa: Elementor guarda sus reglas de tableta y de móvil en media queries, y una herramienta que las pierde hace que el diseño móvil se aplique también en escritorio. Además conserva @font-face y @keyframes enteros.

Si prefiere trabajar con los archivos guardados, la pestaña HTML + CSS de la misma herramienta acepta en su lugar el HTML y las hojas de estilos. Elementor y sus complementos añaden algunas clases con JavaScript después de que carga la página, así que ponga sus prefijos en Conservar siempre, por ejemplo /^elementor-/ y /^e-/, y compare el resultado con la página original antes de fiarse de él.

Paso 3: resolver lo que necesitaba WordPress

Animaciones de entrada y widgets ocultos

Un widget con animación de entrada lleva la clase elementor-invisible, y el JavaScript de Elementor la quita cuando el widget entra en pantalla al desplazarse. En una copia sin ese script, la clase nunca desaparece y el widget sigue invisible. O bien conserve los scripts de frontend de Elementor, o bien quite elementor-invisible del HTML y deje que los widgets aparezcan sin la animación.

Formularios

Un formulario de Elementor envía sus datos a WordPress, que ya no está. Sustitúyalo por un servicio de formularios que acepte un formulario HTML simple, o por un enlace sencillo que abra un correo.

Enlaces y restos

• Revise cada enlace interno: las direcciones de WordPress como /about/ necesitan una carpeta equivalente con un index.html, o una reescritura en el nuevo alojamiento.
• Quite los scripts de WordPress que la página ya no necesita, como el script de emojis, y los números ?ver= de los nombres de archivo si los renombra.
• Conserve las imágenes de srcset a las que apunta el HTML, o los teléfonos cargarán la imagen a tamaño completo.

Compruebe antes de cambiar

1. Abra la copia estática y la original una junto a otra en anchos de escritorio, tableta y teléfono.
2. Abra cada menú, pestaña y acordeón, y recorra toda la página para detectar widgets ocultos.
3. Pase ambas por una prueba de velocidad y compare la cantidad de CSS cargado.
4. Conserve el sitio de WordPress y los archivos CSS completos hasta que la copia estática lleve un tiempo publicada.