Se você possui um site, é muito provável que já precisou ocultar alguma informação específica apresentada em alguma(s) página(s) de seu site.
Por exemplo, sites criados com a biblioteca WordPress costumam apresentar informações no corpo do site que não agregam nenhum valor aos usuários. Dessa forma, tais informações apenas contribuem para a poluição visual do site, sendo recomendado ocultá-las.
As pessoas que procuram ajuda para esta questão, geralmente fazem uma busca no Google de várias formas, tais como:
- como esconder elementos usando apenas CSS;
- como ocultar objetos através do CSS;
- qual o código CSS para esconder divs do layout;
- qual a maneira mais fácil de ocultar elementos usando CSS;
Como ocultar elementos do site usando CSS?
Para ocultar informações específicas apresentadas em seu site, é necessário que você possua noções básicas de CSS e conheça também funcionalidades básicas do Google Chrome para desenvolvedor. Vamos partir do pressuposto que o seu site tenha sido criado a partir do WordPress.
Vamos considerar também que você gostaria de omitir o rastro de navegação de seu site, isto é, aquele caminho que indica ao usuário como que ele chegou até aquela determinada página.
Confira abaixo um exemplo de rastro de navegação:
A imagem acima mostra um exemplo de rastro de navegação da estrutura das páginas do blog de nosso portal Dicas de Informática Básica. Destacamos em vermelho o rastro para que você compreenda bem ao que se refere.
Para ocultar esta informação de rastro, você pode recorrer a alguns caminhos, tais como:
- Dentro de seu acesso administrativo no site WordPress, você pode buscar por uma opção do tema que desative esse recurso;
- Digitar um comando CSS para ocultar esse elemento das páginas do site;
Confira abaixo o comando CSS:
display: none
Basicamente, este é o comando que você deverá aplicar sobre o recurso/informação que gostaria de ocultar. Para isso,você deve conhecer o nome da classe que engloba a informação. No caso de nosso exemplo, precisamos saber o nome da classe que engloba o rastro de navegação. Confira imagem abaixo:
Como você pode observar, fizemos a inspeção do código-fonte da página usando o Google Chrome. Para isso, você deverá seguir o seguinte passo-a-passo:
- Selecione a informação que deseja ocultar. No caso desse exemplo, estamos selecionamos com o mouse todo o rastro de navegação;
- A partir desse momento, você deve clicar com o botão direito encima desse trecho selecionado e acionar a opção Inspecionar;
- Você terá acesso a um código, conforme mostrado na imagem acima. É importante ressaltar que esse código varia de site para site. No caso de nosso exemplo, perceba que o trecho em destacamos em vermelho refere-se ao elemento selecionado anteriormente.
- Observe a estrutura deste código em destaque:
<div class=”entry-crumbs”> - O nome da classe que procuramos é entry-crumbs;
- Uma vez que temos o nome da classe, basta inserirmos o código que fará a sua omissão.
O código completo ficaria da seguinte forma:
.entry-crumbs {display:none;}
- Este código deverá ser adicionado na seção de CSS Personalizado de seu site;
- Desta forma, o rastro de navegação ficará oculto.
Como dissemos no início deste post, é necessário que você tenha um conhecimento mínimo a respeito do funcionamento do CSS para que consiga realizar efetivamente o comando ensinado acima.
Lembre-se que, comandos inadequados podem comprometer o bom funcionamento do site. Não encorajamos você fazer o comando acima, caso não possua nenhum tipo de experiência na área.
Se você possui alguma dúvida a respeito dessa configuração, deixe um comentário abaixo que poderemos ajudá-lo nesta tarefa.
Esperamos que você tenha curtido esta postagem. Se ela foi útil para você, compartilhe este post com seus amigos.
