criar sites com wix

Ação de Formação: RED na dinamização da Sala de aula. Formador: José Couto e Artur André Duração: 25 horas Local: Escola Básica dos 2º e 3º Ciclos do Estreito de Câmara de Lobos

Página 1 de 32

Como Criar um Site Passo a Passo Para si que caiu de paraquedas e está perdido sem saber por onde começar a

criar o seu site no construtor Wix, seguem abaixo artigos com todo o passo-a-

passo para começar a criar o seu site facilmente.

O que é o Wix?

O Wix é uma ferramenta online de criação gratuita de sites em Flash e também

em HTML5 (nova versão da linguagem de programação que atualmente é a

tendência da web). Com o Wix é possível criar sites incríveis com aparência

bonita, sofisticação e elegância. Em pouco tempo cria um website profissional

para sua empresa, para divulgar seu negócio ou para interagir com os seus

alunos. O Wix é amigável junto aos motores de buscas.

Como criar um site Grátis Passo a Passo?

Além de contar com toda a facilidade de poder arrastar e soltar elementos,

adicionar animações, imagens, galeria de imagens, textos, menus animados,

criar novas páginas, entre outras coisas… conta com o “auxílio” de um painel de

controlo em português e bastante intuitivo.

Esqueça a programação por códigos!

Com o Wix dá pra fazer tudo o que sua criatividade quiser!

Solte a sua imaginação, mostre aos seus alunos formas dinâmicas de interação,

crie uma apresentação, dinamize as suas aulas!

Por onde eu começo? Siga este Passo a Passo, através dos links e crie rapidamente seu website!

(Obs: O primeiro link de cada passo (com letra maior) é o mais importante, os

links subsequentes são uma continuidade do assunto abordado).

Atenção: os passos descritos abaixo são para o desenvolvimento de website no

formato HTML5 (recomendado).

http://pt.wix.com/stunningwebsites/400pt?utm_campaign=af_criarsitewix.com&experiment_id=af_criarsitewix.com


Página 2 de 32

Vamos ao passo a passo:

O Wix permite que crie a sua conta em questão de segundos e comece a

trabalhar no seu site imediatamente. Tudo isso sem pagar nada!

1º PASSO:

Primeiro:

Para criar sua conta, aceda ao site do Wix e clique em “Comece Agora”.

Segundo:

Insira um email e uma senha e clique em “OK”. Também pode entrar

rapidamente com suas informações das redes sociais.

http://pt.wix.com/

http://pt.wix.com/


Página 3 de 32

Terceiro:

Na próxima página, escolha uma categoria/tipo de site que deseja criar,

selecione também uma subcategoria para seu projeto.

Depois clique em “VÁ”.

Quarto:

Na próxima janela, serão apresentados vários templates conforme a

categoria/tipo de site que selecionou. Na opção “Ver”, é possível visualizar o

funcionamento do template.


Página 4 de 32

Escolha o tema que mais lhe agradar e clique em “Editar” para começar a

trabalhar o seu projeto através do Painel de Controlo.

Pronto! Acabou de criar sua conta no Wix.

2º PASSO:

Agora que já criou uma conta no Wix, selecionou o tipo de site e escolheu o seu

template, vamos trabalhar a configuração da aparência do seu tema.

A edição da aparência no Wix resume-se ao Background (imagem de fundo),

Cores e Fontes. Para aceder a esta ferramenta, dentro do Painel de Controlo,

clique num ícone identificado por um pincel no canto superior esquerdo.

Background:

Esta ferramenta permite escolher uma imagem de fundo para o seu site, o que

pode ser interessante dependendo do tipo de site que está a criar.

http://www.criarsitewix.com/42/passo-a-passo/como-criar-uma-conta-no-wix/

http://pt.wix.com/stunningwebsites/400pt?utm_campaign=af_criarsitewix.com&experiment_id=af_criarsitewix.com


Página 5 de 32

Para mudar o plano de fundo, basta clicar sobre a imagem que deseja mudar e

automaticamente o fundo irá ser atualizado com a imagem escolhida. Quando

encontrar a imagem que mais lhe agrada, não precisa salvar mudanças, basta

fechar a janela. Caso deseje voltar ao plano de fundo anterior, clique em

“Descartar Mudanças”.

Cores:

Permite que altere o esquema de cores de todo o site, a partir da escolha de

cores pré-determinadas na “Paleta de Cores” do seu painel de controlo. São

várias as opções e é possível visualizar a alteração instantaneamente, basta

selecionar e clicar na cor desejada. Caso queira voltar à cor normal, basta clicar

em “Descartar mudanças”.


