No vídeo anterior, criamos com sucesso
nossos dois cabeçalhos,
um para a página inicial
e outro para o resto do site.
Mas agora vamos criar nosso rodapé global.
E a boa notícia aqui é que só precisamos criar um
rodapé e isso é
exatamente o que estamos tentando criar.
Vamos ter essa imagem aqui à esquerda e, em
seguida, algumas informações de contato, ícones de mídia social.
E então o direito autoral lateral
basicamente aqui embaixo na parte inferior.
Vamos seguir em frente e fazer isso rapidamente.
Vou clicar em Adicionar novo.
E vamos chamar isso de rodapé global.
Selecione a opção aqui será Rodapé
e, claro, será exibida porque todo o site.
E mudaremos o modelo para largura total.
E lá vamos nós.
Vamos em frente Publicar.
E agora vamos editar com o Elementor.
Agora, eu quero que você preste muita atenção
a uma enorme diferença
entre o cabeçalho e
o rodapé e o cabeçalho que temos aqui.
Basicamente, temos apenas duas colunas.
Aquele à esquerda segurando o logotipo,
o da direita segurando o código, o menu principal.
Mas para o rodapé, observe
que é um pouco diferente.
Sim, ainda temos duas colunas,
uma segurando esta imagem,
a outra segurando as informações de contato.
Mas aqui em baixo,
esse texto de direitos autorais é, na verdade, uma terceira coluna.
Não está abaixo desta primeira coluna aqui.
Na verdade, é uma coluna separada por conta própria.
Para criar esse tipo de seção de várias colunas,
vamos fazer uso de
um novo elemento chamado seção de e-mail no questionário.
Na verdade, é o primeiro elemento que você tem,
este aqui em uma seção.
Vou clicar em arrastar e depois soltá-lo dentro.
Ok, então primeiro as coisas, porém,
é que vou seguir em frente e editar a primeira seção.
Se você está tendo problemas para
clicar na seção dos pais,
basicamente, você sempre pode usar seu navegador aqui
e você pode ver aqui mesmo que temos
esta coluna de seção e depois interseção.
Então, vou clicar na seção agora mesmo.
Vamos alterar a largura do conteúdo
aqui para largura total.
E então a lacuna das colunas.
vamos escolher nenhuma lacuna.
A razão é que, se você prestar muita atenção,
você pode ver agora a maneira como você tem a imagem,
não há espaço,
não há margens de preenchimento qualquer.
A imagem está diretamente
ali na borda da parte inferior.
É aí que estamos escolhendo nossa lacuna de nós aqui.
Não queremos ter nenhuma lacuna.
O mesmo vai acontecer com a seção interna também.
Mas antes de saltarmos lá,
vamos adicionar uma cor de fundo.
Vou para o tipo de plano de fundo.
E é claro que vamos escolher são pretos.
Então, vou ter um fundo preto para o rodapé.
Em seguida, agora serão as seções ina.
Vou clicar na seção interna aqui a partir da
navegação para novamente,
vamos ir para toda a largura.
E, em seguida, colunas, colunas lacunas aqui.
Vamos dizer que não há lacuna também.
Tudo bem, incrível.
Agora vamos seguir em frente e
lidar com a primeira coluna aqui,
que terá nossa imagem.
Então, vou soltar o elemento de imagem lá.
Escolha esta imagem aqui.
E caso você esteja se perguntando que isso é realmente no Perú.
É um lugar chamado Horeca kina ou que é Cocina.
Não sei exatamente como é baseado em finanças,
basicamente como uma área desértica.
Você pode fazer a placa de som e, e assim por diante.
Lugar incrível para conferir.
E vou ir em frente e mudar este para tolo.
Mas aqui está o mais fino, certo?
Vamos mudar as larguras da coluna.
Vamos fazer a primeira coluna aqui.
Na verdade, vamos torná-lo um pouco mais amplo.
Então, vamos até 63 pixels,
63% na verdade, então 63% e depois 37% para a segunda coluna.
Mas vamos fazer uma alteração na imagem.
A imagem é muito alta.
Então, vamos em frente e edite a imagem.
E então vamos aqui para estilizar
e estamos aqui,
vou escolher 450 pixels.
Então, é quase alto o suficiente e grande o suficiente.
Ok, essa é a imagem ali mesmo.
Agora, estou apenas fechando o navegador.
Para a segunda coluna,
vamos adicionar uma série de elementos diferentes.
O primeiro aqui seria o elemento de cabeçalho,
e este será nossos contatos.
Vou digitar tudo em letras maiúsculas. Contato.
Vai ser um H2.
Pelo estilo da sabedoria.
Vamos para a cor do texto
e simplesmente escolhemos primário.
Agora vamos escolher outro cabeçalho.
Mais uma vez.
Vou deixá-lo logo abaixo
do contato ali mesmo.
Este vai ser um telefone.
Mais uma vez, letras maiúsculas para telefone.
No entanto, vamos fazer desta uma idade de três anos.
Na verdade, vamos torná-lo um H4.
Vamos torná-lo um H4
e vamos adicionar algumas informações.
Então, o que vou fazer aqui é simplesmente clicar com o botão direito
do mouse e , em seguida, simplesmente duplicar.
E agora vamos fazer desta uma idade de cinco anos.
O número de telefone real será um h5.
Então, vamos mudar o número aqui para
090 espaço 645, espaço 3417.
Esse será o número de telefone.
E vou voltar ao estilo e à topografia.
Na verdade, vamos escolher textos.
Eu prefiro esse padrão de texto,
então vamos escolher esse.
Então também vamos duplicar o telefone.
Mais uma vez, arraste-o aqui logo
abaixo do número de telefone.
Também vamos duplicar o
número de telefone em si.
Certo, e depois arraste o telefone NIF.
Agora, opa, desculpe, isso foi até lá em cima.
Vamos trazê-lo de volta aqui.
Ok, agora vamos editar o telefone,
o segundo telefone aqui.
Vamos mudar este para e-mail.
Isso é basicamente como andar inteligente.
Basta duplicar sempre que puder
e simplesmente faça as edições necessárias.
Agora vamos editar o número de telefone.
Vamos mudar o e-mail.
Meu e-mail é Alex.
As portas de passagem se tornarão não parecem corretas.
Alex no passaporte travel.com.
Certo. Sim. Isso está correto.
E então, por último, mas não menos importante,
vamos ter um endereço.
Vamos também duplicar o e-mail,
adicionando mais uma vez.
Vamos arrastar, soltar isso aqui.
Altere o e-mail também.
Endereço IP.
Agora, para o endereço real,
vamos usar um editor de texto em oposição a um oculto,
porque haverá várias linhas de textos que vão
soltar o editor de texto ali mesmo.
Eu tenho um endereço muito interessado aqui.
Não sei se este é realmente
um endereço real. Não me lembro.
Mas cabe em r2, Emile Zola.
Agora vou pressionar Shift Enter, não apenas anti,
porque se você pressionar Enter você terá um espaço duplo, use a
terá um espaço duplo,
tecla Shift e depois enter.
Então você tem um espaçamento de linha única.
E agora vou digitar 609002, leon,
Shift Enter novamente.
E então vamos digitar na França todos k.
e vamos passar para a tipografia de estilo.
Vamos com mensagens de texto.
E, claro, a cor do texto será primária.
E lá vai você.
E por último, mas não menos importante,
teremos nossos ícones de mídia social.
Muito, muito, muito importante.
As mídias sociais estarão aqui em baixo no geral.
Vamos adicionar uma mídia social.
E, claro, para o Facebook, bem,
vamos mudar a cor
de código eficiente para personalizado.
A cor primária aqui seria branca,
a cor secundária seria preta.
Basicamente, você terá o fundo branco e, em seguida,
o ícone real em si será preto.
Se este fosse um site real que você está construindo,
é aqui que você adicionaria o link
à sua página do Facebook.
Isso é para o Facebook.
Vamos fazer exatamente a mesma coisa para o Twitter também.
Por que será o parâmetro cor
preta como uma cor secundária.
O último banal é o YouTube ou o traje de cor fúcsia.
A cor primária é branca,
cólon secundário é preto.
E então a forma aqui,
vamos mudar sua forma para circular,
à direita, e depois alinhamento,
eu realmente vou alinhá-la à esquerda.
Estamos quase lá.
Mas, em seguida, observe que há algum espaçamento,
as informações de contato reais e, em seguida, a imagem.
O que você vai fazer aqui
é que vamos direto aqui para a
coluna
contém todas essas informações de contato,
você clica lá.
Vá primeiro, Vertical Align,
vamos alinhar ao meio.
Em seguida, vá para avançado e,
eventualmente, você tem preenchimento.
Vou desvincular
esses valores juntos porque
a coisa sobre isso é, por padrão,
qualquer valor que você adicionar ao seu preenchimento,
para a parte superior, direita, inferior ou esquerda.
Ele duplicará um curso dos três lados restantes.
Portanto, não queremos isso,
queremos apenas adicionar preenchimento a um lado.
Então, vou clicar neste botão aqui para
desvincular os valores, caso você não saiba,
Padrão basicamente é uma maneira de criar espaço
entre seu conteúdo e sua borda.
Vamos adicionar preenchimento à esquerda, como você pode ver,
com uma aparência muito melhor já.
E vou até 40 pixels.
Estamos quase lá.
Um deles que vamos adicionar agora será os textos de
direitos autorais.
Então, vou rolar todo o caminho até aqui.
Então, aqui mesmo sob seu cabeçalho e rodapé elementar,
você vê textos de direitos autorais.
Clique em arrastar.
E serei muito, muito cuidadoso.
Não vamos soltá-lo nesta
primeira coluna segurando a imagem.
Estamos deixando cair em uma clínica separada considerada
linha azul aparecendo, significando isso, ok.
Isso vai ser uma coluna separada.
Observe agora que o BlueLine
só está abaixo da imagem,
abaixo da coluna que mantém a imagem.
Mas se eu arrastar meu mouse mais
para baixo apenas um pouco agora
você pode ver a linha azul se estendendo por ambas as colunas.
Então agora vou deixar o texto de direitos autorais lá dentro.
E lá está ele.
cor do texto aqui obviamente será tipografia primária.
Vamos usar o texto alinhado ao centro.
E, na verdade, vamos passar para
a tipografia, um ganho.
E vamos tornar este um pouco
menor do que o normal.
Acho que 16 pixels estão quase certos.
Mas também queremos adicionar algum preenchimento também.
Então, vamos passar para o avançado.
Mais uma vez, vamos desvincular os valores.
Vamos adicionar preenchimento de 20 pixels
para os dez principais pixels para a parte inferior também.
Fizemos bastante.
Vamos em frente agora e atualizamos.
Vamos ver o que parece.
Então, vou até aqui, atualizar a página.
E lá vai você.
Este é o nosso rodapé ali.
Agora eu sei que você pode ver espaços em branco aqui,
mas isso é simplesmente porque ainda não temos
nenhum conteúdo na página inicial.
É por isso que você tem esse espaço em branco.
Já adicionei alguns conteúdos à página sobre.
Então, isso é mais parecido com o que agora será.
Você pode ver que não há mais espaço em branco em
um int porque na verdade temos
algum conteúdo na página, mas lá está.
Agora temos nosso rodapé
bem construído com a imagem do Perú,
textos de direitos autorais, bem como algumas informações de contato.
Obrigado por assistir e, claro
, verei você na próxima aula.