Como funciona o Wix? Um guia passo a passo para construir um site Wix

O Tooltester é apoiado por leitores como você. Podemos ganhar uma comissão de afiliado quando você compra através de nossos links, o que nos permite oferecer nossa pesquisa gratuitamente.

Wix é uma plataforma popular de construção de sites projetada tanto para iniciantes quanto para especialistas. Ele oferece um editor intuitivo de arrastar e soltar que facilita a criação de um site com aparência profissional sem nenhum conhecimento de codificação.

Neste guia passo a passo, mostraremos como o Wix funciona, desde a escolha de um modelo até a personalização do seu site com texto e imagens. Também abordaremos recursos importantes, como otimização de SEO e capacidade de resposta móvel, para que você possa garantir que seu site tenha uma ótima aparência em qualquer dispositivo. E para facilitar ainda mais o acompanhamento, incluímos um vídeo tutorial que demonstra cada etapa do processo.

Então, se você está pronto para criar seu próprio site com Wix, vamos começar!

Como funciona o Wix: nosso guia passo a passo

Neste guia, criaremos um site de restaurante com Wix, embora as mesmas etapas sejam relevantes para a maioria dos sites de pequenas empresas. Assista ao nosso vídeo abaixo ou siga cada etapa abaixo em nosso guia escrito.

Experimente o Wix gratuitamente aqui.

Passo 1 – Inscreva-se no Wix

A primeira coisa a fazer é se inscrever no Wix, o que você pode fazer aqui. É totalmente gratuito – você não precisará pagar nada se estiver satisfeito em ter um site gratuito usando um domínio Wix (por exemplo, seunome.wixsite.com/seusite). Se você precisar de um dos planos pagos do Wix, não precisará pagar por ele até que seu site esteja pronto.

A seguir, você responderá uma série de perguntas simples sobre o tipo de site que deseja construir e seu nível de experiência.

Passo 2 – Escolha Wix ADI ou Editor

O próximo passo é provavelmente a maior decisão que você terá que tomar sobre o seu site – você deve usar o Wix ADI e ter um site criado para você (que você pode ajustar), ou usar seus modelos e Editor (mais trabalho, mas você tem maior controle de projeto)? O Wix irá sugerir uma dessas opções, dependendo de como você respondeu às perguntas na etapa 1.

Eu pessoalmente recomendaria o ADI apenas se:

• Seu site será muito pequeno (1 a 5 páginas)
• Você precisa colocar um site em funcionamento rapidamente
• Você não se importa muito em não ter muito controle sobre seu design

Com o Editor Wix, você terá muito mais opções para personalizar seu design, bem como acesso a uma variedade muito maior de aplicativos e widgets – então esta será sua melhor aposta se seus requisitos forem para um site um pouco mais avançado.

É por isso que escolhemos o Wix Editor para continuar.

Passo 3 – Escolha o seu modelo

É aqui que tudo começa a ficar emocionante! Com base na categoria que você escolheu, o Wix irá sugerir alguns modelos – tudo que você precisa fazer é escolher o que deseja.

Wix tem centenas de modelos de aparência moderna para você escolher, então você não deverá ter problemas para encontrar um para começar. Lembre-se, o Editor permitirá que você faça alterações conforme necessário, então não se preocupe muito se não conseguir encontrar um que seja exatamente o que você procura – ele só precisa estar próximo.

Para visualizar um modelo, passe o mouse sobre ele e clique em “Visualizar”. Em seguida, selecione ‘Ver demonstração completa’.

Depois de encontrar o modelo certo, basta clicar no botão ‘Editar’. No nosso caso, vamos escolher o modelo ‘Serviço de Entrega de Comida’ na categoria ‘Restaurantes e Comida’.

Passo 4 – Conheça o Editor

Você será levado ao Editor do Wix, onde fará alterações em seu site. Se você receber um pop-up informando sobre a plataforma Velo do Wix, você pode clicar para ignorar isso – isso é algo que apenas usuários avançados precisarão.

