E-Book %28Aprenda a Criar Websites%29

ISBN: 978-85-915938-0-4

APRENDA A CRIAR WEBSITES – Dê asas à sua imaginação

www.nilsongomes.com.br

2

NILSON GOMES

APRENDA A CRIAR WEBSITES

1ª edição

2013



3

Agradeço aos meus queridos pais e irmãos, aos meus

amigos on e off-line. Um agradecimento especial ás

pessoas que me apoiam incondicionalmente nesse

projeto e fazem parte de todas as minhas conquistas,

minha esposa Meridiane e filha Isadora.



4

Sumário

PREFÁCIO ................................................................................................................ 7

O QUE É O WIX ........................................................................................................ 9

POR QUE CRIAR ESSE E-BOOK SOBRE O WIX? .................................................................... 10

O QUE É UM WEBSITE ................................................................................................... 11

O QUE É O PROJETO DELIVERY FISH ................................................................................. 12

DICAS IMPORTANTES ANTES DA CRIAÇÃO DO WEBSITE ......................................................... 13

CRIANDO UM ESBOÇO DO SEU WEBSITE............................................................................ 14

PRIMEIROS PASSOS COM O WIX ............................................................................ 17

ACESSANDO O WIX ..................................................................................................... 18

CRIANDO UMA CONTA NO WIX ...................................................................................... 19

CRIANDO O WEBSITE A PARTIR DO ZERO ........................................................................... 19

VAMOS DAR INÍCIO NO NOSSO PROJETO CLICANDO NO BOTÃO “EM BRANCO”. ........................ 20

ÁREA DE TRABALHO DO WIX ......................................................................................... 22

BARRA DE FERRAMENTAS DO WIX .................................................................................. 23

INICIANDO A CRIAÇÃO DO WEBSITE DO DELIVERY FISH ........................................................ 28

SALVANDO SEU WEBSITE ............................................................................................... 28

CONFIGURANDO A PÁGINA DE FUNDO ............................................................................. 30

INSERINDO UMA IMAGEM NA PÁGINA DE FUNDO ............................................................... 30

REMOVENDO CORES DA PÁGINA DE FUNDO ...................................................................... 31

TROCANDO A COR DO CABEÇALHO .................................................................................. 32

INSERINDO UMA IMAGEM DE FUNDO NO CABEÇALHO ......................................................... 33

INSERINDO MENUS ................................................................................................ 34

MUDANDO CORES E ESTILO DO MENU ............................................................................. 35

ALTERANDO O NOME DOS MENUS E ADICIONANDO NOVAS PÁGINAS ...................................... 36

ADICIONANDO PÁGINA EM BRANCO ..................................................................... 37

INSERINDO CLIP ART E FORMAS E LINHAS .......................................................................... 38

INSERINDO LOGO DA EMPRESA E FINALIZANDO O CABEÇALHO ............................................... 38

DEIXANDO UMA IMAGEM ARREDONDADA ........................................................................ 40

INSERINDO CAIXAS DE TEXTOS ........................................................................................ 41

INSERINDO BOTÕES E CONFIGURANDO FORMAS ................................................................. 42

TROCANDO O ESTILO DO BOTÃO CADASTRE-SE .................................................................. 43



5

CRIANDO HIPERLINK PARA AS PÁGINAS ............................................................................. 44

ADICIONANDO O MENU DE CARDÁPIO DO DELIVERY FISH ..................................................... 45

Inserindo caixa transparente ............................................................................. 47

INSERINDO UMA IMAGEM SLIDESHOW ............................................................................. 48

ADICIONANDO AS PÁGINAS DO MENU PRINCIPAL ................................................ 48

INSERINDO LINK DO MENU CARDÁPIO .............................................................................. 52

CONFIGURANDO O AUTOPLAY DAS IMAGENS ..................................................................... 53

INSERINDO VÍDEOS ....................................................................................................... 55

CRIANDO SUA LOJA VIRTUAL ................................................................................. 57

REMOVENDO E ADICIONANDO CATEGORIAS ...................................................................... 59

EXCLUINDO E ADICIONANDO PRODUTOS ........................................................................... 60

CADASTRANDO PRODUTOS ............................................................................................ 60

INSERINDO IMAGEM DO PRODUTO .................................................................................. 61

SELECIONANDO MÚLTIPLAS IMAGENS .............................................................................. 62

ADICIONANDO INFORMAÇÕES DO PRODUTO ..................................................................... 62

CONFIGURANDO LAYOUT DOS PRODUTOS ......................................................................... 63

DEFININDO QUANTIDADE DE LINHAS E COLUNAS ................................................................ 64

DEFININDO O ESTILO DA PÁGINA DO PRODUTO .................................................................. 66

ALTERANDO CONFIGURAÇÕES AVANÇADAS DA PÁGINA DE PRODUTOS .................................... 67

CONFIGURAÇÃO DO CARRINHO DE COMPRAS .................................................................... 67

ALTERANDO AS CONFIGURAÇÕES DO CHECKOUT ................................................................ 68

INSERINDO LINK DA IMAGEM PARA O CARRINHO DE COMPRAS .............................................. 69

DEFININDO A FORMA DE PAGAMENTO ............................................................................. 70

CALCULANDO O VALOR DO FRETE .................................................................................... 71

COMO ADICIONAR UM FORMULÁRIO DE CONTATOS ............................................................ 72

INSERINDO CÓDIGOS HTML .......................................................................................... 73

VISUALIZANDO O WEBSITE PRONTO ................................................................................. 75

INSERINDO APPS ......................................................................................................... 76

FAZENDO UM UPGRADE NO SEU WEBSITE ............................................................ 76

REGISTRANDO UM DOMÍNIO ................................................................................ 80

PREENCHA O ID E A SENHA PARA ACESSAR O GERENCIADOR DE REGISTROS .............................. 82

CADASTRANDO UM NOVO DOMÍNIO ................................................................................ 83



6

CONFIGURANDO O WEBSITE PARA MOBILE ........................................................... 84

SUA LOJA VIRTUAL NO FACEBOOK ......................................................................... 87

ADICIONANDO A PÁGINA ............................................................................................... 88

CRIEI MEU WEBSITE, E AGORA? ............................................................................. 90

CRIANDO UM LANDING PAGE ......................................................................................... 90

ESTIMULE O USUÁRIO A UMA AÇÃO NO SEU WEBSITE .......................................................... 91

10 PASSOS PARA COMEÇAR UM NEGÓCIO NA WEB............................................... 93

VOCABULÁRIO WEB ............................................................................................... 98

CONSIDERAÇÕES FINAIS ...................................................................................... 101

DADOS ESTATÍSTICOS DO E-COMMERCE NO BRASIL ............................................ 102

O QUE É A E-BIT ........................................................................................................ 102

FATURAMENTO ANUAL DO E-COMMERCE NO BRASIL 2001 Á 2012 ................................... 102

TABELA DE EVOLUÇÃO DAS VENDAS NO NATAL 2001 Á 2012 ........................................... 103

GRÁFICO ESTATÍSTICO DE E-CONSUMIDORES NO BRASIL 2001 Á 2012 ................................ 103

ESCOLARIDADE - QUANTIDADE DE TRANSAÇÕES .............................................................. 104

FAIXA ETÁRIA E QUANTIDADE DE TRANSAÇÕES ................................................................. 104

PERFIL DO CONSUMIDOR - EBIT ................................................................................... 104

REFERÊNCIAS ....................................................................................................... 105

SITES USADOS COMO FONTES E REFERÊNCIAS ..................................................... 105



7

Prefácio

Escrever um livro ou e-book, não importa como nós chamamos, é um sonho que acredito ser da maioria das pessoas. Eu não lembro quem é o autor desta frase: “Plante uma árvore, tenha um(a) filho(a) e escreva um livro”, segui este provérbio durante anos, e aos poucos fui conquistando cada um deles, estava me faltando apenas o livro, e no final dessas 100 páginas vai ser mais uma conquista.

O website deve ter um objetivo, uma meta, e, para alcançar esses objetivos, vamos ter que entender de tudo um pouco, não apenas de como criar o website, mas também de como divulgá-lo na web, por isso abordo outros assuntos que não tem a ver com a criação do websites, mas várias dicas de como promover seu negócio na web.

O cenário do marketing digital tem mudado nos últimos anos, embora todos concordaremos que “Marketing é Marketing”, não importa se é no papel, na mídia ou no rádio, fazer marketing na web é uma forma de poder integrar todas essas mídias, e acaba se tornando comum, ao mencionarmos a propaganda na internet, como marketing digital.

A chamada presença digital não significa simplesmente ter uma página institucional. Hoje em dia, grandes empresas investem pesado no seu quadro funcional para trabalharem diretamente com desenvolvimento do e-commerce, anúncios, SEO, mídias sociais, e daí por diante. Com sistemas sofisticados, essas empresas sabem quantas vezes você acessou a sua loja virtual, quanto tempo ficou, o que gostou, e, na próxima vez que acessar o seu website, adivinhe: o produto que você estava procurando já vem com desconto especial.

Mensuração, persuasão, funil de vendas são palavras fortes no mundo web, mas até pouco tempo atrás esse vocabulário era um privilégio de agências digitais, ou de grandes empresas, como Magazine Luiza, Submarino ou Walmart. Não que o tema fosse algum segredo ou tivesse aquém das pequenas empresas, mas o marketing digital necessitava de grandes equipes de TI, especialistas na web e ferramentas para desenvolvimento, recursos que uma pequena empresa não poderia dispor.



8

Há algum tempo, temos excelentes frameworks gerenciadores de conteúdo (CMS) que agilizam muito na construção de lojas virtuais e websites. Dentre eles, podemos citar o Joomla, Drupal e Wordpress, mas, mesmo assim, a lacuna existente para com o usuário sem experiência em computação era muito grande, pois todas essas ferramentas que citei acima necessitavam de algum conhecimento em programação.

Contudo, para nossa sorte, nos últimos anos criar um pequeno e-commerce ficou tão simples como usar um editor de texto. Hoje, mesmo sem ter qualquer conhecimento em linguagem de programação, é possível criar websites institucionais e pequenas lojas virtuais com recursos incríveis. Nessa linha de plataformas virtuais, onde o usuário não necessita de conhecimento de programação, está o WIX. Essa plataforma é responsável pela construção de mais de 30 milhões de websites no mundo todo, e pode acreditar: você vai usufruir o que tem de mais sofisticado em tecnologia web com plano totalmente gratuito.

