Como transformar uma página do Elementor em HTML e CSS puros
O Elementor já entrega ao navegador HTML e CSS comuns; o trabalho é salvar essa saída, reduzir o CSS ao que a página usa e substituir as poucas partes que dependem do WordPress.
Uma página feita com o Elementor é montada pelo WordPress e pelo PHP a cada visita, mas o que chega ao navegador é HTML, CSS e JavaScript comuns. É por isso que uma cópia estática é possível: você fica com a saída e descarta a máquina que a produziu. As pessoas fazem isso para hospedar uma landing page pronta em qualquer lugar, para parar de manter uma instalação do WordPress em um site que nunca muda ou para fazer uma página pesada carregar mais rápido.
O Elementor não tem um botão para isso. A exportação dele gera um arquivo de template em JSON, feito para ser importado de volta no Elementor, e não HTML que você possa hospedar. Então o trabalho acontece em três etapas: salvar a página renderizada, reduzir o CSS ao que ela realmente usa e substituir as partes que dependiam do WordPress.
O que sobrevive à mudança e o que não sobrevive
| Parte da página | Em uma cópia estática |
|---|---|
| Layout, texto, imagens, cores, fontes | Funciona: é HTML e CSS |
| Efeitos de hover e layouts responsivos | Funciona: CSS puro |
| Sliders, carrosséis, abas, acordeões, pop-ups | Só se você mantiver os arquivos JavaScript do Elementor, ou recriá-los |
| Animações de entrada | Precisam do JavaScript do Elementor; sem ele os widgets continuam ocultos (veja abaixo) |
| Formulários do Elementor, comentários, busca | Param de funcionar: enviam dados ao WordPress |
| Listas de posts ou produtos que mudam | Congeladas no momento em que você salvou a página |
Se a página é quase toda feita do que está nas duas primeiras linhas, uma cópia estática é uma vitória fácil. Se ela vive de formulários, listas de produtos ou um feed de blog, deixe-a no WordPress e acelere-a por lá.
Etapa 1: salvar a página renderizada
Saia do WordPress primeiro, ou abra a página em uma janela anônima. Uma visita com login adiciona ao HTML a barra de administração e os estilos dela, e você não quer nenhum dos dois na cópia.
Uma página: salve pelo navegador
- Abra a página no Chrome, sem login.
- Pressione Ctrl+S (Cmd+S no Mac) e escolha Webpage, Complete (Página da Web completa).
- Você recebe um arquivo HTML e, ao lado dele, uma pasta com as imagens, as folhas de estilos e os scripts que a página carregou.
Um site inteiro: use um plugin de exportação estática
Para mais do que algumas páginas, um plugin de site estático como o Simply Static percorre o site WordPress e grava cada página com seus recursos em uma pasta ou em um arquivo ZIP. Ele também reescreve os links internos, algo cansativo de fazer à mão. Mesmo assim, confira o resultado página por página: plugins podem deixar passar arquivos que só o JavaScript solicita.
Etapa 2: reduzir o CSS ao que a página usa
Uma página típica do Elementor carrega a folha de estilos do tema, o CSS de frontend do Elementor, um arquivo CSS por tipo de widget, um arquivo gerado para a própria página e muitas vezes um ou dois arquivos de fonte. A maioria dessas regras estiliza widgets que não estão na página. O jeito mais confiável de encontrar as que são usadas é deixar o Chrome gravá-las.
- Abra a página publicada, sem login, e abra o DevTools.
- Abra o menu de três pontos, depois More tools (Mais ferramentas), depois Coverage (Cobertura), e clique no botão de recarregar do painel.
- Use a página: abra o menu mobile, passe pelas abas e pelos acordeões, e redimensione a janela para as larguras de celular e tablet.
- Clique em Export (Exportar) no painel Coverage e salve o arquivo JSON.
- Arraste esse arquivo para a página Coverage JSON para CSS e clique em Extrair CSS usado.
- Salve o resultado como uma única folha de estilos, troque as tags
<link rel="stylesheet">da página por um único link para ela e mantenha os arquivos de fonte que ela referencia.
O Removedor de CSS não utilizado escreve cada regra de volta dentro do seu próprio bloco @media, e isso importa aqui: o Elementor guarda as regras de tablet e de celular em media queries, e uma ferramenta que as perde faz o layout mobile valer também no desktop. Ele também mantém @font-face e @keyframes inteiros.
Se você preferir trabalhar a partir dos arquivos salvos, a aba HTML + CSS da mesma ferramenta recebe o HTML e as folhas de estilos. O Elementor e seus complementos adicionam algumas classes com JavaScript depois que a página carrega, então coloque os prefixos deles em Manter sempre, por exemplo /^elementor-/ e /^e-/, e compare o resultado com a página original antes de confiar nele.
Etapa 3: resolver o que precisava do WordPress
Animações de entrada e widgets ocultos
Um widget com animação de entrada leva a classe elementor-invisible, e o JavaScript do Elementor a remove quando o widget aparece na rolagem. Em uma cópia sem esse script, a classe nunca sai e o widget continua invisível. Ou mantenha os scripts de frontend do Elementor, ou remova elementor-invisible do HTML e deixe os widgets aparecerem sem a animação.
Formulários
Um formulário do Elementor envia os dados para o WordPress, que não está mais lá. Substitua-o por um serviço de formulários que aceite um formulário HTML simples, ou por um link simples que abra um e-mail.
Links e sobras
- Confira cada link interno: endereços do WordPress como
/about/precisam de uma pasta correspondente com umindex.html, ou de uma regra de reescrita na nova hospedagem. - Remova os scripts do WordPress de que a página não precisa mais, como o script de emojis, e os números
?ver=dos nomes de arquivo se você renomear arquivos. - Mantenha as imagens do
srcsetpara as quais o HTML aponta, ou os celulares vão carregar a imagem em tamanho cheio.
Confira antes de trocar
- Abra a cópia estática e o original lado a lado nas larguras de desktop, tablet e celular.
- Abra cada menu, aba e acordeão, e role a página inteira para achar widgets ocultos.
- Passe os dois por um teste de velocidade e compare a quantidade de CSS carregada.
- Mantenha o site WordPress e os arquivos CSS completos até a cópia estática estar no ar há algum tempo.