Em seguida, queremos ter certeza de que o Modo Dev está desligado, para que você não veja nenhuma janela desnecessária (novamente, você só precisará delas se precisar fazer alterações em seu código). Passe o mouse sobre 'Modo Dev' no menu superior e clique em 'Desativar Modo Dev'.

Você deve ficar com uma visão semelhante a esta:

Se você não vir a barra de ferramentas à direita da tela, não se preocupe – basta clicar em “Ferramentas” no canto superior esquerdo e certificar-se de que a caixa de seleção “Barra de ferramentas” esteja marcada:

Agora, antes de mostrar como começar a fazer alterações em seu site, deixe-me dar um rápido resumo do que você realmente está vendo:

1. A página que você está vendo é a página inicial do seu site – muito legal, né? Você fará todas as alterações no conteúdo – ou seja, alterações no texto, nas imagens e nas seções – nesta parte da tela.

2. Se quiser adicionar mais páginas ao seu site, faça isso no menu esquerdo. Na verdade, o menu esquerdo é responsável por ajudá-lo a adicionar todas as coisas extras que você precisa em seu site – menus, mídia, formulários, blogs, aplicativos e assim por diante. Clique em cada um dos botões para ter uma ideia de todas as diferentes opções disponíveis aqui. Em breve veremos mais de perto como usar esta seção!

3. Esta barra de ferramentas à direita ajudará você a ajustar a aparência do conteúdo do seu site – por exemplo, para alinhar ou girar imagens em suas páginas. Para ser sincero, esta é provavelmente a seção que menos uso, pois você pode fazer muitas alterações diretamente no Editor (seção 1).

4. O menu superior dá acesso às funções de backend do seu site (nome de domínio, SEO, etc.). Não é algo com que você precise se preocupar neste estágio, então abordaremos isso com mais detalhes um pouco mais tarde.

Por enquanto, a coisa mais importante a saber é que você pode desfazer e refazer quaisquer alterações no canto superior direito desta seção, bem como salvar suas alterações (embora a função Autosave também cuide disso). Você também pode acessar o Histórico do site para restaurar versões anteriores do site, passando o mouse sobre o link ‘Salvar’.

Ainda comigo? Ótimo! Vamos começar a editar seu site então.

Passo 5 – Edite a ‘seção herói’ da sua página inicial

Praticamente tudo que você vê no Editor Wix – texto, imagens, planos de fundo etc. – é editável. Tudo que você precisa fazer é clicar duas vezes em um elemento e você poderá editá-lo. Então, vamos começar clicando duas vezes no título principal.

Digite o texto que você gostaria de usar. Você também notará que uma nova janela chamada ‘Configurações de texto’ apareceu – aqui você pode alterar a fonte, o tamanho da fonte, a cor e até mesmo adicionar efeitos. Então vá em frente, experimente – e lembre-se de que você sempre pode desfazer as alterações pressionando a seta para trás no menu superior.

Você também pode editar qualquer texto abaixo do título principal exatamente da mesma maneira. Se houver algum elemento de texto que você deseja excluir, basta clicar no elemento e clicar no botão ‘Excluir’ do teclado (ou no ícone da lixeira na barra de ferramentas direita).

Até agora tudo bem! Mas e se você quiser alterar a imagem de fundo? Fácil – basta clicar em qualquer lugar da imagem de fundo. Você verá um botão aparecer com o texto ‘ Alterar plano de fundo da faixa ’ – clique nele e você terá opções para substituir a imagem de fundo atual por um bloco de cores, uma nova imagem ou até mesmo um vídeo.

Se você clicar em 'Imagem', poderá optar por fazer upload de sua própria imagem ou selecionar uma imagem de estoque do Wix, Unsplash ou Shutterstock (as duas primeiras são gratuitas).

Depois de selecionar nossa imagem, a seção principal da nossa página inicial fica assim:

Parecendo delicioso! Vamos rolar para baixo para continuar fazendo alterações em sua página inicial.

Passo 6 – Excluir, adicionar e editar seções da sua página inicial

