Qual o comando CSS para ocultar elementos em um site?

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:

Qual o comando CSS para ocultar elementos em um site? 1

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:

Qual o comando CSS para ocultar elementos em um site? 2

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:

Qual o comando CSS para ocultar elementos em um site? 3

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:

  1. Selecione a informação que deseja ocultar. No caso desse exemplo, estamos selecionamos com o mouse todo o rastro de navegação;
  2. A partir desse momento, você deve clicar com o botão direito encima desse trecho selecionado e acionar a opção Inspecionar;
  3. 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.
  4. Observe a estrutura deste código em destaque:
    <div class=”entry-crumbs”>
  5. O nome da classe que procuramos é entry-crumbs;
  6. 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;}
  7. Este código deverá ser adicionado na seção de CSS Personalizado de seu site;
  8. 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ê, clique no botão curtir no final desta página.

ENVIE UMA REPOSTA:

Por favor digite o seu comentário
Por favor digite o seu nome

Time limit is exhausted. Please reload the CAPTCHA.