Página 6 de 32

Vale ressaltar que a mudança ocorre uniformemente, ou seja, esta opção altera

todas as cores do site de uma só vez, não sendo possível mudar uma parte

específica do site por vez. Em vista disso, deve escolher qual é a combinação

de cores que melhor se encaixe no seu projeto ou definir uma cor personalizada,

utilizando a opção “Personalizar Paleta”.

Fontes:

Esta opção, como todos já sabem, serve para alterar o tipo de fonte do site. Pode

escolher as fontes pré-determinadas que aparecem na guia, porém, assim como

as cores, a mudança vale para todo o site, como títulos, subtítulos e o conteúdo.

Caso não queira mudar de fonte, clique no botão “Descartar Mudanças”.


Página 7 de 32

Como alterar o tipo de fonte no Wix

Caso não tenha gostado das fontes pré-determinadas oferecidas na guia fontes,

o Wix disponibiliza a personalização das mesmas.

Para isso, clique na opção “Personalizar Fontes”, será exibido os estilos de

fontes que compõem o seu site.


Página 8 de 32

Nesta parte é mostrado a cor e o tamanho de cada estilo, listei alguns só para

ilustrar

Título – fonte do cabeçalho da página;

Título S – fonte do subtítulo da página;

Menu – fonte do menu;

Corpo M, S – fonte do corpo de texto.

Para alterar o estilo da fonte, clique sobre o item que deseja modificar, escolha

a fonte ( Recomenda-se o uso de fontes tradicionais como Arial, Tahoma,

Verdana, Times New Roman, para sites mais sérios, pois transmite maior

profissionalismo. Caso seu site seja mais descontraído, escolha a fonte que mais

lhe agradar), escolha uma variação (negrito, itálico) e a cor da fonte, depois

clique em “OK”.


Página 9 de 32

Prontinho! Agora já sabe como modificar a aparência do seu site!

3º PASSO:

Como criar páginas no wix

Agora que já tem uma noção básica sobre Como alterar a aparência do Wix, está

na hora de aprender a criar páginas e editar o conteúdo do seu website.

Como editar uma página

Para começar a editar uma página, precisa selecioná-la, para isso clique na

página que deseja editar, no link “Página”, que fica no cabeçalho da página e

selecione uma página para editar.

http://www.criarsitewix.com/70/passo-a-passo/como-editar-um-site-wix-configurando-aparencia/


Página 10 de 32

Como criar páginas no wix

Para aceder a esta guia “Páginas”, dentro do Painel de Controlo, clique no

primeiro botão (uma folha com a ponta dobrada). O menu de edição de páginas

mostrará todas as suas páginas e as opções de configuração.

http://www.criarsitewix.com/wp-content/uploads/2012/12/Capturar16.png

http://www.criarsitewix.com/wp-content/uploads/2012/12/Capturar6.png


Página 11 de 32

Vamos começar a trabalhar cada um destes recursos.

Como criar uma nova página no Wix

Para adicionar novas páginas ao seu site, clique sobre o link

“Adicionar Página”.

Na janela popup que abrir, serão apresentados layouts prontos, pré-

configurados, para facilitar a criação da nova página. Também pode criar uma

página a partir do zero.

Escolha um tipo de página, dê um nome a ela e clique em “Ok”.

Abaixo foi criado uma página do tipo “SERVIÇOS 1″, com o nome de

“PORTFÓLIO”:


Página 12 de 32

Como criar subpáginas no wix

Para criar um subpágina, basta passar o rato nos quadradinhos que aparecem

ao lado do nome da página, até o cursor ficar com várias direções, clique e

mantenha pressionado, arrastando até à página que deseja deixar como

subpágina.

Como configurar uma página

Selecione a página que deseja nomear e clique no ícone “Configurações da

Página”, irá surgir uma nova aba com as opções de:

http://www.criarsitewix.com/wp-content/uploads/2012/12/Capturar3.jpg


Página 13 de 32

Nome da Página – O nome da sua página, este também será o nome que

aparecerá no menu.

Endereço da Página – Nome que aparecerá na URL da página.

Ex. www.seusite.com.br/endereco-da-minha-pagina (não são aceitos acentos

e caracteres especiais).

Ocultar do Menu – Irá esconder a página do menu de navegação mas não será

excluída.

Definir como página inicial – Irá definir a página como página inicial do seu

site, a página que será aberta quando seu site for acedido.

Proteger Página – Protege a página com uma senha ou exige que o visitante

se cadastre no site para poder aceder a página.

Aplicando o efeito de transição nas páginas

Efeito de transição das páginas é o efeito que será apresentado nas páginas