Rolando para baixo, você pode descobrir que deseja manter algumas das seções horizontais do seu modelo, mas excluir ou alterar outras. Tudo bem.

Vamos começar com o mais fácil: excluir seções (ou 'Tiras', como o Wix as chama). Na barra de ferramentas superior, clique no botão 'Diminuir zoom e reordenar':

Isso o levará a uma visualização reduzida do seu site. Clique na faixa que deseja excluir. A faixa ficará destacada por uma borda azul. Em seguida, basta clicar no ícone da lixeira à direita da seção para excluí-la.

Que tal adicionar novas seções ? Bem, é aí que a barra de ferramentas esquerda é útil.

Primeiro, clique no botão verde 'Sair do modo' no canto superior direito da tela para voltar ao Editor.

Na barra de ferramentas esquerda, clique no botão com o ícone + ('Adicionar'). Você verá uma lista enorme de opções de todos os diferentes elementos que você pode adicionar à sua página – texto, imagens, botões, lightboxes pop-up e assim por diante.

Por exemplo, você pode querer adicionar uma nova 'Faixa' para substituir aquela que acabou de excluir. Esta faixa funcionará efetivamente como um contêiner para o conteúdo (texto, imagens, etc.) que você deseja adicionar a essa seção. Escolha entre uma faixa 'Clássica' (em branco) ou uma que já contenha conteúdo - uma faixa 'Sobre nós' ou 'Depoimentos', por exemplo. Em seguida, basta clicar e arrastá-lo para onde quiser na página.

No nosso caso, adicionaremos uma faixa 'Clássica' e depois alteraremos a cor de fundo para que se adapte ao tema do nosso site. Faremos isso da mesma forma que alteramos o plano de fundo na Etapa 5 – selecione a faixa, clique no botão ‘Alterar plano de fundo da faixa’ e, a seguir, clique na opção ‘Cor’ para alterá-la para amarelo.

Agora, vamos brincar com a adição de conteúdo. Minha melhor sugestão seria explorar todas as opções disponíveis no ícone + e brincar adicionando diferentes elementos à sua nova faixa. Novamente, você sempre pode desfazer qualquer coisa que não queira manter.

Por exemplo, se quiser adicionar um título e texto à sua faixa , você pode fazer isso adicionando primeiro 'Título 1'. Arraste-o para onde deseja que seja posicionado na página e clique duas vezes para alterar o texto.

Para adicionar texto abaixo deste título, repita o mesmo processo - mas desta vez, em vez de escolher 'Título', escolha uma das opções de texto 'Parágrafo'.

Mais uma vez, arraste para reposicionar o texto como desejar e clique duas vezes para alterar o texto. Lembre-se de que você pode alterar a fonte, as cores e o estilo como desejar, usando as opções na caixa Configurações de texto.

Isso não parece tão ruim! Mas e se você quiser adicionar outros elementos? Por exemplo, uma forma para usar como plano de fundo do texto? Não tem problema – você pode fazer isso da mesma maneira clicando no botão + na barra de ferramentas esquerda. Desta vez, escolha ‘Elementos decorativos’.

Selecione a forma desejada e posicione-a onde desejar na página. Se estiver cobrindo o texto (em vez de ficar atrás dele como plano de fundo), basta clicar no ícone 'Organizar' na barra de ferramentas direita e selecionar 'Enviar para trás'.

Isso parece muito melhor agora!

Passo 7 – Adicionando uma galeria de imagens

Se você quiser incluir uma galeria de imagens em sua página , isso pode ser feito facilmente. Mais uma vez, usando a barra de ferramentas esquerda, clique no botão + e selecione ‘Galeria’. Você terá inúmeras opções de galeria para escolher:

Basta selecionar o que deseja e posicioná-lo como desejar na página (se precisar de mais espaço para ele, lembre-se de que você pode arrastar faixas/seções mais para baixo).

