Bem-vindo à segunda parte de redesenhar o cabeçalho responsivo.
E esqueci de mencionar em um vídeo anterior
quando mudei os sinais dos itens do menu aqui,
por algum motivo parece ter afetado a versão para
desktop.
Você pode ver agora que
os textos e não mais maiúsculas,
se algo assim acontecer,
basta voltar a editar o cabeçalho da página inicial.
O que você quer fazer é simplesmente ir para
o elemento do menu.
Então, vou clicar em muitos elementos aqui.
Vá para Estilo, vá para tipografia aqui
e basta clicar nela.
Isso é tudo que você pode ver aqui.
Diz Transformar em maiúsculas.
Então estamos basicamente apenas reafirmando que,
Ei, queremos que o Vamos ser maiúsculas.
Então, vou avançar as atualizações
novamente e vamos voltar, ver a página.
Vamos para a página inicial.
Certo. E lá vai você.
Então, honestamente, não tenho certeza por que isso acontece,
mas no caso de acontecer com você,
basta simplesmente fazer o que acabei de fazer. Certo.
Agora, anteriormente, conseguimos fazer com
a visualização do tablet fosse assim,
o que não é nada ruim.
Mas agora é hora de darmos uma olhada
na visualização móvel.
E você pode ver agora que parece muito
ruim é muito espaço em branco
e o logotipo e o menu, o menu
de hambúrguer online,
mas precisamos consertar o espaço em branco.
Agora, na verdade, esta é a segunda vez que estou
gravando esse vídeo em particular
porque no anterior,
eu realmente consegui consertar
o cabeçalho do celular para ter exatamente o mesmo tipo de
estilo lá você terá
o banner se misturando em segundo plano.
No entanto, decidi ir com uma rota diferente e
em vez disso, usar o mesmo tipo
de cabeçalho que temos para o resto das páginas,
como aquele aqui onde você tem o fundo preto,
decidi usá-los cabeçalho para
o cabeçalho da página inicial na visualização móvel.
A razão é porque eu realmente queria
usar essa oportunidade para mostrar
um truque muito legal que você
pode usar sempre que estiver trabalhando com design responsivo.
Vamos voltar para a página inicial.
E eu quero te mostrar algo, certo?
Vou para Editar com
Elementor editando o cabeçalho da página inicial.
Aqui está a coisa. Ok, vou seguir em frente
e duplicar esta seção de cabeçalho.
Vou clicar com o botão direito do mouse aqui. Duplicados.
Basicamente, agora temos dois cabeçalhos.
A diferença é que vou entrar aqui,
ir para esta seção Editar.
Vou ao estilo,
tipo de fundo, dar-lhe uma cor de preto.
Ok, agora, confira isso.
Vou para o Advanced,
vir aqui para Responsive e,
em seguida, convidar aqui você tem opções de visibilidade.
Quando exatamente você gostaria de mostrar esta
seção com base no tamanho de uma tela?
Vou escondê-lo na área de trabalho.
Sim.
Ainda não queremos gravá-lo na área de trabalho
porque ainda estamos usando
o cabeçalho da página inicial no tablet.
Também queremos escondê-lo até isso.
Mas então queremos mostrá-lo
quando chegar à visualização móvel.
Como tal, agora vou para o
nosso cabeçalho original e fazer o contrário.
Vá para avançado, acalme-se hetero responsivo e,
em seguida, esconda na área de trabalho.
Ninguém quer mostrar,
queremos mostrar até isso.
Mas quando eu for para Hide on Mobile,
deixe-me ir em frente e agora atualiza.
E dê uma olhada nisso.
Vamos em frente agora, veja a página.
Vamos para a página inicial.
Ok, então você pode ver que ainda temos o mesmo cabeçalho.
Mas agora, para a visualização do tablet,
você pode ver que ainda temos o mesmo cabeçalho,
o mesmo cabeçalho no mesmo cabeçalho.
Agora, uma vez que chega à visualização móvel,
agora temos o fundo preto com a
ideia do logotipo do centro e, em seguida, o menu de
hambúrguer lá embaixo.
E então temos o banner da página inicial.
E lá vai você.
Portanto, esse é um truque que você
pode usar sempre que estiver trabalhando com design responsivo.
Você pode optar por mostrar
uma seção específica especificamente na área de trabalho.
E você pode optar por mostrar uma seção específica
especificamente, talvez apenas no tablet ou no celular.
Uma pergunta que eu poderia ter ainda está bem,
por que eu simplesmente não dupliquei
esse cabeçalho específico e, em seguida, simplesmente usei
esse cabeçalho na página inicial e simplesmente o
escondi
na área de trabalho e tablet e , em seguida, exibidos no celular.
Você pode ter duas cabeças
exibidas em qualquer página com elementar,
pelo menos é assim que esse plug-in funciona.
Ok, então se você está pensando,
vou simplesmente duplicar esse cabeçalho
e mostrar dois cabeçalhos na mesma página,
esconder um em desktops ou eles não querem um celular,
não vai funcionar porque na verdade, tentei.
É por isso que eu tive que ir para o cabeçalho da página inicial.
E, em seguida, nesse mesmo cabeçalho,
crie uma segunda seção que agora será
exibida especificamente na visualização móvel.
Mas não terminamos.
Na verdade, quero fazer outra coisa.
Veja, você nem sempre tem que ir com este tomate.
Você tem o logotipo e o centro no topo e, em seguida,
o menu de hambúrguer ou abaixo dele.
Ainda podemos usar duas colunas aqui.
Como fazer logon à esquerda e ter o menu na luz.
Deixe-nos fazer isso.
Vou voltar a editar com Elementor,
o cabeçalho da página inicial e
paletes com para esta página carregar, ok, alguma edição.
O segundo cabeçalho agora.
Mas vou mudar agora para o modo responsivo.
Vamos para a visualização móvel.
Tudo o Kn tem exatamente o que temos. Bem aqui.
Vou fazer isso.
Vou clicar na coluna
segurando o logotipo. Bem aqui.
Vou dizer 50.
Então eu irei aqui para a
coluna do logotipo segurando o logotipo,
desculpe, tudo no menu também.
E então mude o para 50 também
para que eles fiquem lado a lado.
Agora, vamos fazer algumas alterações.
Vou clicar no menu Editar, ícone,
descer, acessar o layout.
Vamos tentar alinhar com o branco.
E então vamos torná-lo grande.
Vamos passar para o estilo.
Aqui embaixo você terá
o gatilho do menu e clique no ícone de fechamento dentro.
E agora Tamanho do Ícone, vou fazer
este acima de 40 pixels.
Keda deve ser grande o suficiente.
E então, para o logotipo,
vamos editar o logotipo também.
O tamanho da imagem está definido como cheio,
alinhado à esquerda.
Vamos ao estilo máximo com 100%.
Certo, vamos em frente agora.
Atualizações. Na verdade, antes de fazermos, vamos segurar.
Vamos também fazer isso.
Quando você clica no menu de hambúrguer.
Este vai ser o trabalho feito.
Mas você pode ver agora que podemos ver o texto.
O texto é todo branco,
então precisamos fazer algumas alterações aqui.
Aqui está exatamente o que vou fazer.
Vou cair
no menu suspenso do sinal aqui.
E, em seguida, cor de fundo.
Vamos com preto,
cor de texto, vamos com branco.
E isso deve ser isso.
Não sei por que não o vemos aqui ainda, mas está tudo bem.
Vou seguir em frente as atualizações.
Vamos voltar, ver a página.
Volte para a página inicial, minimize a janela.
Tudo bem, então agora você pode dizer, Ok,
temos o logotipo à esquerda,
o menu no branco.
Agora, se clicarmos no menu aqui, ele se abre.
Bobby ainda não consegue ver o texto que está interessado.
Certo, vamos voltar e ver o que pode ter acontecido.
E isso vai estar muito interessado.
Não sei por que não vemos os textos.
Tudo bem. Não se preocupe.
Vou entrar aqui para o modo responsivo,
voltar para o Mobile.
Clique no menu aqui,
clique no menu suspenso.
Por que não vemos o texto?
Vamos para o estilo.
Vamos descer aqui para tipografia e uau,
eu não tenho certeza por que o tamanho aqui
em vez de um, mas não deve ser um.
Deve ser um pouco maior que um.
Isso provavelmente é uma falha em pixels.
Então, minhas desculpas, vou dizer ao
problema por que eu um pixel,
às vezes sinto que o elemento está tentando
me impedir de fazer bons vídeos.
Eu, honestamente, não sei o porquê.
Dizia que não vai pixel.
Isso é só, isso é simplesmente bizarro.
De qualquer forma, você pode ver que pelo menos
os itens do menu estão mostrando agora,
Uau, isso é muito, muito interessado,
estou dizendo que o web design pode ser uma ocupação muito
estranha, muito estranha.
Às vezes você sente, você
sente que todos esses elementos têm em mente
que eles não vão voltar.
Tudo bem, então agora eu clico aqui.
Lá vai ele.
Agora você pode ver que eu tenho os itens do menu
e, claro, agora você pode fechar.
Então, é basicamente isso
para redesenhar o cabeçalho responsivo.
Na verdade, vou seguir em frente e fazer
exatamente a mesma coisa para
o cabeçalho global para a visualização móvel,
onde farei a primeira coluna 50% e depois farei
a segunda coluna segurando o item de menu são 50% também.
E também faça o ícone do hambúrguer do menu
um pouco maior.
Então você pode ir em frente e fazer isso também.
Mas é isso para criar os
cabeçalhos responsivos ou para o site.
Obrigado por assistir ao próximo vídeo do evento alemão
, onde agora vamos dar uma olhada em
redesenhar o rodapé para
ser um pouco mais responsável. Então você.