Por que mudar o plano de fundo da página?
Às vezes, você pode querer alterar a cor de fundo de uma página inteira para corresponder aos seus objetivos de design.
Por exemplo, se o seu tema usa um fundo branco padrão, você pode querer trocá-lo para preto para obter uma aparência ousada e moderna que combine com a imagem da sua marca.
Como alterar o plano de fundo da página com o GemPages?
Como o GemPages não oferece atualmente uma configuração direta para alterar o plano de fundo, você deve seguir estas etapas para usar código personalizado:
Etapa 1: Adicionar um elemento de código personalizado
- Abra a página que você deseja editar no GemPages.
- Arraste e solte o Código personalizado elemento na página.
- Clique no elemento para abrir suas configurações.
- Na barra lateral esquerda, selecione “Adicionar ...”botão abaixo do Código personalizado seção.
Etapa 2: Insira e personalize o código
Agora você está localizado no painel do editor de código.
- Selecione os APF, então cole o código a seguir na caixa.
body {
background: #3355ff !important;
}
O processo de !important garante que a cor de fundo seja aplicada consistentemente em toda a página, substituindo quaisquer estilos conflitantes.
- Substituir
#3355ffcom o código de cor hexadecimal de sua escolha.
Por exemplo: Usar #000000 para preto, #ffffff para branco, ou qualquer outro código hexadecimal que corresponda às suas preferências de design, como:
#f5f5f5 para cinza claro (fundo neutro)
#ff6f61 para coral quente (energético, chamativo)
#1a1a1a para carvão escuro (visual moderno)
#f9fafb para um branco suave (limpo e minimalista)
- Bata o Economize botão para salvar suas alterações.
Resultado
Seguindo essas etapas, você pode personalizar facilmente a cor de fundo da sua página e criar um design que esteja alinhado com sua visão e marca.
Se precisar de ajuda para alterar a cor de fundo da sua página, entre em contato com nosso Equipe de Suporte.
Erros comuns ao alterar a cor de fundo da página
Ao atualizar o plano de fundo da página usando CSS personalizado, alguns erros comuns podem fazer com que a cor de fundo se comporte de maneira inesperada ou entre em conflito com seu esquema de cores geral.
1. A cor de fundo não corresponde ao esquema de cores do seu site.
Escolher uma cor de fundo que não esteja alinhada com o esquema de cores do seu site pode fazer com que a página pareça desconectada do restante da sua loja. Sempre verifique o código hexadecimal da cor para garantir que ela esteja de acordo com seus esquemas de cores e diretrizes de marca existentes.
2. Esquecer de usar !important no CSS
Sem !importantA cor de fundo pode ser substituída pelos estilos padrão do seu tema ou por outras regras CSS, especialmente quando o seu tema define seu próprio esquema de cores no nível do corpo da página.
3. Usar um código de cor hexadecimal inválido ou incorreto.
Um valor hexadecimal incorreto pode impedir que o fundo seja exibido corretamente. Certifique-se de que o código de cor siga o formato correto (por exemplo, #ffffff or #000000) e reflete o esquema de cores pretendido.
4. Esperando que a alteração se aplique a todas as páginas.
O plano de fundo personalizado aplica-se apenas à página onde o elemento de Código Personalizado é adicionado. Se outras páginas utilizarem esquemas de cores diferentes, estes permanecerão inalterados, a menos que adicione o mesmo código a essas páginas.
5. Ignorar o contraste e a legibilidade
Ao mudar para fundos escuros ou em negrito, certifique-se de que o texto e os botões ainda tenham contraste suficiente. Uma cor de fundo que pareça boa por si só pode prejudicar a legibilidade se entrar em conflito com seu esquema de cores atual.
Perguntas frequentes sobre como alterar a cor de fundo da página
1. Por que a cor de fundo não muda depois de adicionar o código?
Verifique se o código está colocado em um Elemento de código personalizado e que você selecionou APF no editor. Além disso, certifique-se de que o código hexadecimal esteja correto (por exemplo, #000000 para preto).
2. Posso usar uma imagem como plano de fundo em vez de uma cor?
Sim. Substitua o CSS por:
body {
background-image: url("YOUR_IMAGE_LINK_HERE") !important;
background-size: cover;
background-repeat: no-repeat;
}
Certifique-se de que o URL da imagem esteja acessível.
3. A alteração do plano de fundo da página afeta apenas uma página ou todas as páginas?
A alteração de plano de fundo se aplica apenas à página onde você adiciona o elemento Código Personalizado. As demais páginas permanecem inalteradas.
4. Como faço para remover a cor de fundo de uma página?
corpo { fundo: transparente !importante; }
Obrigado por seus comentários