Tudo bem, então vamos começar a projetar
nosso cabeçalho para ser responsivo
e o Lambda mostra os estados como está agora.
A área de trabalho está praticamente pronta.
Quando começamos a minimizar a tela do nosso navegador.
Você pode ver agora que, neste momento
essa seria a visualização do tablet.
E você pode ver que o logotipo se torna muito menor.
O menu também se transformou no
tradicional menu de hambúrguer.
E está tudo bem, mas definitivamente pode ser melhorado.
Mas então, se formos um pouco menores agora você pode
ver que é onde as coisas parecem muito, muito ruins.
Esta é a visualização móvel,
aquela para o celular.
Então, precisávamos fazer
algumas mudanças aqui. Vou seguir em frente.
E, na verdade, antes de fazer isso,
deixe-me mostrar o outro cabeçalho, o cabeçalho global.
Vamos para a página de contato e você notará
que este é um pouco melhor.
Temos o fundo preto e, em seguida, na visualização móvel,
mesmo que o menu de hambúrguer
esteja desalinhado com o logotipo,
ainda é muito melhor porque não temos
nenhum espaço em branco no topo.
Tudo bem, vou ir em frente e
editar os cabeçalhos da página inicial.
Vamos para Editar com Elementor
e, em seguida, a página inicial para cima.
Agora vamos mudar para o modo responsivo aqui embaixo.
Modo responsivo, vamos alternar para a tabela primeiro.
Agora, eu quero te mostrar algo muito rápido.
Tudo bem, deixe-me voltar ao responsivo.
Por padrão, seu menu principal ou
um menu em destaque ativado se transformou
no menu de hambúrguer na visualização do tablet
, no entanto, note que você
nem sempre precisa seguir as configurações padrão.
Neste momento, se eu mudar para a mesa, como você pode ver,
ela virou para o menu de hambúrguer.
E isso porque se eu clicar e
editar o menu principal no layout, você verá os
tamanhos de tela de tablet de ponto de interrupção positivo dos EUA
tamanhos de tela de tablet de ponto de interrupção
de 1025 pixels e abaixo.
Claro, o menu de hambúrguer borra.
Se não quisermos fazer isso,
vou mudar este para a visualização móvel, em vez disso.
Uma visualização de tablet. Ainda teremos
o menu principal mostrando e só nos transformamos
no menu de hambúrguer
assim que chegarmos à visualização móvel.
Vamos atualizar em frente.
E vamos ver o que essa pequena,
pequena mudança fez por nós.
Veja a página. Volte para a página inicial ou caso.
Então, agora, neste momento,
esta é a visualização do tablet.
E você pode ver que na verdade não é tão ruim assim.
Você não precisa mudar para o celular, para o
menu de hambúrguer uma vez, que é tablets.
Claro, se você tivesse muitos itens de menu,
digamos 678 itens do que anos,
obviamente você não terá espaço suficiente.
Mas instituições onde você tem
quatro ou cinco itens de menu,
é perfeitamente bom para sua exibição.
Eles como estão no modo tablet.
Há duas mudanças que vou fazer aqui.
Um seria aumentar
o tamanho do logotipo apenas um pouco.
E então também podemos tentar reduzir o tamanho dos
itens do menu apenas um pouco.
Vamos fazer isso muito rápido. Vou
voltar para o cabeçalho da página inicial.
Vamos mudar para responder SUV, tablet de ponta.
Tudo bem. Vou clicar no menu.
Sinto muito, o logotipo aqui no logotipo da UT vai para Estilo.
Agora observe agora
que a dimensão aqui foi configurada para tablet.
Como você pode ver, é tudo tablet, tablet SASE.
Então aqui vou mudar o tamanho para 100%.
Vamos mostrar o tamanho total do logotipo.
Agora, para o menu principal,
sei que está tudo em branco.
Você não pode ver, mas apenas tenha cuidado comigo.
Vou clicar em editar, no
menu principal, ir para o estilo.
Então vamos à tipografia aqui.
Agora, assista a isso, certifique-se de que
o tamanho aqui esteja definido para tablet.
Vamos fazer esses 114 pixels
um pouco menores do que o normal.
Vamos atualizar.
Agora vamos dar uma olhada.
Adicione o novo cabeçalho da página inicial e o modo responsivo.
E lá vai você.
Lá vai você.
Então, até este ponto, está parecendo muito bom.
Obviamente, vamos fazer algumas grandes mudanças na
manchete do banner,
o vencedor que estamos viajando, é aventura.
Vamos reduzir o tamanho,
mas apenas preste atenção ao cabeçalho real.
Ok, parece bom até a visualização móvel,
que agora terá que continuar.
Mas, por enquanto, sábio,
isso está parecendo muito bom.
Vamos agora dar uma olhada no
cabeçalho do cabeçalho global global.
Vamos escolher uma página, vamos escolher a página Artigos.
E a partir daqui vamos em frente para
editar o cabeçalho global.
Vamos lidar com o modo tablet primeiro.
Então, vamos vir aqui para o seu responsivo. Vá para o tablet.
Tudo bem, vamos lidar com os pontos do pão.
Vamos mudar esse para celular.
E isso só fará exatamente a mesma coisa
para o estilo também.
Vamos nos alinhar à direita,
para o menu principal,
alinhamento com o branco e depois o estilo.
Vamos vir aqui para tipografia.
Certifique-se de que isso esteja configurado para tablet.
Então, vamos com 14 pixels também.
E lá está ele.
Ok, Next vai ser o logotipo.
Não vamos esquecer, precisamos fazer o logotipo ou 100%.
Certifique-se de que isso esteja configurado para tablets.
100%, ótimo.
Agora vamos mudar para a visualização móvel.
A única coisa que precisamos fazer aqui é delinear
o menu de navegação para o centro.
Na verdade, não deveríamos ter tocado
nos alinhamentos no modo tablet,
então está tudo bem, vamos simplesmente definir isso de volta.
Vou para o Layout de conteúdo
e, em seguida, o alinhamento aqui.
Vamos apenas mantê-lo no centro.
Acho que eles vão ser melhores.
Tudo bem. É isso.
Vou seguir em frente e atualizarei.
Vamos dar uma olhada no que temos.
Vamos ver a página.
Vamos escolher a página Artigos.
Reduza o tamanho. O que temos aqui?
Tudo bem, é tablet,
tablet está com boa aparência.
E agora aqui esta será a visualização móvel,
mas parece haver um desalinhamento
com o logotipo e, em seguida, o próprio menu.
Então, vamos consertar isso rapidamente.
Vamos voltar.
Precisamos tornar o logotipo, na verdade
talvez um pouco menor.
Acho que é um pouco grande demais também.
Então, vamos fazer essas mudanças.
Volte para o celular responsivo.
Ok, vamos editar o primeiro alinhamento do logotipo aqui,
vamos configurá-lo para o centro.
Digamos que este seja um dissidente.
E então talvez o tamanho,
talvez um 100% seja um pouco grande demais, sem pensar nisso.
Então, vamos reduzir isso para 75%.
Vamos em frente e datas.
E vamos ver como isso será.
Vamos voltar a ver a página.
Artigo. Eu minimizo, ok,
muito melhor agora e agora você pode ver
o alinhamento está no centro.
E lá está ele.
Então, parece muito melhor,
muito melhor agora.
Claro, ainda vai fazer mais algumas, mais algumas
mudanças nos cabeçalhos,
mas por enquanto pelo menos está parecendo
muito melhor do que o que tínhamos inicialmente.
Tanto o cabeçalho da página inicial
quanto o cabeçalho global estão com uma aparência melhor.
Vamos lidar com o espaço em branco
no cabeçalho da página inicial no próximo vídeo.