quando o visitante mudar de uma página para outra. Estes efeitos são uma mais-

valia e assemelham-se ao efeito de transição de slides do PowerPoint, porém

com menos opções. No construtor de sites Wix as opções são as seguintes:


Página 14 de 32

Transição Horizontal – as páginas irão aparecer da direita para a esquerda.

Transição Vertical – as páginas irão aparecer de cima para baixo.

Cross Fade - Efeito fade nas páginas, aparecendo gradualmente e lentamente.

Fora-Dentro - Efeito parecido com o Cross Fade, mas as páginas aparecem de

fora para dentro.

DICA: recomendamos que para um melhor entendimento dos tipos de transição,

faça um teste com cada uma delas. Para isso, escolha a transição e clique

em “Pré-visualizar” (canto superior direito do painel de controlo) e teste cada

uma das opções, mudando de uma página para outra.

4º PASSO:

Adicionando texto numa página

Se deseja adicionar um novo texto em qualquer lugar da página, clique primeiro

no botão “Adicionar” (ícone de +), escolha a opção “Texto”.


Página 15 de 32

Selecione o tipo de texto que deseja adicionar, como Título ou Parágrafo.

Após clicar no tipo de texto escolhido, ele será adicionado à página. Clique sobre

o campo até aparecer uma seleção com pequenas bolinhas e arraste-o até o

local onde deseja deixá-lo.

Pode redimensionar o tamanho do campo clicando e segurando o botão do rato

em cima das pequenas bolinhas em volta do campo. Esta seta branca com fundo

azul na parte superior do campo serve para arrastar verticalmente o objeto.

Veja como ficou o exemplo de ‘adicionar textos’ do Criar Site Wix:


Página 16 de 32

Excluindo um campo de texto

Para excluir um campo de texto, basta selecionar o campo que deseja excluir e

clicar no ícone da lixeira, que aparece na barra “texto” ou apertar a tecla

“delete” do teclado. Depois confirme a exclusão do objeto.

Duplicando um campo de texto

Uma função interessante é a opção de duplicar um campo já configurado, esta

opção economiza tempo quando queremos inserir um campo já formatado e ao

invés de fazer tudo de novo, basta duplicarmos. Para isso, clique sobre a imagem

até aparecer a barra de configurações, depois clique no botão “Duplicar” (duas

folhas, uma em cima da outra), quando o conteúdo for duplicado, clique sobre

ele e arraste-o para o local desejado.

Prontinho, agora sabe como adicionar texto em suas páginas.


Página 17 de 32

5º PASSO:

Adicionando e editando imagens no Wix

Continuando o processo de estruturação básica do site, vamos aprender como

adicionar imagens e deixar o seu site mais vivo.

No painel de controlo, clique no botão “Adicionar” e selecione “Imagem”, serão

exibidos 4 opções de imagens para adicionar:

Imagem – adiciona uma imagem simples.

Imagem sem Moldura – também adiciona uma imagem simples.

Imagem com Moldura – adiciona uma imagem com uma borda/moldura

especial editável.

Clip Art - adiciona cliparts exclusivos do próprio construtor.

DICA: escolha sempre a primeira opção (imagem), porque será capaz de

adicionar moldura para configurar o “estilo” da imagem. Esta dica não vale para

o ClipArt, pois não é possível adicionar um clipart através das configurações da

imagem.


Página 18 de 32

Como editar uma imagem no Wix

Agora que aprendemos como adicionar imagens, vamos explorar um pouco mais

este recurso.

Como trocar uma imagem:

Para alterar uma imagem padrão e inserir uma imagem de sua escolha, clique

sobre ela e selecione “Trocar imagem”.

A Galeria de imagens irá exibir todas as imagens que já tenha

enviado para o seu site, assim como também dá a opção de carregar novas

imagens.


Página 19 de 32

Para enviar imagens do seu computador, clique no botão “Upload” (marcado na

imagem), na janela que abrir, selecione a pasta e depois a imagem que deseja

enviar, depois clique em “Abrir”, automaticamente a imagem começará a ser

carregada na Galeria.

Quando a imagem terminar de ser carregada e for exibida na galeria, clique

sobre ela até ficar selecionada e depois dê “OK”.

DICA I: Para selecionar várias imagens ao mesmo tempo, segure a tecla “SHIFT”

para imagens em sequência ou a tecla “Ctrl” para selecionar imagens aleatórias.

O mesmo vale para inserir as imagens no site, utilize as teclas para selecionar

várias imagens e depois clique em OK.

DICA II: O Wix também oferece a opção “Imagens Grátis Wix”, que aliás

