> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Controle a visibilidade e a responsividade

> Controle a visibilidade dos elementos em cada dispositivo e ajuste a opacidade para criar landing pages responsivas e adaptáveis.

As configurações de Visibility controlam **onde o elemento aparece** e **o quanto ele fica visível**. Isso ajuda a adaptar o design para diferentes dispositivos e a controlar como os elementos são exibidos.

## Onde encontrar

1. Selecione qualquer elemento
2. Vá até o **painel da direita**
3. Abra a seção **Visibility** (geralmente no final)

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/image-18.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=11b3152e48d1b102122e9a703a2d20ad" alt="Image" width="266" height="122" data-path="images/image-18.png" />
</Frame>

***

## Opções de visibilidade

### Show On (dispositivos)

Você pode escolher onde o elemento é exibido:

* **Desktop** → aparece em telas maiores
* **Tablet** → aparece em tablets
* **Mobile** → aparece em celulares

👉 Você pode ativar ou desativar qualquer um deles conforme a necessidade

***

### Como funciona

* Se um dispositivo estiver **ativado** → o elemento fica visível nele
* Se um dispositivo estiver **desativado** → o elemento fica oculto nele

👉 Isso é útil para um design responsivo

### Exemplo

* Show on Desktop: ON
* Show on Tablet: OFF
* Show on Mobile: OFF

👉 Resultado: o elemento só aparece no desktop

***

## Opacidade

A opacidade controla o quanto um elemento é transparente.

* **100%** → totalmente visível
* **0%** → completamente invisível
* **50%** → semitransparente

### Como usar

* Diminua a opacidade para criar elementos mais suaves
* Use em sobreposições ou efeitos sutis