Como usar o Elementor: crie um site WordPress incrível sem código

1. Introdução: Os sites são muito importantes. Nós os usamos para tudo, não é? Nós os usamos para notícias, música ou para mostrar nossas habilidades criativas em nossos portfólios Se você quiser criar um site amanhã, bem, por onde começar? Qual programa você usa? Nesta aula, mostrarei como criar um site usando o Elementor Page Builder É um programa fantástico que é super fácil e permite que você seja super criativo. Olá, sou John Wolfgang Miller. Sou designer profissional há 20 anos e trabalhei para alguns grandes clientes, como Fox TV, aqui na Austrália. Agora, se você quiser usar o Wordpress , pode ficar bem complexo. Sim, você pode simplesmente comprar um tema ou algo assim e usá-lo. Mas então você vai acabar com um site que se parece exatamente com o de todos os outros. Porém, se você usa o elemental, você pode ser super criativo Você pode construir o que quiser. É um programa fantástico. E nesta aula eu sempre mostro como usar a versão gratuita do programa, para que você possa usá-la para desenvolver todas as suas habilidades. Nesta aula, vou guiá-lo em todo o processo. Mostrarei como configurá-lo e depois criaremos um site inteiro. Começaremos com uma seção impressionante de heróis e depois passaremos para algumas partes de animação que realmente impressionarão os visitantes do seu site Esta aula é perfeita para você, se você iniciante ou mesmo tem muita experiência, o que você aprenderá aqui melhorará enormemente todas as suas habilidades de design de sites Você terá um site bonito no final. E se você deseja levar sua carreira ainda mais longe no design de sites, é isso que você precisa saber. Então, vamos criar um site. Vamos começar. 2. PROJETO DO CURSO : O projeto principal aqui é criar um site completo de uma única página. Cada lição mostrará como configurar diferentes partes do site em um elemento, ou todas usando widgets e ferramentas diferentes As aulas começarão com a seção inicial do herói e, em seguida, você criará uma seção de informações com um controle deslizante de imagem Depois disso, você criará duas seções diferentes , ambas funcionando de maneiras animadas muito legais. Em seguida, você finalizará o site com um rodapé e um elementor de instalação de cabeçalho E acompanhe cada lição e recrie o que você aprendeu No final de cada uma, você pode usar exatamente as mesmas imagens que eu tenho e criar exatamente o mesmo site. Ou você pode usar suas próprias imagens e dar a elas seu próprio estilo. Se você quiser usar exatamente as mesmas imagens, elas são mantidas aqui na seção de recursos. Faça o download e adicione tudo à sua biblioteca de mídia. No final da aula, você terá um site totalmente funcional. Você terá aprendido muito mais sobre o elementor, para que possa aprimorar as habilidades de design de seu site aprimorar as habilidades de design Nesta aula e em todas as minhas aulas, falarei sobre muitas coisas diferentes. Há muito o que abordar em todas essas aulas. Eu recomendo fortemente que você jogue e faça uma pausa Se eu disser algo grande em um, faça uma pausa e experimente você mesmo Se precisar fazer isso de novo, basta voltar atrás, 15 segundos para trás, 15 segundos para trás, e então você pode assistir a parte inteira Isso ajudará você a entender o que eu disse e a experimentá-lo. Se você estiver tendo algum problema com a qualidade do vídeo que está assistindo, venha aqui para os níveis de qualidade e altere as configurações aqui. Se estiver definido como automático, talvez você não o veja tão nítido quanto necessário, então altere-o para 720 ou 1080 pixels 3. Configuração do Elementor e do Wordpress: Aqui estamos em elementor.com Este é o primeiro lugar que você normalmente visitaria se estivesse tentando configurar o Elementor Talvez você já tenha configurado isso. Se você se sentir à vontade para avançar para a próxima aula ou ficar por alguns minutos, certifique-se de ter tudo configurado corretamente. Agora, queremos apenas usar a versão gratuita do Elementor para essa classe No entanto, o problema é que, com qualquer site, você sempre precisa pagar pela hospedagem. A hospedagem é a empresa que armazena seu site para você. O Elementor faz tudo isso sozinho, mas há uma taxa. No entanto, como queremos apenas usar a versão gratuita do Elementor, mostrarei agora uma maneira de configurar uma opção de hospedagem gratuita Aqui estamos no Word. Wordefi, oferece uma versão gratuita da hospedagem Wordpress Se você vier aqui e comparar produtos, verá que eles têm versões pagas e também têm uma versão gratuita. Isso é para um site de desenvolvimento gratuito. Esse é um site de desenvolvimento gratuito. Ou seja, se você quiser apenas brincar com elementor para se acostumar com o programa, escolha isso Há um link para uma palavra aqui na seção sobre desta aula. Quando você vier aqui, clique em saiba mais e depois se inscreva. É grátis. Digite seu nome, sobrenome, e-mail, senha, etc., aqui e clique em Inscrever-se A primeira coisa que você precisa fazer é verificar seu endereço de e-mail. Em seguida, entre aqui e clique em Criar novo site. Comece com o nome do site Gang Music Location. Estou baseado aqui na Austrália, URL temporária. Bem, isso é apenas por um motivo temporário, então você pode chamá-lo do que quiser, mas vamos colocar Ing. Música Em seguida, selecione o tipo de site novamente, basta escolher a versão em profundidade e acessar o site. Você terá uma pequena roda giratória por um minuto enquanto ela configura tudo Feito isso, basta vir aqui e clicar no W, o logotipo do word press. Ele exibirá um pop-up mostrando qual é o usuário do Wordpress e a senha. Basta clicar neste pequeno ícone aqui e isso copiará a senha para você. Em seguida, continue com o administrador do WP, digite o word fire e a senha, clique para lembrar a senha e clique em Login Aqui estamos agora no painel do Wordpress. Agora podemos começar a construir tudo a partir daqui. Se você nunca usou o Wordpress antes. Bem, vou te mostrar rapidamente que o menu de tudo está aqui no elemento esquerdo. O Page Builder é um plug-in Antes de tudo, precisamos instalá-lo. Venha aqui para se conectar e clique em Adicionar novos plug-ins de pesquisa. Aqui está você. Instale o Element ou Website Builder agora e, em seguida, clique em Ativar para não acessar esta página. É aqui que você precisa configurar uma conta elementar. Mas, novamente, vamos fazer isso com a versão gratuita. Crie minha conta e insira seu e-mail e sua senha. Em seguida, ele dirá: vamos conectar seu site. Agora você é um cliente básico. Para começar com qualquer site Wordpress, você sempre precisa começar com um tema. Esse é o back-end de todo o seu site. Creation Elementor tem seu próprio tema principal , chamado Hello Clique aqui e continue com o tema Hello. Agora vamos dar um nome ao seu site. Já temos isso porque o configuramos mais cedo. Dê uma olhada no logotipo, podemos fazer isso, mas vamos pular essa Por enquanto, isso é um embrulho. Agora pule isso. Voltaremos ao elemento ou editor. Antes de começarmos a criar nosso site, precisamos apenas verificar algumas configurações dentro do painel. Precisamos sair desta página. Primeiro de tudo, para configurar isso, vamos até o menu de hambúrguer aqui à esquerda e escolher Preferências do usuário Aqui embaixo está escrito Saída dois, e você tem algumas opções aqui. O que queremos é esse. P Dashboard, selecione isso. Em seguida, volte ao menu de hambúrguer e escolha Sair. Em seguida, diz Sair do site. Basta clicar em Sair. Ou se você já tem a versão mais recente do Elementor instalada, é aqui que você encontra essas opções Basta ir até o logotipo da Elementor e clicar nele. Em seguida, escolha Preferências do usuário aqui, certifique-se de que o painel do WP esteja escolhido Clique novamente no logotipo do Elementor e, em seguida, clique nele no Wordpress Isso o trará de volta ao seu painel. Agora precisamos apenas verificar algumas configurações dentro do Elementor Conecte-se, venha aqui à esquerda para Elementor, mouse e escolha Configurações O primeiro que queremos selecionar é sobre as cores e fontes padrão. A forma como o Elementor é configurado é que ele usará as cores e fontes já configuradas no tema Hello Elementor Como queremos ser super criativos, queremos desabilitar isso de forma simples, basta marcar essa caixa, marcar essa caixa e clicar em Salvar. Agora venha aqui para ver os recursos. Se você tem a versão mais recente do elementor, provavelmente não precisa alterar nada aqui Mas se você tiver uma versão mais antiga ou quiser apenas verificar se os elementos corretos estão ativos, entre aqui para os recursos. Em primeiro lugar, role para baixo até o contêiner da grade , que diz Padrão. Basta alterar isso para ativo e clicar em Ativar próximo editor, na barra superior. Esta é a versão mais recente do editor do elementor. Se você estiver usando a versão mais recente, provavelmente ela já está configurada. Mas venha aqui de qualquer maneira e escolha Ativo. Em seguida, role para baixo nesta seção, recursos estáveis. Role para baixo até este que diz contêiner de caixa flexível e certifique-se de que esteja ativo Quando você tiver esses três elementos ativos, role até a parte inferior e clique em Salvar alterações. Agora tudo está configurado e estamos prontos para começar a criar seu site. 4. Introdução ao Elementos - Menus: Agora que está configurado, vá até as páginas e selecione todas as páginas. Como você pode ver aqui, algumas páginas vêm automaticamente com o tema. Não precisamos de nenhuma dessas páginas, mas aquela está ao vivo foi publicada, como você pode ver aqui. Vamos desligar isso porque é apenas uma página vazia que não precisa existir. Se passarmos o mouse sobre a edição rápida, você tem algumas opções aqui, mas a que estamos vendo é o status Como você pode ver, está publicado. Você pode mudar isso para um rascunho. Agora vamos criar nossa própria página ao vivo. Isso é muito simples. Clique em Adicionar novo. Você acessará o editor normal do Wordpress. Role até aqui para adicionar um título e inserir o título do seu site. O meu será Wolf Gang. Música Então venha aqui para resumir. No lado direito, clique no menu suspenso aqui , onde diz modelo. Clique em Modelo padrão. Em seguida, a partir desse menu suspenso, escolha elemento ou tela. Isso é o que precisamos fazer para ter uma página clara, sem mais nada que possamos trabalhar. Em seguida, vá até aqui para salvar o rascunho. Quando isso for salvo, venha aqui para editar com o Elementor Bem-vindo de volta ao editor Elementor. Como você pode ver, estamos usando a versão mais recente do menu. É sempre bom entrar aqui e brincar com todas as configurações aqui para saber onde está tudo. Antes de começar, examinarei rapidamente cada parte da barra de menu na parte superior aqui. Em primeiro lugar, esse logotipo da Elementor, é um menu suspenso Aqui temos o construtor de temas. Não se preocupe apenas com um elemento profissional que não estamos usando na história atual. Bem, obviamente, se você cometer um erro, poderá voltar às versões anteriores e aos atalhos do teclado Isso é apenas fornecer todos os atalhos para acelerar todo o processo. Acho que sim. Em seguida, o ícone de adição de elemento, é aqui que você verá os elementos, todos os widgets que usaremos neste site, esse menu suspenso configurado em diferentes subseções, layout, contêiner Foi isso que usamos para começar a criar todos os elementos de cada seção do nosso site. Você tem o básico, também tem sua seção profissional Obviamente, você pode ver um pequeno elemento de cadeado em cima de tudo isso, mas não se preocupe com isso Não podemos usar nenhum deles, mas nada disso é necessário para qualquer coisa que vamos construir até o momento. Estamos usando completamente a versão gratuita. Podemos fechar essa parte. E então você tem todas as configurações gerais, tudo o que você vai precisar aqui, carrosséis de imagens, depoimentos, etc., esses são os etc Depois, temos as configurações do site, é aqui que você pode alterar as configurações que funcionarão em todo o site. Se você estiver criando um site com várias páginas diferentes, qualquer configuração aqui será relevante. Cada página que você cria. Então, se fecharmos este e clicarmos neste que diz Estrutura, você verá uma pequena janela pop-up. Isso costumava ser chamado de Navegador. Se você estiver familiarizado com versões mais antigas do elemento, ele se chamava Navigator Agora se chama Estrutura, mas faz exatamente a mesma coisa. Falarei sobre isso quando começarmos a criar seu site. Em seguida, esta é a seção responsiva. Isso é muito, muito importante e abordaremos isso mais tarde na aula. É aqui que podemos selecionar diferentes dispositivos, desktop, tablet e celular. Essa aqui, Preview Changes. Isso é ótimo porque, ao trabalhar no site, você pode clicar em Visualizar alterações. E então você pode ver como ficaria se todo mundo acessasse seu site quando ele fosse lançado. Isso é tudo. Agora podemos começar a criar seu site. 5. Abrindo herói NOVO: Ok, vamos começar a criar seu site. Estamos começando com uma página muito em branco. Precisamos começar a adicionar nossos primeiros elementos. Esta é a seção que vamos examinar. Há duas opções aqui. Em primeiro lugar, temos esse modelo de adição. Clique nele e você verá o que isso significa. É aqui que você pode trazer páginas pré-fabricadas, blocos diferentes, elementos que esses elementos criaram por si mesmos. No entanto, você sempre pode ver o pequeno ícone profissional em cima de tudo isso. Eles estão disponíveis apenas na versão pro. No entanto, isso não é relevante para o que estamos tentando fazer aqui de qualquer maneira. Estamos tentando criar nosso próprio site exclusivo. Não queremos usar nada que já tenha sido pré-fabricado por outra pessoa. Apenas feche este. O que vamos usar é o ícone de adição. Clique sobre isso. Qual layout você gostaria de usar? Essas são as duas opções que temos para o elemento. Vou apenas mostrar a diferença entre as primeiras grades. Como você pode ver aqui, essas são estruturas diferentes. No entanto, cada estrutura tem uma largura definida para cada elemento dentro dela. Este é 50, 50 da esquerda para a direita, 50 50 de cima para baixo, e essa é uma divisão igual de três terços. Cada seção dentro da grade tem sempre exatamente a mesma largura e altura. Se fecharmos isso, clicamos na caixa Flex, é aí que temos mais algumas opções criativas diferentes Como você pode ver aqui, ele tem cinco seções diferentes, mas nem todas têm a mesma largura e altura. Eles têm larguras e alturas diferentes. Como você pode ver aqui, mesma largura. No entanto, a altura aqui é o dobro da altura desses dois elementos. Aqui no cluster de hoje, usaremos esses dois elementos diferentes. Usaremos contêineres, a caixa flexível e a grade Mas para esta seção, a seção de heróis, vamos usar um contêiner de caixa flexível Só queremos um que seja um único contêiner. mouse até o primeiro com a seta apontando para baixo. E clique nisso. Isso cairá em seu primeiro contêiner, que está nesta seção rosa na parte superior. Vou apenas mostrar mais alguns dos elementos. Você pode ver aqui na parte superior que temos outro símbolo de adição, um contêiner que significa que você pode fazer a mesma coisa, mas acima ou abaixo. Vamos fechar isso. Então temos o x, que é para excluir o contêiner. Se você cometer um erro ou não pretendia colocá-lo em outro contêiner, basta excluir esse. Então, temos os pequenos pontos aqui onde diz Editar contêiner Se você clicar nele, verá as opções que aparecem automaticamente no lado esquerdo aqui. Vamos dar uma olhada nisso em alguns minutos. Além disso, isso permite arrastar o contêiner para cima e para baixo. Quando temos vários contêineres diferentes aqui na página, convém mover um acima do outro ou abaixo do outro e arrastá-los assim. A outra opção que temos agora que temos um contêiner configurado é clicar com o botão direito do mouse. Se eu fosse escrever, clique aqui, essas são as opções que eu recebo. Mas queremos escrever, clique no próprio contêiner e temos todas essas opções. Está bem claro aqui o que cada um deles faz. Se você criou um determinado contêiner e deseja repetir a ação, basta duplicá-lo e ele fará exatamente a mesma coisa novamente. Então você tem as opções de copiar e colar novamente. Se quiser copiar algo que você fez em outro lugar, você pode colá-lo em outro lugar no site. Ou você pode até mesmo estilizar, digamos que você tenha um texto configurado de uma certa maneira e queira que o próximo texto funcione exatamente da mesma maneira. Copie o texto e cole o estilo. Isso não mudará o texto do texto, mas mudará o tamanho dele O principal que eu quero ver aqui é a estrutura. Vamos clicar nisso. Essa é uma ferramenta muito boa porque o que ela faz é dividir seu site e cada página em seções diferentes, contêineres diferentes Depois, você tem um menu suspenso para ver o que está dentro de cada contêiner. Veremos como isso funciona quando continuamos criando vários elementos diferentes na página e colocamos widgets diferentes dentro do contêiner Agora vamos criar a seção de heróis do nosso site. Chamamos essa seção de Herói porque é a parte mais importante de cada página. Por quê? Porque é a seção de abertura. É a primeira coisa que as pessoas veem quando visitam seu site e é sua primeira chance de impressioná-las. O que vamos criar aqui é uma seção de abertura de página inteira que tem uma imagem de fundo com o logotipo da empresa na parte superior. Essa imagem dará uma boa impressão do que é o site. Em seguida, o logotipo da empresa também contém o nome da para que as pessoas saibam onde estão. Quando eles aparecem no local. Vamos brincar com esse contêiner. Agora venha aqui para o seu menu no lado esquerdo. E você verá três subseções. Há um estilo de layout e avançado. Falarei sobre diferentes partes disso durante toda a aula apenas para dar uma boa ideia geral de como tudo funciona e que é possível dentro do construtor de elementos ou páginas. Vamos começar analisando o layout. É aqui que decidimos a largura e a altura de todo o contêiner, toda a seção do herói. A largura já está definida para um tamanho padrão de 1.140 pixels de largura Sua outra opção aqui é usar toda a largura. Se você der uma olhada nesta seção na parte superior, verá a diferença. Se eu escolher a largura total, ela cobrirá a página inteira. Isso funciona para alguns contêineres em seu site, mas não para outros. Por exemplo, se você tem um com texto, não quer que ele fique na borda da página porque o fluxo do site realmente não funciona. Você sempre precisa de um pouco de espaço vazio, um pouco de espaço em branco ao redor do texto. Vamos voltar para a caixa e deixá-la como padrão Você pode alterar isso para qualquer tamanho que desejar, mas eu recomendo manter a largura padrão Agora queremos dar uma olhada na altura. Como você pode ver no momento, o contêiner tem apenas uma altura muito pequena, ele só desce até aqui, ou você pode ver a borda da caixa rosa. O que queremos fazer é fazer com que esse contêiner preencha a página inteira. Vamos passar para a altura mínima. Se você clicar no menu suspenso, verá diferentes opções aqui. O que estamos procurando é VH, que significa altura vertical, como você pode ver aqui Para atingir a altura total do contêiner, use 100 H. Vamos escolher H e digitar 100. Isso é uma porcentagem. Se você quiser preencher apenas metade da página, obviamente 50%, mas queremos que isso preencha a página inteira. Vamos escolher 100. Agora temos um contêiner vazio em branco configurado. O que queremos fazer é configurar nossa imagem de fundo, mouse aqui para estilizar Aqui você verá as opções de plano de fundo. Você tem muitos tipos diferentes. Você pode inserir aqui um gradiente clássico ou uma cor gradiente. Você pode inserir um vídeo ou uma apresentação de slides. Para o que queremos, queremos apenas um estilo clássico, clique no pincel aqui. Em primeiro lugar, você pode simplesmente escolher uma única cor. Se você clicar nesta caixa vazia aqui, é aqui que você pode escolher qualquer cor que você gostaria que fosse o plano de fundo. Não queremos que seja uma cor, queremos que seja uma imagem. O que vou fazer é clicar no botão Limpar no topo aqui. Em seguida, para usar uma imagem de fundo, mouse sobre essa caixa e clique em Escolher imagem Quando abro a biblioteca de mídia, posso ver todas as imagens que eu enviei. Se você quiser saber um pouco mais sobre o upload de imagens, acessaremos meu perfil no skill share e procuraremos este vídeo que explicará rapidamente o que deve ser feito quando enviamos imagens para o Wordpress O que importa é a proporção dessa imagem, o tamanho do arquivo e o nome do arquivo. Assista a este pequeno vídeo, você entenderá um pouco mais. Quando você tiver todas as suas imagens prontas para envio, clicaremos aqui e selecionaremos Arquivos. O que é Wolfgang? Música Bem, obviamente estou inventando um nome para uma loja de música, mas será uma loja de música mais antiquada do jeito que era há 20 ou 30 anos Então, o que vamos vender aqui muitos discos de vinil, coisas mais retrô, como fitas cassete Mas também vamos vender muitos instrumentos e equipamentos musicais para as pessoas usarem quando estiverem gravando músicas ou tocando ao vivo. Meu principal ponto de venda, porém, serão os discos de vinil, porque acho que esse é o tipo de coisa que vai atrair clientes Todos nós gostamos de passear por essas lojas e ver quais músicas estão disponíveis. Então, vou escolher essa imagem aqui como minha imagem de fundo. Ok, e é assim que o herói fica com essa imagem como plano de fundo. Parece que é perfeito para esse plano de fundo. No entanto, se eu rolar para baixo, você verá que há um pequeno problema aqui embaixo. O que está acontecendo é que ele não se encaixa na proporção exata do plano de fundo e, portanto, está repetindo a imagem abaixo Precisamos mudar isso. aqui para o menu à esquerda. É aqui que você pode fazer algumas alterações. Vamos até aqui para posicionar. Como você pode ver neste ícone, que está definido como ele será exibido na área de trabalho. Veremos isso mais tarde na aula, mas é aqui que você pode alterar as configurações para ver como ficaria no tablet ou no celular. No entanto, no momento, estamos apenas analisando o desktop. Mantenha-o selecionado para Desktop. Aqui diz que a posição é padrão. Vamos mudar isso para Center Center, porque eu quero que ele fique no centro desse contêiner. Ele ainda está repetindo a imagem abaixo. Vamos até aqui para repetir e depois dizer que não repita. Isso faz com que a segunda versão desapareça. No entanto, como você pode ver, ele ainda não enche completamente o recipiente. E temos um pequeno espaço em branco aqui embaixo, entre a imagem e a borda do contêiner. A linha rosa para mudar isso, venha aqui para exibir o tamanho e escolher a capa. Lá vamos nós. Agora está se estendendo um pouco para preencher essa seção exata. Então pense sobre isso. Ao escolher a imagem de fundo do seu herói, obviamente você quer algo que tenha uma proporção de paisagem. Talvez você queira escolher uma imagem quadrada ou de proporção uma por uma. Mas você deve se lembrar de que isso estenderá , então o que está na parte superior inferior pode não ser exibido corretamente. Tudo isso fica bem dentro do editor. No entanto, uma maneira legal de verificar como ela ficará quando as pessoas a visualizarem sem usar o botão de pré-visualização de alterações é clicar nessa pequena seta aqui. Esta pequena seta está dizendo que esconderá o painel. Este é o painel inteiro aqui à esquerda. E, obviamente, qualquer pessoa que visite o site ao vivo não verá isso. Clique na pequena seta para ocultar o painel. Também ocultará o menu Estrutura aqui à direita. Agora, o que você vê, que é apenas uma imagem simples, é exatamente o que as pessoas verão quando visitarem o site ao vivo. Isso o ajudará a garantir que você obtenha as proporções corretas. Seu plano de fundo está funcionando perfeitamente. Qualquer coisa colocada em cima dela também está funcionando perfeitamente. Precisamos voltar ao editor. Clique na seta novamente. Ok, se rolarmos um pouco para baixo, veremos apenas o espaço em branco vazio, mas é aqui que o próximo elemento aparecerá. No entanto, quero fazer uma alteração na seção de heróis. Ao rolar para cima e para baixo dessa forma, você verá a imagem se mover com a rolagem Mas o que eu realmente quero fazer aqui é tornar estática a imagem de fundo que permanece no mesmo lugar. No entanto, qualquer elemento em cima dele, como o logotipo da empresa, é o que faz com que isso aconteça. É outra configuração aqui no lado esquerdo, e é essa que diz anexo. Está definido como padrão e você tem duas opções, uma é rolar e outra é fixa. O padrão é rolagem. Conforme eu rolo, ele se move. Mas eu só quero que isso seja corrigido. Vamos mudar isso para corrigido então. Ao rolar para cima e para baixo, você verá que isso permanece estático. Não se move. Os elementos na parte superior se moverão. E então chegamos ao próximo contêiner que simplesmente rolará acima dele. Agora precisamos colocar logotipo da empresa em cima dessa imagem. Vamos rolar para cima para que possamos ver o plano de fundo completo. Vamos voltar aqui para o elemento de adição do símbolo de adição. O que queremos fazer aqui é inserir a imagem, um widget de imagem em cima do plano de fundo do contêiner No entanto, as configurações que temos para o contêiner de fundo serão diferentes das configurações que queremos para a imagem. Portanto, o que precisamos fazer é colocar um contêiner dentro de um contêiner. Venha até aqui, arraste um contêiner e, literalmente , solte-o em cima do fundo. O que você verá aqui na seção de estrutura é um contêiner principal e , em seguida, um subcontêiner que está dentro desse contêiner O que queremos fazer é colocar nosso logotipo dentro desse contêiner. Volte aqui para adicionar um elemento. Escolha a imagem, o widget e solte-o dentro do subcontêiner. A primeira coisa que você sempre vê aqui é apenas uma caixa cinza. Isso porque nenhuma imagem foi escolhida e isso é como uma imagem de posicionamento para ela. No entanto, queremos mudar isso. Venha aqui para escolher a imagem, clique aqui, então eu quero escolher a versão branca do meu logotipo. Tenho algumas versões diferentes do meu logotipo aqui, mas quero aquela em que o ícone está acima do texto e quero a versão branca. Vou clicar neste. Porém, o principal problema aqui, como você pode ver, a imagem é estupidamente grande e você nem consegue ver o que ela diz, a menos que Só precisamos diminuí-lo muito para fazer isso, venha aqui para o lado esquerdo e clique em Estilo aqui. Você pode brincar com as porcentagens da imagem, a porcentagem da largura ou a porcentagem da altura Vamos brincar com a largura. Se eu clicar neste pequeno elemento arrastável aqui, posso simplesmente brincar com ele até chegar ao tamanho que eu quero Eu diria que talvez 15%. Isso é bom. Agora quero que o logotipo fique no centro da seção de heróis. Se eu clicar na seta aqui, é assim que ficaria para os visitantes. Eu não quero que esteja no topo. Eu quero que esteja no centro. Vamos apenas editar o layout do contêiner. Venha até a seção de estrutura e clique no subcontêiner que contém a imagem A parte que estamos vendo aqui é para justificar o conteúdo. É aqui que podemos dizer que qualquer conteúdo dentro de um contêiner pode ficar no início, no centro ou no final. O que estamos procurando aqui é o centro. Vou clicar nesse. Isso não fez nenhuma mudança. Por quê? Porque a imagem já está no centro desse subcontêiner Estava no meio. Mas o que eu preciso dizer ao elemental é que esse subcontêiner também fique na parte central desse contêiner, volte para o contêiner principal do herói e depois volte aqui para justificar o conteúdo Em seguida, clique em Centro. Lá vamos nós. O logotipo agora está no centro da página. Enquanto eu rolo para cima e para baixo até aqui, a seção de heróis agora funciona da maneira que eu queria. A imagem de fundo permanece estática, mas o logotipo se move para baixo à medida que o usuário rola Agora, o único problema que vejo aqui é às vezes, quando o usuário rola para cima e para baixo, você realmente não consegue ler o logotipo em cima da imagem de fundo, onde diz Wolfgang Music. Enquanto eu rolo para cima e texto está em cima de um disco de vinil mais leve, não é tão legível quanto eu gostaria que fosse O que eu realmente vou fazer aqui é adicionar uma sobreposição à imagem de fundo Vou adicionar uma sobreposição de cores que fica na parte superior da imagem e, portanto, torna todo o fundo um pouco escuro e, portanto, facilita a leitura do texto na Para fazer isso, certifique-se de que seu contêiner principal esteja selecionado aqui na seção de estrutura. E então venha aqui à esquerda e clique em Estilo. Como você pode ver, o plano de fundo é configurado da mesma forma que configuramos antes com a imagem, mas estamos vendo a sobreposição do plano de fundo Clique nele novamente, você tem opções diferentes aqui. Você pode escolher o clássico ou escolher o gradiente. Brinque com isso, veja o que funciona para você. Mas eu só quero a cor clássica, uma cor sólida. Vou clicar em Clássico e, em seguida, você pode executar uma imagem em cima dela, mas isso não funcionará. Isso vai ser uma bagunça um em cima do outro. Então, vou escolher uma cor. Vou clicar aqui. Você pode brincar com as opções de cores aqui na parte inferior se estiver procurando por um vermelho, laranja ou verde. Mas eu gosto do que abriu, com o vermelho. Acho que um vermelho escuro. Acho que isso resume mais ou menos quem somos. Acho que dá um bom estilo retrô pegue isso no meio e depois gire e brinque com ele até encontrar um que goste Estou procurando um vermelho escuro. Acho que isso lhe dá um estilo retrô. Estou indo para algum lugar entre preto e vermelho, bem assim. É um pouco brilhante. Isso só ficou um pouco mais escuro. Sim, isso parece ótimo. Ao escolher isso, você pode ver que o que aparece aqui é o código hexadecimal Esse é o código exato para essa cor exata. Se você quiser usar essa cor exata em outro lugar do site, basta anotar esse código hexadecimal No entanto, mais tarde na aula, mostrarei como configurar cores primárias. Isso basicamente faz um registro de todas as cores que você usou em outros lugares. E você pode simplesmente selecioná-la em um menu suspenso, mas, por enquanto, estou feliz com essa cor. Vamos clicar novamente aqui, The Opacity, onde você também pode brincar com isso É automaticamente definido para 50% Se eu quiser que seja totalmente vermelho, posso escolher um, ou quase nada, posso reduzi-lo para 0,05 e ainda não consigo ler o logotipo Na verdade, vou voltar para onde estava, que era 50%, arrastar até 0,5, acho que é perfeito. Você tem outra opção aqui, o Blend Mode. Se você usa uma ferramenta de edição de fotos como o Photoshop, estará familiarizado com todas essas opções aqui Se você passar o mouse sobre eles, poderá ver quais são essas opções Multiplique, sobreposição de tela. Significa apenas que a cor da sobreposição traseira fica de forma diferente na parte superior da imagem Então, brinque com eles e encontre um que você ache que funciona melhor para você em cima da sua imagem de fundo. No entanto, acho que apenas uma normal era boa. Acho que é isso que estou procurando. Se eu rolar até aqui, sim, isso parece perfeito. Vou clicar na seta aqui e sim, parece perfeito. Isso é o que eu estou procurando. Eu posso ler esse logotipo. Gosto muito desse plano de fundo e acho que a cor disso expressa quem somos como uma loja de música retrô Vamos voltar e, ao rolar para cima e para baixo, você verá como isso funciona agora. E sim, tudo isso é legível agora todos podem ler isso na Wolfgang Música Agora, nosso herói está pronto e estamos prontos para passar para a próxima seção. No entanto, uma pequena recomendação para você aqui. Você tem a opção de publicar a página. Não queremos fazer isso ainda porque não está pronto para ser lançado. Se você clicar aqui, o menu suspenso será exibido. Você pode ver que tem opções de salvamento. Clique nele, basta clicar em Salvar rascunho. Isso significa apenas que o rascunho foi salvo. Significa apenas que, se o seu computador travar ou algo assim, você tem a versão mais recente dele Eu recomendaria clicar nele cada 5 minutos ou toda vez que você fizer algo novo, você teria que voltar e repetir. 6. Seção de informação: Agora seu herói está pronto. Isso é suficiente para chamar a atenção de todos quando perceberem que querem rolar para baixo e descobrir mais. Isso é o que vamos fazer agora. Em seguida, você precisa adicionar uma seção de introdução. Essa é uma breve seção de texto que contém algumas informações importantes sobre quem você é e o que você pode fazer por todos os clientes que visitam seu site. Vamos rolar para baixo até a próxima seção abaixo do herói e clicar em Mais. Vamos adicionar outro contêiner de caixa flexível. Dentro desse contêiner, quero que você adicione duas seções diferentes, uma das quais será texto e a outra será imagem. Você adicionará o texto à esquerda e a imagem à direita. Você precisa de algo com duas colunas diferentes. Este é 50, 50 mesmo. Divida este aqui, onde você tem um menor à esquerda e um maior à direita. Escolha esse. Agora você tem um contêiner com dois subcontêineres dentro do contêiner Novamente, venha aqui para a seção de estrutura, você verá o que quero dizer. Clique no menu suspenso e você terá um contêiner com o primeiro contêiner menor dentro e depois o segundo recipiente maior dentro. Agora, o que queremos fazer é colocar uma imagem aqui e um texto ali. Vamos até o ponto positivo e adicionar um elemento. Primeiro, vamos pegar o widget de imagem e arrastá-lo para o contêiner maior no lado direito Obviamente, é fornecido apenas como a caixa cinza padrão. Novamente, voltaremos a esse assunto em breve. No lado esquerdo, é aqui que queremos, vamos adicionar dois tipos diferentes de texto aqui. Volte ao seu clique em Adicionar elemento. Em primeiro lugar, vamos começar com um título. Vamos colocar esse primeiro. Como você pode ver aqui, ele não tem as configurações padrão para tipografia e cores Na próxima parte desta aula, veremos as cores globais e as fontes globais. E você verá como mudar isso e, portanto, alterá-lo em todo o site. Mas tudo bem por enquanto. Abaixo disso, adicionaremos uma caixa de texto normal. Volte aqui para clicar em Adicionar elemento. Em seguida, nesta seção aqui, escolha Editor de texto. E, novamente, arraste-o abaixo do título. Em seguida, quero que você analise o espaçamento e o alinhamento. Como você pode ver, essa nova seção fica logo abaixo da seção de heróis. Há um pequeno espaço em branco entre as duas coisas. Se eu clicar na seta, você verá o que quero dizer. Isso não é espaço suficiente. Uma coisa importante a lembrar em web design é respirar espaço. Esse é o espaço ao redor de cada elemento. A regra aqui é bem simples. Se você tem muita coisa acontecendo ao mesmo tempo, está muito ocupado. Se estiver muito ocupado, os usuários realmente não sabem onde procurar e por onde começar a ler. Você precisa de uma configuração simples de A a B para tornar isso claro e fácil de ler. Você precisa de espaço em branco vazio, espaço respirar ao redor de cada seção. O que vou fazer aqui é alterar as margens no contêiner principal Vamos até aqui e clicar no contêiner principal aqui à esquerda. É quando preciso que você clique na seção avançada. Em termos de layout, você tem duas opções com as quais pode brincar. Aqui você tem a margem e o preenchimento. A maneira mais fácil de ver isso é que a margem é o espaço externo. O acolchoamento é o espaço interno. Não precisamos de nenhum espaço no interior deste contêiner, só precisamos de espaço acima e abaixo. Vamos dar uma olhada na margem. Vou clicar aqui para começar. Vou adicionar uma quantidade de pixels que ficará acima e abaixo desse contêiner. Vamos talvez tentar 100 pixels. Como você pode ver, quando fiz isso, todas as seções aqui foram alteradas para 100 pixels. Agora, há uma margem de 100 na parte superior e inferior, mas também na direita e na esquerda. Eu não quero que eles estejam lá. On Elementor tem automaticamente essa configuração aqui , onde vincula valores O que você precisa fazer é desligar isso. Basta clicar nele e voltar para os dois que você queria que voltassem para zero e para a direita em zero, para a esquerda e para a direita. Agora eu tenho uma margem de 100 pixels acima desse contêiner e uma margem de 100 pixels abaixo desse contêiner. Isso significa que, quando começarem na próxima seção, haverá um espaço uniforme entre cada seção, 100 pixels aqui e 100 pixels abaixo. Em seguida, devemos dar uma olhada no alinhamento. Lado do design quando você precisa decidir onde tudo está em relação a todo o resto. No momento em que o texto é colocado na parte superior do contêiner. Essa é a configuração padrão do elementor. No entanto, não acho que isso pareça tão legal. Acho que seria uma configuração melhor se o texto estivesse no meio da imagem à direita. Agora precisamos selecionar esse subcontêiner, o primeiro que contém o texto E você pode clicar nesse pequeno ícone cinza no canto ou usar sua estrutura de navegação. Obviamente, estávamos dentro do contêiner principal e só queremos editar um desses subcontêineres Escolha aquele que contém o texto. Então, a configuração aqui é muito semelhante à que fizemos anteriormente. Só precisamos ir até aqui para justificar o conteúdo e dizer que ele esteja no centro. Lá vamos nós. em termos de espaço para respirar, o que você deve evitar são coisas muito próximas umas das outras. Por exemplo, aqui temos texto. Não há um grande espaço entre o texto e a imagem. Eles estão muito próximos um do outro, o que dificulta a leitura. O que queremos é um pouco de espaço em branco aqui no lado direito deste contêiner. Novamente, vamos ter certeza de que estamos dentro desse contêiner e vamos para Avançado. É aqui que vamos usar o preenchimento em vez da margem, porque quero espaço dentro do contêiner No lado direito, desça até este ícone e desative os valores do link juntos, o que muda tudo para zero. Então, o que queremos dizer é um espaço à direita. Eu não quero que esse espaço esteja em nenhum outro lugar. Não preciso de acolchoamento na parte superior inferior ou esquerda Olhando para isso, acho que talvez 50 pixels devam ficar bem aí. Como você pode ver, isso moveu todo esse texto para a esquerda e tem um espaço muito melhor entre eles. Talvez só precise de um pouco mais de espaço. Então, essa manchete, uma está mais longe. Vamos arredondar para 75. Lá vamos nós. Isso é perfeito. Agora vamos dar uma olhada no título que temos aqui. Novamente, para editar isso, clique no próprio título ou aqui na seção de estrutura. Escolha o título primeiro. Bem, eu quero que um título diferente esteja aqui. Vou apenas escrever em nome da empresa que funciona muito bem, mas preciso contornar a tipografia e as cores usadas Antes de tudo, no entanto, veja este aqui embaixo que diz tag HTML. E clique no menu suspenso. Aqui você tem várias opções diferentes para uma tag que está por trás do texto. Vou explicar um pouco mais sobre isso na próxima parte da aula. No entanto, vou mudar este para o H. Isso significa liderar um. A razão pela qual escolhi o H é porque você sempre deve ter um H na sua página. Essa é a introdução à sua página e ajuda as pessoas a encontrar seu site no Google. Uma regra geral para jogar é garantir que você nunca tenha mais de um H um para o próximo título, faça com que H seja dois. Agora, para mudar a aparência disso, vamos ao estilo. Em primeiro lugar, a cor do texto é automaticamente colocada nesse azul. Mas eu realmente não gosto disso. Eu realmente não acho que seja adequado para mim como empresa. Gosto muito do vermelho escuro que temos aqui para este, quero outra cor que fique bem. Com isso, estou pensando talvez em um dourado, escuro, dourado. O que vamos fazer é clicar nesse azul aqui. Então eu vou arrastar este para a esquerda. Entramos na seção mais amarela, dourada e alaranjada. Acho que por aí parece bom. Em seguida, arraste este. Brinque com isso até encontrar uma cor que você acha que funciona perfeitamente. Eu tenho que lembrar, este é texto colorido em cima de um fundo branco. Então você não quer algo muito leve porque ninguém pode lê-lo. Se você quer apenas preto liso, você pode escolher isso. Mas, novamente, eu quero essa cor dourada para a minha. Escolha a cor que você acha que funciona melhor para você e para o produto que você está tentando promover. Vamos rolar para cima. Eu gosto desse. Eu acho que isso é sombrio o suficiente e ousado o suficiente. Brilhante o suficiente. Eu sou um pouco mais ousado. Lá vamos nós. Acho que funciona melhor no fundo branco. Novamente, eles lhe darão a cor hexadecimal aqui, digamos aquela. Anote isso para mais tarde. Agora, tipografia, ele escolhe automaticamente essa família de fontes para ser usada em todos os títulos Essa é uma boa fonte. Acho que é bom para o corpo do texto, mas não é o que eu quero para o título. Eu quero uma fonte Shouter maior e mais ousada aqui. Clique no menu suspenso. O que aparece é uma lista de toda a tipografia que você pode usar em todo o site Há centenas aqui. Você pode simplesmente examinar cada um e experimentá-los um por um, mas isso levaria muito tempo. Eu recomendaria encontrar tipografia que você goste, que tenha usado em outros lugares e que ache que funciona melhor com o serviço você está tentando promover Eu tenho, e vou apenas digitar isso e me certificar de que é uma das opções aqui. Eu realmente gosto desse que é chamado para. Pronto, está aparecendo. Eu vou selecionar isso. Sim, lá vamos nós. Como você pode ver, isso é muito mais ousado. E o Shoelier apenas representa o que estamos tentando fazer com esse serviço aqui Você pode criar mais opções aqui ou brincar com o tamanho disso. Novamente, isso é definido como pixels. Mantenha-o em pixels e, em seguida, arraste-o para frente e ver o que funcionará para você. Eu quero que seja grande e bastante ousado, mas não se encaixe em duas linhas. Vamos talvez usar 40 pixels, depois o peso. Como você pode ver aqui, existem muitas opções diferentes de tamanhos. Obviamente, quanto maior o número, mais ousada é a fonte escolhida, 100, que é a mais fina Mas eu gosto do que acabamos de comer com o semibold. Pense em negrito e preto é muito ousado, então vamos usar o semiousado Então você tem mais algumas opções. Você pode escolher maiúsculas ou minúsculas. Eu realmente quero letras maiúsculas aqui. Acho que é ainda mais ousado. E Sheli, aí está, estilo. Você pode tê-lo normal ou itálico, mas eu não gosto que isso me represente. Mas isso parece legal. Tem um estilo um pouco retrô de 80 Sl, mas vou mantê-lo como decoração normal, linha sobre linha Eu não preciso de nada disso, então vou deixar isso como padrão, que é a não versão. Isso é quase perfeito. Acho que precisa um pouco de espaço entre cada letra. O que vou fazer é ir até aqui para o espaçamento entre letras e brincar com isso Se eu simplesmente arrastá-lo da esquerda para a direita, você pode ver que isso torna esse espaço muito maior e muito menor. Eu quero que seja um pouco maior, para que seja legível, talvez dois pixels ou 2,5 pixels, acho que 2,5, acho que é espaço suficiente entre cada um Mas quando um usuário vê isso, ele pode ver, diz Wolfgang Música que parece ótima. Vou clicar na minha seta e ver como fica. Sim, acho que é um bom fluxo do topo para esta seção aqui. Obviamente, precisamos de um pouco mais de informações e imagens aqui. Quero falar com você sobre como configurar o tipo global e as cores globais em todo o site para que, se usássemos esse título novamente, ele apareça exatamente na mesma cor, na mesma fonte. 7. Configurações globais do Elementor: Em seguida, quero dar uma olhada nas cores e tipografia globais que são usadas em todo o site Para ver isso, vá até o menu e clique neste ícone aqui, Configurações do site. A primeira que vamos dar uma olhada são as cores globais. Essa é a página que você verá ao abrir as cores globais. Isso está nos mostrando uma prévia. Isso significa que, se você fizer alguma alteração aqui , ela será exibida aqui. A outra opção está desativada, o que significa que, se você fizer uma alteração aqui, verá as alterações em seu site ativo. Eu recomendaria usar isso para esta etapa. Do ponto de vista do design, é muito claro. Aqui temos uma cor primária e uma cor secundária. E a cor principal do texto. A cor de destaque, bem, é como a cor extra Se você não quiser usar o primário ou o secundário, você pode usar a cor de destaque Provavelmente não precisaremos disso neste site, mas em um site maior, você pode querer uma terceira cor extra que seja usada em uma quantidade muito pequena. Agora, para as cores primárias e secundárias, quero usar as duas cores que usamos no site até agora. O principal eu quero que seja esse vermelho escuro e o secundário esse dourado. Se você se lembra, quando configuramos essas seções, tínhamos um código hexadecimal Se você fez um disco desses brilhantes. Se não, volte ao editor para fazer isso, basta clicar no X aqui em cima e ele diz: você gostaria de salvar as alterações que você fez? Ainda não fizemos nenhuma alteração. Basta colocar este cartão agora. Vamos encontrar as cores que configuramos anteriormente. O primeiro estava no contêiner principal do Hero. Clique nisso na estrutura, vá para Estilo, vá para Sobreposição de plano de fundo e aqui está Clique na cor aqui em cima e você verá o código hexadecimal abaixo dos Destaques e copie-o Agora vamos voltar às Cores globais das configurações do site, ir para Primário e colar lá. Como você pode ver, a cor primária agora mudou para esse vermelho escuro. Clique em Salvar alterações e feche esta janela novamente. Agora vamos para a manchete aqui. Clique na cor. Copie o código hexadecimal de volta para Configurações do site > Cores globais Vamos fazer dessa a cor secundária. Agora você pode ver como as duas cores se encaixam e ver que há um bom contraste entre as duas. A próxima que eu quero mudar é a cor do texto. Está um pouco cinza, pois tenho texto ao vivo na página. Vamos desativar essa prévia novamente. Como você pode ver, há um texto aqui embaixo usando a mesma cor, 777 Está um pouco claro demais, quero deixá-lo um pouco mais escuro Clique na cor brinque com este seletor de cores aqui Se você quiser ficar totalmente preto, arraste-o até o canto mais distante e você obterá o código hexadecimal de 0000 No entanto, acho que é um pouco sombrio e ousado demais. Então, vou movê-lo um pouco para cima para que fique um pouco mais leve. Então você vai de um extremo ao outro. Eu acho que por aí, isso parece ótimo. Agora, a cor de destaque, novamente, acho que não vou usar essa, mas talvez se eu quisesse uma terceira cor lá, bem, acho que tenho que escolher uma que funcione bem com o vermelho e o dourado Eu não sei Talvez um azul escuro ou algo assim. Vamos dar uma olhada. Roxo, eu acho. Assim como um azul escuro. Provavelmente não vou usar isso, mas é uma cor bastante neutra. Isso funciona bem com tudo. Eu só vou deixar isso. Se precisar de mais cores além do texto primário ou secundário em seu sotaque, você pode adicionar outra aqui Chame do que quiser e depois escolha sua cor. Mas eu não quero mais. Estou feliz com os quatro que tenho. Eu pressionei para excluí-lo porque não o estou usando. Vou escolher excluir. Agora que tenho todas as minhas cores globais configuradas, salvarei essas alterações. Agora vou mostrar como essas cores globais funcionam para garantir a consistência em todo o site. Agora que salvamos, vamos clicar no X. Vamos escolher qualquer Element Insight Aqui vou mandar uma mensagem. E então vamos clicar no pequeno lápis aqui para editar o título. Agora temos uma opção extra. Podemos escolher aqui onde diz Cor do texto. Sempre que precisar escolher uma cor, clique neste pequeno ícone de globo onde diz Personalizado Isso mostrará as cores primária, secundária, do texto e do acento Digamos que, na verdade, eu gostaria que fosse na cor primária. Eu clico nele e ele muda para isso. Significa apenas que, se eu acessar todo o site e quiser alterar o texto em qualquer lugar, estou sempre mudando para a cor certa, para primária ou secundária. Não preciso fazer isso manualmente. É automático. Para isso. Agora vamos dar uma olhada na tipografia. Volte aqui para as configurações do site e vá para a seção de tipografia É aqui que escolhemos a tipografia e as fontes a serem usadas em todas as partes do site Novamente, isso apenas garante a consistência, dizendo que se esse for o tamanho e o peso do nosso cabeçalho H one, ele sempre será o mesmo sempre que for usado. Primeiro, vamos dar uma olhada no corpo da cópia. Esse é apenas o texto principal. Sempre que você fizer grandes blocos de texto, vamos clicar no lápis. Basta defini-lo como uma configuração padrão. Se você quiser mudar isso para outra coisa, clique aqui. Talvez você seja como fonte aérea, ou talvez queira que uma fonte Sera entre lá Novamente, dê uma olhada em outras fontes. Confira as fontes do Google, lugares como esse, para ver se você consegue encontrar uma que você acha que funciona para você e o serviço que você está tentando fornecer. Vou escolher mais uma fonte do Google que usei em outro lugar, chamada Roboto Roboto. Roboto. Agora vamos dar uma olhada no H one. Esse é o título que já configuramos aqui. Vamos copiar o que fizemos com esse, porque eu sei que funciona lá. E isso significa que posso usar isso em todo o site. Mais uma vez, clique no ícone do lápis. Então, em vez de usar o padrão, vamos escolher tentar lembrar o que você fez antes. Obviamente, você pode simplesmente voltar e conferir o título que você colocou aqui. Mas se minha memória não me falha, acho que defini isso para 45 pixels. Em seguida, o peso era semi negrito e transforma em maiúsculas. E então o outro que eu mudei foi o espaço entre letras no qual eu coloquei 22,5 pixels Essa é a minha. Agora você pode brincar com isso e configurar 234. Se você tem um site muito baseado em texto, você quer vários títulos diferentes porque é um título com um subtítulo e, em seguida, um subtítulo No entanto, para este site, acho que vou apenas dar uma olhada no H um e no H dois. Eu sei o que eu configurei para o H 1, e eu vou fazer o mesmo com o H 2. No entanto, vou apenas torná-lo um pouco menor. Novamente, entre em H dois, clique no seu pequeno lápis, escolha a família e o tamanho. Bem, o último, o que temos? Tivemos 45. Vamos colocar esse em , talvez, em 30. Mas o peso, a mesma transformação, espaçamento entre letras maiúsculas, 2,5 Brinque com isso, veja o que funciona para você e você descobrirá isso mais tarde Quando você está brincando com H um e H dois, se achar que não é do tamanho certo, você precisa dele um pouco maior ou um pouco menor. Você pode entrar aqui e mudar isso. Quando você o altera uma vez aqui, ele muda em todo o site. Então, divirta-se com isso. Faça com que suas cores e sua tipografia funcionem da maneira que você deseja em seu site Em seguida, clique em Salvar alterações. Uma última coisa a verificar também são suas fontes globais. Sim, configuramos o corpo do texto e configuramos o H um e o H dois. Mas certifique-se de que seu tema saiba quais fontes tipografia você está usando aqui Vamos voltar às Configurações do site e acessar Fontes globais. É só essa seção aqui embaixo que precisamos ter certeza de que está configurada para funcionar da mesma forma o texto que configuramos na seção de tipografia Clique em um deles ou em seu menu aqui, basta clicar no lápis. Apenas certifique-se de que eles estejam configurados de acordo com a tipografia e as fontes que estamos usando em outros lugares do site Neste, vamos escolher Anton para primário, On para secundário e depois texto Bem, isso já está configurado para o Roboto, assim como o Axon. Significa apenas que o tema está ciente do fato de que estamos usando essas fontes em todo o site. Vamos salvar essas alterações e voltar para o editor. 8. Galeria de imagens deslizante: Agora que a tipografia e as cores globais estão todas configuradas, vamos finalizar esta seção de introdução Em primeiro lugar, obviamente temos um título aqui, mas nosso corpo copiável é apenas laurum Precisamos adicionar nossa própria cópia corporal aqui. o mouse sobre o texto, clique nele, clique no ícone ou use sua estrutura aqui Você sabe como gerenciar tudo isso agora. Em seguida, no pop-up aqui à esquerda, estamos editando o conteúdo. Agora, o texto que foi inserido aqui foi automaticamente inserido como texto de parágrafo. Você pode alterar isso se quiser usar elementos diferentes. Assim, podemos escolher o título um e, em seguida, ele o altera para o título um que configuramos na seção de tipografia anteriormente ou para o título dois Isso é o que configuramos lá também. No entanto, queremos apenas um parágrafo, porque queremos apenas que uma cópia normal do corpo seja usada aqui. Escolhemos a tipografia a ser usada para isso e escolhemos a cor para Basta entrar aqui, excluir o texto que já está lá e começar a escrever no seu texto. É melhor escrevê-lo diretamente, pois assim não haverá outros problemas com textos que possam ter sido copiados de outro lugar Mas vou te mostrar o que quero dizer com isso. Em vez de escrevê-lo, eu já escrevi todo o texto e vou copiá-lo e colá-lo nesta caixa que realmente saiu. Ok, olhando para isso, no entanto, se você escreveu isso um documento do Word ou o pegou por e-mail, ele pode ter realmente captado código HTML extra que não é necessário aqui. Ele pode alterá-lo automaticamente para uma tipografia diferente ou colocá-lo em espaços diferentes onde não são necessários Se você tiver esse problema ou se tiver algum texto e quiser limpá-lo , é seguro usá-lo aqui. Bem, só o Google, um site como esse, qualquer coisa que seja um removedor de HTML, obviamente há muitos anúncios aqui Feche aqueles. Se você simplesmente colar uma cópia que deseja usar neste site no lado esquerdo, clicar em strip HTML, você descobrirá que a saída no lado direito limpou qualquer código HTML desnecessário Eu disse que este já estava bom de qualquer maneira, mas por precaução, vou copiar a saída e voltar ao meu site e colar isso. Tudo isso parece ótimo. Estou muito feliz com essa configuração até agora. Vai clicar na minha seta. Acho que parece ótimo, mas talvez eu realmente queira que a imagem do lado direito seja um pouco maior. Para fazer isso, vou precisar alterar o tamanho dos dois contêineres que tenho aqui dentro. Você se lembra de quando configuramos isso antes de tomarmos a decisão de escolher um pouco menor à esquerda e outro um pouco maior à direita. Se você clicar em cada um desses contêineres, escolher o layout e poderá ver o tamanho exato deles. O menor é 33,3 , então o maior é 66,6, é um terço Se eu quiser aumentar um pouco o contêiner da imagem, basta clicar nesse contêiner na estrutura, ir até a largura e digitar um número diferente. Digamos 70, talvez até maior do que isso, talvez 75. Eu sei que não é uma grande diferença, mas acho que funciona muito melhor. Gosto da forma como Wolfgang e Music estão agora em duas linhas No entanto, o texto é um pouco pequeno demais. Basta clicar no ícone aqui. Vá em uma tipografia, clique no seu lápis. É por isso que eu realmente defini esse como 40 e, em seguida, nas minhas configurações de tipografia, eu disse como Acho que na minha cabeça deveria ter sido 45, então vou mudar esse para 45. Lá vamos nós. Acho que isso funciona muito, muito bem. Acho que é fazer melhor uso do espaço quando você começa a criar seu próprio site, basta brincar com isso. Tudo se resumirá à quantidade de texto que você tem aqui, ao comprimento do título, ao tipo de imagem que você deseja usar, ao espaço. Vamos voltar ao editor e depois escolher a imagem que queremos usar. Aqui à direita, novamente, basta clicar na imagem aqui à esquerda. Vá para Editar imagem e, em seguida, vá para Biblioteca de mídia. Estou procurando algo peculiar para aqui que funcione com minha pequena introdução Eu gosto deste com a pequena luz LED. Você é o que você escuta . Vamos tentar esse. Sim, acho que parece ótimo. Vamos esconder o painel. Acho que é um bom fluxo da seção superior para esta seção porque representa o preto e o vermelho que estamos usando aqui. Outra coisa a verificar ao inserir a imagem está aqui à esquerda, onde diz Editar imagem é a resolução da imagem. Clique nesse menu suspenso e você verá muitas opções diferentes. A razão pela qual você quer contornar isso é que você quer colocá-lo no lado certo, nem muito grande nem muito pequeno. Se for muito grande, diminuirá o carregamento do seu site. Se for muito pequeno, bem , ficará ruim. Deixe-me te mostrar. Se eu escolher a miniatura, ela ficará minúscula. Esse é o caminho para este site. Então, se eu for até este, a resolução é de mais de 2000 pixels por 2000 pixels, visualização é absolutamente boa. No entanto, é muito grande para esta seção, porque, como você pode se lembrar, a largura do nosso site era de 1.140 pixels Não precisa ser tão grande. Na verdade, a configuração padrão ativada era grande de 1024 por 1024 Basta selecionar essa opção se estiver satisfeito com essa seção. É sempre bom vir aqui e salvar o rascunho. Acho que isso funciona muito bem como introdução. No entanto, acho que precisa de um pouco mais. Acho que precisa de uma camada extra. Eu simplesmente não acho que uma imagem seja suficiente porque fazemos muitas coisas diferentes na loja de música. Eu quero me mostrar um pouco mais. Há algumas opções aqui. Uma delas é incluir várias imagens, uma em cima da outra, completamente empilhadas No entanto, gosto do espaço que está sendo preenchido por isso. Agora eu não quero que ela ocupe mais espaço do que a única imagem. O que vamos fazer é transformar essa única imagem em um carrossel de imagens Serão várias imagens diferentes deslizando de uma para a outra. Para fazer isso, venha até o seu elemento de adição positiva. Role para baixo até a seção geral e escolha essa que é carrossel de imagens Em seguida, arraste-o até o contêiner. Agora, quando você arrasta todas essas coisas, você verá que essas pequenas linhas que aparecem significam que você pode colocá-las acima ou abaixo de algo no meio de algo. Bem, essa é para substituir a imagem que está lá. Apenas certifique-se de ver sua linha rosa acima ou abaixo. Vamos escolher acima. Quer que esse carrossel fique aqui Na verdade, não quero mais que essa imagem esteja lá. Uma maneira rápida e rápida de excluir esse clique com o botão direito do mouse, escolha Excluir Podemos fazer isso aqui na estrutura. Clique com o botão direito, exclua. Agora vamos editar esse carrossel. Clique no carrossel ou escolha-o aqui na sua estrutura Isso abrirá o menu de conteúdo aqui à esquerda. Antes de tudo, bem, precisamos selecionar algumas imagens, não é? Clique em Adicionar imagens, ele mostrará novamente a biblioteca de mídia, a imagem que tínhamos lá. Eu ainda amei essa imagem e quero que seja minha primeira imagem. Eu vou selecionar esse. Então, quero incluir algumas imagens que mostram as duas principais coisas que fazemos nesta loja de música. Primeiro de tudo, instrumentos, vendemos guitarras. Na terceira, vou escolher essa imagem em vinil porque também vendemos músicas na loja Acho que três é um bom número para isso. Brinque com isso você mesmo. Veja quantos você deseja incluir lá. Você não quer muito. Você não quer 100 imagens. Você quer mantê-lo curto e breve. Clique aqui, crie uma nova galeria e clique em Inserir galeria. Como você pode ver, as três imagens do carrossel apareceram aqui Vamos rolar um pouco para baixo para ter uma visão melhor disso. Ou se sua estrutura estiver atrapalhando, você pode movê-la para cima. Ou se você quiser se livrar dele, você pode fechá-lo aqui, mas talvez apenas movê-lo para um lado onde ele não esteja atrapalhando. Talvez desse lado, mas acho que está tudo bem lá. Acho que tenho espaço suficiente. Primeiro, o tamanho da imagem, novamente, muito pequeno para o que temos aqui. Miniatura, muito pequena. Vamos mudar isso para o que tínhamos antes. A versão grande, 1024 por 104, ficou toda maior. No entanto, não quero que as três imagens apareçam ao mesmo tempo, só quero que uma apareça. E então eu quero que ele deslize automaticamente para o próximo aqui, onde diz slides para mostrar. Certifique-se de que estamos no desktop. Então, em vez do padrão, vamos escolher um. Eu só quero que ele mostre uma única imagem por vez. Como você pode ver aqui, ele está deslizando automaticamente de um para o outro Acho que isso é realmente perfeito em termos de velocidade e tudo mais. Além disso, como você pode ver, há pequenas flechas aqui. Isso significa que, quando um usuário acessa a página, ele pode percorrê-la em seu próprio ritmo. Isso oferece às duas opções, mostrando automaticamente há outra coisa e permitindo que elas percorram. Em termos dessas setas e desses pequenos pontos na parte inferior Bem, brinque com a navegação por aqui. É configurado automaticamente para setas e pontos. Se você quiser apenas as setas, escolha aquela. E, obviamente, o mesmo com os pontos, ou você não pode ter nada Mas eu gosto das flechas e dos pontos. Vamos clicar nessa seta. Esconda o painel. Eu acho que isso parece ótimo. Acho que, ao descer daqui, vejo esse carrossel animado me mostrando várias coisas diferentes que eu posso esperar se eu for para Wolfgang Música Acho que só quero adicionar um elemento extra aqui. Eu só quero te mostrar como fazer outra coisinha legal para dividir o texto, basicamente como temos aqui. Temos o cabeçalho e depois a cópia do corpo. Eu só quero colocar uma linha entre os dois. Vou colocar o que é chamado de divisor. Esse é outro elemento aqui. E o elemento, em seguida, escolha no divisor de seção básico e, em seguida, basta arrastá-lo E, novamente, lembre-se de que as linhas rosa mostrarão onde ela vai cair. E eu quero isso entre os dois pedaços de texto. Deixe-o aí, é assim que parece. Significa apenas que há uma divisão extra entre as duas seções do texto. Mas não sei, não estou muito feliz com o tamanho e o espaço. Eu só tenho uma pequena brincadeira com isso de novo, basta clicar na sua divisória, clicar no ícone do lápis Então, a primeira coisa com a qual você pode brincar aqui é o elemento de estilo ou tem vários estilos diferentes, alguns dos quais são um pouco mais loucos do que outros, que você pode ter uma linha encaracolada, pode ter curvas ou pode enlouquecer e ter pinheiros Não sei o que mais, Zigzags, há muitas opções diferentes Escolha um que você ache melhor para representar seu serviço e o produto que você está vendendo. No entanto, acho que aqui, eu só quero o normal. Só um sólido tem boa largura, acho que é um pouco grande demais. Não quero que vá até a borda do corpo da cópia. Então, vai mudar para 50%. Isso é melhor. Um pouco menor que o estilo. Vamos subir até aqui. Primeiro de tudo, é um pouco fino. Vou dizer que está em uma única linha. No momento, eu poderia simplesmente brincar com isso e transformar algo maluco, ou o maior é dez. Mas acho que talvez três sejam bons lá. 3.5 Agora três, eu gosto de três. Minha primeira escolha, então, acho que há um pouco de espaço demais entre os dois pedaços de texto e a linha. Eu vou mudar a lacuna. Esse é apenas o espaço ao redor da linha. Vamos mudar isso para cinco. Lá vamos nós. Eu gosto disso. Isso parece muito mais forte agora. Talvez seja um pouco preto escuro demais. Eu quero que seja um pouco mais leve, não mais forte que o texto. Novamente, você pode escolher uma cor personalizada. Escolha sua cor primária, se quiser. No entanto, eu ainda quero um preto. Então, vou clicar no seletor de cores e puxá-lo até aqui Sim, acho que foi ótimo. Adoro isso. Acho que o que precisamos agora é mais algumas informações abaixo desta introdução inicial, mais informações sobre o que fazemos na loja. Vamos voltar para o editor. O que vou mostrar a vocês como fazer aqui é como fazer a grade. Lembre-se de que, nesta seção superior, usamos um contêiner e tínhamos dois contêineres dentro desse contêiner principal. O que isso permitia era que houvesse diferentes larguras inconsistentes entre os dois Começamos com um três e depois com 23, e então eu pude editar a largura deste, que automaticamente editou a largura deste 12. No entanto, para a próxima seção, quero três colunas com exatamente a mesma largura. Portanto, em vez de escolher um contêiner, escolheríamos uma grade. Clique no sinal de adição e escolha a grade. Agora você tem diferentes opções de estrutura aqui. O que estou procurando são três colunas configuradas dessa forma. No entanto, se o que você quer não pode ser visto aqui, não se preocupe, você pode simplesmente colocar qualquer tamanho e depois editar você mesmo Mais tarde, vou escolher apenas três colunas. Lá vamos nós. Agora, o que temos aqui é uma grade. Dentro da grade há três colunas separadas. O que queremos fazer é adicionar a mesma coisa em três delas. O que eu quero que seja é uma imagem com o texto abaixo. Vamos até Adicionar elementos. Novamente, vamos começar com um texto abaixo em que eu gostaria de um texto. Vamos para Adicionar elemento. E então pegue seu editor de texto normal e solte-o abaixo da imagem. Agora eu quero que vá abaixo, mas como você pode ver agora, não está me dando essa opção. Se eu olhar onde estão as linhas rosa, é só à esquerda e à direita. Se eu soltá-lo em qualquer lugar, ele realmente vai para a próxima coluna. Isso porque você só pode ter um elemento dentro de cada seção da grade. Como temos duas coisas? Bem, isso é bem simples. Muito fácil. Em primeiro lugar, vamos excluir esses dois elementos. O que precisamos, semelhante ao que tínhamos antes, é basicamente um contêiner Dentro de cada uma dessas colunas, deixei cair um contêiner. Por ser um contêiner, isso significa que posso colocar vários elementos diferentes dentro desse contêiner. Isso pode parecer um pouco confuso, mas vamos tentar novamente, o que tentamos fazer antes de, antes de tudo, eu clicar em adicionar elemento Então eu coloquei uma imagem. O que estou fazendo aqui, como você pode ver aqui na estrutura, é colocar uma imagem dentro de um contêiner que está dentro de uma única coluna da grade. Agora, abaixo dessa imagem, eu só quero o editor de texto novamente. Clique em um elemento solte-o no Editor de Texto. Aí está. Agora você pode ver que funcionou. O que vamos fazer agora é basicamente copiar o que temos aqui. O que vou fazer é clicar no contêiner. Quero que esse contêiner exato apareça três vezes porque, embora tenham imagens e textos diferentes, a configuração é idêntica. Passe o mouse sobre você. Clique com o botão direito no contêiner. Basta escolher duplicar. O que é feito é colocar esse contêiner na próxima coluna da grade. Duplique novamente e pronto. Agora, tudo o que precisamos fazer é selecionar a imagem que você deseja inserir em cada uma e atualizar nosso texto. Vamos começar com imagens novamente, essas são caixas de imagens individuais. Basta clicar na sua imagem e depois ir até aqui à esquerda para editar a imagem. Novamente, minha escolha de imagem aqui é apenas para mostrar a variedade de serviços que oferecemos na loja de música. Vou tentar obter uma variedade diferente da que tínhamos antes. Este é muito bom porque esse é o lado mais técnico do equipamento musical. Vamos selecionar essa para a primeira coluna e depois para a próxima. Vamos ver o que mais podemos escolher que seja um pouco diferente. Acho que esse aqui parece ótimo. São alguns fones de ouvido. Esse é outro serviço que oferecemos na loja. Vamos selecionar isso então. Para a última coluna, acho que talvez essa, que é uma imagem de banda ao vivo, não vendamos bandas ao vivo lá. Mas acho que é apenas uma boa representação do que podemos oferecer aos clientes para ajudá-los com seus shows ao vivo. Vamos selecionar esse. Lá vamos nós. Todas as três imagens têm exatamente a mesma proporção, onde são três por duas. Então, isso está funcionando perfeitamente. Tudo o que preciso fazer agora é adicionar meu texto novamente. Clique em Texto, clique no ícone do lápis ou venha até aqui para sua estrutura. Como você pode ver, temos uma grade com três contêineres individuais dentro dela. Se você quiser colocar o texto dentro de um deles, solte esse contêiner e escolha o editor de texto. Mas acho que clicar nele na página é provavelmente a maneira mais fácil. Eu já escrevi meu texto e retirei qualquer código HTML, ele vai colar cada pedaço de texto aqui Nesta seção, o alinhamento é muito importante. Embora tenhamos a mesma proporção nas três imagens, o tamanho do texto é aproximadamente o mesmo para cada uma. Você não quer um, são apenas algumas palavras. E a próxima com 100 palavras. Tente mantê-los aproximadamente do mesmo tamanho e , em seguida, eles ficarão bem alinhados na parte inferior do texto Ok, vamos dar uma olhada neste. Esconda o painel. Eu acho que isso parece ótimo. Acho que é perfeito passarmos da primeira seção de abertura do herói para a imagem deslizante aqui embaixo com a introdução inicial Em seguida, entramos na grade. Apenas uma coisinha que eu posso ver aqui, essa seria a visão de um designer que está percebendo essa, se você a encontrar. Bem feito. Apenas o espaço, o alinhamento dessa imagem aqui e o alinhamento desse texto Há um pequeno espaço extra lá. Vou revisar e editar isso. Vamos voltar para o editor. Como você pode ver, quando eu passo o mouse sobre o contêiner, há um pequeno espaço extra por aqui Essa é uma configuração padrão dentro do Elementor. Ele sempre o configurará para que haja uma pequena lacuna de pixels ao redor de tudo. Um pequeno estofamento, se você quiser. O que vamos fazer é editar esse contêiner. Basta clicar no contêiner ir para Avançado. Tudo o que eu quero fazer é garantir que a seção de preenchimento esteja toda definida como zero Aí está. Posso entrar em cada um e configurá-lo manualmente para que fique no mesmo espaço ao redor de cada um. Ou uma maneira rápida de fazer isso, mouse sobre o contêiner que você sabe que está correto Clique com o botão direito em copiar. Em seguida, vai o contêiner que você deseja trocar. Clique com o botão direito do mouse e escolha Paste Style. Você pode ver que isso mudou automaticamente porque o estilo desse contêiner era ter uma panorâmica de zero Ele leu que dentro desse contêiner, porque eu copiei estilos, colei os estilos aqui, ele muda automaticamente para exatamente a mesma coisa Brinque com isso. Às vezes, isso funcionará para você, às vezes não verá apenas o que você pode fazer funcionar. Vou mover essa estrutura para cá também. Lembrei que não fiz isso nesta seção superior. Enquanto este está alinhado aqui no lado esquerdo, este tem espaço. Então, vamos editar o contêiner ou colar o estilo novamente. E aí está. Acabou de remover aquela pequena lacuna ali. E agora você pode ver que isso se alinha perfeitamente lá em cima, que se alinha perfeitamente lá em cima. Incrível. Vamos mover a estrutura volta para cá e salvar o rascunho. 9. Seção de animação NOVA: Ok, seu site já está com uma aparência legal. E essa foi uma seção de introdução muito boa. Agora acho que precisamos entrar em mais detalhes sobre sua empresa e seu serviço. Vou começar a criar uma seção que chamarei de seção Sobre. O que faremos aqui é começar a adicionar um novo contêiner, clicar no sinal e escolher a caixa flexível Vou usar duas colunas aqui para isso. Agora, a única coisa que vamos fazer de forma um pouco diferente aqui é a largura do contêiner, o contêiner principal. Novamente, basta clicar nos pequenos pontos no meio para editar o contêiner Então venha aqui para o menu à esquerda. Verifique se você selecionou os layouts. A única parte que vamos mudar aqui é a parte em que diz largura do conteúdo. Normalmente, ele aparece automaticamente em caixa e encaixotado em 1.140 pixels, pois essa é a O que vamos fazer com este, no entanto, é a largura total. Como você pode ver aqui embaixo, essas colunas internas se estenderam até a borda antes de terminarem aqui Agora eles vão até a borda da página. É isso que queremos fazer com a largura. Queremos que ele preencha a página inteira. Vamos também brincar com a altura. Vamos tentar fazer com que ela também preencha a página inteira com altura. A melhor maneira de fazer isso é entrar no menu suspenso aqui na altura mínima e escolher a altura vertical VH Digite uma, pois será 100%. O plano que tenho para esta seção sobre é ter outra imagem forte no lado direito e depois um texto no lado esquerdo. O que vamos fazer aqui é alterar o plano de fundo das duas colunas internas. Vamos trazer de volta a janela da estrutura. Lá vamos nós. Este é o nosso contêiner principal e, em seguida, os dois contêineres internos menores. Vamos escolher primeiro o contêiner à direita, clicar nele ou clicar no próprio contêiner ou na caixa cinza à esquerda. Em seguida, aqui no lado esquerdo, escolha o estilo no plano de fundo. Novamente, clique no clássico e escolha uma imagem. A imagem que eu quero usar aqui, bem, eu quero que seja sobre o cliente. Quero mostrar um de nossos clientes dentro da loja tocando violão. Vamos colocar esse aqui. Lá vamos nós. Vamos mover a estrutura para lá. mesmo problema que tivemos anteriormente com a forma como está enchendo a caixa. Novamente, essas são as configurações padrão. Venha aqui à esquerda para editar o estilo do contêiner. Novamente, vamos alterar as configurações na posição aqui, digamos centralizar, centralizar, repetir, sem repetir e, em seguida, tamanho da capa da tela. Lá vamos nós. Agora está enchendo a caixa inteira. No entanto, é uma safra muito estranha. Agora estou pensando que não preciso que a altura seja 100%. Provavelmente é muito grande para a quantidade de texto que eu quero executar no lado esquerdo Vamos clicar nos pontos aqui para editar o contêiner, certifique-se de que o layout esteja selecionado E então talvez vamos mudar a altura vertical para 75%. Pronto. Acho que é uma exibição muito melhor da imagem que escolhi usar aqui. Agora vamos mover a Estrutura de volta para este lado. Então, vamos escolher esse contêiner novamente. Escolha-o no menu Estrutura ou simplesmente clique no contêiner aqui no lado esquerdo e escolha Estilo Clássico. Agora, o que eu quero aqui é um fundo colorido porque, novamente, isso ajudará na divisão entre a seção na parte superior, que terá um fundo branco, e a seção abaixo , que também terá uma ordem de fundo branco. Com isso selecionado, venha aqui e clique neste ícone de globo padrão. E escolha a cor primária. Escolha a cor que você quiser aqui, mas eu vou escolher a cor primária Como eu acho que é uma boa divisão do branco acima para uma seção colorida. Agora, como você pode ver de cima, rolamos para baixo desse fundo colorido para uma seção branca até essa seção em negrito com um fundo colorido e uma imagem sem margens Porém, algumas coisas que eu preciso mudar aqui são o espaço entre a seção acima e esta seção. E também essas bordas estranhas que estão por aqui. Se eu clicar na seta, vamos ver como ela ficaria em uma versão ao vivo da página. Sim, como você pode ver, ainda há bordas brancas ao redor de cada seção aqui. Vamos ver se podemos retirá-los. Vamos dar uma olhada no contêiner principal. A Destaque o contêiner principal e escolha seus pontos na parte superior, ou escolha-o no menu Estrutura Então, aqui à esquerda, vamos escolher Avançado. Vamos definir a margem e o preenchimento como zero. Deve ter sido o estofamento. O preenchimento foi definido automaticamente para talvez dez pixels. Agora que eu configurei isso para zero, vamos esconder o painel. Lá vamos nós. Agora está indo até o limite. Não temos um espaço em branco na borda. Se você alguma vez ver isso em qualquer uma de suas configurações, basta brincar com a margem e o preenchimento no contêiner ou nos contêineres internos O que eu preciso é de espaço acima desta seção, e também precisarei de espaço abaixo da seção. Vamos até aqui para marcar. Novamente, estou editando o contêiner principal. Vamos vincular os valores seguida, 100 na parte superior e 100 na parte inferior. Vamos ver como isso parece agora. Sim, esse é um espaço muito melhor entre essa seção branca na parte superior. Também é consistente em termos de espaçamento aqui, espaçamento aqui e espaçamento aqui, que novamente está na parte inferior Minha única preocupação com isso é que usando nossa cor primária muito ousada, ela funciona e parece legal. Mas acho que quero que seja um pouco mais leve. Ainda quero dividir entre esta seção e as seções brancas acima e abaixo, mas vou apenas brincar com a cor de opacidade, a cor primária que adicionei aqui Novamente, vamos editar esse contêiner. Clique aqui em Estrutura. Clique no próprio contêiner. Vamos para Style. Isso é o que configuramos com o tipo de plano de fundo clássico com essa cor primária. Clique na cor em si aqui, a cor vermelha. Em seguida, esta pequena barra aqui embaixo que brincará com sua opacidade que é visível Você pode simplesmente arrastá-lo da esquerda para a direita. Para isso, você pode simplesmente brincar aqui com o seletor de cores e escolher uma cor um pouco diferente, mas isso é errado. Estamos alterando a opacidade dessa cor. Essa ainda é a cor primária que configuramos. Ainda é o mesmo código hexadecimal. São apenas os números que estão mudando ao lado. Eles estão essencialmente se referindo a uma porcentagem Vamos continuar arrastando isso para baixo. Acho que estou analisando os 20%. Talvez esses 121, 21%. Deixe-me ver como isso parece agora Acho que é um bom fluxo de cima para baixo até esta seção, para a seção branca e depois para esta. É suficiente uma divisão entre as duas cores, como uma seção separada, mas não é muito intensa, nem muito cheia. Vamos voltar. O que eu gostaria de colocar aqui são duas colunas de texto separadas. Na coluna à esquerda, eu vou ter um número 01 na próxima seção, abaixo disso, teremos o número dois. Número três. Número quatro, falaremos sobre isso mais tarde. Aqui, eu quero duas colunas de texto. Um que tem um 01 grande e em negrito, depois outra coluna ao lado que tem a palavra guitarras e, em seguida, algumas informações breves sobre o serviço de guitarras Agora vamos subir para um nível extra de contêineres aqui. Temos dois contêineres dentro de um contêiner. Agora quero colocar mais dois recipientes dentro desse contêiner à esquerda. Vamos voltar ao nosso ponto positivo aqui e adicionar um elemento. Vamos colocar um recipiente dentro desse primeiro recipiente vermelho que está lá no topo. Vamos adicionar outro contêiner abaixo disso aqui, agora temos dois contêineres dentro desse contêiner. Isso funcionaria se você configurasse seu texto dessa forma, da forma como ele é empilhado, da forma como temos 01 na parte superior e, em seguida, guitarras e as informações abaixo Mas eu não quero que seja assim. Eu gostaria que eles estivessem alinhados lado a lado. Eu gostaria de uma coluna à esquerda e uma coluna à direita. O que precisamos fazer aqui é editar o contêiner em que esses dois contêineres estão. Novamente, vamos ao nosso menu Estrutura aqui. Então, este é o contêiner principal. Isso, como você pode ver, a propósito, está destacado no contêiner de texto. Esse é o que eu quero editar, estou clicando aqui. Em seguida, ele passará para o layout. Estou examinando esta seção aqui, direção. Isso quer dizer que tudo o que está dentro desse contêiner corre horizontal ou verticalmente, pois são empilhados um em cima No momento em que é vertical, vou mudar essa horizontal. Lá vamos nós. Você pode ver a mudança que aconteceu lá. As duas colunas agora estão à esquerda e à direita uma da outra. Agora, adicionarei 01 a esta coluna à esquerda e, em seguida, Guitarras e as informações a esta coluna à direita Agora vamos começar a adicionar texto às duas colunas que temos aqui. Vamos começar com a coluna à direita. Essa é a mais fácil. Queremos começar com um título de Guitarras. Vou deixar isso aqui. É automaticamente configurado para H dois, e é isso que estamos procurando. Vamos apenas escrever a palavra guitarras em termos da cor Muito parecido com o vermelho, mas acho que só quero que seja a cor normal do texto. Vou até Estilo, clicar no botão Principal e escolher Texto. Eu gosto disso. Agora vamos para Adicionar elemento novamente na parte superior aqui. E basta inserir um editor de texto comum. Novamente, isso acabou de ser incluído no texto padrão do lurum ipsen No entanto, tenho uma cópia de todo o texto que quero usar aqui. O HML foi retirado deste, é claro, vou colar isso Agora o que eu quero é o número um ou 01 no lado esquerdo. Vamos adicionar isso como outro título. Vamos subir para adicionar um elemento na parte superior aqui. E coloque outro título aqui no lado esquerdo. Co novamente, ele é colocado em um H dois, o que é bom. E eu vou mudar isso para 01. Em termos da tela que eu quero aqui, eu quero que ela fique mais perto do texto no lado direito. No momento, ele entrava automaticamente como texto alinhado à esquerda Mas eu posso mudar isso. Eu posso fazer esse texto, o 01, se alinhar ao outro lado desse contêiner Para fazer isso, vou rolar até aqui até onde diz alinhamento e escolher o lado direito para obter essa perfeição Agora, com estilo aqui, eu quero editar isso. Eu vou melhorar o estilo. Em primeiro lugar, a cor do texto, não quero que seja vermelho sólido. Vou clicar na cor aqui, escolher o seletor de cores E eu vou realmente selecionar branco puro nesse tamanho. Não é particularmente legível. Vamos à tipografia. Clique no ícone do lápis aqui. Estou feliz com um, estou feliz com o peso aqui. É exatamente o tamanho. Isso precisa ser muito maior. Então, vou arrastar isso de uma forma para cima. Vou falar muito sobre isso, talvez até 200, parece que 200 é o máximo que você pode fazer. É em termos de usar esse arrasto na barra. Se você quiser ir muito mais longe, basta destacar o texto aqui e escrever em um número. Vamos escrever em 800. Vai custar 800, na verdade não queremos que seja desse tamanho. 200 foi bom, mas é assim que você pode alterar o tamanho do texto para o que quiser. Vamos mudar isso de volta para 200. Isso parece ótimo. Acho que só precisa de um pouco mais de espaço entre o zero e o um. Vamos brincar com o espaçamento entre letras novamente aqui. Arraste-o um pouco para fora. Acho que vou até o final do bar aqui também. Dez? Sim, acho que parece ótimo. Vamos esconder o painel. Eu realmente gosto disso. Eu gosto do jeito que temos 01 sentado aqui, e então isso se transforma em guitarras e então vemos a imagem No entanto, o alinhamento e o espaçamento não estão corretos. Vamos voltar para o editor. Em primeiro lugar, não quero que o texto fique no fundo desse contêiner. Eu quero que fique no centro. Novamente, uma maneira muito rápida de resolver isso é dizer que todo o contêiner vermelho deve ser centralizado ou todo o conteúdo dentro desse contêiner deve ser centralizado Novamente, podemos simplesmente clicar no contêiner vermelho, clicar na caixa cinza no canto superior esquerdo ou escolhê-la aqui em Estrutura. Então, simplesmente, quero ir para esta seção aqui quando estivermos no layout Editar contêiner e dizer: Alinhar itens ao centro Simples assim. Vamos dar uma olhada nisso. Sim, adoro como isso fica no centro desta caixa. O único problema que temos é o quão próximo o texto está aqui da imagem à direita. Vamos mudar o preenchimento. Vamos mudar o preenchimento dentro desse contêiner interno. Novamente, posso ir até esta seção, clicar na caixa cinza ou escolher aqui em Estrutura. Em seguida, aqui no contêiner de edição esquerdo , vá para Avançado. Vamos vincular todas essas seções. Então, à direita, digamos que queremos talvez 50 pixels, talvez um pouco mais, talvez 100. Vamos dar uma olhada nisso. Acho que é um bom espaço entre o texto e a imagem, e tudo isso se encaixa muito bem Acho que é um ótimo fluxo daqui de cima onde empilhamos imagens com texto abaixo, até este, onde temos o número à esquerda, a imagem do texto de introdução das guitarras à direita Isso parece ótimo. Só mais duas coisas que eu quero fazer nesta seção. Uma delas é, novamente, apenas um pequeno verso de dor de cabeça de designer. Eu sinto que há muito espaço entre as guitarras do título E então o texto abaixo Abra este contêiner e vamos para o layout. Isso porque, como padrão, elementor adiciona uma lacuna de 20 pixels entre cada coluna e linha Obviamente, eles estão em linhas, você pode ver que o espaço entre os dois elementos aqui é de 20 pixels. Eu acho que isso é um pouco demais. Eu preferiria que tivesse dez pixels. Vamos digitar dez. Lá vamos nós. Não parece uma grande mudança, mas do ponto de vista do designer, essas são as coisas que nos incomodam Agora, a única outra coisa que quero fazer com isso é animar o texto que podemos ver aqui, o 01 e as informações das guitarras À medida que as pessoas rolam a página para baixo, quero que cada elemento apareça de uma forma diferente, pois estamos no contêiner de texto principal aqui. Vamos editar esse primeiro. Vamos até Avançado, depois vamos para efeitos de movimento. É aqui que você escolhe qual é a animação de entrada para essa animação de entrada de contêiner, ou seja, quando as pessoas acessam essa parte da página pela primeira vez, é assim que ela aparece. Ele está configurado como padrão no momento, que basicamente não é nada nesse menu suspenso Bem, você tem muitas opções diferentes aqui, algumas delas são um pouco loucas. Se entrarmos neste caso, bancos que buscam atenção, isso não é muito louco. Flash, mas aí você tem coisas como sacudir a cabeça, Jello, isso é loucura Tudo que eu quero para este é um simples fade in. Vamos rolar até o topo e dizer fade in. E isso é tudo que ele vai fazer é alguém rolar a página para baixo, o texto não está lá, e então ele desaparece Você pode brincar com a velocidade com que isso acontece. Nesta seção, aqui, a duração da animação. É automaticamente configurado para normal, mas achei que foi um pouco rápido demais. Se eu escolher rápido, bem, isso é super rápido. Eu quero que seja configurado para ficar lento. Eu gosto disso. Acho que leva apenas mais um segundo para aparecer. Essa é a animação que eu gostaria para essa seção, mas quero algo um pouco diferente para o 01. Vamos selecionar esse contêiner aqui na Estrutura novamente. Vá até Avançado no lado esquerdo e vá para Efeitos de movimento. Eu quero que este seja exibido na lateral da página. À medida que este aparece de um ponto de vista estático, quero que ele deslize e apareça Vamos até esse menu suspenso. Aqui vamos nós. Temos outras opções de fade in. Podemos dizer fade in down. Onde cai desse jeito. Esquerda, direita para cima. Acho que, como esse elemento está no lado esquerdo do texto principal, quero que ele desapareça da esquerda Sim, eu gosto disso. Novamente, um pouco rápido demais. Vamos mudar para lento. Agora temos diferentes fade-ins para cada um deles. Vamos salvar esse rascunho e, em seguida, visualizar as alterações apenas para ver como isso ficaria para os visitantes. Esta é a nossa página de abertura principal. Conforme o usuário rola para baixo , ele chega a esta seção e pronto Vamos apenas recarregar esse. Assim, aparecem as guitarras e o texto abaixo. E então o 01 desaparece. É sutil, mas é outra forma de chamar a atenção dos visitantes do seu site. Realmente chame a atenção deles para o que você faz como um serviço. 10. Texto animado criativo: Se você acompanhou todas as aulas até agora, você já tem um site muito legal. Temos esse herói legal, depois essa ótima pequena seção de introdução com imagens deslizantes Em seguida, o início da nossa seção Sobre com 01 guitarras. O que eu gostaria de fazer agora é configurar 0,203,04. Vou fazer isso de uma maneira um pouco diferente da que temos Vou mostrar uma ferramenta interessante de animação de texto que você pode não ter visto usada em outro lugar, mas ficará muito legal em seu site. Vamos voltar ao editor. Role para baixo aqui. Vamos adicionar um novo contêiner de caixa flexível. Vamos escolher o 50, 50. Novamente, 50, 50 é ótimo porque se alinha com a divisão aqui entre texto e imagem. No entanto, para este, não quero aumentá-lo em toda a largura, quero que seja encaixotado Vamos mantê-lo aqui na seção de layout em caixa. E 1.140 pixels. O que temos dentro desse contêiner principal são dois subcontêineres Para cada um deles, vou configurar uma altura mínima em pixels. Eu gostaria que tivesse no mínimo 500 pixels de tempo. Eu gostaria que isso estivesse nos dois contêineres. Vou clicar com o botão direito do mouse e copiar este contêiner. Vá até meu outro contêiner, selecione a caixa cinza e clique com o botão direito do mouse em estilo de colar. Isso significa apenas que a altura mínima é alterada automaticamente, 500 pixels. Agora, o que eu quero aqui para a seção dois, seção três e seção quatro é semelhante ao que temos aqui, onde temos uma imagem de introdução, um número, um título e algum texto abaixo. Agora, para dividir a tela aqui nesta, temos texto à esquerda, imagem à direita. Eu quero fazer o oposto aqui. Vamos começar com a imagem à esquerda. Vamos clicar em Editar contêiner novamente. Clique no contêiner ou escolha-o aqui na sua estrutura. E depois revise o estilo. Vamos usar uma imagem de fundo aqui, você verá o porquê daqui a pouco, quando eu começar a adicionar os números. Vamos escolher o clássico, escolher a imagem. Eu vou escolher três seções diferentes. Nesta segunda seção sobre, vou falar sobre os discos que vendemos, todos os vinis Vou falar sobre shows ao vivo e depois vou falar sobre nossa atmosfera geral da velha escola que você sente ao ir à nossa loja O primeiro que eu quero ver são os discos de vinil. Vou adicionar essa imagem da garota pesquisando alguns discos de vinil Vamos selecionar isso novamente, as configurações usuais aqui em grande estilo. Na posição esquerda, centralize, centralize, repita, repita e exiba o tamanho da capa. Novamente, isso ajusta automaticamente a imagem ao contêiner, independentemente da proporção. Se for uma imagem quadrada, se for de três por 24 por três, ainda caberá aqui e estará tudo centralizado, que é ótimo para essa imagem, pois a garota está no centro da foto Para a coluna à direita, vou adicionar uma cor de fundo novamente. Escolha um contêiner aqui para criar um estilo clássico. E depois vou colorir, vou usar nossa cor secundária, o dourado. Mas eu quero fazer algo parecido com o que fiz aqui com o vermelho e com uma opacidade menor Clique na cor em si aqui, vá até o seletor de cores e arraste-a até um nível que lhe agrade Acho que é muito leve , passou para um. Eu gosto disso. Eu acho que isso parece legal. Agora, o que eu quero fazer é colocar o texto aqui à direita. E para garantir a consistência, vou até aqui e vou copiar o que temos. Vou copiar o título Guitars e colar aqui para garantir que tenha exatamente o mesmo tamanho e seja H dois novamente, vou chamar esse de disco Depois vou fazer outra cópia do texto aqui e colar abaixo do Word Records. Mais uma vez, copiei o texto do qual retirei o HTML, então vou colá-lo Agora, a exibição disso. Certo, do jeito que está tudo configurado aqui no canto. Eu quero que seja centralizado. Novamente, vou centralizar o conteúdo do contêiner Clique no seu contêiner, possivelmente aqui na estrutura. Vá para Layout e, em seguida, vamos centralizar o conteúdo dessa forma. E centralize o conteúdo dessa forma. Isso empurrou tudo para o centro do contêiner. A única coisa que ainda preciso centralizar é esse texto aqui Vou clicar no Editor de Texto de Edição de Texto, ir para Estilo e, em seguida, no alinhamento desse texto Eu quero que isso seja centralizado. Isso parece ótimo. A única coisa é que, novamente, o texto está um pouco perto da borda aqui. Vou mudar o preenchimento desse contêiner. Clique no seu contêiner e escolha Avançado. Vá para o seu estofamento. Acho que talvez uma borda de 50 pixels em tudo deva ficar bem. Todos eles foram vinculados, então vamos colocar isso na parte superior e inferior também. Tudo bem porque temos espaço suficiente aqui. Significa apenas que, se alguém estiver vendo a tela em tamanho maior, ainda haverá um espaço uniforme na parte superior, inferior, esquerda e direita para o número. Bem, novamente, vou subir aqui e copiar este. O que eu quero fazer é colá-lo em cima da imagem que você pode ver aqui. É por isso que escolhi uma imagem de fundo para esta. Novamente, vou clicar no contêiner ou clicar na caixa cinza aqui em cima. Em seguida, cole aqui dentro que está o número 01. Vamos mudar isso para 02 e, em seguida, garantir que o texto esteja centralizado Então, dentro do contêiner, novamente, quero que tudo seja centralizado Vamos fazer o layout, enviar para o conteúdo, para o, tudo está centralizado Agora, no entanto, este texto, bem, duas coisas que eu quero mudar aqui. Primeiro de tudo, eu realmente não consigo ver a garota por trás disso. Vamos editar a caixa de texto. Clique no ícone do lápis aqui. Vamos para Style. Vamos para a cor do texto. Clique no ícone colorido à direita. Novamente, vamos mudar a opacidade disso. Eu vou deixá-lo no chão agora. Isso parece muito legal porque estamos vendo um número, mas o vemos na parte superior da imagem. Algo assim funciona muito bem para um número. O número é muito claro, você não gostaria de fazer uma parte longa do texto assim porque pode não estar visível Mas para algo como um número, isso é apenas uma indicação do que está por vir. Eu baixei isso para 73 lá. Eu acho que está tudo bem. A única outra coisa que eu quero é que ele preencha mais espaço. Vamos à tipografia. Clique aqui no ícone do lápis que está atualmente definido como 200. Como eu disse anteriormente, esse é o máximo que você pode usar com o controle deslizante aqui Mas vamos colocá-lo em talvez 400 pixels. Sim, isso parece ótimo. Eu absolutamente amo isso. Eu acho que é uma declaração muito ousada. Diz aos visitantes que eles estão na interseção dois da seção sobre, mas ainda consigo ver a garota abaixo e ver o que ela está fazendo Agora, a única coisa que eu quero adicionar aqui é uma animação para o título onde diz Records Again, vamos apenas clicar no título. Escolha aqui em Estrutura ou clique no ícone rosa. Em seguida, vamos para Avançado, vamos para Efeitos de movimento e, em seguida, vamos fazer um fade in Vamos fazer um fade in down. Eu realmente gosto disso. No entanto, é aqui que quero mostrar algo um pouco diferente. Há uma maneira muito legal e peculiar de fazer um título ser animado Conforme os usuários rolam para baixo até essa parte da página, o que eu quero fazer é separar o título em letras separadas. A letra, a letra e a letra C, e faça com que cada uma delas se anime de uma forma diferente Vamos editar esse título e alterá-lo apenas para R. Eu escolhi o título, e vou passar aqui para Conteúdo e alterá-lo para R. Então o que eu quero fazer é duplicá-lo Vou escrever o clique e vou duplicar. E eu quero que isso seja um, o único problema que temos aqui é dentro deste contêiner. Se eu for para o layout, você verá que a direção é uma coluna vertical. Mas eu preciso que as letras fiquem lado a lado para ficarem horizontais. Se eu mudasse a direção desse contêiner para horizontal, bem, eles se sentam um ao lado do outro, mas agora eles se sentaram à esquerda do texto, e eu quero que eles estejam em cima. Vamos voltar para a vertical. E o que vamos fazer aqui é adicionar outro subcontêiner dentro desse contêiner Clique aqui em um elemento e depois solte-o aqui. Ao ver a linha rosa, coloque-a acima do texto normal. O que eu quero para este contêiner é que a direção seja horizontal. Então eu já criei essas cartas. Vamos apenas arrastá-los para este contêiner. Clique no ícone e arraste para baixo até ver a linha rosa. E então faça o mesmo com o E. Ou outra maneira mais rápida fazer isso é usar o menu Estrutura aqui. Porque eu sei que quero colocar esse título neste contêiner, para que você possa arrastá-lo até lá, então ele é feito na ordem errada. Vamos mover esse abaixo deste. Fica assim. Isso parece ótimo. No entanto, eu ainda quero que seja centralizado E também preciso brincar com o espaço que está entre cada elemento. Aqui, vamos para o contêiner. Esse subcontêiner, novamente, garante que tudo esteja centralizado Além disso. Vamos apenas brincar com as lacunas aqui. Novamente, o padrão é defini-los como 20. Nós mudamos para dez mais cedo, não é? Eu ainda acho que é um espaço muito grande. Vamos apenas alterá-lo para zero. Lá vamos nós. Agora vamos nos certificar de que temos todos os registros de palavras. Outra maneira rápida de fazer isso, venha aqui até sua estrutura. Escolha sua última letra e depois duplique-a. Então aqui, escreva na carta que você quer que seja. Faça isso várias vezes até que tenhamos escrito o todo, essa é a letra errada. Agora, tudo isso diz registros. Agora, a razão pela qual escolhi transformar isso em letras separadas é porque quero uma animação ligeiramente diferente em cada letra, ou pelo menos uma na outra letra. Se dermos uma olhada no que temos no R, clique no seu R, vá para Avançado. Os efeitos de movimento. Estava desaparecendo. Agora vamos para a segunda letra e, em seguida, vamos alterá-la para desaparecer Em seguida, desaparecendo, D, desaparecendo para cima, para baixo. D, para cima. Agora vamos salvar esse rascunho e, em seguida, dar uma olhada na prévia novamente para ver como, como isso funciona. Conforme rolamos para baixo, vemos a animação lá e, em seguida, essa é a animação lá. Deixe-me recarregar esse para você e você verá a palavra registros aparece assim Eu acho que isso parece muito legal. Agora vamos voltar ao editor. Brinque com o tamanho de tudo aqui. Agora que temos toda essa seção 02 configurada, podemos duplicá-la e fazer exatamente a mesma coisa para a seção três e a seção quatro Agora, apenas algumas edições do designer. Novamente, é assim que meu cérebro de designer funciona em termos de espaçamento e tamanhos A primeira coisa que eu quero mudar é apenas o espaço entre os registros do título e o texto abaixo. Vamos para o contêiner principal em que isso está, esse aqui. Então, vamos mudar as lacunas aqui novamente para dez. Lá vamos nós. Agora, a única outra coisa que eu gostaria de fazer aqui é tornar a palavra registro um pouco maior e um pouco mais ousada Vou mudar o tamanho da tipografia. Vamos começar com a letra R, depois vamos ao estilo e à tipografia Novamente, o tamanho é coletado automaticamente o que definimos para o H dois, mas podemos alterá-lo manualmente aqui. Digamos talvez 45. Sim, acho que é um tamanho muito melhor. Agora, a maneira simples de alterar todas as letras aqui para o mesmo tamanho seria escrever, clicar, copiar e colar o estilo. No entanto, queremos evitar fazer isso em todas as letras, porque se fizermos isso, também ultrapassará o estilo da animação de entrada. Como temos algumas que estão desaparecendo e outras que estão desaparecendo, só precisamos fazer isso em todas as outras Vamos do R para o estilo de pagamento, depois de C para o estilo de pagamento e de R para o estilo de pagamento. Isso realmente parece muito legal, para ser honesto, se você gosta disso. Do ponto de vista do design, mantenha-o assim. Mas eu só quero consistência aqui e tornar os registros de palavras um pouco mais fáceis de ler. Vamos clicar no E. E depois subir aqui para estilizar a tipografia Certifique-se de que também tenha 45 pixels. Copie esse e cole no O e no D. Pronto. Agora estou muito feliz com esta seção. Acho que isso funciona muito bem e funciona muito bem. No dia 01/02, está fazendo a mesma coisa. Está listando todas as coisas que fazemos na empresa, mas é feito de uma forma um pouco diferente, peculiar e legal Ao fazer isso, manteremos atenção de todos mais abaixo na página. Mas acho que duplicamos esse estilo exato para o número três e o número quatro Isso é muito fácil e muito rápido de fazer. Se apenas duplicarmos o contêiner principal, pronto Eu dupliquei isso lá embaixo. O que vou fazer é torná-lo o número três e, em seguida, alterar o título e alterar o texto abaixo. Só uma coisa que está me incomodando aqui é que vamos nos esconder. O painel é apenas um pequeno espaço entre cada um, pois estamos dentro da mesma seção. Não quero espaço. Eu quero que eles se toquem Novamente, essas são as configurações padrão que esse elemento ou tem em termos de preenchimento de uma margem Vamos editar esse contêiner na parte superior, clique nos seus pontos na parte superior Venha aqui para Avançado e altere ambos para zero. Sim, lá vamos nós. Isso é perfeito. Agora, não há espaço entre os dois. A única coisa que eu quero fazer aqui, porém, é brincar com o estilo aqui. O problema é que, como ambos estão usando a mesma cor dourada, eles se fundem em uma e você não obtém a mesma separação que obteria se houvesse uma lacuna O que vou fazer aqui é outra coisa legal de design. Vou trocar os dois contêineres. Vamos até este contêiner e, como você pode ver, dentro do contêiner principal, dois subcontêineres, vou pegar o segundo e movê-lo para cima para ser o primeiro Lá vamos nós. Agora, como isso funciona é que eu vou para 02-03 e depois 04 seguirá o mesmo caminho que o que está no topo Isso seria apenas uma boa divisão de texto de imagem, texto imagem, texto de imagem. Vamos atualizar o primeiro 03. Este será sobre shows ao vivo. Escolha seu contêiner e , em seguida, altere sua imagem para shows ao vivo. Acho que essa foto do cara com seu violão. Selecione isso porque já configuramos a posição, a repetição e o tamanho da exibição da versão anterior. Não precisamos fazer isso de novo, isso parece muito legal. Em primeiro lugar, vamos adicionar meu texto de cópia aqui. É sobre apresentações ao vivo. Então eu preciso mudar isso para dizer shows ao vivo. Tudo isso tem que ser feito manualmente. Então, vamos entrar aqui e escrever a palavra shows ao vivo. Agora, alguns problemas aqui. Primeiro de tudo, não há letras suficientes. Vamos duplicar algumas letras aqui. Eu preciso de mais dois. Vamos duplicar esses dois, alterá-los para W. E ao duplicar essa letra, isso significa que a animação agora está errada no W. Vamos apenas editar esse título Venha aqui para Avançado e mude para o oposto. Isso deve ser desvanecido. Agora, todos eles se alinham corretamente. Acho que a outra coisa é boa, shows ao vivo podem ser uma única palavra, mas estou tratando isso aqui como duas palavras separadas. Preciso de um pouco de espaço entre o E e o S. Muito simples de fazer isso, vamos selecionar a opção Ir para a. Desvincular os valores e colocar um pouco de preenchimento no lado direito dessa letra, talvez dez pixels Lá vamos nós. Isso funciona perfeitamente. Agora vamos apenas duplicar o contêiner superior. Clique com o botão direito em duplicar. Obviamente, isso o colocou acima do número três, mas vou selecionar os pontos aqui e arrastá-los para baixo para ir abaixo deles Lá vamos nós. Agora você verá como as seções fluem de uma para a outra. Ao dividi-los assim, você está chamando a atenção das pessoas muito melhor Vamos editar esse último aqui embaixo. Vamos fazer isso 04 então. Esta será a seção da velha escola. Vamos para o contêiner, escolha o estilo, escolha a imagem. Eu quero essa imagem de fitas cassete. Isso é muito antiquado. Isso fica ótimo com um 04 na parte superior. Eu copiei meu texto. Deixe-me colar isso no editor de texto. Então eu preciso mudar este para dizer old school, o mesmo que fizemos acima. Altere manualmente. Então, novamente, vamos duplicar essa última letra e fazer dela um L. E ter certeza de que mudamos a animação para a direção oposta Desaparecendo. Mude isso para aparecer novamente. moda antiga. Isso pode ser uma única palavra, não tenho certeza, mas quero que sejam duas palavras separadas. Vamos selecionar o D novamente. Vá para Avançado. Desvincule os valores e coloque mais dez pixels Agora isso parece brilhante. Vamos salvar o rascunho e depois visualizar a página. Vamos rolar para baixo. Entramos na seção deslizante, depois temos a animação de 01 guitarras e, enquanto deslizamos até aqui, dois discos, 03 shows ao vivo, 04 Old School Isso parece muito legal. A melhor coisa é que a animação não começa até que o usuário desça até essa seção Em vez de discos, shows ao vivo e animação à moda antiga, todos animados ao mesmo tempo Eles são animados quando um visitante chega a essa parte da página Isso parece muito bom. Agora, se você seguiu todas essas lições, agora você tem seu herói, sua introdução e sua seção completa sobre, dizendo: vendemos guitarras, vendemos discos Somos ótimos para shows ao vivo e somos muito antiquados. 11. Testemunhos de clientes: Eu só vou te mostrar agora como adicionar mais três partes. Em primeiro lugar, a última seção da página será composta por alguns depoimentos de clientes Em seguida, daremos uma olhada no rodapé e no cabeçalho, ambos importantes para todos os sites Vamos começar com os depoimentos. Isso é muito fácil graças a um elemento ou widget. Vamos configurar uma nova seção como uma grade. E eu gostaria que fossem três colunas. Então, vamos nos certificar de que temos uma margem em torno desta aqui em cima. Grade de edição, Avançado. Desvincule os valores e digamos 100 na parte superior e 100 na parte inferior Novamente, o mesmo espaço que temos entre as seções em outros lugares. Em seguida, vamos adicionar o tipo de elemento nos depoimentos e arrastá-lo para a primeira coluna Tudo isso é muito fácil de configurar. Vou mostrar o primeiro, e depois o que podemos fazer é duplicá-lo para os outros dois Vamos começar com o primeiro. Vamos começar com a imagem primeiro, tenho imagens dos três músicos que avaliaram nossa loja muito bem Vamos começar com esse cara, o nome dele é Jimmy. Eu copiei o comentário dele. Vamos passar essa aqui. A experiência é sempre ótima. A equipe de vendas é sempre muito prestativa e sempre responde a todas as solicitações. Obrigado Jimmy Agora só precisamos adicionar o nome dele e talvez mudar o estilo do que temos por aqui. Primeiro de tudo, vamos ao nome. A cor do texto aqui é vermelha, mas acho que só quero que seja a cor normal do texto depois o título, onde diz no momento, designer, novamente, eu só gosto que seja preto. Eu acho que parece bonito e limpo. Se você quiser brincar com isso sozinho, experimente algumas cores diferentes lá. Experimente suas cores secundárias primárias. Sinta-se à vontade. Vamos voltar ao conteúdo. Vamos adicionar o nome dele, o título de Jimmy Hendricks. Bem, aqui está um guitarrista. Na verdade, não é tão simples assim. Vamos duplicar esse duas vezes. Isso já parece muito legal, mas obviamente precisamos do testemunho de duas pessoas diferentes. Deixe-me ir para o segundo, editar isso, mudar a imagem. Esse cara aqui que ele é chamado vai deixá-lo aqui. Copie o comentário dele para trocá-lo por armas e rosas. Obrigada E então, para os últimos 11 dos meus músicos favoritos, esse cara Wolfgang Wolfgang Amadeus Mozart. Sobre o que Wolfgang disse? Vamos colar esse. Wolfgang disse que somos uma excelente loja com entrega rápida e muito bom serviço e atenção aos clientes Obrigado Wolf. Vamos colocar Wolfgang aqui e ele está sob seu título, um músico clássico Acho que só precisa de um pouco mais de espaço entre cada um. Vamos editar a grade novamente. Vamos ao layout novamente. As lacunas foram definidas para uma quantidade automática de 20 pixels. Vamos mudar isso para 40. Isso acabou de adicionar um pouco de espaço extra. Talvez 50. Lá vamos nós. Acho que é apenas um espaço melhor entre cada um. Agora, todos eles se alinham perfeitamente na parte inferior. Sim. Tão simples quanto isso. É muito fácil adicionar depoimentos. Acho que é uma ótima maneira de percorrer sua página e entrar na seção sobre. Isso é o que fazemos e esses são clientes que nos amaram. 12. Rodapé do site: Agora, a seção principal do site está completa. Vamos dar uma olhada nas duas últimas partes, que são o rodapé e o cabeçalho Agora, a maneira como isso normalmente funcionaria dentro do elementor é irmos até o ícone e escolhermos o construtor de temas Isso significa que podemos entrar aqui e fazer uma cabeçada e um pé. Isso significa que isso aparecerá em todas as páginas do nosso site e será idêntico. No entanto, temos apenas um site de uma página. De qualquer forma, o outro problema é que esse é um recurso profissional, portanto, isso não pode ser feito na versão gratuita. Vamos fechar este e voltar para o editor. Agora vamos criar um pé da mesma forma que criamos todo o resto nesta página. Clique no ícone de adição. Vamos escolher a caixa flexível, e acho que a coluna dupla O que eu quero aqui é um mapa da localização da loja no lado esquerdo e, em seguida, apenas mais informações, detalhes de contato, número de telefone, endereço de e-mail, essa coisa como este é o final da página, quero finalizar de uma forma muito ousada. Vou apenas criar o contêiner inteiro, o fundo de todo o contêiner, um tipo de plano de fundo preto sólido no estilo contêiner de edição. Então, em termos de nossas cores, vamos escolher a cor. Aí está. Isso preencheu todo o pano de fundo disso. Se eu voltar, você pode ver que está lá embaixo. Obviamente, não há nada lá agora. Mas é uma ótima maneira de finalizar a página. A primeira coisa que quero fazer é colocá-lo em um mapa. Nesta seção, vamos subir para adicionar um elemento. Novamente, digite o mapa. O Google Maps é o que vamos usar aqui. E, literalmente, arraste isso para sua primeira caixa. Ele é configurado automaticamente para mostrar esse local. É o London Eye, que em Londres. No entanto, precisamos mudar isso, porque nossa loja de música fica aqui em Sydney, em uma das principais ruas do centro de Sydney , chamada George Street, e é a número 100. Eu só vou deletar isso. E então eu vou digitar 100 George Street, Sydney. E vamos ver o que acontece. Ajude-me a soletrar Sydney. Aqui estamos. Agora está mostrando o mapa da 100 George Street. Os usuários podem vir aqui e clicar direções se quiserem saber como chegar aqui. No entanto, está bem longe. O bom disso é que você pode brincar com o zoom apenas para ter uma ideia de onde ele está. Como você pode ver aqui, estamos muito perto da água e muito perto do Museu de Arte Contemporânea. Você também pode brincar com a altura aqui, se quiser 400 pixels, acho ótimo. Perfeito. Agora, aqui no lado direito, vamos inserir o texto. Vamos começar com um cabeçalho. Venha até aqui para adicionar o título do elemento. O que eu quero dizer aqui, dê uma olhada. Acho que deveria ser branco. Vamos para a cor do estilo, arraste o seletor de cores para branco. Isso é ótimo. Em seguida, vamos adicionar um elemento e, em seguida, adicionar o editor de texto abaixo dele. Novamente, acabei de copiar todo o meu texto para entrar aqui, que está sendo exibido da maneira usual, mas a maior parte do texto está em preto Então, vamos estilizar e usar a imagem colorida para mudá-la para branco. Também porque é texto branco sobre fundo preto. Acho que a topografia só precisa ser um pouco mais antiga Ele está pegando a configuração padrão que definimos aqui, que é apenas o peso normal Vamos mudá-lo talvez para semibold. Sim, isso é muito melhor. Como você pode ver, o endereço de e-mail que eu coloquei aqui aparece em vermelho. Isso porque é um link que pode acontecer automaticamente quando você escreve no seu endereço de e-mail. Mas se não, voltar ao conteúdo destaca o texto que você deseja transformar em um link. Digamos que eu queira fazer esse endereço como um link, destaco o texto e clico em Inserir. Link. Aqui eu poderia inserir qualquer endereço de site, Facebook.com e depois Significa apenas que, quando as pessoas clicarem aqui, elas serão direcionadas para o Facebook.com Mas eu não quero que isso Este é o que realmente estamos vendo, este endereço de e-mail. Como você pode ver, ele entrou automaticamente com o endereço de e-mail. Antes disso, tem as palavras mail to dois-pontos e, em seguida, o endereço de e-mail Isso é o que você precisa para que, quando os usuários olharem para isso e clicarem nele, ele abra o aplicativo de e-mail. Tudo isso parece ótimo. Apenas uma pequena alteração que você deseja fazer nisso, que, novamente, é coisa do designer. Eu vou entrar no estilo, entrar na tipografia. Acho que há muito espaço entre cada linha. Vamos reduzir a altura da linha para 16. Isso é melhor. Então, apenas uma última coisa aqui, ou duas últimas coisas. Esse contêiner, eu quero que seja centralizado. Eu também preciso de um pouco de espaço, um pouco de acolchoamento à esquerda desta Vou entrar aqui para desligar os valores dos links juntos e, em seguida, adicionarei mais 50 pixels a esse lado. Isso parece ótimo. A única coisa que todo o contêiner precisa é de um pouco de espaço na parte superior e inferior. Vamos clicar aqui no contêiner principal. Vamos para Avançado, depois vamos para o preenchimento e desvincular os valores E então diga no topo 100 e na parte inferior de 100. Isso acabou de adicionar um pouco mais de preenchimento preto em torno de tudo o que estava lá Vamos ver como isso parece. Tudo isso parece perfeito até agora. Vá do herói até a introdução, até as várias seções sobre, depoimentos e depois o pé Isso é ótimo. Todo mundo leu a página. Eles estão impressionados com o que estamos oferecendo. Eles estão adorando todos os depoimentos e agora sabem onde estamos localizados para que possam ir 13. Cabeçalho de site NOVO: Ok, agora vamos adicionar o cabeçalho ao nosso site. cabeçalho pode ser uma daquelas seções com as quais você deseja começar. Pode ser uma das primeiras coisas que você faz. Pessoalmente, prefiro deixar isso para o final , porque então já decidi o estilo e a estrutura de todo o resto do site. Sei exatamente qual tipografia estou usando e quais cores estou Para adicionar isso, o que precisamos fazer é adicionar outra seção acima do herói. Vamos até aqui, clique aqui e, em seguida, vamos adicionar um contêiner de caixa flexível O que eu quero para esse cabeçalho é uma configuração bastante padrão , da forma como eu tenho o logotipo no lado esquerdo e, em seguida, a barra de navegação, todos os links e talvez meus botões de mídia social à direita Vou escolher uma que seja uma coluna pequena à esquerda e uma maior à direita. Primeiro, o que eu quero fazer com todo esse contêiner é escolher uma altura mínima. Vou até aqui para Editar contêiner, verificar se estou no layout e vou adicionar uma altura mínima em pixels de 100 pixels. Além disso, quero ir para Avançado. Eu só quero mudar tudo isso para zero. Não há espaço vazio ao redor de nada lá. A altura disso é boa, mas, como você pode ver, está em uma caixa branca que fica logo acima do herói. Eu não quero isso. O que eu quero fazer é usar um logotipo branco e um texto em branco para me sentar em cima do herói. Como eu faço isso? Bem, como você pode ver, configuramos esse contêiner com uma altura de 100 pixels. O que eu tenho que fazer é escolher o contêiner abaixo do contêiner do herói e alterar a margem nele. Vamos até Avançado. Vamos desativar os valores vinculados. Agora, normalmente, o que faríamos nesta seção, se quiséssemos adicionar 100 pixels acima dela, é 100. Isso é o que aconteceria. Você teria um espaço vazio de 100 acima dele. Mas eu quero fazer o oposto disso. Eu quero -100 Você vai escrever isso. Coloque um sinal de menos ao lado dele. E aí está. Agora, o recipiente acima dele fica em cima dele. Sim, você pode ver um pequeno espaço em branco, mas vamos clicar nesse. Você verá que isso desaparece. Isso é apenas para nosso propósito de edição. Você não consegue ver nada ainda. Mas agora o contêiner extra que adicionamos fica em cima do contêiner abaixo. A primeira coisa que quero fazer é trabalhar no primeiro contêiner dentro do contêiner de cabeçalho. Vamos vir aqui para estruturar. Escolha seu contêiner superior, escolha subcontêiner. Em primeiro lugar, vamos para Avançado e alteremos tudo isso para zero. Não há espaço vazio ao redor. O que eu quero fazer é colocar o logotipo aqui. Eu venho aqui para adicionar um elemento, colocar uma imagem. No começo, pegamos a caixa cinza. Vamos escolher a imagem. O que eu quero fazer aqui é adicionar meu logotipo novamente. Agora já usamos esse, que é o estilo mais vertical. Quero o estilo horizontal da mesma forma que tenho o ícone à esquerda e depois o texto da Wolfgang Music à Vamos escolher isso. Isso apareceu. No entanto, para onde foi? Por que não consigo ver isso? O motivo pelo qual você não consegue ver isso é porque o contêiner abaixo do contêiner do herói está, na verdade , no topo do contêiner do cabeçalho. Tudo o que precisamos fazer é dizer elementor que o cabeçalho deve estar acima dele Venha aqui para a Estrutura. Então contêiner, venha aqui para Editar, Contêiner, clique em Avançado. A seção que estamos vendo aqui é chamada de índice Z. O que podemos fazer aqui é colocar números diferentes, o que significa que quanto maior o número, mais alto ele estará no sistema de camadas, já que não numeramos nenhum dos outros contêineres abaixo Um simples será suficiente aqui para trazer tudo isso para a frente Vamos voltar para esta seção. Meu logotipo, bem, é muito grande. Acho que o contêiner em que está está ocupando muito. Acho que preciso de um pouco mais de espaço para o contêiner à direita, aqui na estrutura. Vá para seu segundo contêiner, depois venha aqui até a largura, então vamos torná-lo um pouco maior. Talvez 75%, como você pode ver, isso tenha tornado o logotipo um pouco menor. Na verdade, isso ainda é muito grande. Vamos para 80. O que estamos fazendo aqui é permitir muito mais espaço para muito mais conteúdo nessa seção. No entanto, ainda acho que o logotipo é um pouco grande demais. O que vou fazer é selecionar a imagem aqui na estrutura ou clicando nela. Então eu vou para Style aqui. E então eu vou mudar a largura do logotipo. Como você pode ver, estou alterando os lados percentuais. Acho que 50% é o suficiente. O único problema é que ele está no meio desse contêiner Agora eu quero que fique à esquerda para que tudo se alinhe Vamos voltar ao conteúdo e depois alinhá-lo à esquerda Além disso, quero que fique mais centralizado nesse contêiner de 100 pixels de altura Vamos até o subcontêiner em que ele está. Clique nele, vá para Layout e, em seguida, centralize o conteúdo. Agora, se eu pressionar a seta, aí está. Você pode ver como isso funciona. Agora, no topo da página, tudo isso é perfeito. Sem espaços em branco vazios. Um logotipo de tamanho perfeito estava lá no lado esquerdo. Agora tudo que eu preciso fazer é colocar meus links e meus botões de mídia social no lado direito. Vamos escolher o contêiner aqui à direita. Escolha isso na estrutura novamente, vamos entrar aqui. Nem sempre precisamos fazer isso, mas, como você pode ver, quando fiz isso, ele eliminou o espaço em branco na parte superior. Isso apenas garante que no back-end não haja espaçamento extra que você não sabia que existia Isso pode atrapalhar a visualização de seus usuários. Em seguida, quero adicionar uma barra de navegação, que é uma barra de navegação na coluna do lado direito Agora, a forma como essas coisas normalmente funcionam em sites quando há várias páginas é que elas o enviam para outra página. Mas como temos uma única página, a forma como esses botões funcionarão é eles o levarão até aquela parte do. Você já viu isso em outros lugares em sites de página única. O que precisamos fazer é adicionar botões para cada seção do site que queremos que os usuários visitem. Vamos escolher guitarras, discos, shows ao vivo e à moda antiga Isso é muito simples de fazer. Vamos ver aqui o elemento mais e adicionar. E queremos um botão. Vamos colocar nosso primeiro botão aqui. Surgiu como uma pequena caixa azul. Clique aqui nele. Bem, primeiro de tudo, queremos que este diga guitarras. Então, o que eu quero é basicamente nenhuma caixa azul ou espaço ao redor da palavra guitarras Vamos para o estilo, depois vamos voltar ao normal e passar o mouse, obviamente, para os botões, você sempre tem uma versão normal, como as pessoas a veem Então, quando você passa o mouse sobre ele, muitas vezes ele pode mudar a cor que você vê na parte superior O que eu quero fazer com a versão normal é tirar essa cor azul. Vou clicar na cor, basicamente arrastá-la para 0%. Agora, ela diz apenas guitarras sozinhas Então, a outra coisa é que o espaço que estava ao redor, que é o que você precisa com um botão de cor sólida abaixo, mudaria esse preenchimento para zero. Lá vamos nós. A única coisa que eu quero, porém, que acho que funciona muito bem em sites, é que algo diferente aconteça quando um usuário passa o mouse sobre ele No momento, está em texto branco. Eu vou dizer que quando um usuário passa o mouse sobre o texto, ele muda a cor do texto Vamos escolher uma de nossas cores globais. Vamos escolher o secundário. Eles vão, como você pode ver agora, logo abaixo da caixa cinza, e eu passo o mouse sobre a palavra Guitarras, ela fica O que eu quero fazer é duplicar esse botão três vezes para gravar shows ao vivo à moda antiga Então, vamos até a estrutura. Clique com o botão direito do mouse no botão Duplicar, Duplicar, Duplicar Agora, obviamente, como você pode ver, eles estão todos sentados um em cima do outro. Novamente, isso não está funcionando perfeitamente. Vamos conter o subcontêiner em que eles estão. Vá para o layout e altere a direção para a linha horizontal. Agora todos dizem guitarras. O outro problema que você pode ver é que eles estão todos na parte superior da caixa. O que eu quero fazer é descer até aqui para alinhar os itens e garantir que eles estejam alinhados ao centro Então, a outra coisa é que eles se sentaram no meio da página. Mas, para ter equilíbrio, quero que o logotipo esteja na extrema esquerda. Eu quero que esses botões estejam na extrema direita. Vamos justificar o conteúdo entre o início, o centro e o fim Vamos escolher. E você pode ver se eu mover isso para baixo, eles agora estão todos sentados lá. E isso parece perfeito. Essa é a tela padrão para uma barra de navegação. Ok, agora vamos voltar. Vamos mudar o nome de cada um desses botões. O primeiro, o segundo devem ser registros. Terceiro show ao vivo, o último deve ser Odom. Só pela última vez que penso, acho que cada botão está um pouco próximo do próximo. Vamos para o contêiner novamente. As lacunas e colunas são automaticamente definidas como 20. Se eu quiser colocar esse zero, ficar um ao lado do outro, acho que talvez 30, 30 pareça bom. Acho que isso dá um pouco mais de espaço para respirar entre cada um. Agora, o que eu preciso fazer é dizer onde cada botão vai na página. Se eu clicar no botão e acessar o conteúdo, como você pode ver no momento, o link é apenas uma hashtag O que precisamos fazer nesta página é configurar um link âncora. Do jeito que funciona, basta clicar nesse botão ele os levará até uma determinada parte da página para adicionar um link âncora Venha aqui para adicionar um elemento, digite a âncora. Em seguida, vamos rolar para baixo até a seção em que você gostaria que esse link âncora ficasse, para que, quando alguém clicar nas guitarras, seja direcionado para O que faremos é pegar isso e arrastá-lo para que fique acima da palavra Guitarras que caiu nesta pequena caixa cinza Mas não se preocupe com a aparência , porque na verdade isso não existe. Esse é um código oculto para que na seta você veja que ele desaparece Os usuários não verão isso. O que precisamos fazer é dar uma identificação a isso. Isso significa que podemos dizer ao botão na parte superior para levar os usuários a esse ID. Vamos apenas escrever a palavra guitarras. Simples assim. Em seguida, vamos voltar para o topo. Escolha o botão de guitarras, deixe a hashtag lá, escreva ou cole sua palavra Agora vamos salvar isso, visualizar a página e você verá como ela funciona. Quando um usuário acessa nossa página, passa o mouse sobre elas e ganha ouro Se eles clicarem no que desejam ver, se forem guitarras, ele fará isso Isso os leva até a seção de guitarra. O único problema que vejo aqui, porém , é que está literalmente levando eles a essa palavra, guitarras O problema é porque esse texto está centralizado aqui Quando leva os usuários até lá, ele corta essa imagem e você não consegue ver o rosto da garota. Então, o que eu realmente quero fazer é dizer: você pode levar os usuários logo acima desta caixa para que eles possam ver tudo de uma só vez. Vamos voltar ao editor. Vamos mover a âncora. O que eu realmente quero é que ele fique acima desta caixa. Se eu tentar arrastá-lo até lá, o problema realmente não tem para onde ir. Vamos deixar isso aí por um segundo. O que vou fazer é criar outro espaço vazio acima desse contêiner. Então, vou clicar em Adicionar contêiner. Clique na caixa de adição O e escolha o single. Faça sua coisa padrão dentro deste contêiner. Vá para Avançado, coloque zero aqui e zero aqui. Em seguida, arraste essa âncora que você já configurou para essa seção Agora você pode ver onde está localizado acima desta seção. Se eu quiser salvar essa prévia, a página, você verá qual é a diferença. Eu clico nas guitarras, isso me leva até lá. Isso me leva ao pequeno espaço acima desta seção, para que eu possa ver a seção inteira de uma só vez. Perfeito. Agora vamos fazer o mesmo com as outras três seções. Vamos voltar ao editor. Como essa âncora está funcionando perfeitamente, podemos simplesmente vir até aqui e fazer uma cópia desse contêiner Então, vamos rolar para baixo até esse ponto aqui. Clique no sinal de adição e cole esse contêiner. Isso caiu exatamente no mesmo recipiente que tínhamos para guitarras, sem espaço vazio ao redor Em seguida, vamos ao menu Anchor e alterá-lo para Records Eu quero me sentar acima da Records, quero me sentar acima dos shows ao vivo e quero me sentar acima da Old School. Vamos apenas duplicar o que temos aqui duas vezes. Em seguida, arraste-os para baixo para que fiquem acima de cada uma dessas seções. Novamente, como configuramos margens e preenchimento de 0%, não haverá espaço vazio entre cada contêiner Nós tínhamos discos. Vamos editar este aqui. Shows ao vivo e certifique-se de que tudo isso seja uma palavra, soletre corretamente. O mesmo com o da velha escola aqui. Vamos falar sobre isso e mudar isso para a velha escola, tudo em uma palavra. Em seguida, voltaremos ao topo da página, até o momento atual, e garantiremos que todos esses botões estejam configurados da mesma maneira. No primeiro, queremos que diga hashtag old school. Esta hashtag ao vivo mostra esses registros de hashtag e, portanto, essa é a Hashtag Guitars Vamos salvar o rascunho, visualizar as alterações agora que você verá quando eu clicar em qualquer uma dessas guitarras, levar você até lá, gravar, levar você até lá, shows ao vivo, levar você até lá, uma velha escola te leva até lá Isso é perfeito. E como você pode ver aqui, essas duas coisas, não há espaço vazio, nem um único pixel, nem uma única linha de espaço em branco entre cada uma. Temos o logotipo configurado, temos a barra de navegação configurada. Agora só precisamos adicionar os ícones de mídia social. Então, vamos voltar ao editor. Ok, para adicionar botões de mídia social depois de uma barra. Vamos até o ponto positivo para adicionar elementos, digitar ícones sociais. É isso que queremos e queremos que ela viva depois da velha escola. Vamos mover a estrutura um pouco para baixo. Por padrão, ele aparece nesses três ícones. Facebook, Twitter, Youtube. Eles chegaram exatamente nesse estilo. Não é assim que eu quero que pareça, porque não acho que isso represente nosso site. Eu só quero que sejam logotipos brancos. Além disso, não tenho uma página no Twitter ou no Youtube. Eu só tenho o Facebook e o Instagram primeiro. Vamos deletar o Twitter pressionando o X. O mesmo acontece com o Youtube Em seguida, adicione o item, aparece um logotipo do Word Press, não quero que passe o mouse sobre o ícone Clique nele e ele mostra a biblioteca de ícones. E essas são as muitas opções diferentes que você pode ter para esta. Acabei de entrar no Instagram e aí está, que clique em Inserir. Agora só temos botões para Facebook e Instagram. Primeiro, defina a forma em torno do que diz. Arredondado, se você pode ver isso aí. Mas é como um quadrado arredondado. Eu só quero que seja um círculo reto. Vamos moldar e escolher o círculo muito melhor. Meu único outro problema aqui é que eles são basicamente grandes demais. Vamos ao estilo, depois vamos tamanho e brincar com a barra de arrasto aqui. Acho que 18. Acho que é grande o suficiente para ser honesto. O preenchimento, é apenas o preenchimento ao redor da parte externa do ícone Agora vamos voltar ao conteúdo e depois clicar no Facebook. Em termos de cor, bem, eu não quero que seja a cor oficial. Eu quero que seja uma cor personalizada. Portanto, posso escolher a cor primária e a cor secundária. Cor primária. Bem, vamos garantir que seja branco então. Minha cor secundária, quero que seja nosso texto preto. Parece que sim. O mesmo para o Instagram. Clique na cor do Instagram, cor primária personalizada branca. Cor secundária preta. Agora o que precisamos fazer é digitar o link para o Instagram. Vou apenas colar meu URL. A outra coisa que queremos fazer é clicar em Opções de link e, em seguida, garantir abertura de uma nova janela seja escolhida, pois isso abrirá uma janela separada para esta. O que significa que as pessoas realmente não saem do seu site, elas estão vendo duas páginas separadas. Ambos estão relacionados à sua empresa. Em seguida, o Facebook que está aqui garante que está abrindo em uma nova janela e pronto. Agora, salve o rascunho e visualize. Aqui estamos. O cabeçalho está funcionando perfeitamente. Temos o logotipo da empresa, temos o Navvar com todos os links âncora e temos links para nossas duas páginas de mídia social A versão desktop do seu site agora está totalmente completa. Você tem seu cabeçalho. Você tem seu herói. Você tem sua seção de introdução com as imagens deslizantes Depois, você tem as duas versões diferentes da seção sobre, com duas versões diferentes de registros de texto animados, shows ao vivo e à moda antiga. Você tem seus três depoimentos dos três maiores músicos do mundo E então você tem o rodapé com o mapa e as informações para que as pessoas encontrem ou entrem em contato com você Tudo isso agora parece perfeito. A versão desktop do seu site está completa e está ótima. Agora só precisamos fazer com que funcione no tablet e no celular. 14. Responsivo: tablet: Agora você tem um site que parece perfeito e funciona perfeitamente no desktop. No entanto, precisamos ver como ele será exibido em tablets e dispositivos móveis. É muito fácil editar Elementor, vá até a barra superior E você pode escolher entre editores para desktop, tablet ou celular É muito importante fazer isso nessa ordem. Comece com o desktop, depois vá para o tablet e depois para o celular. celular herda as alterações feitas no tablet e o tablet herda as feitas no desktop. Você deve sempre fazer isso nessa ordem, caso contrário, isso quebrará seu site. Agora o temos perfeito no desktop. Vamos dar uma olhada no tablet. Quando chegarmos ao Editor de Tabelas, você verá que tudo ainda está na mesma posição, mas nem tudo está alinhado corretamente. Se continuarmos, esse herói parece bom. É só essa barra de navegação, os ícones aqui e o logotipo ali estão muito próximos da borda Então, à medida que rolamos para baixo até esta seção, novamente, não há preenchimento suficiente nas bordas desta seção, então é uma exibição um pouco estranha com o texto tão abaixo e a imagem sendo colocada Esse parece muito bom. Novamente, só precisa de um pouco mais de preenchimento. Obviamente, essas coisas que você pode ver, as âncoras, não estão realmente lá Esse não funciona muito bem. Novamente, com o alinhamento, talvez seja melhor se o número estivesse no topo da palavra guitarras nesta tela O poço, na verdade, eles estão muito próximos. Acho que os números são muito grandes lá. Essa é provavelmente a única mudança que precisamos neste caso. Mas acho que funciona bem como colunas duplas. Os depoimentos funcionam como três colunas porque são uma pequena quantidade de texto Só preciso trabalhar no acolchoamento. E o mesmo aqui, o acolchoamento. Não há muitas grandes mudanças a serem feitas, mas vou mostrar uma boa maneira de fazer isso, uma maneira muito rápida de fazer isso. Vamos até o topo. O principal problema que temos aqui é apenas o preenchimento de cada lado desse contêiner, a barra de navegação, o cabeçalho Vamos clicar nos pontos aqui e editar o contêiner. Tudo o que eu quero ver aqui é o acolchoamento. Vamos para Avançado e vamos para o preenchimento. preenchimento aqui é configurado em zero para cima, direita, inferior e esquerda O que eu quero é uma quantidade igual de preenchimento à esquerda e à direita O tamanho do pixel que eu escolho aqui deve ser usado em todas as seções abaixo apenas para garantir a consistência. Antes de tudo, vamos desvincular os valores. Vou escolher 30 pixels para a esquerda e para a direita. Você pode ver quando eu clico na seta, há espaço suficiente entre as duas. Só dá um pouco mais de espaço para respirar esta seção aqui, isso parece bom. Acho que o logotipo é um pouco pequeno demais. Vamos clicar no logotipo. Venha aqui para editar imagem, vá para o estilo. Vamos apenas aumentar o tamanho dela. A porcentagem, vamos colocar talvez 75%. Veja como isso parece? Talvez um pouco grande demais, talvez. Acho que é um bom equilíbrio entre barra de navegação do logotipo e os botões de mídia social Legal, aquela seção de heróis que está funcionando para mim agora. Ele ainda preenche a página inteira, pois selecionamos o contêiner principal do herói para ter uma altura 100% vertical Então, como você pode ver, ela vai diretamente de cima para baixo nesta seção. Ok, temos um pequeno problema aqui em termos de alinhamento. O texto vai até aqui, e então há um grande espaço vazio na parte inferior. Primeiro, vamos dar uma olhada no preenchimento. Vamos clicar nos pontos aqui novamente para editar o contêiner. Vá para Avançado, desvincule os valores e vamos para 30, para a direita, 30 para a esquerda Novamente, isso parece bom. No entanto, nada disso está se alinhando bem, a gangue dos lobos, isso não é realmente adequado, está examinando a imagem e, obviamente, temos esse grande espaço de preenchimento na borda O que eu quero fazer aqui é mudar o tamanho de cada uma das colunas internas da maneira que tínhamos configurado antes. Funciona bem como talvez 20% à esquerda e 80% à direita. Vamos tentar um 50, 50. Vamos escolher nosso primeiro contêiner interno. Clique em Editar contêiner, ou você pode escolher isso em sua estrutura. Então vamos até aqui onde diz largura. Atualmente, está definido em pixels, altere isso para porcentagem e arraste até 100%, isso para porcentagem e arraste embora eu queira que ele preencha apenas 50% do espaço, ainda precisamos que a largura do tablet seja 100%. Depois vá para o outro contêiner e faça a mesma coisa lá, 100%. Agora, isso é um alinhamento perfeito. Há apenas um pouco de espaço vazio extra na parte inferior aqui. Isso é só por causa do preenchimento que eu tenho na primeira coluna Vamos voltar ao primeiro contêiner. Vá para Avançado, tire esse 75. Lá vamos nós. Agora isso parece quase perfeito, no entanto, ainda está muito perto da imagem lateral. Vamos talvez adicionar 25 pixels que o adicionaram em todos os lugares. Deixe-me excluir isso, desvincular seus valores e alterá-los para 25 pixels Isso quase parece perfeito. Acho que ainda há apenas um problema. Não acho que essa pequena linha precise estar lá no tablet. Acho que ficaria melhor se o texto fosse um pouco mais alto. Vamos voltar para o editor então. Vou selecionar o divisor. Selecione-o aqui em Estrutura ou clique nele. Vá para Avançado e role para baixo até a palavra responsivo. O que estamos fazendo é escondê-lo no tablet. Se eu clicar nesse, você pode ver que ele desapareceu. Temos as linhas de luz lá. Mas se eu agora me esconder, o painel desaparecerá. Isso parece perfeito. Ok, vamos para a seção abaixo. Vamos editar o contêiner. Vamos desvincular os valores e colocar 30 à direita. 30 à esquerda Isso parece ótimo. Acho que talvez haja muito espaço entre a seção superior e a seção abaixo. Acho que está tudo bem aqui embaixo, quase. Mas acho que essas seções deveriam estar um pouco mais próximas. Talvez seja porque no recipiente superior, sim, eu tenho uma margem de 100 na parte superior e 100 na parte inferior. Vamos desvincular isso agora, vamos apenas alterá-lo para zero. Vamos voltar para 100 na parte superior, e então acho que talvez 50 na parte inferior. Perfeito. Lá vamos nós. Essa é uma tela muito melhor. Agora, tudo isso cabe em uma única página e tudo se alinha perfeitamente. Excelente. Ok, vamos para a seção de guitarras. Isso parece ótimo. Acho que, para mantê-lo em duas colunas, é apenas o texto aqui que não está funcionando bem. Acho que é porque o configuramos na direção horizontal. Quero mudar isso para uma direção vertical dentro desse contêiner interno. Vamos destacar esse contêiner. Clicando nele. Então vamos até aqui para a direção. Como você pode ver, esse ícone foi alterado para tablet. Se você quiser editar alguma versão específica, clique nela sem precisar clicar aqui na parte superior. Mas estamos trabalhando em tablets, então vamos deixar as coisas assim. Como você pode ver, a direção é horizontal. Eu quero mudar para vertical. Vamos clicar aqui. Lá vamos nós. Na verdade, isso agora se encaixa muito melhor. Alguns outros problemas apenas em termos de espaçamento, alinhamento Primeiro de tudo, vamos até essa coluna e adicionar um pouco de preenchimento aqui O que eu quero aqui é o mesmo preenchimento que tenho à esquerda de todos os elementos superiores, 30 pixels Eu faria isso neste interno, porque se eu fizer isso no contêiner principal, ele adiciona um espaço em branco. Eu não quero fazer isso lá, eu quero fazer isso aqui. Mas ainda é uma profundidade consistente com todas as seções acima do. Vamos entrar nesse contêiner, aquele que tem o 01. Vamos retirar qualquer preenchimento existente, clicar no texto, no título e alterar o alinhamento à esquerda Isso está ótimo. Acho que precisamos mudar o tamanho disso. Acho que precisa ocupar um pouco menos de espaço. Primeiro, vamos pegar esse contêiner. Vá para Layout. Vamos escolher o contêiner geral principal e depois ir para Layout. Isso é o que temos. Foi isso, definimos uma altura mínima de 75% lá, vamos mudar isso para 50. Lá vamos nós. Essa é uma tela muito melhor. Isso está quase se encaixando perfeitamente. Acho que talvez um pouco maior, 60% sim. Agora vamos voltar a esse contêiner e garantir que tudo esteja centralizado Isso parece ótimo. Não é uma grande mudança aí. Significa apenas que ainda podemos ver a imagem completa da garota tocando violão. Todo o texto está dentro. Talvez eu até retirasse um pouco do preenchimento ao lado do texto aqui Vamos para esse contêiner interno, vá para Avançado. Como você pode ver, configuramos isso como um link de 100 pixels, alteramos para talvez 50. Lá vamos nós. Acho que isso acabou de nos dar um pouco mais de espaço. Acima, abaixo e à direita do texto. Isso parece ótimo. Ok, isso nos levará a esta seção. Como eu disse antes, eu só penso grande, no texto numérico em cima das imagens. Vamos editar o título para o estilo, ir para a tipografia. Ah, sim, nós dissemos isso para 400. Vamos talvez mudar isso para metade do tamanho, 200. Um pouco pequeno demais, 300. Isso parece ótimo. Eu só quero copiar esse estilo e colá-lo nos números restantes. Clique com o botão direito. Estilo de cópia 03. Estilo de jogo 04. Agora vamos dar uma olhada em como está tudo. Isso está ótimo. Acho que isso funciona muito bem. Ainda temos essa seção na seção com borda branca, essa com fundo vermelho E então vamos mais longe em discos, shows ao vivo à moda antiga. Isso parece ótimo. Apenas uma muito rápida nesta seção aqui. Vamos para Editar contêiner. Este, lembre-se, é uma grade. Nós configuramos as lacunas entre cada um e 50 pixels anteriormente. No entanto, acho que provavelmente é muito grande para o que temos nos tablets. Vamos mudar isso para 30. Só nos dá um pouco mais de espaço entre cada um. Então, obviamente, vá para Avançado aqui. Desvincule seus valores, 30% 30 pixels para a direita, 30 pixels para a esquerda Isso parece ótimo. E ainda há 100 acima e 100 abaixo. Então aqui embaixo, vamos clicar no contêiner novamente, só precisa de preenchimento no contêiner geral, outros 30 pixels Tudo o que fiz lá foi desvincular os valores que o reduziram a zero Para ser honesto, acho que parece muito bom ter o mapa até a borda, mas vamos dar uma pequena borda ao redor dele, talvez 30 pixels ao redor. Vamos vincular isso. Sim, acho que isso só dá um pouco mais de espaço para respirar ao redor do mapa e do texto. Lá vamos nós. Isso foi muito rápido e muito fácil. O que fizemos aqui foi pegar a versão desktop do site e editá-la para que ela seja exibida perfeitamente no tablet. Mas há outra maneira legal de verificar isso. Vamos fechar isso. Vamos salvar nosso rascunho e, em seguida, visualizar as alterações. O que eu recomendo fazer aqui é que, se você estiver usando o Google Chrome, acesse a seção de extensões da loja virtual do Chrome e encontre esta. O simulador móvel. Basta digitar isso. Deve ser o primeiro a aparecer. É uma ferramenta de teste responsiva. Encontre isso. E então o botão aqui dirá instalar em. Significa apenas que , aqui no topo , é aqui que você tem suas extensões. Ao visualizar a página da forma como ela será visualizada pelos usuários, você pode clicar nesta ela mostrará como ela fica em muitos dispositivos diferentes. Essa é outra ferramenta que tem uma versão Pro pela qual você precisa pagar. No entanto, se você quiser usar apenas a versão gratuita, é ótimo porque ela abrange vários celulares, pelo menos quatro ou cinco tablets e, em seguida, alguns outros extras Até mesmo um Apple Watch série seis. O que estamos vendo aqui é o móvel. Ainda não editamos isso. Vamos até a seção de tablets e ver como fica no iPad Mini. Bem, isso parece perfeito. Sim, adorei. Perfeito. Isso ainda está chegando A animação está funcionando. Ah, sim, isso parece ótimo. Isso parece absolutamente perfeito. No tablet, isso foi ótimo. Ipad Mini quatro. O iPad 4 também é perfeito. A mesma coisa. O Ipad Pro 11 também é perfeito. mesma coisa. Em seguida, um Galaxy, Tab seven. Então essa é uma versão para Android, também fica perfeita nela. É ótimo se você simplesmente acessar o editor, deixar a aparência perfeita, mas depois brincar com essa extensão para ver se ela está funcionando perfeitamente em vários dispositivos diferentes. Se você olhar algo assim, ok, acho que não estou vendo o suficiente da garota aqui naquele dispositivo. Talvez você queira apenas entrar e brincar com o espaçamento aqui, porque ele parece diferente aqui e naquele dispositivo Basta usar a extensão para se divertir um pouco e garantir que ela funcione perfeitamente em todos os dispositivos que você pode ver aqui. 15. Responsivo: celular: Agora vamos voltar ao editor e dar uma olhada na versão móvel. Clique aqui. Agora, essa barra de navegação, essa parece um pouco mais difícil de usar Vamos até o contêiner. Primeiro, vamos brincar com o espaçamento. Agora, o preenchimento ainda está definido para 30 à esquerda e 30 à direita Isso também é bom para dispositivos móveis. Vamos manter isso do jeito que está. O principal problema que temos é que o alinhamento não caberá mais em uma linha reta Acho que precisamos empilhá-lo. Digamos que temos o logotipo na parte superior, depois a barra de navegação abaixo os botões de mídia social abaixo dela Isso é o que eu vou fazer. Em primeiro lugar, vou pegar esse contêiner que contém botões da barra de navegação e de mídia social e vou duplicá-lo e vou duplicá-lo Em seguida, vou para a segunda versão e vou excluir todos os botões que colocamos aqui porque eles já existem acima. Em seguida, entrarei neste contêiner e gostaria que o conteúdo fosse centralizado Temos dois, muitos botões de mídia social. Esse primeiro só vai aparecer no celular. Novamente, vamos clicar em Editar contêiner, ir para Avançado, ir para Responsivo e desativá-lo Esconda-o no desktop e no tablet. Isso significa que quando eu vou aqui, não está lá. E se eu clicar nessa seta, ela volta ao que era antes no tablet. Veja isso lá no editor, mas na verdade não está lá. E você verá isso ao visualizar a página. Além disso, esses botões de mídia social não devem mais aparecer no celular. Clique nos botões de mídia social, vá para Avançado e oculte no celular. Agora tudo o que temos é o texto lá dentro. Obviamente, é difícil ver onde tudo está no momento. Mas vamos começar a editar esse contêiner. Então, temos uma lacuna de 30 pixels entre cada um dos botões. Vamos mudar isso rapidamente para zero. Agora você vai. Agora podemos ver tudo juntos ao mesmo tempo. Obviamente, cada um deles está muito próximo um do outro. Digamos que cinco pixels, talvez dez pixels. Acho que é espaço suficiente entre cada um. E, novamente, brinque com isso ao vê-lo em dispositivos diferentes. Talvez você queira tornar o texto um pouco menor. Vamos entrar na tipografia. Talvez defina para 14 pixels, isso é um pouco menor. Faça o mesmo em tudo isso, tudo se resumirá a qualquer conteúdo que você tenha em seu site. Apenas brinque um pouco com isso. E se você tiver problemas para fazer com que tudo caiba, basta me enviar uma mensagem e eu vou te dizer como empilhá-la em dois níveis diferentes O que eu também quero é que todo esse texto aqui seja justificado. Basicamente, quero que o conteúdo se estenda até o limite. Como você pode ver, à moda antiga, isso vai até a borda da caixa aqui, mas Guitars não Não consigo alinhá-lo à esquerda ou à direita. O que vou fazer é ir até esta seção. Estou editando o contêiner. Em seguida, em justificar o conteúdo, clique neste que diz espaço entre Em seguida, ele espalha tudo. Parece ótimo. Agora, isso parece quase perfeito, que tenhamos o texto aqui e depois temos os dois botões de mídia social abaixo. É só que aquele logotipo é um pouco grande demais. Bem grande. Na verdade, vamos clicar na imagem na estrutura ou clicando na imagem. Vamos apenas alterar o tamanho de um tamanho muito menor, talvez 35%, talvez um pouco grande, 40%, então, bem, ele deve ser centralizado Então, se eu for ao Content Alignment Center, agora, se eu clicar na seta, em termos de empilhamento, tudo funcionará muito, muito bem Eu tenho o logotipo, depois tenho a barra de navegação e, em seguida, tenho os ícones A única coisa que eu acho que quero fazer aqui é tornar esses ícones de mídia social um pouco menores. Talvez os distancie um pouco, então eu só preciso brincar com o espaço ao redor de tudo aqui. Obviamente, o logotipo está muito próximo do topo. Não há espaço suficiente entre a barra de navegação do logotipo. Ícones de mídia social. Vamos voltar ao editor. Primeiro de tudo, vamos dar uma olhada nesses ícones sociais. Então, vamos ao estilo. O tamanho é 18, vamos mudar isso para 14, então tudo que eu quero brincar é o espaçamento entre cada um Provavelmente esse espaçamento, sim. Vou prolongar um pouco. Vou definir isso também para 14. Vamos ver como isso fica. Sim, isso é muito melhor porque são botões separados Você precisa pressioná-los separadamente. Vamos pegar o contêiner novamente. Vamos para Avançado. Vamos mudar todo o preenchimento para zero. Agora, o que eu quero fazer é adicionar preenchimento extra na parte superior. Talvez 30 ao redor, para ser honesto. Digamos que se estiver no topo, à direita e à esquerda, vamos ver como fica. Isso está funcionando muito melhor em termos de espaço. No entanto, há um espaço em branco na parte superior, podemos trabalhar nisso. Vamos também dar uma olhada no contêiner geral de retenção e alterar essas lacunas que agora estão definidas como zero. Vamos colocar dez e ver como fica. Sim, isso é perfeito. Agora temos dez pixels entre o logotipo e a barra de navegação, e entre os botões de mídia social abaixo, é apenas esse espaço em branco na parte superior Por que isso está acontecendo? Isso está acontecendo porque dissemos que a altura mínima desta seção é de 100 pixels. No entanto, é maior do que isso. Agora, como estamos empilhando tudo, vamos clicar no contêiner principal Vá para Editar contêiner, vá para Layout, altere-o para 150 pixels. Em seguida, deixe o contêiner abaixo do contêiner do herói. Esse aqui. Vamos mudar isso em Avançado, 2.100,50 Certifique-se de que nem todos estejam vinculados 150 e então vamos -150 e veja se isso funciona. Isso funciona. Lá vamos nós. Agora isso é perfeito, não é? Agora temos um bom espaço vazio. Na parte superior, vemos o logotipo, vemos todas essas barras de navegação e vemos o ícone da mídia social Isso parece ótimo. Apenas duas outras coisas que eu notei aqui. Nessa visualização móvel, o problema na visualização do tablet ou na visualização do desktop não é a posição desses dois clientes e a posição e o tamanho do logotipo. Quando vou para o celular, um logotipo é muito pequeno e você realmente não consegue ver as pessoas. Vamos brincar com essas duas coisas. Ou seja, novamente, no contêiner principal do herói, estamos no contêiner, vamos para o estilo, vamos para o plano de fundo e estamos vendo a imagem aqui. Agora, o que precisamos fazer é posicionar. Temos a opção de centro, centro, que é o que tínhamos. Podemos escolher o centro esquerdo muito para a esquerda, o centro direito muito longe. Ou o melhor que podemos escolher aqui é personalizado. Porque com isso podemos brincar com a posição X e a posição Y. Vamos brincar com essa posição X e movê-la um pouco. Obviamente, não quero movê-lo muito para aquele lado, só preciso que esteja aqui. Digamos que mesmo que seja -200 menos 150. Desculpe, 250. Lá vamos nós. Eu acho isso ótimo. Então você pode ver que há duas pessoas olhando lá e elas estão vendo os registros. Então, vamos agora tornar o logotipo um pouco maior. Então clique no ícone, clique em estilo e vamos lá. Largura, configuramos para 15%, talvez até 25, 30. Vamos ver como isso parece. Isso parece ótimo. Agora podemos ver que há pessoas vendo os itens na loja. Nossa barra de navegação, nosso cabeçalho funcionam perfeitamente. Tudo está alinhado e podemos ver o ícone principal da empresa. Fantástico, vamos salvar esse rascunho, depois entrei na extensão e aqui estou vendo os smartphones da Apple. Então esse é o iPhone 13 Pro. Max está ótimo lá. O Regular Pro também parece bom. Tudo está se alinhando. Eu posso ler tudo, eu posso navegar em tudo. E está preenchendo a página inteira para cada um que parece perfeito. Qualquer pequena alteração como essa garante que você acesse a extensão e a verifique primeiro. Ok, de volta ao editor. A seção superior está funcionando. Vamos ver o que temos aqui agora. Ok, o que aconteceu com esta seção é que ela a mudou da direção horizontal para uma vertical que é perfeita. Acho que funciona perfeitamente lá. Em vez de tentar colocar as duas coisas uma ao lado da outra O título Wolfgang Music e o texto ficam acima da imagem deslizante A única coisa que eu acho que quero mudar é apenas um pequeno espaço neste lado da caixa, para que o texto vá até a borda. Vamos clicar nesse contêiner aqui em Editar contêiner. Vá para Avançado, tire esse espaço de 25 pixels. Lá vamos nós. Não é uma grande mudança, significa apenas que o texto está alinhado com a imagem abaixo. Isso funciona perfeitamente. Esses abaixo, na verdade, já estão perfeitos. De qualquer forma, eles são empilhados automaticamente. Element ou pode ler o que você pode querer fazer no celular e fazer com que isso aconteça automaticamente. Isso é ótimo. Nenhum trabalho precisa ser feito lá. Agora esse. Ok, está quase aí, mas não é bem assim. Empilhá-lo novamente, como fizemos acima, é perfeito. Acho que isso funciona muito bem. No entanto, o espaçamento não está correto. Eu realmente não consigo ver a imagem abaixo. Precisamos corrigir isso. Vamos entrar aqui. Vamos clicar no contêiner. Vá para Avançado. O que temos aqui é um preenchimento de 30 para a esquerda. Vamos vincular todos eles e torná-los 30 lá. Acabamos de obter um pouco mais de espaço acima do 01 e um pouco de espaço abaixo do texto. Então, a única coisa que eu quero fazer é neste subcontêiner, tirar o espaçamento aqui à direita Clique nesta caixa Avançado, tire esses 50 pixels com muita facilidade. Isso funciona muito bem. A única coisa que não está funcionando, obviamente, é que eu não consigo ver essa imagem. Está lá e é o plano de fundo do contêiner. A razão pela qual funcionava antes era porque tínhamos duas colunas dispostas horizontalmente Portanto, a altura de uma das colunas também foi representada pela altura da próxima coluna. Isso não está acontecendo agora porque eles estão empilhados. Vamos apenas alterar a altura mínima desse contêiner. Clique em Editar contêiner, venha aqui para definir a altura mínima. E vamos brincar com os pixels aqui. Talvez 400 pixels, talvez 500, talvez em algum lugar no meio, 450. Lá vamos nós. Estou feliz com isso. Significa apenas que as pessoas, quando chegarem à seção de violão , rolarão para baixo, lerão sobre isso e verão a garota tocando violão. Perfeito. Agora esses, 02 gravações de shows ao vivo 0304. Olha, eu acho que em termos do espaçamento de todos eles, eles estão realmente funcionando perfeitamente Há apenas um problema óbvio aqui, porque agora que o, eu quero que ele passe de 02 para registros, então eu quero ver a imagem 03 aqui. É muito fácil de consertar. O que temos aqui é o contêiner principal geral que contém o texto dos shows ao vivo e a imagem com o 03, eles são organizados da maneira regular. Isso está dizendo linha horizontal e está dizendo da esquerda para a direita. Tudo o que vou fazer é ir até esta seta na lateral que diz coluna invertida. E basta clicar nele. Então lá vamos nós. Muito fácil. O 03 saltou para o topo No entanto, a âncora que ainda está acima dela não se moveu porque não a colocamos acima do texto Se alguém clicar na âncora quando estiver no celular, ela ainda será direcionada para esse 03 Vamos ver como está a aparência dessa seção ainda. Isso flui bem de 02 para registros. 03 shows ao vivo perfeitos. Como eu estava dizendo, isso só mudou a exibição ou o layout desse contêiner no celular. Se eu usar tablets, continuo do mesmo jeito que era antes. Oposto, oposto. Desktop, do mesmo jeito que era antes. Oposto, oposto. Você notará que, ao voltar para verificar esses, não houve nenhuma alteração. Como eu disse, eles são inerentes a essa ordem. O que é feito no desktop é colocado na tabela. O que é feito na mesa é levado para o celular. Nenhuma alteração que eu faça no celular deve ter qualquer efeito em nada na mesa ou no desktop. Certifique-se de verificá-los pois algo pode se aproximar de você. Vamos voltar ao celular. Quase pronto aqui. Vamos ver o que temos. Deixe-me ser honesto, os depoimentos são perfeitos. Eu nem quero brincar com isso. E então essa seção na parte inferior é quase perfeita, apenas com o espaço preto ao redor. Isso é literalmente apenas o espaçamento, o preenchimento deste lado e o espaçamento acima Vamos até esse contêiner, clique em Editar contêiner e vá para Avançar. Você sabe como fazer tudo isso agora tire o preenchimento esquerdo e, em seguida, na parte superior, digamos que 50 Isso foi 65 e eles estão todos ligados. Fiz algumas coisas erradas lá. Vamos desvinculá-los e digamos que no topo estavam 50. Lá vamos nós. Se você olhar para isso, está funcionando perfeitamente. E isso foi muito fácil de corrigir porque o configuramos de uma forma boa no desktop que era fácil de editar e, em seguida, pudemos editá-la no desktop que era fácil de editar e, em seguida, no tablet de forma rápida e rápida. Em seguida, faça as alterações que fizemos, nosso tablet também aparece da mesma forma no celular. Novamente, basta salvá-lo e, em seguida, vamos visualizar as alterações. Vamos ver como está. Já estamos em uma versão móvel aqui. Seção superior, perfeita. Role para baixo, Wolfgang. Música Mesmo por ser um telefone mais grosso, ele realmente se espalha As palavras Wolfgang. E Music That parece ótimo. Perfeito. Perfeito. Perfeito. 01 guitarras visualizando perfeitamente a imagem Eu posso vê-la, eu posso ver o violão 02 discos. Ainda tenho a animação aqui também. Isso se seguiu desde o desktop, dois tablets até shows ao vivo no celular, depoimentos à moda antiga e, em seguida, o Agora você tem um site completo. Algo que tenha cada seção reunida e algo que funcione perfeitamente no desktop, tablet e celular. Vamos fazer isso ao vivo. 16. Prepare seu site para entrar no ar: Ok, agora estamos prontos para colocar seu site no ar. Como você pode ver no topo aqui, ainda diz que é um rascunho para mudar isso. Basta vir aqui à direita e clicar em Publicar. Quando terminar, venha aqui à esquerda, clique no E e escolha Sair para o Wordpress. Nada que você precise ver nesta página, basta clicar no logotipo do Wordpress. Isso o levará de volta às páginas configuradas. A página que estamos usando, Wolfgang Music que você verá agora, está ativa Não tem mais rascunho no final. Mas precisamos fazer uma pequena mudança. Essa será a página inicial. Clique em Quick Edit, The Slug, esse é o nome que vem depois do URL Quando você tem várias páginas em seu site, seria um URL. Entre em contato com o blog. Essa é a casa. Só queremos chamá-lo de lar. Vamos atualizar. Então, precisamos dizer que essa será a página inicial. Clique aqui na aparência e personalize. Em seguida, escolha Configurações da página inicial. Você tem a opção aqui de suas últimas postagens ou de uma página estática. Queremos uma página estática que será Wolfgang Music Isso mudará automaticamente. Agora tudo está configurado e esta é sua página inicial que todos visitarão quando acessarem seu site. Depois de fazer tudo isso, clique em Publicar e você estará pronto para começar. 17. Configurando o nome do domínio: Portanto, a versão de teste do seu site está configurada. Agora, se você quiser torná-lo ativo, mostrarei como fazer isso no Word of phi e como você pode alterar o nome de domínio. Então volte para o Word of phi, certifique-se de que você está em sites. E, em seguida, clique no lápis pequeno. Clique aqui para atualizar. Como você só tem um único site, certifique-se de escolher essa opção. Como fizemos um site muito pequeno, você precisará da pequena opção aqui. Escolha mensalmente, anualmente, o que você quiser fazer. E, em seguida, opte por atualizar. Então, quando você adicionou os detalhes do cartão de crédito, é isso. Seu site agora está ativo. E está usando o URL que foi configurado quando configuramos nosso preocupado se eu não posso fazer você feliz com isso, deixe assim. No entanto, se você quiser alterá-lo, venha para hospedagem e domínios. E aqui você pode adicionar um novo domínio, mas isso precisa ser comprado em outro lugar. E pode ficar um pouco complexo, um pouco confuso para configurar isso. No entanto, palavra, se eu tiver um grande suporte. Então clique neste ícone. Eles podem ter informações sobre o que você precisa aqui. Caso contrário, basta enviar uma mensagem para eles e eles vão falar sobre isso. De qualquer forma, se você quiser usar esse URL ou seu próprio nome de domínio pessoal, é isso. Agora você tem um site ao vivo. Então clique neste. Você verá seu site completo totalmente ao vivo e poderá mostrar a todos ao redor do mundo. 18. Agradecimento: Obrigado por dedicar seu tempo para assistir a toda a aula. Se você acompanhou todas as aulas, agora você tem um site de aparência incrível e sabe o que, eu quero ver este site, você pode carregá-lo aqui na seção de projetos abaixo. Se você colocá-lo lá, eu lhe darei meu feedback completo o mais rápido possível. Se você tiver alguma dúvida sobre alguma coisa em qualquer uma dessas lições, publique-a na seção de discussão também abaixo, aqui. Quando você terminar a aula, seria ótimo se você pudesse me deixar um comentário. Acesse aqui a seção de avaliações e clique em Revisar. Isso é ótimo. Como você pode me dizer o que realmente gostou na aula, mas também o que pode ser melhorado. E isso me ajudará a editar qualquer parte da aula que eu acho que será melhor para meus próximos clientes. E certifique-se de clicar no meu nome abaixo para ver meu perfil completo de compartilhamento de habilidades. Aqui, você verá todas as outras classes de sites que estou ministrando. Temos um sobre a criação um portfólio, também usando o elementor, e outro sobre o que fazer com imagens, como carregá-las e tirar o máximo proveito do seu site Você pode ir e assistir a todos eles e se certificar de me seguir. Assim, você pode ver assim que eu estiver fazendo o upload novas aulas e você poderá aprender um pouco mais Incrível. Tenha um ótimo dia.