Mas, mesmo para usar um editor de textos, muitas vezes precisamos de um bom guia ou tutorial, para realizarmos as tarefas mais rapidamente. E é por isso que escrevi esse e-book. Na criação desse e-book, utilizei toda a minha experiência adquirida como instrutor de informática e responsável pela criação dos tutoriais e apostilas. Recentemente, com minha graduação em licenciatura em computação, consegui trabalhar ainda mais as práticas pedagógicas do ensino-aprendizagem e as usabilidades necessárias na construção do conhecimento, e com isso construir um e-book rico em detalhes, para que o entendimento do leitor fosse mais fácil.

Este e-book vai ensinar você a construir um website completo de uma empresa que trabalha com tele-entrega de filés de tilápias e derivados de peixes (Delivery Fish). Esse website será criado desde a parte institucional até a integração da loja virtual com o Facebook. Isso mesmo: vamos aprender e-commerce também. Será um case, em que teremos a cada etapa a possibilidade de visualizar o que já foi realizado na construção desse website.



9

O que é o WIX



10

O que é o WIX

Como falei anteriormente, esse projeto vai ser criado utilizando a plataforma WIX. Mas, afinal, o que é o WIX?

WIX é uma plataforma 100% web, que lhe permite criar um website grátis em HTML5 ou Flash. Sua interface é simples e seu funcionamento é basicamente através dos recursos de arrastar e soltar, sem a necessidade de programação ou conhecimento de design. É uma excelente plataforma para você criar um website pessoal, ou para o seu negócio.

Hoje em dia, muitos usuários preferem criar o seu comércio virtual primeiro, para depois lançar mão da loja física, pois o custo e os riscos são bem menores. Então, qualquer que seja o seu negócio, ele pode começar por um website.

Por que criar esse e-book sobre o WIX?

No meu entendimento, é o melhor que existe no momento, no quesito criação de websites. Antes de optar por essa plataforma, pesquisei diversas outras ferramentas para esse tipo serviço. Intuitividade para mim era a palavra-chave nas minhas pesquisas, e, se o objetivo é trabalhar com usuário sem muita experiência, esse é o primeiro ponto que devemos avaliar. Quando descobri os incríveis recursos que o WIX oferece através de APPs, foi fácil de elegê-lo como número um no quesito criação de websites.

O WIX tem os princípios de usabilidade, que todo o website deveria ter. Seu ambiente de trabalho traz recursos e facilidades que o usuário espera, sua área de trabalho é limpa e as ferramentas aparecem apenas no momento necessário para o seu uso.



11

O que é um website

Os websites nasceram na década de 90, criados por Tim Berners-Lee e Robert Cailliau. Basicamente, chamamos de documentos em hipermídias que são interligados (links) e executados num navegador.

Esses documentos podem estar na forma de fotos, textos ou vídeos e seguindo as interligações desses hiperlinks, cria-se então o conceito de navegar ou surfar na web.

Atualmente, tão importante quanto ter o endereço da nossa casa é ter uma conta de e-mail. Para o empreendedor web, serve a mesma regra, ter um website hoje, significa ter o endereço da sua empresa estampado para o mundo, a famosa identidade digital que muito ouvimos falar.

Se você seguir o passo a passo ilustrado neste e-book, poderá ter um website com um alto padrão de qualidade superior aos que usam ferramentas caras ou várias horas de programação, sem ter que contratar designer ou programador.



12

O que é o projeto Delivery Fish

Quando decidi criar este e-book para ensinar usuários sem experiência a criar websites na plataforma WIX, pensei em desenvolver algo real, nada de exemplos fictícios. Foi aí que nasceu o Delivery Fish. Inicialmente, o nome desse projeto seria Delivery Grelhados, mas nesse meio tempo acabei conhecendo a empresa física do Delivery Fish, e a ideia de desenvolver um projeto real ficou ainda mais fácil, pois poderia ser testada na prática toda sua funcionalidade. Nasceu aí o case Delivery Fish.

Esse e-book, vai nos ensinar a criar um website com e-commerce passo a passo a partir do zero, e o nosso cliente será a empresa Delivery Fish.

Vou atribuir a esse projeto requisitos fundamentais, para que nosso website tenha uma presença digital diferente do que vemos em outros websites. Recursos como:

Sistema de atendimento on-line

Página inicial com vídeo institucional e banner com cardápios

Cadastro de produtos (com até 10 fotos)

Pedidos on-line (podendo optar por pratos (pequeno, médio, grande))

Pagamentos via PagSeguro com opções de frete

Inventário de produtos

Integração da loja virtual com Facebook

Integração com as principais redes sociais (Google+, Twitter, Facebook Blogger).

Além da loja on-line, onde o usuário poderá realizar os seus pedidos, teremos o atendimento virtual através do chat, o website pode oferecer ainda um serviço de franquias, em que outras pessoas podem adquirir o know-how da empresa para futuros empreendedores que queiram usufruir desse serviço na web.



13

Dicas importantes antes da criação do website

Antes de iniciarmos o website, é necessário realizar algumas tarefas, para evitar retrabalhos, ou desperdício de tempo. Caso você ainda não tenha criado uma conta no Gmail, crie agora. Embora outros servidores de e-mail ofereçam o mesmo serviço, ter uma conta no Gmail vai ser útil mais adiante, quando necessitar utilizar os serviços gratuitos que o Google oferece, como G+, Google Analytics e outros. Todos esses serviços poderão interagir com o seu website posteriormente, então, mesmo que já possua uma conta de e-mail em outro provedor, aproveite e crie no Gmail agora, para realizar o cadastro no WIX já com sua conta nova.

1° => Primeiro, você deve criar uma pasta no seu computador ou em alguma unidade de armazenamento para adicionar todas as imagens que você pretende usar no seu website. Crie uma pasta com o nome imagens do Website. Nada de sair catando na web a imagem que você precisa, na hora de estar montando o seu cardápio, por exemplo. Nesse endereço, http://www.public-domain-photos.com/, você poderá adquirir centenas de imagens totalmente grátis. O fato de as Imagens estarem na internet não significa que são livres de direitos autorais. O ideal mesmo é que você componha seu próprio banco de imagens para trabalhar tranquilo. Vai perder um pouco de tempo agora, mas vai recuperá-lo mais tarde.

2º=> Após criar as pastas e deixar as imagens predefinidas, você poderá compor os textos das demais páginas principais, por exemplo: (“Página Principal – Quem Somos – FAQ (principais perguntas) – Contato etc.). Enfim, o conteúdo das páginas que vão compor seu website deve ser criado antes de botar a mão na massa. Assim, quando for adicionar o conteúdo da página Quem Somos, basta acessar o seu editor de textos e copiar o conteúdo para o seu website, fazendo apenas ajustes de cores e fontes.

3°=> Quando criamos uma conta no WIX, ele permite utilizar um subdomínio do próprio WIX sem custo nenhum. Por exemplo, o nome do nosso projeto é Delivery Fish, logo, o endereço criado como subdomínio dentro do WIX deverá ficar assim: deliveryfish.wix.com. Veja que, dessa maneira, o nosso domínio continua hospedado dentro do WIX com o domínio (wix.com) no final.

http://www.deliveryfish.wix.com/



14

Mesmo que o website seja pessoal, é importante termos um domínio próprio, pois, além de ficar mais fácil a identificação para o seu público, essa identidade digital representa uma maior segurança para o usuário, principalmente se ela vier acompanhada com a terminação do seu país, no nosso caso o “.br”, essa terminação poderá mais credibilidade para o seu negócio.

4º=> O próximo passo é criar um esboço desse projeto. Pode ser rabiscado de forma manual mesmo, só para ter uma visão de como ficará a disposição do conteúdo, já que a proposta é do tipo “FAÇA VOCÊ MESMO”. Por isso, não existe a necessidade de contratar webs designers, pois o Wix tem centenas de modelos prontos já organizados por categoria, para que você possa escolher o template mais adequado ao seu projeto.

Criando um esboço do seu website

Mesmo tendo uma biblioteca de páginas modelos (templates), que podem auxiliar na criação do nosso projeto, neste e-book não utilizaremos templates. Vamos construir o website a partir de um modelo em branco, para que você consiga acompanhar cada etapa do seu desenvolvimento.

Quando não se utiliza template, é importante que você crie um esboço do seu projeto antes de começar a implementar o website, por isso montei o esboço em um editor de textos para usarmos como guia.

Esse esboço é um protótipo ao qual não precisamos segui-lo ao pê da letra, mas pelo menos servirá como base para dar sequencia na criação do seu projeto.



15

O conteúdo das demais páginas (Tabela Nutricional-Quem somos- franquias - Contato) que vão compor o website devem ser criadas antes de iniciarmos a implementação na plataforma WIX. Utilizando um editor de texto, podemos editar o conteúdo de cada uma e deixar salvas em uma pasta, para posteriormente copiar para as páginas na plataforma WIX.

A seguir, vamos criar três esboços de páginas do nosso website: Quem Somos, Início, Carrinho de Compras. Assim como na página principal, a ideia é que, no final deste e-book, seja possível comparar nosso projeto inicial feito no editor de texto, com o do website pronto.

Imprima a imagem acima, para utilizar como modelo na criação do Website.

Figura 1-Esboço da Página Inicial



16

Sugestão para página Quem Somos:

Figura 3 - Página quem Somos

Sugestão para página Menu Cardápio:

Figura 4 - Página Menu Cardápio



17

Aqui mais um modelo de como poderá ser a nossa página de pedidos do Delivery Fish. Esta é a página que vai anteceder a entrada dos produtos no carrinho de compras. Após clicar o usuário clicar no produto, deverá aparecer uma janela com detalhamentos de cada cardápio.

Sugestão para página Produtos:

Figura 5 - Página de Produtos

Sugestão para página Carrinho de Compras:

Figura 6 - Página Carrinho de Compras



18

Primeiros passos com o WIX

Acessando o WIX

Para acessar o WIX através do website oficial, utilize esse endereço: www.wix.com. Em seguida, ele encaminha para o portal do seu idioma, no nosso caso português, e, automaticamente, ele vai para esse endereço: pt.wix.com. A página fica um pouco diferente, mas os recursos são os mesmos. As ilustrações deste e-book seguem uma sequência de setas numeradas, para ficar mais fácil de acompanhar o passo a passo.

Inicie clicando sobre o botão “(1) COMECE AGORA!”.

Passo 1

http://www.wix.com/

http://www.pt.wix.com/



19

Criando uma conta no WIX

Na tela inicial do WIX, clique no botão “Login/Registre-se”, no canto superior direito. Caso você ainda não seja cadastrado, basta clicar em “(2) CRIAR UMA NOVA CONTA” para realizar o cadastro, ou apenas realizar o LOGIN, digitando e-mail e senha.

Após preencher os campos com seu e-mail e senha, clique no botão IR.

