Tudo bem, agora vamos em frente e
construir o cabeçalho para o nosso site.
E isso é exatamente o que parece agora,
e não parece nada bom.
Isso é o que estamos tentando realizar.
Você pode ver o cabeçalho aqui, temos
o logotipo à esquerda e,
em seguida, temos o menu principal à direita.
No entanto,
mostre algo como se eu fosse para outra página,
digamos que a página Sobre como exemplo,
aqui você pode ver que o cabeçalho é diferente.
Este tem um fundo preto,
enquanto o cabeçalho na
página inicial não tem nenhum fundo,
é simplesmente mesclado com a imagem de fundo aqui,
basicamente, precisamos criar 82 cabeçalhos diferentes.
Um especificamente para a página inicial e depois o
outro para o resto de nossas páginas.
Agora, como fazemos isso?
Antes de mostrar isso,
deixe-me arrastar o site de demonstração para longe.
Agora, antes de mostrar como fazer isso,
quero mostrar outra coisa.
Se eu fosse para Editar com Elementor,
fui para as configurações do site.
Além de poder definir
seus telefones globais e suas cores e tudo mais,
você também pode fazer alterações
identidade do site aqui, temos Configurações.
Se eu clicar dentro da densidade aqui,
também podemos alterar o nome do site.
Vou chamar minha viagem de passaporte.
Esse é o nome do site.
E então o slogan será quando viajar encontrar aventura.
Para o logotipo, vou escolher o logotipo aqui.
Vamos inserir esse.
E então, para o Phi de ícone,
vou escolher a imagem de TI com a que
o fundo verde.
Vou inserir isso.
E lá vai você, temos a identidade do nosso site.
Agora você também pode vir aqui para o
cabeçalho e fazer diferentes tipos
de alterações, você pode optar por ocultar o logotipo,
mostrar o slogan, aumentar
a largura do conteúdo ou reduzir
a largura do conteúdo depende de você.
Mas como vamos criar nossos próprios cabeçalhos personalizados,
não precisamos mudar nada aqui.
Então, vou seguir em frente agora e simplesmente
atualizar. E então vou verificar isso.
Certo, vou voltar para o backend Sair to Dashboard.
E agora vamos criar nosso cabeçalho.
Vou vir aqui para nossos pais.
Aqui você verá elementos ou alimentos prontos são construtores.
Isso é do plugin. Vou clicar lá.
E agora vou clicar em Adicionar novo.
E agora vamos chamar isso de cabeçalho da página inicial.
Então aqui, onde você tem o tipo de modelo.
Vamos escolher o cabeçalho,
e então podemos escolher, ok,
onde gostaríamos de exibir esse cabeçalho?
Como será especificamente para a primeira página,
vou escolher aqui você tem alvos específicos.
Vou escolher páginas específicas e
convidar aqui simplesmente digitar em casa.
E lá vai você.
Agora, neste cabeçalho específico, só será
exibido na página inicial.
E, em seguida, para funções de usuário aqui, você pode escolher, ok,
talvez você queira exibir esses cabeçalho apenas para
que os usuários conectados sejam usuários desconectados
ou edições ou você tem muita flexibilidade.
Só vou manter isso em branco porque queríamos
ser para todos.
Agora aqui, você tem
esse layout habilitado para opção para nós modelo.
Agora, a coisa com o Elementor é que, além
do modelo padrão e um fornecido pelo seu tema,
elementos, que oferece dois modelos personalizados.
Um deles é chamado de dados da tela elementar, largura total,
mais simples, significa que
seu conteúdo pode se estender até as bordas da tela.
Então, basicamente, vai a largura total que
eu sou como se nenhuma margem fosse padrão.
Elemental Canada como implementos que você
não terá nenhum cabeçalho ou rodapé.
É basicamente um elemento em branco ou nossos modelos,
não vamos andar com um modelo de tela.
Portanto, realmente não há necessidade de habilitar esse layout,
mas vou escolher os elementos
do modelo de largura total.
Vamos em frente agora e clique em Publicar.
Agora vou clicar em editar com o Elementor.
Então, o que estamos tentando alcançar aqui é isso,
deixe-me trazer de volta o site de demonstração.
Basicamente, será uma seção com duas colunas.
O da esquerda, a coluna esquerda teremos o logotipo,
enquanto a coluna à direita,
teremos o menu principal e também queremos que
a coluna na luz
que contém o menu principal tenha mais largura .
Então confira isso.
Certo, aqui, vou
clicar no botão Plus aqui.
E agora podemos escolher nossa estrutura.
E eu vou escolher esta divisão aqui.
Esta terá,
a primeira coluna terá um terço da seção inteira,
enquanto a segunda coluna terá dois terços.
Então, aqui, já que estamos editando a seção,
como você pode ver, para a largura do conteúdo,
poderíamos realmente ir a toda a largura se você quisesse.
Mas vou usar a caixa e vou
escolher 1240 pixels.
Esta é apenas minha preferência pessoal.
Eu adorei 1240 pixels.
Agora, aqui para a primeira coluna,
vou clicar dentro.
Vou rolar todo o caminho até aqui.
E estamos tentando adicionar o logotipo.
Então, vou adicionar o logotipo do site.
Clique em, solte-o para dentro.
E agora temos nosso logotipo.
Agora você pode ver porque o logotipo tem
texto branco e este é um fundo branco.
Mas apenas tenha paciência comigo.
Certo, vou escolher.
O tamanho da imagem aqui eu vou ficar cheio por enquanto.
Em seguida, vamos seguir em frente e
clicar no botão Editar desta seção.
Tudo bem, então eu cliquei lá.
Vou voltar ao estilo.
E então ele foi para onde você começou a digitar.
Vou escolher o clássico.
Agora vou escolher a cor preta.
Então agora você pode realmente ver o logotipo, certo? Certo.
Agora vamos para a segunda coluna.
Vamos adicionar nossos elementos de navegação.
Então, escrevendo no menu de navegação,
clique em arrastar, drogue isso dentro.
E então você pode ver o menu principal selecionado por padrão.
No entanto, quando é para fazer um grande número de alterações,
observe aqui que permanecerá no menu principal.
O texto está em letras maiúsculas, está em branco.
Também está alinhado à direita e também no centro.
Então, precisamos fazer por finas.
Vamos voltar aqui. A primeira coisa que vou fazer
é ao editar o menu de navegação aqui,
você tem layout clicando lá.
E agora vamos escolher alinhar à direita.
Como você pode ver agora, está à direita.
Agora vamos passar para o estilo.
E vamos vir aqui para tipografia.
Clique no botão Editar.
Com transformação não peluda, escolha maiúsculas.
Certo?
E, em seguida, para a cor do texto,
vamos clicar no ícone global ali
e, em seguida, escolher principalmente para Branco.
Bom.
Mas agora, como alinhamos
os itens do menu no meio verticalmente?
O que você quer fazer aqui é clicar no
Editar potência da coluna aqui,
neste botão específico aqui, você clica lá.
E agora aqui você pode ver que temos alinhamento vertical.
Vamos escolher o meio.
Lá vai você.
É isso.
Mas ainda não terminamos.
Para o logotipo.
Vamos clicar no botão Editar para o logotipo do site.
E então o alinhamento aqui,
vamos para a esquerda.
Como se você não conseguisse ver a diferença ainda,
mas apenas fique comigo.
Vamos escolher esse para a esquerda.
Ok, vamos em frente agora e atualizamos.
Agora vamos dar uma olhada no que temos.
Veja a página.
E lá vai você.
Agora você pode ver
nossa página inicial tem esse cabeçalho específico aqui,
mas depois evolui para ir para,
digamos que a página Sobre como exemplo,
você pode ver que não temos esse cabeçalho.
Se quiser ir para a página de contato.
Como exemplo, você pode ver que não temos esse cabeçalho.
Então, aqui,
a página inicial agora tem
esse folheto específico com o fundo preto, o
logotipo e, em seguida, os itens do menu.
Agora, para arredondar isso, eu realmente vou fazer
algumas mudanças.
Vamos voltar para a seção.
Certo, e eu sei que disse que
a largura do conteúdo era de 1240 pixels,
mas fiz alguns testes adicionais,
e acho que é melhor irmos com toda a largura.
Então, vamos com largura total por enquanto.
Então, esta coluna, a que está segurando o logotipo,
vamos reduzi-lo para 2525% por cento.
Enquanto a coluna segurando os itens manuais terá 75%.
Então, vamos também fazer uma alteração no logotipo.
Vou clicar em Editar logotipo.
Vamos para o estilo.
E então, para a largura máxima,
vamos definir isso para 75%.
E uma pergunta que você pode ter é
por que, obviamente, a largura máxima e não a largura real.
Aqui está a coisa.
Quando você define a largura do logotipo,
o logotipo sempre terá essa largura.
Nós sem Deus, do tamanho da tela.
Você está trabalhando com largura máxima.
Você está basicamente dizendo: Ei,
o logotipo nunca deve exceder essa largura.
Em seguida, em situações em que o tamanho da tela não é
grande o suficiente documentado, a largura total do logotipo
reduz o tamanho da
largura basicamente máxima é muito melhor para o design responsivo.
E você sempre quer ser responsivo.
Então, vamos definir isso para 75 pixels.
E agora, se atualizarmos,
se dermos uma olhada no nosso cabeçalho,
você pode ver agora que ele se parece
muito parecido com o que temos
aqui no site de demonstração.
A última coisa a fazer é duplicar
esse cabeçalho para o segundo cabeçalho.
Então, basicamente, ele tem o que vamos fazer.
Ok, bem, vou voltar para o backend.
Em vez de criar o segundo cabeçalho
para o resto do site,
simplesmente entraremos aqui e, em seguida, você verá
duplicatas da EA ou esses são os
átomos essenciais duplicados todos.
Vou seguir em frente agora e simplesmente
duplicar o cabeçalho da página inicial.
Agora você verá rascunhos Elementor.
Vamos em frente e clicarei em Editar.
E então veremos algumas mudanças aqui.
Vamos chamar isso de cabeçalho global.
Você pode dar qualquer outro nome que quiser,
mas vou chamar esse cabeçalho global.
E então aqui,
pep de modelos, Sim, é o cabeçalho.
Em seguida, a exibição está ligada.
Vamos com o site inteiro.
Mas então, para estar no lado seguro,
vou entrar aqui e dizer adicionar regra de exclusão.
Estamos dizendo, Ei, não exiba este
na página inicial aqui embaixo.
Ele tem uma página específica.
Vou entrar aqui e simplesmente digitar em casa,
certificando-se de que esse cabeçalho nunca será
exibido na página inicial.
Ele só será exibido em todo o site.
E lá vai você.
Então modele largura total também.
Vamos em frente agora e clique em Publicar.
E lá vai você.
Então, só para voltar aqui,
vamos atualizar esta página.
Então esse é o cabeçalho da página inicial.
Mas agora dê uma olhada nisso.
Ok, se eu fosse para qualquer outra página,
digamos que a página Sobre como exemplo.
Agora, você verá que
o cabeçalho duplicado não está sendo exibido.
Vamos para a página Artigos também.
Você pode ver novamente, o cabeçalho duplicado não está sendo exibido,
apesar do fato de termos dito que
o cabeçalho duplicado para mostrar
em todas as páginas, exceto na página inicial,
o que exatamente está acontecendo aqui.
E acredite em mim, levei várias horas.
Apenas a China descobre exatamente
por que isso não estava funcionando, mas eu descobri.
O que você quer fazer é voltar
para o cabeçalho duplicado aqui.
Este é o hit duplicado a cada criado.
O que você quer fazer é isso, ok,
apenas tente iniciar, na verdade,
deixe-nos voltar para
o back-end para que você não fique confuso.
Tudo bem, daqui, daqui,
basta clicar em editar com Elementor.
Edite com Elementor.
E então o que você vai fazer é aqui,
apenas iniciar qualquer tipo de mudança.
Digamos que você adicione os elementos de cabeçalho aqui,
por exemplo, ok, solte isso lá.
Agora você vê que o botão de atualização está disponível?
Certo, vou voltar aqui, fechar isso.
O ponto principal aqui é que você deseja
fazer algum tipo de alteração no
cabeçalho para que
este botão Atualizar descida seja acionado.
Agora podemos atualizar.
E agora ele deve funcionar.
Então, se for solicitado a voltar para a minha página de artigos
aqui e agora atualizar.
Agora você pode ver que o cabeçalho duplicado agora está
mostrando que volto para a página inicial,
é exatamente o mesmo cabeçalho.
Vou para a página Sobre.
E, claro, é exatamente o mesmo cabeçalho também.
Isso é exatamente o que você deve
fazer sempre que tentar duplicar
seus cabeçalhos e rodapés nas duplicatas.
Basta entrar em editar com Elementor,
adicionar qualquer elemento, remover
esse elemento apenas para acionar o botão de atualização.
Atualizar.
E agora esse novo cabeçalho ou rodapé duplicado
agora estará em pleno efeito.
Então é isso para o vídeo que criamos nossos dois cabeçalhos.
Obrigado por assistir e verei você na próxima aula.