# Como esconder elementos no construtor por Componentes

Objetivo: Ensinar como esconder um elemento ou linha na visão do computador ou celular.\
Para que serve: Ao esconder elementos em dispositivos diferentes, é possível adaptar a página para cada lugar em que ela será acessada.\
Requisito obrigatório: Ter uma página feita no Construtor por Componentes, o editor padrão da leadlovers.

### Como posso usar?

Com a possibilidade de esconder um componente da página no computador ou celular, é mais fácil fazer ajustes de modo que ela sempre se encaixe em todos os dispositivos.

Por exemplo: se um texto ficou muito grande no celular, é possível escondê-lo e criar um novo com fonte menor para a visualização exclusiva em dispositivos móveis.

### Como esconder um elemento da página?

Nº1– Dentro do editor, clique sobre o elemento específico ou linha que deseja esconder na visão do computador ou celular.

Nº2– No menu que abrir na lateral direita, encontre a opção “Esconder”.

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-caa17a82683cacc7.png"}

#### Escondendo no computador

Nº3– Se quiser que o elemento ou linha não apareça quando acessar a página pelo computador, selecione a primeira opção.

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-0ed53cdbddc10303.png"}

Fazendo isso, ao entrar na página pelo computador a parte que foi escondida não ficará mais visível, assim como no exemplo:

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-ecd9412a1e7b64e8.png"}

No entanto, ainda aparecerá no celular:

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-f66cce2f12e77d82.png)](https://legado.leadlovers.site/wp-content/uploads/2022/01/img04-4.png)

#### Escondendo no celular

Nº4– Se quiser esconder na visão do celular e deixar o elemento ou linha aparecendo somente no computador, clique sobre a segunda opção.

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-9d8a89bec0ae7ac1.png"}

Dessa forma, o elemento ou linha continuará visível no computador:

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-5c6c60ddf4f9480c.png"}

E na visão do celular, o mesmo desaparecerá:

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-1ff0aec7a400cf53.png)](https://legado.leadlovers.site/wp-content/uploads/2022/01/img07-3.png)

Nº5– Para cancelar as edições e deixar o elemento ou linha visível em ambos, clique no ícone de “X”.

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-dbcc17d05b55f940.png"}

### Exemplo prático de uso

No exemplo abaixo, o tamanho da fonte do título é de 95px.

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-b743c4883bb75574.png"}

Quando a página é visualizada no computador, ele fica ideal:

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-e36ab3e4c14416e4.png"}

No entanto, quando visualizada no celular a fonte ocupa mais espaço:

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-f51ad96b0875d3f0.jpg)](https://legado.leadlovers.site/wp-content/uploads/2022/01/img11.jpeg)

Para solucionar esta questão, nós duplicamos dentro do editor o mesmo título e o deixamos com uma fonte menor de 55px.

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-aba3453b99a3c9ca.jpg"}

Escondemos então a fonte maior na visão do celular:

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-574649b7fb70017d.jpg"}

Já com relação à fonte menor, nós escondemos na visão do computador:

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-4aea3ff6781bcb8e.jpg"}

No resultado final, a fonte maior se manteve igual no computador:

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-1dc76d9d7c074901.png"}

E a fonte menor se encaixou no celular:

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-8c5f7ab07b08b782.jpg)](https://legado.leadlovers.site/wp-content/uploads/2022/01/img16.jpeg)

Dentro do editor os dois títulos permaneceram visíveis, no entanto, com a opção de esconder em diferentes dispositivos, foi possível ajustar a página de modo que ela se encaixasse em diferentes dimensões.

**Suporte**

Se surgir qualquer dúvida ou situação, ou se precisar de qualquer ajuda durante este procedimento, por favor, **entre em contato com o nosso suporte**!