apostila wix html5

71
Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Upload: marcio-souza

Post on 24-Apr-2015

168 views

Category:

Documents


10 download

TRANSCRIPT

Page 1: Apostila Wix HTML5

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 2: Apostila Wix HTML5

O que é o Wix

O Wix é uma empresa que oferece um serviço gratuito de criação online de websites baseados em Flash e também em HTML5, que atualmente é a nova tendência da web, permitindo criar sites incríveis com aparência profissional, cheio de cores, sons e animações em pouco tempo, seja para você mesmo, para o seu negócio, para portfólio ou até mesmo para o seu salão de beleza. A imaginação é o seu limite.

O desenvolvimento do website é todo feito por você mesmo através de um painel de controle bem completo e em Português, onde poderá arrastar os elementos, adicionar animações, imagens, textos, galeria de imagens, menus animados, loja virtual, criar novas páginas entre outras coisas.

A versão em HTML5 do construtor foi lançada recentemente, é é recomendada pois torna o site muito mais leve, amigável para os buscadores se comparado com a versão em Flash, além de ser compatível com tablets e aparelhos celulares, o que era um problema na versão em flash do construtor.

É claro que o resultado final do site em HTML5 não é tão bonito quanto se fosse feito utilizando o construtor em Flash, no entanto as vantagens que ele oferece podem ser mais interessantes na maioria dos casos.

• Facilita o compartilhamento das páginas nas redes sociais;• Compatibilidade com aparelhos móveis;• Mais agilidade no carregamento das páginas;

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 3: Apostila Wix HTML5

• Melhor integração com ferramentas externas;• Site mais amigável para os buscadores.

SEOPor ser feito em HTML5, os sites desenvolvidos com o novo construtor de sites são mais amigáveis para os buscadores, além disso, ele permite configurar

alguns aspectos importantes das páginas relacionados a SEO, como é o caso dos títulos, descrição e meta keywords, o que a longo prazo pode ajudar a conquistar melhores posições nos buscadores como o Google. Veremos isso mais adiante.

