Otimizando Seu Site para Celular (Primeiros Passos)

Como otimizar um site para celular usando o elemento então se você criou seu site com outra plataforma que não seja o wordpress e elemento se não vai conseguir ter toda essa praticidade que eu vou mostrar para você sério esso realmente fácil não precisa nada de código e se você já tem o seu site ali um elemento esse aqui é um primeiro passo que eu dou de exemplo usando uma página de captura para o telegram que eu
criei no tutorial passado se você quer ver como que essa página foi feita dá uma olhadinha no link que eu vou deixar na descrição e se você quer ver como que a gente faz essas otimizações ver o cão se quiser dar uma olhadinha nesse tutorial aqui que ele tá sensacional lembrando só também esse aqui é um vídeo introdutório eu tenho uma aula que ela mala bônus aí eu aprofundo mais na utilização celular vou deixar o link dela na descrição também mas esse aqui é com certeza vai ser um bom primeiro contato para você então vamos dar uma olhada como que a gente utiliza essa página para lá então deixa embaixo e também se inscreve no canal se você ainda não foi inscrito e aí tudo aí você já sabe e depois disso vamos seguir agora então a gente vai
otimizar essa página para versão de celular e tablet como é que a gente faz isso muito simples você vai vir aqui
aqui embaixo nesse medo ele tem esse modo responsivo eu vou clicar nele a gente vai alternar para versão mobile.Para você prefiro chamada vou clicar aqui e aí olha só ele carrega uma pré-visualização na versão de celular se pode ver aqui que por exemplo esse logotipo tá minúsculo essa imagem aqui
tá gigantesca eu nem sei se ela deveria entrar na versão celular de resto tá até bem razoável aqui a gente pode fazer algumas modificações posso mostrar que que mudaria mas basicamente vai ser ajustar que algumas imagens esse e alguns detalhes desse tipo tem uma outra aula uma aula bônus eu vou deixar o link
dela na descrição que eu mostro quatro dicas bem interessantes eu mostro como que te fato funciona as estrutura que em mais detalhes para a utilização de celular não vale a pena você dar uma olhadinha nela depois também para você vai fazer outros sais você vai apenas ficar nessa página.
 Tudo que é essencial que mas depois dá uma olhadinha naquela aula que eu acho que vale a pena também vou deixar o link dela na descrição beleza essa imagem aqui está muito pequeno então vou clicar nela a gente vai vir aqui em estilo que a gente precisa fazer aumentar a largura dela que que acontece o elemento ele importa as configurações de desktop para versão de tablet e para a versão de celular também são você
gente tinha diminuído aquela largura na versão de desktop ele importou essas informações e deixou também o valor  padrão para a versão celular a gente precisa vir aqui manualmente não elemento calma aí no celular eu quero que isso aqui seja maior eu quero que você que seja são as sessenta por cento prontinho resolvido e aí a gente vai fazer esse processo para tudo que a gente acha que ficou muito grande ou muito pequeno na versão de celular por exemplo essa imagem aqui a gente poderia diminuir o que um pouquinho tamanho dela
mas eu não acho que ela vai combinar já já vou mostrar como que a gente faz para sumir um elemento uma coluna inteira na versão responsiva então vai aparecer numa versão da vez…
oi gente é sumir com ela na versão de celular vou mostrar como é que a gente faz isso já e aí a gente poderia
continuar aqui por exemplo a esse texto que eu acho que ele tá muito grande para versão aqui no meu celular que a gente poderia vir aqui e diminuir um pouquinho tamanho mesma coisa aqui para o botão apesar de que esse botão fica legal poderia mudar esses pensamentos então quero dizer a espaçamento aqui por
exemplo e também pode perceber que apresenta a associação aqui ela não está alinhada não tá centralizada certinho se você percebeu mas por que a gente adicionado um espaçamento aqui lateral a gente pode vir aqui simplesmente dizer a também esses espaçamentos um aqui basta deixar tudo aqui zero e prontinha assim.
A  gente garante que eles vão estar centralizados claro você poder fazer outras modificações tipo diminuir um
pouquinho desse tamanho ou talvez diminuir a distância entre esse título e esse ícone da para você ter um controle muito fino aqui mas acho que não é o foco neste tutorial vamos simplesmente
deixar ela aqui funcionar o bastante essa página aqui a mesma coisa vou deixar aqui em 60 para ele ficar no
tamanho certinho…
Um pontinho até que eu achava que essa página ficar mais desorganizada na versão celular mas ela ficou bem
aceitável já só pra finalizar que eu vou vir aqui nessa coluna inteira e aqui avançado olha só que bacana a gente tem aqui responsivo e a gente tenha opção de habilitar ou ocultar elementos sessões ou colunas nas versões de desktop tablet e celular fosse o clicar aqui ocultar prontinho ele mostra que tracejado para gente que essa seção não vai aparecer se eu ficar nessa setinha prontinho ele me mostra realmente a visualização real da
coisa de como que vai ficar de fato nessa parte então com essas pequenas utilizações foi bem rápido bem fácil
usar nada de código a gente conseguiu já.
Uma uma versão de celular muito foda muito bacana que você pode anunciar tranquilamente ali no seu instagram no seu facebook edis e a pessoa vai cair pela vai tá mexendo no celular ela vai cair uma página otimizada aqui pensada para que ela e no celular que a gente tá cada vez mais utilizando ele tão prontinho não se esqueça de clicar em atualizar e tá pronta essa nossa página aqui de captura do telegram e isso olha só que fácil que foi muito simples ele já tem toda essa interface para gente fazer otimização para celular e também pra tablet o que me lembra que você quer um material mais completo sobre isso que é extremamente importante hoje em dia tá todo mundo com atenção ele no celular ainda mais se fosse a não ser no facebook no instagram
as suas lides os seus prospectos eles seus possíveis clientes com certeza vão chegar no seu site pelo celular se você quer esse material mais completo tem uma aula bônus ela gratuita fica tranquilo ..
Conheça o curso completo sobre criação de site no botão abaixo.

saviocem

Website:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *