Configurar o plano de fundo no tema NBuilder é simples: selecione um componente da sua loja, abra a aba “Design” e escolha entre três tipos de fundo, cor sólida, gradiente ou imagem. O recurso já vem incluído no editor do tema, cada opção aparece em um card com prévia ao vivo e não precisa de nenhum código.
Se você sempre achou que mudar o visual da loja era coisa de programador, este guia é para você. Vou mostrar cada detalhe do recurso, do seletor de cores ao efeito parallax. Mais de 2.000 lojas na Loja Integrada já personalizam o tema com o editor NBuilder sem escrever uma linha de código.
O que é o plano de fundo e onde ele fica no editor
O plano de fundo é a “camada de trás” de cada parte da sua loja: a cor, o degradê ou a foto que aparece atrás dos textos, botões e produtos de uma seção. Quando bem escolhido, ele dá personalidade à página e destaca o que importa.
No editor NBuilder, o caminho é sempre o mesmo:
- Clique no componente que você quer alterar (um banner, uma seção de produtos, o rodapé).
- Abra a aba “Design” desse componente.
- Localize a opção de plano de fundo.
- Escolha um dos três tipos: sólida, gradiente ou imagem.
Os três tipos aparecem como cards com prévia ao vivo. Isso significa que, ao passar de um para o outro, a sua loja já mostra como ficaria. Nada de salvar, recarregar e torcer para ter dado certo.
Se você ainda está conhecendo a estrutura do tema, vale ler antes o nosso guia sobre [como organizar as seções da sua loja no NBuilder] (texto-âncora: “como organizar as seções da sua loja”). Entender o que é cada componente facilita muito a personalização.
Cor sólida: o plano de fundo mais rápido de configurar
A opção de cor sólida é a porta de entrada. Você abre o seletor de cores, escolhe o tom e pronto, o fundo daquele componente muda na hora.
O seletor também ajusta a transparência (o “alpha”). Em linguagem simples: é o quanto a cor deixa ver o que está atrás dela. Com 100%, a cor é totalmente fechada; com 50%, vira um filtro translúcido. Útil quando você quer suavizar uma área sem cobrir tudo.
Uma dica que faz diferença real: use as cores da paleta da sua marca. Se a sua logo é verde e laranja, esses tons devem aparecer nos fundos da loja. É isso que deixa a página com a cara do seu negócio, e não com a cara de um modelo genérico. Já escrevemos um post inteiro sobre [como definir as cores da sua marca na loja virtual] (texto-âncora: “cores da sua marca”), que complementa bem este aqui.
Fundo gradiente: profundidade sem complicação
Gradiente (ou degradê) é quando uma cor vai se transformando em outra de forma suave. Em vez de um bloco verde, você tem um fundo que começa verde escuro e termina verde claro, por exemplo. O efeito dá profundidade e um ar mais moderno à página, sem precisar de nenhuma imagem.
No NBuilder, o fundo gradiente tem dois formatos: linear e radial.
Linear ou radial: qual escolher?
No gradiente linear, as cores mudam em linha reta, de um lado para o outro (de cima para baixo, na diagonal). É a escolha mais comum para banners e seções largas.
No radial, as cores partem de um ponto central e se espalham em círculo, como um brilho. Funciona bem atrás de um título ou de um produto em destaque.
Minha sugestão honesta: comece pelo linear. Ele é mais previsível e combina com quase tudo.
Ajustando o ângulo do gradiente linear
Escolheu o linear? Você define a direção do degradê girando um mostrador circular, parecido com um ponteiro de relógio. Arraste e veja a prévia mudar em tempo real.
Para facilitar, o editor traz atalhos para os ângulos mais usados. Com um clique você aplica as direções clássicas (vertical, horizontal, diagonais) sem precisar acertar o ponteiro na mão.
Posicionando o brilho do gradiente radial
No radial, em vez de ângulo, você define onde fica o centro do brilho. Isso é feito em um seletor 2D: um quadradinho que representa a área do componente, onde você arrasta um ponto para indicar a posição. Quer o brilho no canto superior esquerdo? Arraste o ponto para lá e acompanhe a prévia.
A barra de cores: adicione, arraste e edite pontos
Aqui está a parte mais poderosa do fundo gradiente. A barra de cores é uma faixa interativa que mostra todas as cores do seu degradê e a posição de cada uma. Você pode:
- Clicar em qualquer lugar da barra para adicionar um novo ponto de cor.
- Arrastar um ponto para reposicionar a transição entre as cores.
- Selecionar um ponto para editar a cor dele (um pequeno painel se abre ancorado no próprio ponto).
- Remover pontos que não quiser mais.
Na prática, o seu gradiente não precisa ter só duas cores. Dá para criar transições com três, quatro tons, ajustando onde cada um aparece. Parece coisa de designer, mas é arrastar e soltar.
Predefinições prontas para quem não quer começar do zero
Se montar um degradê do zero parece trabalho demais, o NBuilder traz predefinições de gradiente prontas. Você aplica com um clique e, se quiser, ajusta depois na barra de cores. É o caminho ideal para quem está com pressa ou ainda não confia no próprio olho para combinar tons.
Aliás, esse é o espírito do editor como um todo: você não precisa entender de design para chegar a um resultado profissional. Quer ver na sua própria loja? Conheça o NBuilder em nbuilder.com.br e teste os gradientes prontos no seu tema.
Imagem de fundo: como usar sem deixar a loja lenta
O terceiro tipo de plano de fundo é a imagem. Você envia uma foto ou arte para ficar atrás do conteúdo: aquela foto do seu ateliê, uma textura de tecido se você vende roupas, um padrão discreto com as cores da marca. O envio é direto: escolha o card de imagem, suba o arquivo e a prévia já mostra o resultado.
Cor de fundo enquanto a imagem carrega
Um detalhe que pouca gente repara, mas que melhora a experiência do visitante: você pode definir uma cor de fundo exibida enquanto a imagem ainda está carregando. O padrão é transparente, mas escolher um tom parecido com o da imagem evita aquele “buraco branco” nos primeiros instantes.
Por que isso importa? Porque a percepção de velocidade conta tanto quanto a velocidade real. Uma cor coerente surgindo de imediato faz a página parecer mais rápida e mais cuidada, mesmo que a foto demore um segundo a mais no 4G.
Posição da imagem
Assim como no gradiente radial, a posição da imagem é ajustada em um seletor 2D. Arraste o ponto para definir qual parte da foto fica em evidência: o rosto da modelo, o produto ou o detalhe da textura.
Preencher, repetir ou fixar: o que cada opção faz
Abaixo da imagem, três interruptores controlam o comportamento dela:
- Preencher todo o espaço: a imagem se estica ou se ajusta para cobrir o componente inteiro, sem deixar sobras. É o famoso “cover” e costuma ser a escolha certa para fotos.
- Repetir imagem: a imagem se multiplica lado a lado, como um azulejo. Perfeito para texturas e padrões pequenos, péssimo para fotos (ninguém quer ver o mesmo rosto repetido oito vezes).
- Manter a imagem fixa: a imagem fica parada enquanto a página rola por cima dela. É o efeito parallax, que dá uma sensação de profundidade bem elegante em banners e seções de destaque.
Teste as combinações na prévia. Em segundos você entende o efeito de cada uma na prática.
Boas práticas de plano de fundo para a sua loja
Antes de sair trocando o fundo de tudo, vale guardar alguns cuidados:
- Contraste em primeiro lugar. O texto precisa continuar legível sobre o fundo. Letra branca sobre foto clara é receita de cliente perdido. Se a imagem for movimentada, considere um gradiente escuro por cima.
- Otimize o peso das imagens. Foto em alta resolução, direto da câmera, pode passar de 5 MB e arrastar o carregamento da loja. Comprima antes de subir; o visitante não nota a diferença de qualidade, mas nota a lentidão.
- Mantenha consistência. Use a mesma família de cores e o mesmo estilo de imagem em toda a loja. Cada seção com um fundo diferente passa sensação de bagunça.
- Confira no celular. Boa parte das suas vendas vem do mobile. Abra a prévia no celular e veja se o fundo não engole o texto nem corta a parte importante da imagem.
Publicou? Só assim a mudança vai ao ar
Um lembrete que evita frustração: as alterações de plano de fundo só aparecem para os seus clientes depois que você salvar e publicar o tema. A prévia ao vivo é para você experimentar à vontade; a loja real só muda quando você confirmar.
Se tiver dúvida nessa etapa, temos um passo a passo sobre [como publicar o tema no NBuilder] (texto-âncora: “como publicar o tema”) que mostra o processo do início ao fim.
Perguntas frequentes sobre plano de fundo no NBuilder
Preciso saber programar para mudar o plano de fundo da minha loja?
Não. Tudo funciona com cliques, seletores e arrastar e soltar, na aba “Design” do editor NBuilder. Nenhuma linha de código é necessária.
Qual a diferença entre gradiente linear e radial?
No linear, as cores mudam em linha reta, seguindo um ângulo que você define. No radial, elas partem de um ponto central e se espalham em círculo, como um brilho.
Posso usar mais de duas cores no fundo gradiente?
Sim. Na barra de cores, clique para adicionar pontos, arraste para reposicionar, selecione um ponto para trocar o tom ou remova os que não quiser.
O que é o efeito parallax na imagem de fundo?
É quando a imagem fica fixa enquanto a página rola por cima dela, criando profundidade. No NBuilder, basta ativar “Manter a imagem fixa”.
A imagem de fundo pode deixar minha loja lenta?
Pode, se o arquivo for muito pesado. Comprima a imagem antes de enviar e defina uma cor de fundo para o carregamento, o que melhora a percepção de velocidade.
A mudança no plano de fundo aparece na hora para os clientes?
Não. A prévia ao vivo é só sua. Os visitantes só veem o novo fundo depois que você salvar e publicar o tema.
Conclusão: seu plano de fundo, com a cara da sua marca
O plano de fundo é um daqueles detalhes que separam uma loja “montada às pressas” de uma loja com identidade. Cor sólida para a base, gradiente para dar profundidade, imagem para contar a história do seu produto: você combina tudo isso sem tocar em código, vendo o resultado em tempo real. Faça como as mais de 2.000 lojas que já personalizam o tema na Loja Integrada. Acesse nbuilder.com.br, assine o NBuilder Pro e configure o plano de fundo da sua loja ainda hoje.
