Como aumentar o tamanho das imagens no celular sem afetar o desktop

O método a seguir cria essencialmente elementos de imagem separados para visualizações em desktop e dispositivos móveis, permitindo que você personalize cada um deles de forma independente. Para mais informações, consulte Este artigo.

Etapa 1: Duplicar a seção de imagem

• No editor GemPages, localize a imagem que você deseja modificar.
• Clique na imagem para selecioná-la.
• Use o Duplicar função para criar uma cópia desta imagem. Esta duplicata será usada para a versão mobile.

Etapa 2: Configurar as configurações de visibilidade

Para a seção original (desktop)

• Selecione a imagem original e navegue até a Avançado guia na barra lateral esquerda. 
• Sob o Exibir em seção, desabiltar da Tablet e Mobile Vistas.

Esta configuração fará com que a seção visível apenas em dispositivos de mesa.

Para a seção duplicada (móvel)

• Selecione a imagem duplicada e navegue até Avançado guia na barra lateral esquerda. 
• Sob o Exibir em seção, desabiltar da Desktop e Tablet Vistas.

Esta configuração garante a seção aparece exclusivamente em dispositivos móveis.

• Uma vez feito isso, a imagem ficará oculta do editor porque você está atualmente no Desktop visualização. No canto esquerdo da barra superior, alterne a visualização para Mobile.

Etapa 3: ajuste o tamanho da imagem para dispositivos móveis

• Depois de alternar para o editor Mobile-view, clique na imagem para acessar suas configurações e role para baixo até Dimensões: seção.

• Você pode selecionar o quadro e aumentar o Largura altura valores da sua imagem na visualização para dispositivos móveis para as dimensões desejadas.

Para mais detalhes sobre como alterar o tamanho da imagem, consulte Este artigo.

Etapa 4: Visualizar e testar

• Use os ícones de visualização do dispositivo na parte superior do editor GemPages para alternar entre as visualizações de desktop e celular.

• Certifique-se de que a imagem seja exibida corretamente em ambas as versões: o tamanho original no desktop e o tamanho ampliado no celular.
• Faça todos os ajustes necessários para preenchimento, margens, ou outras configurações de estilo para obter a aparência desejada em cada dispositivo.

Para mais informações sobre web design responsivo e configurações de visibilidade em GemPages, consulte Este artigo.