recomendamos que seja bem explorada pelo desenvolvedor, visto que são

imagens profissionais e inteiramente GRÁTIS, uma excelente ferramenta para

ajudar a tornar seu projeto mais profissional.


Página 20 de 32

Muitas empresas na internet cobram pelo uso de imagens profissionais como

estas. Portanto, aproveite!

Finalmente, aprendeu como adicionar e editar profissionalmente uma imagem

no Wix.

6º PASSO:

Veremos agora como criar links em textos e imagens. Estes links servirão

para direcionar o visitante para uma outra página na internet ou dentro do próprio

site, arquivos (pdf, documento etc.), email, vídeos e outras coisas.

Para criar link num texto no Wix, primeiro clique no campo de texto onde deseja

criar o link, escolha a opção “Editar Texto” ou dê um clique duplo no campo de

texto.

Agora selecione com o rato o excerto do texto que deseja que o link esteja

associado. Este deve ficar azul (Veja a imagem abaixo).

Agora clique no botão de hiperlink na barra de formatação (um globo com uma

corrente):


Página 21 de 32

Então será aberto o Gestor de Links com as seguintes opções de links:

Endereço Web – Esta opção permite apontar um link para qualquer página

existente na internet. Após clicar neste botão, irá abrir-se uma janela, insira o

endereço da página ou site que deseja direcionar o link.

Abrir em uma nova janela – abre uma nova janela no navegador quando o link

for clicado (recomendado).

Abrir na mesma janela – abre o link na janela que o utilizador estiver a visualizar.

Clique em “OK”.


Página 22 de 32

Página – Esta opção permite criar um link para uma página interna do seu site,

após clicar sobre o botão “Página”, uma nova janela com um menu drop down

surgirá, exibindo todas as páginas já criadas no seu site.

Só precisa selecionar a página desejada e clicar em OK para que o link

seja criado.

Documento – Esta opção permite criar um link para um documento em

formatos como doc, pdf, odt e etc. Para criar o link, clique no botão “Documento”,

uma nova janela se abrirá, agora clique dentro do campo “Adicionar/Mudar

Documento”:

Na nova janela que aparecer, escolha um documento que já tenha carregado ou

então carregue um novo arquivo clicando no botão “Upload”.


Página 23 de 32

Após o carregamento, clique sobre o documento para selecioná-lo de depois

clique em “OK”.

Lembrando que só é possível carregar arquivos, não sendo possível enviar

vídeos ou músicas. Limite de 10mb para cada arquivo.

Como criar links em Imagens

O processo de criação de links em imagens é o mesmo descrito nos passos de

criação de links em textos.

Para criar um link para uma imagem, clique sobre ela e escolha a opção “Link

para”, abrirá a janela do Gestão de links, a partir daí, basta seguir os mesmo

passos para criação de links em textos.


Página 24 de 32

7º PASSO:

Como adicionar um formulário de contato

Agora que já sabe como criar uma nova página, chegou a hora de criar uma

página com um formulário de contato que servirá para que os seus

leitores possam comunicar-se consigo através de e-mail de uma forma simples

e rápida.

Para fazer isso, basta iniciar o processo de criação de uma nova página

e escolher a opção “Formulário” e em seguida dar um nome sugestivo a página.

Confira na imagem abaixo:

http://www.criarsitewix.com/96/passo-a-passo/como-criar-e-editar-paginas-no-wix/


Página 25 de 32

Depois que a página for adicionada ao site, ainda tem que configurar

o formulário. Na página que contém o formulário, clique sobre ele e no menu que

aparece clique sobre o a opção “Configurações”.

Na próxima janela que se abre, digite o seu endereço de e-mail e caso queira, um

segundo endereço de e-mail para que as informações do formulário

seja enviadas para ambos os endereços:

Também pode mudar o estilo do seu formulário clicando em “Trocar Estilo”.


Página 26 de 32

8º PASSO:

Como inserir um botão na página

Vamos aprender a inserir um botão de link em sua página. O botão é muito útil

quando queremos incrementar um link, deixando-o com uma aparência mais

atraente.

Para inserir um botão, clique no botão “Adicionar” e selecione a opção “Botões

e Menu”:

Na janela que abrir, escolha um estilo de botão:


Página 27 de 32

Relembramos que pode alterar o estilo do botão a qualquer momento através da

opção “Trocar estilo”.

Nas Configurações, é possível alterar o nome do botão e o link para o qual ele

irá direcionar.


Página 28 de 32

9º PASSO:

Como adicionar códigos HTML e Embed ao seu site

