Ocultando Cabeçalho e Rodapé No WordPress

ocultando cabeçalho e rodapé no wordpress

Em algumas situações precisaremos utilizar personalização CSS no WordPress para atingir nossos objetivos. Isso acontece quando estamos ocultando cabeçalho e rodapé no WordPress, por diversas razões. A principal delas é a personalização de uma página específica, de vendas por exemplo (uma landing page).

Antes de tudo, tenha em mente que a opção de remover sem código, pelas opções do tema, nem sempre estará presente. Assim, em alguns casos, teremos que recorrer a uma personalização por CSS para fazer a coisa acontecer. O personalizador do WordPress oferece a possibilidade de inserirmos código CSS no tema que está ativo no momento.

Para ocultar o cabeçalho e o rodapé em seu site WordPress, siga os passos abaixo (ou assista ao vídeo no final deste post):

  • Primeiramente, acesse o painel de seu site WordPress
  • Identifique a id da página que deseja ocultar o cabeçalho e o rodapé;
  • Em seguida abra o Personalizador, a ferramenta de personalização do WordPress;
  • Siga para a CSS adicional;
  • Insira o código abaixo;
  • Troque site-header e site-footer pelas classes de cabeçalho e rodapés de seu tema;
  • Identifique-as com a ferramenta de desenvolvedor do google chrome (f12 -> selecione a região desejada);

.page-id-5 .site-header {
display: none;
}

.page-id-5 .site-footer {
display: none;
}

Após assistir ao vídeo, curta nosso canal no Youtube para mais conteúdo gratuito. Caso queira investir em uma formação profissional em WordPress, conheça nossos cursos.

Não funcionou? Gravei uma aula com técnicas alternativas para temas que não permite executar o demonstrado aqui. Bons estudos!

Marco Floriano
administrator
Cientista da Computação, é desenvolvedor na Setor9 e fundador da Cursos7, escola de cursos online para quem deseja aprender a criar sites.

Comentários

  • Silvanio
    29 de janeiro de 2019

    Parabéns, ajudou muito aqui.

  • andre tristao
    19 de fevereiro de 2019

    Marco, eu tentei fazer isso no tema DOGMA da Envato e ele não funciona. Eu verifiquei em “inspecionar página” que o código do cabeçalho está assim: Será que o código CSS muda em virtude disso?

    • Marco Floriano
      19 de fevereiro de 2019

      Olá Andre. Certamente, muda bastante. Cada tema tem sua forma de identificar a seção do cabeçalho e do rodapé. Como você comprou o tema na Envato, basta perguntar a classe CSS do cabeçalho ou rodapé ou até pedir o código para ocultar que eles enviam pra você. Abraço

  • Leo
    15 de julho de 2019

    Lindo, me salvou. bjs

  • Jefferson Paulino Camilo
    18 de julho de 2019

    Muito obrigado. Me ajudou!

  • diego
    25 de setembro de 2019

    amigo estou com um problema parecido estou com tema oceanwp e gostaria de remover o nome INICIO que fica na tela principal .. nao aparece na minha pagina em editar a opão para remoçao . entao nao sei mais o que fazer.

  • Alan Fiuza
    23 de outubro de 2019

    Obrigadooo!!!! Ajudou DEMAIS!

  • Luis
    30 de janeiro de 2020

    Bem, estou usando um tema da marketo, fiz tudo certinho e o header e footer da página ainda continuam.

  • Bia
    12 de maio de 2020

    Olá,
    Segui exatamente suas orientações e eu não sei por qual motivo o header e footer não foram ocultados

    • Marco Floriano
      12 de maio de 2020

      Olá, quando você ativa o tema padrão do WordPress você consegue ocultar?

  • Márcio
    14 de maio de 2020

    Olá, preciso ocultar o footer apenas dos blog posts, teria um código genérico pra eu não ter que fazer de todos os posts um por um? Obrigado!

  • Carlos
    15 de maio de 2020

    Olá Marco, um tempo atrás eu acho que li esse post, e implementei esse código no site da minha empresa… tem algum problema de direitos autorais? estou usando o código para tirar o rodapé e o cabeçalho do site.
    Tem algum problema?

    • Marco Floriano
      18 de maio de 2020

      Olá Carlos, nenhum problema, é um código de personalização CSS básico sem nenhuma tipo de propriedade envolvido. Abraço.

  • Felipe
    30 de maio de 2020

    Muito obrigado resolveu o meu problema com o link do ocean!!!!!!
    Já estava quase desistindo.kkkkk
    o pior que é muito simples!!!!!!!!

  • Alexandre
    24 de junho de 2020

    Obrigado Marco,
    Ajudou muito!!

    O meu header é #main-header o código ficou assim:
    .page-id-5210 #main-header {
    display: none !important;
    }
    MAIS UMA VEZ MUITO OBRIGADO!

  • Aurélio Kassanga
    24 de setembro de 2020

    Marcos Floriano, eu gostei da sua postagem, por favor me ajude assim que for possível.

    eu estou usando o tema Niwberg ou Nowber, tentei todas as formulas para remover o Rodape não tive êxito, agora irei tentar pelo Css

    mas antes gostaria que me fornecesse o ID do Tema (Niwberg) para remover o rodapé. por favor

    este é meu WhatsApp +244 944 424 147

    obrigado e espero sua ajuda

  • Kenia
    14 de outubro de 2020

    Oi Marco, consigo fazer isso com um artigo? Tentei usar a mesma metodologia mas não deu certo :\

  • José Luiz
    29 de novembro de 2020

    Olá Marco! Parabéns pelo vídeo e pela clareza na explicação! Estou usando o tema heropress e não consegui eliminar o header com o código que vc indicou. Teria mais alguma outra forma de fazê-lo? Não consegui identificar nem o page-id. poderia me ajudar?

  • Júlia Caroline
    4 de dezembro de 2020

    Olá, eu não estou conseguindo fazer isso.
    Não sei se tem a ver com o fato de quê coloquei meu cabeçalho com hiperlink no php do wordpress, gostaria de obter ajuda.
    Obrigada desde já.

  • Jeronimo
    11 de dezembro de 2020

    Funcionou muito bem na página principal. Era isso que precisava, obrigado!

    Mas, preciso aplicar em todas páginas. Como deveria fazer?

    Obrigado!

  • Gabriel
    7 de janeiro de 2021

    Cara, muito obrigado mesmo!!!!!!

  • Meire
    10 de março de 2021

    Fiz essa atualização, porém deu problema no meu site, uma parte da página se tornou a parte principal do meu site (Home), não sei como retornar ao normal, vcs podem me ajudar?

    • Marco Floriano
      11 de março de 2021

      Olá Meire, creio haver alguma confusão. O post não faz ou indica nenhuma atualização, apenas insere código, que pode ser removido a qualquer momento.

  • Mauro
    7 de maio de 2021

    Valeu Marco, nem precisei efetuar mudanças no código, removi apenas o footer, no tema NEVE versão 2.11.2 com elementor como page builder.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *