Como Adaptar Site para Mobile com Elementor [Site Responsivo]

Aprenda como deixar site responsivo com Elementor e WordPress. Ou seja, como configurar o site para Mobile com o Elementor. Adaptar site para mobile nada mais é do que adaptar o site para celular. São configurações para otimizar o site em telas de celulares. Aprenda como configurar o layout do site para celulares. Muitas pessoas ao tentar configurar o Layout do site para o Mobile acabam alterando também layout no Desktop. Aprenda a maneira certa de como otimizar site para celular.

Os Web Designers que criam sites com o WordPress, WooCommerce e Elementor Website Builder precisam saber como fazer um site responsivo com Elementor. Pois a maioria das pessoas navega na internet pelo celular, então é muito importante saber configurar o site para se adaptar aos diversos tamanhos de telas, principalmente para o celular/smartphone. Então saber como deixar o site responsivo para celular é atualmente obrigatório saber e fazer em todos os sites.

Como deixar o site responsivo para celular

O Elementor é sensacional para deixar o site responsivo para celular, e também para tablets, TVs, Notebooks/Laptops e outras telas. Ele permite colocar espaçamentos e alterar o tamanho de textos, imagens, ícones e qualquer outro elemento somente em um dos dispositivos citados. Permite criar uma seção e oculta-la nos dispositivos que desejar deixando ela visível em apenas um ou alguns tipos de telas.

Permite também inverter/reverter uma coluna no Mobile e/ou tablete, assim inverte a ordem que um elemento aparece na tela do dispositivo. Permite adicionar imagens somente para a versão mobile do site, entre outros. Enfim, nesse tutorial eu ensino tudo que você desenvolvedor de sites com Elementor precisa saber para otimizar site para celular e para outros dispositivos também, pois o princípio e configurações são as mesmos.

Adicionado mais telas responsivas no Elementor

Na nova versão do Elementor Website builder, 3.4, foi adicionado mais tamanhos de telas deixar os sites ainda mais responsivos nos diversos dispositivos de acesso á internet. O padrão o Elementor vinha com as opções de configurações responsivas para o Desktop, tablet na vertical e Mobile(celular) na vertical. Agora foi adicionado as opções para Laptops/Notebooks, Celular na horinzontal, Tablet na Horizontal e Telas grandes como TVs.

Menu – Ocultando colunas no Mobile

Saber ocultar colunas criadas com o Elementor na tela para celular e também nos outros dispositivos é fundamental para ter um site bem otimizado no Mobile e em outras telas. Pois muitos elementos do layout do site não ficam muito interessantes e bonitos em certos dispositivos.

Menu – Colocar uma coluna no lado da outra

Este recurso simples de ser configurado também é importantíssimo para deixar o Menu com o Layout bonito e agradável. Com isso é possível deixar o logotipo na mesma linha do menu hambúrguer do site, por exemplo.

Configurar Menu Hamburguer na largura total

Essa configuração é essencial no Mobile, pois por padrão o menu quando clicado para abrir no celular, fica estreito, aparecendo somente na largura da sua coluna. Isso faz com que a logo do site seja empurrada para baixo, deixando o layout feio.

Configurando Banner criado com recursos do Elementor

Mostro como configurar e corrigir espaçamentos de textos e colunas para o Mobile. Como ajustar o tamanho dos textos para o Celular.

Reverter/Inverter coluna no Mobile

Arrastar um Elemento para outro lugar no layout é errado pois afeta também o layout do Desktop e em demais telas. O correto é usar o Próprio Elementor  chamado Reverter Coluna no Mobile.

Banner 2 – Adicionado imagem de banner só no Mobile

Um banner criado com um editor de imagem como o Canva ou Photoshop e adicionado como imagem de fundo de uma seção do elementor pode ser facilmente substituído por uma imagem que fique maior no Mobile na própria configuração de plano de fundo da seção na versão Mobile.

Banner Rotativo – Criando uma seção somente pro mobile

Há ocasiões em que usar o recurso “reverter coluna no mobile” não será suficiente. Então será necessário criar seções somente para o Mobile. Para isso, é preciso ocultar essas seções especificas para o mobile, nas outras telas como: Desktop, Laptop, Tablet e TV.

Ajustando Espaçamentos

Para deixar o site responsivo para celular, é sempre preciso diminuir espaçamentos herdados das configurações feitas no Desktop.

Colocar varias colunas na mesma linha

Em seções com varias colunas com ícones, widget de caixa de ícones e caixa de imagem, em muitas ocasiões fica mais interessante deixar esses elementos lado a lado, isto é, na mesma linha.