Layout - Rodapé

Antes de iniciarmos com a edição do rodapé, é necessário que tenha criado as seguintes páginas que são padrões para todas lojas virtuais:

- Fale Conosco<br>
- Sobre Nós<br>
- Política de Entrega <br>
- Segurança e Privacidade<br>
- Trocas - Devoluções - Garantia<br>

Veja como criar uma página neste passo a passo:

Antes de iniciarmos, veja que este será o rodapé padrão:<br>

[[Arquivo:Footer padrao.jpg|800px]]<br>

Precisamos editá-lo para personalizar com os dados e páginas de sua loja virtual, como endereço, quem somos, fale conosco etc.

Veja o passo a passo a seguir para fazer este procedimento:

= Como Criar uma página? =

1- Clique em Conteúdo do site e depois escolha a opção Criar uma Página.<br>
[[Arquivo:Conteudosite1.jpg]]<br>


2- Faça as configurações como a imagem abaixo e ao terminar as configurações, clique em salvar:<br>
[[Arquivo:Edit conteudo1.jpg]]<br>


3- O resultado será assim:<br>
[[Arquivo:Edit conteudo2.jpg|900px]]<br>

Observação: Perceba que a página quem somos foi criada em seu site e o conteúdo divulgado exatamente como informou no editor.

4- Feito isto, copie a url gerada automaticamente, pois será necessária para editar o rodapé nos próximos passos:

Exemplo: <br>
[[Arquivo:Url footer.JPG]]<br>

'''Após criar suas páginas, siga para o próximo passo para editar o Rodapé.'''

= Editando o Rodapé =

Para editar o '''"Rodapé do Layout Padrão"''' de sua loja virtual, siga os passos abaixo:

'''1-''' Dentro de sua administração, acesse “Layout”.<br>
[[Arquivo:Rodapex1.jpg]]<br>

'''2-''' Escolha o Layout MLW056 e clique em "Ver/ Editar os arquivos do layout"

[[Arquivo:MLW056.JPG]]

'''Observação: É importante que selecione o modelo de Layout 056, caso contrário, este passo a passo não irá funcionar.'''

-> Nesta etapa, você estará no modo design que permite alterar os arquivos CSS de sua loja virtual.

'''3-''' No canto superior esquerdo há a opção "Arquivos deste layout". Selecione a opção '''Footer.html''', como a imagem abaixo mostra:

[[Arquivo:Footer mlw.png]]

Nesta área poderemos alterar o código do rodapé da loja virtual. Siga para o próximo passo.

== Editando o footer.html ==

Todas as alterações que fizer aqui, irá alterar o rodapé de seu site. Veja na imagem que seu rodapé possui "divisões". Faremos as edições seguindo esta ordem.

[[Arquivo:Footer padrao1.jpg|650px]]

===1 - Institucional===

Na linha 44, localize: [[Arquivo:Linha44.JPG]]

Onde houver a href="#", subistitua o '''#''' pela sua url, por exemplo: http://www.testesualoja.com.br/paginas/Contato.html e logo apos o ''';''' informe o nome da página que deve aparecer. Por exemplo: Fale Conosco.

Caso queira remover alguma página, selecione a linha do código como a imagem abaixo mostra:

[[Arquivo:Layout mlw1.JPG]]<br>

===2- Ajuste e Suporte ===

Acesse a linha 54 do código: [[Arquivo:Linha54.JPG]]

Onde houver a href="#", substitua o '''#''' pela sua url, por exemplo: http://www.testesualoja.com.br/paginas/suporte.html e logo apos o ''';''' informe o nome da página que deve aparecer. Por exemplo: Suporte.

Caso queira remover alguma página, selecione a linha do código como a imagem abaixo mostra:

[[Arquivo:Layout mlw1.JPG]]<br>

===3- Atendimento e Televendas===

Acesse a linha 70 do código: [[Arquivo:Linha70.JPG]]

Onde houver a href="#", substitua o '''#''' pela sua url, por exemplo: http://www.testesualoja.com.br/paginas/atendimento.html e logo apos o ''';''' informe o nome da página que deve aparecer. Por exemplo: Atendimento.

Caso queira remover alguma página, selecione a linha do código como a imagem abaixo mostra:

[[Arquivo:Layout mlw1.JPG]]<br>

===4- Formas de Pagamento===

Acesse a linha 86 do código: [[Arquivo:Linha86.JPG]]

Onde houver a href="#", substitua o '''#''' pela sua url, por exemplo: http://www.testesualoja.com.br/paginas/atendimento.html e logo apos o ''';''' informe o nome da página que deve aparecer. Por exemplo: Atendimento.

Caso queira remover alguma página, selecione a linha do código como a imagem abaixo mostra:

[[Arquivo:Layout mlw1.JPG]]<br>

===5- Loja Segura===

Não é necessário alterar esta área.

===6- Horário de Atendimento===

Informe o horário de atendimento na linha 113.

Para inserir o mapa do Google, veja neste link como proceder: http://amelhorlojaweb.com.br/wiki/index.php?title=M%C3%ADdias_Sociais#Google_Maps

Lembrando que o código do google deve ser inserido dentro da Tag: "iframe src="

= Editar Imagens Banner Rotativo =

Para trabalhar com o Banner Rotativo no modelo MLW056, inicialmente é necessário realizar o upload das imagens.

===Upload de Imagens===
1- Antes de começar, suba as imagens que irá utilizar. Acesse Conteúdo do site e clique em "Gerenciar Imagens":

[[Arquivo:Bannerr2.jpg]]

2- Clique em "Enviar Imagens":

[[Arquivo:Bannerr3.jpg]]

3- Escolha as imagens salvas em sua máquina. '''Observação: Para um bom funcionamento do Banner, as imagens devem ter a proporção de 1920x500.''' 

[[Arquivo:Bannerr4.jpg]]

4- Após subir as imagens, serão exibidas miniaturas como abaixo. Copie o endereço da imagem de cada uma delas. Para isto clique com o botão direito do mouse em cima da imagem em questão e selecione "Copiar endereço da imagem".

[[Arquivo:Bannerr5.jpg]]

5- Salve estas urls e siga para o próximo passo.



1- Acesse "Layout" e clique no botão  "Ver/Editar os arquivos de Layout".

[[Arquivo:Bannerr1.jpg]]

2- Na página inicial, escolha para editar "Default.html" é página inicial padrão. Ao abrir o editor já estará nela:

[[Arquivo:Conteudo banner.PNG]]

3- Na linha 11, insira a url da imagem em questão na tag: img src=

[[Arquivo:Imagem linha11.jpg]]

4- Repita o mesmo procedimento nas linhas 15 e 19.

'''Obs: Edite apenas as tags img src='''

Fim

=Como Alterar a Imagem do Topo? =

Para o modelo '''MLW056''' há esta imagem no topo do lado esquerdo:<BR>
[[Arquivo:Topo left.jpg]]<BR>

Para alterar esta imagem, siga os passos:

'''1-''' Acesse Conteúdo do site e clique em "Gerenciar Imagens":

[[Arquivo:Bannerr2.jpg]]

'''2-''' Selecione o arquivo sprite e clique em deletar imagem:

[[Arquivo:Sprite.png]]

'''3-''' Ainda em Gerenciar Imagens, clique em "Enviar Imagens" e selecione a imagem, em seu computador, que gostaria de inserir.

<b><big>Observação: Para ser exibido corretamente, a imagem deve ser salva com o nome de sprite.png. Recomendamos também a resolução de algo em torno de 194x55 px

[[Arquivo:Sprite2.png]]