Como corrigir o cabeçalho de salto no Divi? (3 Métodos)

Tendo problemas com o cabeçalho de salto no Divi? Você veio ao lugar certo. Neste guia, mostraremos 3 métodos para corrigir facilmente o problema do cabeçalho de salto no Divi passo a passo .

Cabeçalho de salto Divi

Com milhões de usuários em todo o mundo, o Divi é um dos temas mais populares do WordPress. Ele vem com muitos recursos que permitem ocultar o cabeçalho, personalizar a página do produto WooCommerce e até incluir o botão Adicionar ao carrinho nas páginas da loja. No entanto, o Divi também tem alguns problemas comuns. Já vimos como resolver o problema com o formulário de contato e hoje mostraremos como corrigir o problema do cabeçalho de salto.

Muitos usuários enfrentam problemas com o cabeçalho no Divi, portanto, neste guia, veremos como corrigi-lo. Antes de entrarmos no guia, vamos entender quais problemas esse problema causa e por que ele ocorre.

Qual é o cabeçalho de salto Divi?

Às vezes, quando você visita alguns sites que usam o Divi, percebe que quando a página está carregando, o cabeçalho não está no topo. Em vez disso, ele salta até que a página esteja totalmente carregada e é por isso que é conhecido como cabeçalho de salto Divi.

Por que o cabeçalho de salto acontece?

O cabeçalho de salto no Divi ocorre devido a um conflito entre CSS e JavaScript. Quando você aplica alterações ao seu site usando o Personalizador, o Divi usa JavaScript e adiciona essas alterações por meio de atributos de estilo aos valores superiores e superiores de preenchimento usando CSS. O problema é que o navegador renderiza o CSS antes do JavaScript e esse atraso no tempo de carregamento cria a ilusão do cabeçalho saltando.

Para corrigir o cabeçalho de salto no Divi, você precisa localizar os valores superiores e superiores de preenchimento e verificar o preenchimento que é injetado usando Javascript. Em seguida, basta adicioná-los à sua folha de estilo. Vamos dar uma olhada em como fazer isso.

Como corrigir o cabeçalho de salto no Divi?

A melhor maneira de corrigir o problema do cabeçalho de salto no Divi é mencionar manualmente o padding-top e alguns outros valores de classe CSS por meio do arquivo style.css ou do personalizador do WordPress. Vamos ver como fazer isso passo a passo.

NOTA : Para evitar problemas em seu site, recomendamos que você teste essas alterações primeiro no modo de teste. Algumas empresas de hospedagem WordPress têm um ambiente de teste por padrão, mas se o seu provedor de hospedagem não tiver um, você também pode criar um ambiente de teste local.

Etapa 1: Inspeção

Primeiro, abra seu site em um navegador e execute a ferramenta Inspecionar em seu cabeçalho. Basta colocar o mouse no cabeçalho, clicar com o botão direito do mouse e selecionar Inspecionar elemento (ou simplesmente Inspecionar em outros navegadores).

Na guia Inspetor, procure 2 valores CSS.

• acolchoamento
• principal

Como você pode ver em nosso exemplo, o padding-top é de 80 px e o top é de 32 px . Esses tamanhos são gerados automaticamente pelo servidor, por isso precisamos mencioná-los no arquivo style.css do nosso site.

Passo 2: Adicionando CSS ao Divi

O próximo passo para corrigir o problema do cabeçalho de salto no Divi é adicionar o código CSS ao seu tema. Basta copiar o seguinte código CSS.

 #page-container {
preenchimento superior: 80px;
}

#main-header {
topo: 32px;
}

Estes são os valores para o nosso site, mas podem ser diferentes para o seu site, portanto, lembre-se de substituir os valores de acordo. Agora, você precisa adicionar este código ao seu site. Existem 3 métodos para fazer isso:

1. Usando o editor de temas Divi
2. Do personalizador do WordPress
3. Usando trechos de código

Método 1: Editor de Tema Divi

O tema Divi vem com um editor de tema embutido que você pode encontrar em Divi > Opções de tema > CSS personalizado .

Quando estiver lá, cole o código que você acabou de copiar e salve as alterações.

É isso! Seu cabeçalho de salto deve ser corrigido!

Método 2: WordPress Customizer – CSS adicional

A segunda opção é usar o WordPress Customizer. No painel do WordPress, vá para Aparência > Personalizar . Em seguida, vá para a seção CSS adicional e cole o código CSS que você copiou na etapa anterior.

Depois disso, publique as alterações e pronto!

Método 3: trechos de código

Se você não se sentir à vontade para adicionar código diretamente aos arquivos do seu tema, você pode usar os Code Snippets, uma excelente ferramenta para adicionar trechos de código HTML, PHP, CSS e JavaScript ao seu site.

Primeiro, no seu painel do WordPress , vá para Plugins > Add New e procure por Code Snippets . Instale-o e ative-o em seu site.

Depois de ativar o plugin, você verá as configurações do plugin na seção de administração do WordPress.

Os snippets de código permitem adicionar ou editar o código existente em seu site. Para esta demonstração, editaremos o snippet CSS existente. Este plugin vem com um trecho de CSS fictício por padrão que você pode ativar.

Basta clicar no trecho para editá-lo. Em seguida, renomeie-o e adicione o código CSS que você copiou na etapa anterior.

Depois disso, basta salvar as modificações e pronto.

Etapa 3: limpando seu cache

Depois de aplicar as alterações em seu site, você precisa limpar o cache. Existem muitos plugins de cache do WordPress disponíveis no mercado. Se você não tiver certeza de qual usar, escolha o seu favorito nesta lista.

Depois de instalar e ativar o plug-in de cache de sua escolha, você precisará limpar seu cache. Por exemplo, estamos usando o WP Fastest Cache, então, em nosso painel do WordPress, basta acessar as configurações do plug-in e pressionar um botão para limpar todo o cache do site WordPress.

É isso! Agora seu cabeçalho no Divi não vai mais pular.

Conclusão

Em suma, o problema do cabeçalho pulando no Divi é muito comum. A boa notícia é que é bem simples de resolver também. Neste guia, mostramos como corrigir esse problema adicionando algumas linhas de código CSS à sua instalação do WordPress. Existem 3 maneiras diferentes de fazer isso:

• Adicione o código ao arquivo style.css do seu tema WordPress
• Adicione o código usando o WordPress Customizer
• Usar trechos de código

Todos esses métodos corrigirão o problema do cabeçalho de salto, então escolha o que melhor lhe convier. Além disso, se depois de adicionar o código CSS seu cabeçalho ainda pular, lembre-se de limpar seu cache (local, navegador e cache DNS). Você também pode acessar seu site de outro computador ou usando o modo de navegação anônima.

Para obter mais tutoriais sobre o Divi, confira os seguintes guias:

• Como deixar qualquer elemento Divi pegajoso
• O formulário de contato Divi não está funcionando: como corrigi-lo
• Como corrigir o erro de tempo limite Divi

Por fim, esperamos que você tenha achado este artigo útil. Se sim, compartilhe este post nas redes sociais. Você já teve algum problema com o Divi? Você teve algum problema ao seguir este guia? Deixe-nos saber na seção de comentários abaixo.