Tudo bem, então vamos começar a trabalhar com elementos aprovados
reconstruindo nosso cabeçalho.
E mostrarei como os modelos
funcionam com elementos são profissionais.
O primeiro que vou fazer é ir até
o back-end e vamos seguir em frente e
desativar o construtor elementar de cabeçalho e rodapé.
Não precisamos mais disso.
Então, vou desativar e vamos dar uma olhada no
cabeçalho inexistente que
não temos mais e, claro, sem rodapé.
Agora você ainda pode ver
as desventuras de uma pá
e, em seguida, os textos corporativos aqui,
este é o tema olá
exibindo esses alimentos são para nós.
Tudo bem, vamos voltar aqui.
E depois de instalar e ativar o Elementor Pro,
você verá aqui onde você
tem um modelo no elementar LM,
você verá o construtor de temas.
Então vá em frente, clique aqui.
E agora você pode ver
os diferentes tipos de modelos que podemos construir.
Vamos construir o cabeçalho.
Então, vou clicar em mais para adicionar o cabeçalho.
O bom do Elementor Pro
é que você terá acesso a
uma grande variedade de modelos que você pode usar.
Você pode vê-los aqui.
Estilos diferentes para o cabeçalho.
Você pode ver alguns, você sabe, você terá
o logotipo à esquerda,
os ícones de mídia social à direita,
o menu principal abaixo.
Assim, você pode inserir rapidamente qualquer um desses modelos
que correspondam ao tipo de design que você deseja.
Mas vou seguir em frente e simplesmente
nos construir do zero porque quero
mostrar como isso
funciona com o elementar por elementos.
Então, vou fechar isso.
Vamos simplesmente reconstruir como antes.
Vou entrar aqui agora,
criar nossas duas colunas. Seção.
Um haverá cerca de 30%, o outro cerca de 70%.
E agora, se eu for aqui para o backend elementar,
e agora você pode ver que temos
o logotipo do site aqui.
Então, vou arrastar esse e soltá-lo para dentro.
Outra coisa é que você pode notar
uma alteração com o elemento elementar pro logo.
Esse é o fato de que você realmente tem
acesso às alturas.
O logotipo no estilo com o
elemento do logotipo fornecido pelo
plug-in do cabeçalho elementar e do construtor de rodapé.
Você não tem essas opções,
então você pode realmente controlar a altura
do logotipo daqui.
Mas não vamos tocar nisso ainda.
Vou até o back-end novamente,
escolher os elementos do Menu Nav aqui,
solte-o aqui dentro.
E, claro, o Menu Principal escolherá.
Vamos nos alinhar aos grandes pontos certos.
Vamos definir este para celular.
Lembre-se, vamos dar estilo à nossa tipografia.
Vamos fazer isso em maiúsculas.
Vamos voltar para a própria sessão principal
segurando as duas colunas.
Vamos fazer com que seja largura total.
Para o logotipo, vou apenas ir em frente
e adicionar um fundo preto.
Então, pelo menos temporariamente, podemos ver o logotipo.
Certo, muito grande.
Vamos voltar aqui.
Para a largura máxima, vamos apenas seguir em frente e escolher 75%,
assim como fizemos anteriormente.
Saiba, cortado para usar a altura neste
caso, mais uma mudança.
Vamos alinhar os itens do menu na vertical,
alinhá-los ao meio.
E lá vai você.
E, claro, a cor também.
Esqueci disso.
Vamos mudar a cor. Carrapatos ClO2 primário.
E isso é isso.
Agora dê uma olhada nisso.
Aqui em baixo você publicou.
Quando você pressiona Publicar,
é aqui que os elementos são pool e eu direi, ei,
onde você gostaria de exibir esse modelo específico?
Vamos adicionar a condição,
não o antiácido porque
isso vai ser para a página inicial.
Vou entrar aqui agora e escolher o singular.
E então, para singlets dirá,
ok, todas as páginas individuais, não,
queriam dividir especificamente na primeira página.
Então, vou escolher esse.
E isso é que vou seguir
em frente e simplesmente salvarei e fecharei.
E é isso.
Vamos prosseguir agora e atualizar.
E vou te mostrar algo muito, muito interessante.
Tudo bem, deixe-me fazer uma atualização difícil.
Então, aqui está uma linha mais fina.
Você pode ver que temos
os itens do menu aqui aparecendo.
Oh, a propósito, o efeito de focalização que ele pode ver,
o traço aparente no
item do menu de idade que é fornecido pelo pool Elemental,
menu, elemento de menu por padrão.
Assim, você pode alterar isso no efeito de focalização se quiser
aborrecer o gerente aqui agora
é que não vemos mais o logotipo.
Podemos ver os itens do menu, mas não vemos o logotipo.
O que está acontecendo aqui?
É aqui que eu gostaria de apresentar a você
o conceito do índice Z.
Agora vamos voltar aqui.
Em primeiro lugar, movemos
a cor de fundo para o cabeçalho.
Não precisávamos mais.
Mas dê uma olhada nisso.
Vou passar para o avançado.
Aqui você tem isso.
Opção, mas muito, muito importante,
muito poderosa chamada índice z.
Vou dar a este um valor de
duas atualizações. Vamos voltar aqui.
Vamos fazer uma atualização muito difícil.
E assim.
Agora você pode ver o logotipo aparecendo.
Diretoria.
Espere um segundo.
O que exatamente aconteceu?
Veja esse valor de índice Z aqui.
Sempre que você tiver um elemento,
uma seção sobrepondo outra seção,
talvez você queira ser capaz de dizer ao Elemental
quais desses elementos você
deseja mostrar primeiro basicamente, o que não vai.
Você quer trazer na frente do outro?
Neste caso, agora temos
a imagem binária sobrepondo nosso cabeçalho.
Queremos que o cabeçalho seja influenciado para que possamos
ver o logotipo e o menu principal.
Como tal, você terá que dar
um número de índice z mais alto
ao elemento que você deseja que apareça na frente.
Desde que demos ao cabeçalho o valor do índice Z de dois.
Deixe-me realmente ir para a seção segurando nossa banana.
Então deixe-me editar com elementar.
Vamos para a seção do navegador aqui, avançado.
Você pode ver aqui que não temos nenhum valor para
o índice Z para a seção que contém o banner.
Mas se eu vim aqui agora
e eu dou um valor de três.
Agora você pode ver que não vemos mais o logotipo,
também não vemos mais o menu principal.
Isso porque o valor do índice xin
desta seção que contém
a banana agora é maior que dois.
Mas se eu der um agora você pode ver que temos
o menu principal e o logotipo.
É exatamente assim que o índice Z funciona.
Agora, uma pergunta que você pode ter uma
pergunta muito boa é,
Alex, espere um segundo.
Antes de darmos o valor desse
índice de dois para o cabeçalho.
Como ainda podemos resolver o menu principal?
Mas não vimos o logotipo.
Serei 100% honesto com você.
Não sei exatamente por que isso aconteceu.
Suponho que talvez haja algum código
dentro de elementos que sempre dá
prioridade ao menu principal para sempre mostrar.
Novamente, pode ser algo muito,
muito simples que eu simplesmente estou perdendo.
Não tenho certeza no limite.
Peça desculpas por isso, mas eu gostaria de ser honesto com você.
Mas apenas pegue pelo que é.
Sempre que você quiser introduzir um tipo de situação
em que você tem um elemento sobrepondo ao
outro e você deseja que
os elementos automáticos por trás do show na frente
simplesmente dê a ele um valor de índice Z mais alto.
Uma coisa que você deve ter notado é
o espaço em branco repentino que não está
aparecendo aqui no topo.
E isso acontece porque
elementar, por padrão, em muitos casos,
adicionaremos um padrão de dez pixels ao redor dos elementos.
Então, uma maneira de ignorar esse tipo de problema,
é simplesmente editar
a seção que tem
o espaço em branco neste caso agora é meu cabeçalho.
Então deixe-me ir em frente e editar o cabeçalho elementar.
Vou para esta seção em si.
Então edite a seção e, em seguida,
convide aqui onde você tem a lacuna de colunas.
Vou dizer que não há lacuna,
nenhuma lacuna.
Vamos atualizar basicamente dizendo que não há lacuna.
Estamos dizendo: Ei, não queremos nenhum padrão em nenhum lugar.
Agora, isso será lido no espaço em branco.
Mas agora note que porque nós dissemos Não, sem lacunas.
Agora, a coluna segurando um logotipo não tem mais
nenhum padrão entre o logotipo e a parte superior da tela.
Então, simplesmente vá para a coluna segurando o logotipo.
Vá para o padrão avançado aqui,
apenas damos a ele, digamos, dez pixels de preenchimento na parte superior.
Atualizações que resolverão o problema ou incidências.
Portanto, esses são alguns dos problemas muito pouco
irritantes que você pode encontrar
ao usar elementar e como ignorá-los.
Mas quase pronto.
Vamos seguir em frente e criar o cabeçalho móvel para
nosso cabeçalho para a primeira página.
E é exatamente a mesma coisa que fizemos anteriormente.
Vamos entrar aqui agora,
duplicar a seção inteira.
E vamos sair, desça aqui para a
seção de edição de cabeçalho móvel.
Vamos ao estilo da cor clássica de preto.
E então o que precisamos? O que mais precisamos fazer?
Precisamos mudar para o modo responsivo.
Vá para celular.
E agora aqui,
edite a coluna, vamos dizer 50%.
Faça o mesmo para a coluna segurando o menu principal.
E depois diga 50%.
Podemos editar o menu aqui,
alinhado à direita.
Talvez o torne um pouco maior.
Então, vamos para o estilo.
Venha aqui até o botão de alternância.
O tamanho, torná-lo um pouco grande.
Para o logotipo também.
Vá para estilo, largura máxima, 100%.
Sim, também precisamos fazer o show
hide ou opções, tão avançado.
Vamos para o responsivo.
Para esta seção e esta seção segurando
o logotipo e o menu de demanda.
Vamos entrar aqui para o
Advanced e depois responsivo.
Vou dizer esconder no convés, Pare,
Oculte no tablet, mas depois mostre no celular.
Vamos agora para o antigo cabeçalho original,
edite esta seção.
Vá para Avançado, vá para responsivo.
Simplesmente se esconda no celular, e é isso.
Então, vamos avançar e atualizar.
Espero que eu não tenha esquecido
de nada que voltou aqui.
Atualize a página.
Vamos ver o que temos.
Certo, tão original à frente ou eu me atrevo.
E esta é uma visão oblíqua parecendo boa.
E agora esta será a visão móvel.
E David é exatamente como fazer exatamente a
mesma coisa no produto Elementor que fizemos
com o cabeçalho e o rodapé Elementor são plugins.
Uma última coisa antes de eu fechar este vídeo,
vamos para o back-end.
Agora nos modelos.
Desculpe, sob o construtor de temas
em vez de nossos modelos em um construtor de temas,
é aqui que você verá o novo cabeçalho que você criou.
Você pode clicar dentro para editar.
Mais uma vez.
Então, se você quiser mudar o nome,
é muito, muito simples.
Você vem aqui até o botão Configurações
e, em seguida, aqui,
podemos chamar este de cabeçalho inicial.
Podemos chamá-lo de casa, casa,
o cabeçalho inicial basicamente.
E então podemos dar ao cabeçalho da ordem o nome global.
Se você quiser alterar as condições para este plano,
a cabeça ou talvez você queira usar
o mesmo cabeçalho em uma página diferente.
Aqui em baixo, você tem as opções de salvamento, você clica lá.
Agora aqui você terá acesso à tela.
Nossa opção de condições.
É aqui que agora você pode entrar,
agora talvez mudar para uma página diferente e assim por diante.
E isso é basicamente para
criar o cabeçalho da página inicial,
tanto nas versões desktop quanto para dispositivos móveis
usando o Elementor Pro.
Obrigado por assistir.
Vejo você na próxima aula.