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
  1. Início
  2. Wix Studio, Parceiros e empresas
  3. Wix Studio
  4. Use o Editor do Wix Studio
  5. Adicione elementos do Editor do Wix Studio
  6. Editor do Wix Studio: usar contêineres

Editor do Wix Studio: usar contêineres

Neste artigo
  • Adicionar contêineres a um site
  • Fazer o design dos contêineres
  • Anexar elementos a contêineres
  • Definir o comportamento responsivo de um contêiner
  • Aplicar uma grade a um contêiner
Contêineres são ferramentas de layout responsivas que ajudam você a simplificar e estruturar o conteúdo do site. Você pode personalizá-los para complementar o design do site e anexar elementos como texto, mídia e botões.

Adicionar contêineres a um site

Comece adicionando um contêiner que sirva para o design e conteúdo do cliente. Você pode escolher entre uma variedade de contêineres predefinidos e interativos ou começar do zero com um design em branco.

Para adicionar um contêiner:

  1. Clique em Elementos  no lado esquerdo do editor.
  2. Selecione Contêineres.
  3. Escolha um estilo de contêiner (Vazio, Customizado ou Dinâmico).
  4. Clique e arraste o contêiner escolhido para adicioná-lo à página.
O painel Elementos no Editor do Wix Studio. O cursor está passando sobre um contêiner vazio.

Fazer o design dos contêineres

Personalize o design do contêiner para complementar a estética do site. Você pode alterar a cor do background, definir o raio e muito mais.

Para fazer o design de um contêiner:

  1. Selecione o contêiner relevante.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Escolha como deseja personalizar o contêiner em Design:
    • Background: defina o background e torne-o mais ou menos visível:
      • Cor: selecione entre as cores do tema do site ou seu próprio tom personalizado.
      • Gradiente: aplique um gradiente ou gradiente linear ao contêiner. Você pode escolher as cores, ângulos e mais.
    • Efeito de vidro: aplique um efeito de vidro opaco ao contêiner e defina a intensidade do desfoque.
    • Borda: adicione uma borda ao contêiner e use as opções para definir seu tamanho, cor e opacidade.
    • Cantos: ajuste o raio dos cantos do contêiner (em px) para deixá-los mais redondos ou quadrados.
    • Sombra: adicione e personalize um efeito de sombra no contêiner. 
A aba de design de um contêiner no Inspetor. O cursor está ajustando a borda.
Dica:
Você também pode ajustar os cantos do contêiner ao arrastar a alça do raio na tela.
Uma visualização cortada mostrando a alça do raio em um contêiner.

Anexar elementos a contêineres

Quando você coloca elementos dentro de um contêiner, eles são anexados automaticamente. Isso significa que você pode arrastar o contêiner e seus elementos anexados como um todo e visualizá-los juntos no painel Camadas.

Para anexar um elemento a um contêiner:

  1. Clique no elemento relevante.
  2. Arraste-o para a posição desejada no contêiner.
  3. Solte o elemento quando vir a mensagem Anexar.
Um elemento de texto está sendo arrastado para o contêiner. A mensagem Anexar é exibida.

Definir o comportamento responsivo de um contêiner

Quando você adiciona um contêiner à página, ele já vem com um comportamento responsivo integrado. Isso significa que você não precisa se preocupar com a aparência do elemento em telas diferentes. O comportamento responsivo garante que ele seja redimensionado.
No entanto, pode ser que você queira mudar o comportamento responsivo, se encontrar um que seja mais adequado para o seu design.

Para definir o comportamento responsivo de um contêiner:

  1. Selecione o contêiner relevante.
  2. Clique no ícone Abrir inspetor  no canto superior direito do editor.
Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.
  1. Clique no dropdown em Comportamento responsivo e selecione o comportamento desejado:
    • Dimensionar proporcionalmente: as proporções do contêiner (largura e altura) mantêm a mesma proporção em todas as telas. 
    • Largura relativa: a largura do contêiner muda automaticamente, em relação ao seu elemento pai.
    • Fixo: a largura e altura do contêiner sempre permanecem as mesmas e não se ajustam com base no tamanho da tela.
    • Esticar: o contêiner estica para se ajustar ao seu elemento pai (por exemplo: célula, seção) em cada breakpoint. 
Um contêiner na tela do Editor do Wix Studio, ao lado do painel Inspetor, clicando no dropdown de comportamento responsivo

Aplicar uma grade a um contêiner

Aplique uma grade CSS avançada ao contêiner para estruturar seu layout. Você pode escolher o número de linhas e colunas que deseja e definir seu tamanho usando medidas responsivas (por exemplo fr, mín/máx, %)

Para aplicar uma grade a um contêiner:

  1. Selecione o contêiner relevante.
  2. Clique no ícone Mais ações .
  3. Clique em Aplicar grade CSS avançada.
  4. Escolha um layout no dropdown 1x1.
    Dica: selecione Outro se quiser definir seu próprio número de linhas e colunas.
Um contêiner no editor. Uma grade CSS está sendo selecionada no dropdown.

Esse artigo foi útil?

|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Começar
Neste artigo
  • Adicionar contêineres a um site
  • Fazer o design dos contêineres
  • Anexar elementos a contêineres
  • Definir o comportamento responsivo de um contêiner
  • Aplicar uma grade a um contêiner

Esse artigo foi útil?

|