Como colocar uma imagem de fundo no layout?
Passos para adicionar uma imagem de fundo em alguns layouts da Nuvemshop
Última atualização: 09/01/2021
Em alguns dos layouts disponibilizados pela Nuvemshop, é possível colocar uma imagem de fundo para a loja.
Vamos aos passos!
Como adicionar a imagem
1. No painel de administração de sua loja, siga pelo caminho Minha Nuvemshop > Layout .
2. Você já será direcionado para a página de personalização do seu layout, onde deverá clicar no botão "Personalizar seu layout atual".
3. Na seção Configurações avançadas, siga pelo caminho Cabeçalho > Fundo para seu site e clique em "Imagem de fundo para seu site".
4. Clique em "Selecionar imagem", para abrir uma janela com as pastas do seu computador. Em seguida, selecione a imagem de fundo que quer usar em sua loja.
5. Depois defina se você quer salvar suas alterações no rascunho do seu layout, ou publicá-las em sua loja:Para salvar essa alteração em um rascunho, clique em "Salvar rascunho". Para publicá-la imediatamente em sua loja, clique em "Publicar".
Pronto, agora você já tem uma imagem de fundo em seu layout!
Tipos de imagens que você pode utilizar
Apesar de ser possível adicionar uma imagem de fundo, nem toda imagem deve ser usada como imagem de fundo.
👉 Dimensões
Em nossos layouts, quando você adiciona uma imagem, ela é repetida para preencher todo o fundo da tela. Isso acontece pois sua loja será visualizada em dispositivos de todos os tamanhos de tela, desde celulares até monitores de mais de 20 polegadas.
Por isso, é importante usar imagens com padrões. Imagens com padrões são ilustrações que, quando colocadas lado a lado, se complementam. Imagine um papel de parede em sua casa, onde o objetivo é não conseguir ver as emendas. Isso é uma imagem com padrão.
O tamanho indicado para essas imagens é de 16px por 16px, mas elas podem ser maiores. O importante é que elas sejam de uma tamanho não muito grande, para ajudar no carregamento da loja.
👉 Tipos de imagens
Recomendamos usar imagens nos formatos .PNG e .JPEG.
Quanto ao conteúdo da imagem, não recomendamos que sejam usadas fotos ou imagens muito coloridas. Isso pode tornar a leitura difícil. Veja alguns exemplos:
- Imagem com padrão neutro ✅
- Foto ⛔
- Imagem com padrão colorido ⛔
Note como somente no primeiro caso é possível ler os demais elementos e informações da loja.
Personalização avançada do Layout
Para saber como inserir banners ou alterar alguns elementos da sua loja por meio do código-fonte ou usando código de CSS, consulte o nosso índice abaixo.
Nele você encontrará os principais tutoriais para te ajudar nesta personalização.