Se o seu modelo já possui uma galeria de imagens (como o nosso), tudo que você precisa fazer é clicar na galeria para selecioná-lo. Você verá algumas opções aparecerem, incluindo ‘Gerenciar mídia’ e ‘Configurações’:

Escolher ‘Configurações’ permitirá que você altere o layout de exibição da sua galeria – então, se preferir outro layout, vá em frente e selecione-o:

Você pode então adicionar suas próprias imagens selecionando ‘Gerenciar mídia’. Exclua todas as imagens atuais e clique em “Adicionar mídia” para fazer upload das suas próprias imagens ou selecione algumas da coleção de fotos do Wix.

Nesta mesma janela, você também pode editar o título e a descrição de cada uma de suas imagens (estas não ficarão visíveis no seu site, mas são boas para SEO), bem como adicionar links (se desejar).

Esta é a aparência do produto final:

Passo 8 – Adicionando um formulário de contato

Um formulário de contato é uma parte essencial da maioria dos sites. Embora você possa adicionar um formulário de contato em uma página separada, mostrarei como adicionar um à sua página inicial.

Mais uma vez usando a barra de ferramentas esquerda, clique no botão +. Selecione ‘Contato e Formulários’ e escolha o formulário que deseja incluir (não se preocupe, os campos e estilos podem ser alterados – mostrarei como em um minuto).

Posicione seu formulário como desejar na página. No nosso caso, queremos isso bem no final da página, logo acima do rodapé:

Vamos primeiro alterar os campos do nosso formulário. No nosso caso, queremos usá-lo para permitir que os clientes façam um pedido, por isso queremos adicionar alguns campos extras.

Clique no seu formulário e depois no botão 'Adicionar novo campo' que aparece. Em seguida, escolha o tipo de campo que deseja adicionar:

Depois que seu novo campo for adicionado, clique nele no formulário. Clique no botão 'Editar campo' para editar o título do campo:

Para editar as opções de seleção, clique no botão ‘Gerenciar escolhas’:

Depois de adicionar e editar todos os campos necessários, é hora de alterar o estilo do seu formulário para que ele corresponda ao seu site. Basta clicar no formulário e, em seguida, clicar no botão do pincel. Clique em 'Personalizar design' e você poderá alterar cores, fontes, o botão de envio e assim por diante.

Esta é a aparência do nosso formulário agora – muito legal!

Passo 9 – Organizando sua página da web

Estamos quase prontos para publicar seu site Wix! Então, vamos amarrar as últimas pontas soltas.

Em seu modelo, você deve ter notado alguns detalhes extras que realmente não queria incluir – um logotipo flutuante, ícones de mídia social ou um widget de bate-papo, por exemplo.

Para nos livrar de qualquer um deles, vamos simplesmente excluí-lo, assim como excluímos outros elementos anteriormente - selecione o elemento e a) pressione 'Excluir' no teclado ou b) clique no ícone da lixeira na barra de ferramentas direita .

No nosso caso, como estamos construindo apenas um site de página única, queremos nos livrar do menu flutuante que aparece no topo da página – então vamos selecioná-lo e excluí-lo.

Depois de excluir todos os elementos desnecessários, só precisamos ter certeza de que seu rodapé (a seção na parte inferior da página) está atualizado . Clique duas vezes nesta seção para inserir seus dados de contato e qualquer outra informação relevante que você gostaria de incluir. Você também pode adicionar imagens, como fizemos abaixo:

Está satisfeito com a aparência da sua página? Ótimo – estamos na reta final então! Vamos passar para a próxima etapa – é uma que definitivamente não queremos pular.

Passo 10 – Tornando seu site compatível com dispositivos móveis

Até agora, estamos trabalhando na versão desktop do seu site. Mas como cerca de 50% do tráfego vem de dispositivos móveis, é essencial garantir que seu site seja compatível com dispositivos móveis .

Infelizmente, os sites Wix não vêm 100% prontos para dispositivos móveis por padrão. Precisaremos fazer alguns pequenos ajustes para chegar lá.

No menu superior (que ainda não usamos), você notará um ícone de celular no meio da tela – clique nele para mudar para a visualização móvel do seu site.

