Por padrão, a versão do site para celular exibe os elementos na ordem em que foram adicionados à versão para desktop. Mesmo se você, anteriormente, reordenou os elementos na área de trabalho, essas alterações não serão aplicadas automaticamente à versão móvel. Você pode classificar os elementos na visualização móvel manualmente. Dessa forma, você pode dispor os elementos de forma diferente em visualizações de desktop e móveis.
Para obter o melhor resultado, evite mover elementos entre as seções ou lembre-se de verificar as duas versões depois de fazer isso. Isso afeta as versões para celular e desktop e, portanto, pode distorcer o layout do seu site. Em vez disso, fique à vontade para reposicionar elementos dentro de uma seção 💡
Acesse o editor móvel
Alterne entre as visualizações clicando no ícone móvel ou desktop na barra de ferramentas superior:
Reordenar elementos
Para reordenar os elementos, entre na visualização móvel e simplesmente arraste e solte os elementos:
Redimensionar elementos
Para redimensionar elementos, entre na visualização móvel e use as alças de redimensionamento nas bordas do elemento:
Redimensionar textos
Você pode redimensionar o texto de duas maneiras:
Globalmente – afeta todos os textos de um determinado estilo (por exemplo, todos os textos escritos no Título 1) em todo o seu site na visualização móvel
Localmente – afeta um elemento de texto específico na visualização móvel
Para redimensionar o texto globalmente no celular, entre na visualização móvel e altere o tamanho da fonte de um determinado estilo de texto nas configurações globais de estilo de texto:
Para redimensionar o texto localmente no celular, entre na visualização móvel, clique em um elemento de texto específico e altere o tamanho da fonte:
Você pode definir as seguintes configurações para que sejam diferentes no desktop e no celular:
Tamanho da fonte; por exemplo, desktop: 20 PX, celular: 18 PX
Alinhamento do texto; por exemplo, desktop: esquerda, celular: centro
Altura da linha; por exemplo, desktop: 2, celular: 1,5
Isso significa que, quando você alterar qualquer outro parâmetro - família da fonte, negrito, itálico, sublinhado etc. - a alteração será refletida no desktop e no celular. O mesmo acontece se você alterar todo o estilo do texto, por exemplo, se você definir o Título 2 para dispositivos móveis e o Título 1 para desktop, o elemento de texto na visualização para desktop também mudará para o Título 2.
Você pode duplicar um elemento ou seção e tornar uma versão visível no desktop e outra visível no celular. Dessa forma, você terá mais liberdade ao estilizar o conteúdo no desktop e no celular individualmente, pois, normalmente, algumas configurações (por exemplo, estilo de texto) se aplicam tanto ao desktop quanto ao celular. Saiba mais: Como esconder elementos ou seções no modo mobile/desktop
Alterar a posição do menu
Para alterar a posição do menu do hambúrguer, entre na visualização móvel, clique na seção do cabeçalho e abra suas configurações:
Na aba de Layout, altere a posição do menu:
Se você não conseguir ver a seção de cabeçalho, é provável que todas as páginas do seu site estejam ocultas no menu de navegação 💡
Alterar a posição da logo
Para alterar a posição do logotipo, entre na visualização móvel, clique na seção do cabeçalho e selecione Mudar logo:
Na aba de Logo, altere a posição do logotipo:
Se você não conseguir ver a seção de cabeçalho, é provável que todas as páginas do seu site estejam ocultas no menu de navegação 💡