Editor Wix: adicionar e personalizar caixas no site mobile
4 min de leitura
Neste artigo
- Caixas vindas da sua versão para desktop
- Caixas adicionadas a partir do editor mobile
As caixas ajudam a enquadrar, organizar e estruturar o conteúdo do seu site mobile. Refine as caixas que vêm da sua versão para desktop e personalize as que você adicionar usando o editor mobile.
Quando você adiciona caixas no editor mobile, você pode personalizar totalmente suas bordas, sombras, cores e espaçamento. Ao editar caixas que vieram do seu site para desktop, você só pode editar suas animações ou ocultá-las.
Não tem certeza se é um elemento do mobile ou desktop?![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/06/14/d9352104-0f7b-4781-baa8-2858e12b1b89/b0aeddc7-eb85-4778-a535-384b6bda8df7.png)
Elementos apenas para mobile exibem um ícone de Mobile
quando você clica neles.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/05/26/7648ead5-a940-4b7a-a2b2-eb7f8edc6f2b/d34b0146-2e71-47f0-989d-04baf5327e76.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/06/14/d9352104-0f7b-4781-baa8-2858e12b1b89/b0aeddc7-eb85-4778-a535-384b6bda8df7.png)
Caixas vindas da sua versão para desktop
Adicionar caixas à versão desktop do seu site as adiciona automaticamente ao seu site mobile. Você pode adicionar uma animação ou ocultar a caixa.
Observação:
Interações ao passar o mouse (geralmente aplicados a caixas) não estão disponíveis no mobile.
Para personalizar caixas que vieram do desktop:
- Clique na caixa no editor mobile.
- Escolha como personalizar sua caixa:
- Adicione uma animação:
- Clique no ícone Animação
.
- Selecione a animação que deseja aplicar à sua caixa.
- (Opcional) Clique em Personalizar para ajustar ainda mais as configurações da sua animação.
- Clique no ícone Animação
- Ocultar a caixa: clique no ícone Ocultar elemento
para ocultar a caixa do seu site mobile.
- Adicione uma animação:
![Captura de tela do painel de configurações de animação.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/06/15/1241cf94-f82a-44ca-b1c0-ce197631d161/13f9c6f6-3e7a-428c-a0c6-491024146c70.jpg)
Dica:
Para mostrar um elemento, clique no ícone Oculto no mobile
à esquerda do editor mobile. Em seguida, clique em Mostrar ao lado do elemento relevante para exibi-lo no seu site mobile.
![undefined](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2021/11/17/3c107828-59e4-4dd2-a87d-c3136ac1c83c/19f35549-8fe5-4f2d-b5ed-45a15be82bf9.png)
Caixas adicionadas a partir do editor mobile
Adicione uma caixa contêiner diretamente ao seu site mobile. Escolha entre uma variedade de designs predefinidos para sua caixa e personalize suas cores, bordas, cantos, sombras e espaçamento.
Para adicionar e personalizar caixas apenas para dispositivos móveis:
- Clique em Adicionar ao mobile
no lado esquerdo do seu editor mobile.
- Clique em Caixa.
- Clique na caixa que deseja adicionar ao seu site.
- Clique no ícone Design
.
- Clique em Personalizar design
- Selecione as seguintes opções para personalizar o design da caixa:
- Cor e opacidade: clique na caixa de cores para alterar o background da sua caixa ao passar o mouse e arraste o slider para ajustar sua opacidade.
- Bordas: ajuste as bordas da sua caixa.
- Opacidade e cor: edite a cor da borda e arraste o slider para ajustar a opacidade.
- Largura: arraste o slider para ajustar a largura da borda. Para não deixar uma borda, defina como zero.
- Cantos: arredonde os cantos da sua caixa.
- Raio: insira um número para arredondar os cantos da caixa ou para criar uma caixa redonda.
- Bloquear: clique no ícone de cadeado
para deixar os quatro cantos iguais.
- Sombra: clique na alavanca para aplicar uma sombra ao redor da sua caixa.
- Ângulo: selecione uma posição no círculo ou insira um valor.
- Distância: arraste o slider para aumentar ou diminuir a distância da sombra.
- Tamanho: arraste o slider para aumentar ou diminuir o tamanho.
- Borrado: arraste o slider para aumentar ou diminuir o borrado de sombra.
- Opacidade e cor: selecione uma cor e arraste o slider para aumentar ou diminuir a opacidade da sombra.
![Captura de tela do painel de design da caixa.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/06/14/cddc1d36-e5dc-4eaa-a385-2de52e3f94cc/ae21e0d6-ed9c-4fc5-92ef-2dcd1f0ef946.png)