MANUAL PÓS-CRIAÇÃO DO SITE PARA UTILIZAÇÃO DO SISTEMA DE EDIÇÃO

Esta página é de uso exclusivo para os clientes que desejam inserir textos, fotos e vídeos em suas páginas após terem recebido e aprovado a proposta de criação de site desenvolvido pela "Site Por R$ 500,00".
1. Acessando o sistema de edição
Para utilizar o sistema de edição você deve instalar nossa extensão em seu navegador Google Chrome para que ele se comunique com o servidor de seu site e lhe permita gerenciar todo o seu conteúdo. Assim, antes de mais nada, você deve limpar o cache de seu navegador. Esse procedimento é bastante fácil de ser feito, basta pressionar agora mesmo as teclas CTRL+SHIFT+DEL (todas ao mesmo tempo). Na tela seguinte faça o seguinte: selecione a opção "o começo" na primeira caixa, marque todas as demais caixas e clique no botão "Limpar dados de navegação". Aguarde alguns segundos/minutos até que o procedimento seja finalizado. Feito isso clique aqui para instalar agora mesmo nossa extensão em seu navegador Google Chrome, não levará nem 10 segundos!
Agora abra a URL de seu site no navegador Google Chrome e aguarde seu carregamento. Clique então no ícone localizado no topo à direita de seu navegador. Digite sua senha de edição e clique no botão ENTRAR. Pronto! Agora basta clicar no botão EDITAR para dar início à edição de seu site.
2. Abrindo o sistema de edição
Se tudo estiver certo o sistema de edição será exibido neste momento com uma aparência semelhante a da imagem abaixo.
Aparência do sistema de edição após a criação do site
Perceba que o sistema é muito parecido com o editor Microsoft Word: há diversos botões para alterar a cor da letra e seu tamanho, inserir negrito ou qualquer outro tipo de formatação, alterar o alinhamento e disposição dos textos, inserir tabelas e até mesmo para a criação de links. Aproveite que o sistema de edição está aberto e digite algumas frases, altere a formatação... Tente fazer algo parecido com o exemplo abaixo, explorando alguns dos recursos já conhecidos.
Criação de um exemplo dentro do sistema de edição
Após finalizar inserção de algumas frases experimente clicar no botão "Salvar página" para visualizar o resultado final dentro de seu próprio site. Simples assim: tudo que você acabou de digitar já está disponível on-line para que qualquer pessoa com acesso ao link de seu site já possa visualizar, instantaneamente.
3. Inserindo imagem
Para inserir uma imagem antes de mais nada é importante que você tenha a imagem armazenada em seu computador. Além disso a imagem deve estar no formato *.gif, *.jpg, *.jpeg ou *.png. Esses são os formatos mais comuns e funcionam muito bem em qualquer tipo de computador ou dispositivo móvel.
Então se você possuir uma imagem basta clicar no botão "Ações" e selecionar a opção "Inserir imagem" conforme imagem abaixo.
Como inserir uma imagem dentro do site
Logo após você selecionar a opção "Inserir imagem" o sistema automaticamente exibirá uma tela com todos os arquivos de seu computador. É neste momento que você deve procurar pela imagem desejada, selecioná-la e clicar no botão "Abrir" ou "Open" (cada navegador exibe um nome diferente para esse botão) para que o sistema faça o carregamento da imagem. É aconselhável que a imagem não possua mais de 100Kb pois futuramente isso fará com que seu site demore exibir todo o conteúdo, o que é bastante inconveniente.
Como selecionar uma imagem de seu computador
Se tudo der certo o sistema fará o envio da imagem para o servidor, exibindo o progresso do carregamento. Ao final o sistema apresentará uma mensagem indicando que tudo ocorreu normalmente e exibirá a imagem dentro da área de edição. Se você quiser inserir diversas imagens ao mesmo tempo basta selecioná-las de uma única vez, clicar no botão "Abrir" ou "Open" e aguardar o carregamento delas.
4. Inserindo/Removendo link interno (subpágina) ou externo
Para criar um link apontando para uma página interna de seu próprio site (subpágina) ou para um site externo você precisa antes de mais nada digitar uma frase dentro da área de edição como por exemplo "Clique aqui" ou "Clique aqui para abrir o Google" que servirá para ativar o redirecionamento do usuário. Agora deve-se selecionar essa frase com o mouse, clicar em "Ações" e selecionar a opção "Inserir/Remover link" conforme imagem abaixo.
Inserir ou remover link
Após selecionar a opção "Inserir/Remover link" o sistema questionará para onde o link deve apontar. Neste momento você tem 3 opções:
  • não digitar nada. Nesse caso se houver algum link previamente inserido o sistema irá removê-lo;
  • digitar um link começando com "http://". Nesse caso quando um usuário clicar nesse link o sistema irá abri-lo em nova janela/aba já que trata-se de um link externo;
  • digitar um nome de controle interno para sua subpágina que não comece com "http://". Esse nome que você digitar servirá para que futuramente, quando existirem centenas de páginas em seu site, você possa manter tudo organizado e fácil de encontrar. É importante que você digite um nome único para a subpágina que você deseja criar, caso contrário, se o nome já tiver sido usado, quando o usuário clicar nesse link ele será redirecionado para uma página que já havia sido criada no passado com o mesmo nome. Isso é útil quando deseja-se redirecionar o usuário para uma página interna já existente, entretanto se você deseja redirecionar o usuário para uma página em branco é importante que o nome digitado seja único;