Como você pode ver, a versão mobile do site ainda não está certa – alguns elementos estão mal colocados. Primeiro de tudo, vamos clicar no botão ‘Otimizador de layout de página’ no menu esquerdo e depois em ‘Otimizar agora’, para permitir que o Wix corrija automaticamente alguns dos elementos.

Agora você pode prosseguir e corrigir manualmente qualquer coisa que não pareça correta, incluindo o posicionamento de qualquer texto e a altura de suas seções/faixas. Você pode excluir ou ocultar quaisquer elementos desnecessários e até mesmo reordenar seções clicando nos ícones de seta à direita da tela do celular.

Passo 11 – Atualize os detalhes do seu negócio e otimize seu site para o Google

A próxima etapa é totalmente opcional, mas a recomendamos se ser encontrado no Google for importante para sua empresa.

Lembra do menu superior – aquele que dá acesso ao backend (ou seja, a parte “invisível”) do seu site? Iremos usá-lo para atualizar os detalhes comerciais do seu site e otimizá-lo para aumentar suas chances de ser encontrado no Google.

Clique em ‘Configurações’ e escolha ‘Informações comerciais’.

Você será levado a um painel onde poderá inserir seus dados de contato, endereço comercial, se houver, e as configurações regionais do seu site (idioma, moeda, etc.). Não se esqueça de clicar em ‘Salvar’ quando terminar.

Feito isso, vamos cuidar das configurações de otimização de pesquisa. Novamente, clique em ‘Configurações’ na barra de navegação superior e escolha ‘Ser encontrado no Google’.

Isso o levará ao Assistente de SEO do Wix, que o guiará pelas etapas de otimização do seu site. Siga cada etapa, inserindo o nome da sua empresa e como você a descreveria.

Em seguida, será apresentado a você seu plano de SEO personalizado – recomendamos passar por cada etapa para otimizar os vários elementos do seu site (título da página inicial, descrição de SEO, conexão com o Google, etc.).

Passo 12 – Visualize e publique seu site!

Parabéns – você chegou à última etapa! Antes de publicar seu site, vamos ter certeza de que está tudo bem. Clique no botão 'Visualizar' no canto superior direito da tela e verifique se você está satisfeito com as versões para desktop e celular do seu site.

Para mudar da visualização desktop para mobile (e vice-versa), clique nos ícones abaixo:

Você notará um banner no topo do seu site dizendo 'Crie seu site Wix hoje'. Isso será exibido se você mantiver seu site no plano gratuito do Wix. Se quiser removê-lo e acessar mais recursos Wix, você pode atualizar para um plano pago (mais sobre isso mais tarde).

Quando estiver satisfeito com a aparência de tudo, clique no botão verde ‘Voltar ao Editor’ no canto superior direito da tela. Agora, vamos clicar no botão azul ‘Publicar’, novamente no canto superior direito da tela.

E é isso – seu site Wix já está no ar!

Você verá uma pequena tela pop-up com a URL do seu site Wix gratuito – você pode clicar em ‘Ver site’ para dar uma olhada na página publicada. Ou, se você quiser usar seu próprio domínio para o seu site (seja um domínio existente ou um novo), clique em ‘Atualizar agora’ para atualizar para um dos planos pagos do Wix.

Se você quiser ver o site que fizemos neste tutorial, confira aqui.

Como funciona o Wix: conclusão

Esperamos que isso tenha ajudado a responder sua pergunta sobre como o Wix funciona!

Como você pode ver, o Wix permite criar um site simples, mas totalmente funcional, usando os modelos flexíveis da plataforma e o editor de arrastar e soltar.

Mas isso é apenas arranhar a superfície. Graças aos seus recursos poderosos, há muito mais que pode ser feito com o Wix. Você pode conferir nossa análise do Wix para obter mais informações ou ver alguns exemplos de sites reais criados com o Wix.

Se você está pronto para começar a usar o Wix, pode começar a criar seu site aqui.