Agora que construímos os cabeçalhos e rodapés,
agora é hora de criarmos nossa página inicial.
E a primeira seção que vamos
construir será o banner que você pode ver
aqui, temos a imagem de fundo com as
árvores tropicais,
palmeiras e a praia.
E então, claro, os textos,
estamos viajando com aventura e, em seguida
o botão que diz nosso livro, sua viagem agora.
Além disso, é claro, você teria notado que
o plano de fundo basicamente se mistura com o cabeçalho.
Como fazemos isso?
Bem, vamos seguir em frente
e editar a página inicial.
Vou dizer Editar com Elementor.
Bem aqui.
Você pode notar que temos basicamente duas colunas,
uma em cima, aquela que
contém onde viajou significa aventura.
E então teremos outra coluna
contendo o livro de botões, sua viagem.
Agora, o que eu simplesmente vou fazer aqui é isso.
Temos um texto de cabeçalho aqui,
mas caso você não veja nada,
basta arrastar o elemento de cabeçalho
e soltá-lo dentro da sua caixa aqui.
E eu simplesmente vou dizer
onde estamos viajando com aventura.
Esse é o slogan principal do site All.
E vou fazer este um a um.
Mas vamos fazer algumas mudanças na
topografia real em si.
Então, vamos para o estilo.
E para a tipografia aqui,
vou mudar a transformação para maiúsculas.
E também vamos fazer o peso
900 só para torná-lo muito, muito grosso.
E então o estilo também o tornará itálico.
Isso é isso para o texto por enquanto.
Vamos seguir em frente agora e adicionar
a imagem de fundo para esta seção.
Então, vou clicar no botão Editar seção aqui.
A largura do conteúdo, vamos manter esta caixa,
mas depois a largura aqui faremos 1240 pixels.
E nossa lista de verificação defende a altura,
vamos defini-la para uma altura mínima de
mil pixels porque realmente queríamos
mostrar o máximo possível dessa imagem de fundo.
Então deixe-me fazer isso mil.
E agora vamos passar para o
estilo, tipo de fundo clássico.
E vou escolher a imagem.
E vai ser, eu peço desculpas.
Na verdade, tenho dois separados aqui por enquanto.
Vou excluir a mulher que vai usar,
vamos usar a versão grande.
Este tem apenas 859 pixels de altura,
mas este tem 1274.
Então, vamos fazer uso deste.
Então, vou inserir isso.
E lá vai você.
Agora, deixe-me mostrar alguns truques em relação ao
posicionamento da sua imagem de fundo.
Você tem diferentes tipos de
posições no centro, centro,
centro esquerdo, centro, direita e assim por diante.
Portanto, cabe a você escolher
os ângulos de posição ideais para sua imagem de fundo.
O meu aqui que eu escolhi vai ser o centro inferior.
Aqui você pode realmente ver as palmeiras,
a praia também.
Portanto, é familiar é a melhor posição.
E então, para o tamanho,
você tem várias opções
aqui, eu vou com cava.
A diferença entre Kovach e conter é
o mostrador contêiner toda a imagem.
conteúdo nem sempre é a melhor opção
porque quando você mostra a imagem inteira,
se a imagem não for grande o suficiente para toda a tela,
ela começará a estudar repetidos.
Você pode ver em segundo plano aqui que você meio
que tem a imagem se repetindo novamente.
Mas com o COVID, você basicamente,
você está basicamente dizendo: Ei,
tente garantir que a imagem
cubra toda a tela.
É por isso que escolhi são abordados aqui,
mas também adicionarei
uma sobreposição de fundo. Então confira isso novamente.
Vou voltar na
sobreposição. Vou clicar lá.
Eu quero, vou fazer é ir para
o tipo de fundo como de costume,
vamos escolher uma sobreposição preta.
E então a opacidade aqui,
eu realmente fui com o 0.23.
Claro que você pode mudar isso
se não quiser usar Zope e 23.
Mas agora vamos voltar aos textos reais.
Vamos voltar aqui.
E, claro, a cor do texto,
vamos deixar este branco.
E aí está, ok.
Também vamos alterar o tamanho também.
Então, vou até 120 pixels.
E, novamente, isso é totalmente subjetivo.
Você pode tornar o seu um pouco maior,
um pouco menor.
Mas também vamos mudar o alinhamento também.
Vamos para o conteúdo. Vamos
alinhá-lo ao centro.
E aí está, estamos viajando com eventual.
E então o que vamos fazer agora seria
adicionar nosso botão.
Vou arrastar o botão aqui,
Element e vou pular logo abaixo do título.
Claro que aqui, vamos dizer,
reserve sua viagem. Agora.
Claro, é aqui que você adicionaria
o link para talvez uma página ou um
site XNOR, como um dourado ou Booking.com.
Se eu fosse sete, faça isso e poderíamos apenas dizer
book kin dot com.
Vamos fazer isso. Nós podem.com só pela diversão disso.
E é claro que vamos alinhá-lo ao centro.
O tamanho aqui será médio.
Vamos adicionar um ícone também.
Ok, então vou escolher a biblioteca de ícones aqui.
Vamos procurar avião.
Vou escolher muito, minha inserção de urso.
Você tem a opção de alterar a
posição do ícone para depois ou antes do texto.
Queremos manter isso antes.
E, em seguida, o espaçamento de ícones.
Você também pode adicionar algum espaçamento entre
o ícone e a imagem.
Então, vou com a AIDS
só para dar um pouco de espaçamento.
Agora vamos passar para o estilo.
É aqui que vamos fazer algumas grandes mudanças.
Então, o primeiro que vamos fazer
aqui seria a topografia,
os pesos dos textos.
Haverá 600 e depois se transformarão em maiúsculas.
Agora, como este é um link,
você notaria que existe a ideia sublinhada,
mas não queremos essa.
Então eu vou ao Estilo, vou, vou
para a declaração e depois escolho nenhuma.
Não queremos nenhum dos textos em
nenhum dos textos subjacentes lá.
Tudo bem, tipografia, cor, texto, cor aqui.
Vamos com o branco.
Tudo bem?
Então, para o botão em si,
você terá o tipo de fundo
e vamos clicar lá.
E nós vamos com a
cor clássica aqui seria laranja.
Agora vamos definir uma fronteira, bem como sólida.
Então o que vamos
fazer para a borda é que vamos mudar
a cor da borda para a cor laranja também.
E então vamos adicionar um raio de borda
apenas para fazer os círculos,
as bordas apenas um pouco circulares.
Vamos com dez,
desculpe, vamos com 12 pixels aqui.
E é isso.
Vou seguir em frente agora e atualizar.
E vamos ver o que parece.
Vamos sair para o painel.
Vamos clicar aqui, ir para a página inicial
e lá está.
Então, viajando em seu eventual,
é claro que temos o botão
aqui que se vincularia à nossa booking.com.
Mas então, como conseguimos isso?
Onde você tem o fundo basicamente
se misturando com a cabeça para a Alemanha.
Próximo vídeo, onde mostrarei como fazer isso.