WPForms Elementor estilos quebrados: corrigir

Tipo Page Builders

Nome do erro Conflito de estilos entre WPForms e Elementor EN: WPForms and Elementor style conflict

Severidade Atenção

Descrição O conflito de estilos entre WPForms e Elementor surge quando o formulário perde a aparencia dentro de uma página do Elementor: campos sem borda, botao sem cor ou layout em coluna única. Vem da opção de estilo do WPForms desligada, do Modern Markup desativado ou do CSS global do Elementor sobrescrevendo o formulário.

Conteúdo exclusivo para membros Pro

Faça upgrade para acessar este item completo.

// ★ Conteúdo disponível para membros Pro...
// Faça upgrade para acessar este item.

Perguntas frequentes

Por que o formulário fica bonito no WPForms mas quebra no Elementor?

Na pre-visualizacao do WPForms so existe o CSS do formulário. Na página do Elementor entram também os estilos globais de fonte e cor do builder e do tema, que competem com o CSS do WPForms. Se a opção de estilo do formulário estiver fraca ou desligada, o Elementor vence e o formulário perde a aparencia.

A aba Estilo do widget WPForms não aparece no Elementor. O que falta?

A aba de estilo so surge quando o Modern Markup esta ligado nas configurações gerais do WPForms. Ligue o botao Use Modern Markup, salve, recarregue o editor do Elementor e a aba de estilo do widget passa a aparecer com os controles de campo, label e botao.

Qual opção de Include Form Styling devo usar com Elementor?

Use a opção padrão, Base and form theme styling. Ela carrega a camada de tema do formulário, que e a mais agressiva e tende a sobrescrever o que o tema ou o Elementor tentam aplicar. As opções Base styling only e No styling deixam o formulário a merce do CSS do tema.

Os campos do formulário empilham em uma coluna so. Como resolver?

O layout multi-coluna depende do CSS completo do WPForms. Ele quebra quando a opção esta em Base styling only ou quando o cache removeu o arquivo de estilo. Volte para Base and form theme styling e limpe o cache para os campos voltarem a ficar lado a lado.

O estilo aparece no editor do Elementor mas some na página publicada. Por que?

Quase sempre e cache. O plugin de otimização ou o próprio Elementor servem uma versão da página sem o CSS atualizado do formulário. Regenere os arquivos CSS do Elementor, limpe o cache do plugin de otimização e exclua o CSS do WPForms da combinacao de arquivos.

Posso resolver o conflito so com CSS adicional?

Da para neutralizar regras agressivas do tema com CSS mirando o container do formulário, mas isso e o último passo. Primeiro confirme a opção de estilo e o Modern Markup, porque o CSS adicional vira manutenção eterna se a base do WPForms estiver desligada.

O CSS global do Elementor afeta todos os formulários do site?

Sim. A tipografia e as cores globais do Elementor são aplicadas em todo o site e atingem os formulários que herdam estilo do tema. Por isso a recomendacao e deixar a camada de tema do WPForms ativa, para o formulário ter estilo próprio acima do global do builder.

Pro Grave

Como corrigir CSS do Elementor que não aplica no frontend

O CSS do Elementor que nao aplica no frontend deixa a pagina publica sem estilo (crua) enquanto o editor mostra o layout correto. A causa quase sempre e o arquivo de CSS do Elementor corrompido ou nao regenerado, o cache servindo uma versao antiga, ou o modo de impressao de CSS configurado de forma incompativel com o servidor.

Pro Atenção

Como corrigir fontes do Google que não carregam no Elementor

O Google Fonts no Elementor não carrega quando o CSS gerado guarda referências antigas, a opção de fontes locais baixa arquivos incompletos ou o cache serve a folha antiga. O texto cai para Arial no frontend, mesmo a fonte aparecendo certa no editor.

Pro Grave

Como corrigir o conflito de JavaScript entre Ultimate Addons e WP Rocket

Widgets interativos do Ultimate Addons for Elementor param de funcionar no frontend quando o WP Rocket segura o uael-frontend-script.js pelo Delay JavaScript Execution ou o junta com outros arquivos pelo Combine JavaScript. A correção e excluir o script do plugin dessas otimizacoes e limpar o cache.

Pro Grave

Como corrigir erros de exibição de produtos do WooCommerce no Elementor

Os produtos do Elementor com WooCommerce não aparecem quando o widget de Produtos carrega vazio ou a página de produto fica sem conteúdo. As causas comuns são o Source do widget apontando para uma consulta sem itens, o template do Theme Builder publicado sem condição de exibição, ou o CSS do Elementor desatualizado.

Pro Grave

Como corrigir a Options Page que não salva no ACF PRO

A Options Page do ACF PRO que não salva acontece quando você clica em Update e os valores voltam vazios, quase sempre porque a página foi registrada com um post_id diferente do que o get_field lê, a capability barra a gravação ou o field group não tem a location rule de Options Page.

Pro Grave

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

O Theme Builder não aplica em todas as páginas quando o template foi salvo como rascunho, ficou sem condicao de exibicao, ou perde para outro template do mesmo tipo com condicao mais específica. O ajuste e definir Include corretamente e revisar a especificidade entre templates concorrentes.

Setores

Extensões

Integrações

Como corrigir o conflito de estilos de formulário entre WPForms e Elementor

Conteúdo exclusivo para membros Pro

Perguntas frequentes

Itens relacionados

Como corrigir CSS do Elementor que não aplica no frontend

Como corrigir fontes do Google que não carregam no Elementor

Como corrigir o conflito de JavaScript entre Ultimate Addons e WP Rocket

Como corrigir erros de exibição de produtos do WooCommerce no Elementor

Como corrigir a Options Page que não salva no ACF PRO

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos