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, NUNCAClick to copy

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.

mobile responsive

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

mobile responsive pagefly

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 favorClick to copy

Definir dimensões com preenchimentoClick to copy

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

pagefly mobile responsive

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.

mobile responsive 1

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.

make a page mobile responsive

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

Posicionando elementos horizontalmenteClick to copy

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 dispositivoClick to copy

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.Click to copy

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

Thank you for your feedback!

Navigate this category

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!