Como colocar uma imagem de fundo no layout?
Passos para adicionar uma imagem de fundo em alguns layouts da Nuvemshop
Última atualização: 14/06/2021
Em alguns dos layouts disponibilizados pela Nuvemshop, é possível colocar uma imagem de fundo para a loja.
Importante:
somente os layouts Simple e Trend permitem adicionar uma imagem de fundo. Caso tenha interesse em ter uma imagem de fundo em sua loja, será necessário usar um desses layouts ou customizar o seu diretamente nos códigos.
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.
Importante:
atente-se ao tamanho recomendado para a imagem de fundo. Na próxima etapa deste tutorial vamos dar mais detalhes sobre isso.
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".
Importante:
ao clicar em "Publicar", todas as alterações salvas no seu rascunho serão publicadas na sua loja e não somente a mudança que você fez no momento. Para saber como usar o rascunho consulte o tutorial
👉 Como utilizar um rascunho para editar o layout da minha loja?
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.
Dica:
se você não tem uma imagem com padrão para o plano de fundo de sua loja, existem diversos geradores online. Abaixo, indicamos algumas opções:
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.