LayoutLayout

Layout BásicoLayout Básico

Para alterar o layout você deve ir na Para alterar o layout você deve ir na opção do menu “Loja / Layout” do opção do menu “Loja / Layout” do administrador da sua loja.administrador da sua loja.

As alterações poderão ser As alterações poderão ser visualizadas diretamente em sua visualizadas diretamente em sua loja.loja.

Explicação da TelaExplicação da Tela

Imagens PrincipaisImagens Principais

Alterar cores das fontes Alterar cores das fontes e planos de fundose planos de fundos

Opção para colocar html Opção para colocar html / Scripts / Banner/ Scripts / Banner

Imagens PrincipaisImagens Principais

Você pode usar uma imagem de logo e/ou uma imagem no Você pode usar uma imagem de logo e/ou uma imagem no topo.topo.

Aconselhamos o uso de imagens leve de preferência .gif ou Aconselhamos o uso de imagens leve de preferência .gif ou .jpeg. Pode-se ainda usar animações em flash..jpeg. Pode-se ainda usar animações em flash.

Sempre utilize imagens com no máximo 70 pixels de Sempre utilize imagens com no máximo 70 pixels de altura. Caso ultrapasse, a imagem será redimensionada altura. Caso ultrapasse, a imagem será redimensionada para a altura de 70 pixels e a largura proporcional a essa para a altura de 70 pixels e a largura proporcional a essa redução. Isso ocorre para que a imagem não fique muito redução. Isso ocorre para que a imagem não fique muito pesada. pesada. Se desejar usar uma imagem com altura maior, esta deve Se desejar usar uma imagem com altura maior, esta deve ser transformada para flash.ser transformada para flash.

Se não for usado imagem de topo, o título da loja assume Se não for usado imagem de topo, o título da loja assume essa posição. Você pode editar o título através do menu essa posição. Você pode editar o título através do menu Loja / Dados.Loja / Dados.

Cores da LojaCores da Loja Você pode alterar as cores de Você pode alterar as cores de

plano de fundo e das fontes, plano de fundo e das fontes, podendo assim deixar a sua podendo assim deixar a sua loja a seu gosto.loja a seu gosto.

Ex: de alterações possíveis:Ex: de alterações possíveis: 1 - Fundo da Pagina 1 - Fundo da Pagina 2 - Fonte 2 - Fonte Titulo PrincipalTitulo Principal

3 - Fundo 3 - Fundo 4 - Fonte 4 - Fonte

Menu HorizontalMenu Horizontal 5 - Fundo 5 - Fundo 6 - Fonte 6 - Fonte

Menu VerticalMenu Vertical 7 - Fonte 7 - Fonte

Titulo da PáginaTitulo da Página 8 - Fonte 8 - Fonte

Caixa de TextoCaixa de Texto 9 - Topo 9 - Topo 10 - Fonte do Topo 10 - Fonte do Topo 11 - Fundo 11 - Fundo 12- Fonte 12- Fonte

13- Borda 13- Borda

HTML / Script / BannerHTML / Script / Banner Com esses campos você pode Com esses campos você pode

criar Banner, utilizar Scripts criar Banner, utilizar Scripts ou HTMLs:ou HTMLs:

Exemplos de Scripts:Exemplos de Scripts: Contador de VisitaContador de Visita Atendimento On-line (msn e Atendimento On-line (msn e

skype)skype) Usuários on-lineUsuários on-line Troca de Banner de Troca de Banner de

PublicidadePublicidade Banner de Produtos e Banner de Produtos e

PromoçõesPromoções Links Patrocinados (ex: Links Patrocinados (ex:

Google)Google) Entre outrosEntre outros

Nos próximos slides teremos Nos próximos slides teremos um passo a passa de como um passo a passa de como inserir banner.inserir banner.

Criando um BannerCriando um BannerPara colocar uma imagem ou banner adicional no site:É necessário que a imagem esteja na internet. Caso a imagem ainda não esteja, você deve enviar a imagem para nossos servidores através do menu Loja / Arquivos (FTP) / Novo Cadastro.

Use a descrição para identificar o arquivo: o ideal é que seja apenas uma palavra, se for mais não use espaços. Também não utilize caracteres especiais (acento, ‘ç’).

Após cadastrar, clique no botão “Voltar ao Gerenciador”