Passo 1



20

Criando o website a partir do zero

Dependendo da maneira com que o WIX é acessado, ele pode aparecer em uma página inicial diferente dessa que estou mostrando abaixo. Na maioria das vezes que os usuários chegam até o portal do WIX, é através de direcionamento de afiliados, ou seja, link de outros sites. Após realizado o login, a próxima janela é a de categorias de templates.

O WIX oferece dezenas de websites modelos, no entanto vou ensinar você a criar um website a partir de uma página em branco.

A sequência é bem simples, pois ele é dividido em “(3) grupos” e “(4) categorias”, e os modelos já vêm com temas de cada área de atuação.

Para você criar um website a partir de uma página em branco, requer mais trabalho do que usando templates, onde praticamente tudo está pronto. Nesse caso, teremos de criar toda a estrutura do nosso website, desde as páginas e links até as caixas de textos, ao invés de pegá-las prontas.

Vamos dar início no nosso projeto clicando no botão “Em branco”.



21

Após escolher um template “(5) Em Branco”, ele oferece ainda algumas opções de layout. Vou optar em utilizar o primeiro da lista: “Comece do Zero HTML”. Esse modelo nos traz um design básico onde já vem definido o cabeçalho e rodapé da página.

Para iniciar a edição do nosso website, clique no botão “(6) Editar” abaixo do modelo.



22

Área de trabalho do WIX

Ao acessar o WIX, vemos uma área com poucas ferramentas, mas elas existem e são muitas, sendo que uma das qualidades do WIX é a de não poluir o ambiente de trabalho, por isso ele traz um campo de visão praticamente limpo.

Na caixa de diálogo “(1) Página”, podemos visualizar todas as páginas criadas, inclusive as ocultas. Temos os botões “(2) Desfazer e Refazer”, para voltar ao estágio anterior de alguma tarefa. Podemos utilizar a opção “(3) Copiar e Colar” apenas de conteúdo dentro do nosso projeto, com exceção de textos que podem ser colados de locais externos, por exemplo, de editores de textos. Mas não é permitido colar uma imagem da Web, ou alguma caixa de texto do LibreOffice Writer, por exemplo.

Os botões “(4) Gridlines” servem para visualizar as dimensões da nossa página. Esse tamanho é sugerido pelo WIX, e, embora possamos posicionar objetos fora desse pontilhado, é fundamental utilizar as medidas, pois elas permitem que o website seja visualizado em outros dispositivos menores, como smartphones e tablets.

O botão “(5) Pré-visualizar” é utilizado sempre que houver alterações no website, e precisarmos ver o resultado.



23

Utilize o botão “(6) Salvar” com frequência. Lembre-se que o trabalho realizado é totalmente dependente de conexão com a internet, por isso não espere o término das tarefas para salvá-las. Então, use e abuse do botão salvar.

Devemos utilizar o botão “(7) Publicar” para realizar testes de funcionamento do website. Cuide para não divulgar nos motores de busca (Google), porque, com isso, ele estará visível para o mundo todo, e deixar que visualizem um website incompleto não é conveniente.

Barra de ferramentas do WIX

As principais ferramentas do WIX ficam na barra lateral esquerda. Elas são os eixos principais do WIX, e tudo que é criado começa por ali. Depois de inserir uma caixa de texto ou uma imagem no seu website, você tem a possibilidade de usar o clique sobre esse objeto e aparecerão novas funcionalidades. Isso é o legal do WIX. É a simplicidade com que ele mostra os recursos, sem ter de dar dezenas de cliques em menus suspensos, para realizar uma tarefa.

A seguir, vamos visualizar as principais funções das ferramentas do WIX. Não vou descrever suas funções agora; é apenas para se familiarizar com o ambiente.



24

Páginas: nesse botão, você tem a possibilidade de excluir e duplicar uma página, além de realizar diversas configurações.



25

Design: nesta aba, podemos trabalhar com três guias de formatação: Background (plano de fundo), Cores e Tipos de Fontes.



26

Adicionar: esse menu é o mais utilizado, pois possui a maioria dos recursos importantes para construção do website. Nesta guia, temos as ferramentas de Texto, Imagem, Galeria, Mídia, Formas e Linhas, Botões e Menus, Loja Online e Apps.



27

Configurações: na guia de configurações, alguns recursos só são permitidos depois do usuário fazer um upgrade, ou seja, adquirir uma conta premium (plano pago), onde ele consegue remover os anúncios do WIX e também gerenciar o domínio. Mais à frente, quando realizarmos o upgrade do Delivery Fish, vou mostrar como configuramos todos esses itens.



28

App Market: é uma das opções mais usadas também. Através desta função, é possível adicionar inúmeros recursos no website e, com isso, agregar funcionalidades que em outros sistemas necessitariam de várias horas de programação. São dezenas de Apps e as principais são gratuitas, como integração com o Blogger e Facebook. Tudo isso é possível fazer, apenas com alguns cliques.

Iniciando a criação do website do Delivery Fish

Agora que conhecemos a maioria das ferramentas do WIX, vamos dar início à construção do Website. O modelo que vamos trabalhar basicamente se divide em três partes: cabeçalho, centro e rodapé. É importante o visualizarmos agora enquanto ele está em branco, e percebermos os avanços que serão feitos a cada etapa.



29

Salvando seu website

Antes de prosseguir com a construção do website, vamos salvá-lo. Para isso, utilize a barra superior e clique no botão “Salvar”.



30

Configurando a página de fundo

Inserindo uma imagem na página de fundo

O próximo passo é inserir uma imagem de fundo do website. Como definimos no início do projeto, uma imagem de cardápio fará a composição de fundo da página. Para inserir esta imagem, siga os passos a seguir através do menu Ferramentas: “(1) Design – (2) Background – (3) Fazer Upload – (4) Personalizar Background – (5) Adicionar Imagem – (6) Fazer Upload”.



31

Obs.: no item dicas importantes, sugeri que deixasse uma pasta no seu computador ou pendrive com as imagens que você vai usar. Seu website obviamente não será igual ao do Delivery Fish se as imagens forem diferentes, pois elas podem serem baixadas no website da www.infobook.com.br/downloads.

Removendo cores da página de fundo

Após inserir a imagem de fundo, sua página ficará como na figura abaixo. Note que no centro e no cabeçalho ainda permanece as cores de fundo que o Wix trouxe automaticamente. Para remover as cores de fundo do cabeçalho e do centro, clique com o botão do mouse sobre o centro da página. Vai aparecer o menu “Páginas” e, após isso, você deve clicar em “(7) Trocar Estilo”. Ele vai mostrar mais uma caixa com o nome “Trocar Estilo”, e, clicando no Botão “(8) Editar Estilo”, a cor sobre a imagem de fundo será removida.



32

Trocando a cor do cabeçalho

O nosso cabeçalho será composto por uma imagem. Ela foi criada num

editor de textos e depois importada como imagem para o nosso website.

Perceba que o nosso cabeçalho tem três partes onde será adicionada a cor

verde, mas no centro terá uma imagem.

Então, ao invés de remover a cor do centro dele, vamos pôr cores em todo o cabeçalho. Para fazer isso, clique com o mouse sobre o cabeçalho. Irá aparecer o menu “(9) páginas” e você deve clicar em “trocar estilo”. Na caixa Trocar Estilo, clique no botão “(10) Editar Estilo”, e na sequência você deve escolher as cores do centro do cabeçalho “(11) Background Centro” e “Background”.



33

Inserindo uma imagem de fundo no cabeçalho

Para inserir uma imagem no cabeçalho, vá até o menu Ferramentas: “(12) adicionar”, “(13) imagem” e “(14) Trocar imagem”.

Após clicar em trocar imagem, vai aparecer uma janela com a galeria de imagens do WIX. Nesta janela, será possível escolher entre as imagens grátis do WIX e as imagens que você importar do seu computador, que aparecem na aba Minhas imagens. A imagem que queremos inserir é a que vai compor o fundo do cabeçalho. Já tenho esta imagem salva no meu computador em uma pasta, e ela será a barra ao fundo do cabeçalho que vamos inserir.

Para fazer isso, vamos executar o seguinte procedimento: “(15) Upload – seleciona a imagem do seu computador – (16) dá 2 cliques – ok”. Após ela aparecer na galeria de imagens, dê mais dois cliques a fim de transferi-la para sua página:



34

Após inserir a imagem, você deve redimensioná-la e arrastá-la até o cabeçalho, deixando como na figura abaixo. Observe ainda que é possível aumentar e diminuir o espaço do cabeçalho, clicando nas guias de ajustes.

Obs.: O formato desse objeto que vai compor um fundo amarelo no cabeçalho foi desenhado num editor de texto e depois salvo como imagem. Você não precisa de editores de imagem caros ou sofisticados, podendo utilizar o LibreOffice 3.6 ou o Microsoft Word 2010.



35

Inserindo menus

Para inserir menus no cabeçalho, clique na barra de ferramentas: “(1) Adicionar – Botões de Menus” e em botões de menus selecione: “(2) Menu de Botões”. Após inserir os menus, eles ficam no centro da tela. “(3) arraste o menu até o cabeçalho” e posicione-o como mostra no passo 4. Esse menu é composto inicialmente por cinco botões, “(4) Home-Page2-Page3-Page4-Contact”. O nome desses menus será alterado posteriormente, seguindo o esboço inicial que foi feito no editor de textos.

Mudando cores e estilo do menu

Primeiramente, clique sobre qualquer parte da “(5) barra de menus” que acabamos de criar.

Aparecerá uma janela, onde você poderá seguir a sequência ilustrada da imagem abaixo: “(6) Troca de estilo – (7) Editar estilo – (8) trocar aparência – (9) selecionar cores”.

Page 2 Page 3 Page 4 Contact Home



36

Alterando o nome dos menus e adicionando novas páginas

Para alterar o nome dos botões do menu “Home-Page2-Page3-Page4-Contact”, podemos dar dois cliques sobre o menu principal ou clicar na “(10) Ferramenta Páginas”. Após isso, aparece um janela com todos os nomes das páginas que compõem o menu, e também as que ficam ocultas, pois nem todas as páginas têm a necessidade de aparecer no menu principal.

Em seguida, clicamos no botão “(11) Configurações de página”. Podemos alterar os campos “(12) Nome da Página (nome que aparecerá no menu)”, “(13) Endereço da Página” (nome que o sistema identifica para chamar a página).

A caixa de seleção “(14) Ocultar do Menu” evita que a página apareça no menu principal, pois vão existir páginas que serão chamadas através de outros botões ou hiperlinks. Podemos definir também a primeira página a ser exibida ao abrir o nosso website. Para isso, devemos marcar a caixa “(14) Definir como Página Inicial”. A caixa de seleção “(14) Proteger página”



