Fazer minha página móvel responsiva

Neste artigo, você aprenderá como as páginas do PageFly são projetadas para serem responsivas por padrão. No entanto, às vezes você precisa se lembrar dessas dicas para garantir uma experiência tranquila para seus visitantes.

Dica 1: Sem tamanho fixo de imagem, NUNCA

Por padrão, todos os layouts são responsivos, por isso, nunca defina o tamanho fixo da imagem (incluindo largura e altura) para nenhum elemento.

O valor que você vê na guia Geral> seção CONTEÚDO> Tamanho da imagem são valores padrão. Eles respondem a diferentes modos de dispositivo, portanto, deixe-os assim.

Here you can see on every device: laptop, tablet, and mobile

Importante: Se você deseja definir dimensões horizontais e verticais para um elemento, use margem percentual e preenchimento.

Dica 2: Margem percentual e preenchimento, por favor

Definir dimensões com preenchimento

Geralmente, quando você define um plano de fundo da imagem para uma seção, ela aparece primeiramente assim:

Alterne para a guia Estilo> seção ESPAÇAMENTO> Insira valores para preenchimento superior e inferior na unidade “%”. Nesse caso, defina 30% para preenchimento superior e inferior.

Você pode definir a posição do plano de fundo e o tamanho do plano de fundo da imagem ao clicar no botão Mais configurações. Nesse caso, defina a posição central e cubra o tamanho do plano de fundo.

Em seguida, você pode verificar o design responsivo selecionando Alternador de dispositivos> Tablet ou Celular.

Posicionando elementos horizontalmente

Para posicionar um elemento horizontalmente, use a unidade “%” para que ele possa responder em diferentes tamanhos de tela.

Neste exemplo, queremos mover o parágrafo para mais perto do centro, para adicionar valores ao preenchimento à direita e à esquerda da seção do parágrafo.

Escolha a Seção> Guia Estilo> Seção Estilos de Caixas> adicione “10%” ao preenchimento à direita e à esquerda.

Esse método é útil quando você deseja definir um espaçamento desigual nos 2 lados do elemento.

Para verificar o design no celular, navegue até a barra superior> vá para Alternador de dispositivos> escolha Celular.

Selecione a Seção> Guia Estilo> Estilos de Caixa. Você pode ver que existe um valor de “10%” para preenchimento à esquerda e preenchimento à direita. Esses valores são adicionados quando o definimos na exibição Todos.

Se você não gosta desses espaçamentos no celular, defina os valores de Espaçamento de volta para “0px”.

Dica 3: Estilo personalizado para cada dispositivo

Você pode personalizar o design de um elemento para um dispositivo específico (laptop, tablet ou celular) configurando a guia Estilo.

Neste exemplo, na visualização Todos, a seção possui preenchimento superior e inferior de “30%”.

Podemos ir para Alternador de Dispositivos> Alternar para Tablet (ou Celular)> guia Estilo para editar o preenchimento separadamente para tablet ou celular.

Ocultando elementos em dispositivos específicos.

Com o design personalizado de dispositivo do PageFly, você pode ocultar elementos em dispositivos específicos para criar uma variedade de designs em uma única página.

Depois que o elemento for selecionado, vá para a guia Geral> seção VISIBILIDADE.

Por exemplo, queremos que a seção leão apareça apenas no celular como banner e oculte em outros dispositivos.

Portanto, selecionamos a seção leão> a guia Geral> ativamos o Hide On para desktop, laptop e tablet.

Vice-versa, selecionamos a seção águia> vamos para a guia Geral> ativamos o Hide On para Celular. A seção de águia aparecerá em todos os dispositivos e está oculta no celular.

Se você acha que precisa de um vídeo para instruir detalhes e claramente, pode ver o vídeo abaixo sobre como criar as páginas responsivas para celular