Com GemPages, você pode controlar a visibilidade de elementos ou seções específicas entre dispositivos, garantindo que suas páginas tenham uma ótima aparência tanto no desktop quanto no celular.
Por exemplo, o design e o conteúdo que funcionam em um desktop podem não ser ideais para dispositivos móveis. Ao mostrar e ocultar elementos dependendo do tamanho da tela, você pode garantir uma experiência de usuário mais suave e eficaz.
Digamos que você esteja criando um botão de chamada para ação (CTA) para seu site:
- Desktop:Você quer que o CTA seja maior e mais detalhado
- Mobile:Como o espaço na tela é limitado, você opta por uma versão mais simplificada.
Ao usar a funcionalidade mostrar/ocultar do GemPages, você pode criar versões diferentes do mesmo botão, personalizando-as para atender aos requisitos exclusivos de cada tamanho de tela.
Como mostrar e ocultar um elemento?
Etapa 1 - No editor GemPages, adicione um novo elemento ou clique em um elemento existente que você deseja personalizar para diferentes dispositivos.
Para este exemplo, vamos supor que você esteja trabalhando com um Frase de chamariz (CTA) botão.
Etapa 2 - No GemPages, duplique o botão CTA para criar dois botões CTA separados: um para desktop e outro para celular.
Etapa 3 - Personalize os dois botões como preferir.
Etapa 4 - Definir propriedades de exibição
- Selecione o botão que deseja exibir apenas na área de trabalho. No Avançado aba, Utilize o Exibir Ligado configuração para garantir que ele apareça apenas em telas de desktop.
- Selecione o outro destinado ao celular, ajuste o Exibir Ligado configuração para ocultá-lo da visualização na área de trabalho, mas mantê-lo visível em dispositivos móveis.
Como mostrar e ocultar uma seção?
Você também pode mostrar e ocultar seções inteiras com base no tamanho da tela. Isso é particularmente útil se você tiver grandes blocos de conteúdo ou recursos específicos que não se traduzem bem em telas menores.
Etapa 1 - Selecione a seção que você deseja ocultar no celular.
Etapa 2 - Depois que o elemento for selecionado, as configurações aparecerão no lado direito do editor.
Clique no Guia Avançado na parte superior do painel de configurações. Usando o Exibir em recurso para ajustar a visibilidade.
- Mostrar a seção somente em telas de desktop.
- Esconder quando visualizado em dispositivos móveis.
Perguntas
Por que a função Mostrar/Ocultar não está funcionando no iPhone?
- Verifique as configurações de "Exibir ligado": Certifique-se de que o elemento ou seção esteja habilitado para Mobile na aba Avançado. Se estiver oculto na versão para dispositivos móveis, não aparecerá no iPhone.
- Evite elementos sobrepostos: Um elemento pode estar tecnicamente visível, mas coberto por outra seção ou elemento em dispositivos móveis. Verifique o espaçamento, a posição (especialmente Absoluta/Fixa) e o índice z, se houver.
- Limpe o cache e atualize a página: Se alterações foram feitas recentemente, limpe o cache do seu navegador ou atualize a página no iPhone para garantir que a versão mais recente seja carregada.
Obrigado por seus comentários