37

Passo 15

15

impede que páginas sejam acessadas por usuários que não sejam do grupo de administrador.

Nessa mesma janela, podemos ainda definir as “(15) Configurações de SEO”. Nesses campos, devemos descrever a área de atuação do website, bem como o objetivo a que ele se propõe, outro item muito importante é inserirmos no campo de Palavras-chave, palavras referentes ao conteúdo ou segmento que o website vai ser usado, pois o conteúdo desse campo, é visualizado pelos motores de busca do Google.

Adicionando página Em branco

Podemos ainda adicionar uma nova página, no menu “Adicionar Página”. Após isso, o WIX mostra uma lista de “Layouts de Páginas”. Devemos escolher o modelo, que melhor se adequa ao conteúdo que iremos postar, os modelos mais usados são: lista de preços, galerias de imagens ou vídeos.



38

Inserindo clip art e formas e linhas

Nesta etapa, vamos finalizar o cabeçalho do website, inserindo um clip art, uma imagem e uma linha vertical. Para inserir o clip art, vamos até a guia ferramentas “(1) Adicionar – (2) Clip Art” e “(3) selecionar a figura” desejada e “(4) OK”.

Para Inserir a linha vertical no nosso cabeçalho, vá até a opção “(1) Adicionar” da barra de ferramentas. E clique em “(2) Formas e linhas – (3) Linha Vertical”.



39

Inserindo logo da empresa e finalizando o cabeçalho

Nesta etapa, vamos refazer o mesmo procedimento que utilizamos para inserir a imagem de fundo do cabeçalho, inserindo o “logotipo Delivery Fish”, a imagem da “Atendente on-line”, uma caixa de texto com a frase “Ainda não fez nenhum pedido ?” e “pedido via chat on-line”, incluindo também um botão “Cadastre-se”.

A imagem a ser inserida será da galeria de imagens do WIX. Segue-se o mesmo procedimento visto anteriormente: “Adicionar – Imagem – Imagens Grátis WIX”, e são dados dois cliques sobre a imagem.



40

Deixando uma imagem arredondada

O objetivo a seguir será deixar a imagem do atendimento on-line arredondada. Para isso, “(1) clique sobre a imagem”. Irá aparecer a janela Imagem com cinco opções de configuração. Antes de trocar o estilo, clique sobre a opção “configurações – Esticar”, para que ela ocupe toda a área da moldura. Após esticar a imagem, selecione-a novamente e escolha a opção “(2) Trocar Estilo”. Após isso, aparece uma janela com várias opções de estilo. Selecione “(3) Personalize essa Imagem” e em “(4) Estilos Avançados” mova com as setas até aparecer o estilo “(5) circular”, e pronto. Sua figura está com um formato arredondado. Podemos ainda alterar a “(6) Largura da borda”.



41

Inserindo caixas de textos

As caixas de textos são utilizadas para inserimos descrições das páginas ou títulos. Elas oferecem várias formas de configurações, como tamanho da fonte, cor, alinhamento e a possibilidade de inserir links.

Na ferramenta “Adicionar – (1) Texto”, temos a possibilidade de inserir o texto como um título, onde o seu tamanho será maior, através da opção “(2) Título”, ou para descrições com fontes menores, com a opção “Parágrafos”. Após inserir o texto, é possível selecioná-lo para que possamos configurar ainda mais detalhes, utilizando a “(4) barra de ferramentas de cores, fontes, tamanhos e alinhamentos”, que aparecem logo após clicar na opção “(3) Editar Texto” da janela Texto.

O próximo passo é inserir o logo da Delivery Fish. Para fazer isso, utilizaremos o mesmo processo realizado anteriormente, quando aprendemos a inserir a barra de fundo do menu principal. Podemos também criar mais uma caixa de texto e acrescentar a frase “Ainda não fez nenhum pedido?”.



42

Inserindo botões e configurando formas

No cabeçalho do nosso website, temos um botão que direciona o usuário para nossa página de cadastros, vamos inserir o link que vai chamar a página de cadastros como demonstra a sequência abaixo.

No decorrer desse projeto, vamos inserir vários botões de links, pois a teia da web basicamente se baseia nisso, em hiperlinks de uma página a outra.

Então, vamos inserir nosso primeiro botão de menu.

Para inserir um Botão de menu, clique na guia de ferramentas: “(1) Adicionar – (2) Botão de Menu – 3) Botões Grande”. Após inserir o botão, aparecerá na descrição do menu a palavra “(4) MY BUTTON”. O próximo passo é alterar para “CADASTRE-SE” e posicionar esse botão no nosso cabeçalho.



43

Trocando o estilo do botão Cadastre-se

Para alterar o estilo de um botão, devemos “(1) seleciona-lo. Na janela de botões, temos a opção “(2) Trocar Estilo”, e na janela Trocar Estilo clique no botão “(3) Editar Estilo”. Em Estilos Avançados, selecione um “(4) botão com sombra”, para ficar com a mesma aparência do nosso projeto inicial.

Após finalizar esta tarefa, o cabeçalho do Delivery Fish deverá ficar como na imagem abaixo. Lembre-se de que, embora o menu de cardápio contenha vários produtos, vamos ensinar a criar apenas um. No entanto, o procedimento será o mesmo para as demais páginas.



44

Passo 4

Criando hiperlink para as páginas

No nosso cabeçalho, temos o botão “Cadastre-se”. Esse botão tem o objetivo de levar os clientes que pretendem efetuar um compra a se cadastrar no PagSeguro. O cadastro no PagSeguro será explicado mais adiante, por isso, nesse exemplo, vamos ensinar como abrir nossa página de “CONTATO”, pois o procedimento para linkar com o PagSeguro é o mesmo, mudando apenas o endereço da página.

Vamos agora fazer a ligação entre o nosso botão CADASTRE-SE e a página

CONTATO.

Primeiramente, clique sobre o botão

“(1) CADASTRE-SE”. Em seguida,

aparece a janela botões. Siga a

sequência “(2) Link para”, e na janela Link

selecione “(3) Página” e “(4) Selecionar Página”

e OK. Agora, sempre que for clicado no botão

Cadastre-se, abrirá a página CONTATO.



45

Adicionando o menu de cardápio do Delivery Fish

Inicialmente, vamos criar uma caixa através do Menu “Adicionar => Formas e linhas => Caixa”, após inserir a caixa e dimensionar o tamanho correto, além de configurar também o formato da caixa, para ficar mais arredondada

“Após inserir a caixa, “(1) clique” sobre ela

e siga a sequência de etapas, conforme

imagem ao lado: janela”. “Na janela Trocar

Estilos, selecione “(2) Trocar Estilo”. Na

janela Trocar Estilo, selecione “(3) Editar

Estilo”, e na janela Estilos

Avançados=>Cores=> em “(4)

Background”, selecione a cor amarela.

Optei por deixar um pouco diferente do

esboço inicial, por isso, desmarque a

opção “(5) Juntar cantos” e altere o valor

da opção “(6) Tamanho dos cantos”. Com

isso, cada canto pode ser modificado.

Agora mude o valor para 20 nos campos

do lado direito e 0 do lado esquerdo”.



46

e alterar cores e bordas, a fim de deixar com aparência do nosso esboço inicial.

A próxima etapa é inserir um caixa de texto e digitar a lista de cardápio dos produtos da Delivery Fish. Após digitar os itens do cardápio, alinhe-os à esquerda. Os passos para inserir uma caixa de texto e configurá-la são os mesmos passos que vimos no tópico “(9) Inserindo caixas de textos”.

Terminados esses passos, o menu de cardápio fica como na imagem abaixo. Não se esqueça de deixar marcada a opção “(10) Mostrar em todas as páginas”, caso contrário ele aparecerá apenas na primeira página apenas, e não é isso o que queremos. A ideia é deixar o menu visível em todas elas, pois facilita o acesso dos usuários.



47

Inserindo caixa transparente

O conteúdo das páginas do menu principal como “Tabela Nutricional”, “Sobre Nós”, “franquias” e “Contato”, e do menu cardápio deverão ficar sobre uma “caixa transparente” no centro da nossa página.

Para realizar esta tarefa, execute o procedimento ilustrado na sequência abaixo. Após inserir e dimensionar a caixa, clique novamente sobre ela e sigas os passos do 1 a 4, deixando com transparência de 80%, marcando também a opção “Mostrar em todas as páginas”.

Após inserir a caixa transparente, clique sobre ela, e na janela Caixa clique em “(1) Trocar Estilo”. Na janela Trocar Estilo, clique sobre o botão “(2) Editar Estilo”, em seguida, para alterar a transparência da caixa, clique sobre “(3) Background” e na Janela “(4) Personalizar Cor” deixe a transparência de 80%.



48

Inserindo uma imagem slideshow

Seguindo nosso projeto esboço, no lado direito da página inicial (INÍCIO), queremos mostrar imagens de alguns cardápios em forma de transição, ou seja, alternando 3 ou 4 imagens em um ponto fixo da tela, com intervalo de alguns segundos entre elas.

Para inserir uma imagem slideshow, clique em “(1) Adicionar, Imagem – Imagem Slideshow”. Após isso, “(2) clique sobre a imagem” e “(3) Organizar Imagens” e “(4) Adicionar Imagem”. Selecione a imagem que quer inserir.



49

Adicionando Páginas



50

Adicionando as páginas do menu principal

Nesta etapa, vamos ver como inserirmos os links nas páginas do menu Principal. Vou ensinar como realizar esse procedimento apenas para a página “SOBRE NÓS”, nas demais páginas, você deve fazer o mesmo procedimento que vamos descrever abaixo.

Para executar esta tarefa, clique no menu principal “Página”. Em seguida, selecione a página “Sobre nós”.

O próximo passo a fazer é ir até a guia de ferramentas Adicionar – Texto. Digite o título e conteúdo que deverá aparecer na página Sobre nós, e, caso já tenha esse texto digitado em um editor de texto, como orientado no início deste e-book, poderá copiar e colar na caixa de texto, ao invés de digitá-lo novamente.

Ajuste a caixa de texto, o parágrafo e as cores da fonte e clique em “Pré-visualizar”. Nossa página deverá ficar como na imagem abaixo, e, após visualizar o website, clique no botão no canto superior “Voltar à Edição”.

Passo 1



51

Veja como nosso website está tomando forma. Esta é a imagem da página “SOBRE NÓS”.

Agora que criamos a página SOBRE NÓS, execute o mesmo procedimento para criar as demais páginas “TABELA NUTRICIONAL – FRANQUIAS – CONTATO” e teste todos os links, inclusive o Cadastre-se, que deve abrir a mesma página do menu “CONTATO”.



