Apostila Sobre Wix HTML5

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

O que o Wix
O Wix uma empresa que oferece um
servio gratuito de criao online de
websites baseados em Flash e tambm
em HTML! 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! se%a para voc" mesmo!
para o seu neg&cio! para portf&lio ou at
mesmo para o seu salo de bele'a( )
imaginao o seu limite(
O desenvolvimento do website todo feito por voc" mesmo atravs de um
painel de controle bem completo e em *ortugu"s! onde poder+ arrastar os
elementos! adicionar anima$es! imagens! te,tos! galeria de imagens! menus
animados! lo%a virtual! criar novas p+ginas entre outras coisas(
) verso em HTML do construtor foi lanada recentemente! recomendada
pois torna o site muito mais leve! amig+vel para os buscadores se comparado
com a verso em Flash! alm de ser compat#vel com tablets e aparelhos
celulares! o que era um problema na verso em flash do construtor(
- claro que o resultado final do site em HTML no to bonito quanto se
fosse feito utili'ando 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.
/ompatibilidade com aparelhos m&veis.
Mais agilidade no carregamento das p+ginas.
Escrito por Celso Lemes www.criarsites.com Todos os direitos reservados
Melhor integrao com ferramentas e,ternas.
0ite mais amig+vel para os buscadores(
SEO
*or ser feito em HTML! os sites desenvolvidos com o novo construtor de sites
so mais amig+veis para os buscadores! alm disso! ele permite configurar
alguns aspectos importantes das p+ginas relacionados a 01O! como o caso
dos t#tulos! descrio e meta 2e3words! o que a longo pra'o pode a%udar a
conquistar melhores posi$es nos buscadores como o 4oogle( 5eremos isso
mais adiante(
6m item interessante que eu notei no novo construtor que agora todas as
p+ginas do site podem receber um t#tulo 7nico! o que a%uda ainda mais no
inde,amento das p+ginas nos mecanismos de busca( 1ste um recurso que
faltava na verso em Flash! que at o momento da preparao deste e8boo2
e,ibe apenas 9 7nico t#tulo para o site inteiro :8;
O Construtor de Sites
O construtor pode ser acessado online atravs de qualquer computador e
continua com a mesma facilidade de arrastar e soltar os elementos dentro das
p+ginas! criar e editar p+ginas! organi'ar os elementos! adicionar imagens!
v#deos e m7sicas! configurar a apar"ncia e mais<
1le tambm oferece de'enas de templates profissionais! que voc" poder+
escolher para o seu site e adaptar conforme as suas necessidade(
0e quiser conferir o resultado dos sites criados com o construtor de sites do
=i, em flash ou HTML! visite os seguintes sites:
Criar Sites em Flash
Criar Sites em HTML5
Como criar uma conta no Wix
/omo citado anteriormente! o Wix
permite criar um site sem pagar
absolutamente nada! bastando que
voc" crie sua conta em questo de
minutos e comece a trabalhar em seu
site(
Mas claro que assim como tudo o que
gr+tis! a conta gr+tis do =i, imp$e
alguns limites que podem ou no ser um
problema para voc"( 1,emplos dessa
limitao a e,ibio de um lin2 que
aparece no rodap do site apontando
para o =i, e a impossibilidade de adicionar um dom#nio pr&prio sem que antes
tenha adquirido um dos planos premium(
*ara a maioria das pessoas essas limita$es no so nem percebidas! mas
caso um dia voc" precise de mais! basta que adquira um dos planos premium
quando quiser ou ento abandonar o pro%eto e partir para outra soluo que se
encai,e no seu perfil! como o caso do Webnode ou do Webmium(
Primeiro passo
*ara comear! voc" s& precisa acessar o site do =i, e clicar no boto >Comece
gora?(
6ma pequena %anela se abrir+( /lique sobre o lin2 >C!"! #O$ CO#T?(
@a p+gina seguinte! selecione o tipo de site que dese%a criar( 0o v+rios
seguimentos como @eg&cios e 0ervios! M7sica! Lo%a Online! Fotografia!
Aestaurante! 0ite *essoal e etc(
@a pr&,ima p+gina selecione se dese%a criar um site em Flash ou HTML(
Lembrando que depois de criado o site! voc" no poder+ mudar o tipo de site!
portanto escolha com cautela( Minha recomendao que opte pelo HTML(
5oc" tambm poder+ escolher o modelo do template que dese%a para o seu
site( 1scolha um deles e clique no boto >Editar?(
Feito isso! voc" %+ ter+ acesso ao painel de controle onde poder+ trabalhar em
seu site( @os pr&,imos cap#tulos voc" aprender+ como trabalhar com o editor
da melhor maneira poss#vel(
Como configurar a aparncia no Wix
O construtor de sites do Wix em HTML5 permite editar v+rios aspectos dos
sites criados nele( *ara ter acesso a estas ferramentas! dentro do painel de
controle! clique no boto identificado com um pincel que aparece no canto
esquerdo superior(
%ac&ground B 1sta opo 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(
*ara alterar o plano de fundo! basta selecionar o que mais lhe agrada( /aso
no este%a satisfeito! escolha outro ou simplesmente clique sobre o boto
>Cescartar Mudanas? que aparece mais abai,o(
Cores B esta opo permite alterar o esquema de cores do site! basta que
voc" selecione um grupo de cores para que todo o site se%a alterado(
1sta opo altera todas as cores do site de uma s& ve'! ou se%a! no tem como
editar cada uma das cores por ve'( 5oc" deve escolher qual a melhor
combinao para o seu site(
/aso no queira nenhuma das op$es! basta que voc" clique sobre o boto
>'escartar Mudan(as? que aparece no rodap do site(
Fontes B 1sta opo permite alterar o formato das letras do site( Lembrando
que esta opo somente recomend+vel para sites mais descontra#dos( 0e
este no for o seu caso! as fontes padro so a melhor opo! pois do mais
seriedade ao site(
1sta opo altera o grupo de fontes de seu site! como os t#tulos! subt#tulos e
conte7do( /aso nenhuma das op$es te agrade! clique no boto >'escartar
Mudan(as? que aparece mais abai,o(
'ica extra
O construtor de sites ainda permite alterar a borda das p+ginas do site! porm
esta opo no est+ bem clara dentro do painel( *ara ter acesso a este
recurso! clique novamente no bot)o do Pincel e em seguida clique em
qualquer lugar da p+gina que no tenha nenhum elemento! como imagem ou
te,to(
6ma pequena cai,inha ir+ surgir! clique em >Trocar Estilo? para abrir o editor
de bordas(
6ma ve' que ele este%a aberto! voc" pode escolher uma das tr"s op$es
;*+gina Dnicial! *adro ou 1specialE ou clicar em >Editar Estilo? para fa'er
outros tipos de configura$es(
)o final clique em OF para salvar as altera$es(
Como criar e editar pginas
)gora que voc" %+ configurou a apar"ncia do
seu site! chegou a hora de trabalhar na criao
do conte7do! que o que mais importa no
website( 5amos comear por aprender como
criar! apagar ou editar uma p+gina(
*ara comear! ainda no painel de controle de
seu site! clique sobre o primeiro boto
>P*ginas? representado por uma folha de
papel com uma orelha dobrada que aparece do
lado esquerdo do editor(
O menu de edio de p+ginas surgir+
mostrando todas as p+ginas que voc" %+ tem
criadas em seu site(
@este mesmo menu voc" poder+ selecionar
uma determinada p+gina de seu site! fa'er
configura$es! adicionar uma nova p+gina!
fa'er configura$es que possam a%udar no 01O
ou mudar o tipo de efeito de transio de
p+gina(
5amos ver a seguir como trabalhar com cada
um destes recursos(
Criar uma no+a p*gina
*ara adicionar novas p+ginas ao seu site! clique sobre o lin2 >, dicionar
P*gina? que aparece no rodap do menu de gesto de p+ginas(
@a p+gina seguinte selecione o tipo de p+gina que dese%a criar! d" um nome a
ela e clique em OF para finali'ar( )cima voc" pode ver uma p+gina do tipo
>0erviosG? com o t#tulo >!T"-OS? sendo criada(
Como excluir uma p*gina
0e o que voc" dese%a eliminar uma p+gina que voc" tenha criado! selecione
ela no menu de gesto de p+ginas e clique sobre o pequeno #cone
representado por uma engrenagem que aparece ao lado do t#tulo da p+gina(
@a pr&,ima %anela que se abre! clique sobre o lin2 >pagar?( O sistema ir+
perguntar se voc" tem realmente certe'a de que dese%a e,cluir a p+gina
;espero que tenhaE( /lique sobre o boto >pagar? em vermelho para finali'ar(
Como alterar o e.eito de transi()o
O construtor de sites do =i, permite adicionar um
efeito muito legal sempre que uma nova p+gina
do site aberta para os leitores(
5oc" tem a sua disposio os seguintes efeitos:
Transi()o Hori/ontal B Fa' com a p+gina
aparea da direita para a esquerda(
Transi()o $ertical B Fa' com que a p+gina aparea de cima para bai,o(
Cross Fade B Fa' com que a p+gina aparea gradualmente(
Fora0'entro B Huase o mesmo efeito do /ross Fade! com a diferena de que
o carregamento acontece do lado e,terior para o interior(
Como criar p*ginas protegidas por senha
Aecentemente o =i, adicionou um novo recurso ao construtor que permite
criar p+ginas protegidas por senha! que pode ser a solicitao de uma simples
senha ou que e,i%a que o visitante se cadastre no site para poder acessar a
p+gina em questo(
0e voc" tiver alguma +rea de seu site que dese%a que somente pessoas
autori'adas tenham acesso! proceda da seguinte maneira(
/lique na aba >P*ginas?! clique na pequena engrenagem que aparece ao lado
da p+gina que dese%a proteger! selecione a opo >*roteger *+gina?! selecione
se dese%a que os visitantes se cadastrem no site ou se somente dese%a que
se%a solicitado uma senha(
0e escolher a opo de senha! voc" deve digitar a senha dese%ada e salvar as
altera$es(
Lembrando que voc" dever+ fornecer a senha por e8mail ou qualquer outro
meio de comunicao para as pessoas que dese%a que tenham acesso a p+gina
protegida(
Como adicionar um formulrio de contato
)gora que voc" %+ 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" atravs de e8mail de uma forma simples e
r+pida(
*ara fa'er isso! basta voc" iniciar o processo de criao de uma nova p+gina e
escolher a opo >Formul*rio? e em seguida dar um nome sugestivo a
p+gina( /onfira abai,o(
Cepois que a p+gina for adicionada ao site! voc" ainda tem que configurar o
formul+rio( @a p+gina que contm o formul+rio! clique sobre ele e no menu
que aparece clique sobre o a opo >Con.igura(1es?(
@a pr&,ima %anela que se abre! digite o seu endereo de e8mail e caso queira!
um segundo endereo de e8mail para que as informa$es do formul+rio se%a
enviadas para ambos os endereos(
5oc" tambm tem a opo de trocar a apar"ncia da cai,a do formul+rio
clicando no boto em a'ul escrito >Trocar Estilo?(
Como editar ou adicionar texto as suas pginas
5oc" pode editar qualquer te,to %+ presente nas suas p+ginas ou ento
adicionar novos te,tos caso dese%e( /onfira abai,o as duas formas(
Como editar um texto 2* existente
0e voc" quer apenas editar um te,to %+ persente nas p+ginas de seu site!
clique sobre ele e na pequena %anela que se abre clique em >Editar Texto?(
1m seguida o campo em que o te,to est+ sendo e,ibido passa a ser edit+vel e
voc" poder+ alterar seu conte7do da maneira que dese%ar(
Ps( 5oc" tambm! poder+ editar os te,tos de suas p+ginas clicando duas ve'es
rapidamente com o mouse sobre o te,to que dese%a editar(
Como adicionar um no+o campo de texto
0e a sua ideia adicionar um novo te,to em um lugar qualquer da p+gina!
voc" deve primeiro clicar sobre o boto >dicionar? que aparece no menu
superior esquerdo e em seguida clicar em >Texto?(
1m seguida voc" deve selecionar a opo T3tulo ou Par*gra.o dependendo do
local em que dese%a adicionar o te,to( @a maioria dos casos voc" deve
adicionar primeiro o t#tulo e em seguida o campo par+grafo(
)p&s clicar em qualquer um dos dois tipos de te,to! eles so adicionados a
p+gina e voc" pode arrast+8lo at o local dentro da p+gina que dese%ar( *ara
fa'er isso apenas clique e segure o boto direito do seu mouse e arraste o
novo elemento para qualquer lugar na p+gina(
5oc" tambm poder+ aumentar o espao em que o te,to ser+ e,ibido! clicando
e segurando o boto do mouse nas pequenas bolinhas que aparecem na cor
a'ul em volta do te,to(
)cima voc" pode ver o te,to do t#tulo editado e o campo em volta dele
redu'ido(
/onfira agora como ficaria um t#tulo e um par+grafo adicionado a p+gina de
seu site(
Como adicionar imagens
)gora que voc" %+ sabe como editar e adicionar novos te,tos Is suas p+ginas!
chegou a hora de aprender como adicionar imagens para dar mais vida ao seu
site(
*ara fa'er isso! clique novamente no boto com o s#mbolo de >dicionar? e
em seguida no boto >"magem4(
O menu de configura$es ir+ agora e,ibir J op$es de imagens que voc" pode
adicionar em seu site( 0o eles:
"magem B *ermite adicionar uma imagem sem
frescura(
"magem sem moldura B 1sta a mesma
opo da anterior ;nem sei porque eles
dei,aram essa opo a#E(
"magem com moldura B 1sta opo permite
adicionar uma imagem com uma borda especial
em volta dela(
Clip rt B 1sta opo bastante interessante!
pois d+ acesso a um banco de imagens do
pr&prio =i, que podem ser adicionadas em seu
site(
Como adicionar e editar uma imagem com moldura
*ara adicionar uma imagem com moldura ao seu site! clique no boto
>Dmagem com moldura? ( 6ma imagem padro adicionada a p+gina(
5oc" deve clicar sobre ela uma ve' e em seguida em >Trocar "magem?( O
gerenciador de imagens ir+ e,ibir todas as imagens que voc" %+ tenha
carregado em seu site! assim como tambm d+ a opo de carregar novas
imagens(
5amos comear aprendendo como carregar ;ou fa'er upload se preferirE uma
imagem para o seu site no =i,( *ara fa'er isso clique no boto 6pload que
aparece na %anela da galeria de imagens(
6ma nova %anela surgir+ na tela( 5oc" deve procurar pela pasta em que se
encontra a imagem que dese%a carregar em seu computador! selecionar ela e
clicar no boto >brir? ;ou equivalente! dependendo do sistema operacional do
seu computadorE(
) imagem ser+ ento e,ibida na galeria de imagens de seu site( 0elecione ela
e clique sobre o boto OF que aparece no canto direito inferior na cor a'ul(
Feito isso! a imagem ser+ trocada com a imagem padro que estava sendo
e,ibida em seu site(
Como alterar a borda da imagem
/aso a imagem que voc" este%a editando possua uma borda! voc" poder+
alterar alguns parKmetros delas para dei,+8la mais customi'ada(
*ara fa'er isso! clique novamente sobre a imagem e em seguida clique em
>Trocar Estilo?( 6ma nova %anela aparecer+ na tela! onde voc" poder+
escolher entre as op$es *adro! 0em Moldura! Moldura 1special 9 e Moldura
1special G(
5oc" tambm tem a opo de fa'er configura$es e,tras clicando sobre o lin2
>Editar Estilo? que aparece ao lado dos bot$es(
Feita as altera$es dese%adas! clique sobre o boto OF para finali'ar(
Como adicionar uma galeria de imagens
O construtor de sites do =i, tambm permite adicionar galerias de imagens!
que dei,am seu site muito mais moderno e atrativo( *ara ter acesso as
galerias! clique sobre o boto de >dicionar? e em seguida em >-aleria?!
como mostra a imagem abai,o(
5oc" tem a sua disposio J tipos de galerias! 4rid! 0lideshow! 0lider e 4rid
)nimada( 5eremos a seguir qual a diferena de cada uma delas e como voc"
poder+ trabalhar as imagens(
5amos ver o que cada uma delas fa':
-rid B 1,ibe uma galeria com v+rias imagens lado a lado( Huando um visitante
clica em uma delas! uma nova %anela aberta com a imagem em tamanho
real(
Slidesho5 B 1sta opo e,ibe um grupo de imagens que vo se alterando
conforme o visitante clica sobre as setas que aparecem nas laterais da galeria(
Slider B 1ste recurso bem parecido com o 0lideshow citado anteriormente!
com a diferena de que ele vai alterando as imagens da esquerda para a
direita ou vice versa sempre que o mouse for posicionado sobre a galeria(
-rid nimada B 1sta opo tambm bem parecida com o 4rid citado
anteriormente! com a diferena de que aplicado um efeito de esmaecimento
sobre as imagens conforme o visitante passa o mouse sobre elas(
Como alterar as imagens das galerias
)gora que voc" aprendeu para que servem e como adicionar as galerias Is
suas p+ginas! vamos aprender agora como configurar as imagens que
aparecem dentro delas(
*ara trocar as imagens! voc" deve clicar sobre qualquer uma das imagens que
%+ aparecem na galeria e em seguida em >Organi/ar imagens? como mostra
a imagem abai,o(
6ma nova %anela se abrir+ com uma mensagem( /lique sobre o boto em a'ul
escrito >dicionar "magens? para selecionar imagens que voc" %+ tenha
carregado em seu site ou que pretenda carregar(
@a pr&,ima %anela voc" poder+ selecionar as imagens ou carregar novas
imagens clicando no boto >6pload? que aparece no canto direito superior da
%anela(
O processo de carregamento de novas imagens o mesmo citado
anteriormente! portanto basta que voc" siga os passos( 5oc" deve selecionar
todas as imagens que dese%a que apaream na galeria de imagens uma a uma(
5oc" tambm tem a opo de adicionar um t#tulo! descrio e tambm um lin2
apontando para uma p+gina ou arquivo ;veremos mais sobre lin2s adianteE(
1stas informa$es podero aparecer sobre as imagens enquanto os visitantes
estiverem vendo8as(
Como criar links em textos e imagens
)gora vamos aprender como criar lin2s em te,tos ou imagens que ao serem
clicadas levam os visitantes para uma outra p+gina! se%a para fora ou dentro
do pr&prio site! para arquivos! v#deos ou qualquer outra coisa dispon#vel na
Dnternet(
Como criar lin&s em textos
*ara criar um lin2 em um te,to no =i,! voc" deve primeiro selecionar o trecho
do te,to que dese%a que o lin2 este%a associado( *ara fa'er isso! no modo de
edio de te,to! posicione o ponteiro do mouse sobre a 7ltima ou a primeira
palavra dese%ada! clique e segure o boto do mouse e arraste at a outra
e,tremidade do te,to(
O te,to deve ficar na cor a'ul como mostra a imagem abai,o( 5oc" deve ento
clicar sobre o pequeno boto representado por um gomo de corrente que fica
na parte superior do editor para abrir o gerenciador de lin2s(
6ma pequena %anela se abrir+ com J op$es( /onfira a seguir como utili'ar
cada um deles(
Endere(o Web B 1sta opo permite apontar um lin2 para qualquer p+gina ou
arquivo dentro ou fora do seu site( )p&s clicar sobre o boto >Endere(o Web?!
uma nova %anela se abrir+! onde voc" deve inserir o lin2 completo da p+gina
que dese%a que o lin2 aponte(
5oc" tambm tem a opo de fa'er com que o lin2 abra em uma nova %anela
selecionando a opo >brir em uma no+a 2anela?(
P*gina B 1sta opo permite criar um lin2 para uma p+gina interna de seu
pr&prio site! ap&s clicar sobre o boto >P*gina?! uma nova %anela com um
menu drop down surgir+! e,ibindo todas as p+ginas %+ criadas em seu site(
5oc" s& precisa selecionar a p+gina dese%ada e clicar em OF para que o lin2
se%a criado(
Cepois de selecionada a p+gina interna dese%ada basta clicar em OF para que o
lin2 se%a criado(
E0mail B 1sta opo permite criar um lin2 que ao ser clicado abre o cliente de
e8mail do visitante para que ele possa te enviar um e8mail( 1sta opo no
recomendada porque ho%e em dia a maioria das pessoas no usam mais
clientes de e8mail! mas sim contas gr+tis em servios como o 4mail ou
Hotmail(
Huando um visitante clicar em um lin2 assim! pode ser gerado um erro que o
far+ ficar perdido! porque a maioria das pessoas %+ no usam tal programa
para enviar seus emails( Minha recomendao que opte pelo formul+rio de
contato citado anteriormente(
Mas se mesmo assim voc" dese%a criar um lin2 para seu endereo de e8mail!
clique sobre o boto >E0mail? e na nova %anela digite o seu endereo de e8mail
e um assunto! que aparecer+ no e8mail enviado pelo visitante(
Cepois de digitar o endereo basta clicar no boto OF para que o lin2 se%a
criado(
'ocumento B 1sta opo permite criar um lin2 para um documento em
formatos como doc! pdf! odt e etc( *ara criar o lin2 basta que voc" clique sobre
o boto >'ocumento? para abrir uma nova %anela(
1m seguida clique sobre o campo >dicionar7Mudar 'ocumento8? para abrir
o gerenciador de documentos(
@a nova %anela voc" poder+ escolher um documento que %+ tenha carregado ou
ento carregar um novo arquivo clicando no boto >6pload?(
Cepois que carregar o arquivo! voc" deve selecionar ele e clicar em OF e em
OF novamente para que o lin2 se%a criado(
Lembrando que voc" somente poder+ carregar documentos! ou se%a! no ser+
poss#vel carregar v#deos ou arquivos de m7sica( )lm disso o limite de at 9L
MM de tamanho para cada arquivo(
Como criar lin&s em "magens
) criao de lin2s em imagens bem parecida com a criao de lin2s em
te,tos( *ara criar um! voc" precisa selecionar a imagem a qual o lin2 ser+
criado(
6m pequeno menu aparecer+ sobre a imagem! clique sobre >Lin& para? para
abrir o gerenciador de lin2s(
Cepois disso o processo de criao de lin2s o mesmo descrito nos passos de
criao de lin2s em te,tos( Masta que voc" siga os passos citados
anteriormente que no ter+ problema(
Como adicionar botes de redes sociais
@o h+ como negar que as redes sociais esto
dominando a Dnternet! atraindo cada ve' mais
pessoas que buscam por formas de se comunicar
com outras pessoas! compartilhar ideias!
informao! discutir assuntos diversos e etc(
*or isso importante que no fiquemos de fora desse
que meio que oferece uma e,celente chance de atrair
um p7blico ainda maior(
*ensando nisso! o =i, se encarregou de adicionar ao
seu construtor formas f+ceis de implementar widgets
nas p+ginas! que facilitam a interao dos visitantes
com as redes sociais! permitindo que eles
compartilhem com os amigos ou que discutam suas
ideias(
*ara ter acesso aos widgets de redes sociais! clique
novamente no boto de >dicionar? e em seguida em
>!edes Sociais?(
Lembrando que para que voc" possa utili'ar alguns
dos recursos de redes sociais presentes no construtor
de sites do =i,! necess+rio que voc" tenha uma
conta ativa dentro das respectivas redes sociais(
/onfira abai,o como utili'ar cada um deles(
Curtir do Faceboo& B 1sta opo adiciona um boto do Faceboo2 que permite
que seus leitores curtam suas p+ginas( ) grande vantagem disso que a
>Curtida? do leitor aparece em sua timeline e pode ser vista por todos os seus
amigos(
*ara adicion+8lo as suas p+ginas! basta que voc" clique no menu dicionar!
!edes Sociais e em Curtir do Faceboo& para que o boto aparea dentro da
p+gina( Cepois s& voc" arrast+8lo para o local dese%ado na p+gina(
0e quiser voc" ainda pode alterar sua apar"ncia clicando sobre e ele e em
seguida em >Con.igura(1es?(
6ma nova %anela surgir+ onde voc" poder+ alguns aspectos do boto(
Coment*rios do Faceboo& B 1sta opo permite adicionar uma cai,a de
coment+rios do Faceboo2! que por sua ve' permite que os leitores logados na
rede comentem em suas p+ginas( @ovamente estes coment+rios aparecem na
timeline de todas as pessoas que comentarem e que podero ser vistas por
seus amigos(
*ara adicionar em seu site! basta que voc" clique no menu dicionar! !edes
Sociais e em Coment*rios do Faceboo& para que uma cai,a aparea dentro
da p+gina que estiver editando( 1m seguida posicione a cai,a no local em que
dese%a que o sistema de coment+rios aparea dentro da p+gina(
5oc" tambm poder+ configurar o n7mero de coment+rios a ser e,ibido! assim
como a cor de fundo( *ara fa'er isso clique sobre a %anela de coment+rios e em
6ma nova %anela surgir+( Faa as configura$es e feche a %anela de
configura$es(
Lembrando que voc" no poder+ moderar os coment+rios dei,ados pelos
leitores! portanto caso venha a ter problemas com coment+rios! a 7nica
soluo pode ser a e,cluso do sistema de coment+rios(
Seguir no T5itter B 1sta opo permite que seus leitores te sigam dentro da
rede social do Twitter( *ara adicionar esta opo basta que voc" clique no
menu dicionar! !edes Sociais e em Seguir no T5itter para que uma
pequena cai,a aparea dentro de sua p+gina( )rraste a cai,a at o local em
que dese%a que o boto do Twitter se%a e,ibido(
1m seguida clique sobre ele e em seguida no lin2 >Con.igura(1es?(
@a nova %anela que aparece! digite seu perfil no Twitter e feche a %anela(
T5eet do T5itter B *ermite que seus leitores compartilhem suas p+ginas
entre todos os seus seguidores dentro da rede! alm de e,ibir o n7mero total
de compartilhamentos( *ara adicion+8lo em seu site! basta que voc" clique no
menu dicionar! !edes Sociais e em T5eet do T5itter para que um
pequeno boto se%a inserido na p+gina( )rraste8o para o local em que dese%a
que ele aparea dentro da p+gina(
*ara configur+8lo! clique sobre ele e em seguida em >Con.igura(1es?(
6ma nova %anela ser+ aberta( Cigite seu nome de usu+rio no Twitter! uma frase
que aparecer+ %unto aos Tweets e clique em >tuali/ar4(
Feed do T5itter B 1sta opo e,ibe seus 7ltimos Tweets dentro da rede! o
que pode ser muito 7til para que seus leitores fiquem a par do que voc" anda
postando dentro da rede( *ara adicion+8lo ao seu site! basta que voc" clique no
menu dicionar! !edes Sociais e em Feed do T5itter( 6ma nova %anela
aparecer+ dentro de sua p+gina(
*ara configur+8lo! clique sobre ele e em seguida em >Con.igura(1es?(
@a nova %anela digite seu nome de usu+rio do Twitter e selecione o n7mero de
atuali'a$es que dese%a que o widget e,iba( Opcionalmente! voc" tambm
pode configurar a apar"ncia deste widget clicando em >Trocar Estilo?(
-oogle ,9 B 1ste 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( *ara adicionar o
boto! basta clicar sobre o boto dicionar! !edes Sociais e em -oogle ,9(
6m novo boto aparecer+ na p+gina! para configur+8lo! clique sobre ele e em
@a nova %anela que aparece! selecione suas op$es e feche a %anela(
%arra de !edes Sociais B 1ste recurso permite adicionar uma pequena barra
com bot$es de divulgao de seu conte7do no Faceboo2! Twitter e 4oogle
Mais( *ara adicion+8lo em sua p+gina! basta clicar sobre o boto dicionar!
!edes Sociais e em %arra de !edes Sociais(
*ara configur+8lo! clique sobre a pequena barra e em seguida em
>Con.igura(1es?(
@a nova %anela voc" poder+ configurar o tamanho e espaamento dos bot$es(
Opcionalmente! voc" tambm poder+ configurar a ordem que eles aparecem
dentro da p+gina(
Como criar uma loja virtual
Aecentemente o =i, implementou um recurso que permite criar lo2as
+irtuais! dando mais op$es para seus clientes( O interessante da lo%a que
poss#vel configur+8lo para receber os pagamentos atravs de sistemas de
pagamentos online como o Pa:pal e o Pagseguro! que acredito ser o mais
utili'ado no territ&rio Mrasileiro(
Lembrando que apesar de que se%a perfeitamente poss#vel criar uma lo%a
virtual utili'ando uma conta gratuita! o sistema no totalmente funcional!
pois no permite que os poss#veis clientes finali'em a compra( 0e este for o
seu caso! voc" pode aproveitar o cupom de NNO de desconto que o =i, est+
dando para os leitores do /riar0ites(
*ara ter a lo%a funcionando! necess+rio adquirir um plano premium e0
Commerce que custa cerca de APGQ por m"s( )lm disso! voc" tambm deve
entender que o sistema de criao de lo%as do =i, um pouco limitado!
portanto voc" no poder+ criar sistemas comple,os como podemos ver em
algumas das grandes lo%as de vendas pela Dnternet(
Outra coisa que voc" deve entender que o sistema ainda no consegue
calcular o frete de seus produtos! mas segundo o =i, esse um recurso que
eles esto trabalhando! portanto pode acontecer de que no momento em que
voc" estiver lendo este e8boo2! o recurso de c+lculo de frete %+ este%a
dispon#vel(
)gora que voc" est+ ciente das limita$es do sistema de lo%as do =i,! vamos
iniciar a criao de sua primeira lo2a +irtual no Wix(
Criar uma no+a P*gina
O primeiro passo iniciar uma nova p+gina( /omo vimos anteriormente neste
e8boo2! basta que voc" clique no boto >P*ginas? e em >dicionar no+a
P*gina?(
/om a nova p+gina criada! voc" poder+ adicionar um t#tulo caso ache
necess+rio ;isso tambm foi e,plicado anteriormente neste e8boo2E(
5amos comear adicionando uma galeria de produtos( *ara fa'er isso! clique
sobre o boto >dicionar?( @o menu que se abre! clique em >Online Store?(
6m novo menu se abrir+! voc" pode comear por adicionar uma nova galeria
de produtos clicando em >Product -aller:?(
6m novo campo ser+ adicionado a p+gina( 1le estar+ perguntando qual galeria
de produtos voc" dese%a que se%a e,ibido na p+gina( /omo esta ser+ a
primeira ve' que estar+ trabalhando com o sistema de lo%as! simplesmente
clique em OF para seguir ao pr&,imo passo(
) seguir voc" precisa cadastrar seus produtos e criar uma ou mais categorias
de produtos( *ara fa'er isso clique sobre a galeria de produtos que acabou de
adicionar e no menu que aparece clique em >Manage Store?(
Con.igurar moeda e .orma de pagamentos
5amos comear por configurar a forma de pagamento e a moeda que ser+
utili'ada na lo%a( *ara fa'er isso! clique sobre o lin2 >Op(1es? que aparece no
topo da %anela de gerenciamento de produtos(
6ma nova %anela surgir+ na tela( 0e voc" est+ pensando em vender apenas
para o Mrasil! a melhor opo para receber o dinheiro seria pelo *agseguro! no
entanto voc" tambm tem a sua disposio o *a3pal ou 4oogle /hec2out(
Lembrando que para receber dinheiro se%a pelo *agseguro ou qualquer outro
sistema de pagamento online! necess+rio que voc" tenha uma conta criada
na empresa escolhida(
/omo o nosso foco o Mrasil! vamos aprender ento como configurar para
receber o dinheiro atravs do *agseguro( )credito que se estiver em *ortugal!
a melhor opo seria o *a3pal(
1m mtodo de pagamento escolha a opo
*agseguro(
5oc" precisar+ ento do to2en de sua conta(
*ara gerar o seu basta que voc" clique a;ui
e gere o seu clicando no boto >-erar? que
se encontra mais ou menos no meio da
p+gina(
1m seguida voc" deve digitar o endereo de
e8mail ao qual sua conta do *agseguro est+
associada(
0elecione tambm a moeda dese%ada! que
em nosso caso >!eal <%rasil=?(
1m peso selecione a opo >>ilograms?
;como citado anteriormente! o =i, ainda no
calcula o frete! portanto esta uma opo
que s& ser+ utili'ada em breveE(
Feito todas as configura$es! clique em
>Conclu3do? para finali'ar(
dicionar no+a Categoria
5amos comear por adicionar uma nova categoria que ser+ utili'ada para e,ibir
os produtos em sua lo%a( 5oc" pode fa'er isso clicando em >dicionar
Categoria? no menu esquerdo da %anela(
6m pequeno campo aparecer+ acima do boto >dicionar Categoria?( Cigite
o nome da categoria dese%ada e em seguida em >dicionar?(
)gora voc" precisa eliminar todos os produtos que aparecem por padro na
lo%a! voc" pode fa'er isso selecionando eles e em seguida clicar no boto
>'eletar?(
'ica
5oc" tambm pode duplicar um produto repetindo este mesmo processo! mas
desta ve' clicando no boto >'uplicar?! o que muito 7til para quando
pretende adicionar um produto similar! necessitando apenas de algumas
altera$es para que o novo produto este%a pronto para venda(
dicionar Produto
5amos agora adicionar um novo produto a galeria( *ara fa'er isso clique sobre
o boto que aparece em Laran%a >dicionar Produto?(
6ma nova %anela se abrir+ onde voc" poder+ configurar v+rios aspectos do
produto( /onfira uma descrio de cada um deles(
T3tulo do Produto B Cigite aqui um t#tulo que descreva bem o produto a
venda(
Pre(o B Cigite aqui o preo do produto a venda( O formato deve ser LL(LL! ou
se%a! para um produto de trinta e dois Aeais e cinquenta e nove centavos! voc"
deve digitar NG(R(
Categorias B 5oc" poder+ associar o produto a uma ou mais categorias( *ara
fa'er isso basta clicar sobre o boto >dicionar?! selecionar as categorias
dese%adas e em seguida clicar em >Conclu3do?(
M3dia B )qui voc" pode adicionar at 9L fotos de cada um dos produtos a
venda( *ara adicionar novas fotos clique sobre o boto >dicionar Foto? para
abrir o gerenciador de imagens(
O processo de carregamento de novas imagens foi e,plicado anteriormente
neste e8boo2(
"n.o B )qui voc" pode adicionar algumas informa$es sobre o que se trata o
produto a venda( Lembrando que voc" tem duas op$es aqui que so o
>!esumo? e >'etalhes?(
@o primeiro campo voc" deve adicionar alguma descrio r+pida sobre o que
se trata o produto e o segundo uma descrio mais detalhada sobre ele(
*ara alterar entre as duas op$es! voc" deve clicar nas abas como mostrado
na imagem acima(
'etalhes Opcionais B )ssim como di' o te,to! estes campos so opcionais( O
mais interessante aqui o campo >Pre(o de $enda? que permite especificar
um preo promocional dos produtos(
*or e,emplo! digamos que voc" tenha especificado anteriormente o preo de
APNG!R para uma camiseta! mas que queira vender o produto por apenas
APGR(RL( Masta que voc" adicione este valor no campo >Pre(o de $enda?
para que o produto e,iba o preo real e o preo promocional na descrio do
produto(
/aso no queira e,ibir um desconto em seus produtos! basta dei,ar este
campo em branco(
Op(1es de "n+ent*rio B 1ste recurso permite adicionar informa$es como
cor e tamanho dos produtos! para que os clientes possam escolh"8las no
momento em que estiverem adicionando o produto ao carrinho de compras(
*ara ter acesso a este recurso clique no boto >dministrar Op(1es?(
5amos aprender como adicionar op$es de tamanho de roupas( *ara fa'er isso
na +rea >Tamanho? clique no boto >Selecione? que aparece mais abai,o(
@a nova %anela que se abre! digite os tamanho dispon#veis! assim como uma
descrio para cada um deles( - muito importante ser claro quanto a
descrio! porque essa informao que voc" ter+ para saber qual o tamanho
escolhido pelos clientes( )bai,o voc" pode ver um e,emplo de medidas
dispon#veis no Mrasil(
/aso necessite de adicionar um ou mais campos! clique sobre o lin2
>dicionar Sele()o?(
O valor que aparece ao lado serve para especificar um acrscimo caso se%a
necess+rio( *or e,emplo! digamos que uma camiseta com tamanho * se%a um
preo S! mas que a camiseta 44 se%a reais mais caro( @este caso basta que
voc" adicione este valor ao campo ao lado para que ele se%a adicionado ao
valor total do produto no momento em que o cliente estiver comprando(
Cepois que fi'er todas as altera$es! clique no boto >Conclu3do? para fechar
a %anela(
$isibilidade do Produto B /aso o produto cadastrado ainda no possa ser
vendido ou tenha acabado o estoque! voc" pode desabilit+8lo mudando a
chavinha para >O..line?(
Feito todas as altera$es no produto! clique no boto >Sal+ar Produto? para
que ele este%a dispon#vel na galeria de produtos(
5oc" poder+ repetir este mesmo processo para adicionar outros produtos que
pretenda vender em sua lo%a virtual(
Escolher -aleria de Produtos
)gora que voc" %+ criou suas categorias e adicionou seus produtos para vender!
chegou a hora de especificar a;sE galeria;sE que dese%a que se%a e,ibida na
p+gina(
*ara fa'er isso clique sobre o campo que representa a galeria que voc"
adicionou anteriormente e no menu que aparece clique em >Choose
Collection?(
@a %anela que se abre selecione a categoria dese%ada e clique em OF(
1m seguida todos os produtos da galeria selecionada aparecero na p+gina(
5oc" ainda pode fa'er algumas configura$es na forma que as imagens
aparecem na p+gina( *ara fa'er isso clique novamente dentro do campo que
representa a galeria de produtos e em seguida clique em >Con.igura(1es?(
@a nova %anela que se abre voc" pode especificar um nome para o boto de
adicionar ao carrinho de compras! n7mero de produtos e,ibidos na p+gina!
colunas! margem e etc(
5oc" deve ir testando estas op$es at encontrar a melhor configurao! pois o
resultado final pode depender do tipo de produto e tambm da quantidade de
produtos de uma mesma categoria voc" pretende e,ibir na tela(
dicionar Carrinho de Compras
)gora que aprendemos como e,ibir os produtos em sua lo%a! vamos agora
aprender como adicionar um carrinho de compras! que ser+ respons+vel por
e,ibir os produtos selecionados pelos seus clientes(
*ara fa'er isso! clique novamente no boto >dicionar? e em >Online Store?(
@o novo menu clique em >Shopping Cart?(
6m novo campo aparecer+ na p+gina! arraste e posicione no local dese%ado(
5oc" poder+ alterar o te,to e,ibido no carrinho de compras! para fa'er isso!
clique sobre ele e no menu que aparece clique em >Con.igura(1es?(
6ma nova %anela se abrir+ onde voc" poder+ alterar o te,to e tambm o
tamanho do carrinho de compras(
Como adicionar o %ot)o de Finali/ar Compra
O pr&,imo passo adicionar um boto que permita que os clientes finali'em a
compra! para fa'er isso! novamente clique em >dicionar? e em >Online
Store?(
@o novo menu que aparece! clique sobre o boto >Chec&out %utton?(
6m boto amarelo ser+ adicionado a p+gina! arraste8o at o local dese%ado na
p+gina( *ara configur+8lo! clique sobre ele e no menu que aparece clique em
>Con.igura(1es?(
6m novo menu surgir+ na tela! onde voc" pode editar o te,to e,ibido no boto
assim como outros parKmetros(
5oc" tambm tem a opo de configurar o estilo do boto( *ara fa'er isso!
clique novamente no boto e no menu que aparece clique em >%utton St:le?(
6m novo menu surgir+ onde voc" deve clicar em >Editar Estilo?(
@o novo menu que aparece! voc" poder+ alterar o formato do boto! assim
como suas cores( Faa as altera$es dese%adas e salve(
*arabnsT 5oc" criou sua lo%a virtual no wi,! mas lembre8se de que voc"
somente poder+ reali'ar as vendas se adquirir o plano Premium e0
Commerce! caso contr+rio o boto de finali'ar compra no estar+
funcionando(
Como Otimizar suas pginas no Wix !"#$
O novo construtor de sites do =i, permite que as p+ginas se%am otimi'adas de
forma a conseguirem melhores posi$es nos resultados das buscas do 4oogle e
de outros grandes buscadores( 5oc" poder+ editar parKmetros como o t#tulo da
p+gina! descrio e palavras8chave(
*ara 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 ;ue adicionar em cada um dos campos dispon3+eis
/ada um dos campos dispon#veis para otimi'ao devem ser preenchidos de
formas diferentes como voc" poder+ ver a seguir(
T3tulo da P*gina B 1m t#tulo da p+gina! voc" deve adicionar um grupo de
palavras8chave que representem o conte7do que os leitores podero encontrar
nela(
*rocure colocar at 9L palavras8chave que as pessoas digitem nos buscadores
quando reali'am buscas pelo tipo de conte7do que voc" oferece! mesmo que
as ve'es elas no faam muito sentido para voc"(
'escri()o da p*gina B @este campo voc" deve adicionar uma breve
descrio sobre o assunto abordado na p+gina( 1sta descrio as ve'es
e,ibida pelo 4oogle Is pessoas que reali'am as pesquisas em seu buscador(
*ortanto importante que esta descrio no s& descreva o conte7do da
p+gina! mas que tambm incentive os leitores a clicarem no resultado(
Pala+ras0cha+e B )qui voc" deve adicionar cerca de GL palavras8chave que
representem o conte7do da p+gina separados por uma v#rgula(
Como descobrir boas pala+ras0cha+e
6ma boa ferramenta para descobrir boas palavras8chave o -oogle "nsights
para Pes;uisas! que uma ferramenta oferecida gratuitamente pelo 4oogle(
5oc" poder+ adicionar duas ou mais palavras ou grupo de palavras e fa'er uma
comparao entre elas para descobrir quais so mais utili'adas pelas pessoas(
)lm disso! voc" pode segmentar a pesquisa para uma determinada regio
como o Mrasil por e,emplo! desta forma o resultado e,ibido pelo Dnsights para
*esquisa mostra apenas os dados referentes a buscas feitas por pessoas no
Mrasil(
)bai,o voc" pode ver o resultado de uma comparao entre a palavra html e
html ;sem espaoE! segmentado para o Mrasil no per#odo de RL dias! que
como pode ser visto abai,o! a palavra sem espao tem bem mais procura do
que a palavra HTML com espao(
)lm dessa comparao! mais abai,o na mesma p+gina em que reali'ou a
pesquisa! poder+ encontrar recomenda$es de palavras relacionadas que as
pessoas fa'em no buscador do 4oogle! o que pode ser muito 7til para
descobrir novas palavras8chave a serem utili'adas em seu site(
Lembrando que outro fator important#ssimo que voc" deve prestar ateno se
quiser ter mais chances de conseguir boas posi$es nos buscadores a
lin2agem interna! ou se%a! lin2s presentes dentro do conte7do que levam os
visitantes de uma p+gina a outra dentro do seu pr&prio site(
*ara ter uma ideia melhor sobre como fa'er a otimi'ao de suas p+ginas!
recomendo que bai,e meu outro e8boo2 >4uia de Otimi'ao de 0ites para os
mecanismos de Musca? que contm dicas mais detalhadas sobre como fa'er a
otimi'ao de um site ou blog(
Como adicionar v%deos em suas pginas
Outro e,celente recurso do construtor de sites do =i, a possibilidade de
adicionar v#deos do Uoutube ou do 5imeo com muita facilidade(
*ara adicionar v#deos nas p+ginas de seu site! clique no boto >dicionar? e
em seguida em >M3dia?( 6ma cai,a contendo um v#deo de e,emplo ser+
adicionado a p+gina( )rraste ele at o local dese%ado em sua p+gina(
*ara alterar o v#deo e,ibido! clique sobre a cai,a em que o v#deo aparece e no
menu que aparece clique em >Con.igura(1es?(
6ma nova %anela se abrir+ onde voc" deve inserir o endereo em que se
encontra o v#deo que voc" dese%a que se%a e,ibido na sua p+gina(
@essa mesma %anela voc" ainda poder+ configurar outros para que o v#deo se%a
e,ibido do seu %eito(
'ica
0e voc" no sabe como fa'er pegar a 6AL do v#deo no ?outube! acesse a
p+gina em que se encontra o v#deo dese%ado( *rocure a barra de endereos
que aparece na parte superior de seu navegador e copie a 6AL que aparece
nele(
)gora s& voltar para a cai,a de configurao do v#deo e colar a 6AL e salvar(
Como adicionar um mapa do &oogle "aps
O =i, tambm permite adicionar um mapa do 4oogle Maps de forma a
orientar seus clientes at o local de seu neg&cio(
*ara fa'er isso! crie uma nova p+gina ou use uma p+gina %+ criada em seu site
e clique sobre o boto >dicionar? e em seguida em >ddon?( 1 no novo
menu que aparece clique sobre o boto >-oogle Maps?(
6m novo campo contendo um mapa do 4oogle padro ser+ adicionado a
p+gina! para configur+8lo! clique sobre ele e em seguida em >Con.igura(1es?(
6ma nova %anela aparecer+ na tela! onde voc" poder+ configurar o endereo
de seu neg&cio! uma descrio sobre ele! configurar o tipo de mapa dese%ado e
outros controles mais finos(
Lembrando que ap&s configurar o campo >Endere(o? voc" deve clicar no
boto >Encontrar? e ap&s adicionar algo no campo >'escri()o?! voc" deve
clicar sobre o boto >Con.igurar? para que as altera$es tenham efeito( 5oc"
poder+ acompanhar em tempo real as altera$es(
Como adicionar c'digos !"# e embed ao seu site
O /onstrutor de sites do =i, tambm permite adicionar c&digos
HTML7Embed as p+ginas de seu site para adicionar contadores de visitas!
chats! rel&gios e etc(
*ara fa'er isso! clique no boto >dicionar? e em seguida em >ddon?( 6m
novo menu se abrir+! clique sobre o boto >HTML?(
6m novo campo aparecer+ na p+gina em que estiver trabalhando( )rraste8o
at o local em que dese%a que ele aparea e para configur+8lo clique sobre ele
e em seguida em >Con.igura(1es?(
6m novo menu surgir+ na tela( )ltere o campo >Modo? para >C@digo HTML?
;importanteE para que o campo onde o c&digo HTML pode ser colado aparea(
)gora s& colar o c&digo HTML do que dese%a adicionar a sua p+gina e salvar a
alterao( )bai,o voc" pode conferir o c&digo de um contador de visitas sendo
adicionado a minha p+gina(
Wix (pp "arket
Aecentemente o =i, tambm incorporou em seu construtor de sites em HTML
um novo recurso que permite adicionar aplicativos aos sites criados no
construtor! o que pode e,pandir e muito as capacidades do website sem a
necessidade de ter conhecimentos profundos sobre o que se est+ fa'endo!
basta acessar a aba de aplicativos! escolher o que mais te agrada e fa'er as
configura$es necess+rias(
) grande vantagem do =i, )pp Mar2et que qualquer desenvolvedor de
aplicativos pode participar dele! enviando seus aplicativos assim como
acontece com outros servios como o 4oogle )pps e at o pr&prio Faceboo2
que tambm oferece milhares de aplicativos para seus usu+rios(
1 como os desenvolvedores no =i, )pp Mar2et podem ganhar dinheiro com
seus aplicativos! isso garante que sempre haver+ aplicativos de qualidade
sendo adicionados ao servio! %+ que haver+ uma seleo natural do que bom
e o que no (
Centre os aplicativos %+ dispon#veis voc" poder+ encontrar formul+rios de
contato! mapas do 4oogle Maps! sistema de login e senha! chat! email
mar2eting! 4oogle /alendar! galeria de imagens do Flic2r! Dnstagram e muito
mais(
*ara utili'ar estes aplicativos basta acessar a aba )pp Mar2et e selecionar
aplicativo dese%ado(
Como pr)visualizar* salvar e publicar seu site
)gora que seu site %+ est+ pronto! chegou a hora de public+8lo para que todos
na Dnternet possam ter acesso a ele( 1stas op$es esto dispon#veis na parte
superior direita da tela! onde poss#vel pr8visuali'ar a p+gina! 0alvar! *ublicar
ou fa'er um 6pgrade diretamente do editor de sites(
PrA0$isuali/ar B )o clicar neste boto 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(
Sal+ar B )ssim como o nome di'! este boto permite salvar as altera$es em
seu site( Aecomendo que salve seu site para que ele guarde qualquer alterao
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" no perca nada do
seu trabalho caso tenha algum problema como travamento de seu navegador
de Dnternet(
0e esta for a primeira ve' que voc" est+ salvando seu site! o construtor ir+
solicitar que voc" especifique um endereo para o qual seu site poder+ ser
acessado(
Aepare que acima eu especifiquei as palavras >no+osite? e que a 6AL de meu
site passou a ser http:VVcriarsites(wi,(comVnovosite(
Lembrando que voc" no poder+ mudar este endereo a no ser que adicione
um dom#nio personali'ado como poder+ conferir a seguir( *ortanto se no
pensa em adquirir um plano premium! escolha o endereo de seu site com
muito cuidado(
Publicar B 1ste recurso permite que voc" publique seu site de forma que ele
este%a dispon#vel para as pessoas o acessarem( 5oc" deve repetir este
processo toda ve' que fi'er alguma alterao em seu site! caso contr+rio elas
somente podero ser vistas por voc"(
6pgrade B 1sta opo permite transformar seu site de gr+tis para um site
premium! que adiciona muito mais recursos como a possibilidade de adicionar
um dom#nio personali'ado! criar uma lo%a virtual funcional! remover an7ncios
do =i, de seu site! mais espao para arma'enamento de dados! maior limite
para transfer"ncia mensal de dados! possibilidade de monitorar seu site
atravs do 4oogle )nal3tics e muito mais(
/onfira abai,o os planos dispon#veis pelo =i,(
Lembrando que a aquisio de um plano premium no obrigat&rio( 5oc" pode
muito bem ficar com seu site gr+tis para sempre ;ou at quando o =i, e,istirE!
mas se pensa em levar seu site para um novo n#vel ;mais profissionalE muito
importante que pense em .a/er algum in+estimento em seu site(
0e quiser mesmo adquirir um plano premium! confira este artigo em que eu
falo sobre um cupom de desconto de NNO que o =i, est+ oferecendo aos
leitores do /riar 0ites(
Como adicionar um +avicon ao seu site
O construtor de sites do =i, tambm permite que voc" adicione um favicon!
que um pequeno #cone que aparece ao lado da 6AL do site! nos favoritos!
nas abas de navegao e etc(
Lembrando que este recurso somente est+ dispon#vel para os usu+rios
premium! ou se%a! se estiver utili'ando a verso gr+tis do construtor! este
recurso no estar+ ativo(
0e voc" no sabe como criar um favicon! recomendo que confira este artigo(
5oc" poder+ adicionar o seu clicando em >Con.igura(1es? e em >Fa+icon?(
Como criar um site "obile
O construtor do =i, ainda oferece um recurso muito interessante que a
possibilidade de adicionar uma verso mobile de seu site! o que ser+ entregue
automaticamente para os visitantes que acessarem seu site utili'ando um
aparelho m&vel como celulares e tablets! facilitando o acesso ao seu conte7do
nesses aparelhos(
0e voc" se interessou por este recurso! acesse sua conta principal do =i, ;no
a mesma p+gina do construtorE! selecione seu site e clique no boto >Mobile?(
Escolher um template 8 6ma nova p+gina se abrir+ onde voc" deve primeiro
escolher um template( /lique nas setas que aparecem nas laterais para ver
outros e,emplos de templates que voc" pode utili'ar(
@a pr&,ima p+gina adicione um t#tulo ao seu site e escolhe uma das categorias
dispon#veis(
@a nova p+gina que aparece! voc" %+ poder+ trabalhar no desenvolvimento de
sue site Mobile( *ara editar as p+ginas! clique sobre o nome delas no menu
>M: Pages4 que aparece do lado esquerdo( 1m seguida clique sobre o te,to
que est+ sendo e,ibido na p+gina! apague o atual te,to e escreva seu pr&prio
conte7do(
pagar p*gina 8 *ara apagar uma ou mais p+ginas! clique sobre o lin2
>Home? que aparece no menu esquerdo e em seguida posicione o ponteiro do
mouse sobre o t#tulo da p+gina que dese%a deletar( 6ma pequena li,eira
aparecer+ do lado direito do t#tulo! clique sobre ele para deletar a p+gina(
dicionar no+a p*gina 8 *ara adicionar uma nova p+gina! clique sobre o lin2
>dd page? que aparece do lado esquerdo do menu(
0elecione ento o tipo de p+gina dese%ado e clique em OF para criar a nova
p+gina(
Como publicar seu site Mobile
Cepois que tiver preparado seu site Mobile! chegou a hora de public+8lo para
que todos possam v"8lo( *ara fa'er isso! clique sobre o boto verde escrito
>*ublish? que aparece no topo do site(
Feito isso seu site %+ estar+ online e poder+ ser acessado pelos visitantes com
aparelhos m&veis(
*ara editar seu site Mobile posteriormente! acesse a p+gina inicial do =i,!
selecione o site que dese%a editar e em seguida clique em >Editar? como
mostra a imagem abai,o(
5oc" ser+ redirecionado para o editor de site mobile do =i,! onde poder+
alterar completamente o conte7do de seu site(
PsB Lembrando que o site mobile na verso gr+tis e,ibe um banner
relativamente grande no topo do site que leva os visitantes para o site do =i,(
*ortanto se pensa em utili'ar este recurso! recomendo que adquira uma verso
premium(
*ronto! seu site e seu site m&vel esto prontos para serem apresentados para
os milhares de vistantes potenciais(
Como adquirir um plano premium ,com desconto-
0e voc" optar por adquirir um plano premium para usufruir de todos os
recursos e todo o potencial que seu site poder+ tra'er a voc" e seu neg&cio!
confira os seguintes passos(
Lembrando que o =i, oferece uma garantia de at 9J dias para voc" ter seu
dinheiro de volta( 0e no gostar do construtor por algum motivo! basta voc"
solicitar seu dinheiro que o wi, devolve a voc" sem maiores perguntas(
*ara iniciar o processo de compra de seu plano premium! acesse o painel de
controle de seu site e na parte superior clique em >6pgrade?(
5oc" ser+ direcionado a uma p+gina com especifica$es de cada plano( 0e
quiser apenas conectar um dom#nio ao seu site! poder+ escolher o plano
>Conect a 'omain?! mas se quiser criar uma lo%a virtual! ter+ que
obrigatoriamente escolher o plano >eCommerce?(
0e estiver comeando agora com seu site e no dese%a criar uma lo%a virtual!
minha recomendao que escolha o plano >/ombo! que oferece &timos
recursos e vem com um dom#nio gr+tis( 5oc" poder+ solicitar um aumento de
plano a qualquer momento caso se%a necess+rio(
0elecione o plano dese%ado e clique no boto >Comprar gora?(
5oc" ser+ levado a uma p+gina onde poder+ efetuar a compra com seu cart)o
de crAdito "nternacional ;a =i, no uma empresa MrasileiraE com
bandeiras 5isa! Master/ard! )merican 1,press e Ciscover(
Dnsira os dados de seu carto de crdito e finali'e a compra( 0e tudo der certo
com sua operadora do carto de crdito! em poucas horas seu site %+ estar+
funcionando com o plano escolhido(
Cupom de 'esconto
*ara comprar um plano premium com um desconto de NNO! voc" deve
selecionar o plano >nual 6nlimited?! digitar os dados do seu carto de
crdito! digitar o seguinte cupom 9CD9criarsitesEE9 e clicar no lin2
>Calcular? como mostra a imagem abai,o(
5oc" ver+ que o desconto aparece mais abai,o na +rea em que e,ibido os
valores( *ara finali'ar clique no boto >En+iar compra? para ter seu site
funcionando com o plano premium(
Concluses
O construtor de sites do =i, uma
e,celente ferramenta para criao de um
site completo! que permite que voc" crie
um site independente dos servios de
terceiros! que e,igem mais dinheiro!
tempo e conversao para que as coisas
se%am feitas do %eito que voc" quer(
1u admito que no tinha conhecimento
de todo o potencial do construtor de sites
em HTML do =i, at que comecei a
trabalhar neste e8boo2( Centre os
construtores de sites gr+tis e,istentes
pela Dnternet! o wi, passou a ser o meu favorito! seguido apenas pelo
=ebnode que tambm muito bom(
Me encontre nas redes sociais
/omunidade no Or2ut
0iga me no Twitter
0iga me no Faceboo2
Me siga no 4oogleW
F *age do /riar0ites(com no Faceboo2
-ostou deste materialF
1nto sinta8se livre para distribuir este e8boo2 em seu site! blog! e8mail ou
redes sociais e a%ude seus leitores a terem sucesso com seus sites(
)h! e no se esquea de bai,a os outros e8boo2s gr+tis que eu preparei(
tA a pr@ximaG

Apostila Sobre Wix HTML5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Sobre Wix HTML5

Enviado por

Direitos autorais:

Formatos disponíveis

Escrito por Celso Lemes www.criarsites.

com Todos os direitos reservados

Você também pode gostar