Desenho de um belo layout

Aumentar textoReduzir texto

Webshop layoutUm layout profissional é importante para parecer fiável, de modo a ganhar a confiança dos seus clientes. EasyWebshop facilita-lhe a escolha e a personalização de uma apresentação. Não precisa de um web designer caro.

A alteração do layout não tem impacto no funcionamento da loja virtual. Qualquer alteração pode ser desfeita ou modificada mais tarde. Por isso, não tenha pressa em experimentar cores, imagens e tipos de letra para obter o resultado pretendido.

Adicione cerca de 10 produtos antes de experimentar o layout e a configuração.

Se você não quiser experimentar o layout na sua loja virtual ao vivo, você pode criar uma nova loja virtual gratuita usando Multishop para experimentar.

Gestão de layout

Navegue até Configurações > Layout. Abaixo explicamos como cada separador funciona.

Gerenciamento de layout

Templates, Temas e Designs

Modelos e temas

Templates são designs básicos que estão em primeiro lugar na lista e não incluem cores. Eles são adequados para sites de negócios onde o foco está nos produtos.

Os Temas baseiam-se num modelo e são aperfeiçoados com combinações de cores e fundos. São adequados para sites onde o design tem de ser atrativo.

Designs são modelos ou temas que são personalizados por si, o utilizador, utilizando o designer. Este método é adequado para utilizadores que querem personalizar os detalhes do seu website.

Todos os modelos e temas são compatíveis com dispositivos móveis e optimizados para tempos de carregamento rápidos e uma indexação óptima nos motores de busca.

Escolha um dos modelos ou temas e clique em Exemplo para ver um exemplo. Este exemplo não é visível para os seus visitantes.

Clique em Publicar para definir o modelo ou tema para o seu site. Ele estará agora disponível para os seus visitantes.

Logotipo

Exemplo de logótipo

No separador Logo, pode carregar um logótipo (da empresa) seleccionando-o e clicando em Guardar.

Se ainda não tem um logótipo, pode pedir a um designer de logótipos que o desenhe. Na EasyWebshop não desenhamos logótipos. Um site interessante para ter um logótipo desenhado é 99designs.

Ajustar as dimensões do logótipo após o carregamento

Escala
Esta é a configuração padrão: o logótipo será proporcionalmente reduzido para um máximo de 300x100 pixels.
Crop
Isto irá cortar a parte do logótipo que é demasiado grande.
Sem alterações
Não serão feitas modificações no logótipo após o carregamento. Escolha esta opção se você mesmo tiver o logotipo no tamanho correto.

Recomendamos que não faça logótipos demasiado grandes. Isto torna-o difícil para os visitantes com smartphones. Se o logótipo for demasiado largo, aparecerá uma barra de deslocamento horizontal. Se o logótipo for demasiado alto, terá de fazer mais scroll na vertical.

A definição predefinida de 300x100 pixéis é adequada na maioria das situações. Com alguns temas, é melhor tornar o logótipo maior ou mais pequeno.

O tamanho máximo do logótipo é de 25MB. Os formatos de ficheiro possíveis são .gif, .jpg, .png e .svg. Para logótipos transparentes, utilize o formato PNG ou SVG. As animações GIF são possíveis, mas não recomendamos que as utilize como logótipos.

Icone do navegador

O ícone do browser ou Favicon é um ícone associado ao seu sítio Web. Pode ser desenhado pelo seu designer de logótipos.

Favicon

Para obter a máxima compatibilidade com todos os tipos de dispositivos, recomenda-se que carregue uma versão .ico, .png e .svg.

ico
Um favicon padrão tem as dimensões de 16x16, 32x32 ou 64x64 pixels e contém 16 cores. O tamanho do ficheiro é de, no máximo, 150Kb.
png
As dimensões recomendadas para um favicon .png são 196x196 pixéis.
svg
Para resoluções mais altas, podem ser usados favicons SVG. Tenha em atenção que nem todos os dispositivos suportam favicons SVG.

É possível que o ícone do browser não mude imediatamente depois de o atualizar na gestão de layout. Isto deve-se às caches do browser. Este problema resolve-se após algum tempo, quando a cache é limpa. Também pode limpar manualmente a cache do navegador ou visitar o Web site com um dispositivo que não utilizou anteriormente.

Cores

A interface de cores extrai todas as cores do tema escolhido e fornece uma forma fácil de as alterar. O botão Editar CSS é um recurso especializado que fornece mais opções para ajustar o layout alterando o código CSS.

Alguns links úteis:

Depois de fazer alterações, clique no botão Salvar abaixo.

Imagens

Se houver imagens presentes no tema, elas serão listadas aqui. Clique no ícone Editar imagem para atualizar a imagem. Com o designer (ver página seguinte) pode adicionar mais imagens.

Depois de efetuar as alterações, clique no botão Guardar abaixo.