52

Inserindo link do menu cardápio

O menu Cardápio é o menu lateral que já criamos no assunto Adicionando menu de Cardápio e deverá aparecer em todas as páginas do website. O que falta agora é apenas interligar cada cardápio do menu com a página correspondente.

É uma tarefa bem simples, mas primeiramente devemos criar as páginas de cada item que esses links vão chamar. Vamos criar e executar esse procedimento para apenas para um dos links. Para as demais páginas, serão os mesmos passos.

Para realizar esta tarefa, clique na guia de ferramentas menu: “(1) Adicionar – (2) Adicionar Página – (3) Em branco”, e digite o nome da página em “(1) Nomeie sua Página”.



53

Em seguida, comece a inserir o texto da página, a imagem do produto (Salmão) e o Botão “QUERO FAZER O PEDIDO”, conforme definida no nosso esboço inicial. Após realizar esta tarefa, a página do Salmão deverá ficar como na imagem ao lado.

No momento, o link do botão “QUERO FAZER O PEDIDO” ainda não está funcional, pois precisamos criar a página de e-commerce primeiro.

Configurando o autoplay das imagens

O autoplay tem o objetivo de deixar várias imagens em transição. Através dessa configuração, podemos definir quanto tempo cada imagem vai ficar estática. Esse é um recurso muito usado na maioria dos websites, pois, com isso, várias imagens ocupam o mesmo espaço da tela.

Para realizar essa configuração, devemos “(1) Clicar sobre a imagem – (2) configurações”, onde podemos configurar o tipo de “(3) Transições“, se a imagem vai aparecer na vertical ou entra e sai, marcar o “(4) autoplay” e, principalmente, o tempo que ela vai pausar em segundos.



54

Outro recurso interessante é que para cada imagem que aparecer na página de produtos, poderá ser direcionado para um link em específico ou deixar a imagem no modo expansão como mostra no passo (4). Para fazer isso, deve-se selecionar a caixa “(5) Quando clicar em uma imagem”.



55

Inserindo vídeos

Nesta etapa, vamos adicionar o que podemos chamar de “cereja no bolo” para o nosso website. Os vídeos são responsáveis pelas maiores conversões da web nos últimos anos. Por que usar textos quando você pode falar diretamente com o seu cliente? Ele pode ser usado em vários momentos do seu website, seja para destacar o seu produto ou para receber o visitante com um vídeo de boas-vindas.

Você poderá também criar uma landing page com depoimento de seus clientes. Enfim, são várias opções de uso, dependendo apenas da sua criatividade.

Veja, nos passos a seguir, como vamos inserir um vídeo na página inicial do Delivery Fish.

Inicialmente, clique na barra de ferramentas: Adicionar, “(1) Mídia- (2) Vídeo”, e no endereço da “(3) URL do Vídeo” devemos inserir o endereço do website onde está hospedado o vídeo.



56

Podemos configurar a “(4) Barra de Controle”, utilizando o autoplay (inicia automático quando acessar o website).

Também podemos alterar o formato da janela onde aparecerá o vídeo. Para fazer isso, clique sobre o vídeo e na janela Trocar Estilo. Clique em “(5) Personalize esse Vídeo”, e na janela “(6) Estilos Avançados” escolha um dos modelos que mais se adequar ao seu website. Após inserir e posicionar o vídeo, configure a margem e o “(7) tamanho dos cantos”.



57

E-commerce



58

Criando sua Loja Virtual

O carrinho de compras é uma excelente ferramenta dentro dos recursos do WIX. Além de podermos criar um website institucional de qualidade, esta opção permite agregar mais funcionalidades ao nosso.

Porém, os recursos de e-commerce do WIX não são gratuitos e, também, não é indicado para grandes empresas. Por exemplo, não é possível integrar o sistema de estoque da sua loja física com a loja virtual do WIX, ou seja, se você tem 1.000 produtos no sistema da sua loja física, terá de cadastrá-los todos novamente no seu website, o que pode inviabilizar a gestão e controle da sua loja física, causando retrabalho ao fazer o inventário.

A seguir vamos acompanhar a sequencia para criação do carrinho de compras.



59

Para iniciar a criação do carrinho de compras, clique em “Adicionar – Página”, e, na categoria loja On-line, selecione “(1) Loja e Carrinho”. No botão “(2) Configurações da página”, na janela Configurações de SEO, devemos deixar marcada a opção “(3) Ocultar do menu”, pois a página do carrinho de compras será acionada através da tela de pedidos e de outros links, não necessitando assim ficar visível no menu principal.

Removendo e adicionando categorias

Após adicionar a página, clique sobre a tela dos produtos e na janela “Galeria de Produto – (1) Gerenciar loja”. O WIX traz itens fictícios na sua loja de produtos. O primeiro passo a fazer é remover produtos e categorias existentes.

Na lista de Categorias, temos o botão “(2) Excluir”, para excluir uma categoria, e o botão renomear, para “(2) alterar” o nome da categoria, mas, abaixo, podemos também adicionar uma categoria nova. Para fazer isso, clique em “(3) Adicionar Categoria”.

Ao optar pela opção excluir categorias, clique em “(4) apagar” na janela de advertência.



60

Excluindo e adicionando produtos

Estando na janela de cadastro dos produtos, podemos ver que a plataforma WIX, já traz cadastrado automaticamente produtos fictícios, que deveremos apaga-los, antes de inserir os novos. Para fazer isso clique no ícone “(1) Selecione Todos”. Após selecionar, clique sobre o Botão “(2) Apagar”.

Cadastrando produtos

Para realizar o cadastro dos produtos, execute o seguinte procedimento.

Estando na janela de Gerenciar Loja, “(6) Adicionar Produtos”. Na janela Editar produtos, pode preencher dados como: “(4) Nome do Produto” – “(5) preço”, “(7) Categoria e imagem, Resumo e Detalhes”.



61

Inserindo imagem do produto

Outro item essencial na página de produtos é a imagem. Para adicionar uma imagem no nosso website, devemos clicar no botão “(8) Adicionar Mídia”. Em seguida, aparece uma tela onde podemos “(10) selecionar imagens de produtos” já existentes na nossa galeria de mídia. Para inserir as imagens que estão fora da galeria de imagens do WIX, devemos fazer isso através do botão “(9) Upload”, localizando as imagens no nosso computador e inserindo na Galeria de Mídia.



62

Selecionando múltiplas imagens

Após realizar o upload das imagens para nossa galeria de mídia, podemos selecionar múltiplas imagens para inserir na nossa página de produtos. Para fazer isso, dê “(12) apenas um clique” sobre a imagem da galeria (vai ficar azul), e, após selecionar as imagens, clique em “(14) Concluído”.

Adicionando informações do produto

Outra configuração importante da página de edição do produto é o detalhamento das informações que podemos inserir sobre cada um deles.

Para inserir esses detalhes, clique na aba Resumo e Detalhes.



63

Temos ainda a aba “DETALHES OPCIONAIS”, utilizada quando queremos que apareçam descontos sobre o preço de venda. O conteúdo que estiver no campo Fita vai aparecer sobre a imagem do produto, e o valor do preço de venda será destacado como preço final.

Configurando layout dos produtos

Nesta etapa, vamos configurar nossa página de vendas para melhorar a visualização dos produtos do nosso website. O WIX permite mostrar de 1 até 10 colunas/linhas de produtos, porém essa configuração poderá deixar a visualização de produtos prejudicada. Portanto, utilize poucas linhas ou colunas no seu carrinho de compras, pois, assim, as informações principais ficarão no topo da página e visíveis pelos usuários logo ao entrarem no website, não necessitando fazer a rolagem da tela para visualizar o conteúdo.

Independente da quantidade de produtos que vamos trabalhar, é preferível ter uma tela com no máximo três colunas. Quanto menos colunas, maior é a imagem que vai aparecer para nosso visitante, ou seja, mais linhas e mais colunas indicam tamanho de imagem menor.



64

Veja como ficou a disposição dos nossos produtos com 2 linhas e 3 colunas:



65

Definindo quantidade de linhas e colunas

Nesta etapa, já com os produtos cadastrados, devemos definir a quantidade de linhas e colunas que melhor se adapta ao nosso layout de tela, levando em consideração o que falamos anteriormente, ou seja, não adicionar muitas colunas e linhas.

A página “Faça seu pedido” está definida com duas linhas e três colunas, mas podemos alterar isso executando os seguintes procedimentos:

Estando na página “Loja e Carrinho”, clique sobre a janela de produtos, selecione “(1) configurações” e

defina a “(2) quantidade de Linhas e Colunas”. Passo 3



66

Definindo o estilo da página do produto

Ainda na página “Loja e Carrinho”, podemos alterar a tela onde o usuário vai finalizar a compra. É uma das últimas etapas de decisão do usuário, e é fundamental que essa página esteja com imagens e descrições impecáveis.

Nesta tela, podemos deixar selecionados os links das redes sociais, definir o tamanho do ícone e o espaçamento entre os títulos e botões.

Passo 3



67

Passo 1 Passo 2

Alterando configurações avançadas da página de produtos

Na tela de estilos da galeria de produtos, podemos alterar a fonte, o espaçamento e estilo das molduras.

Configuração do carrinho de compras

Para alterar as configurações do carrinho de compras, clique sobre a caixa do carrinho de compras e selecione “Configurações”.



68

Na janela Configurações do Carrinho, podemos alterar a altura e o texto que vai sobre a caixa do carrinho de compras.

Alterando as configurações do checkout

Nesta etapa, podemos alterar os textos e estilos e fontes do conteúdo da caixa de checkout.

Para fazer isso, devemos estar na janela de Configurações do Carrinho. Podemos alterar todos os títulos das colunas, como: Nome do Produto, Quantidade, Preço, Remover, Modo de imagem, Total, Subtotal e o Texto do Botão Checkout.

Passo 4

Passo 3



69

Inserindo link da imagem para o carrinho de compras

Nesta etapa, onde o usuário começa a visualizar os produtos do website, temos de criar links para direcioná-lo até a página de compras. Esses links podem estar no título da página, na descrição do texto ou em um botão para fazer o pedido e, principalmente, na imagem, que é o objeto que mais chama a atenção no website.

Na página de detalhes de cada produto do menu cardápio, vamos criar dois links que levam o usuário à tela de pedidos.



70

O primeiro link a adicionar é nas imagens rotativa dos produtos. Para isso, “(1) selecione a imagem” e clique em “(2) Organizar imagens”.

Na janela organizar ícones, clique em cada uma das imagens e selecione a opção “(3) Link para”. O nome da nossa página que nos leva à página de pedidos é “(4) Loja e Carrinho”