Você deve encontrar o arquivo que enviou e copiar o endereço completo (http://www.lojasv...) que está na 3ª coluna (conforme a figura).

Criando um Banner Criando um Banner (Continuação)(Continuação)

No menu Loja / Layout existem 5 campos onde podem ser colocados scripts, banners e Htmls.

Escolha um dos campos e coloque o html para exibir a imagemExemplo: <img src="caminho_completo_da_imagem" />

O caminho_completo_da_imagem é o endereço que você copiou na tela anterior.Exemplo: <img src="http://www.lojasvirtuais-br.com.br/adm/arquivo/2_banner_atendimento.jpg" />

Criando um Banner Criando um Banner (Continuação)(Continuação)

Exemplos de ScriptsExemplos de ScriptsVocê pode usar scripts em JavaScript na sua loja. Exemplos: relógio, quantidade de usuários on-line, contador de visita, atendimento on-line, entre outros.

Todos esses scripts você encontra prontos na internet. Só é necessário encontrar um que combine com sua loja.

Para colocar os script você deve entra na opção do menu Loja / Layout do administrador de sua loja. Você deve optar por uma das cinco posições para colocar o código.

Em cada campo de script podem ter inúmeros scripts, um abaixo do outro.

Exemplos de Scripts:

Atendimento por MSN e SkypePara utilizar é necessário alterar o que está em destaque, para seus dados.

<map name="FPMap0"><area target="_blank" href="skype:lojasvirtuais-br " shape="rect" coords="3, 234, 159, 266"><area target="_blank" href="msnim:chat?contact=atendimento@msn.com.br" shape="rect" coords="3, 195, 158, 229"><area shape="rect" coords="85,270,112,287" href="http://get.live.com/messenger/config" target="_blank" /><area shape="rect" coords="119,273,152,286" href="http://www.skype.com/intl/pt/" target="_blank" /></map><img src="http://www.lojasvirtuais-br.com.br/adm/arquivo/2_banner_atendimento.jpg" usemap="#FPMap0" border="0">

Só MSN <p align="center"><a href="msnim:add?contact=fulano@msn.com"><img border="0" src="http://www.lojasvirtuais-br.com.br/adm/arquivo/1_MSN1.gif"></a></p>

Contador de VisitaPodemos indicar o site: http://www.2w.com.br/contador-de-visitas-acessos-gratis.htmlEles oferecem diversos scripts de contadores, podendo alterar cores e estilos.

Layout AvançadoLayout Avançado

Através dessa opção você pode Através dessa opção você pode alterar o "esqueleto" da loja, não alterar o "esqueleto" da loja, não se prendendo ao layout se prendendo ao layout padronizado que disponibilizamos.padronizado que disponibilizamos.

Essa opção você encontra no Essa opção você encontra no menu Loja / Layout Avançado.menu Loja / Layout Avançado.

Layout Avançado (Tela)Layout Avançado (Tela)Instruções gerais.

Link para editar a parte desejada. Pode ser Topo, Rodapé, Barra Lateral Esquerda ou Direita.

Aqui você informa se deseja usar nossa opção padrão ou seu modelo personalizado.Você pode realizar todas as alterações desejadas, clicando em “Pré-Visualizar” para verificar como ficará sua loja. Após validação, selecionar a opção “Usar Layout Personalizado.

Ilustração e links.

Você pode editar qualquer uma Você pode editar qualquer uma das partes:das partes:- Topo- Topo- Barra Lateral Esquerda- Barra Lateral Esquerda- Barra Lateral Direita- Barra Lateral Direita- Rodapé - Rodapé

Só é necessário clicar no link Só é necessário clicar no link correspondente.correspondente.

Layout Avançado Layout Avançado (Editando)(Editando)

As palavras com colchetes As palavras com colchetes (“[palavra]” ) serão substituídas (“[palavra]” ) serão substituídas pela programação pela programação correspondente.correspondente.

Ex: Ex: [menu_produto] será substituído [menu_produto] será substituído pelo menu da sua loja pelo menu da sua loja (Departamento, Categoria e (Departamento, Categoria e Produto), conforme imagem ao Produto), conforme imagem ao lado.lado.

Importante:Importante:

O botão O botão “Restaurar Padrões”“Restaurar Padrões” serve para voltar as alterações serve para voltar as alterações para o padrão inicial.para o padrão inicial.Após realizar alguma alteração, Após realizar alguma alteração, você deve clicar em “você deve clicar em “Salvar Salvar AlteraçõesAlterações”, assim será possível ”, assim será possível visualizar com a opção “Pré-visualizar com a opção “Pré-Visualizar”.Visualizar”.

Layout Avançado Layout Avançado (Editando)(Editando)Após clicar na opção que deseja editar, aparecerá uma nova tela com o editar HTML.

Nesse exemplo, clicamos no link para editar a “Barra Lateral Esquerda”.Você pode editar usando a interface gráfica ou diretamente no código fonte; nesse caso é preciso clicar no botão “Código Fonte”.

Tags que podem ser utilizadas.

Layout Avançado Layout Avançado (Tags que podem ser (Tags que podem ser

utilizadas)utilizadas)Tag Descrição

[html_script_topo][logo][titulo_ou_banner][menu_pagina_internas] [menu_produto][caixa_novidade][html_banner_script_esquerda][caixa_login][caixa_informacoes][qtde_de_itens_no_carrinho][caixa_ofertas][html_banner_script_direita][rodape][html_2_rodape]

HTML / Script/ Banner TopoLogo da LojaTítulo ou Banner da Loja Menu das Paginas InternasMenu de ProdutosCaixa de NovidadesHTML / Script/ Banner EsquerdaCaixa de Login

Caixa de Informações Qtde de Itens no Carrinho de CompraCaixa de OfertaHTML / Script/ Banner DireitaRodape (endereço, telefone...)HTML / Script/ Banner Rodapé