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!
36 Comentários. Deixe novo
Parabéns, ajudou muito aqui.
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?
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
Lindo, me salvou. bjs
Muito obrigado. Me ajudou!
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.
Diego acredito que seguindo esses passos conseguirá remover: https://docs.oceanwp.org/article/166-disabling-the-page-title
Obrigadooo!!!! Ajudou DEMAIS!
Bem, estou usando um tema da marketo, fiz tudo certinho e o header e footer da página ainda continuam.
Olá,
Segui exatamente suas orientações e eu não sei por qual motivo o header e footer não foram ocultados
Olá, quando você ativa o tema padrão do WordPress você consegue ocultar?
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!
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?
Olá Carlos, nenhum problema, é um código de personalização CSS básico sem nenhuma tipo de propriedade envolvido. Abraço.
Muito obrigado resolveu o meu problema com o link do ocean!!!!!!
Já estava quase desistindo.kkkkk
o pior que é muito simples!!!!!!!!
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!
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
Oi Marco, consigo fazer isso com um artigo? Tentei usar a mesma metodologia mas não deu certo :\
Oi Kenia, o que seria um artigo?
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?
José Luiz utilize esta aula mais recente: https://cursos7.com.br/ocultando-rodape-no-wordpress-com-css/. Abraço!
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á.
Júlia peço por gentileza que tente o tutorial mais avançado que escrevi para essa técnica. Espero que ajude. Abraço.
https://cursos7.com.br/ocultando-rodape-no-wordpress-com-css/
Funcionou muito bem na página principal. Era isso que precisava, obrigado!
Mas, preciso aplicar em todas páginas. Como deveria fazer?
Obrigado!
Neste caso recomendo o Curso de WordPress Child Themes: https://cursos7.com.br/curso/curso-de-wordpress-child-themes/
Cara, muito obrigado mesmo!!!!!!
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?
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.
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.
O meu deu certo no Desktop mas no celular não. Como eu faço?
Consegi no celular também, só demorou para atualizar. Obrigado!
Parabéns pela aula, Marco! Foi muito útil. Grande Abraço. Deus abençoe!
No tema que utilizo consegue ocultar utilizando a class ao invés do ID !!
Sim Breno, basta referenciar por . ao invés de #. Porém não considero boa prática.
qual o nome da classe do tema Kadence? Não estou encontrando…
Como ocultar o descrição curta do item, na página de produtos?