Definindo a forma de pagamento

O WIX traz por padrão a forma de pagamento em dólar, mas essa opção pode ser alterada através do botão opções do “WIXstore”.



71

Nesta aba, devemos selecionar uma das três formas de pagamento que o WIX oferece: PagSeguro, Paypal ou Google Checkout. Em todas elas, temos de fazer um cadastro na empresa conveniada, sendo que o mais simples de utilizar é o PagSeguro. Neste link, o WIX oferece todas as instruções para realizar essas configurações:

http://pt.wix.com/support/main/html5/o-editor-WIX/loja-online/usando-pagseguro-em-sua-loja-online

Calculando o valor do frete

Podemos configurar os custos de frete e peso na Aba “Frete”, no campo “Taxa de Administração”, é o custo que o cliente pagará pelo frete, porém esse campo é opcional, deixando ele em branco, significa que o valor do frete será gratuito. Caso seja inserido algum valor nesse campo, será somado





72

no preço total da compra. No caso do Delivey Fish, não vamos adicionar valor, para que a entrega seja gratuita.

Em caso de haver frete que tenha como medida o seu custo através do peso, devemos cadastrar o intervalo desse custo. Por exemplo, até 1kg, o valor é X, de 1kg a 5kg, o valor é Y.

“O intervalo de preço/peso é usado para calcular a taxa de frete que o consumidor irá pagar. Adicione o valor que deseja cobrar pelo frete para cada intervalo de preço/peso.

Nota: se você selecionar o intervalo de peso como método para o cálculo de frete, você deverá adicionar o peso de cada produto (em kilogramas) na tela de Editar Produto”.



73

Como adicionar um formulário de contatos

Formulário de contato pode ser a porta de entrada do usuário ou futuro cliente, e, através dele, é possível fazer contato via e-mail.

Para adicionar um formulário, vá até as barra de ferramenta lateral, clique em Adicionar página e “(1) selecione o modelo Contato – Formulário”. Dê um nome ao formulário na opção “(2) Nomeie sua página” e ajuste os demais componentes de acordo com o seu layout, colocando “(3) logotipo” e demais informações para que o usuário possa entrar em contato.

Inserindo códigos HTML

O construtor de sites do WIX também permite que você adicione códigos HTML/Embed, no nosso website, mesmo que você não tenha conhecimento em programação, eventualmente poderemos necessitar de alguma função que a plataforma WIX não dispõe. Nesse caso, podemos adicionar um código



74

HTML pronto, que outra pessoa ou empresa possa desenvolver para complementar o seu website.

Para adicionar códigos HTML, vá até a guia Adicionar Apps “(1) HTML”. Na caixa criada do código, você deve clicar sobre ela e ir até “Configurações”. Na janela Configurações do HTML , selecione o “(2) Modo – Código HTML”, e na caixa “(3) Código HTML/Código Embed” digite ou cole o código copiado. Após isso, clique em atualizar.

O código que usei para ilustrar esse exemplo tem o objetivo de mostrar uma mensagem em Java Script (Linguagem de Programação) para o usuário, ao entrar no website. A mensagem “(4) Faltam 191 dias para o Natal” é apenas um meio de explicar a função, pois ensinar códigos de programação não é o objetivo deste e-book, muito pelo contrário: a ideia é mostrar a você que é possível criar websites sem ter de ficar preso a códigos complexos.



75

Visualizando o website pronto

Após realizar as configurações do carrinho de compras e criar os hiperlinks para os outros itens do cardápio, sua página deverá estar com esta aparência.



76

Inserindo Apps

As Apps do WIX facilitam bastante na hora de incrementar o seu website. O ideal para quem está começando é utilizar Apps gratuitas. Veja que a grande maioria das Apps é Grátis/Premium. Isso significa que elas possuem um plano pago, caso o usuário as queira com todos os recursos. Apenas Apps com indicador Grátis é que realmente não têm cobrança.

Para adicionar uma App Market, vamos até a barra de ferramentas lateral App Market – Escolha uma categoria – Grátis.



77

Fazendo um upgrade no seu website

A principal diferença de um plano pago no WIX para um plano totalmente gratuito é que no plano pago você poderá conectar o seu website em um domínio próprio, por exemplo: no WIX, o endereço no nosso website modelo é www.deliveryfish.wix.com/deliveryfish, ou seja, ele é um subdomínio do WIX, mas, como optamos em ter um domínio próprio, registramos o nosso domínio no www.registro.br, e nosso endereço ficou: www.deliveryfish.net.br. A seguir, vou explicar como fazer um upgrade do website e escolher um dos planos pagos.

Estando na sua tela de edição do seu website no nosso caso do Delivery Fish, clique na barra superior de menu no botão “Upgrade”.

http://www.deliveryfish.wix.com/

http://www.registro.br/

http://www.deliveryfish.net.br/



78

O WIX oferece quatro tipos de plano pago: Conect Domain, Combo, Unlimited e eCommerce.

O Plano Conect Domain é o mais simples deles, mas continuam aparecendo os anúncios do WIX. O plano mais completo custa R$27,00 mensais, se você contratar para o período de 1 ano. Esse é o plano mais completo e com ele você poderá trabalhar com e-commerce, e ainda ganha um vale anúncio no Google Adense de US$ 125. Já está incluído o domínio e ainda economiza 35% menos do que no plano mensal.

Após escolher um dos planos de hospedagem, você deverá optar pela forma de pagamento, preenchendo o cadastro com os dados da entidade da qual será emitida a fatura. O plano de pagamento anual normalmente tem descontos na faixa de 31% a 45%.



79



80

Registrando um domínio

Registrar o domínio deveria ser um dos primeiros passos antes de começar o um negócio na web.

Existem várias empresas que são credenciadas para registrar domínios (Registro.br, Locaweb, Network Solutions etc.). Vou explicar a você os passos para efetuar seu registro no Registro.br. Eles têm um sistema de alertas e feedbacks muito eficientes, a o painel de configuração dos registros bem simples.

Você pode obter mais informações referente a outros hosts de domínio nesse endereço: http://pt.wix.com/support/main/flash/domínios-e-emails#dom%EDnios-e-emails/configurar-o-seu-dom%EDnio-registrado-em-outra-empresa?&_suid=137086810809307232190211707087.

Podemos acessar o RegistroBr nesse endereço: www.registro.br, mas, antes disso, podemos visualizar um vídeo que está disponível nesse endereço: http://www.youtube.com/watch?feature=player_embedded&v=Drhmd4r6wAo, ensinando, passo a passo, como efetuar o registro.

http://pt.wix.com/support/main/flash/domínios-e-emails#dom%EDnios-e-emails/configurar-o-seu-dom%EDnio-registrado-em-outra-empresa?&_suid=137086810809307232190211707087



http://www.youtube.com/watch?feature=player_embedded&v=Drhmd4r6wAo

http://www.youtube.com/watch?feature=player_embedded&v=Drhmd4r6wAo



81

Para realizar o cadastramento, clique no botão “(1) Cadastre-se” no Registro.br, preencha os dados do formulário e, após a finalização do cadastro, você irá receber na sua conta de e-mail (o mesmo informado no cadastro) um link de confirmação juntamente com o seu ID (código de acesso). Após clicar no link, você será direcionado para a tela do painel de registro. Também pode acessá-la pelo botão “(2) Acesso ao sistema”.



82

Preencha o ID e a senha para acessar o gerenciador de registros

Após a autenticação do sistema, você terá acesso ao painel administrativo, onde é possível fazer todo o gerenciamento dos domínios (adicionar, excluir etc.).

Estando no painel administrativo, podemos criar domínio para outras entidades, pessoas físicas ou jurídicas. Então, para cada registro novo de domínio, deverá ser feito um cadastro completo para quem nós estamos registrando, ou seja, o acesso ao registro.br permite criar domínio para diversas empresas se necessário.

Passo 4



83

Cadastrando um novo domínio

Para fazer o cadastro de um novo domínio, clique no botão “(1) Novo Domínio” e digite o nome do domínio que você deseja registrar. Optamos por escolher o “domínio com a extensão net.br”, por ser o único disponível.

Em seguida, preencha as informações sobre a entidade a ser cadastrada.



84

A empresa onde será hospedado seu website fornecerá o endereço de DNS. A maneira como ele é direcionado para o servidor depende de cada Host. No nosso exemplo, estamos utilizando o WIX, que é bem simples, bastando apenas preencher o endereço do servidor. O DNS primário é o ns1.wix.com e o secundário, ns2.wix.com.



85

Configurando o website para mobile

Você vai perceber, ao criar um Website no WIX, que ele possui um padrão próprio fixo no tamanho da tela. Essa medida é utilizada pelo fato de ela adequar-se em qualquer outro dispositivo com telas menores, no caso smartphones e tablets. Com isso, o seu website já vem configurado automático para ser acessado pelos dispositivos móveis. Para configurar para mobile, acesse a barra de ferramentas, “(1) Configurar”, “(2) Visualização Mobile” e “(3) Marque as opções” da janela Visualização mobile, de acordo com os dados que você quer que apareça no Google Maps, conforme mostram os passos 3 e 4 .



86

Caso queira habilitar as informações do “Meu perfil da sua rede social”, basta marcar essas opções para abrir uma nova janela com a lista das principais redes sociais. Essas informações são todas opcionais. Marque apenas as opções das redes sociais que você possui perfil.



87

Sua loja virtual no Facebook

Esse fantástico recurso também é um diferencial do WIX. O sistema oferece a possibilidade de integrar sua loja virtual criada no WIX com a sua página social do Facebook, sendo uma das tendências do mercado web ter seus produtos mais próximos dos seus clientes, ou seja, as redes sociais. Fazendo isso, é possível visualizar seu catálogo de produtos diretamente no Facebook. Esta é uma ótima opção de divulgação sem custo adicional, pelo menos por enquanto.

O aplicativo que faz isso é a App EasySocialShop. A seguir, vou mostrar como realizar essa tarefa.

Inicialmente, acesse o modo de edição da sua loja virtual no WIX, na página do carrinho de compras, clique sobre a galeria de produto, e na janela selecione “(1)Gerenciar Loja”. Após isso, clique na janela de produtos, e, na parte inferior do WIXstore, clique sobre o botão “(2) Receba uma loja de



88

Facebook GRÁTIS”. Em seguida, aparece a janela do EASYSocialShop, onde você deve clicar no botão “(3) Criar Loja”.

Adicionando a página

O recurso EASYSocialShop é a App do WIX, que executa a criação da loja no Facebook. Logo, aparecerá a janela “Adicionar guia de página”, “(2) selecione” para qual projeto você quer a loja e clique em “Adicionar aba da página”.

