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

Apps do Wix: guias de design

Neste artigo
  • Adicionar Guias de design do Wix ao seu site
  • Personalizar as configurações da Guia de design
O add-on Guia de design do Wix permite que você crie linhas, colunas ou células no Editor do Wix Studio para ajudar a estruturar e criar seu site de forma mais organizada. 
A guia aparece no seu Editor como uma grade colorida. Ela não aparece em seu site online. O objetivo disso é guiar você à medida que você coloca seus elementos em seu site e garantir que tudo esteja alinhado corretamente.
As Guias de design do Wix só estão disponíveis no Editor do Wix Studio.
Uma captura de tela mostrando os painéis das Guias de design.

Adicionar Guias de design do Wix ao seu site

Adicione o add-on Guias de design a partir das ferramentas no Editor do Wix Studio.

Para adicionar Guias de design do Wix:

  1. Clique no ícone Wix Studio  no canto superior esquerdo.
  2. Clique em Ferramentas
  3. Clique em Add-Ons do Editor
  4. Clique em Obter add-ons
  5. Clique em Guias de design
Uma captura de tela mostrando o ícone do Wix Studio e as opções para adicionar add-ons do Editor ao seu site.

Personalizar as configurações da Guia de design

Personalize sua grade para obter o layout exato que você deseja. Você pode fazer alterações no número de colunas ou linhas em uma grade e alterar seu tamanho, espaçamento, etc. As configurações mudam dependendo do tipo de grade que você escolher.

Para personalizar as configurações:

  1. Clique no ícone Wix Studio  no canto superior esquerdo.
  2. Clique em Ferramentas.
  3. Clique em Add-Ons do Editor.
  4. Clique em Guias de design.
  5. Clique no ícone dropdown  ao lado das colunas para exibir as configurações. 
  6. Escolha o que você gostaria de personalizar:
    • Tipo de guia: clique no ícone dropdown  e escolha um guia.
    • Alinhamento: defina o alinhamento entre as opções esticar, esquerda, direita ou centro. 
    • Colunas: insira a quantidade de colunas necessárias para o seu guia.
    • Largura da margem: defina a largura da margem.
    • Largura da medianiz: defina a largura da medianiz. Esse é o espaço entre as colunas. 
    • Largura da coluna: dependendo do seu alinhamento, a largura da coluna pode ser definida como Auto.
    • Opacidade e cor: defina uma cor para suas colunas e ajuste a opacidade. 
  7. (Opcional): clique em Adicionar guia para adicionar uma nova guia ao seu site.
    Observação: isso coloca as guias uma sobre a outra para que as linhas rosa sejam mais visíveis à medida que você edita.
Uma captura de tela mostrando as configurações de design para o add-on Guias de design.