Configurações de fundo e cor
As configurações de fundo são uma ferramenta de design essencial que permite que você controle a aparência do seu site. Elas permitem que você definir o tom visual de suas páginas aplicando vários estilos, como cores sólidas, gradientes, imagens ou vídeos.
Ao definir uma cor de fundo sólida, um gradiente ou uma imagem, você pode criar layouts visualmente atraentes que aprimoram sua marca e envolvem os visitantes.
As configurações de plano de fundo permitem que você defina a aparência geral da sua página. Com o GemPages, você pode:
- Inscreva-se cores sólidas para um estilo limpo e minimalista.
- Uso gradientes para criar transições suaves e profundidade.
- Adicione imagens or vídeos para tornar seu design mais dinâmico.
Definir cor de fundo
No GemPages v7, é fácil aplicar uma cor sólida ou gradiente ao fundo da sua página ou de uma seção específica.
Definir uma cor de fundo
Você pode usar uma cor de fundo sólida para manter seu design limpo e focado. Esta é a opção mais simples para dar às seções uma aparência uniforme e garantir a legibilidade.
Etapa 1: selecione o elemento
- Clique na seção, linha ou coluna onde você deseja aplicar uma cor de fundo.
- Abra o Configurações na barra lateral esquerda.
Etapa 2: Encontre as configurações de plano de fundo
- No painel de configurações, localize o Contexto seção.
- Selecionar Cor e escolha Cor sólida como o tipo de fundo.
Etapa 3: escolha uma cor
Você pode definir o fundo de cor sólida a partir destas opções:
- Clique no seletor de cores para selecionar uma cor manualmente
- Digite um código hexadecimal específico (por exemplo, #FCD6D6)
- Selecione uma cor nas amostras de cores
- Escolha entre Cores recentes or Sugerido para você listas.
Definir um gradiente de fundo
Um fundo gradiente permite misturar duas ou mais cores para um efeito moderno e dinâmico. É especialmente útil para destacar seções importantes ou criar transições suaves.
Etapa 1: Habilitar fundo gradiente:
Sob o Configurações de fundo, escolha Cor e selecione Gradiente como o tipo de fundo.
Etapa 3: personalizar o gradiente:
- Escolher cores: selecione duas ou mais cores para o gradiente.
- Definir direção do gradiente: ajuste o ângulo do gradiente (por exemplo, vertical, diagonal ou radial).
- Ajuste fino de opacidade: Ajuste os níveis de transparência das cores do gradiente, se necessário.
Definir imagem de fundo
Adicionar uma imagem de fundo pode melhorar o apelo visual da sua página incorporando texturas, padrões ou elementos visuais temáticos.
Etapa 1: Habilitar plano de fundo da imagem
De acordo com o relatório Contexto seção, escolha Imagem como o tipo de fundo.
Etapa 2: defina o fundo da imagem
Passe o mouse sobre a imagem atual e clique Carregar imagem para carregar uma nova imagem.
Caso contrário, você pode escolher na sua biblioteca de mídia (arquivos do Shopify) ou colar o URL da imagem na caixa.
Etapa 3: ajustar as configurações da imagem
- Escala: Ajuste o tamanho da imagem para ajustá-la ao seu layout.
- Posição: Escolha o alinhamento da imagem, como central, superior esquerdo ou superior direito, para controlar como a imagem é exibida na área de fundo.
- Repetir: Decida se a imagem deve ser exibida em mosaico no fundo ou permanecer como uma única instância.
- Anexo: Defina a imagem de fundo para rolar com a página ou permanecer fixa no lugar para um efeito de paralaxe.
- Otimizar o LCP: Use imagens compactadas para manter a velocidade da página alta.
Combine a cor e o fundo da imagem
Você pode melhorar a estética geral do seu design combinando uma cor de fundo com uma imagem.
A cor de fundo aparecerá abaixo da imagem, o que é eficaz ao usar uma imagem com fundo transparente.
Etapa 1: Adicionar fundo de imagem
- De acordo com o relatório Contexto seção, selecione o Imagem opção.
- Carregue ou selecione uma imagem que tenha um fundo transparente.
Etapa 2: Adicionar fundo colorido
Ainda assim, no Contexto seção, clique no Cor opção. Escolha uma cor que você deseja exibir atrás da imagem.
Ao combinar uma cor de fundo adequada com a imagem, você pode criar um design harmonioso e visualmente atraente que realça o tom geral da sua página.
Definir vídeo de fundo
Os fundos de vídeo são uma excelente maneira de criar visuais dinâmicos e envolventes para seu site.
Etapa 1: habilitar o fundo de vídeo
Sob o Contexto seção, clique no botão “Adicionar…” ao lado do Vídeo campo para abrir o painel de configurações de fundo de vídeo.
Etapa 3: adicione um vídeo para usar como plano de fundo
De fonte No campo "Fonte", selecione a fonte para anexar seu vídeo. Você tem duas opções:
- YouTube: Selecione um vídeo do YouTube para reproduzir como vídeo de fundo.
- Hospedagem de vídeo: Escolha um vídeo enviado dos arquivos do Shopify.
Cole o URL do vídeo para incorporar o vídeo e torná-lo o plano de fundo.
Você pode mudar o Loop video para Sim para habilitar o recurso de loop.
Mais opções de personalização
Para fundos de vídeo avançados com mais controle sobre sobreposições, texto e botões de chamada para ação, considere usar um dos seguintes elementos:
- Siga-nos Este artigo para personalizar o fundo do seu vídeo usando um Bandeira de herói.
- Se você preferir o Faixa de vídeo elemento, saiba mais aqui..
Obrigado por seus comentários