Em seguida, o sistema importa a nossa página de compras para o Facebook.



89

Podemos clicar sobre um dos produtos e editar algumas informações, por exemplo, onde existe o botão “BUY NOW”, nós substituímos por “COMPRAR”, e, clicando no botão “GERENCIAR A LOJA”, é possível editar as informações do produto. Após fazer as alterações necessárias, clique no botão “SALVAR ALTERAÇÕES”.



90

Criei meu website, e agora?

O principal motivo pelo qual as pessoas desejam ter um website, seja ele institucional ou pessoal, é para marcar a sua presença na web, como quem diz: “Eu existo”. Isso é o que chamamos de identidade digital, mas essa presença virtual que tem o propósito de ser positiva pode ser negativa também, dependendo da mensagem que você estiver passando para os visitantes, através do seu website.

Como falei anteriormente, um website não é um cartão de visitas: ele deve ter uma meta, um retorno para o seu negócio. Como diz Conrado Adolfo, no seu livro Você já tem um plano B, empresa boa é aquela que dá lucro. Este e-book tem o objetivo de fazer com que você inicie seu negócio na web, e o primeiro passo será obter o seu website. Ele aborda ainda outros assuntos importantes, como: o vocabulário web, os 10 passos para começar seu negócio na web, criando uma landing page, e integrando sua loja com o Facebook. Todos esses tópicos vão além do website.

Então, a dica que deixo, a partir de agora, é se apropriar das inúmeras leituras de marketing digital disponível na web. No website da www.infoebook.com.br e no meu blog, há vários posts e material para downloads totalmente gratuitos. Procure pôr em prática o que aprender nessa área, principalmente assuntos referentes a Adwords, Google Analytics e marketing digital.

No decorrer dos assuntos a seguir, vou passar vários links de especialistas na área de marketing focado para web. Vamos iniciar aprendendo sobre o fator-chave de um website que é a “landing page”.

Criando um landing page

Landing page, que também pode ser chamada de “página de entrada” ou “página de destino”, é a página foco de qualquer campanha de marketing digital, pois ela poderá ser responsável por grande parte das conversões do seu website. Quando falo em conversão, não necessariamente ele deve representar cifrões para sua campanha, mas pode significar a captura do um cadastro de um visitante, ou a assinatura de um serviço como curso por exemplo.



91

Normalmente, ela é alcançada através de um banner, e-mail marketing ou anúncio de link patrocinado, e, independente de como o usuário chegou na sua página, é importante ressaltar que a promessa do anúncio que trouxe esse usuário para o seu website seja exatamente aquela que o levou a realizar o clique, ou seja, se ele recebeu um e-mail marketing oferecendo um e-book grátis, você deve levá-lo à página em que está esse e-book, caso contrário estará fazendo uma propaganda enganosa para o seu cliente ou visitante.

O ideal é que essa página deixe o usuário com poucas opções de ação; ele pode voltar ou converter. Como falei anteriormente, o converter pode ser a captação do e-mail do usuário através do cadastro.

Estimule o usuário a uma ação no seu website

Na sua Landin page, você deve estimular o visitante a uma ação, a expressão “Call-to-action” quer dizer chamar a atenção, palavras ou frases podem produzir estímulos psicológico para os visitantes, veja abaixo frases que caracterizam isso.

As ações se caracterizam por um convite.

Vá correndo

Só hoje

Não perca tempo

Junte-se a nós

Venha fazer parte

Experimente



92

Uma landing page de que gosto muito é o do website da ignicaodigital.com.br do Érico Rocha. A abertura da página principal da Incognita, apresenta vários vídeos com depoimentos e entrevistas.

Embora a página de conversão não abra diretamente na página inicial, ela fica no topo do website com um nome curioso de “Sacada”.O usuário poderá voltar a página principal através do link do BLOG, fazendo um loop dentro do website.

Ainda no website da Ignição Digital, eventualmente aparece um banner que solicita o e-mail do usuário, oferecendo um vídeo gratuito. Nesse caso, o vídeo faz parte do um produto que ele está vendendo, por exemplo.



93

Abaixo, um modelo de landing page, onde aparecem quatro pontos relevantes que podem servir de persuasão ao visitante, e logo ao lado a opção de cadastro do usuário. Esse modelo é encontrado na maioria dos websites, com uma pequena mudança no layout, normalmente utilizamos apenas dois campos como nome e e-mail, pois estatisticamente, landing page com muitos campos, ocasiona alta rejeição por parte do usuário.



94

10 passos para começar um negócio na Web

Neste tópico, a intenção que eu tinha era de fazer uma sistematização de como criar um website, ou um produto destinado ao mercado digital. E, em um dos tópicos, seria descrever a sistematização que utilizei na criação deste e-book, do blog nilsongomes.com.br e do website infoebook.com.br, detalhando, inclusive, erros que cometi, para que você, leitor, não venha a cometê-los.

Mas lendo esse artigo do professor Marcos Morita, “10 passos para começar um negócio na Web”, achei conveniente compartilhá-lo com vocês, pois ele relata os 10 passos com mais detalhamentos. O artigo está postado na íntegra neste e-book.

Esse post pode ser encontrado com mais uma dezena de outros artigos referentes ao comércio eletrônico. Para acessá-lo, clique em http://www.marcosmorita.com.br/2011/02/empreendedorismo-virtual-10-dicas-para-abrir-um-negocio-na-web/.

“10 passos para começar um negócio na Web” (pelo professor Marcos Morita)

“Não são raros os exemplos de recém-milionários que estão fazendo fortuna em negócios na internet. De redes sociais a compras coletivas, este tipo de empreendedorismo tem ganhado cada vez mais espaço e conquistado novos adeptos. Aos que desejam se lançar a este novo desafio, seguem dicas essenciais para um empreendimento virtual.

1 – Defina o foco

Identifique eventuais necessidades não atendidas, que podem se tornar oportunidades lucrativas. Engana-se quem imagina que a competição no mundo virtual seja menor que em negócios reais. Apesar do pouco tempo, a rede atingiu com rapidez a maturidade. Há, todavia, muitos nichos promissores, principalmente para os empresários criativos que saibam tirar proveito da força da rede mundial. O segredo está no foco, evitando entrar

http://www.marcosmorita.com.br/2011/02/empreendedorismo-virtual-10-dicas-para-abrir-um-negocio-na-web/




95

em setores dominados por grandes empresas, cujo poder de barganha é infinitamente superior.

2 – Defina os produtos e/ou serviços

Escolha o modelo de negócios, assim como os produtos e/ou serviços que serão oferecidos, cuja seleção não se restringe ao espaço da prateleira ou gôndola. A vantagem da internet é que o estoque pode estar em local com menor custo por m2, como um galpão em alguma periferia ou até mesmo no próprio fornecedor. Há outros tipos de negócios virtuais nos quais o custo de estoque é praticamente zero, assim como a quantidade de itens infinita. As mercadorias estão dispostas em grandes servidores em formato digital – músicas em MP3, vídeos em MP4 e até livros em PDF.

3 – Crie uma identidade

É hora de definir o nome e a identidade visual de seu negócio – logotipo ou frase de efeito. Cuide para que seja fácil de ser lembrado, marcante, curto e que descreva a alma do negócio. Verifique junto aos órgãos responsáveis a disponibilidade do nome de sua preferência.

4 – Legalize

Procure um contador de sua confiança e registre a empresa legalmente. Não pense que negócios virtuais estão alheios à fiscalização e tributação. Busque profissionais qualificados para cuidarem da parte legal antes de dar início às negociações.

5 – Monte sua loja

Apesar do menor investimento, colocar um website no ar requer planejamento e cuidado. Como num comércio tradicional, o visual, os produtos e serviços disponíveis, a localização das mercadorias, o atendimento e as formas de pagamento são também muito importantes no comércio on-line. Tome alguns cuidados básicos para encantar clientes novos e reter antigos. E lembre-se que clientes virtuais são ainda mais impacientes que aqueles que trafegam nos corredores dos shoppings centers.



96

6 – Comprar ou alugar?

O empresário que se aventura no mundo virtual se depara com dilema similar. Há duas escolhas possíveis. Adquirir os próprios servidores, funcionários especializados e locais adequados ou contratar os serviços de um provedor de hospedagem, pagando tarifas mensais por pacotes pré-definidos. As grandes empresas em geral preferem investir quantias significativas em sua própria infraestrutura, garantindo que seus clientes consigam acessá-lo 100% do tempo. Empresas médias ou pequenas podem optar por alugar um espaço na “nuvem” de terceiros – tecnologia denominada de “cloud computing”.

7 – Garanta uma compra segura

São inúmeros os casos de fraudes na web, o que ainda inibe muitos potenciais clientes. Por isso, invista na segurança de seu website. Há diversas empresas que oferecem serviços de autenticação digital, dificultando a ação de indivíduos com más intenções.

8 – Dê opções de pagamento

Numa loja virtual, aceitar as diversas bandeiras e modalidades – crédito e débito; são obrigações. Apesar da pouca utilização, considere também as opções de depósito bancário e boletos. Analise ainda a possibilidade de recebimento do pedido, além da opção on-line. Alguns clientes ainda preferem utilizar telefone, fax ou e-mails. Abra enfim uma linha direta para que possam falar com algum funcionário, apesar da tentação em criar modelos estáticos e pré-determinados. A flexibilidade e negociação devem estar presentes mesmo no comércio virtual.

9 – No mundo virtual o “soft opening” é mais difícil

É comum estabelecimentos comerciais iniciarem sua operação com o chamado “soft opening” ou inauguração prévia. Durante este período sem alarde, os funcionários podem ser mais bem treinados e os processos e procedimentos estruturados, com um menor movimento de clientes. Na modalidade virtual, é possível fazer isso antes da colocação do website no ar.



97

Simule compras, teste links, configurações, confronte produtos, códigos, descrições, preços e erros gramaticais. Utilize PCs, Macs e diferentes navegadores – Internet Explorer e Mozilla. Caso tenha a versão para celular, faça o mesmo utilizando alguns modelos chaves de diferentes fabricantes. Enfim, simule os processos de devolução de produtos, assistência técnica e telemarketing.

10 – Divulgue

Como numa loja tradicional, os primeiros dias são sempre bem difíceis, até que as pessoas conheçam, experimentem, comentem e retornem, fechando o ciclo de fidelização. Para acelerar esse processo, é interessante fazer links patrocinados e comprar palavras ou frases que identifiquem seu negócio. Outra forma são os banners, pequenos anúncios que podem ser colocados em sites de grande circulação. Crie e mantenha sistemas de divulgação on-line e, se possível também em outras mídias, tais como televisão, revistas e jornais.