Se a imagem não mudar no sítio Web, isso deve-se normalmente ao facto de as fotografias antigas ainda estarem na cache do navegador Web. Um navegador da Web (Firefox, Google Chrome, ...) salva páginas da Web e imagens no seu disco rígido. Desta forma, na sua próxima visita, a página será carregada mais rapidamente. Quando visitar a página, verá a versão antiga da foto no seu disco rígido e não a versão ao vivo no seu site.

Exemplo de cache do navegador

Para resolver isso: navegue até a página da loja e clique em Refresh page ou Reload page

Também pode usar as teclas de atalho: F5 ou CTRL + R (Command + R no Mac). A versão mais recente da página da Web está agora carregada.

Em alguns navegadores Web, terá de limpar manualmente a cache nas definições do navegador Web. A localização desta opção depende do seu navegador. Consulte o recurso de ajuda do seu navegador da Web para isso. Está fora do âmbito deste wiki.

Tipo de letra

Esta interface permite-lhe alterar o tipo de letra principal do seu site. Basta escolher um tipo de letra e clicar no botão Guardar abaixo.

Tipos de letra de apresentação

Recomenda-se que não misture diferentes tipos de fontes na mesma página.

Designer

Com o designer, o modelo ou tema escolhido pode ser personalizado. O designer oferece muitas possibilidades de personalização e, portanto, é menos fácil de usar do que o gerenciamento de layout padrão. A página seguinte descreve as funções do designer.

Designer

Dicas para criar você mesmo um layout bonito

Mantenha-o simples
Os seus clientes não compram um produto em função da apresentação do sítio Web. Um layout simples e funcional terá um melhor desempenho do que um layout ocupado com muitas distracções desnecessárias.
Seja consistente
Escolha uma paleta de cores e continue a usar as mesmas cores. Utilize o mesmo tipo de letra, a menos que saiba o que está a fazer.
Inspire-se
Não há nada de errado em ver como os outros o fazem. Pode encontrar inspiração nos nossos exemplos.
Fotos dão vida a um sítio Web
Um logótipo reconhecível, fotografias claras de produtos e um fundo a condizer fazem com que o seu sítio Web ganhe realmente vida.
Obtenha conselhos de amigos, familiares e colegas
Pergunte a diferentes pessoas o que acham da sua apresentação. Um layout bonito é subjetivo. Verá que existem muitas opiniões contraditórias.
Faça um contraste adequado, evite erros de estilo

Alguns erros comuns:

  • Texto com pouco contraste
  • Texto que é irritante de ler
  • Os efeitos dos anos 90 já não estão actualizados
  • Grandes blocos de texto em itálico são difíceis de ler
  • UTILIZAR LETRAS MAIÚSCULAS ONLINE REPRESENTA GRITOS
  • Evite a repetição de pontuação!!!

Contratação de um web designer para o seu site

HTML - XMLCom o designer incorporado, pode personalizar o seu próprio esquema. Existem muitas opções para que possa distinguir a sua loja de outros sítios Web. Esta é a opção mais fácil e menos dispendiosa.

Se não conseguir o resultado desejado, pode pedir a um web designer para construir um layout personalizado. Quando estiver à procura de um web designer, tenha em atenção que, infelizmente, existem muitos web designers sem formação na Internet. Peça referências e verifique as referências também entrando em contacto com eles.

Alguns web designers irão coagi-lo a mudar para outro software de loja virtual para um design de layout, o que é desnecessário. Normalmente fazem-no porque recebem uma comissão por lhe venderem essa outra aplicação. Faça a comparação entre a EasyWebshop e a outra plataforma. Nós geralmente fornecemos muito mais recursos por um preço melhor.

Os separadores do navegador facilitam a mudança de tarefas

Crie dois separadores no seu browser: um separador com estas instruções e um separador onde irá gerir a sua loja. Desta forma, pode mudar facilmente de um separador para outro e navegar mais rapidamente. Se imprimir esta documentação, é claro que isto não se aplica. Pode então olhar para o papel e depois para o seu ecrã. Sim, isto foi um insulto ao seu intelecto!

Prima CTRL + T (ou escolha Arquivo > Novo separador) para abrir um novo separador no seu browser. No novo separador, navegue até ao nosso sítio Web: easywebshop.com.

Tabs

Depois de alterar algo no backend, navegue até a guia do seu site e pressione Reload page, Refresh page ou F5 para ver a atualização mais recente.

Perguntas frequentes sobre o layout

Os meus textos desapareceram!
A cor do texto está definida com o mesmo valor da cor de fundo.
O favicon não é apresentado
Utilize um browser recente. Em algumas versões antigas do Internet Explorer, o favicon não é exibido.
Ligue também um nome de domínio à sua loja. Alguns browsers mostram o favicon de EasyWebshop se não estiver ligado um nome de domínio.

Proxima página: Designer

Wiki inicial



Perguntas frequentes Contato