Buscar

Como criar um site Wix a partir de um template

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 13 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 13 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 13 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

Preparação de blog/site para o projeto “Sábados Interativos”
Existemmuitos criadores de site na Web. Abaixo segue uma lista de alguns:
1. WordPress (http://www.wordpress.com/)
2. Blogger (http://www.blogger.com/)
3. Tumblr (http://www.tumblr.com/)
4. SiteJam (https://www.sitejam.com/)
Etc.
Nós vamos trabalhar com o Wix (www.wix.com) por ser bastante intuitivo e dinâmico.
Como criar um site Wix a partir de um template “em branco”
1. Primeiro passo: Acessar o site www.wix.com, criar uma conta Wix e escolher um modelo básico.
a) Estando no site, você verá a tela a seguir:
Figura 1 - Tela inicial do Wix
b) Clique no botão “Comece Já” apontado na figura 1 acima. Fazendo isto, você irá para a tela
a seguir:
Figura 2 - Tela de Login do Wix
c) Se for a tua primeira vez no Wix, você deve fazer o registro primeiro. Para isto clique o link
“Registre-se” conforme apondado na figura 2. Feito isto, você irá para a tela abaixo:
Figura 3 - Tela de Registro
d) Preencha os campos à direita e em seguida clique no botão “Registre-se” ou use uma rede
social conforme tua preferência. Feito isto, você verá a tela da figura abaixo:
Figura 4 - Escolhendo o tipo de site
e) Para este tutorial escolheremos a opção “Outros” apontada pela figura 4. Feito isto você
será conduzido para a tela de templates1. Veja a figura abaixo:
1 modelos
Figura 5 - Tela de templates
f) Para os propósitos deste tutorial usaremos a opção “Em branco” clicando sobre o link
apontado pela figura 5. Feito isto, você é conduzido para a tela mostrada abaixo:
Figura 6 - Modelos “em branco”
g) Neste tutorial vamos trabalhar com a opção “Cabeçalho em Faixa” apontada pela figura 6.
Ao aproximar omouse desta opção você verá dois botões: “Editar” e “Ver”. Por enquanto
usaremos o “Ver”. Clique sobre ele!
h) A visualização nos apresenta um estrutura básica de modo que possamos começar já com
uma ideia da estrutura do nosso site. Veja a figura abaixo:
Figura 7 - Estrutura básica do site
2. Segundo passo: projeto do site.
Tudo que se faz na vida exige planejamento. Para planejar o site precisamos definir algumas coisas:
a) O tema geral do site: do que se trata? Que tipo e quais informação pretendemos mostrar no
nosso site?
b) Quais as páginas do site? Se você observar a figura 7 verá que ela demarca com um retângulo
vermelho o menu do site modelo. Este menu traz as páginas do site: “INÍCIO”, “SOBRE”, “SERVIÇOS”
e “CONTATO”. Na página “INÍCIO” devem ficar as informações de destaque. É a “fachada” do site,
capriche! Na página “SOBRE” estão as informações sobre a empresa, pessoa ou instituição
proprietária do site. A página “SERVIÇOS” traz informações sobre as atividade, comerciais ou não,
da empresa, pessoa ou instituição proprietária do site. Para fins deste tutorial iremos remover esta
página. E, por fim, a página “CONTATO” para deixar fácil as maneiras de entrar em contato com a
instituição, seja email, telefone, rede social, etc.
No nosso site teremos também uma página de blog para introduzir opiniões diversas sobre várias
temas.
3. Terceiro Passo:Mãos à massa!
a) Clique no botão “Editar esse site” apontado pela figura 7 acima para colocar o Wix em
modo de edição. Feito isto, já na tela de edição, você será recepcionado por uma telinha de
boas vindas. Veja a figura 8. Passe um tempo assistindo o vídeo tutorial que vai te ajudar no
restante deste manual.
Figura 8 - Tela de boas vindas!
b) Terminado o vídeo ou caso queira começa a edição imediatamente, clique no botão
“Comece Já!” apontado pela figura 8.
c) A tela apresentada abaixo é a tela inicial do modo edição do Wix.
Figura 9 - Tela inicial do modo de edição do Wix.
d) Vamos começar alterando a faixa do nosso site que é a imagem azul por detrás do nome do
site (Veja figura 9). Para este tutorial vamos escolher uma imagem com um tema sobre
Tecnologia da Informação (TI) que é o tema geral do site do tutorial. Para isto basta clicar
sobre a figura e um conjunto de botões de opção de figura vai aparecer. Veja figura abaixo:
Figura 10 - Botões de opções para faixa do site
e) Vamos clicar no botão “Alterar Imagem da Faixa”. Feito isto, irá ser apresentada a telinha
com opções de fontes de imagem da figura abaixo:
Figura 11 - Tela de escolha de imagem
f) Vamos escolher uma imagem do “Acervo Gratuito do Wix” clicando na aba apontada pela
figura 11. No acervo gratuito do Wix, no lado direito da tela, vamos escolhe a categoria
“Tecnologia”. Veja a figura abaixo:
Figura 12 - Acervo gratuito do Wix
g) A figura escolhida foi a apontada pela figura 12. Em seguida clique no botão “Aplicar”.
Normalmente quando a primeira alteração é feita no teu site, o Wix vai solicitar que você
dê um nome ao site e salve. Faça isto por segurança! Para este tutorial foi dado o nome de
“TECMODO”
h) O próximo passo será alterar o nome no topo do site para TEC Modo. O nome do site é
composto por dois componentes de tela: uma “caixa container” e uma “caixa de texto”. A
primeira é selecionada clicando na área “marrom” do nome do site e a segunda clicando no
texto.
i) Ao selecionar qualquer componente de tela um conjunto de botões semelhantes ao da
figura 10 com opções para aquele componente será disponibilizado.
j) Agora clique sobre o texto “Nome do Site” de modo que este componente de texto fique
semelhante à figura abaixo:
Figura 13 - Componente de Texto selecionado
k) Clique no botão “Editar Texto” para alterar o nome do site e explore a tela de
configurações que será disponibilizada!
l) O demais componentes de texto podem ser configurados da mesma forma!
m) Clique na caixa “marrom” que é uma “Caixa Container” e depois no botão “Alterar
Designer”. Explore esta caixa de configurações! Após as alterações, o nome do site ficará
personalizado. Para este projeto ficou assim:
Figura 14 - Nome do site personalizado
n) Para editar componentes de texto basta clicar sobre ele e usar os botões de configuração
do mesmo modo que os containers e os textos. Veja figura abaixo:
Figura 15 - Opções de configuração do componente de imagem
o) Colocando o ponteiro do mouse sobre os botões de configuração o me de cada um é
apresentado. Explore estes recursos principalmente o botão “Alterar Imagem”!
p) Vamos agora alterar o background da página. Do lado direita do editor fica um barra
vertical de botões de configurações gerais. Veja a figura abaixo:
Figura 16 - Botões de configurações gerais
q) Vamos usar o botão background que é o primeiro da lista e está apontado pela figura 16.
Será apresentada uma caixa de configurações de background com um conjunto de imagens
animadas. Escolha uma delas e aplique a todas as páginas do seu site!
Figura 17 - Background da página
r) Talvez o mais importante dos botões da barra de configurações gerais (ver figura 16) seja o
botão “Adicionar”. Este botão é usado para inserir componentes na página que está sendo
editada. Vamos usar este botão para inserir um blog. Veja a figura abaixo:
s)
Figura 18 - Botão “Adicionar”
t) Na lista do botão Adicionar escolha o item “Blog” conforme apontado pela figura 18.
Escolha um layout, arraste e solte. Um novo menu será criado e o editor do blog será
aberto. No item 5 vamos falar sobre a edição do blog!
u) Agora vamos editar o menu. Clique com o mouse sobre a o menu horizontal de modo que
seja disponibilizado as opções de configuração de menu. Veja a figura abaixo:
Figura 19 - Menu horizontal
v) Clique sobre o botão “Gerenciar Menu” apontado na figura 19. Feito isto será apresentada
a caixa de configuração de páginas do site (Ver figura 20).
Figura 20 - Caixa de configuração de páginas
w) Nós vamos agora excluir a página “SERVIÇOS”. Ao mover o mouse sobre os nomes das
páginas um botão com reticências vai aparecer no componente sobre o qual o mouse
estiver. Assim, clique no botão “...” da página “SERVIÇOS” e escolha a opção “Apagar”como mostra a figura abaixo:
x)
Figura 21 - Opções para as páginas
y) Observe na figura 21 que existem muitas opções para as páginas. Explore e descubra o que
cada uma delas faz!
4. Como montar o site a partir de modelos prontos
a) Acesse à página www.wix.com. Você verá a tela inicial (ver figura 1) e nela um botão
“Comece Já”. Clique sobre este botão!
Figura 1 - Tela inicial do Wix2
b) Na tela de login, você é convidado a fazer um cadastro usando seu email particular ou sua
conta em alguma rede social, normalmente Facebook ou Google. Para o nosso trabalho, o
ideal é que se use a conta de e-mail da turma.
c) Em seguida, será mostrado uma página com alguns templates3 ( Ver figura 2). Um template
é um “esboço inicial” do nosso site. É preciso escolher uma categoria que melhor se ajuste
aos nossos objetivos. No lado esquerdo da tela você verá as várias categorias de site
conforme aponta da figura 2.
2 A aparência pode variar a depender da data de acesso
3 Modelos em inglês
Figura 2 - tela de templates
d) Para este tutorial foi escolhida a categoria “Restaurantes e Comida”, subcategoria
“Restaurante” e em seguida o template “Restaurante Vegetariana”, porém vocês devem
escolher a categoria e o template que melhor se ajuste ao conteúdo que está proposto. Se
precisar de sugestões interagir com os professores e demais profissionais do IF. Veja a
figura 3.
Figura 3 - Categorias e templates
e) Se você mover o mouse sobre o template escolhido você verá os botões “Editar” e “Ver”
mostrados na figura 4. Clique no botão “Ver” para ter um ideia do layout do template e ver
se está de acordo com as expectativa da turma. Normalmente, uma outra aba do
navegador é aberta para apresentar o template. Pergunte, discuta e escolha. Se não for do
agrado da maioria feche a aba da apresentação e volte à aba das categorias e repita o passo
c, d e e.
Figura 4 - Escolhendo um template
f) Tendo definido o template do projeto é preciso personalizar. Na parte superior da
vizualização você verá o botão “Edite ess site” (ver figura 5). Clique sobre ele para abrir o
Editor do site. Os próximos tópicos apresentam o editor.
Figura 5 - Botão “Edite esse site”
g) Um site, como você deve saber, funciona como um espécie de revista em versão eletrônica.
É composto por várias páginas que, por sua vez, são acessadas por meio de links e menus.
Na parte superior do editor você verá um combox que lista todas as páginas do seu site (ver
figura 6).
Figura 6 - Primeiras ferramentas do editor
h) Clicando onde a figura 6 aponta você verá a lista de todas as páginas do site que
normalmente são também indicadas pelos menus conforme demarcado com um retângulo
vermelho na figura 6. O resultado de clicar na lista de página é apresentado na figura 7.
Figura 7 - Opções de edição das páginas do site
i) Com o menu apresentado na figura 7 algumas configurações das páginas podem ser
alteradas clicando no botão com “...” ao lado do nome de cada página individualmente.
Basta colocar o mouse sobre o nome da página que se deseja modificar e o botão “...”
aparecerá. Novas páginas podem ser adicionadas usando o botão “+ Adicionar página” na
parte inferior do menu conforme apontado na figura 7. Veremos sobre isto na seção “Como
inserir conteúdo” em seguida.
j) Voltando à figura 6 você verá que existe outrosmenus ao lado da lista de páginas. São eles:
“Site”, “Ferramentas”, “Ajuda” e “Fazer Upgrade”. Elas estão demarcadas com um
retângulo azul na figura 6.
k) Quando você aproximar o ponteiro do mouse de um componente com algum conteúdo do
template, seja texto ou imagem, será destacado o campo que contém o conteúdo para que
você possa editá-lo. Veja a figura 8. Clique sobre o contéudo para aparece as opções de
edição.
Figura 8 - Caixa de edição de conteúdo
l) Como pode ser visto na figura 9, as opções são: 1. Alça de arrastar, 2. Ajuda, 3. Animação ,
4. Editar Texto. Alça de arrastar serve para reposicionar o componente; Ajuda oferece
instruções quanto a edição do componente; Animação lhe dará várias opções de animação
do componente; Editar Texto serve para alterar o texto do componente. Experimente!
Figura 9 - Edição de componentes
m) A figura 9 aponta para “bolinhas” no entorno do componente. Elas servem para
redimencionar a área do componente. Experimente!
n) Para componentes de imagem existem mais ferramentas de edição. Veja figura 10. 1.
“Alterar imagem” serve para modificar a imagem a ser exibida; 2. “Configurações” serve
para definir o comportamento da imagem; 3. “Design” serve para incrementar a imagem
com detalhes extra 4. “Recortar” serve para redimensionar a imagem; 5. “Filtros de
Imagem” serve para modificar a aparência geral da imagem; 6. “Animação”; 7. “Link” serve
para vincular o clique sobre a figura a alguma outra página no site ou fora dele; 8. “Ajuda”
Idêntico ao anterior. Experimente!!
Figura 10 - Ferramentas de edição de imagem
1
234
1 2 3 4 5 6 7 8
5. Editando o Blog
//POR FAZER
6.

Outros materiais