O Construtor de sites do Wix também permite

adicionar códigos HTML/Embed nas páginas de seu site.

Este recurso é muito importante e útil, já que podemos inserir outros recursos

que não estão no Wix. Como, por exemplo, data e hora, contador de visitas, chat

online etc…

HTML é uma linguagem de programação básica para qualquer site na internet,

existem várias outras linguagem mais modernas e robustas, como é o caso do

próprio HTML5, porém os códigos HTML ainda são fundamentalmente usados

em milhares de websites.

Código EMBED – complementando e ao mesmo tempo exemplificando a

explicação acima, o código embed é uma tag html que permite inserir arquivos

de mídia em uma página.

Vamos à prática:

Para inserir códigos, clique no botão “Adicionar” e em seguida em “Apps”.

Um novo menu se abrirá, clique sobre o botão “HTML”:


Página 29 de 32

Um novo campo aparecerá na página em que estiver trabalhando. Arraste-o até

o local em que deseja que ele apareça e para configurá-lo clique sobre ele e em

seguida em “Configurações”. Um novo menu surgirá na tela. Altere o campo

“Modo” para “Código HTML” (importante) para que o campo onde o código

HTML será inserido, apareça.

Agora é só colar o código HTML que deseja adicionar à sua página e salvar a

alteração. Abaixo pode conferir o código de data de atualização, que foi

adicionado à página do Criar Site Wix do construtor:

Após inserir o código, clique em Atualizar para ver na página como o código

ficou.

10º PASSO:

Como Pré-visualizar, Salvar e Publicar seu Site

Finalmente, chegamos ao último passo desta série para iniciantes. Agora que

seu o site já está pronto, chegou a hora de publicá-lo para que todos na Internet

possam ter acesso a ele.


Página 30 de 32

Estas opções estão disponíveis na parte superior direita do ecrã, onde é possível

Pré-visualizar a página, Salvar, Publicar ou fazer um Upgrade diretamente do

editor de sites.

Pré-Visualizar – Ao clicar neste botão poderá ver como o seu site será visto

pelos visitantes, o que é muito bom porque nem todos os recursos

que adicionamos ao site podem ser visto da maneira correta enquanto estamos

no editor. (como, por exemplo, o efeito que um botão faz ao passar o rato sobre

ele).

Salvar – Assim como o nome diz, este botão permite salvar as alterações no seu

site. Recomendo que salve o seu site para que ele guarde qualquer

alteração que tenha feito nas páginas antes mesmo de publicar o site.

Lembrando que pode repetir este processo a qualquer momento enquanto

estiver a trabalhar no seu site, o que garantirá que não perca nada do seu

trabalho caso tenha algum problema como bloqueio do seu navegador de

Internet, queda de luz ou de conexão.

Se esta for a primeira vez que está a salvar o seu site, o construtor irá solicitar

que especifique um endereço para o qual o seu site poderá ser acedido.

Repare que acima está especificado as palavras “novositewix” e que a URL do

site passou a ser http://criarsite.wix.com/novositewix.


Página 31 de 32

Relembrando: não poderá mudar este endereço a não ser que adicione um

domínio personalizado como poderá conferir a seguir.

Portanto se não pensa em adquirir um plano premium, escolha o endereço do

seu site com muito cuidado.

Publicar – Este recurso permite que publique o seu site de forma que ele esteja

disponível para as pessoas o acederem. Deve repetir este processo toda a vez

que fizer alguma alteração no seu site, caso contrário elas somente poderão ser

vistas por si.

Para isso, clique no botão “Publicar”, uma pequena janela se abrirá, marque a

opção “Permita que o seu site seja encontrado pelos motores de busca” e

clique em “Ok“

Surgirá uma mensagem em inglês: “Please wait while saving” e novamente

uma janela de publicação bem sucedida será exibida:


Página 32 de 32

Ao clicar no botão “OK”, outra janela aparecerá com as opções de partilha nas

Redes sociais:

Prontinho! Seu site já está publicado!

Upgrade – Esta opção permite transformar o seu site de grátis para um

site premium, que adiciona muito mais recursos como a possibilidade de

adicionar um domínio personalizado, criar uma loja virtual funcional, remover

anúncios do Wix de seu site, mais espaço para armazenamento de dados, maior

limite para transferência mensal de dados, possibilidade de monitorar o seu

site através do Google Analytics e muito mais.

Fonte: http://www.criarsitewix.com/

This work is licensed under a Creative Commons Attribution 3.0 Portugal License.

http://www.criarsitewix.com/

http://creativecommons.org/licenses/by/3.0/pt/

criar sites com wix

Education