Por que as mudanças no celular podem afetar o desktop?
A GemPages opera em um princípio de design responsivo. Isso significa que os elementos da sua página se ajustam automaticamente a diferentes tamanhos de tela.
Quando você move ou redimensiona um elemento para dispositivos móveis, o layout do desktop também pode mudar, pois é o mesmo elemento no código.
Você precisa aplicar técnicas específicas para isolar os designs de cada dispositivo.
Técnicas-chave para personalização somente para dispositivos móveis
Para criar layouts somente para dispositivos móveis sem comprometer o desktop, considere usar uma das seguintes técnicas no GemPages, incluindo:
- Configurações de visibilidade
- Opções de layout responsivo
- (Avançado) CSS customizado
1. Configurações de visibilidade
Este recurso permite que você mostre ou ocultar diferentes elementos/seções da sua loja em dispositivos específicos (desktop ou celular).
Exemplo:
Você cria duas seções, A e B. A Seção A é projetada especificamente para usuários de desktop, enquanto a Seção B é otimizada para dispositivos móveis. Você pode definir a Seção A para exibir somente em desktops e a Seção B para exibir somente em dispositivos móveis, garantindo que cada seção seja adaptada ao respectivo dispositivo sem interferir na outra.
Benefícios:
- Ele permite que você crie layouts exclusivos otimizados para cada tamanho de tela.
- É fácil personalizar sem o risco de afetar outras seções.
Limitações:
O conteúdo da sua página está tecnicamente duplicado. Embora isso não tenha impacto significativo na velocidade de carregamento, é algo para se estar ciente.
Observação: É melhor limitar o uso dessa técnica a 1 ou 2 seções importantes (como a seção acima da dobra) que exigem mais personalização para cada dispositivo.
Para obter mais detalhes sobre como mostrar/ocultar elementos e seções em cada dispositivo, consulte Este artigo.
2. Ajustes específicos do elemento
GemPages permite que você ajustar como os elementos aparecem com base no tamanho da tela.
Essas configurações incluem opções para ajustar o tamanho da fonte, alinhamento, cores, margens, preenchimento, planos de fundo, etc.
Exemplo:
Aumente o tamanho da fonte de um título em dispositivos móveis para melhor legibilidade, mantendo a versão para desktop intacta.
Limitações:
Você só pode ajustar a aparência visual dos elementos, não sua posição.
Se você mover um elemento no celular, ele também será movido na versão para desktop, pois o elemento ainda estará na mesma posição no layout geral.
3. Layouts responsivos
Ao usar as configurações de coluna e linha do GemPages, você pode alterne entre layouts horizontais para desktop e layouts verticais para dispositivos móveis.
Isso ajuda a garantir um design limpo e organizado que funciona bem em qualquer tamanho de tela.
Exemplo:
Você configura colunas para serem exibidas lado a lado no desktop, mas empilha-as verticalmente no celular para facilitar a navegação.
Benefícios:
- Essa abordagem facilita a criação de layouts que ficam ótimos tanto em computadores quanto em dispositivos móveis.
- Você pode reorganizar colunas dentro de linhas, o que lhe dá mais flexibilidade no design.
Limitações:
Você só pode alterar a posição de colunas inteiras, não de elementos individuais dentro das colunas.
4. Personalização avançada: use CSS personalizado para dispositivos móveis
Se você tem um entendimento sólido de CSS, você pode levar sua otimização mobile para o próximo nível adicionando código CSS personalizado. Isso permite que você ajuste o estilo e a aparência de elementos específicos somente para dispositivos móveis.
Exemplo:
Você pode escrever CSS personalizado para alterar o estilo de um botão ou ajustar o espaçamento de elementos exclusivamente para dispositivos móveis.
Benefícios:
Controle total sobre o estilo de qualquer elemento, permitindo que você faça ajustes altamente específicos.
Limitações:
Requer conhecimento de CSS. Sem isso, pode ser desafiador implementar personalizações de forma eficaz.
Como otimizar o design somente para dispositivos móveis?
Para otimizar seu design de forma eficaz, recomendamos a seguinte abordagem:
- Comece com a área de trabalho
Primeiro, crie seu layout para desktop. O layout para dispositivos móveis herdará a estrutura de conteúdo para desktop, portanto, começar por aqui já fornece uma base sólida.
- Ajustar as configurações principais
Use ajustes específicos de elementos e técnicas de layout responsivo para modificar o tamanho da fonte, a cor, as margens, o preenchimento e o alinhamento para dispositivos móveis.
- Aplique as configurações de visibilidade, se necessário
Se você precisa de um layout móvel totalmente diferente do desktop, considere usar Configurações de visibilidade para criar seções somente para dispositivos móveis.
Observação: Ao usar Configurações de visibilidade Para designs separados para dispositivos móveis e desktops, limite esse recurso a uma ou duas seções principais (como o cabeçalho ou o herói). O uso excessivo pode tornar o carregamento da página mais lento e afetar o desempenho.
Para a maioria dos ajustes em dispositivos móveis, é melhor usar ferramentas como tamanho da fonte, preenchimento e configurações de margem, que evitam a duplicação de conteúdo e mantêm o desempenho alto.
No entanto, se uma seção realmente precisa de um design móvel exclusivo que não pode ser alcançado com pequenos ajustes, as Configurações de Visibilidade são ideais.
Por exemplo, aqui está um exemplo passo a passo usando as Configurações de Visibilidade na guia Avançado:
Passo 1: Mudar para a visualização móvel
Após finalizar o design do desktop, clique no ícone para dispositivos móveis na barra de ferramentas superior do GemPages para visualizar a aparência da sua página no celular.
Passo 2: Duplicar a Seção
Clique com o botão direito na seção que deseja personalizar para celular e selecione “Duplicar. "
- A seção original será usada para otimização móvel (Seção a).
- A seção duplicada será apenas para desktop (Seção B).
Etapa 3: Defina um elemento para ser visível no celular e o outro no desktop. Isso permite que você aplique estilos exclusivos a cada um.
Passo 4: In no painel de configurações à esquerda, ajuste o tamanho da fonte, o espaçamento e outros atributos para a versão móvel.
Isso garante que o elemento seja otimizado para telas menores sem afetar o design do desktop.
Perguntas Frequentes
1. Como edito uma página somente para dispositivos móveis no GemPages?
Use o botão de alternância de visualização móvel na barra de ferramentas superior para alternar para a visualização móvel. Em seguida:
- Ajuste o tamanho da fonte, preenchimento, margem, etc., para dispositivos móveis usando configurações específicas do elemento.
- Use as Configurações de Visibilidade para mostrar/ocultar seções no celular e no desktop se precisar de designs separados.
2. Por que as alterações que faço no celular afetam também o layout do desktop?
O GemPages segue uma estrutura de design responsivo, o que significa que os elementos compartilham a mesma posição em todos os dispositivos. Para isolar as alterações em dispositivos móveis, use as Configurações de Visibilidade para duplicar a seção e personalizar cada versão separadamente.
3. Qual é a melhor maneira de fazer com que uma seção pareça diferente no celular?
Há duas opções recomendadas:
- Ajuste as configurações de estilo (tamanho da fonte, preenchimento, margem, alinhamento) diretamente na visualização móvel
- Use as configurações de visibilidade para criar versões somente para dispositivos móveis de seções importantes, como Hero ou CTA
4. Posso aplicar imagens de fundo diferentes para dispositivos móveis e desktop?
Sim. Duplique a seção e use as Configurações de Visibilidade para mostrar uma versão para dispositivos móveis e outra para desktop. Depois, você pode definir imagens de fundo diferentes em cada uma.
Obrigado por seus comentários