Um item interessante que eu notei no novo construtor é que agora todas as páginas do site podem receber um título único, o que ajuda ainda mais no indexamento das páginas nos mecanismos de busca. Este é um recurso que faltava na versão em Flash, que até o momento da preparação deste e-book exibe apenas 1 único título para o site inteiro :-(

O Construtor de SitesO construtor pode ser acessado online através de qualquer computador e continua com a mesma facilidade de arrastar e soltar os elementos dentro das páginas, criar e editar páginas, organizar os elementos, adicionar imagens, vídeos e músicas, configurar a aparência e mais…

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 4: Apostila Wix HTML5

Ele também oferece dezenas de templates profissionais, que você poderá escolher para o seu site e adaptar conforme as suas necessidade.

Se quiser conferir o resultado dos sites criados com o construtor de sites do Wix em flash ou HTML5, visite os seguintes sites:

Criar Sites em FlashCriar Sites em HTML5

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 5: Apostila Wix HTML5

Como criar uma conta no Wix

Como citado anteriormente, o Wix permite criar um site sem pagar absolutamente nada, bastando que você crie sua conta em questão de minutos e comece a trabalhar em seu site.

Mas é claro que assim como tudo o que é grátis, a conta grátis do Wix impõe alguns limites que podem ou não ser um problema para você. Exemplos dessa limitação é a exibição de um link que aparece no rodapé do site apontando para o Wix e a impossibilidade de adicionar um domínio próprio sem que antes tenha adquirido um dos planos premium.

Para a maioria das pessoas essas limitações não são nem percebidas, mas caso um dia você precise de mais, basta que adquira um dos planos premium quando quiser ou então abandonar o projeto e partir para outra solução que se encaixe no seu perfil, como é o caso do Webnode ou do Webmium.

Primeiro passoPara começar, você só precisa acessar o site do Wix e clicar no botão “Comece Agora”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 6: Apostila Wix HTML5

Uma pequena janela se abrirá. Clique sobre o link “CRIAR NOVA CONTA”.

Na página seguinte, selecione o tipo de site que deseja criar. São vários seguimentos como Negócios e Serviços, Música, Loja Online, Fotografia, Restaurante, Site Pessoal e etc.

Na próxima página selecione se deseja criar um site em Flash ou HTML5. Lembrando que depois de criado o site, você não poderá mudar o tipo de site, portanto escolha com cautela. Minha recomendação é que opte pelo HTML5.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 7: Apostila Wix HTML5

Você também poderá escolher o modelo do template que deseja para o seu site. Escolha um deles e clique no botão “Editar”.

Feito isso, você já terá acesso ao painel de controle onde poderá trabalhar em seu site. Nos próximos capítulos você aprenderá como trabalhar com o editor da melhor maneira possível.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 8: Apostila Wix HTML5

Como configurar a aparência no Wix

O construtor de sites do Wix em HTML5 permite editar vários aspectos dos sites criados nele. Para ter acesso a estas ferramentas, dentro do painel de controle, clique no botão identificado com um pincel que aparece no canto esquerdo superior.

Background – Esta opção permite escolher uma imagem para o fundo do site, o que dependendo do caso pode dar mais vida e harmonia ao site como um todo.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 9: Apostila Wix HTML5

Para alterar o plano de fundo, basta selecionar o que mais lhe agrada. Caso não esteja satisfeito, escolha outro ou simplesmente clique sobre o botão “Descartar Mudanças” que aparece mais abaixo.

Cores – esta opção permite alterar o esquema de cores do site, basta que você selecione um grupo de cores para que todo o site seja alterado.

Esta opção altera todas as cores do site de uma só vez, ou seja, não tem como editar cada uma das cores por vez. Você deve escolher qual a melhor combinação para o seu site.

Caso não queira nenhuma das opções, basta que você clique sobre o botão “Descartar Mudanças” que aparece no rodapé do site.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 10: Apostila Wix HTML5

Fontes – Esta opção permite alterar o formato das letras do site. Lembrando que esta opção somente é recomendável para sites mais descontraídos. Se este não for o seu caso, as fontes padrão são a melhor opção, pois dão mais seriedade ao site.

Esta opção altera o grupo de fontes de seu site, como os títulos, subtítulos e conteúdo. Caso nenhuma das opções te agrade, clique no botão “Descartar Mudanças” que aparece mais abaixo.

Dica extraO construtor de sites ainda permite alterar a borda das páginas do site, porém esta opção não está bem clara dentro do painel. Para ter acesso a este recurso, clique novamente no botão do Pincel e em seguida clique em qualquer lugar da página que não tenha nenhum elemento, como imagem ou texto.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 11: Apostila Wix HTML5

Uma pequena caixinha irá surgir, clique em “Trocar Estilo” para abrir o editor de bordas.

Uma vez que ele esteja aberto, você pode escolher uma das três opções (Página Inicial, Padrão ou Especial) ou clicar em “Editar Estilo” para fazer outros tipos de configurações.

Ao final clique em OK para salvar as alterações.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 12: Apostila Wix HTML5

Como criar e editar páginas

Agora que você já configurou a aparência do seu site, chegou a hora de trabalhar na criação do conteúdo, que é o que mais importa no website. Vamos começar por aprender como criar, apagar ou editar uma página.

Para começar, ainda no painel de controle de seu site, clique sobre o primeiro botão “Páginas” representado por uma folha de papel com uma orelha dobrada que aparece do lado esquerdo do editor.

O menu de edição de páginas surgirá mostrando todas as páginas que você já tem criadas em seu site.

Neste mesmo menu você poderá selecionar uma determinada página de seu site, fazer configurações, adicionar uma nova página, fazer configurações que possam ajudar no SEO ou mudar o tipo de efeito de transição de página.

Vamos ver a seguir como trabalhar com cada um destes recursos.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 13: Apostila Wix HTML5

Criar uma nova página Para adicionar novas páginas ao seu site, clique sobre o link “+ Adicionar Página” que aparece no rodapé do menu de gestão de páginas.

Na página seguinte selecione o tipo de página que deseja criar, dê um nome a ela e clique em OK para finalizar. Acima você pode ver uma página do tipo “Serviços2” com o título “ARTIGOS” sendo criada.

Como excluir uma páginaSe o que você deseja é eliminar uma página que você tenha criado, selecione ela no menu de gestão de páginas e clique sobre o pequeno ícone representado por uma engrenagem que aparece ao lado do título da página.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 14: Apostila Wix HTML5

Na próxima janela que se abre, clique sobre o link “Apagar”. O sistema irá perguntar se você tem realmente certeza de que deseja excluir a página (espero que tenha). Clique sobre o botão “Apagar” em vermelho para finalizar.

Como alterar o efeito de transiçãoO construtor de sites do Wix permite adicionar um efeito muito legal sempre que uma nova página do site é aberta para os leitores.

Você tem a sua disposição os seguintes efeitos:

Transição Horizontal – Faz com a página apareça da direita para a esquerda.

Transição Vertical – Faz com que a página apareça de cima para baixo.

Cross Fade – Faz com que a página apareça gradualmente.

Fora-Dentro – Quase o mesmo efeito do Cross Fade, com a diferença de que o carregamento acontece do lado exterior para o interior.

Como criar páginas protegidas por senhaRecentemente o Wix adicionou um novo recurso ao construtor que permite criar páginas protegidas por senha, que pode ser a solicitação de uma simples senha ou que exija que o visitante se cadastre no site para poder acessar a página em questão.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 15: Apostila Wix HTML5

Se você tiver alguma área de seu site que deseja que somente pessoas autorizadas tenham acesso, proceda da seguinte maneira.

Clique na aba “Páginas”, clique na pequena engrenagem que aparece ao lado da página que deseja proteger, selecione a opção “Proteger Página”, selecione se deseja que os visitantes se cadastrem no site ou se somente deseja que seja solicitado uma senha.

Se escolher a opção de senha, você deve digitar a senha desejada e salvar as alterações.

Lembrando que você deverá fornecer a senha por e-mail ou qualquer outro meio de comunicação para as pessoas que deseja que tenham acesso a página protegida.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 16: Apostila Wix HTML5

Como adicionar um formulário de contato

Agora que você 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 seus leitores possam se comunicar com você através de e-mail de uma forma simples e rápida.

Para fazer isso, basta você 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 abaixo.

Depois que a página for adicionada ao site, você 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”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 17: Apostila Wix HTML5

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.

Você também tem a opção de trocar a aparência da caixa do formulário clicando no botão em azul escrito “Trocar Estilo”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 18: Apostila Wix HTML5

Como editar ou adicionar texto as suas páginas

Você pode editar qualquer texto já presente nas suas páginas ou então adicionar novos textos caso deseje. Confira abaixo as duas formas.

Como editar um texto já existenteSe você quer apenas editar um texto já persente nas páginas de seu site, clique sobre ele e na pequena janela que se abre clique em “Editar Texto”.

Em seguida o campo em que o texto está sendo exibido passa a ser editável e você poderá alterar seu conteúdo da maneira que desejar.

Ps. Você também, poderá editar os textos de suas páginas clicando duas vezes rapidamente com o mouse sobre o texto que deseja editar.

Como adicionar um novo campo de textoSe a sua ideia é adicionar um novo texto em um lugar qualquer da página, você deve primeiro clicar sobre o botão “Adicionar” que aparece no menu superior esquerdo e em seguida clicar em “Texto”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 19: Apostila Wix HTML5

Em seguida você deve selecionar a opção Título ou Parágrafo dependendo do local em que deseja adicionar o texto. Na maioria dos casos você deve adicionar primeiro o título e em seguida o campo parágrafo.

Após clicar em qualquer um dos dois tipos de texto, eles são adicionados a página e você pode arrastá-lo até o local dentro da página que desejar. Para fazer isso apenas clique e segure o botão direito do seu mouse e arraste o novo elemento para qualquer lugar na página.

Você também poderá aumentar o espaço em que o texto será exibido, clicando e segurando o botão do mouse nas pequenas bolinhas que aparecem na cor azul em volta do texto.

Acima você pode ver o texto do título editado e o campo em volta dele reduzido.

Confira agora como ficaria um título e um parágrafo adicionado a página de seu site.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 20: Apostila Wix HTML5

Como adicionar imagens

Agora que você já sabe como editar e adicionar novos textos às suas páginas, chegou a hora de aprender como adicionar imagens para dar mais vida ao seu site.

Para fazer isso, clique novamente no botão com o símbolo de “Adicionar” e em seguida no botão “Imagem”.

O menu de configurações irá agora exibir 4 opções de imagens que você pode adicionar em seu site. São eles:

Imagem – Permite adicionar uma imagem sem frescura.

Imagem sem moldura – Esta é a mesma opção da anterior (nem sei porque eles deixaram essa opção aí).

Imagem com moldura – Esta opção permite adicionar uma imagem com uma borda especial em volta dela.

Clip Art – Esta opção é bastante interessante, pois dá acesso a um banco de imagens do próprio Wix que podem ser adicionadas em seu site.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 21: Apostila Wix HTML5

Como adicionar e editar uma imagem com moldura Para adicionar uma imagem com moldura ao seu site, clique no botão “Imagem com moldura” . Uma imagem padrão é adicionada a página.

Você deve clicar sobre ela uma vez e em seguida em “Trocar Imagem”. O gerenciador de imagens irá exibir todas as imagens que você já tenha carregado em seu site, assim como também dá a opção de carregar novas imagens.

Vamos começar aprendendo como carregar (ou fazer upload se preferir) uma imagem para o seu site no Wix. Para fazer isso clique no botão Upload que aparece na janela da galeria de imagens.

Uma nova janela surgirá na tela. Você deve procurar pela pasta em que se encontra a imagem que deseja carregar em seu computador, selecionar ela e clicar no botão “Abrir” (ou equivalente, dependendo do sistema operacional do

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 22: Apostila Wix HTML5

seu computador).

A imagem será então exibida na galeria de imagens de seu site. Selecione ela e clique sobre o botão OK que aparece no canto direito inferior na cor azul.

Feito isso, a imagem será trocada com a imagem padrão que estava sendo exibida em seu site.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 23: Apostila Wix HTML5

Como alterar a borda da imagemCaso a imagem que você esteja editando possua uma borda, você poderá alterar alguns parâmetros delas para deixá-la mais customizada.

Para fazer isso, clique novamente sobre a imagem e em seguida clique em “Trocar Estilo”. Uma nova janela aparecerá na tela, onde você poderá escolher entre as opções Padrão, Sem Moldura, Moldura Especial 1 e Moldura Especial 2.

Você também tem a opção de fazer configurações extras clicando sobre o link “Editar Estilo” que aparece ao lado dos botões.

Feita as alterações desejadas, clique sobre o botão OK para finalizar.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 24: Apostila Wix HTML5

Como adicionar uma galeria de imagensO construtor de sites do Wix também permite adicionar galerias de imagens, que deixam seu site muito mais moderno e atrativo. Para ter acesso as galerias, clique sobre o botão de “Adicionar” e em seguida em “Galeria”, como mostra a imagem abaixo.

Você tem a sua disposição 4 tipos de galerias, Grid, Slideshow, Slider e Grid Animada. Veremos a seguir qual a diferença de cada uma delas e como você poderá trabalhar as imagens.

Vamos ver o que cada uma delas faz:

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 25: Apostila Wix HTML5

Grid – Exibe uma galeria com várias imagens lado a lado. Quando um visitante clica em uma delas, uma nova janela é aberta com a imagem em tamanho real.

Slideshow – Esta opção exibe um grupo de imagens que vão se alterando conforme o visitante clica sobre as setas que aparecem nas laterais da galeria.

Slider – Este recurso é bem parecido com o Slideshow citado anteriormente, com a diferença de que ele vai alterando as imagens da esquerda para a direita ou vice versa sempre que o mouse for posicionado sobre a galeria.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 26: Apostila Wix HTML5

Grid Animada – Esta opção também é bem parecida com o Grid citado anteriormente, com a diferença de que é aplicado um efeito de esmaecimento sobre as imagens conforme o visitante passa o mouse sobre elas.

Como alterar as imagens das galeriasAgora que você aprendeu para que servem e como adicionar as galerias às suas páginas, vamos aprender agora como configurar as imagens que aparecem dentro delas.

Para trocar as imagens, você deve clicar sobre qualquer uma das imagens que já aparecem na galeria e em seguida em “Organizar imagens” como mostra a imagem abaixo.

Uma nova janela se abrirá com uma mensagem. Clique sobre o botão em azul escrito “Adicionar Imagens” para selecionar imagens que você já tenha

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 27: Apostila Wix HTML5

carregado em seu site ou que pretenda carregar.

Na próxima janela você poderá selecionar as imagens ou carregar novas imagens clicando no botão “Upload” que aparece no canto direito superior da janela.

O processo de carregamento de novas imagens é o mesmo citado anteriormente, portanto basta que você siga os passos. Você deve selecionar todas as imagens que deseja que apareçam na galeria de imagens uma a uma.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 28: Apostila Wix HTML5

Você também tem a opção de adicionar um título, descrição e também um link apontando para uma página ou arquivo (veremos mais sobre links adiante).

Estas informações poderão aparecer sobre as imagens enquanto os visitantes estiverem vendo-as.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 29: Apostila Wix HTML5

Como criar links em textos e imagens

Agora vamos aprender como criar links em textos ou imagens que ao serem clicadas levam os visitantes para uma outra página, seja para fora ou dentro do próprio site, para arquivos, vídeos ou qualquer outra coisa disponível na Internet.

Como criar links em textosPara criar um link em um texto no Wix, você deve primeiro selecionar o trecho do texto que deseja que o link esteja associado. Para fazer isso, no modo de edição de texto, posicione o ponteiro do mouse sobre a última ou a primeira palavra desejada, clique e segure o botão do mouse e arraste até a outra extremidade do texto.

O texto deve ficar na cor azul como mostra a imagem abaixo. Você deve então clicar sobre o pequeno botão representado por um gomo de corrente que fica na parte superior do editor para abrir o gerenciador de links.

Uma pequena janela se abrirá com 4 opções. Confira a seguir como utilizar cada um deles.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 30: Apostila Wix HTML5

Endereço Web – Esta opção permite apontar um link para qualquer página ou arquivo dentro ou fora do seu site. Após clicar sobre o botão “Endereço Web”, uma nova janela se abrirá, onde você deve inserir o link completo da página que deseja que o link aponte.

Você também tem a opção de fazer com que o link abra em uma nova janela selecionando a opção “Abrir em uma nova janela”.

Página – Esta opção permite criar um link para uma página interna de seu próprio 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 em seu site. Você só precisa selecionar a página desejada e clicar em OK para que o link seja criado.

Depois de selecionada a página interna desejada basta clicar em OK para que o link seja criado.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 31: Apostila Wix HTML5

E-mail – Esta opção permite criar um link que ao ser clicado abre o cliente de e-mail do visitante para que ele possa te enviar um e-mail. Esta opção não é recomendada porque hoje em dia a maioria das pessoas não usam mais clientes de e-mail, mas sim contas grátis em serviços como o Gmail ou Hotmail.

Quando um visitante clicar em um link assim, pode ser gerado um erro que o fará ficar perdido, porque a maioria das pessoas já não usam tal programa para enviar seus emails. Minha recomendação é que opte pelo formulário de contato citado anteriormente.

Mas se mesmo assim você deseja criar um link para seu endereço de e-mail, clique sobre o botão “E-mail” e na nova janela digite o seu endereço de e-mail e um assunto, que aparecerá no e-mail enviado pelo visitante.

Depois de digitar o endereço basta clicar no botão 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 basta que você clique sobre o botão “Documento” para abrir uma nova janela.

Em seguida clique sobre o campo “Adicionar/Mudar Documento:” para abrir o gerenciador de documentos.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 32: Apostila Wix HTML5

Na nova janela você poderá escolher um documento que já tenha carregado ou então carregar um novo arquivo clicando no botão “Upload”.

Depois que carregar o arquivo, você deve selecionar ele e clicar em OK e em OK novamente para que o link seja criado.

Lembrando que você somente poderá carregar documentos, ou seja, não será possível carregar vídeos ou arquivos de música. Além disso o limite é de até 10 MB de tamanho para cada arquivo.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 33: Apostila Wix HTML5

Como criar links em ImagensA criação de links em imagens é bem parecida com a criação de links em textos. Para criar um, você precisa selecionar a imagem a qual o link será criado.

Um pequeno menu aparecerá sobre a imagem, clique sobre “Link para” para abrir o gerenciador de links.

Depois disso o processo de criação de links é o mesmo descrito nos passos de criação de links em textos. Basta que você siga os passos citados anteriormente que não terá problema.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 34: Apostila Wix HTML5

Como adicionar botões de redes sociais

Não há como negar que as redes sociais estão dominando a Internet, atraindo cada vez mais pessoas que buscam por formas de se comunicar com outras pessoas, compartilhar ideias, informação, discutir assuntos diversos e etc.

Por isso é importante que não fiquemos de fora desse que meio que oferece uma excelente chance de atrair um público ainda maior.

Pensando nisso, o Wix se encarregou de adicionar ao seu construtor formas fáceis de implementar widgets nas páginas, que facilitam a interação dos visitantes com as redes sociais, permitindo que eles compartilhem com os amigos ou que discutam suas ideias.

Para ter acesso aos widgets de redes sociais, clique novamente no botão de “Adicionar” e em seguida em “Redes Sociais”.

Lembrando que para que você possa utilizar alguns dos recursos de redes sociais presentes no construtor de sites do Wix, é necessário que você tenha uma conta ativa dentro das respectivas redes sociais.

Confira abaixo como utilizar cada um deles.

Curtir do Facebook – Esta opção adiciona um botão do Facebook que permite que seus leitores curtam suas páginas. A grande vantagem disso é que a “Curtida” do leitor aparece em sua timeline e pode ser vista por todos os seus amigos.

Para adicioná-lo as suas páginas, basta que você clique no menu Adicionar, Redes Sociais e em Curtir do Facebook para que o botão apareça dentro da página. Depois é só você arrastá-lo para o local desejado na página.Se quiser você ainda pode alterar sua aparência clicando sobre e ele e em seguida em “Configurações”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 35: Apostila Wix HTML5

Uma nova janela surgirá onde você poderá alguns aspectos do botão.

Comentários do Facebook – Esta opção permite adicionar uma caixa de comentários do Facebook, que por sua vez permite que os leitores logados na rede comentem em suas páginas. Novamente estes comentários aparecem na timeline de todas as pessoas que comentarem e que poderão ser vistas por seus amigos.

Para adicionar em seu site, basta que você clique no menu Adicionar, Redes Sociais e em Comentários do Facebook para que uma caixa apareça dentro da página que estiver editando. Em seguida posicione a caixa no local em que deseja que o sistema de comentários apareça dentro da página.

Você também poderá configurar o número de comentários a ser exibido, assim como a cor de fundo. Para fazer isso clique sobre a janela de comentários e em seguida em “Configurações”.

Uma nova janela surgirá. Faça as configurações e feche a janela de configurações.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 36: Apostila Wix HTML5

Lembrando que você não poderá moderar os comentários deixados pelos leitores, portanto caso venha a ter problemas com comentários, a única solução pode ser a exclusão do sistema de comentários.

Seguir no Twitter – Esta opção permite que seus leitores te sigam dentro da rede social do Twitter. Para adicionar esta opção basta que você clique no menu Adicionar, Redes Sociais e em Seguir no Twitter para que uma pequena caixa apareça dentro de sua página. Arraste a caixa até o local em que deseja que o botão do Twitter seja exibido.

Em seguida clique sobre ele e em seguida no link “Configurações”.

Na nova janela que aparece, digite seu perfil no Twitter e feche a janela.

Tweet do Twitter – Permite que seus leitores compartilhem suas páginas entre todos os seus seguidores dentro da rede, além de exibir o número total de compartilhamentos. Para adicioná-lo em seu site, basta que você clique no

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 37: Apostila Wix HTML5

menu Adicionar, Redes Sociais e em Tweet do Twitter para que um pequeno botão seja inserido na página. Arraste-o para o local em que deseja que ele apareça dentro da página.

Para configurá-lo, clique sobre ele e em seguida em “Configurações”.

Uma nova janela será aberta. Digite seu nome de usuário no Twitter, uma frase que aparecerá junto aos Tweets e clique em “Atualizar”.

Feed do Twitter – Esta opção exibe seus últimos Tweets dentro da rede, o que pode ser muito útil para que seus leitores fiquem a par do que você anda postando dentro da rede. Para adicioná-lo ao seu site, basta que você clique no menu Adicionar, Redes Sociais e em Feed do Twitter. Uma nova janela aparecerá dentro de sua página.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 38: Apostila Wix HTML5

Para configurá-lo, clique sobre ele e em seguida em “Configurações”.

Na nova janela digite seu nome de usuário do Twitter e selecione o número de atualizações que deseja que o widget exiba. Opcionalmente, você também pode configurar a aparência deste widget clicando em “Trocar Estilo”.

Google +1 – Este recurso permite que seus leitores votem nos seus artigos, o que é muito bom para o desempenho dele nos resultados das buscas dentro do círculo de amigos das pessoas que curtiram suas páginas. Para adicionar o botão, basta clicar sobre o botão Adicionar, Redes Sociais e em Google +1. Um novo botão aparecerá na página, para configurá-lo, clique sobre ele e em seguida em “Configurações”.

Na nova janela que aparece, selecione suas opções e feche a janela.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 39: Apostila Wix HTML5

Barra de Redes Sociais – Este recurso permite adicionar uma pequena barra com botões de divulgação de seu conteúdo no Facebook, Twitter e Google Mais. Para adicioná-lo em sua página, basta clicar sobre o botão Adicionar, Redes Sociais e em Barra de Redes Sociais.

Para configurá-lo, clique sobre a pequena barra e em seguida em “Configurações”.

Na nova janela você poderá configurar o tamanho e espaçamento dos botões. Opcionalmente, você também poderá configurar a ordem que eles aparecem dentro da página.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 40: Apostila Wix HTML5

Como criar uma loja virtual

Recentemente o Wix implementou um recurso que permite criar lojas virtuais, dando mais opções para seus clientes. O interessante da loja é que é possível configurá-lo para receber os pagamentos através de sistemas de pagamentos online como o Paypal e o Pagseguro, que acredito ser o mais utilizado no território Brasileiro.

Lembrando que apesar de que seja perfeitamente possível criar uma loja virtual utilizando uma conta gratuita, o sistema não é totalmente funcional, pois não permite que os possíveis clientes finalizem a compra. Se este for o seu caso, você pode aproveitar o cupom de 33% de desconto que o Wix está dando para os leitores do CriarSites.

Para ter a loja funcionando, é necessário adquirir um plano premium e-Commerce que custa cerca de R$27 por mês. Além disso, você também deve entender que o sistema de criação de lojas do Wix é um pouco limitado, portanto você não poderá criar sistemas complexos como podemos ver em algumas das grandes lojas de vendas pela Internet.

Outra coisa que você deve entender é que o sistema ainda não consegue calcular o frete de seus produtos, mas segundo o Wix esse é um recurso que eles estão trabalhando, portanto pode acontecer de que no momento em que você estiver lendo este e-book, o recurso de cálculo de frete já esteja disponível.

Agora que você está ciente das limitações do sistema de lojas do Wix, vamos iniciar a criação de sua primeira loja virtual no Wix.

Criar uma nova PáginaO primeiro passo é iniciar uma nova página. Como vimos anteriormente neste e-book, basta que você clique no botão “Páginas” e em “Adicionar nova Página”.

Com a nova página criada, você poderá adicionar um título caso ache necessário (isso também foi explicado anteriormente neste e-book).

Vamos começar adicionando uma galeria de produtos. Para fazer isso, clique sobre o botão “Adicionar”. No menu que se abre, clique em “Online Store”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 41: Apostila Wix HTML5

Um novo menu se abrirá, você pode começar por adicionar uma nova galeria de produtos clicando em “Product Gallery”.

Um novo campo será adicionado a página. Ele estará perguntando qual galeria de produtos você deseja que seja exibido na página. Como esta será a primeira vez que estará trabalhando com o sistema de lojas, simplesmente clique em OK para seguir ao próximo passo.

A seguir você precisa cadastrar seus produtos e criar uma ou mais categorias de produtos. Para fazer isso clique sobre a galeria de produtos que acabou de adicionar e no menu que aparece clique em “Manage Store”.

Configurar moeda e forma de pagamentosVamos começar por configurar a forma de pagamento e a moeda que será utilizada na loja. Para fazer isso, clique sobre o link “Opções” que aparece no topo da janela de gerenciamento de produtos.

Uma nova janela surgirá na tela. Se você está pensando em vender apenas para o Brasil, a melhor opção para receber o dinheiro seria pelo Pagseguro, no entanto você também tem a sua disposição o Paypal ou Google Checkout.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 42: Apostila Wix HTML5

Lembrando que para receber dinheiro seja pelo Pagseguro ou qualquer outro sistema de pagamento online, é necessário que você tenha uma conta criada na empresa escolhida.

Como o nosso foco é o Brasil, vamos aprender então como configurar para receber o dinheiro através do Pagseguro. Acredito que se estiver em Portugal, a melhor opção seria o Paypal.

Em método de pagamento escolha a opção Pagseguro.

Você precisará então do token de sua conta. Para gerar o seu basta que você clique aqui e gere o seu clicando no botão “Gerar” que se encontra mais ou menos no meio da página.

Em seguida você deve digitar o endereço de e-mail ao qual sua conta do Pagseguro está associada.

Selecione também a moeda desejada, que em nosso caso é “Real (Brasil)”.

Em peso selecione a opção “Kilograms” (como citado anteriormente, o Wix ainda não calcula o frete, portanto esta é uma opção que só será utilizada em breve).

Feito todas as configurações, clique em “Concluído” para finalizar.

Adicionar nova CategoriaVamos começar por adicionar uma nova categoria que será utilizada para exibir os produtos em sua loja. Você pode fazer isso clicando em “Adicionar Categoria” no menu esquerdo da janela.

Um pequeno campo aparecerá acima do botão “Adicionar Categoria”. Digite o nome da categoria desejada e em seguida em “Adicionar”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 43: Apostila Wix HTML5

Agora você precisa eliminar todos os produtos que aparecem por padrão na loja, você pode fazer isso selecionando eles e em seguida clicar no botão “Deletar”.

DicaVocê também pode duplicar um produto repetindo este mesmo processo, mas desta vez clicando no botão “Duplicar”, o que é muito útil para quando pretende adicionar um produto similar, necessitando apenas de algumas alterações para que o novo produto esteja pronto para venda.

Adicionar ProdutoVamos agora adicionar um novo produto a galeria. Para fazer isso clique sobre o botão que aparece em Laranja “Adicionar Produto”.

Uma nova janela se abrirá onde você poderá configurar vários aspectos do produto. Confira uma descrição de cada um deles.

Título do Produto – Digite aqui um título que descreva bem o produto a venda.

Preço – Digite aqui o preço do produto a venda. O formato deve ser 00.00, ou seja, para um produto de trinta e dois Reais e cinquenta e nove centavos, você deve digitar 32.59.

Categorias – Você poderá associar o produto a uma ou mais categorias. Para fazer isso basta clicar sobre o botão “Adicionar”, selecionar as categorias desejadas e em seguida clicar em “Concluído”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 44: Apostila Wix HTML5

Mídia – Aqui você pode adicionar até 10 fotos de cada um dos produtos a venda. Para adicionar novas fotos clique sobre o botão “Adicionar Foto” para abrir o gerenciador de imagens.

O processo de carregamento de novas imagens foi explicado anteriormente neste e-book.

Info – Aqui você pode adicionar algumas informações sobre o que se trata o produto a venda. Lembrando que você tem duas opções aqui que são o “Resumo” e “Detalhes”.

No primeiro campo você deve adicionar alguma descrição rápida sobre o que se trata o produto e o segundo uma descrição mais detalhada sobre ele.

Para alterar entre as duas opções, você deve clicar nas abas como é mostrado na imagem acima.

Detalhes Opcionais – Assim como diz o texto, estes campos são opcionais. O mais interessante aqui é o campo “Preço de Venda” que permite especificar um preço promocional dos produtos.

Por exemplo, digamos que você tenha especificado anteriormente o preço de R$32,59 para uma camiseta, mas que queira vender o produto por apenas R$29.90. Basta que você adicione este valor no campo “Preço de Venda” para que o produto exiba o preço real e o preço promocional na descrição do produto.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 45: Apostila Wix HTML5

Caso não queira exibir um desconto em seus produtos, basta deixar este campo em branco.

Opções de Inventário – Este recurso permite adicionar informações como cor e tamanho dos produtos, para que os clientes possam escolhê-las no momento em que estiverem adicionando o produto ao carrinho de compras.

Para ter acesso a este recurso clique no botão “Administrar Opções”.

Vamos aprender como adicionar opções de tamanho de roupas. Para fazer isso na área “Tamanho” clique no botão “Selecione” que aparece mais abaixo.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 46: Apostila Wix HTML5

Na nova janela que se abre, digite os tamanho disponíveis, assim como uma descrição para cada um deles. É muito importante ser claro quanto a descrição, porque é essa informação que você terá para saber qual o tamanho escolhido pelos clientes. Abaixo você pode ver um exemplo de medidas disponíveis no Brasil.

Caso necessite de adicionar um ou mais campos, clique sobre o link “Adicionar Seleção”.

O valor que aparece ao lado serve para especificar um acréscimo caso seja necessário. Por exemplo, digamos que uma camiseta com tamanho P seja um preço X, mas que a camiseta GG seja 5 reais mais caro. Neste caso basta que você adicione este valor ao campo ao lado para que ele seja adicionado ao valor total do produto no momento em que o cliente estiver comprando.

Depois que fizer todas as alterações, clique no botão “Concluído” para fechar a janela.

Visibilidade do Produto – Caso o produto cadastrado ainda não possa ser vendido ou tenha acabado o estoque, você pode desabilitá-lo mudando a chavinha para “Offline”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 47: Apostila Wix HTML5

Feito todas as alterações no produto, clique no botão “Salvar Produto” para que ele esteja disponível na galeria de produtos.

Você poderá repetir este mesmo processo para adicionar outros produtos que pretenda vender em sua loja virtual.

Escolher Galeria de ProdutosAgora que você já criou suas categorias e adicionou seus produtos para vender, chegou a hora de especificar a(s) galeria(s) que deseja que seja exibida na página.

Para fazer isso clique sobre o campo que representa a galeria que você adicionou anteriormente e no menu que aparece clique em “Choose Collection”.

Na janela que se abre selecione a categoria desejada e clique em OK.

Em seguida todos os produtos da galeria selecionada aparecerão na página.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 48: Apostila Wix HTML5

Você ainda pode fazer algumas configurações na forma que as imagens aparecem na página. Para fazer isso clique novamente dentro do campo que representa a galeria de produtos e em seguida clique em “Configurações”.

Na nova janela que se abre você pode especificar um nome para o botão de adicionar ao carrinho de compras, número de produtos exibidos na página, colunas, margem e etc.

Você deve ir testando estas opções até encontrar a melhor configuração, pois o resultado final pode depender do tipo de produto e também da quantidade de produtos de uma mesma categoria você pretende exibir na tela.

Adicionar Carrinho de ComprasAgora que aprendemos como exibir os produtos em sua loja, vamos agora aprender como adicionar um carrinho de compras, que será responsável por exibir os produtos selecionados pelos seus clientes.

Para fazer isso, clique novamente no botão “Adicionar” e em “Online Store”. No novo menu clique em “Shopping Cart”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 49: Apostila Wix HTML5

Um novo campo aparecerá na página, arraste e posicione no local desejado. Você poderá alterar o texto exibido no carrinho de compras, para fazer isso, clique sobre ele e no menu que aparece clique em “Configurações”.

Uma nova janela se abrirá onde você poderá alterar o texto e também o tamanho do carrinho de compras.

Como adicionar o Botão de Finalizar CompraO próximo passo é adicionar um botão que permita que os clientes finalizem a compra, para fazer isso, novamente clique em “Adicionar” e em “Online Store”.

No novo menu que aparece, clique sobre o botão “Checkout Button”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 50: Apostila Wix HTML5

Um botão amarelo será adicionado a página, arraste-o até o local desejado na página. Para configurá-lo, clique sobre ele e no menu que aparece clique em “Configurações”.

Um novo menu surgirá na tela, onde você pode editar o texto exibido no botão assim como outros parâmetros.

Você também tem a opção de configurar o estilo do botão. Para fazer isso, clique novamente no botão e no menu que aparece clique em “Button Style”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 51: Apostila Wix HTML5

Um novo menu surgirá onde você deve clicar em “Editar Estilo”.

No novo menu que aparece, você poderá alterar o formato do botão, assim como suas cores. Faça as alterações desejadas e salve.

Parabéns! Você criou sua loja virtual no wix, mas lembre-se de que você somente poderá realizar as vendas se adquirir o plano Premium e-Commerce, caso contrário o botão de finalizar compra não estará funcionando.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 52: Apostila Wix HTML5

Como Otimizar suas páginas no Wix HTML5

O novo construtor de sites do Wix permite que as páginas sejam otimizadas de forma a conseguirem melhores posições nos resultados das buscas do Google e de outros grandes buscadores. Você poderá editar parâmetros como o título da página, descrição e palavras-chave.

Para ter acesso a este recurso, clique na aba páginas, posicione o ponteiro do mouse sobre qualquer uma das páginas de seu site e em seguida clique sobre o ícone de uma pequena engrenagem que aparece ao lado.

O que adicionar em cada um dos campos disponíveisCada um dos campos disponíveis para otimização devem ser preenchidos de formas diferentes como você poderá ver a seguir.

Título da Página – Em título da página, você deve adicionar um grupo de palavras-chave que representem o conteúdo que os leitores poderão encontrar nela.

Procure colocar até 10 palavras-chave que as pessoas digitem nos buscadores

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 53: Apostila Wix HTML5

quando realizam buscas pelo tipo de conteúdo que você oferece, mesmo que as vezes elas não façam muito sentido para você.

Descrição da página – Neste campo você deve adicionar uma breve descrição sobre o assunto abordado na página. Esta descrição as vezes é exibida pelo Google às pessoas que realizam as pesquisas em seu buscador.

Portanto é importante que esta descrição não só descreva o conteúdo da página, mas que também incentive os leitores a clicarem no resultado.

Palavras-chave – Aqui você deve adicionar cerca de 20 palavras-chave que representem o conteúdo da página separados por uma vírgula.

Como descobrir boas palavras-chaveUma boa ferramenta para descobrir boas palavras-chave é o Google Insights para Pesquisas, que é uma ferramenta oferecida gratuitamente pelo Google.

Você poderá adicionar duas ou mais palavras ou grupo de palavras e fazer uma comparação entre elas para descobrir quais são mais utilizadas pelas pessoas. Além disso, você pode segmentar a pesquisa para uma determinada região como o Brasil por exemplo, desta forma o resultado exibido pelo Insights para Pesquisa mostra apenas os dados referentes a buscas feitas por pessoas no Brasil.

Abaixo você pode ver o resultado de uma comparação entre a palavra html 5 e html5 (sem espaço), segmentado para o Brasil no período de 90 dias, que como pode ser visto abaixo, a palavra sem espaço tem bem mais procura do que a palavra HTML 5 com espaço.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 54: Apostila Wix HTML5

Além dessa comparação, mais abaixo na mesma página em que realizou a pesquisa, poderá encontrar recomendações de palavras relacionadas que as pessoas fazem no buscador do Google, o que pode ser muito útil para descobrir novas palavras-chave a serem utilizadas em seu site.

Lembrando que outro fator importantíssimo que você deve prestar atenção se quiser ter mais chances de conseguir boas posições nos buscadores é a linkagem interna, ou seja, links presentes dentro do conteúdo que levam os visitantes de uma página a outra dentro do seu próprio site.

Para ter uma ideia melhor sobre como fazer a otimização de suas páginas, recomendo que baixe meu outro e-book “Guia de Otimização de Sites para os mecanismos de Busca” que contém dicas mais detalhadas sobre como fazer a otimização de um site ou blog.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 55: Apostila Wix HTML5

Como adicionar vídeos em suas páginas

Outro excelente recurso do construtor de sites do Wix é a possibilidade de adicionar vídeos do Youtube ou do Vimeo com muita facilidade.

Para adicionar vídeos nas páginas de seu site, clique no botão “Adicionar” e em seguida em “Mídia”. Uma caixa contendo um vídeo de exemplo será adicionado a página. Arraste ele até o local desejado em sua página.

Para alterar o vídeo exibido, clique sobre a caixa em que o vídeo aparece e no menu que aparece clique em “Configurações”.

Uma nova janela se abrirá onde você deve inserir o endereço em que se encontra o vídeo que você deseja que seja exibido na sua página.

Nessa mesma janela você ainda poderá configurar outros para que o vídeo seja exibido do seu jeito.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 56: Apostila Wix HTML5

DicaSe você não sabe como fazer pegar a URL do vídeo no Youtube, acesse a página em que se encontra o vídeo desejado. Procure a barra de endereços que aparece na parte superior de seu navegador e copie a URL que aparece nele.

Agora é só voltar para a caixa de configuração do vídeo e colar a URL e salvar.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 57: Apostila Wix HTML5

Como adicionar um mapa do Google Maps

O Wix também permite adicionar um mapa do Google Maps de forma a orientar seus clientes até o local de seu negócio.

Para fazer isso, crie uma nova página ou use uma página já criada em seu site e clique sobre o botão “Adicionar” e em seguida em “Addon”. E no novo menu que aparece clique sobre o botão “Google Maps”.

Um novo campo contendo um mapa do Google padrão será adicionado a página, para configurá-lo, clique sobre ele e em seguida em “Configurações”.

Uma nova janela aparecerá na tela, onde você poderá configurar o endereço de seu negócio, uma descrição sobre ele, configurar o tipo de mapa desejado e outros controles mais finos.

Lembrando que após configurar o campo “Endereço” você deve clicar no botão “Encontrar” e após adicionar algo no campo “Descrição”, você deve clicar sobre o botão “Configurar” para que as alterações tenham efeito. Você poderá acompanhar em tempo real as alterações.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 58: Apostila Wix HTML5

Como adicionar códigos HTML e embed ao seu site

O Construtor de sites do Wix também permite adicionar códigos HTML/Embed as páginas de seu site para adicionar contadores de visitas, chats, relógios e etc.

Para fazer isso, clique no botão “Adicionar” e em seguida em “Addon”. Um novo menu se abrirá, clique sobre o botão “HTML”.

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 pode ser colado apareça.

Agora é só colar o código HTML do que deseja adicionar a sua página e salvar a alteração. Abaixo você pode conferir o código de um contador de visitas sendo adicionado a minha página.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 59: Apostila Wix HTML5

Wix App Market

Recentemente o Wix também incorporou em seu construtor de sites em HTML5 um novo recurso que permite adicionar aplicativos aos sites criados no construtor, o que pode expandir e muito as capacidades do website sem a necessidade de ter conhecimentos profundos sobre o que se está fazendo, basta acessar a aba de aplicativos, escolher o que mais te agrada e fazer as configurações necessárias.

A grande vantagem do Wix App Market é que qualquer desenvolvedor de aplicativos pode participar dele, enviando seus aplicativos assim como acontece com outros serviços como o Google Apps e até o próprio Facebook que também oferece milhares de aplicativos para seus usuários.

E como os desenvolvedores no Wix App Market podem ganhar dinheiro com seus aplicativos, isso garante que sempre haverá aplicativos de qualidade sendo adicionados ao serviço, já que haverá uma seleção natural do que é bom e o que não é.

Dentre os aplicativos já disponíveis você poderá encontrar formulários de contato, mapas do Google Maps, sistema de login e senha, chat, email marketing, Google Calendar, galeria de imagens do Flickr, Instagram e muito mais.

Para utilizar estes aplicativos basta acessar a aba App Market e selecionar aplicativo desejado.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 60: Apostila Wix HTML5

Como pré-visualizar, salvar e publicar seu site

Agora que seu site já está pronto, chegou a hora de publicá-lo para que todos na Internet possam ter acesso a ele. Estas opções estão disponíveis na parte superior direita da tela, 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 você poderá ver como 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.

Salvar – Assim como o nome diz, este botão permite salvar as alterações em seu site. Recomendo que salve seu site para que ele guarde qualquer alteração que você tenha feito nas páginas antes mesmo de publicar o site.

Lembrando que você pode repetir este processo a qualquer momento enquanto estiver trabalhando em seu site, o que garantirá que você não perca nada do seu trabalho caso tenha algum problema como travamento de seu navegador de Internet.

Se esta for a primeira vez que você está salvando seu site, o construtor irá solicitar que você especifique um endereço para o qual seu site poderá ser acessado.

Repare que acima eu especifiquei as palavras “novosite” e que a URL de meu site passou a ser http://criarsites.wix.com/novosite.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 61: Apostila Wix HTML5

Lembrando que você 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 de seu site com muito cuidado.

Publicar – Este recurso permite que você publique seu site de forma que ele esteja disponível para as pessoas o acessarem. Você deve repetir este processo toda vez que fizer alguma alteração em seu site, caso contrário elas somente poderão ser vistas por você.

Upgrade – Esta opção permite transformar 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 seu site através do Google Analytics e muito mais.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 62: Apostila Wix HTML5

Confira abaixo os planos disponíveis pelo Wix.

Lembrando que a aquisição de um plano premium não é obrigatório. Você pode muito bem ficar com seu site grátis para sempre (ou até quando o Wix existir), mas se pensa em levar seu site para um novo nível (mais profissional) é muito importante que pense em fazer algum investimento em seu site.

Se quiser mesmo adquirir um plano premium, confira este artigo em que eu falo sobre um cupom de desconto de 33% que o Wix está oferecendo aos leitores do Criar Sites.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 63: Apostila Wix HTML5

Como adicionar um Favicon ao seu site

O construtor de sites do Wix também permite que você adicione um favicon, que é um pequeno ícone que aparece ao lado da URL do site, nos favoritos, nas abas de navegação e etc.

Lembrando que este recurso somente está disponível para os usuários premium, ou seja, se estiver utilizando a versão grátis do construtor, este recurso não estará ativo.

Se você não sabe como criar um favicon, recomendo que confira este artigo.

Você poderá adicionar o seu clicando em “Configurações” e em “Favicon”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 64: Apostila Wix HTML5

Como criar um site Mobile

O construtor do Wix ainda oferece um recurso muito interessante que é a possibilidade de adicionar uma versão mobile de seu site, o que será entregue automaticamente para os visitantes que acessarem seu site utilizando um aparelho móvel como celulares e tablets, facilitando o acesso ao seu conteúdo nesses aparelhos.

Se você se interessou por este recurso, acesse sua conta principal do Wix (não é a mesma página do construtor), selecione seu site e clique no botão “Mobile”.

Escolher um template - Uma nova página se abrirá onde você deve primeiro escolher um template. Clique nas setas que aparecem nas laterais para ver outros exemplos de templates que você pode utilizar.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 65: Apostila Wix HTML5

Na próxima página adicione um título ao seu site e escolhe uma das categorias disponíveis.

Na nova página que aparece, você já poderá trabalhar no desenvolvimento de sue site Mobile. Para editar as páginas, clique sobre o nome delas no menu “My Pages” que aparece do lado esquerdo. Em seguida clique sobre o texto que está sendo exibido na página, apague o atual texto e escreva seu próprio conteúdo.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 66: Apostila Wix HTML5

Apagar página - Para apagar uma ou mais páginas, clique sobre o link “Home” que aparece no menu esquerdo e em seguida posicione o ponteiro do mouse sobre o título da página que deseja deletar. Uma pequena lixeira aparecerá do lado direito do título, clique sobre ele para deletar a página.

Adicionar nova página - Para adicionar uma nova página, clique sobre o link “Add page” que aparece do lado esquerdo do menu.

Selecione então o tipo de página desejado e clique em OK para criar a nova página.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 67: Apostila Wix HTML5

Como publicar seu site MobileDepois que tiver preparado seu site Mobile, chegou a hora de publicá-lo para que todos possam vê-lo. Para fazer isso, clique sobre o botão verde escrito “Publish” que aparece no topo do site.

Feito isso seu site já estará online e poderá ser acessado pelos visitantes com aparelhos móveis.

Para editar seu site Mobile posteriormente, acesse a página inicial do Wix, selecione o site que deseja editar e em seguida clique em “Editar” como mostra a imagem abaixo.

Você será redirecionado para o editor de site mobile do Wix, onde poderá alterar completamente o conteúdo de seu site.

Ps. Lembrando que o site mobile na versão grátis exibe um banner relativamente grande no topo do site que leva os visitantes para o site do Wix. Portanto se pensa em utilizar este recurso, recomendo que adquira uma versão premium.

Pronto, seu site e seu site móvel estão prontos para serem apresentados para os milhares de vistantes potenciais.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 68: Apostila Wix HTML5

Como adquirir um plano premium (com desconto)

Se você optar por adquirir um plano premium para usufruir de todos os recursos e todo o potencial que seu site poderá trazer a você e seu negócio, confira os seguintes passos.

Lembrando que o Wix oferece uma garantia de até 14 dias para você ter seu dinheiro de volta. Se não gostar do construtor por algum motivo, basta você solicitar seu dinheiro que o wix devolve a você sem maiores perguntas.

Para iniciar o processo de compra de seu plano premium, acesse o painel de controle de seu site e na parte superior clique em “Upgrade”.

Você será direcionado a uma página com especificações de cada plano. Se quiser apenas conectar um domínio ao seu site, poderá escolher o plano “Conect a Domain”, mas se quiser criar uma loja virtual, terá que obrigatoriamente escolher o plano “eCommerce”.

Se estiver começando agora com seu site e não deseja criar uma loja virtual, minha recomendação é que escolha o plano “Combo, que oferece ótimos recursos e vem com um domínio grátis. Você poderá solicitar um aumento de plano a qualquer momento caso seja necessário.

Selecione o plano desejado e clique no botão “Comprar Agora”.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 69: Apostila Wix HTML5

Você será levado a uma página onde poderá efetuar a compra com seu cartão de crédito Internacional (a Wix não é uma empresa Brasileira) com bandeiras Visa, MasterCard, American Express e Discover.

Insira os dados de seu cartão de crédito e finalize a compra. Se tudo der certo com sua operadora do cartão de crédito, em poucas horas seu site já estará funcionando com o plano escolhido.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 70: Apostila Wix HTML5

Cupom de DescontoPara comprar um plano premium com um desconto de 33%, você deve selecionar o plano “Anual Unlimited”, digitar os dados do seu cartão de crédito, digitar o seguinte cupom 1871criarsites221 e clicar no link “Calcular” como mostra a imagem abaixo.

Você verá que o desconto aparece mais abaixo na área em que é exibido os valores. Para finalizar clique no botão “Enviar compra” para ter seu site funcionando com o plano premium.

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados

Page 71: Apostila Wix HTML5

Conclusões

O construtor de sites do Wix é uma excelente ferramenta para criação de um site completo, que permite que você crie um site independente dos serviços de terceiros, que exigem mais dinheiro, tempo e conversação para que as coisas sejam feitas do jeito que você quer.

Eu admito que não tinha conhecimento de todo o potencial do construtor de sites em HTML5 do Wix até que comecei a trabalhar neste e-book. Dentre os construtores de sites grátis existentes pela Internet, o wix passou a ser o meu favorito, seguido apenas pelo Webnode que também é muito bom.

Me encontre nas redes sociaisComunidade no OrkutSiga me no TwitterSiga me no FacebookMe siga no Google+Fã Page do CriarSites.com no Facebook

Gostou deste material?Então sinta-se livre para distribuir este e-book em seu site, blog, e-mail ou redes sociais e ajude seus leitores a terem sucesso com seus sites.

Ah, e não se esqueça de baixa os outros e-books grátis que eu preparei.

Até a próxima!

Escrito por Celso Lemes – www.criarsites.com – Todos os direitos reservados