header-logo
Primeiros passosConfira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.
Crie o seu siteAprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.
Conta e faturamentoRevise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.
Use os apps mobile do WixUse o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.
Conecte um domínioEntenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.
Gerencie o seu negócioEncontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.
Promova o seu siteConfira como promover seu site nos motores de busca, enviar campanhas de email e veicular anúncios pagos.
Wix Studio, Parceiros e empresasTire o máximo proveito da sua conta do Wix Studio, Parceiro Wix ou Wix Empresarial, para que você possa expandir seus negócios.
AjudaObtenha informações sobre como resolver os problemas técnicos e de desempenho do seu site. Além disso, acompanhe os próximos recursos em nosso roadmap de produtos.
placeholder-preview-image
Wix LearnDomine novas habilidades com nossos cursos e tutoriais.
Blog do WixConfira nossas dicas de web design, marketing e mais.
Learning Hub de SEOAumente o tráfego orgânico vindo dos motores de busca.
Website developmentDesenvolva um site único com a nossa plataforma full-stack.
Contrate um profissionalAlcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

Editor Wix: adicionar e personalizar caixas no site mobile

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?
Elementos apenas para mobile exibem um ícone de Mobile quando você clica neles.

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:

  1. Clique na caixa no editor mobile.
  2. Escolha como personalizar sua caixa:
    • Adicione uma animação:
      1. Clique no ícone Animação .
      2. Selecione a animação que deseja aplicar à sua caixa.
      3. (Opcional) Clique em Personalizar para ajustar ainda mais as configurações da sua animação.
    • Ocultar a caixa: clique no ícone Ocultar elemento  para ocultar a caixa do seu site mobile.
Captura de tela do painel de configurações de animação.
Dica:
Para mostrar um elemento, clique no ícone Oculto no mobile undefined à esquerda do editor mobile. Em seguida, clique em Mostrar ao lado do elemento relevante para exibi-lo no seu site mobile.

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:

  1. Clique em Adicionar ao mobile  no lado esquerdo do seu editor mobile.
  2. Clique em Caixa.
  3. Clique na caixa que deseja adicionar ao seu site.
  4. Clique no ícone Design .
  5. Clique em Personalizar design
  6. 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.