5. Inserindo arquivo como link para download
Se você possui um arquivo como por exemplo uma planilha, documento do Word ou até mesmo uma foto que desejas disponibilizar para download dentro de seu site é importante que antes de mais nada você tenha esse arquivo disponível dentro de seu computador. Feito isso você deve digitar uma frase dentro da área de edição como por exemplo "Clique aqui" ou "Clique aqui para baixar o arquivo" que servirá para ativar o download do arquivo. Agora deve-se selecionar essa frase com o mouse, clicar em "Ações" e selecionar a opção "Inserir arquivo como link" conforme imagem abaixo.
Inserir arquivo como link
Logo após você selecionar a opção "Inserir arquivo como link" o sistema automaticamente exibirá uma tela com todos os arquivos de seu computador. É neste momento que você deve procurar pelo arquivo desejado, selecioná-lo e clicar no botão "Abrir" ou "Open" (cada navegador exibe um nome diferente para esse botão) para que o sistema faça o carregamento do arquivo. Quanto maior for o tamanho do arquivo mais tempo você deverá aguardar até o carregamento ser finalizado.
Como selecionar um arquivo de seu computador
Se tudo der certo o sistema fará o envio do arqiuvo para o servidor, exibindo o progresso do carregamento. Ao final o sistema apresentará uma mensagem indicando que tudo ocorreu normalmente.
6. Incorporando mapa do Google Maps, vídeo do Youtube ou qualquer código externo
Se você deseja exibir um mapa do Google Maps dentro de seu site, se desejas incorporar um vídeo do Youtube para que os usuários possam tocá-lo sem sair de seu site ou se simplesmente desejas inserir um código externo (pode ser qualquer código HTML contendo CSS ou até mesmo Javascript) o procedimento é bem simples: basta você localizar o código-fonte referente ao mapa, vídeo ou código externo e incorporá-lo dentro de seu site clicando no botão "Ações" e selecionando a opção "Inserir código HTML" conforme imagem abaixo.
Inserir código HTML
Após selecionar a opção "Inserir código HTML" o sistema solicitará que você digite/cole o código-fonte referente ao mapa, vídeo ou código externo. É importante avisar que o código-fonte será inserido exatamente onde você havia clicado previamente com o mouse, ou seja, se você clicou no topo da área de edição antes de clicar no botão "Inserir código HTML" então o mapa ou vídeo aparecerá exatamente nessa posição. Por outro lado se você havia clicado em outra região da área de edição será naquela exata posição que o sistema incorporará o código-fonte recém digitado/colado.
Para facilitar a localização do código-fonte fornecido pelo Google Maps demonstramos abaixo onde você pode encontrá-lo.
Como incorporar um mapa dentro do site 1
Como incorporar um mapa dentro do site 2
Como incorporar um mapa dentro do site 3
Para facilitar a localização do código-fonte fornecido pelo Youtube demonstramos abaixo onde você pode encontrá-lo.
Como incorporar um vídeo dentro do site
7. Inserindo galeria de imagens
Para inserir uma galeria de imagens antes de mais nada é importante que você tenha todas as imagens armazenadas em seu computador. Além disso as imagens devem estar no formato *.gif, *.jpg, *.jpeg ou *.png. Esses são os formatos mais comuns e funcionam muito bem em qualquer tipo de computador ou dispositivo móvel. Não se preocupe quanto ao tamanho da imagem já que o sistema automaticamente redimesionará cada imagem individualmente para que caiba perfeitamente dentro da galeria.
Então se você já possui as imagens basta clicar no botão "Ações" e selecionar a opção "Inserir galeria de imagens" conforme imagem abaixo.
Como inserir uma galeria de imagens dentro do site
Logo após você selecionar a opção "Inserir galeria de imagens" o sistema automaticamente exibirá uma tela com todos os arquivos de seu computador. É neste momento que você deve procurar pelas imagens desejadas, selecioná-las e clicar no botão "Abrir" ou "Open" (cada navegador exibe um nome diferente para esse botão) para que o sistema faça o carregamento de cada imagem.
Como selecionar uma imagem para inserir na galeria
Se tudo der certo o sistema fará o envio das imagens para o servidor, exibindo o progresso de carregamento para cada uma. Ao final o sistema apresentará uma mensagem indicando que tudo ocorreu normalmente e exibirá as imagens uma ao lado da outra dentro da área de edição. A galeria propriamente dita só irá ser exibida após você clicar no botão "Salvar página". É importante perceber que dentro do sistema de edição as imagens aparecem lado a lado para permitir que você remova as indesejadas e inclusive se quiseres alterar a ordem de exibicação basta "arrastar" a imagem selecionada (utilizando o mouse) para a posição final.
Caso você tenha acabado de inserir as imagens da galeria mas tenha esquecido de algumas basta selecionar novamente a opção "Inserir galeria de imagens" e carregar somente as novas imagens. O sistema automaticamente adicionará essas imagens ao final da galeria.
8. Cadastrando produtos na loja virtual
Para cadastrar um produto na loja virtual, antes de mais nada, você deve informar ao sistema em qual página interna do site esse produto aparecerá. Suponha que sua loja virtual seja sobre BOLSAS e que neste momento você quer cadastrar todas as BOLSAS DE COURO; procure no menu de links de seu site (geralmente fica na parte superior do site) o nome do link onde devem aparecer as BOLSAS DE COURO. Suponha que no menu de links já exista um link com o nome BOLSAS DE COURO. Clique nesse link para que essa página seja aberta.
Se você está começando a cadastrar os produtos então quando abrires o link BOLSAS DE COURO deverá aparecer uma página sem conteúdo interno. Entre no modo de edição dessa página. Após entrar no modo de edição clique na área de conteúdo interna do site para que ela receba foco. Logo após isso a barra de ferramentas de edição aparecerá na lateral esquerda inferior de sua tela. Vá no botão "Loja virtual -> Inserir modelo com vários produtos". Veja na imagem abaixo a localização desse botão.
Como inserir vários produtos no site
Logo após isso o sistema inserirá na sua tela um modelo de exemplo com 2 produtos: produto1 e produto2. Será provavelmente algo parecido com a imagem abaixo:
Como inserir vários produtos no site, modelo
Fique à vontade para alterar a frase "NOME DA CATEGORIA DO PRODUTO" para algo como "BOLSAS DE COURO". Após isso vamos a parte mais importante que é o nome dos produtos. Perceba que na imagem de exemplo acima o sistema inseriu 3 colchetes abertos "[[[", depois inseriu o nome de 2 produtos separados por ponto-e-vírgula e inalmente o sistema inseriu 3 colchetes fechados "]]]". O nome desses produtos ("produto1" e "produto2") não aparecerá para os usuários de seu site porém os buscadores, como o Google, utilizarão esse nome para ajudar a indexar seu site. Então sugerimos que você utilize palavras significativas que certamente ajudarão no ranqueamento de seu site. Como exemplo, neste momento, mostraremos como cadastrar 3 bolsas de couro: Bolsa de Couro de Cobra, Bolsa de Couro de Jacaré e Bolsa de Couro Bovino. Portanto, a tela ficará da seguinte forma:
Exemplo de vários produtos
Perceba que os nomes dos 3 produtos estão separados por ponto-e-vírgula além de que há 3 colchetes abertos no início e 3 colchetes abertos no fim. Isso serve para indicar para o sistema que dentro dos colchetes ele deverá exibir os 3 produtos, tudo na mesma página. Aproveite agora para clicar no botão salvar. Na tela seguinte você verá algo como a imagem abaixo.
Exemplo de produtos não cadastrados
Perceba que o sistema exibirá 3 colunas (referentes aos 3 nomes que foram digitados entre colchetes) e informará que os produtos ainda não estão cadastrados. Escolha um dos produtos que ainda não está cadastrado e clique na frase Clique aqui para cadastrá-lo. Assim que você clicar nesse link o sistema redirecionará você para uma página em branco onde você poderá cadastrar esse produto. Nessa página em branco entre no modo de edição. Após entrar no modo de edição clique na área de conteúdo interna do site para que ela receba foco. Logo após isso a barra de ferramentas de edição aparecerá na lateral esquerda inferior de sua tela. Vá no botão "Loja virtual -> Inserir produto". Veja na imagem abaixo a localização desse botão.
Cadastrar produto
Logo após isso o sistema inserirá na sua tela um modelo de exemplo para esse produto. Será provavelmente algo parecido com a imagem abaixo:
Como inserir vários produtos no site
As partes que aparecem com fundo amarelo são as partes mais importantes e que você deve editar com muito cuidado. Você não deve apagar essas partes amarelas pois o sistema acusará erro mais adiante. Então aproveite nessa tela para inserir pelo menos 5 informações importantes: o título do produto, pelo menos uma foto, uma descrição, o preço e o peso do produto (que será utilizado para o cálculo do frete). Após inserir essas informações salve a página e o produto aparecerá cadastrado corretamente. Inclusive se você acessar o link BOLSAS DE COURO (onde os 3 produtos haviam sido cadastrados) verás que numa das 3 colunas o produto agora aparecerá cadastrado e nas outras 2 colunas você deverá realizar o mesmo procedimento detalhado acima para cadastrar os outros 2 produtos.
Para cadastrar todos os demais produtos do site o procedimento é basicamente o mesmo, tudo é feito de forma rápida e prática.