Aprenda como deixar site responsivo com Elementor e WordPress. Ou seja, como configurar o site para Mobile com o Elementor. Adaptar site para mobile é 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.
🔻Hospedagem de Sites anuais com até 90% OFF🔻
Hostinger: https://digitalsan.com.br/Hostinger
❤️Participe do Telegram: https://t.me/descomplicandosites
👉Se inscreva no canal:
✔️Adquira o Elementor Pro: https://elementor.com/pricing/?ref=12430
🔻Veja tbm
Banner no Canva- https://youtu.be/E9aE9hJV2to
Elementor 3.4- https://youtu.be/f-MTUWP0GQA
Menuzinhos Mobile- https://youtu.be/aJ9z6S997ss
Criando SITE PROFISSIONAL- https://youtu.be/8fYG5vF7dek
Quem trabalha criando sites com o WordPress, WooCommerce e Elementor 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. Então saber como deixar o site responsivo para celular é obrigatório.
00:00 Como deixar o site responsivo para celular
O Elementor é sensacional para deixar o site responsivo para celular, e também outras telas. Permite colocar espaçamentos e alterar o tamanho de textos, imagens e qualquer outro elemento somente em um dispositivo específico. Permite criar uma seção e ocultá-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, assim inverte a ordem que um elemento aparece na tela do dispositivo. Permite adicionar imagens somente para a versão mobile, etc. Enfim, veja como otimizar site para celular e para outros dispositivos.
01:52 Adicionado + telas responsivas no Elementor
Na nova versão do Elementor, 3.4, foi adicionado mais tamanhos de telas deixar os sites ainda mais responsivos nos diversos dispositivos de acesso á internet. Além das 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, Celular na horinzontal, Tablet na Horizontal e Telas grandes como TVs.
04:02 Menu – Ocultando colunas no Mobile
Ocultar colunas criadas com o Elementor no celular e em outros dispositivos é fundamental para ter um site otimizado no Mobile e em outras telas. Pois muitos elementos do layout do site não ficam interessantes em certos dispositivos.
04:57 Menu – Colocar uma coluna no lado da outra
Este recurso também é importantíssimo para deixar o Menu com o Layout bonito. Com ele é possível deixar o logotipo na mesma linha do menu hambúrguer do site.
07:24 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 coluna. Isso faz com que a logo do site seja empurrada para baixo, deixando o layout feio.
08:12 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.
10:04 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 recurso do Elementor “Reverter Coluna no Mobile”.
10:57 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 outra imagem que fique maior no Mobile, na própria configuração de plano de fundo da seção no Mobile.
13:15 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.
15:54 – Ajustando Espaçamentos
Para deixar o site responsivo para celular, é sempre preciso diminuir espaçamentos herdados das configurações feitas no Desktop.
16:24 – 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 na mesma linha.
👉Se inscreva e ative o sininho para ver novos vídeos sobre WordPress, Elementor, Woocommerce, Hospedagens de Sites e de como Viver de Sites. Clique aqui:
📍 Siga-me
Insta- https://instagram.com/descomplicandosites
Com amor,
Micaela
#Mobile #Celular
