Às vezes, um design que fica ótimo em dispositivos móveis pode não funcionar da mesma forma em computadores. Por exemplo, você pode querer aplicar um fundo gradiente em dispositivos móveis para criar um impacto visual mais forte, mantendo ao mesmo tempo um Fundo simples para desktop e tablet.
No GemPages, você pode fazer isso duplicando uma seção ou elemento e controlando-o. configurações de visibilidade do dispositivoEste guia explica como aplicar um Fundo gradiente apenas em dispositivos móveis no GemPages mantendo o design original para telas maiores.
O que é um fundo gradiente?
A fundo gradiente É um estilo de fundo onde duas ou mais cores se misturam suavemente. Em vez de uma única cor sólida, os gradientes criam um efeito de transição entre as cores.
Os fundos gradientes são comumente usados para:
- Crie seções visualmente mais atraentes
- Destaque conteúdo importante, como banners principais ou promoções.
- Melhore o contraste visual em telas menores.
Quando usar um fundo gradiente exclusivo para dispositivos móveis:
Existem muitos cenários de design em que aplicar um gradiente apenas em dispositivos móveis pode melhorar a experiência do usuário.
Por exemplo:
- Fazendo Seções de destaque em dispositivos móveis mais atraentes visualmente
- Melhorar legibilidade do texto em telas pequenas
- Criar seções promocionais otimizadas para dispositivos móveis
- Correspondente Campanhas com designs otimizados para usuários de dispositivos móveis.
Como as telas dos dispositivos móveis são menores, os gradientes podem ajudar a chamar a atenção e melhorar a hierarquia visual sem sobrecarregar o layout.
Como aplicar um fundo gradiente somente em dispositivos móveis
Siga os passos abaixo para exibir um fundo gradiente. apenas em dispositivos móveis mantendo o plano de fundo original tanto no computador quanto no tablet.
Passo 1: Duplique a seção ou o elemento
Primeiro, localize o seção ou elemento onde você deseja aplicar o fundo gradiente.
Em seguida, duplique essa seção ou elemento.
Após a duplicação, você terá duas versões:
- O processo de versão original (para computador e tablet)
- O processo de versão duplicada (para dispositivos móveis)
Inicialmente, ambas as versões parecem idênticas.
Passo 2: Adicione o fundo gradiente
Em seguida, configure a versão duplicada para usar um fundo gradiente.
- Selecione os seção ou elemento duplicado.
- Abra o Configurações painel.
- Acessar Contexto.
- Selecionar Cor → Gradiente.
- Ajuste as cores e a direção do gradiente de acordo com sua preferência de design.
Para um guia mais detalhado sobre como usar fundos gradientes, consulte este artigo: Adicionar um fundo gradiente.
Nesta etapa, você já tem:
- Uma versão com o fundo original
- Uma versão com um fundo gradiente
Etapa 3: Configurar a visibilidade do dispositivo
Agora você precisa controlar Qual versão aparece em cada dispositivo?.
Seção original (desktop + tablet)
Selecione os seção originale então configure-o configurações de exibição por isso só aparece em telas maiores.
Ativar a visibilidade para:
- Desktop
- Tablet
Desativar a visibilidade para:
- Mobile
Seção duplicada (somente para dispositivos móveis)
Em seguida, selecione o seção duplicada com fundo gradiente.
Defina as configurações de exibição para:
Ativar a visibilidade para:
- Mobile
Desativar a visibilidade para:
- Desktop
- Tablet
Isso garante que a versão com gradiente apareça apenas em dispositivos móveis.
Passo 4: Salvar e publicar a página
Após concluir a configuração:
- Clique Economize.
- Publique ou atualize sua página.
Sua página agora exibirá:
- O processo de fundo original em computadores e tablets
- O processo de fundo gradiente Somente em dispositivos móveis
Outras personalizações de design que você pode aplicar com este método.
Esse método de duplicação específico para cada dispositivo também pode ser útil para outros ajustes de projeto, como:
- Usar imagens de fundo diferentes para dispositivos móveis
- Ajustando o espaçamento e as estruturas de layout
- Exibindo seções simplificadas para dispositivos móveis
- Criação de designs de campanhas específicos para dispositivos móveis
Nota Importante
Essa abordagem funciona por meio de duplicar seções ou elementos, o que aumenta o número de elementos na página. Por esse motivo, recomendamos o uso deste método. somente quando necessárioA duplicação excessiva pode dificultar a manutenção e o gerenciamento das páginas. Sempre que possível, tente usar configurações responsivas primeiro, antes de criar seções duplicadas.
Obrigado por seus comentários