Seguindo estas dicas, o empresário virtual terá mais chances de sucesso em seu novo negócio. O mais importante é sempre seguir a fórmula S=P3, onde sucesso é = persistência, preparação e planejamento. Boa sorte!”.



98

Vocabulário web

Para você que está caindo de paraquedas nesse mundo virtual, selecionei alguns vocabulários mais usados na área de e-commerce e marketing digital. Vai ser mais fácil de entender o palavreado web, embora, neste e-book, tenham sido descritos de forma bem simples para um melhor entendimento.

Busca natural: chamada de busca orgânica quando o cliente não paga para ela estar lá. São mostrados normalmente os 10 melhores resultados.

Busca Paga (PPC): buscas pagas são aqueles anúncios que ficam no lado direito do Google, em torno de três anúncios, ou na parte superior. Esses anúncios são destacados com um fundo Bege, é o que chamamos de PPC (Pagar Por Clique - Paper Click)

Cliente: dando continuidade à nossa sequência lógica, o lead que virou prospect acabou de realizar uma compra de um produto ou serviço, e agora passou a ser um cliente. Cliente é alguém que já tenha efetuado alguma compra com você.

Clique: o próprio nome define o conceito. Esta métrica mostra quantas vezes nossos anúncios foram clicados.

Conversão: é aquilo que converteu sobre o total da sua meta. Para cada missão crítica, temos uma conversão. Por exemplo: se você tiver 100 visita no seu website e realizou 5 vendas, sua taxa de conversão foi de 5%. É apenas um exemplo. Há sites que objetivam mais de uma conversão. A primeira poderá ser o contato com o cliente e a segunda conversão ser a venda.

CPA (custo por aquisição): basicamente, significa o custo que eu tenho por cada visita no meu website, por exemplo: se eu tenho um CPC de R$1,00 e 100 visitaram meu website, dando um custo de R$100,00, e dessas 100 pessoas 4 converteram, o meu CPA será de R$25,00.

CPC (custo por clique): é o custo pago através dos links patrocinados. Quando anunciamos no Google, e o usuário faz uma pesquisa através do PPC



99

(Pesquisa Paga), esse clique que leva o visitante até nosso website é chamado de CPC.

CTR: clickthrough rate (taxa de retorno) é uma métrica utilizada, para saber se os anúncios pagos estão dando resultados. Ele calcula quantas vezes o seu anúncio foi exibido e a quantidade de pessoas que clicou nele, ou seja: a cada 100 exibições, 6 pessoas clicaram e acessaram o seu website, logo, o seu CTR foi de 6%. A fórmula é impressões/cliques.

Double opt-in ou opt-in: esse tipo de lista necessita de uma confirmação do opt-in por e-mail. É importante para a empresa de captura, pois garante que o e-mail do destinatário não é inválido ou ele coloque o e-mail de outra pessoa. A maioria das empresas nos envia um e-mail de confirmação.

Impressão: impressões significam quantas vezes os nossos anúncios foram exibidos, ou foram visualizados pelos usuários.

Leads: quando o usuário efetua uma pesquisa na web, por exemplo, e essa pesquisa leva esse visitante para o seu website, ele poderá acabar efetuando um cadastro para entrar em contato com você, seja para um orçamento, ou até mesmo para receber uma newsletter. Esse lead possível cliente deve ser qualificado pela equipe de atendente, onde irá entrar em contato com ele, e analisar se ele tem potencial para ser um possível cliente. Caso esse visitante seja qualificado como um possível cliente, e não apenas um visitante curioso, então ele se tornará um prospect.

Missão crítica: podemos chamar de meta, tanto a captura do visitante ou a realização de uma venda.

O WebShoppers : é um relatório semestral gratuito disponibilizado pela e-bit que analisa a evolução do comércio eletrônico, as mudanças de comportamento e preferências dos e-consumidores.

Opt-in: quando você se cadastra pra receber um newsletter ou um e-book, é esse tipo de lista que podemos enquadrar, ou seja, é a lista de permissão dada pelo próprio usuário que deseja receber e-mails de uma empresa.



100

Opt-out: é o tipo de lista em que o usuário não deu permissão. Exemplo comum são listas de e-mails à venda pela internet com 1 milhão de e-mails. Esses e-mails, que muitas vezes você recebe, de alguma empresa que você nunca fez contato, poderá ser um dos e-mails entre esse 1 milhão que foi vendido para terceiros, e eles estão enviando a você sem autorização sua.

Prospect: prospect é um Lead que foi qualificado, ou seja, ele não é um curioso que entrou em contato. O departamento sabe que ele tem condições de efetuar a compra ou fechar o contrato, então ele passou a ser um prospect.

ROI (return on investment): retorno sobre o valor investido. Falando em AdWords, normalmente é o valor que calculamos em uma campanha, e quanto esse investimento nos trouxe de lucro, ou seja, é a relação entre o dinheiro ganho ou perdido através de um investimento, e o montante de dinheiro investido.

Taxa de Rejeição (bounce rate): toda vez que acontece uma visita no seu website, e esse visitante vai embora sem acessar outra página, é considerada uma rejeição. Então, se 100 pessoas acessaram seu website e 30 delas entraram e saíram, sua taxa de rejeição foi de 30%. Websites com apenas uma página não é mensurada pelo Google.

Tipos de permissões em lista de e-mail

Visitas (Tráfego): a busca realizada através da busca natural ou através do PPC acaba levando o usuário a uma visita ao seu website, ao qual chamamos de tráfego.



101

Considerações finais

Grande parte dos links e conteúdos que disponibilizo no meu blog, é

referente ao marketing digital, no meu entendimento, de nada adianta ter

um bom produto se não souber como vender. É por isso que nos dias de

hoje, onde está em alta á propaganda nas redes sociais, fazer um marketing

de qualidade é o ponto chave para qualquer negócio.

Na web hoje, temos muito conteúdo gratuito sobre marketing digital,

blogueiros e especialistas nessa área, compartilham suas experiências

diariamente. Porém, a maioria desse conteúdo de marketing digital, está

focado para quem já tem um canal de comunicação com o consumidor, seja

ele um produto ou serviço através de websites.

Esse e-book tem o intuito de facilitar o trabalho do leigo na criação de

website ou e-commerce. Toda a parte prática desse e-book foi desenvolvida

sobre uma plataforma web, e não sobre um software em específico, ou que

tenha que realizar a instalação de algum aplicativo no seu computador. Por

isso acredito que, criar website gratuito utilizando a plataforma WIX, seja o

caminho mais curto para quem quer montar um negócio 100% on-line.



102

Dados estatísticos do e-commerce no Brasil

O que é a E-bit

E-bit é pioneira em realizar pesquisas com usuários do meio online para

analisar e entender hábitos e perfil do e-consumidor. Integrada ao Buscapé

Company em julho de 2007 sendo o “braço” de inteligência de mercado da

empresa, a E-bit é referência na divulgação de informações do e-commerce.

Todos os anos, a empresa gera o relatório Webshoppers, em que as

informações extraídas das pesquisas aplicadas são transformadas em

valiosas informações que auxiliam os grandes varejistas a entenderem o

perfil de seus usuários e também as dificuldades que os mesmos têm em

relação a seus sites.

Segue abaixo alguns dados estatísticos, referente ao uso da internet no Brasil

desde o ano de 2001.

Faturamento anual do e-commerce no Brasil 2001 á 2012



103

Tabela de evolução das vendas no Natal 2001 á 2012

Gráfico estatístico de e-consumidores no Brasil 2001 á 2012



104

Escolaridade - Quantidade de Transações

Faixa etária e quantidade de transações

Perfil do Consumidor - eBit



105

Referências

CAVALLINI, Ricardo. O Marketing depois de amanhã. São Paulo:Digerati

Books, 2006.

TELLES, André. A revolução das mídias sociais. São Paulo: M.Books do Brasil

Editora Ltda, 2011.

CONRADO, Adolfo. Você já tem um plano B.

http://www.conrado.com.br/PlanoB

websites usados como fontes e referências

http://pt.wix.com/support/main/html5/o-editor-wix/loja-online/faq-loja-

online

http://www.conrado.com.br

http://www.8ps.com

http://www.nordesteseo.com.br

http://www.quarteldigital.com.br

http://www.marcosmorita.com.br/2011/02/empreendedorismo-virtual-10-

dicas-para-abrir-um-negocio-na-web/

http://www.e-commerce.org.br/empreendedorismo_web.php

http://www.registro.br

http://www.infoebook.com.br

http://www.nilsongomes.com.br

http://www.lojaintegrada.com.br (Porta de e-commerce)

http://deliverifish.wix.com/deliveryfish (Website exemplo do e-book)

http://www.conrado.com.br/PlanoB

http://pt.wix.com/support/main/html5/o-editor-wix/loja-online/faq-loja-online

http://pt.wix.com/support/main/html5/o-editor-wix/loja-online/faq-loja-online

http://www.conrado.com.br/

http://www.8ps.com/

http://www.nordesteseo.com.br/

http://www.quarteldigital.com.br/



http://www.e-commerce.org.br/empreendedorismo_web.php

http://www.registro.br/

http://www.infoebook.com.br/

http://www.lojaintegrada.com.br/

http://deliverifish.wix.com/deliveryfish



106

Sobre o autor

Nilson Gomes

Nasceu na cidade de Giruá-RS em 1969. Morou até os 17 anos no interior da cidade, no distrito de São Paulo da Tunas. Trabalhou durante 6 anos como pintor de carroçarias, e aos 25 anos formou-se Técnico em Processamento de

Dados. Em 1995, abriu sua escola de informática, a “NOVATEC INFORMÁTICA”, em 2001 passou em concurso público para Técnico em Informática para a Prefeitura de Giruá. Oito meses depois, em 2002, assumiu outro concurso em nível estadual pela Associação Sulina de Crédito e Assistência Rural. Sua atuação hoje é na área de suporte e treinamento a usuários (HelpDesk).

Em 2012, graduou-se no Curso de Licenciatura em Computação pelo IFF – Instituto Federal

Farroupilha – Campus Santo Augusto/RS). Atualmente, é Pós-graduando no Curso de Especialização em Educação Aplicada com Ênfase em Software Livre na mesma instituição.

Nas horas vagas, é pesquisador na área de comércio eletrônico e marketing digital, focando seu trabalho para estratégia de negócios on-line, com o objetivo principal de ajudar pequenas e médias empresas a vender seus produtos e serviços na Web com mais resultados.

E-Book %28Aprenda a Criar Websites%29

Documents

Transcript of E-Book %28Aprenda a Criar Websites%29