Layout

1. Layout

2. Layout Básico • Para alterar o layout você deve ir na opção do menu “Loja / Layout” do administrador da sua loja. • As alterações poderão ser visualizadas diretamente em sua loja.

3. Explicação da Tela Imagens Principais Alterar cores das fontes e planos de fundos Opção para colocar html / Scripts / Banner

4. Imagens Principais • Você pode usar uma imagem de logo e/ou uma imagem no topo. • Aconselhamos o uso de imagens leve de preferência .gif ou .jpeg. Pode-se ainda usar animações em flash. • Sempre utilize imagens com no máximo 70 pixels de altura. Caso ultrapasse, a imagem será redimensionada para a altura de 70 pixels e a largura proporcional a essa redução. Isso ocorre para que a imagem não fique muito pesada. Se desejar usar uma imagem com altura maior, esta deve ser transformada para flash. • 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 Loja / Dados.

5. Cores da Loja • Você pode alterar as cores de plano de fundo e das fontes, podendo assim deixar a sua loja a seu gosto. • Ex: de alterações possíveis: • 1 - Fundo da Pagina • 2 - Fonte • Titulo Principal • 3 - Fundo • 4 - Fonte • Menu Horizontal • 5 - Fundo • 6 - Fonte • Menu Vertical • 7 - Fonte • Titulo da Página • 8 - Fonte • Caixa de Texto • 9 - Topo • 10 - Fonte do Topo • 11 - Fundo • 12- Fonte • 13- Borda

6. HTML / Script / Banner • Com esses campos você pode criar Banner, utilizar Scripts ou HTMLs:Exemplos de Scripts: • Contador de Visita • Atendimento On-line (msn e skype) • Usuários on-line • Troca de Banner de Publicidade • Banner de Produtos e Promoções • Links Patrocinados (ex: Google) • Entre outros • Nos próximos slides teremos um passo a passa de como inserir banner.

7. Criando um Banner Para 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”

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

9. Criando um Banner (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 imagem Exemplo: <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" />

10. Exemplos de Scripts Você 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 Skype Para 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><imgsrc="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"><imgborder="0" src="http://www.lojasvirtuais-br.com.br/adm/arquivo/1_MSN1.gif"></a></p> Contador de Visita Podemos indicar o site: http://www.2w.com.br/contador-de-visitas-acessos-gratis.htmlEles oferecem diversos scripts de contadores, podendo alterar cores e estilos.

11. Layout Avançado Através dessa opção você pode alterar o "esqueleto" da loja, não se prendendo ao layout padronizado que disponibilizamos. Essa opção você encontra no menu Loja / Layout Avançado.

12. 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.

13. Layout Avançado (Editando) Você pode editar qualquer uma das partes:- Topo- Barra Lateral Esquerda- Barra Lateral Direita- Rodapé Só é necessário clicar no link correspondente.

14. Tags que podem ser utilizadas. Layout Avançado (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”. As palavras com colchetes (“[palavra]” ) serão substituídas pela programação correspondente. Ex: [menu_produto] será substituído pelo menu da sua loja (Departamento, Categoria e Produto), conforme imagem ao lado. Importante: O botão “Restaurar Padrões” serve para voltar as alterações para o padrão inicial.Após realizar alguma alteração, você deve clicar em “Salvar Alterações”, assim será possível visualizar com a opção “Pré-Visualizar”.

15. Layout Avançado (Tags que podem ser utilizadas)