Criação de sites mestre: do básico ao avançado com efeitos e animações impressionantes

1. Apresentação: Você já se perguntou como esses sites atraentes são feitos, ou talvez você esteja pronto para começar a criar seus próprios e até mesmo ganhar dinheiro Bem, você está no lugar certo. Bem-vindo ao meu curso definitivo de Wordpress e Elementor. Neste curso, começaremos com uma visão geral do elementor Você obterá todo o básico Além disso, vou mostrar alguns truques super legais, como animações de texto e muito mais que farão seus designs se destacarem, mas não vamos parar por aí Juntos, criaremos três sites reais, cada um subindo de nível em relação ao anterior. O primeiro é um site básico, perfeito se você está apenas começando. Em seguida, abordaremos um projeto intermediário com alguns recursos avançados e, finalmente, criaremos um site de nível profissional que fará você pareça um gênio do web design Aqui está uma parte interessante. Ao final deste curso, você não só terá as habilidades para criar sites incríveis, mas também um roteiro para transformar essas habilidades em renda, criando sites para clientes Então, se você está pronto para criar algo incrível e ganhar dinheiro com isso, junte-se a mim no curso e vamos começar. 2. Visão geral do Elementor: primeiros passos: Olá, amigos. Então, este é o nosso Wordpress AdInfennel ou Pessoalmente, adoro trabalhar em um ambiente limpo, então vou fechar essa tag. Ok, agora, clique na tela Opções e marque OK, então agora está limpo. Isso está ótimo. Agora vou explicar essas opções, uma por uma. Em primeiro lugar, este é o nosso painel do WordPress e o segundo é a opção de atualização. Portanto, se instalarmos algum plug-in e atualizações no futuro, se alguma atualização vier posteriormente, aos nossos plug-ins e atualizações que mostramos aqui. Então você pode atualizar a partir daqui. A seguir está nossa seção de postagem. Então publique em todas as postagens, podemos ver aqui todas as postagens se você é blogueiro e escreve postagens Então, a partir daqui, você pode editá-lo, excluí-lo. Você pode escrever sua postagem aqui. Então, o próximo é adicionar uma nova postagem. A partir daqui, você pode adicionar uma nova postagem. Se você clicar aqui, então há um pop-up, clique no botão Cancelar. Aqui você pode adicionar um título como eu estou escrevendo. Só estou te dando um exemplo. Qual é o seu nome? Então, na descrição, estou escrevendo algo assim, meu nome é Ti hang. Ok, então no lado direito, clique em publicar e publicar. Ao clicar com o botão direito, estamos abrindo em uma nova guia e veja aqui. Esta é a aparência da nossa postagem. Vou para o modo Dash do Wordpress novamente. Então, tudo bem. Nas categorias, você pode gerenciar sua categoria de postagem. Ok, a seguir está nossa etiqueta. Categorias e tags não são úteis para nós porque estamos criando nosso site. Mas estou apenas explicando cada opção para que você possa entender mais. Esta é a nossa seção de usuários, então eu quero me familiarizar com isso Estou assumindo um perfil. Então, aqui você pode escolher a configuração de cor do administrador. Então, quando você clica em Luz, como você pode ver, o tom do administrador muda Então você pode alterá-lo de acordo com você, mas eu estou mantendo isso como um desafio Então, a partir daqui, você pode adicionar novos usuários. Neste momento, quero que você se familiarize com dois termos básicos Um é um Bond ou o painel de controle de um site, e outro é o front-end de um site. Então, neste momento, neste lugar, este é o painel ou o painel de administração, porque somente nós podemos vê-lo como tínhamos o administrador deste site. Agora, se você quiser ver o site, tudo o que você precisa fazer é inserir o nome do site, como. Como você pode ver, aqui está o lado do widget Estou abrindo uma nova tag. Clique aqui. Aqui você pode ver a parte frontal da lateral. O mundo inteiro pode ver essa parte do nosso lado. Então, neste momento, nosso site está parecido com isso. Claro, vamos mudar isso da maneira que quisermos. Mas, neste momento, esse é o front-end do nosso site. A propósito, podemos ver essa barra superior preta aqui quando estamos logados Mas outros visitantes não conseguem ver essa barra preta no topo. A propósito, aqui, antes de fazer qualquer coisa, eu só quero fazer uma configuração simples, então vou voltar. Eu só quero fazer uma configuração simples. Então, nas configurações, primeiro vamos clicar em gênero. E aqui você pode alterar o título do seu site, como é de se admirar que eu esteja escrevendo aqui. Por exemplo, estou escrevendo aqui então, quando salvamos as alterações, agora, quando você acessa seu site de front-end e o atualiza, quando nós o atualizamos, como você pode ver, o título do nosso site está sendo exibido OK. Agora eu vou voltar. Aqui você pode escrever um slogan. Você pode escolher um ícone de site aqui. Escolha um ícone de site e clique em Carregar arquivos. Estou selecionando pilhas do ícone que você deseja escolher, como por exemplo, estou escolhendo este ícone, clique em Carregar Definir como ícone do site. Agora basta clicar na imagem recortada. Então, como você pode ver, aqui está o nosso ícone, aplicado. Então, como você pode ver, esse é o nosso ícone. Você pode remover o ícone do site daqui. Essas configurações eu não vou mudar. Você pode alterar o idioma do seu site aqui. Ok, mas eu estou mantendo isso em inglês. Você pode alterar o formato dos dados, acordo com você, o formato da hora. Você pode alterar todas as configurações de acordo com você e clicar em Salvar alterações. Ok, então essas mudanças são tinta, como você pode ver. Então, a partir daqui, clique em links permanentes. Então, aqui está o plano seletor, mas eu recomendo usar o post Nick porque aumenta a otimização A na classificação do Google porque, de forma simples, existem números que são difíceis de ler ou lembrar, mas o nome do post é fácil de ler e lembrar Agora eles rolam para baixo e nós verificamos as mudanças. Agora vamos instalar os temas e plug-ins que são importantes para que nossos sites instalem o tema, vá para a seção de aparência do tema. Então, como você pode ver, o tema 2024 está ativado Isso é o padrão da instalação do Wortless. Então você pode adicionar um novo tema clicando aqui. Como você pode ver, existem muitos temas gratuitos que você pode usar. A partir daqui, você pode fazer o upload de um tema. Você pode escolher Pilha no seu computador. Mas estou pesquisando o tema a partir daqui. Como se eu estivesse usando o tema Astra. Então, aqui está o nosso tema Astra, agora clique em Instalar. Nosso tema Astra está instalado. Agora, clique em ativar para ativar esse tema. Ok, então nosso tema Astra está ativado. Estamos excluindo esse tema de 2024. Então, primeiro de tudo, clique aqui e eu estou clicando em excluir e tudo bem. Deixe-me explicar o que são temas. Os temas são o layout do seu site WordPress. Eles determinam a aparência do seu site e como seu conteúdo é exibido aos visitantes. As equipes alteram a aparência geral do seu site, incluindo cores , fontes e layout, tornando seu site atraente e fácil de usar. Se eu for aqui, se eu recarregar a página, agora, como você pode ver aqui, isso está aparecendo apenas porque instalamos os temas do Astra A aparência do nosso site foi alterada. Eu sei que isso parece chato. Agora, volte para o seu painel. Agora estou instalando o plugin. Então, use os plug-ins. Em Plug-in instalado, você pode ver quais plug-ins estão instalados, pois não há nenhum plug-in instalado. Então, em Adicionar novo plug-in, você pode adicionar um novo plug-in. Estou clicando nisso. Então, na caixa de pesquisa, estou escrevendo a Eleanor Verifique se a ortografia deve ser corrigida. Este é o nosso construtor de sites Aleaor. Então clique em Instalar agora. Ative para ativar este plugin. Ok, agora, como você pode ver, nosso plugin está sendo exibido aqui. Então, basicamente, o que são plugins? plug-ins aumentam a funcionalidade de seus sites WordPress, os plug-ins adicionam novos recursos, melhoram o desempenho e aprimoram a segurança. Eles aprimoram o que seu site pode fazer e seu desempenho. Adicionaremos um novo plugin a partir daqui. A partir daqui, você pode pesquisar outros plug-ins, como eu estou escrevendo, então este é o nosso plugin Element skit Clique em Instalar agora. Então, nosso plugin foi instalado. Clique em Ativar para ativar isso. Ok, então nossos dois plugins estão aqui. Agora vou dar o exemplo de um plugin popular. Portanto, o Element também é um plugin muito popular. Portanto, este é um cursor de página de arrastar e soltar para criar um layout personalizado Agora clique em Adicionar novo plugin. Estou procurando por UssuussuPlug in também é Isso ajuda a otimizar seu site para mecanismos de pesquisa. Só estou te mostrando. Não vou instalar isso. Só estou te mostrando. Então, em seguida, nosso plugin é o WooCommerce. Então, este é o nosso plugin WooCommerce. Ele adiciona funcionalidade de comércio eletrônico ao seu site. A seguir está o nosso Formulário de Contato sete. Então, este é o nosso Formulário de Contato sete. Estou instalando e ele nos permite criar e gerenciar o Formulário de Contato. Agora, basta clicar em Ativar para ativar isso. Instalamos todos os nossos plugins e temas. Ao usar o Teams e o plug-in, você pode personalizar seu site WordPress para que tenha a aparência e o funcionamento exatamente do jeito que quiser , sem precisar escrever nenhum código Então, nos encontraremos em nossa próxima aula. 3. Visão geral do Elementor: segundos passos: Instale apenas os plug-ins que são importantes para o seu site porque quando você instala mais plug-ins que não são importantes para o seu site , isso diminui a velocidade do seu site. Portanto, certifique-se de fazer o upload desses plug-ins, que são importantes para o seu site. Agora vamos para a seção de páginas. Estou clicando em todas as páginas. Portanto, a privacidade e as páginas de amostra são padrão. Então clique aqui. Da webth action, vou para a lixeira e me inscrevo. Ok, agora duas páginas são depois. Agora vamos adicionar uma nova página. Então, para adicionar um novo P, você pode clicar aqui ou clicar aqui. OK. Então, agora, clique aqui. Estou dando à minha página como uma página de exemplo. Agora clique em publicar, publique novamente. Agora clique nesses três pontos e, a partir daqui, você pode ver aqui o modo de tela de puxa E quando clicamos nisso, como você pode ver, essa barra esquerda está aqui. Agora clique nele com Eleanor para editar nossa página. Então, nossa página está carregando. Está mostrando um pop-up, então clique em Cancelar. Agora, clique no botão Cancelar. Portanto, este é o nosso construtor de páginas Elementor ou painel Elementd. Então esta é a nossa tela emendada. E no lado esquerdo, todos esses são nossos widgets ou elementos Elementor Então, às vezes eu digo widget de elemento ou às vezes apenas digo elemento, então não confunda com widget de elementos e elementos são esses dois nomes Então você pode ver aqui que há muitos widgets de elementos que você pode usar para criar seu site Então, agora vamos entender esses ícones. Agora, este é o nosso ícone positivo. Então, se quisermos adicionar um contêiner, você pode clicar nele, e ele está nos mostrando dois layouts O primeiro é o Flexbox e o segundo é o grid. Ótimo layout. Não usaremos isso porque não é estável. Então, agora clique em Flexbox. E você pode ver que há muitas estruturas que você pode usar de acordo com seu desejo. Falaremos sobre essa estrutura em apenas alguns minutos. Então eu vou voltar, então basta clicar em Cancelar. Então essa é uma segunda opção. Quando clicamos aqui, você pode adicionar um modelo aqui. Então, na seção de blocos, você pode ver que há muitos modelos, mas esses são para o elemento P. Portanto, não usaremos esses modelos. Agora vá para as páginas, e você pode ver que aqui estão muitas páginas do Elementor Pro Próxima opção, meu modelo. Você pode salvar seu modelo aqui. Mas não salvamos nenhum modelo, então é por isso que ele está vazio. Então, agora vamos voltar, clique em Cancelar. Então, esta é a nossa opção de kit Element quando eu clico nela. Então, como você pode ver, aqui estão muitas páginas. Isso ocorre apenas porque instalamos o plugue do kit de elementos. É por isso que eles estão mostrando para nós. Agora, clique em Cancelar. Agora vou clicar em Este ícone de adição. E vou escolher o Flexbox e, a partir daqui, vou escolher a primeira estrutura, que é a coluna de direção Então, como você pode ver, este é nosso contêiner principal. Agora você pode ver essas três opções. E quanto a esses? Quando eu clico nesse ícone de adição. Então, se você quiser adicionar um contêiner acima desse contêiner, para poder adicionar um formulário, clique neste ícone de adição, Flexbox, e estou escolhendo a primeira estrutura Então, como você pode ver, existem duas estruturas. O primeiro é isso e o segundo é isso. Então, estou apenas excluindo isso. Quando clicamos nele, o contêiner principal é selecionado. Há três seções abertas. Então, o primeiro é o layout, o segundo é o estilo e o terceiro é o avanço. Agora vou explicar essas três seções. Ok, então o primeiro é o contêiner. A partir disso, como você pode ver, sempre escolheremos Flexbox e o segundo é a largura do conteúdo Manteremos o conteúdo em caixa, pois quando você escolhe um contêiner em caixa, não há espaço em nosso site Assim, você pode ver o exemplo ao vivo quando eu amplio e diminuo o zoom, como nosso conteúdo não é ampliado A seguir está nossa largura. Assim, você pode aumentar ou diminuir a largura do seu contêiner. A seguir está nossa altura mínima. Assim, você pode aumentar ou diminuir a altura mínima do contêiner. Como se eu estivesse apenas mantendo 500 a partir daqui, você pode diminuí-lo em um assim, e você pode aumentar a partir daqui em um. Agora vou para a seção de estilo. Então, aqui está nosso histórico. A partir daqui, você pode alterar seu tipo de plano de fundo em tipo de plano de fundo. Estou clicando em Clássico. A partir daqui, você pode escolher qualquer cor, como I'm ping it black. A partir daqui, você pode aumentar ou diminuir a transparência da sua cor. Aqui você pode colocar seu código de cores diretamente, e você pode escolher nessas opções também nas quais você se sente confortável, você pode escolher. Se eu quiser redefinir essa cor, basta clicar em limpar como eu sou cor no clique, estou escolhendo esse preto então quero salvar essa cor preta. Então, basta clicar no ícone de adição, como você pode ver, aqui está a cor global. Então, o que é cor global? Quando você cria seu site, então quando você pensa que essa cor será usada repetidamente no meu site, então você não quer selecionar essa cor repetidamente. Então você pode salvar essa cor. Assim, essa cor é salva em nossa cor global e, a partir daqui, você pode renomear sua cor como eu estou escrevendo aqui. Preto escuro. Você pode dar qualquer cor ao seu nome, então eu estou clicando em Criar. Então, aqui você pode escolher diretamente essa cor. Então, a seguir está nossa imagem. Se você quiser adicionar uma imagem em seu plano de fundo. Então, como você pode fazer isso? Então, primeiro, estou redefinindo essa cor, então, para redefinir, clique em Limpar Agora eu quero adicionar uma imagem de fundo. Então, vou clicar nisso. Como você pode ver, aqui está chegando escolha a Imagem, então vou clicar nela. Então você pode escolher a imagem aqui, como eu estou escolhendo isso, clique em carregar. Agora, Picon Slack, agora você pode jogar com isso também, como isolamento de imagem, vou mantê-lo cheio A partir da posição, você pode escolhê-la como centro central. Então, como você pode ver, nossa imagem está mudando no centro esquerdo a partir daqui, você pode explorar essas opções no canto superior direito, ela ficará assim. Então, eu o estou usando no centro e na esquerda. Em seguida, vem o anexo. Então, quando clicamos nesse sacro, quando alguém acessa nosso site, nossa imagem rola, você pode ver isso em um exemplo ao vivo Então, agora, quando eu clico nisso, corrigido, como você pode ver quando eu entro no meu site, nossa imagem é pixelada agora Sobre repetir, falaremos sobre isso em outras aulas. A seguir está o tamanho da nossa tela. Portanto, no tamanho da tela, escolheremos a capa quando clicarmos na capa. Portanto, nossa imagem será coberta até o contêiner cheio. Portanto, sempre o manteremos como capa. A seguir, nossa sobreposição de plano de fundo. Quando você clica na sobreposição de fundo, quando escolhermos, clique em GlassC para que você possa escolher outra imagem daqui, como eu estou escolhendo aqui Então clique em Carregar pilha a partir daqui, selecione as pilhas. Estou escolhendo essa imagem. Clique em Carregar. Então, agora clique em set. Então, nossa sobreposição é adicionada. Então, agora, essas são as configurações da nossa sobreposição. Portanto, você também pode alterar essa configuração como se eu estivesse mantendo-a no centro. Então, como você pode ver agora, podemos ver claramente a sobreposição. Do apego, eu o guardarei; caso se repita, não repita; do deslocamento, o mantenho coberto. Está bem? Então, a partir daqui, você pode aumentar ou diminuir a opacidade da sua A seção que não estou explicando, veremos sobre essa seção quando criarmos nosso site, então não se preocupe com isso. Agora estou excluindo essas sobreposições para que você possa entender melhor . Agora, para excluir essa sobreposição, você pode ir aqui e clicar nela, pois você pode ver que nossa sobreposição foi removida Então, agora suba a bordo. Aqui está o tipo de borda. Quando clico nisso, como você pode ver, esses são os tipos de borda. Quando eu escolho sólido. Então, como você pode ver, uma água é adicionada. A partir disso, você pode adicionar um pouco de borda, como se eu escolhesse cinco. Então, como você pode ver, nossa intensidade de bôer está aumentada. Agora, se eu aumentar o valor como dez , como você pode ver, a intensidade aumenta mais. Quando eu digito tenso, esses valores são aplicados nos quatro lados. Eu não quero isso. Se você quiser alterar o valor de apenas um lado, então o que você pode fazer para isso, basta clicar aqui. Agora, como você pode ver, aqui estão os valores dos links reunidos. Então, quando desvinculamos isso, você pode alterar os valores de um lado, como se eu escrevesse 30 Então, como você pode ver de cima, largura da nossa borda foi aumentada, mas do outro lado, ela continua a mesma. A partir daqui, você pode adicionar seu BoderCLF aqui, você pode escrever. Agora estou vinculando esses valores, ok? Então, agora eu estou mantendo isso como zero. OK. Então, o próximo é o nosso raio de bôer Você pode atribuir o raio de água à sua imagem, como se eu a mantivesse 40 Então, como você pode ver, nosso raio de borda foi adicionado. Em seguida, nosso divisor de formas. Então, aqui o topo é selecionado. E a partir do tipo, quando você seleciona aqui, como qualquer coisa, eu estou selecionando nuvem. Então, como você pode ver na parte superior, aqui as nuvens estão aparecendo. Como você pode ver aqui a partir da cor, você pode escolher a cor que você pode ver. Ele amaldiçoou as nuvens vermelhas daqui, você pode aumentar a altura assim Vire ao clicar em. Então, como você pode ver, como isso está mudando. Em seguida, você pode invertê-lo também desta forma, como você pode ver, eles estão se invertendo Ok, então você pode escolher aqui. Em seguida, destacamos essa opção. Nossa imagem voltará e nosso design como esse estará na parte frontal. A seguir está nossa seção inferior. Então, a partir daqui, você também pode escolher assim. Eu faço ziguezague. Então, essas mudanças estarão na parte inferior. exemplo, se você aumentar a largura, como você pode ver agora que eles estão adicionando, escolheremos outra cor. Se você aumentar a altura, como você pode ver, agora elas estão aparecendo bem, e você também pode trazê-las para a frente. Agora estamos avançando. Estou mantendo isso como n. Agora vamos começar. Então, aqui você pode ver o layout e preenchimento das margens. Então, o que são esses? Na margem, quando eu digito o valor 40, a posição do nosso continuador é alterada por causa da margem Se eu fizer isso zero de todos os lados, como você pode ver, nosso contêiner voltará à sua posição original. Então, o que é margem? A margem define o espaço externo de um elemento. Agora, se não entendermos bem, eu lhe darei uma explicação profunda. Agora estou apenas dando uma visão geral. Portanto, se você não entende sobre margem e desvanecimento, bem, entenderemos profundamente nas próximas aulas Agora é só ver a diferença entre margem e desvanecimento. Então, em preenchimento, quando eu dou o valor como 50. Como você pode ver, nosso contêiner não mudou de posição, mas você está vendo essa linha pontilhada Então, quais são as coisas? Você entenderá melhor sobre isso quando eliminarmos as despesas gerais Agora você se concentra apenas em que o contêiner não mudou sua posição, mas essa linha pontilhada mudou sua Sobre a próxima opção, entenderemos essas opções em outras aulas. 4. Visão geral do Elementor: terceiros etapas: Oi, pessoal. O que está acontecendo? Na aula de hoje, agora eu quero pegar um contêiner. Então, eu retiro esse ícone de adição no Flexbox, escolho nosso primeiro contêiner OK. Então, este é o nosso contêiner, e nesse contêiner, estou arrastando um widget de cabeçalho Então, para soltar o widget, você pode clicar nesse ícone de adição ou clicar nesse ícone de adição Então, estou clicando nisso. Agora estou arrastando o widget do título. Então, como você pode ver, nosso widget de cabeçalho é descartado, você pode alterar seu título daqui ou pode mudar seu título daqui para Ok, como estou escrevendo aqui Então, conforme você Tend, aqui está nosso título, mude instantaneamente. Aqui está um link. Você pode criar links para qualquer coisa, como seu site. Agora vou te dar um exemplo. Eu passei o link aqui. Agora que estou publicando isso, clique em Publicar. Então, aqui está um ícone do globo ocular. Então, estou clicando nisso. Aqui você pode ver nossas principais notícias aqui. Então, quando eu clicar nessa cabeça, redirecionaremos para esse site Então eu vou voltar. Agora eu quero estilizar esse texto. Então, para isso, vou usar a tag de estilo. Então, daqui no título, há alinhamento. Como você quer manter seu título como eu o mantenho no centro, como você pode ver, nosso título agora está no centro. Agora, a seguir está a cor do nosso texto. Então, a partir daqui, você pode escolher cor do texto do seu título desta forma. A seguir está nossa tipografia. Aqui está a família. Então, aqui você pode escolher a fonte do texto. Como você pode ver, existem muitas fontes e todas são muito boas. Você pode explorar essas fontes como se eu estivesse procurando por papagaios-do-mar Essa também é uma fonte muito boa. Assim, você pode escolher o tamanho que você pode ver. A partir daqui, você pode escolher o peso, como se você mantivesse 100, aqui você pode ver que o peso está diminuído. Ok, então se você escolher aqui entre 500, você pode ver a mudança. Então, a próxima é nossa transformação. Então, nisso, você pode escolher como se eu escolhesse aqui em maiúsculas, então, como você pode ver, todas as letras estão em maiúsculas Então, se você escolher letras minúsculas, você pode ver a diferença A próxima é nossa capital. Então, o próximo é o nosso estilo. Em grande estilo, se você fizer isso em itálico, como você pode ver, nosso texto está em itálico, então você pode escolher A seguir está a altura da nossa lança. Então, sobre isso, vou te explicar mais tarde. Então, estou mantendo isso como padrão. Você não vai entender isso agora, ok? Então, a seguir está nosso espaçamento entre letras. Quando eu aumento isso, como você pode ver, o espaço aumenta entre cada letra. OK. Então, a partir disso, você pode diminuí-lo. Então, eu estou mantendo isso assim. A partir daqui, se você aumentar o espaçamento entre palavras, como você pode ver entre dezenas e quatro e observar, o espaço aumenta Você pode ajustar de acordo. A seguir, nosso traçado de texto. Em seguida, clico neste ícone de lápis, a partir daqui, você pode aumentar o traçado do texto. Aqui você pode escolher a cor do traçado como essa. Então, vou voltar para redefinir qualquer coisa, você precisa clicar aqui de volta ao padrão. Em seguida, nossa sombra de texto. Estou clicando neste lápis. A partir daqui, você pode escolher a cor. A partir daqui, você pode aumentar o valor do desfoque, pois pode ver como essa cor vermelha está Agora estou clicando neste ícone de lápis. Agora vou descartar nosso widget de imagem. Então, se eu deixar aqui uma imagem, como você pode ver, aqui está nossa imagem escolhida. A partir desse pânico, clique aqui, você pode escolher sua imagem como eu estou escolhendo esta Aqui está nossa resolução de imagem. Agora vamos entrar na aba de estilo. A partir disso, aqui está a largura. Você pode diminuir ou aumentar o tamanho da sua imagem dessa forma. A partir disso, você pode escolher o alinhamento. Estou mantendo isso como centro. Você pode escolher a largura máxima de acordo com você. Você pode escolher a altura e a largura do objeto, estou mantendo-o coberto. Em seguida, há duas opções: normal e superior. Você pode aumentar ou diminuir nosso passado. O próximo é nosso filtro CSS. Se você clicar no ícone do lápis, a partir daqui, poderá aumentar o desfoque, pois poderá ver como nossa imagem está desfocada pois poderá ver como nossa imagem Portanto, você pode escolher qualquer valor aqui, como se eu o mantivesse como padrão. Você pode aumentar ou diminuir o brilho dessa forma. Contraste, você pode mudar. Então você pode ver muito bem as mudanças. Então, agora estou redefinindo todos esses valores. Então, estou clicando nisso. A partir daqui, você pode escolher o tipo de borda. Se você escolher sólido a partir daqui, um somador de borda, poderá escolher a largura da borda se eu mantiver cinco Então, como você pode ver, a largura foi aumentada em cinco. Você pode escolher Brercolor assim. Agora você pode ver claramente a cor da borda a partir daqui, você pode escolher o raio da borda se eu mantiver 20, como você pode ver, os cantos dos cantos são arredondados dos quatro lados A seguir está nossa sombra de caixa. Quando clico no ícone do lápis, você pode aumentar a sombra na horizontal, calmar, aumentar ou diminuir a cegueira Você pode escolhê-lo separadamente. Então, a seguir estão nossos dez avançados. Sobre t avançado, falaremos sobre isso em nossas próximas aulas. Então, agora você tem uma melhor compreensão sobre o título e nossa imagem, que 5. Entendendo as unidades de CSS: Unidade CSS. Então, essas são as unidades das linguagens de codificação HTML e CSS Quando criamos um site no WordPress com o Alementor, na verdade estamos desenvolvendo um Só que não estamos programando, mas no back-end, a codificação mas no back-end, a está funcionando e o Wordpress funciona para nós aqui Mas isso não significa que agora precisamos aprender HTML CSS para entender as unidades CSS. Primeiro, você precisa entender sobre a unidade absoluta e ativa Então, unidades absolutas. Unidades absolutas são aquelas unidades que mantiveram ou fixaram seu tamanho. Então, vamos ver um exemplo. Agora, aqui, se eu usar a unidade absoluta para dar um tamanho a um título, isso será corrigido em nosso desktop e dispositivo móvel. Por exemplo, agora que estou pegando um contêiner aqui, clique no ícone de adição Este é o nosso widget de cabeçalho. Eu faço com que fique preto. Eu mantenho o tamanho em 20, dos itens da linha à frase. Quando eu uso o tablet, dá para ver que ele não mudou de tamanho. E no celular, você pode ver que ele é mantido em seu tamanho em todos os dispositivos Agora vamos ver a unidade relativa. Unidades relativas são aquelas que se ajustam automaticamente ao tamanho , dependendo de várias coisas como o tamanho da tela. Agora, vamos entender sobre a unidade de pixels. Portanto, a unidade Pixel é uma unidade absoluta. Então, para entender isso, estou pegando um contêiner. Agora, primeiro de tudo, estou dando a altura mínima para isso. OK. Agora clique no ícone de adição, arrastando um título E deixe-me dar uma cor preta. OK. Então, eu estou bem. Então você pode ver aqui que o pixel já está selecionado, e eu dou o tamanho aqui 20. Agora, quando verifico meu tablet, você pode ver que esse tamanho está fixo. Não mudou de tamanho. Portanto, se você usar pixel em qualquer widget, ele fixará o tamanho em todos os dispositivos Antes de entender as unidades relativas, primeiro você precisa entender as relações entre pais e filhos. Portanto, este é o nosso contêiner principal. Deixe-me dar uma aquarela. OK. Então eu dou essa aquarela preta Você pode ver que estou aumentando sua altura agora, clique no ícone de adição e estou arrastando um contêiner para dentro dele Deixe-me dar para aquarela também. Ei, pessoal, então vejam aqui, este é o nosso contêiner principal, ok? E este é o nosso contêiner infantil. Agora, com o ícone Peco plus, estou arrastando um widget de cabeçalho dentro desse Também estou aumentando sua altura mínima. Ok, assim. Como eu disse, este é o nosso contêiner principal. Este é o nosso contêiner infantil, ok? E esse é o nosso elemento de cabeçalho. Para esse elemento de cabeçalho, esse é o contêiner pai. OK. E para isso, esse é o contêiner principal. Você está me entendendo o que eu quero dizer? Era uma relação pai-filho. As unidades relativas se ajustam ao seu tamanho com base no contêiner principal. Ok, agora vamos entender as unidades relativas. Somente o pixel é uma unidade absoluta. Outras unidades são unidades relativas. Portanto, nossa primeira unidade relativa é a unidade percentual. Então, vamos entender isso agora da largura do conteúdo até a largura total. Aqui, a porcentagem é selecionada, ok? E eu vou escolher aqui pixels, e vou dar 1.000 pixels de largura. Para meu contêiner principal ou para a seção principal. Está bem? E eu estou dando uma altura mínima aqui. Vá abaixo de Sita. Deixe-me dar uma cor preta. OK. Agora clique no ícone C plus. Eu arrasto um contêiner infantil. Conteúdo em toda a largura. Deixe-me dar uma cor de fundo também. Agora, este é nosso contêiner principal. E esse é o contêiner infantil. Para entender melhor, selecionei meu contêiner principal. Estou centralizando conteúdo justificado. OK. Agora, volte. Eu selecionei meu contêiner infantil. Você pode ver aqui a porcentagem selecionada e estou aumentando a largura para 50%. Ok, então você pode ver que o contêiner infantil continha 50% da área do nosso contêiner principal. contêiner infantil manterá 50% do tamanho do contêiner principal. Se eu aumentar ou diminuir o tamanho do contêiner principal. Por exemplo, você pode ver aqui que a largura do contêiner principal é 1.000 pizzas, certo? Se eu chegar aqui, 500, para que você possa ver, nosso contêiner secundário ainda continha 50% da área do contêiner principal. Se eu desse aqui 200, para que você possa ver, ainda cobre a área de 50% do nosso contêiner infantil. Espero que você entenda agora, então agora volte. Agora, as próximas unidades CSS são VW e VH. Em primeiro lugar, qual é o significado desse VW e VH? VW largura da janela de visualização e VH significa Agora vamos entender isso. Isso também ajusta o tamanho de acordo com seu elemento, mas não tem pai Como em porcentagem, ele se ajusta ao tamanho de acordo com o pai, mas a largura e a visualização dessa janela visualização não ajustam a altura ao tamanho acordo com o pai, então vamos ver em que base ela muda de tamanho Primeiro, coloque a largura desse lado esquerdo para o lado direito. Esta é a nossa largura de colocação e desta parte superior até esta garrafa. Esta é a nossa altura de colocação e salvamento do tablet deste lado esquerdo para o lado direito, colocamos a largura e de cima para baixo, colocamos a altura. mesmo em dispositivos móveis, da esquerda para a direita, largura do vaso, de cima para baixo, altura da janela de visualização OK. Agora, vamos entender isso por exemplo. Eu dei uma largura em VW, largura Vpot. Ok, então eu dei uma centena, vá fazer o Style Te. Agora minimize a guerra. Então você pode ver que eu dei a largura a cem Vpu uid, e é por isso que ela cobre toda a largura de toda a nossa tela Você pode ver aqui no tablet, ele cobre toda a largura. E o mesmo no celular, você pode ver aqui. Então você vê que a largura do Vpot cobre toda a largura da nossa tela Agora eu selecionei meu recipiente de disco. A partir daqui, escolho a altura mínima na altura da janela de visualização e estou chegando a 50% Eu dei a altura mínima de 50 do meu contêiner principal. Agora, minimize isso, você pode ver que ele cobre 50% de toda a nossa tela. Não importa qual seja a altura da sacrena, ela sempre cobrirá 50% da altura da nossa sacrena. Você pode ver no celular, ele cobre a área de 50%. Dei a cor de fundo ao meu contêiner principal. Oh, eu não preciso disso, estou excluindo este contêiner. OK. Então, agora eu acabei de colocar um contêiner filho dentro do meu contêiner principal. Agora estou escolhendo esse contêiner infantil e vou para Siteb. Estou dando uma borda sólida. Agora estou arrastando uma imagem para dentro do meu contêiner infantil. Está bem? Deixe-me escolher. Por exemplo, eu escolho essa imagem, ok? Então, a partir daqui, aqui está uma largura, e eu a mantenho personalizada, escolho a largura VOT e a atribuí a 100 OK. Na guia Estilo, estou escolhendo VpotWidth e estou mantendo-a em 100 e na largura máxima, além de manter a largura além de manter E quando eu mantenho em 100%, então você pode ver que esta imagem cobre toda a área desse secreto Por quê? Porque fornecemos a largura da janela de visualização aqui. Quando adicionamos qualquer elemento ou widget dentro do contêiner que não saia desse contêiner, certo? Mas, nesse caso , está acontecendo. Por quê? Porque usamos aqui a janela de visualização wid Ok, agora você entendeu muito bem que aqueles que você coloca largura e altura não se importam com o elemento original Como nesse caso, o elemento pai dessa imagem é esse contêiner branco, certo? E essa imagem não se importava com isso, ok? Agora eu espero que vocês entendam que o que eu quero dizer a vocês agora é ao lado das unidades RAM e M. Ok. Basicamente, essas unidades RAM e M são usadas para nossas fontes. Primeiro de tudo, vamos entender sobre M. Então eu estou pegando um contêiner aqui. Está bem? E deixe-me dar uma cor de fundo. Deixe-me escolher para preto. Eu adicionei um título aqui. Eu adicionei esse título aqui. Qual é o significado dessa unidade N se multiplica pelo tamanho da fonte do elemento pai O que isso significa? Então eu selecionei meu título e, a partir daqui, esse é o tamanho do título e eu o escolho, e estou dando aqui, por exemplo, um, esse EM que vamos multiplicar pelo tamanho da fonte do elemento pai E esse é nosso pai, certo? E se multiplicará por esse EM. Ok, por exemplo, se eu der aqui 3:00 A.M. Agora você está pensando que este é o contêiner, como ele terá um tamanho de fonte Então, deixe-me mostrar a vocês onde está? Vá para as configurações do site a partir daqui e, a partir daqui, abra a tipografia E quando você abre a tipografia, aqui você pode ver tamanhos de 16 pixels Está bem? Então, por padrão, tamanhos de 16 pixels. Então, se eu fizer aqui 20, você pode ver que o título é aumentado. O tamanho do cabeçalho é aumentado porque eu dei o tamanho a esse título três, à direita. Aqui, três em 20 é igual a 60 pixels, certo? E, por exemplo, se eu fizer aqui cinco pixels, três multiplicado por cinco é igual a 15 pixels Então, agora estou mantendo esse sile de 16 pixels, que era o motivo padrão Isso era só para dizer que eu nunca mudei esse valor a partir daqui. Então, vamos voltar, clique agora em Safe Genius. OK. Então, eu vou voltar. Ok, então, por exemplo, oh, eu estou dando aqui duas RAM. Como aqui, se eu der duas RAM para o tamanho do nosso texto, no back-end, também há a criação de um código HTML. O tamanho do elemento TTml raiz no documento HTML é multiplicado pelo tamanho do pixel Essa RAM é usada quando alguém altera o tamanho da fonte no navegador, como se fosse muito grande ou outras opções , e ela automaticamente se torna grande. OK. Por padrão, em todos os navegadores, você informa que o tamanho é médio. Aqui está a alternativa para isso também. Podemos apenas aumentar e diminuir o zoom, certo? Então, eu não uso isso principalmente. Se houver uma demanda específica para isso , podemos usar. Ok, então essa era nossa unidade CSS. Espero que você tenha entendido isso muito bem. OK. Então, agora, quais unidades eu uso e por quê? Então, para texto, eu uso principalmente a unidade de pixels. 6. Usando contêineres Flexbox: Rapazes. Então, neste vídeo, aprenderemos sobre o contêiner Flexbox Muitos estudantes estão confusos sobre como usar o contêiner e como criar um design bonito com a ajuda do contêiner. Então, vamos começar. Então, primeiro de tudo, pessoal, essa é nossa tela elementar Não se preocupe se você não souber de nada. Eu vou te explicar tudo no curso posterior. Agora, neste vídeo, vamos aprender sobre o contêiner Flexbox, que é um tópico muito importante, ok? Primeiro de tudo, estou levando um contêiner aqui. OK. Portanto, este é o nosso contêiner principal e clique no ícone de adição. Eu clico neste widget e você pode ver que isso é arrastar aqui. Clique em Este ícone de adição. Eu quero arrastar aqui um widget de imagem também. Então, quando eu arrasto para esta imagem, você pode ver que podemos arrastar esse widget na parte superior ou inferior Então eu o arrastei até aqui. Então, estou escolhendo essa imagem, por exemplo, selecione seu contêiner principal e, a partir daqui, em direção, você pode ver essa seta para baixo Isso significa que qualquer widget que eu arrastar para esta seção agora, cada elemento, por padrão, continuará vindo abaixo do Se eu escolher essa seta, agora você pode ver que nosso conteúdo está alinhado na horizontal Agora, clique nesse ícone de adição. Por exemplo, quero arrastar esse botão para a parte inferior. Você pode ver que a linha rosa está chegando apenas no lado esquerdo e direito. Mas não pode vir agora na parte superior da parte inferior. Então, quando eu deixo isso, você pode ver que nosso botão está agora no lado direito. Agora selecione seu contêiner de pedante e, a partir daqui, dessa forma, quando eu escolho a coluna, você pode ver que todo o conteúdo está alinhado na coluna Agora, a linha de direção está selecionada e qual é o significado disso? Você pode ver que aqui está chegando a linha invertida. E quando eu clico nisso, agora nosso botão está na primeira posição e está indo para a última posição. Mas quando eu clico nessa coluna invertida, nosso botão se posiciona na parte superior e esse título vai para a parte inferior Espero que você entenda muito bem essas instruções. Agora vamos entender essas opções e, antes de tudo, estou aumentando sua altura mínima para o entendimento do Batn. Antes de tudo, vamos entender os itens de alinhamento. Quando eu escolho iniciar, você pode ver que todos os widgets estão nessa posição inicial Quando você quiser alinhar seu conteúdo no centro, basta clicar aqui no Senter você pode ver que agora nosso conteúdo está nesta posição central Então, espero que você entenda muito bem sobre os itens de linha. E agora vamos ver isso. Aqui está o conteúdo justificado. Quando eu escolho o centro, você pode ver nos itens de linha que eu escolho no centro e no conteúdo justificado eu escolho os centros, e é por isso que nosso conteúdo é centralizado horizontal e verticalmente Agora, quando você escolhe iniciar, agora nosso conteúdo estará verticalmente nessa posição inicial Dessa forma, você pode escolher e ver conteúdo está no final quando você escolhe um espaço entre, aqui está um espaço entre nossos widgets e quando você escolhe o espaço ao redor, então aqui o espaço é adicionado ao redor dos widgets Dessa forma, quando você espaça uniformemente, mesma quantidade de espaço é adicionada ao redor dos widgets OK. Espero que você entenda sobre isso. Então, agora, quando eu escolho aqui linha, ok? Então, agora nosso conteúdo está horizontalmente na posição inicial, agora está centralizado horizontalmente, e o espaço entre eles, você Agora, o espaço é adicionado entre o widget. E quando você escolhe um espaço ao redor, o espaço também é adicionado no final do widget E quando você escolhe o espaço uniformemente, entre o widget, a mesma quantidade de espaço é adicionada Dessa forma, quando você escolhe itens de linha para centralizar, agora nosso conteúdo está horizontal e verticalmente na Dessa forma, agora está no fim. OK. Espero que agora você entenda muito bem essas opções. Ok, pessoal, agora vejam quando queremos pegar um contêiner, vocês podem ver que podem adicionar um contêiner daqui, ok? E no lado esquerdo, você pode ver aqui também um contêiner. Você sabe o uso desse contêiner, mas qual é o uso desse contêiner? Agora vamos entender isso em apenas alguns minutos. Então, primeiro de tudo, vou pegar um contêiner aqui, ok? E a partir daqui, eu estou escolhendo remar. Aumente sua altura mínima dessa forma. OK. Então, estou arrastando um widget de cabeçalho aqui. Agora, o que eu quero, eu quero uma imagem no lado direito do cabeçalho. Quero um botão na parte inferior do cabeçalho. Então, estou arrastando meu widget de imagem. Assim, você pode ver que a imagem é adicionada facilmente neste lado direito. OK. E agora eu quero arrastar meu botão na parte inferior deste título. Não estou tentando, mas não está acontecendo. Esse botão é arrastado aqui, não na parte inferior desse widget de cabeçalho Então, aí vem o uso desse contêiner. Podemos fazer qualquer coisa com esse widget de contêiner. Agora vamos deletar isso Ok. Então, agora vamos fazer o uso desse contêiner. E primeiro de tudo, estou deletando tudo isso. Agora, clique no ícone de adição e, a partir daqui, estou escolhendo essa estrutura. OK. Agora eu seleciono esse primeiro contêiner secundário do lado esquerdo e clico no ícone de adição. Estou arrastando meu widget de cabeçalho aqui. Então, agora clique em Este ícone de adição. Estou arrastando esse botão e você pode ver que esse botão está sendo arrastado dentro desse widget de cabeçalho Está bem? Selecione seu contêiner principal. Você pode ver aqui que a linha de direção está selecionada. Está bem? E é por isso que esses dois contêineres estão alinhados em linhas. Está bem? E este é nosso primeiro contêiner secundário cuja direção é a coluna. Agora selecione este contêiner e aqui a direção Coluna é selecionada, e é por isso que esse botão é arrastado abaixo Quando eu faço o desenho de direção aqui, você pode ver agora que esse botão é arrastado para o lado direito E quando eu faço a coluna aqui, você pode ver, agora esse botão está sendo arrastado até aqui Então, agora vamos arrastar a imagem aqui. Clique em Este ícone de adição. E quando eu arrasto meu widget, você pode ver que uma imagem é arrastada para o lado direito do título, e esse botão é arrastado na parte inferior desse E como você sabe, eu quero isso e eu entendo isso 7. Explorando configurações globais: Então, estou pegando um contêiner aqui. Agora eu quero arrastar o título do meu widget. OK. Eu arrasto minha cabeça até aqui. Então, por que essa cor sempre vem e assim quando eu arrasto meu editor. Então você pode ver que sempre vem essa cor clara. Por quê? E dessa forma, quando arrasto meu botão, para que você possa ver esse fundo verde, por que ele sempre aparece? Porque essas cores são definidas globalmente e podemos alterá-las. Então, vamos ver como podemos mudar isso? Então, para mudar isso. Então, aqui estão as configurações do lado do ícone. Estou clicando nisso. Aqui está uma opção de cor global. Então, estou clicando nisso. Aqui está um programa global afirmando que estou desativando isso, então veremos as mudanças diretas Você pode ver essa cor primária, e é por isso que quando arrastamos nosso título, ele sempre sai dessa cor, certo? Dessa forma, aqui a cor é definida secundária e você pode ver esse editor de texto, e é por isso que quando arrastamos nosso editor de texto com ele, essa cor é definida para essa cor ascendente é para botão, e é por isso que essa é a cor de fundo verde Você pode mudar essas cores como se eu fizesse preto aqui. Ok, e eu estou mudando esse texto, por exemplo, para vermelho. Então você pode ver como as cores estão mudando. Dessa forma, estou fazendo na cor preta. Aqui está uma cor personalizada. Você pode adicionar cores a partir daqui se quiser outra cor que veja e verá que essa cor será usada repetidamente no meu site. Então você pode definir a partir daqui e, a partir daqui, você pode simplesmente excluí-lo. Está bem? Você pode simplesmente excluí-lo. Então, eu estou fazendo Cencil. Agora eu defino essas cores globalmente. E agora, quando vou arrastar meu widget, esse widget ficará com essas cores Depois de fazer as alterações, clique em Salvar alterações. Agora veja o que aconteceu. Estou excluindo isso primeiro. Agora estou pegando um novo contêiner. Então veja agora o que aconteceu. Estou arrastando meu widget de título, para que você possa ver agora que nosso título está vindo na cor preta porque definimos essa cor globalmente Isso não significa que agora você não pode mudar essa cor, você pode mudar essa cor. Por exemplo, você pode mudar isso a partir daqui, ok? Cor que você deseja dessa maneira. Espero que você entenda como definir as cores globais. Isso é muito útil porque não precisamos escrever o código repetidamente, então ele deixou de lado o trabalho. Então, agora veremos sobre fontes globais. E para entender que estou pegando um contêiner e arrastando um título aqui Você pode ver que está definido pela borda dois padrão, então estou fazendo com que seja duas arestas um, clique com o botão direito do mouse e duplique Aqui estou fazendo a borda dois. Então, agora vou entrar nas configurações. A partir daqui, você pode ver as fontes globais e, a partir daqui, definir as fontes. Por exemplo, no primário, você pode definir aqui a família. Agora eu fiz a família aparecer, então você pode ver que todas as fontes estão aparecendo agora. Dessa forma, você pode definir o país de uso, como, por exemplo, o texto AlbatiCaf, você pode definir o sinal decrescente se eu definir essas fontes Então, depois de fazer as alterações, clique em alterações. Então, agora veja o que aconteceu. Estou selecionando esse título em Iniciante. Agora não precisamos escolher a família daqui. O que podemos fazer, basta clicar aqui. Se você clicar em secundário. Agora você pode ver que esta é a nossa fonte Helvetica. Dessa forma, ao escolher o texto, você pode ver essa fonte agora senoidal Agora, aqui está uma tipografia. Na tipografia, você pode definir o tamanho de cada cabeça. Por exemplo, em H one, você pode ver, você pode manter o tamanho daqui como 70. E para H dois, estou fazendo 60. Dessa forma, você pode definir para todos. Não podemos definir a família. Ele apenas definirá o tamanho para nós, não para as outras coisas, ok. Então, agora clique em S changes, volte aqui. E antes de tudo, estou excluindo isso. Agora veja aqui. Quando eu arrasto meu título, agora é H dois. Seu tamanho será o que definimos nas configurações globais. Agora, vamos mais longe. Arraste a imagem Y para que você possa ver as alterações que fizemos nas configurações laterais. Assim, você também pode definir as mudanças globais para a imagem. Ok, isso é tudo para este vídeo. As outras configurações realmente não importam, então não se preocupe com elas. Nos vemos na próxima. 8. Criando um efeito de texto de água: Neste vídeo, estamos criando um efeito de texto de água fria. As palavras parecerão feitas de água, o que é muito legal. Então, vamos começar a criar esse efeito interessante. A partir de agora, aprenderemos sobre belas animações e você pode aplicá-las se tiver um elemento ou uma proversão Então, vamos começar primeiro, clicaremos nesta página Adicionar nova. Estou dando um efeito de texto de água com o nome da página. Então, vamos clicar em Publicar. Agora estou clicando nessa edição com o Elementor. Agora estamos dentro do nosso construtor de páginas elementar. Então, agora vamos começar. Em primeiro lugar, levaremos nosso contêiner. Do lado esquerdo, estou dando para N VH e estou mantendo a altura de Buport em 100 A partir do conteúdo justificado, vamos centralizá-lo; a partir dos itens de linha, vamos mantê-lo como centro. Usaremos o estilo fita e a cor de fundo preta. Agora clique neste ícone de adição, estou escrevendo um título aqui. Vamos entrar no Style. Vamos manter o alinhamento como centro. Cor do texto, estou mantendo a cor branca da tipografia e escolhendo os meios da fonte Vou mantê-lo no tamanho 85 e, a partir do peso, vou mantê-lo em 800. Agora vamos apenas duplicar nosso título. Agora, clique com o botão direito e duplique. Agora abra o navegador. Este é o nosso primeiro título, e este é o nosso segundo título. Então, estou selecionando nosso primeiro título. Vou entrar em avançado, rolar para baixo e aqui está um código de série personalizado. Você pode ver esse traço azul. Então, agora vamos entrar na aba de estilo e mudar essa cor branca para que você possa escolher qualquer cor. Estou mantendo sua transparência como zero. Agora isso está lindo. Agora vamos selecionar nosso segundo título aqui na cor do texto. Estou colando meu código de cores aqui. Vamos entrar em avançado e rolar para baixo. Estou fazendo com que sua posição seja absoluta. OK. Então, agora selecione nosso primeiro título e vamos avançar aqui. Também manteremos sua posição absoluta. Agora vamos selecionar nosso segundo título. E na guia avançado, role para baixo e aqui está um código CSS personalizado. E aqui vou colar meu código CSS personalizado. Então, como você pode ver esta bela animação de texto ondulado em água Então, agora vamos usar esse botão publicado. A animação aquática é de 4 segundos, então você pode alterar aqui o valor, como se escolhêssemos um, e aqui também faremos como um. Então, como você pode ver, a animação está acontecendo muito rápido. Então, eu estou mantendo isso como parte de trás. Estou mantendo como quatro, e aqui também porque você não precisa aprender esse código. Eu já escrevi esse código para você, então você não precisa se preocupar. 9. Efeitos de pairar da imagem de fundo: Oi, pessoal. Neste vídeo, aprenderemos sobre a animação que, ao passar o mouse, imagens de fundo do contêiner mudam Então, o que isso significa? Vamos ver. Inicialmente, você pode ver as cartas assim. Aqui estão três cartas. Esta é a carta um. Esta é a carta dois, e esta é a carta três. Mas quando eu passo o mouse sobre meu primeiro cartão, como você pode ver, o conteúdo viaja e as imagens de fundo mudam Assim, quando eu passo o mouse sobre meu segundo cartão, a imagem é alterada e o conteúdo tropeça e o mesmo acontece com o Então, vamos seguir em frente. Agora eu não vou te dizer como você pode fazer isso porque eu já fiz isso para você. Então, se você quiser usar essa animação, basta importá-la para o seu site. Acabei de lhe dar uma visão geral de como você pode alterar os códigos de texto e como alterar essas imagens de fundo de acordo com você, e isso facilitará seu trabalho. Então, vamos ver como você pode alterar o texto. Então, basta clicar aqui. E se eu escrever aqui, esse título é alterado instantaneamente. Dessa forma, você pode alterar todas essas coisas dessa forma, nosso widget de editor de texto, você pode criar esse botão de acordo com você Inicialmente, você pode ver essa imagem de girassol. Então, como mudar se você quiser mudar essa imagem, então como você pode fazer? Para alterar essa imagem de girassol, você deve selecionar este contêiner principal do cartão em estilo a partir daqui, você pode escolher qualquer imagem de acordo com você Por exemplo, se eu escolher essa imagem, como você pode ver agora que a imagem está sendo exibida, vou usar a imagem padrão. Agora vá para a tag Avançado. Aqui você pode ver esse ID CSS. Não altere nem exclua esse ID SS. Caso contrário, o código não funcionará. Eu vou te dizer onde esse ID SS e as classes são usados no código. Primeiro de tudo, veja, agora se concentre nisso. Estou selecionando meu cartão 1. Na guia Avançado, você pode ver aqui que eu escrevi o cartão de identificação CSS um e a classe CSS para um único cartão. Assim, no segundo cartão, escrevi o cartão de identificação CSS dois e a classe CSS em um único cartão. classe CSS é a mesma em todos os cartões, mas o ID CSS do cartão um é o cartão um. E a carta dois é a carta. E o mesmo, você pode ver isso na carta três. Portanto, agora não altere esse ID CSS e as classes CSS. Eu escrevi aqui dois tipos de códigos. Então, vamos ver isso. Primeiro código, eu escrevi no contêiner PinT dos cartões, vá para o código CSS personalizado e aqui você pode ver esse código Você não precisa alterar nada nesse código se quiser mudar. Então você pode mudar isso. Como, por exemplo, agora nosso botão está sendo exibido aqui. Se você quiser fazer algumas mudanças, como mudar a posição da manteiga na parte superior ou inferior. Então, assim se eu estiver aqui, se eu fizer isso dois menos 1250 pixels Agora, quando eu passo o mouse sobre isso, para que você possa ver isso, a posição do botão é alterada Então, dessa forma, você pode alterar a posição do título, a posição do texto. Todas as coisas que você pode mudar. Então esse foi nosso primeiro código. Agora, vamos falar sobre esse segundo código. Eu coloquei o segundo código no HTML e esse widget HTL é arrastado aqui Então veja aqui, aqui está nossa imagem variável 1. Quando eu vi meu primeiro cartão, para que você possa ver esta imagem de rosa. Então essa imagem de rosa está nos mostrando porque aqui eu coloquei o URL dessa imagem de rosa. Concentre-se no meu cursor para onde eu o estou movendo. Ok, agora vamos entender esse código. cartão um é o ID CSS do cartão um, e veja aqui que, quando eu passo o mouse sobre o meu cartão um, fundo Im deve ser alterado para a imagem um Então, como você pode ver, aqui está o URL da imagem. Quando eu saio do meu cartão, ele deve ser sua posição inicial É por isso que esses códigos duplos são amplitudes. Dessa forma, quando passo o mouse sobre meu cartão dois, fundo Im muda para a Imagem dois, e aqui está e aqui está o URL da imagem também. E quando eu sair do meu carro também, para que a imagem de fundo mude para sua posição inicial, você terá as outras imagens Então, basta remover esse link. Então, basta excluí-lo e ir até a opção de mídia. Então, por exemplo, estou escolhendo essa imagem. Então, a partir daqui, copie o URL dessa imagem e cole o link aqui. Agora, quando eu examino meu primeiro cartão, você pode ver que essa imagem de fundo foi alterada. Então, dessa forma, basta excluir esse URL, clique aqui. E, por exemplo, estou escolhendo essa imagem, copie o URL. E cole esse URL aqui. Então, agora, quando eu passo o mouse sobre minha segunda carta, Bagardmage é alterado para Então, dessa forma, você pode mudar tudo de acordo com você. 10. Como criar efeitos de hover de cartão: Olá, pessoal. O que está acontecendo? Então, no vídeo de hoje, discutiremos sobre a animação do efeito de foco do cartão Eu não vou te dizer como fazer isso porque eu já fiz esse garoto. Você pode simplesmente importá-lo para o seu site. Então, vamos nos concentrar nisso. Então, primeiro, você pode ver aqui quatro cartas e algum texto está escrito, e você pode ver esses números um, dois, três e quatro. Quando eu passo o mouse sobre meu primeiro cartão, você pode ver esse lindo fundo, e você pode ver como o texto fica branco e os números também ficam brancos E dessa forma, quando eu passo o mouse sobre minha segunda carta, você pode ver esse efeito Assim, ao passar o mouse sobre qualquer cartão, você pode ver como nossa imagem de fundo está mudando e a cor do texto está mudando Assim, você pode simplesmente importar esse modelo para o seu site. Então, agora vamos nos concentrar em nosso código. Aqui eu colo o widget de codificação HTML. Então, basta clicar em codificar isso. Então, aqui está uma cor de texto flutuante. Quando eu passo o mouse sobre o meu carro, para que você possa ver esse texto colorido Então, aqui você pode mudar qualquer cor de suas dicas, como se eu escrevesse aqui para preto. Então, agora, quando eu passo o mouse sobre meu primeiro cartão, nosso texto está em preto agora Então, dessa forma, você pode mudar qualquer cor. De acordo com você, eu vou voltar. Você não precisa mudar nenhuma outra coisa. Você pode simplesmente mudar a cor do texto. Então, espero que você goste desse lindo efeito de aspirador de cartas. 11. Criando animação de slides de cartão: Neste vídeo, vamos fazer uma animação de cartão deslizante No início, você verá as cartas ali, mas quando eu passar o mouse sobre elas, o conteúdo oculto deslizará para baixo e aparecerá Então, vamos começar. Dei meu cartão de nome do título deslizar para baixo. Então, basta clicar em Salvar. Ok, agora estou clicando nessa edição com o Animator. Vamos clicar nesse ícone de adição. Lexox Estou escolhendo essa estrutura de duas colunas. Eu quero três cartas. Agora, selecione o contêiner principal ou a seção média. Do lado esquerdo, vamos fazer com que sua altura mínima seja de 200 VH. Role para baixo e, a partir dos itens de linha, vamos começar. Use a etiqueta de estilo. Estou dando uma cor preta. Vá na guia Avançado, desvincule primeiro o desvanecimento e, de cima para baixo, estou dando o valor 200 Estou selecionando esse contêiner. Vamos até a aba de estilo. Vamos dar uma cor de fundo. Por quê? Role para baixo e aqui está uma opção de borda. Estou dando um raio de borda de dez pixels. Vá abaixo do horário avançado. Vamos dar uma margem de dez pixels de todos os lados. Agora desvincule a margem da parte inferior, mantenho o valor aqui como 50 e vamos dar a ela um preenchimento de 25 de todos os lados Um ícone C plus. Vamos arrastar a imagem aqui. Vamos escolher a imagem. Vá em Avançado para desvincular a margem e, de cima para baixo, atribuo o valor de -60 ao ícone Cplus Estou escrevendo um editor de texto abaixo dessa imagem. Vamos escrever o título aqui, cartão um, selecionar isso e, a partir disso, vou torná-lo o título dois em alinhamento de estilo, cor central Vamos torná-lo preto, menos avançado. Vamos atribuí-lo a uma classe CSS para conteúdo de texto. Vamos selecionar esse contêiner e colar aqui, código CSS personalizado. Então, como você pode ver, agora, este é o nosso texto e, por cima, está na parte superior. Mas queremos esse texto por trás da imagem. Então, vamos selecionar nossa imagem. E a partir daqui, vamos aumentar o próximo valor Z. Estou dando o valor de. Então, como você pode ver agora, está ótimo. Vamos minimizar a barra. E quando ou depois. Então, esse efeito parece muito incrível. Então, vamos abrir o bar. Agora, vamos entender o código primeiro. Estou selecionando esse contêiner. Aqui está nossa altura. Então você pode mudar de acordo com você, como se eu escrevesse aqui 115, pois você pode ver a altura desse recipiente branco com esta aparência. Então você pode mudar de acordo com você. Eu vou voltar. E a partir daqui, você pode alterar a sobrecarga. Então você aumenta isso como se eu escrevesse aqui, 500. Então, agora, ao passar o mouse sobre isso, você pode ver que o comprimento desta carta foi aumentado Então você pode mudar isso, mas eu vou voltar. Assim, você pode alterar esses valores. Agora, quando você está feliz, estou mudando essa altura para dois, 250. Agora isso está bonito, eu acho. Ok, 240 está bonito. Ok, então eu estou mantendo esse valor. Agora basta duplicá-lo. Duplicado. Agora, estou excluindo esses dois contêineres. Agora, basta minimizar a guerra. E quando você passa o mouse sobre esses carros, você pode ver que esse conteúdo está muito bom 12. Criando um efeito de carta distorcido: Neste vídeo, vamos criar um efeito interessante de carta distorcida Quando eu passar o mouse sobre esses cartões, as cores mudam Vamos começar e ver como funciona. Vamos clicar em dt com Elementor. Vamos pegar um contêiner. Altura mínima, estou mantendo-a como VH 100 VH, na direção, vou escolher a linha do conteúdo justificado Vamos mantê-lo como centro, centro, lacunas 40. Na guia Estilo, cor de fundo, vou manter o preto. Vamos clicar nesse ícone de adição, arrastando um contêiner Vamos duplicar isso. Mais uma vez, estou escolhendo este contêiner. Na guia Avançado, vamos mantê-lo tão espaçado quanto dez, clicar no ícone de adição e arrastar mais um contêiner Na guia Estilo, nós a manteremos. Cor de fundo como preto. Na guia avançada, deixe o preenchimento primeiro. Vamos mantê-lo acolchoado de cima para baixo e 40 para a direita. Vamos manter 30 da parte inferior, 40 da esquerda como 30, clique no ícone de mais, arrastando um título Vamos mudar o título. Vamos ver o centro de alinhamento de rasgos Style. Cor do texto como branco. Tipografia. Vamos mantê-lo como 35. Clique neste ícone de adição. Estou arrastando um editor de texto na guia Estilo. Centro de alinhamento, cor do texto, estou mantendo menos branco neste ícone de adição, estou arrastando um botão, centro de posição, cor transparente, tipo de borda, sólido, largura de borda Agora, aqui temos que escolher esse contêiner externo. E, em termos avançados, aqui está uma opção CSS personalizada, e eu vou colar meu casaco. Branco. Então, como você pode ver, essa cor branca, mas estou mantendo-a como padrão. Assim, você pode mudar qualquer cor você pode mudar essa cor, como se eu estivesse aqui amarelo. Então, como você pode ver isso, assim, você pode alterar um gradiente um, gradiente dois, gradiente, três cores. Então, eu vou voltar. É como esse contêiner externo, botão direito do mouse e duplique. Duplique mais uma vez. Agora estou avaliando esse contêiner. Quando você estiver satisfeito com isso, basta clicar neste botão de publicação quando eu minimizo a barra, para que você possa ver esse lindo defeito de inclinação 13. Conteúdo com scroll revela efeitos: Olá, pessoal. No vídeo de hoje, você pode ver esses lindos contêineres de declarações na animação de rolagem quando eu vou até meu site Então, como esses contêineres estão se cobrindo. Isso parece muito bom. Então, vamos começar. Colocando contêineres no rolo. Então, vamos dar um título. Clique em Publicar. Clique em Editar com Elemental. Vamos pegar um novo contêiner clicando nesse ícone de adição. A partir daqui, no mínimo 3 g de conteúdo de 200 Vg com dois conteúdos fixos de largura total nos centros de itens da linha central, conteúdos fixos de largura total nos centros de itens da linha central clique no ícone de adição, arrastando Agora, esse contêiner está centralizado vertical e horizontalmente Conteúdo com duas larguras completas. Estou fazendo isso com 75% de altura mínima até 70 VH na direção pela qual estou passando porque quero colocá-lo na horizontal até a seção Vá na guia Estilo. Vamos dar uma cor de fundo, escrevendo um código de cores para dois quartos um mar. Então, tudo bem, vá para baixo da fronteira. Vamos dar uma borda de 20 pixels, minimizar a barra. Então, isso está bonito. Vamos voltar. Clique no ícone de adição. Agora vamos arrastar nosso conteúdo. Vamos fazer isso rápido. Estou selecionando o recipiente da caneta de nossos títulos. Vamos clicar e duplicar. Agora, basta excluir o conteúdo daqui. Eu quero arrastar uma imagem aqui, então é por isso que eu simplesmente excluo o conteúdo. Vá para a guia Estilo. Vamos escolher Imagem. Vamos escolher essa imagem. Clique na posição Seck no centro, role o anexo, repita para não repetir, tamanho da capa Agora estou selecionando esse contêiner daqui, conteúdo justificado para o centro. OK. Então, agora selecione este contêiner externo, vá em avançado. Vamos dar um título para 50. Agora isso está bonito. Nossa imagem e cabeçalhos agora estão com boa aparência. Estou selecionando esse contêiner. A partir daqui, estou fazendo duas caixas, e vamos fazer com 200% e alinhar os itens ao centro Agora nosso primeiro contêiner está pronto. Vamos apenas duplicar isso, duplicar mais uma vez Agora, antes de fazer qualquer coisa, quero adicionar um novo contêiner aqui. A partir daqui, altura mínima, estou chegando a 50 H. Vamos apenas uma imagem aqui. O contêiner não funciona , mas isso é importante porque quero lhe dizer uma coisa. Então, vamos adicionar essa imagem. OK. Sim, pronto. Agora vou mudar as imagens rapidamente e a cor do fundo Então, eu estou fazendo isso tão rápido. Vou selecionar cada contêiner. Vamos manter Z em profundidade, então vou manter aqui um. Use efeitos de movimento a partir de sticky, vamos escolher entre a parte superior e a partir de offset, estou dando o valor como 50 OK. Então, quando eu rolo para baixo, você sabe, os outros contêineres estão voltando para o primeiro contêiner. Então, vamos fazer a mesma coisa com os outros contêineres. Aqui, colocaremos o índice Z como dois. Teremos que fornecer o valor mais alto índice Z do que o primeiro contêiner. Ok, esse. Então, eu também forneço o índice Z aqui e, nos efeitos de movimento daqui, fixados no topo, forneço valor de deslocamento maior do que nosso primeiro Como no primeiro contêiner, escolhemos o valor do deslocamento como 50 Então, aqui vamos fazer com que dobre. Ok, aqui vamos manter 200. E no próximo contêiner, vamos escolher esse terceiro contêiner, índice Z três vezes maior que esses dois contêineres, do efeito de movimento adesivo até o topo e o valor do deslocamento, forneceremos aqui 150 quando for acumulado Então veja, Uau, isso está ótimo. Certo? Nossos contêineres estão empilhados aqui. Agora, veja aqui, quando é acumulado no meu site, as outras coisas estão voltando para esse contêiner, certo Então isso está errado, certo? Então, como configurar isso? Vamos abrir a guerra e temos que fazer isso para cada contêiner, use esse primeiro contêiner , sob efeitos de movimento, temos que habilitar essa opção, ficar na coluna. Vamos selecionar o segundo contêiner, em efeitos de movimento. Vamos escolher vamos ativar essa opção. Vamos selecionar o terceiro contêiner, efeitos de movimento, permanecer na coluna. OK. Agora, feche-o. Agora, quando você rola para baixo, parece muito bom. 14. Criando um efeito de papel rasgado: Oi, pessoal. Então, neste vídeo, faremos uma animação bacana com efeito de papel mergulhado Então, vamos começar. Efeito de papel mergulhado. Vamos clicar em Publicar. Clique nesta edição com o Elementor. Clique nesse ícone de desfoque. Estou usando essa estrutura de duas colunas. Primeiro, vamos fazer com que sua altura mínima seja de 200 VH. A partir daqui, a linha central de conteúdo justifica o centro de itens. Agora selecione esse contêiner do lado esquerdo. Estou aumentando sua largura para 40% em Avançado. Primeiro desvincule o preenchimento Do lado esquerdo, estou dando 10% de preenchimento. Agora, vamos selecionar esse contêiner do lado direito. A partir daqui, vamos fazer com que mude para 60%. Agora vamos voltar aqui. Clique no ícone de adição arrastando um conteúdo aqui. Na guia Estilo, fazendo cores, é preto. Não estou colando meu conteúdo porque nosso foco está em rasgar perfeitamente, não em decorar o texto Então, arrastando um editor de texto aqui, eu o alinho ao ícone central do LCONplus, arrastando um botão para dentro daqui, abaixo do estilo cor do texto, vamos torná-lo preto e transparente, fazendo zero e borda tipo sólido, cor do velejador ou a posição, vamos colocá-lo no eu o alinho ao ícone central do LCONplus, arrastando um botão para dentro daqui, abaixo do estilo cor do texto, vamos torná-lo preto e transparente, fazendo zero e borda tipo sólido, cor do velejador ou a posição, vamos colocá-lo no centro. OK. Agora, vamos para o lado direito. Clique no ícone de adição, arraste a imagem aqui, selecione a imagem e clique em Excluir Essa é a nossa imagem. Vá sob um alinhamento mais apertado. Vamos centralizá-lo fazendo 200% de altura, estou mantendo 400 pixels Objeto adequado para cobrir. Agora basta duplicar essa imagem. Vamos escolher nossa imagem rasgada, clicar em Selecionar, ir em Avançado, rolar para baixo. Aqui está a opção CSS personalizada. Vamos colar o código aqui, como você pode ver , está muito bom. Então, basta clicar em Publicar. Clique no ícone cibernético. Então, como você pode ver, isso parece muito bom. 15. Reveall conteúdo no scroll: Oi, eu. Então, hoje, vamos fazer uma animação de rolagem legal. Quando eu rolo a página para baixo, a imagem muda. Novas palavras aparecem no lado esquerdo e o fundo muda de cor. Então, vamos começar. Então eu dei um título aqui. Vamos publicar isso. Clique em Adicionar com comida. Vamos pegar uma seção de meios clicando neste ícone de adição. Do lado esquerdo, vamos criar o conteúdo com a largura de dobra e garantir que seja 100% Então, em Hora avançada, desvincule primeiro o preenchimento, clique no ícone de adição arraste um novo contêiner Do lado esquerdo, vamos chegar à caixa e vamos fazer com que mude para 1.200 pixels Da direção, vamos fazer remar. Em Sita, dê uma cor de Eu dei essa cor em tara avançada aqui, classe CSS Certifique-se de escrever todas as aulas com muita precisão. Clique na PlusCon arrastando um novo contêiner com 50% na classe CSS avançada Vamos escrever aqui, à esquerda. Abra o navegador. Estou renomeando esse contêiner como esquerdo. Feche o navegador agora. Clique em Pluscon, vamos arrastar um novo contêiner. Eu sei que existem muitos contêineres na classe CSS avançado. Clique no ícone de adição, arraste um novo contêiner, altura mínima. Vamos fazer cem VH. Justify Content Center, classe AdvantaBFSS, e eu colei aqui . Clique no ícone de adição. Agora é só arrastar o conteúdo. Estou arrastando um título aqui. Vá na guia Estilo, Cor branca, centro de alinhamento, clique no ícone de adição, arrastando um editor de texto aqui na guia Estilo, Cor Clique no ícone de adição. Vamos arrastar um botão aqui. Em estilo de alinhamento monótono, vamos chegar ao centro Cor, estou fazendo com que seja transparente, tipo velejador. Vamos dar uma cor ao branco. Não estou decorando com texto. Publique seu conteúdo. Clique em. Vamos fazer o centro de alinhamento do Editor. Ok, agora está feito. Minimize a guerra. Ok, está bom agora. Selecione esse título, vá em Avançado. Certifique-se de escrever a aula aqui. Caso contrário, não funcionará. Estou escrevendo aqui, Revel. Ok, agora está feito. Agora, vamos abrir o navegador. Essa é a nossa esquerda. Então, basta clicar com o botão direito do mouse e clicar nesta seção. Agora, selecione esse último contêiner. Estou escrevendo aqui, certo. Vá em Avançado a partir daqui, remova a classe CSS, selecione este contêiner, em layout. Vamos colocá-la em Avançado, remover a classe daqui Use o efeito de movimento a partir daqui, vamos torná-lo grudento na parte superior e manchar a coluna, ligá-lo Agora vamos entrar nesse contêiner em Avançado, remover a classe CSS daqui e adicionar aqui nossa nova classe CSS. Use o efeito de movimento a partir do adesivo, vamos selecionar a parte superior, a coluna de manchas e ativá-la Ok, agora está feito. Agora basta excluir o conteúdo do lado direito porque queremos adicionar aqui nossa imagem. Clique em publicado para que as alterações que fizemos, clique no ícone de adição adicione um novo contêiner. Estou desligando esse navegador. Vamos fazer com que a altura mínima seja de 600 pixels. Vá para a tag Avançado a partir do tipo de plano de fundo. Estou escolhendo a imagem aqui. Estou selecionando essa imagem. Clique em selecionar. Vamos fazer as configurações a partir daqui. Posicione, coloque-o no centro , fixe, role, repita até não repetir. tela. Vamos fazer com que cubra. Role para baixo. Aqui está uma seção de fronteira. Vamos dar uma borda de 40 pixels. Vá para a guia Avançado aqui, classe CSS. Desktop PhotoPosition Estou tornando isso absoluto, desça. Aqui está uma orientação vertical. Remova esse valor zero e faça isso em porcentagem. Ok, agora está feito. Clique no ícone de adição, pesquise o widget HTML e arraste-o para baixo Agora basta colar a seleção deste último continuador do lado esquerdo, clicar com o botão direito do mouse e duplicar, clicar botão direito do mouse e duplicar mais uma vez. Clique e duplique. Agora, como você pode ver agora, existem quatro seções um, dois, três e quatro. OK. Assim, basta duplicar do lado direito e clicar com o botão direito do mouse em duplicar Vá na guia Estilo, altere a imagem. Estou selecionando essa imagem. Clique em selecionar, com o botão direito, clique em duplicar. Vá na guia Estilo, altere a imagem. Clique em selecionar, clique com o botão direito e duplique. Na guia Estilo, vamos alterar a imagem. Estou selecionando essa imagem. Clique em Conselect. Agora é só publicar o conteúdo. Clique neste ícone do globo ocular. Agora, vamos ver a mágica. Então você pode ver esse lindo efeito. É incrível. Certo. Se você quiser alterar as cores do plano de fundo , como você pode mudar essa cor? Vamos ver isso. Agora volte, role para baixo. Aqui está nossa tag HTML. Você pode alterar as cores a partir daqui, como se fosse a primeira cor, segunda cor, a terceira, a quarta e assim por diante. Tipo, eu quero mudar a terceira cor. Então, eu estou escrevendo aqui o código cinco, a, quatro, oito, três e. Clique em público. Vamos ver as mudanças. Agora, quando eu rolo para baixo, como você pode ver, essa cor é alterada. Então, assim, você pode mudar a cor que quiser. Você pode mudar essas imagens, tudo o que puder. 16. Criando um efeito de carta mágica: Ei, pessoal, na briga em que vocês vão criar esse incrível cardifect mágico, vejam como essas cartas são legais com mudanças de cor mesmo quando você não está passando o mouse Parece tão bom. Então, vamos começar e ver como fazer essa mágica acontecer. Então, vamos começar agora, clique nisso adicionado com o botão Elemento. Agora estamos dentro do nosso construtor de páginas elementar. Vamos clicar no ícone de adição e eu vou pegar essa coluna de direção. Então, a partir da altura mínima, eu a mantenho em H. Estou mantendo sua altura mínima em 50 H e, dessa direção, estou mantendo-a como uma fileira. E a partir do conteúdo justificado, eu o mantenho como centro. Em alinhar itens, vamos mantê-los como centro. Então, vamos clicar no ícone Splur e eu estou arrastando um contêiner Vamos apenas duplicar esse contêiner secundário, clique com o botão direito do mouse e eu estou duplicando isso, vamos duplicá-lo mais uma vez Vamos selecionar essa seção média e vamos até a guia Estilo, mantendo-a em preto. Agora estou selecionando esse contêiner intermediário e vamos até a guia Avançado, mantendo o preenchimento como 20 Estou pegando mais um contêiner, então clique no ícone de adição e estou executando um contêiner aqui. Estou mantendo sua altura mínima em 400 pixels. Conteúdo justificado, estou mantendo-o como centro de itens da linha central, vamos até a guia de estilo, e estou mantendo a cor de fundo, igual à nossa seção média Então, eu o mantenho em preto, role para baixo e aqui está uma borda. Então, tipo de borda, estou mantendo-a sólida, estou atribuindo peso ao velejador e cor do velejador Estou escrevendo aqui nosso código de cores três c67e3. Seu raio de fronteira era cinco. Vamos clicar nesse estado de foco a partir do tipo de borda, estou mantendo-o como sólido, largura da borda, estou mantendo dois do boercolor, estou colando Ok. Então, agora, o raio da borda, eu o mantenho como cinco, da aquarela, estou mantendo-o transparente Agora vamos para Avançado. A partir daqui, estou mantendo o preenchimento como dez de todos os lados. Ok, agora é só minimizar e você pode ver que quando eu passo o mouse sobre ela , a cor da borda desaparece Então, vamos abrir o bar. E clique nesse ícone de adição. Estou arrastando um título aqui. Aqui estou mudando o título. Estou escrevendo aqui o cartão um. Vamos até a aba de estilo. Estou mantendo o alinhamento como centro, a cor do texto, estou mantendo o branco da tipografia, vamos manter o tamanho 35 Ok. Então, agora vamos clicar nesse ícone de adição. Estou arrastando um editor de texto aqui. Vamos entrar na aba de estilo. Estou mantendo o alinhamento como centro. Estou mantendo a cor do texto como essa cor da tipografia, estou mantendo o tamanho 15 Então, vamos clicar nesse ícone de adição. Estou arrastando um botão aqui. Vamos para a posição da etiqueta de estilo. Estou mantendo isso como centro da tipografia e não mudando nada porque nosso foco está em como criar o artefato mágico Não estou decorando muito isso. Vamos manter a transparência como zero. Ok. Então, agora estou escolhendo esse recipiente interno. Vamos até a tag Avançado, e aqui está uma opção de sS alfandegário. Estou colando meu código aqui, então estou selecionando esta seção de meios Vamos usar o Advancb e, a partir daqui, vou mantê-lo como Zendxl Vamos minimizar a barra. Quando eu passo o mouse, você pode ver esse lindo gradiente Agora vamos abrir o bar. Vamos usar o código CSS personalizado. Você não precisa aprender todo esse código. Agora vou te dizer quais variáveis você pode alterar. Aqui está a primeira cor. Então você pode mudar a cor de acordo com você, como aqui, se eu escrever aqui como azul. Então, quando você passa o mouse sobre ele, você pode ver essa cor azul Você pode mudar essa cor como se eu escrevesse aqui, laranja. Então, quando eu passo o mouse, você pode ver aqui essa cor laranja Ok, assim, você pode mudar essa terceira cor também, como se eu escrevesse aqui, vermelho. Então, quando eu passo o mouse sobre isso, essa cor vermelha está linda Então, assim, você pode mudar a cor de acordo com. Estou selecionando esse contêiner externo, clique com o botão direito e vamos duplicar isso, clique com o botão direito e vamos duplicar isso Então, vou deixar esse contêiner. Clique com o botão direito e exclua. Então você pode ver esse lindo artefato mágico. Quando estiver satisfeito com isso, você pode clicar neste botão Publicar. 17. Efeitos de pairar do Blur Zoom: Ei, pessoal, neste vídeo, vamos fazer um efeito super legal de zoom de sangue, então vocês verão uma carta ali parada com uma aparência muito bonita. Mas quando eu movo o mouse sobre uma das cartas, essa carta aumenta o zoom e as outras duas cartas diminuem o zoom e ficam parecidas. Vai ser incrível, então vamos começar. Então eu dei um título aqui, e vamos publicar isso. Clique em Adicionar com Alimenter Estou escolhendo uma nova seção. Este é o nosso recipiente para calças. Vamos pegar sua altura mínima de 200 VH da direção. Estou fazendo com que fique em linha, no centro e no centro. Clique neste ícone de adição, arraste o contêiner, da linha de direção, escolha centro e centro. Ok, clique em Este ícone de adição. Estou adicionando o novo contêiner aqui. Vamos duplicá-lo mais uma vez. OK. Agora estou selecionando esse contêiner intermediário. Vamos até uma guia de estilo e dê a ela uma cor de fundo. Estou escrevendo o código de cores aqui. FF 0000. Vamos até o link da guia Avançado para o ícone top 50, 20, bite e 20 con plus do título, arrastando um título Vamos dar um título a isso. Estou escrevendo aqui, cartão um na guia Estilo, centro de alinhamento, cor branca, tipografia Vamos fazer 800, aumentar seu tamanho. Vamos fazer 40, com o ícone plus, arrastando um editor de texto Na guia Estilo, vamos dar uma cor para branco, centro de alinhamento, o ícone Cplus, arrastando um Na guia de estilo, centro de posição, cor do texto, cor branca. Estou deixando isso muito transparente, minimize a barra. Eu quero fazer seu canto arredondado, então estou afrouxando esse contêiner na guia Estilo Vamos dar uma borda. Estou atribuindo o valor de dez, dando o raio da borda a dez Vamos até a guia Avançado. Aqui nas aulas de CSS, estou escrevendo aqui a caixa de cartão. Lembre-se de que esse texto deve ser o mesmo. Se você não escrever, o efeito Who não funcionará. Agora, vamos apenas duplicar esse contêiner. Estou excluindo esse contêiner. Este contêiner, vamos para a guia Avançado. Estou escrevendo aqui meu código CSS personalizado. Vamos colar aqui. Ok, agora, como você pode ver, quando eu passo o mouse sobre minhas cartas, as cartas estão aumentando e as outras duas cartas estão Quero que, ao passar o mouse sobre meu cartão , sua cor seja alterada. Então, vamos fazer isso. Vamos abrir o navegador a partir daqui. Estou selecionando a partir daqui. Este é o nosso recipiente externo. Então, eu quero selecionar esse cartão. Então eu selecionei esse contêiner do navegador. Vamos até a guia de estilo ao passar o mouse, vamos dar um código de cores aqui Agora, quando eu passo o mouse sobre meu primeiro cartão, ele fica azul Então, vamos colar esse efeito em outros dois contêineres. Então eu clico com o botão direito e copio aqui, o botão direito e colo o estilo, botão direito e colo o estilo. Agora, vamos fechar a barra quando eu passar o mouse sobre o meu cartão, pois você pode ver que a cor fica azul Então, vamos abrir o bar. Agora vamos entender o código aqui. Então, estou selecionando esse contêiner, abra o CSS personalizado. Aqui está um valor de Jumaane. Você pode alterar o valor aqui. Aqui está um valor de redução de zoom quando você altera, como se eu fizesse cinco, então, quando eu cubro meu cartão, as outras duas cartas são ampliadas Assim, você pode alterar o valor. Isso é tudo na confusão entre os próximos v 18. Efeito de traço de texto: Ei, pessoal, neste vídeo, vamos falar sobre essa animação super legal de traçado de texto. Parece incrível como o traço se move do lado esquerdo para o lado direito. Mal posso esperar para te mostrar como fazer isso, então vamos nos aprofundar. Faça essa edição com o Leaner. Agora estamos dentro do nosso construtor de páginas elementar. Vamos pegar um contêiner aqui. Altura mínima, estou mantendo-a em VH, 50 VH. A partir daqui, estou mantendo o conteúdo justificado como centro de itens da linha central. Vamos clicar nesse ícone de adição, arrastando uma cabeça. Estou mudando o título. Estou lhe dando um abraço. Vamos até a guia Estilo, centro de alinhamento, cor do texto, tipografia branca Estou mantendo seu tamanho em 100 em relação ao peso, estou mantendo 700. Estou escolhendo letras maiúsculas. Agora todas as letras estão em maiúsculas. Agora vamos nas guias avançadas, rolar para baixo, e aqui está uma opção de tese personalizada, e eu estou colando meu código Eu colei meu código aqui. Você pode ver essa animação de traçado de texto. Vamos embaixo do ladrilhador. Eu quero mudar essa cor branca, você pode fazer qualquer coisa. Você pode alterar qualquer cor dessa forma, mas estou mantendo-a como uma cor transparente. Então, agora isso está ótimo. Aqui, uma coisa é importante notar: você está mais restrito e o título e o texto do código devem ser os mesmos Se forem diferentes, não funcionará se você não entender o que estou dizendo, então agora vou dar um exemplo que estou mudando meu título aqui, como estou escrevendo aqui. Oi amigos. Ok, então vamos copiar isso. Vamos usar o código CSS personalizado abaixo do avançado . Você tem que colar este tema conforme você escreveu. Então, como você pode ver, agora nossa animação de traçado de texto está se bifurcando Agora, quando você estiver satisfeito com isso, basta clicar nesta publicação 19. Criando efeitos de camada 3D: Neste vídeo, criaremos um efeito interessante de três camadas D. Quando eu passar o mouse sobre a imagem, você verá uma bela camada, veja onde a primeira camada está totalmente visível com 100% de opacidade e cada camada depois disso desaparece gradualmente Esse efeito de três D parece incrível, então vamos mergulhar nele. Então, vamos começar nossos três efeitos Daler. Então, eu estou dando ao Titan aqui, três efeitos D Lear Vamos clicar em Publicar. Clique em Adicionar com Elementa. Vamos ver uma seção de meios aqui clicando no ícone de adição. Estou escolhendo essa estrutura de duas colunas. Então, vamos deixar esse recipiente do lado direito. Primeiro de tudo, vamos arrastar um conteúdo aqui. Estou fazendo isso rápido. Ok, então isso está feito. Agora vamos deixar esse recipiente do lado esquerdo. E vamos arrastar uma coluna para dentro disso. Clique no ícone de adição e estou arrastando o contêiner aqui Clique no ícone de adição e arraste Imagem. Escolha sua imagem aqui, clique em tapa. Então essa é a nossa imagem. Vamos falar com Si. Estou fazendo isso Estou fazendo isso com 200% de centro de alinhamento. Agora abra o navegador, botão direito do mouse e clique em duplicar Agora vá para Avançado a partir daqui. Vamos tornar sua posição absoluta. Agora, essa imagem está na nossa primeira imagem. Vamos duplicá-lo mais uma vez. OK. Agora há três imagens, mas não podemos ver. Não se preocupe. Agora, deixe esse contêiner, ok, e vá em Avançado aqui após seu código CSS personalizado. Ok, agora clique em Publicar. Vamos colocar esse conteúdo no centro. Então, estou selecionando este contêiner a partir daqui linha de centro de conteúdo justificado, centro de itens. Ok, agora é só publicar e clicar nesse ícone do globo ocular e ver as mudanças Agora, quando eu passo o mouse sobre a minha imagem, para que você possa ver o quão bonito ela dá ao efeito TDLar Então, agora vamos voltar, abrir o navegador. Estou selecionando esse contêiner e este é nosso código CSS personalizado. Aqui você pode alterar o valor da distância, como se você escrevesse aqui o valor 50, agora publique e veja a alteração. Quando eu passo o mouse sobre isso, como você pode ver, a distância foi aumentada em 50 pixels Assim, você pode ajustar os valores de acordo com você aqui. Eu vou voltar. Estou mantendo como 30. Clique em publicar 20. Efeito de Glass no Elementor: Oi, pessoal. Então, hoje, aprenderemos sobre o efeito de vidro. Então, eu estou dando o título aqui. Vamos clicar em Publicar. Clique em Adicionar com Elementor. Dê uma altura mínima de 200 Vg. A partir daqui, centro de conteúdo justificado, um centro de itens de linha. Going stylet. Estou escolhendo a imagem aqui. Clique em O Slet Vamos fazer alguns ajustes a partir daqui, posição para o centro central, fixação para rolar, repetir para não repetir, tamanho da tela, vamos fazer com que cubra. Então, agora nossa imagem está aparecendo assim. Clique no ícone de adição, arrastando mais um e arrastando esse contêiner Vá até a guia Avançado. Vamos dar um preenchimento da centena superior, do lado direito, 50, da centena inferior, do lado esquerdo, 50 OK. Clique no ícone de adição, arrastando um título Estou fazendo isso rápido porque você sabe como fazer isso. Ok, então isso está feito. Agora, vamos curtir este recipiente, passar por baixo da fita estilizada e, a partir daqui, vou transformando-a na cor branca. E estou diminuindo sua transparência para a esquerda. Isso é bom. Agora você pode ver o efeito de vidro, mas para dar uma sensação real, colaremos nosso código. Então, vamos em Avançado, cole o código CSS personalizado aqui. Comando. Estou colando meu código aqui. Agora você pode ver claramente o efeito de vidro. Isso é mais sangue agora. E quando estiver satisfeito, basta clicar em Publicar. Então esse efeito de vidro foi muito fácil. Espero que você tenha entendido muito bem. 21. Efeitos de Button Hover: Ei, pessoal, neste vídeo, vamos conferir o efeito muito legal de passar o mouse sobre o botão No início, você verá apenas um botão normal. Mas quando você passa o mouse sobre ela, algumas cores radiantes incríveis começam a mudar e ficam super bonitas Então, vamos começar e fazer essa animação incrível. Clique neste aduto com alimento. Vamos pegar uma seção principal. A partir da altura mínima, vamos mantê-lo como VH. Vamos manter o valor 50 do conteúdo justificado. Vamos mantê-lo como centro de itens da linha central. Na guia Estilo, manteremos sua cor de fundo preta neste ícone de adição, arrastando um botão na guia Estilo, vamos mantê-lo como cor transparente, posicionar, mantê-lo no centro, da tipografia Vamos manter 25 para que você possa ver claramente, não estou decorando o botão porque nosso foco é aprender a animação, não o design. Vamos entrar em Venda avançada e aqui colaremos nosso código CSS personalizado. Estou colando meu código aqui. Então, quando você termina de falar sobre isso, você pode ver isso bem superalimentado Então você pode mudar essas cores. Por exemplo, se você escrever aqui, você pode mudar essa cor como gradiente um, gradiente dois, grau em três, gradiente quatro, você pode mudar todas essas Então, se eu escrever aqui como vermelho, então você pode ver essas cores vermelhas. Então, quando eu falo sobre isso, essas cores estão mudando. Vamos verificar sua capacidade de resposta. Estou clicando neste tablet. Isso está ótimo aqui. Vamos clicar no celular. Aqui está mais uma coisa. Se você quiser fazer o efeito de brilho por aqui, você acha que quando eu passar o mouse sobre ele, aqui deve haver um efeito crescente. Então, como você pode fazer isso. Então, vamos abrir a barra e colar aqui. Agora minimize a barra e, quando eu passar o mouse sobre ela, você pode ver esse belo efeito brilhante Então, agora está pronto e clique no botão Publicar. 22. Primeiro site básico de contêiner: Oi, pessoal. Então, vamos criar nosso site agora. Então, primeiro de tudo, vamos instalá-los. Então, estou instalando o Astra TN. Vamos instalá-lo e ativá-lo. Estou excluindo esse tema de 2024. Agora vamos instalar nosso plugin, clique em Adicionar novo plug-in. Primeiro, instalaremos nosso plugin Elementor. Nosso segundo plugin será o element skit. Certifique-se de corrigir a ortografia, instalá-la e agora ativar Agora vamos criar nossas páginas. Clique em Adicionar nova página. Estou dando o título aqui em casa. Clique em publicar e publicar. Clique aqui, adicione-o com o animador. Então, vamos começar agora. Aqui o nome da nossa página está sendo exibido. Então, primeiro, acesse as configurações desta página e, a partir daqui, escolherei layout da página para elemento ou tela. Por que escolhi isso, explicarei mais tarde. Agora vamos fazer nosso site. Então clique no ícone de adição, e eu vou pegar a estrutura de duas colunas. Estou selecionando este contêiner do lado esquerdo. A partir daqui, vou escolher a direção da linha, clique no ícone de adição. Vou arrastar minha direção até aqui. Vamos desenhar isso a partir daqui, alinhamento à esquerda, cor do texto 044f7. Dei essa cor ao meu texto a partir da tipografia Eu vou escolher a fonte. Essa também é uma fonte muito boa. Vou mantê-lo molhado até 600. Ok. Vá em Avançado e role para baixo aqui estão os efeitos de movimento. Então, vou usar aqui a animação, então estou selecionando essa animação, diminuindo. Clique no ícone de adição, arrastando outro título abaixo desse título, alterando o título Vá para a guia de estilo a partir daqui, alinhamento à esquerda. Sob a cor do texto, estou mantendo sua cor preta sob a tipografia, família E o tamanho, vou dar para 73, vamos aumentá-lo. Ok, 74 é bom do peso para 700. Eu quero diminuir o espaço aqui. Então, para diminuir o espaço, aqui está a altura da linha. Vamos atribuir o valor a 85. Ok, então está tudo bem agora. Agora vamos na guia avançado desvincular a margem, desvincular a Agora veja aqui quando eu dou o valor negativo -20, então você pode ver aqui que o espaço é diminuído.Rolldown em efeitos de movimento, vou escolher aqui, vou escolher então você pode ver aqui que o espaço é diminuído.Rolldown em efeitos de movimento, vou escolher aqui, preencher a ovação à esquerda. Então você vê como nosso texto está vindo do lado esquerdo. Ao fazer seu trabalho, não se esqueça de publicá-lo repetidamente, clique no ícone de adição, arrastando um contêiner Conteúdo justificado para começar, alinhe os itens ao centro Clique no ícone de adição e eu estou arrastando um botão dentro dele Vá na guia de estilo da tipografia, escolhendo a fonte Cor do texto, branco, tipo de fundo até preto. Agora, passe a cor do texto para preto e o tipo de fundo para classificar a caneta. Agora, veja a mágica do meu botão quando eu passo o mouse sobre meu botão, como essa animação funciona Estou escolhendo entre tipo de borda, estou escolhendo sólido, largura da borda até dois, cor da borda, preto, raio da borda até dez Agora, você sabe, nossos cantos são arredondados. E a partir daqui, desvincule o preenchimento do lado superior, vamos dar 20 do lado direito, 30, 20 na 30 da esquerda. Ok. Agora minimize a barra e veja nosso botão. Clique no ícone de adição, arrastando um título aqui e colando o Na guia Estilo, alinhamento à cor esquerda do texto 43, quatro, três, quatro, três Na tipografia, família Helvetica, tamanho 20 do peso até 400, vá para avançado, role para baixo, e aqui está um movimento para diminuir a enervação à esquerda, depois Então esse é o nosso lado esquerdo. Eu quero esse botão e esse texto em uma linha. Então selecione este contêiner a partir daqui, eu vou escolher a direção para R. Eu quero esse botão clique aqui somente em uma linha. Então, vamos ajustá-lo. Então, primeiro de tudo, vamos selecionar isso e, a partir daqui, quero o texto depois e palavra que deve vir na próxima linha. Então, como podemos fazer isso? Usaremos aqui nossa guia HDMI. Quando usamos essa tag de quebra. Então, como você pode ver, agora nosso botão está corrigido. Agora vamos para o lado direito. Então, selecione este clique no ícone de adição. A partir daqui, arraste essa palavra da imagem. Agora escolha Imagem. Estou escolhendo isso. Clique em selecionar. Então essa é a nossa imagem. Resolução da imagem. Faça com que caia. De 200%, valor máximo de 200%, vá para avançado em efeitos de movimento, escolhemos aqui, fade Então, agora essa primeira seção está concluída. A partir disso, você pode ver a prévia do seu site. Então, vamos ver o quão bonita essa animação está funcionando. Mas eu quero esse texto no centro. Então, vamos voltar e, a partir daqui, selecionar esse contêiner e, a partir daqui, escolher o conteúdo justificado como centro. Então, agora clique em Publicar. Agora você pode ver que nosso conteúdo está no centro. 23. Segundo recipiente: Agora vamos começar nossa segunda seção. Então esse é o nosso contêiner. Estou dando um tapa nisso e, da largura, estou mantendo em 26% E, do ponto de vista, estou escolhendo alinhar o conteúdo justificado para centralizar os itens da linha até o centro. Clique no ícone de adição, arrastando a imagem para dentro dele Vamos escolher a imagem. Escolhendo este, clique em SletImagerSolution para alinhamento da guia de estilo que estou mantendo na largura central, vamos Arrastando um título aqui. Vamos mudar o texto. Acesse a guia de estilo, alinhamento à esquerda, cor do texto em preto, tipografia, peso até 400 e família escolhendo Vamos diminuir seu tamanho. Vamos manter seu tamanho em 18. Sim. Isso está bem agora. Minimize a barra. Mas essa imagem parece muito pequena. Então, estou selecionando essa imagem. Vamos aumentar sua largura. 60 está bem. Agora, vamos deixar esse contêiner na guia de estilo. A partir daqui, vamos escolher a borda. E do raio da borda, estou dando o valor 20, minimize a barra Não podemos ver a fronteira agora, mas não se preocupe. Agora vamos dar para box shadow, blinus para 20. Agora isso é mais sangue e valor separado -50. Agora minimize a barra. E agora você pode ver essa água clara. Vá abaixo de avançado, sob efeito de movimento. Vamos dar um efeito de animação de entrada, escolha aqui, fade na animação à esquerda Então, isso está ótimo. Agora, basta clicar com o botão direito do mouse e duplicar. Clique com o botão direito e duplique Eu dupliquei esse contêiner, e é por isso que a mesma animação também é aplicada aos outros contêineres é aplicada aos outros Então, vamos mudar isso. Vá para o nível avançado em efeitos de movimento. Aqui está desaparecendo à esquerda. Eu quero usar aqui. Se eu usar aqui, vamos continuar diminuindo. Sim. Veja este contêiner em avançado, aqui escolheremos o desvanecimento correto Sim. Agora publique seu conteúdo. Vamos ver a prévia. Sim. Você viu como toda essa animação está funcionando. Vamos atualizar isso mais uma vez, como você pode ver. Isso está parecendo realmente incrível. Eu não usei a animação no botão, então vamos fazer isso. Portanto, selecionar o botão aqui em efeitos de movimento, se eu continuar assim, é bom usar a animação à esquerda Então publique isso e vamos conferir aqui. Sim, como você pode ver como isso está lindo. Então, vamos mais longe. Clique no ícone de adição. Quero adicionar um título aqui. Então, em vez de usar um widget de cabeçalho, vou apenas duplicá-lo corretamente, clicar e duplicar vou apenas duplicá-lo corretamente, clicar e Então, vou levá-lo até aqui. Sim. Agora, primeiro de tudo, vamos mudar o conteúdo. Mas eu não quero essa animação aqui. Então, primeiro de tudo, vamos remover as animações. Vá em Avançado em Efeitos de movimento. Escolha entre nenhuma. Sim. Vá na guia Estilo. Eu quero diminuir seu tamanho. Então, aqui estou mantendo 60. Eu não quero atribuir isso à altura da linha, então vamos deletar isso. Esse conteúdo não está organizado, certo? A partir do alinhamento, vamos escolhê-lo para centralizar. Sim, agora nosso conteúdo está no centro, B, o contêiner principal, em Avançado, desvincule a margem e, do lado superior, estou dando a margem 80 Sim. Agora isso parece perfeito. Agora, clique no ícone de adição, arrastando um editor de texto Vá em etiqueta de estilo, alinhamento com Santo e código de cor 434343 Tipografia Helvetica. Não vou exagerar porque está tudo bem. OK. Então, agora isso está ótimo. Estou arrastando um widget de vídeo aqui. A partir daqui, você pode escolher qualquer fonte. Estou escolhendo o YouTube. Estou colando o link. Role para baixo e, a partir daqui, se quiser que seu vídeo seja reproduzido automaticamente, ative-o, reproduza no celular e pegue-o Você pode fazer essas alterações de acordo com você, como você pode ver agora nosso vídeo, agora clique em Publicar. Ok, então isso está feito agora. Agora, clique no ícone de adição. Clique no ícone de adição. Vamos arrastar um título aqui, alterar o título, ir até aba de estilo, alinhamento ao centro, cor do texto para preto da tipografia, Albatica Mas isso é menor, mas esse peso é menor, então vamos mantê-lo em 600. Sim, está tudo bem. Clique no ícone de adição e pesquise o widget Lobo. Portanto, esse widget vem do nosso plug-in infantil de elementos. Então, vamos arrastar isso do estilo do slide, vamos escolher aqui muito simples, vá abaixo do título. Portanto, exclua o nome do cliente e escolha suas imagens. Vamos selecionar os logotipos do nome do cliente, remover isso, escolher a imagem. Selecione em Título três, remova o nome do cliente Então, assim, você pode colocar todo o título que você tem. Agora, todos os logotipos estão aparecendo aqui. Agora vá para as configurações. Você pode colocar o valor do espaçamento da esquerda para a direita. Slide para mostrar, teremos cinco logotipos, então vou manter aqui o valor como cinco. Deslize para rolar, quantas vezes você deseja rolar seus logotipos, você pode colocar isso na reprodução automática, seus logotipos se moverão automaticamente, então habilite esta opção Estou habilitando isso, para que você possa escolher a velocidade. Não quero que, ao passar o mouse sobre isso, os logotipos parem de se mover, então estou desativando isso e ativando esse Ok, vá com estilo aqui. Aqui, a altura desses logotipos é muito grande. Então, a partir daqui, você pode escolher sua altura, mas estou mantendo-a como zero. Vá na opção de logotipos. Eu não quero fazer nada com isso. Vamos continuar. Aqui, eu quero adicionar uma cor. Vamos dar uma cor. Eu quero a cor clara. Ainda assim, isso é demais, então estou diminuindo sua transparência Sim, está tudo bem, eu acho. Vou manter essa cor, minimizá-la. Passamos o mouse sobre. Então, sim, essa cor clara está bonita. Agora, basta publicar isso e vamos ver nossa prévia. Então veja isso. Quão linda está essa aparência? 24. Terceiro contanier: Então, vamos começar nossa próxima seção, clique no ícone de adição. Estou escolhendo essa estrutura de duas colunas. Em primeiro lugar, vamos usar a aba Estilo porque quero dar a ela uma cor de fundo a partir daqui, escrevendo o código de cor 4f4f5 Eu dei essa cor clara ao fundo. E como você pode ver aqui, não há espaço entre esse contêiner e esses logotipos. Então, vamos em Avançar, desvincular a margem. Do lado superior, estou adicionando o valor cem Sim, esse espaço é suficiente. Vá abaixo do layout e vamos dar a ele uma altura mínima. Nós o gerenciaremos mais tarde, se quisermos mais espaço. Então, depois disso, aumentaremos o valor. Agora, selecione esse contêiner. Agora vamos arrastar o conteúdo. Então clique no ícone de adição. A partir daqui, arraste o título, alterando o título. Vá em alinhamento de estilo para a esquerda. A cor do texto também, estou dando para a cor azul. Então, vamos escrever o código 044f7 sob tipografia Tamanho 14. E eu quero adicionar um espaço aqui. Vamos atribuí-lo ao valor de 1,5 pixel. Sim, está bem. Quero adicionar outro título. Podemos fazer uma coisa aqui. Assim como, clique com o botão direito do mouse e copie, clique com o botão direito e cole. Então, agora vamos escrever o conteúdo. Reduza o alinhamento do estilete para menos e, a partir daqui, famílias, vou manter o tamanho da fonte 238 e o peso 700 Então isso está feito. Agora, vamos arrastar um widget de editor de texto. Então, vamos corrigi-lo da cor do texto, tornando-o preto sob tipografia, fonte alvetica Ok, então isso está feito. Agora eu quero adicionar dois botões aqui. Então, vamos copiá-los, clicar botão direito do mouse e copiar e clicar com o botão direito do mouse e colar isso aqui. Mas antes de tudo, quero deletar as animações aqui. Portanto, selecione esse botão em Fatos de movimento avançados e mantenha-o em zero. Portanto, a animação é removida do botão. Eu não quero essa mensagem. Então, basta clicar e excluir isso. Eu quero mais um botão, então clique com o botão direito e duplique isso Então, vamos projetar isso, mudar o mais apertado. Aqui, eu quero escrevê-lo. Agora, selecione este botão, altere o mais apertado, saiba mais OK. Vá até a guia Estilo. Eu quero fazer algumas mudanças. Então, na condição normal, texto em carvão, eu quero preto e, a partir do tipo de fundo, estou mantendo-o muito transparente. E ao passar o mouse, cor do texto, eu quero branco e cor eu quero preto Então, agora, quando eu passo o mouse sobre isso, ok, isso está bonito agora Agora, os dois padrões estão bonitos. Então, a seção esquerda está pronta agora. Clique no ícone de adição, adicione o widget de imagem e escolha sua imagem Clique em Selecionar. Então essa é a nossa imagem. Resolução máxima 24 em Style tape, estou mantendo o valor de 200% O valor máximo é de 200 e a altura é de 500 objetos para cobrir. Agora toda essa seção está pronta. Agora vamos criar nossa próxima seção. Eu quero te dizer uma coisa. Em vez de criar uma nova seção, podemos facilmente fazer uma coisa. O que podemos fazer é clicar com o botão direito do mouse nesta seção e duplicá-la. OK. Faremos exatamente as mudanças. Agora vamos apenas mudar nosso conteúdo e esta seção será feita. Primeiro de tudo, eu não quero essa lacuna. Então, clique com o botão direito aqui e vá para a guia Avançado a partir daqui, exclua a margem da parte superior. Agora precisamos apenas alterar a guia Go Under Style. Quero todo o texto em letras maiúsculas então, a partir de transformar, estou selecionando maiúsculas Eu quero aqui apenas um botão, então eu estou deletando esse botão Queremos apenas um botão, então é por isso que não precisamos continuar. Então, basta arrastar esse contêiner dentro dele, clicar com o botão direito do mouse e excluir esse contêiner. Ok, há muito espaço. Então, eu quero diminuir esse espaço. Então, vamos selecionar esse contêiner. Estou mantendo o valor da diferença como cinco. Parece ótimo, mas há muito espaço, selecione o botão, vá na guia Avançado e desvincule a margem E a partir daqui, vamos dar uma margem de -20. Então, eu quero esse conteúdo no centro. Então, assim como esse contêiner, a partir daqui, o conteúdo justificado é centralizado. Sim, isso é bom agora, e agora é só mudar sua imagem. Quero adicionar aqui esta imagem, com seleção. Sim. Agora, toda essa seção está pronta. Eu quero essa seção direita para o lado esquerdo e essa seção esquerda, eu quero ela para o lado direito. Então, como podemos fazer isso? Então, basta este contêiner, vá em Avançado e aqui está uma opção de pedido Então, basta selecioná-lo no início. Então veja isso com que facilidade e rapidez criamos esta seção. Agora, basta clicar e publicar. Assim, também podemos criar nossa próxima seção. Então, vamos fazer isso. Nossa próxima seção é semelhante a esta seção, porque eu também quero curtir esse título, esses dois botões e a imagem no lado direito e esse conteúdo no lado esquerdo. Então, vamos apenas copiar esse contêiner. Então, clique com o botão direito e copie, basta clicar com o botão direito e colar. Então, como você pode ver, agora, primeiro de tudo, eu não quero esse espaço. Então, vamos fazer isso rápido. Precisamos apenas mudar o conteúdo e a imagem. Então, agora eu não preciso explicar nada porque você entendeu agora. Para que esta seção também esteja pronta, basta publicar seu conteúdo. Para que esta seção também esteja pronta, basta publicar seu conteúdo. Ok, então, como você pode ver, agora fizemos nossas três seções, mas eu esqueci de aplicar aqui animações em imagens Então, vamos fazer isso. Então eu selecionei esta imagem em Avançado, role para baixo a partir daqui efeitos de movimento. Vamos usar aqui, a moda na animação certa. Vamos selecionar essa imagem. Em efeitos de movimento, usarei aqui fade in left animation, e aqui vou escolher fade Certo. Sim. Agora publique-o. 25. Quarto contêiner: Vamos fazer nossa próxima seção agora. Clique no ícone de adição. Vamos selecionar essa estrutura. Quero adicionar um título. Então, em vez de pegar um novo widget, basta clicar com o botão direito e copiá-lo, clicar botão direito do mouse e colar isso, altere o conteúdo Clique com o botão direito e copie. Clique com o botão direito e cole. Mude o conteúdo. Aqui eu também quero adicionar um título. Então, basta clicar com o botão direito do mouse e copiar aqui, colar. Basta publicar seu conteúdo. Quero adicionar um espaço aqui. Então, vamos adiantar. Do lado superior, se eu der o preenchimento, vamos manter seu valor como 60 Sim, 60 está bem. Eu quero diminuir o espaço aqui também, então selecione este contêiner. A partir daqui, estou mantendo o valor da palavra zero. Sim, isso é agora. Quero fazer todo o conteúdo nos centros. Portanto, selecione esse contêiner principal em layout. A partir daqui, vou colocar os itens de linha no centro. Sim, agora é só publicar. Vamos fazer nossa próxima seção, clique no ícone de adição. Escolhendo essa estrutura, clique no ícone de adição. Quero adicionar uma imagem aqui, então escolha sua imagem. Estou adicionando essa foto aqui. Clique em selecionar. Sim. Então essa imagem está aqui. Isso é muito grande. Estou mantendo a resolução da imagem. Tão grande porque se eu a mantiver cheia, o tamanho dessa imagem aumentará muito, então vou mantê-la muito grande. Sim, está tudo bem. Vá para a mesa de estadia. Eu quero tornar sua esquina mais redonda. Então, vamos atribuí-lo ao raio da borda de 20 pixels. Sim. Agora, os cantos são arredondados. Vamos dar para Box Shadow aqui. Aqui, a sombra da caixa é adicionada. Desfoque até dez. Clique em Publicar. Esta seção também está pronta. Selecione seu contêiner principal. Eu quero dar um histórico aqui também. Então vá em Iniciar. Vamos escrever o código aqui. Escreva o código aqui. Quatro F quatro, F três. Aqui, esqueço de adicionar o plano de fundo nesta seção. Então, vamos adicionar isso aqui também. Agora as duas seções estão prontas, selecione esse contêiner e vá para o layout. A partir daqui, altura mínima, vou mantê-la assim. Vamos reduzi-lo a seis, 50 conteúdos justificados, colocá-lo no centro e enviá-lo. Agora nossa imagem está perfeita. Clique em publicar. Agora vamos mais longe. Clique no ícone de adição, Flexbox, escolhendo este, vá para a tag Avançado Eu quero dar uma margem aqui, então estou mantendo o valor 80. Vamos ver isso. Sim, está tudo bem. O valor da margem é 80 nos lados superiores. Ok, clique no ícone de adição. Então, estou selecionando a cópia. Copie isso, provando o conteúdo. Aqui, eu quero que o texto depois se mova em direção a isso apareça na próxima linha. Então, para fazer isso, eu estou usando aqui a aba de quebra. Então, siga o alinhamento da punhalada até o centro. Eu quero aumentar o tamanho. Vamos dar para 48, e eu quero dar a altura da linha aqui. Então, vamos manter em 50. Sim. Vamos duplicar esse widget de texto, clicar com o botão direito do mouse e copiar, clicar direito do mouse e colar Vamos mantê-lo no centro para alinhamento entre o estilo Agora clique no ícone de adição, arrastando um contêiner da direção, estou fazendo com que ele fique em linha e do conteúdo justificado para o centro Clique no ícone de adição e arraste um novo contêiner aqui e simplesmente duplique-o. Quero estilizar este contêiner, vá em Estilo, toque em Estilo Vou entregá-lo para Batter, raio 30. Do tipo Ber, estou escolhendo o sólido. Vamos dar uma aquarela. Eu dou água leve. Está bem? Agora, dentro desse contêiner, quero adicionar a seção de depoimentos Está bem? Então, vamos procurar depoimentos e eu escolherei esta seção de depoimentos Aqui, cole nosso conteúdo. A partir daqui, estou escolhendo a imagem. Vamos escolher essa imagem. Alterar o nome Você pode escolher a posição da imagem se quiser na parte superior, para que esta imagem fique aqui, mas estou mantendo-a de lado e você pode escolher o alinhamento desta forma Estou mantendo-o à esquerda na guia Estilo. Antes de tudo, vamos mudar a cor do texto para preto. Em tipografia, família, estou escolhendo Helvetica, o tamanho que estou dando para 20, o peso é 400, ok peso OK. Abra esta seção de imagens. A partir daqui, você pode escolher a resolução da imagem dessa forma, então vou mantê-la em 70. Vamos escolher um tipo de borda para sólido como esse. Você pode ajustar a largura da borda, a aquarela, raio da borda, tudo o que você pode fazer a partir daqui E o próximo é o nome. Escolha a cor do texto preta. Tipografia A partir disso, estou escolhendo o telefone Helvetica. Agora vamos dar a ele uma cor de texto 888 e oito. OK. Agora basta fechar isso e ver que está lindo, mas eu quero fazer mais uma coisa, selecionar este contêiner, ir em Avançado, desvincular o preenchimento Do lado superior, eu estou adicionando 20 valores, abaixo 25, lado esquerdo 30. Do lado esquerdo, vou guardar dez. Basta clicar com o botão direito do mouse e duplicar esta seção e excluir esta Então, essas duas seções estão prontas. Basta alterar o conteúdo. Você pode alterar todos esses nomes a partir daqui, toda a designação. Como qualquer coisa que você possa mudar. Agora, basta clicar com o botão direito do mouse e duplicar toda a seção. E aqui vamos apenas mudar nosso conteúdo. Portanto, essas quatro seções também estão prontas com muita facilidade. Agora publique esta seção inteira. Ok, então agora tudo está feito. Agora, vamos aplicar as animações em todas as quatro seções, como este contêiner em efeitos de movimento Vamos usar aqui o ajuste na animação à esquerda. Para este contêiner, escolherei encaixar na animação correta. 26. Quinto recipiente: Então, vamos criar uma nova seção. Estou escolhendo essa estrutura a partir daqui, contato justificado com os itens da linha central para o centro. Vou elevar sua altura mínima para 600, passar para avançado a partir do tipo de plano de fundo. Quero adicionar um plano de fundo aqui. Então eu selecionei essa imagem. Vamos fazer algumas configurações a partir daqui. Anexo para rolar, repetir, sem repetir, tamanho da tela para cobrir. Agora clique no ícone de adição e arraste um contêiner. Da direção, vamos mantê-la sob controle e do conteúdo justificado para o centro. E manteremos sua altura mínima em 350. Vamos ajustá-lo mais tarde se você quiser mais espaço. Clique no ícone de adição, arraste mais um contêiner, clique com o botão direito e duplique Então, primeiro de tudo, estou selecionando este recipiente do lado esquerdo a partir daqui. Conteúdo justificado, vamos mantê-lo centralizado e alinhar os itens ao centro Estou selecionando este contêiner em Estilo de tara. Quero adicionar uma cor de fundo aqui, preta, e vamos dar uma borda a ela. Estou dando 50 minimizações. Sim, agora isso está ótimo. Agora, vamos deixar esse contêiner do lado esquerdo clicar no ícone de adição. Vamos copiar o widget do título, clique com o botão direito do mouse e copie, clique o botão direito do mouse e cole Vá até a guia Estilo. Primeiro de tudo, vamos alterar o texto para que possamos ver as mudanças. Agora, alinhamento, estou indo para a esquerda e, em conteúdo, quero essa palavra de experiências na próxima linha Então, estou usando aqui nossa guia de pausa, vá na guia Estilo. Aqui estou, daqui, vou manter o tamanho em 47 e nós 600. Agora clique no ícone de adição, alterando o texto. Colei este texto aqui em alinhamento de tipo de estilo à esquerda da cor do texto, mudei a cor para 838, 38 de tipografia, família, Eu mantenho a mesma fonte 19, eu fiz o tamanho da fonte. Quero adicionar um botão aqui, então vou copiar esse botão, escrever e copiar. Vamos apenas colá-lo aqui. Em primeiro lugar, estou mudando o título, fale conosco hoje na guia de estilo. Primeiro de tudo, vamos fazer com que seja colorido em branco para que possamos ver as mudanças. Então, a partir daqui, vamos chegar a 17 aqui. E a cor de fundo, estou mantendo-a em branco. Ok, agora podemos tornar o texto colorido em preto. No Oper, quero adicionar uma cor de água ao branco. Quando eu penso nisso, isso é lindo, certo? Agora publique seu conteúdo. Ok, agora vamos fazer algumas mudanças com esse botão. Ao selecionar esse contêiner. A partir de conteúdo justificado, estou fazendo com que os itens da linha central sejam centralizados. Agora isso está parecido com isso. Eu quero esse botão nesta posição. Então, vamos fazer isso. Estou selecionando meu contêiner principal e, a partir daqui, dos itens de linha, vou apenas remover. Agora, esse botão está aqui. Agora vou dar o preenchimento, então desvincule o E do lado de cima, estou chegando aos 45. Vamos minimizar. Sim, agora está tudo bem. Ok, então eu vou fazer assim. Agora eu quero esse conteúdo no centro. Então, para fazer isso, selecionarei esse contêiner. Vou manter sua altura mínima em 55. Agora nosso título está no centro, mas esse editor de texto não está, então vou selecionar isso em Avançado, desvincular o preenchimento Aqui, vou dar o acolchoamento do lado esquerdo. Então, agora nosso editor de texto está bom. Minimize a barra e diga isso. Agora isso é ótimo. Então, agora publique isso. Portanto, esta seção também está pronta. Abra a barra, clique em publicar. Agora faremos nossa última seção. Então, vamos fazer isso rápido. Então, a partir daqui, primeiro de tudo, eu quero adicionar aqui a margem. Portanto, este é o nosso pagamento e contêiner, vá em Etapa Avançada. A partir daqui, quero adicionar um espaço na parte superior. Eu quero dar uma margem do lado superior. Então eu dei 100. Clique no ícone de adição, arrastando seu widget de título Junte-se aos nossos boletins mensais. Para receber as últimas notícias. Na guia Estilo, posicione no centro, a cor do texto em preto. Fonte tipográfica aqui, escolha al tica Se eu chegar a 25, 25 está tudo O Cplus pode arrastar um editor de texto aqui. Vamos mudar o texto. Sem Sam, alinhamento de estilo ao centro, cor do texto em preto da fonte tipográfica Helvetica, peso OK. Agora, clique no ícone de adição. Vamos adicionar um contêiner aqui na direção, escolhendo a linha, clicando no ícone de adição, arrastando o contêiner, clicando com o botão direito e duplicando, clicando com o botão direito e duplicando, clicando com o botão direito e duplicando botão direito Então, eu pego aqui quatro seções. Então, aqui, vamos selecionar esta, adicionar nossa imagem aqui. Grande demais, escolha sua imagem. Vá em alinhamento de estilo para a esquerda. Vamos fazer com que sejam dois. 22 está bem. Então, com este logotipo com esta imagem, eu quero escrever aqui o texto dois. Então, clique no ícone de adição e adicione seu widget de título aqui. Então, primeiro de tudo, mude o título. Texto colorido a preto sob a tipografia encontrado no tamanho 25. Agora eu quero esse título com essa imagem. Então selecione esse contêiner e, a partir daqui, direção, escolha a linha. Agora, aqui está muito espaço. Primeiro de tudo, eu quero uma lacuna aqui como zero. Então selecione este título agora em avançado Aqui vou adicionar margem, desvincular a margem, e vou dar aqui a margem do lado esquerdo, 100 e agora selecionar esta imagem Vamos aumentar seu tamanho para 26. Sim, agora minimize isso e acho que isso é bom. Agora, dentro desta continuação, adicionaremos nosso texto. Clique no ícone de adição, um título. Vamos dar o título aqui à empresa sob o estilo alinhamento da fita à esquerda, a cor do texto a preto Família Helvetica e tamanho, vou dar para 18 Em vez de criar um novo título repetidamente, vamos apenas duplicá-lo e fazer nossas alterações Então, aqui vou escrever sobre nós, em tipo de estilo, vou colar meu casaco. Eu faço com que fique menos branco. Então, na tipografia, darei o tamanho 18, mas em termos de peso, vou mantê-lo Sim. Agora, isso é, mas eu quero manter o tamanho em 19. Agora vamos copiar isso, clicar botão direito do mouse e duplicar, clicar botão direito e duplicar Sim. Basta alterar o preço do conteúdo agora, aqui, conteúdo. Então, agora esta seção está pronta. Agora vamos clicar com o botão direito do mouse e duplicar isso, clicar com o botão direito e duplicar Então, vou atrasar esses contêineres. Agora vou agir rápido a partir daqui porque vou apenas alterar o conteúdo. Vamos dar o valor aqui para 50. Vamos dar 50 aqui. Vamos dar 50 aqui. Agora, todo o nosso site é Mt. Agora vamos ver a prévia. Como você pode ver como essas lindas animações estão funcionando E como nossas imagens estão vindo do lado esquerdo e direito. Eu 27. Cabeçalho e rodapé: Vamos começar e criar nosso cabeçalho. Clique aqui. Aqui, vou escolher essa estrutura neste contêiner e quero mantê-la em 20% na direção estou escolhendo alinhar o conteúdo justificado até o centro do item da linha central. Clique no ícone de adição e adicione sua imagem. Estou selecionando esse logotipo. Sob o alinhamento do estilete à esquerda, W 227 mais ícone Estou adicionando agora um widget aqui, correto para seu título, solar Em estilo, texto, cor dois, preto, e tipografia, aqui está o tamanho halítico que estou Agora, em avançado, desvincule a margem, a margem do lado esquerdo -120 Ei, agora está tudo bem, então clique em minimizá-lo público e veja. Sim, isso é legal. Agora clique neste logotipo elementar e aqui está a saída para as opções do Wordpress Então, clique com o botão direito e eu estou abrindo isso em uma nova guia. Ele será redirecionado para o painel de administração. Agora vamos fazer nossos menus. Então, da aparência, vá para os menus. Aqui, dê o nome do seu menu. Você pode dar qualquer nome, como Estou escrevendo o menu principal, local de exibição, escolher o menu principal e clicar em Criar menu. Agora abra esses links personalizados. Aqui você deve colar o URL de cada seção. Quantos menus você deseja, cole o URL aqui. Então, como se eu estivesse escrevendo aqui, em casa, texto do link. Vamos escrever aqui em casa. Clique em Adicionar ao menu sobre Vincular o texto ao menu Sobre. Clique em Atoman. Agora aqui você pode ver seus menus. Clique no menu Salvar. Agora vamos voltar ao soldador do site Elementor. Em primeiro lugar, recarregue seu site agora. Pesquise aqui o menu de navegação do widget. Arraste isso. Agora, aqui está um menu de seleção, a partir daqui, selecione o menu médio. Então veja esse menu que fizemos agora e que é mostrado aqui. E aqui está uma posição horizontal do menu. Não vou manter isso no centro. Agora, como você pode ver, agora nossos menus estão no centro. Não mudaremos nada a partir daqui, use o estilo agora e, a partir daqui, você poderá ajustar a altura do menu. Estou mantendo em 50. Role para baixo. Não vamos mudar nada. Abra o estilo do item de menu. Se você quiser mudar alguma coisa, você pode fazer. Está bem? Aqui está um estilo de item de menu. Então abra a tipografia, escolha a família. O que estou fazendo aqui, você pode ver as mudanças no menu de navegação. Está bem? Fonte So Vatica Eu escolho o tamanho. Vamos manter em 70 para ver como eu quero que seja azul. Então, vamos escrever o código. 044f em sete, vamos torná-lo mais azul. Agora, quando eu passo o mouse sobre isso, vejo como a cor está mudando Nossos menus são criados. Agora eu quero adicionar aqui dois botões. Então, vamos apenas duplicar esses botões a partir daqui. Clique com o botão direito, copie e cole assim, basta clicar com o botão direito e copiar e clicar com o botão direito do mouse e pressionar este botão aqui. Antes de tudo, vamos alterar o conteúdo aqui, fazer login e aqui vou escrever para começar, publicar e ver. Não há espaço, então vamos verificar nosso contêiner principal. As lacunas aqui são zero, então vamos aumentá-las. Estou chegando aos 20. Sim. Agora, o espaço também está ótimo. Nosso cabeçalho foi criado. E você pode ver como esse cabeçalho está lindo. Agora eu quero fazer uma coisa aqui. exemplo, quando clico neste serviço, quero que ele redirecione para mim essa seção Então, vamos fazer essa coisa. Então, para fazer isso, eu quero adicionar esta página inicial , mas vá para esta seção, selecione esta opção avançada. Aqui temos que escrever o ID CSS para isso. Você deve copiá-lo desse ID CSS. Temos que copiar esse ID CSS daqui. Comando S, não copie esse hash. E cole aqui. Publique isso. Agora, nesta seção, preencha este ID do VSS aqui, abra isso e copie isso Cole aqui. Agora seção de serviços. Agora, publique isso e veja a prévia. Sim, primeiro, você vê como nosso site está muito bom. Então, vamos ver se esses homens estão trabalhando. Quando eu clico em home. Sim, quando eu clico em sobre, ele chega até mim nessas seções. Quando eu clico nas avaliações, para que você possa ver. Então, vamos voltar. Clique neste ícone de adição. Eu vou escolher esta seção. Altura mínima, estou mantendo-a em 120 e direção para a linha. Conteúdo justificado, inicie um centro de itens de linha. Agora, clique no ícone de adição e arrastarei um contêiner aqui, e a largura desse contêiner será 70 e a direção da linha. Basta dividir o conteúdo no centro. Clique no ícone de adição. Vamos arrastar sobre o título. Aqui, vou escrever meu texto 2024 solar one. Vá até a aba Si. Vamos escrever o código de cores e abrir a tipografia, escolher a família, até 400 Espaço para letras. Estou dando para um, duplique isso e mude o título Duplique-o. E aqui, eu quero adicionar aqui alguns ícones sociais. Então, para clicar no ícone de adição, adicione o contêiner e eu estou mantendo a largura desse contêiner como 30. Só para adicionar conteúdo para começar. Clique no ícone de adição, pesquise os ícones sociais do Widget e eu estou escolhendo esses ícones sociais simples Estou chegando à direita ali. Cor oficial Estou escolhendo para cor personalizada e primária Estou tornando-a transparente e secundária, estou fazendo com que seja preta. Espero que você entenda sobre a arandela primária e o tamanho Estou chegando a 20 e espaçando o raio de cinco bordas, estou chegando Agora abra o ícone da cor primária, vou escolher a cor azul, escrevendo o código para isso. E cor secundária, vamos torná-la branca. E passe o mouse sobre a animação, estou fazendo com que chegue aos colegas. Agora, quando eu passo o mouse sobre meus ícones, você pode ver esse lindo efeito Agora publique isso e vamos ver nossa prévia. Todo o nosso site está feito agora. Agora, quando eu passo o mouse sobre isso, como eles estão lindos. 28. Responsivo: Agora, tornaremos nosso site tablet responsivo. Então, para isso, precisamos clicar aqui. Como você pode ver, nosso site está exibindo um retrato de tablet como este. Então, vamos projetar isso. Diminuiremos o tamanho desse cabeçalho. Então, para fazer isso, vá na guia Estilo e, a partir daqui, vamos mantê-la até 45 Então 45 está bem. Então, agora selecione nosso botão. Na guia Estilo, ajustaremos o preenchimento aqui. Chegaremos a dez de cima, 20 da direita, dez de baixo e 20 do lado esquerdo. Vamos fazer com que seja assim. E para esse título, aqui removeremos nossa etiqueta de quebra. Sim, está tudo bem agora. Nesta imagem, aumentaremos a largura para 75 e a largura máxima para 200% Agora, vamos aumentar a diferença aqui. Aqui, eu quero mantê-lo em uma lacuna de 20, 20 pixels, está bem. Vamos ajustar nossa imagem sob a tag de estilo aqui, vamos aumentar seu tamanho para 100%, mas 100%, eu acho que é maior, então vamos chegar a 90. Clique com o botão direito do mouse e copie e cole o estilo e cole. Vamos tornar isso menor. Então, aqui vou manter seu tamanho para sustentar. Sim. Então, vamos copiar e clicar com o botão direito do mouse, colar, clicar com o botão direito do mouse e colar, tente Está tudo bem, sim. Isso também é. Esses logotipos também parecem bons, como este título na guia de estilo aqui, vamos aumentar seu tamanho para 35. Sim. Outras coisas estão bem. Eu não vou mudá-los. Vou mudar as imagens. Aqui, mudaremos sua altura para 300. Ok, está tudo bem. E a partir daqui, escolha a capa. Aqui, há muito espaço, então vou diminuir isso, selecionar isso e vou mantê-lo 400 minimizados. Agora esse espaço, acho que ainda há muito espaço, então vou mantê-lo em 350 Feche isso e veja, agora está tudo bem. Agora selecione essa imagem na guia Estilo. Aqui eu vou chegar a 300. Agora selecione esse título na guia Estilo. Vou fazer com que seja do tamanho 35. Agora selecione este conteúdo. Eu quero essa imagem no centro. Portanto, justifique o conteúdo para centralizar e alinhar os itens ao centro. Sim. Agora feche isso. E sim, isso está parecendo bom. Mude esse título, diminua esse título também, mas ele é muito grande. Sim. Aqui, vou manter o tamanho 31, e para essa imagem, vou chegar a 300. Selecione esse contêiner e o conteúdo justificado para centralizar. Agora, feche a barra, mas há muito espaço na parte superior e inferior. Portanto, selecione esse contêiner. A partir daqui, vou mantê-la alta para 370. Você pode ajustá-lo de acordo com você, mas estou apenas dando uma ideia de que o que você pode mudar, esqueço de lhe dizer uma coisa. Você pode simplesmente mudar essas coisas somente onde esse sinal está aparecendo. Se esse sinal não estiver aparecendo, significa que você não pode alterar essa propriedade no tablet ou dispositivo móvel. Então, a partir daqui, vou manter o tamanho em 600, 600, acho que isso é demais. Então, vou manter em cinco, 80. Sim, isso é bom. Eu vou dar, 40 está bem. Esta seção está ótima aqui. Vamos ajustar esse título. 42 está bem aqui, selecione isso em estrela avançada. Desvincule o preenchimento. Sim, está tudo bem. E para esse botão, vamos apenas configurá-lo como preenchimento. Então, a partir daqui, vou ficar com 15, 20, 15 e 20. Vamos apenas diminuir o tamanho desse contêiner. Então, aqui, se eu ficar com 500, tudo bem. Eles ficam bem no modo tablet. Não precisamos mudar isso. Então, agora nosso modo tablet está pronto. Agora vamos nos ajustar aos nossos menus. Em primeiro lugar, como você pode ver aqui, nossos menus não estão aparecendo. Então, a partir daqui, detalhamento responsivo, vamos mantê-lo em dispositivos móveis Agora, nossos menus estão sendo exibidos no tablet, mas não serão exibidos no celular porque selecionamos essa opção na guia Estilo. A partir daqui, diminuiremos o tamanho. Então, para fazer isso, selecione o estilo do item de menu a partir daqui, vamos manter o tamanho se eu mantiver 12. Portanto, nossos menus estão em uma linha agora. Quero esses botões no lado direito, selecione este contêiner principal a partir daqui, direção, escolha a linha. Mas com isso agora, você sabe, nossos menus estão sendo exibidos em duas linhas a partir da tipografia, se eu conseguir, vamos aumentá-lo para 11. Sim. Selecione esses botões na guia Estilo. Vou mantê-lo em 15 do lado direito para 25, aqui, 15 e do lado direito para 25. Então, sim, isso está bonito agora, clique com o botão direito e copie. Clique com o botão direito e estilize a peça. Sim. Agora, eles estão parecendo bons. Agora vamos enviar apenas uma coisa. Então, primeiro de tudo, selecione isso em Avançado, desvincule a margem daqui se eu atribuir a margem do lado esquerdo a 100 Mas ainda assim, isso é tocante. Então, vamos apenas isso. Isso está parecendo bom agora. Acho que ainda há dois espaços, então vou mantê-lo do lado de cima, vou dar para dez, e do lado de baixo, vou mantê-lo para dez. Da mesma forma, vou colar esse estilo aqui, agora publicar. Agora vamos ver se nosso modo tablet está pronto. Todas as coisas estão muito boas. Agora, vamos para a guia Celular. Então, para ver isso aqui, clique aqui. Veja aqui como está a aparência no celular. Menus, nós os criaremos depois. Apenas diminuiremos o tamanho dos cabeçalhos. Essa foto parece boa. Aqui, vou manter o tamanho em 50. Sim. Com a direita, clique em copiar e pagar. Clique com o botão direito e pague. Publique seu conteúdo. Sim. Eles estão lindos aqui. Selecione este título, torne-o no tamanho 235, selecione esse título na guia Estilo Vou manter seu tamanho em 20, selecione este logotipo. E nas configurações abertas, aqui vou escolher os slides para mostrar, aqui vou colocar o valor três. Sim, agora aqui estão três logotipos. Ok, então eles estão parecendo bons. Agora diminua, 30, selecione isso. Na guia Estilo, torne-a 215. Vamos diminuir o tamanho do botão. Desvincule-o e faça com que seja 15, 20, 15 e aqui 20 Sim, clique com o botão direito, copie, clique com o botão direito e pague com estilo. Sim, as imagens parecem boas. Quero esse texto na parte superior e essa imagem na parte inferior. Portanto, selecione esta imagem em avançado aqui para fazer o pedido para finalizar. Sim. Agora está tudo bem. Selecione o título, faça com que ele tenha um tamanho de 30. Sim, selecione essa etiqueta de estilo. É do tamanho de 15. Basta colar o estilo do botão aqui, argila direita, copiar, botão c tube, clicar com o botão direito do mouse e colar o estilo. Acho que esses botões estão bem próximos desse texto. Então, vamos sugerir isso. Selecione o contêiner em avançado. Vou dar o valor dez aqui, selecione o contêiner, em layout. Eu vou chegar às dez. Aqui, vou manter o tamanho em 30. Selecione este 15. Agora, antes de tudo, quero diminuir o tamanho do contêiner. Vamos diminuí-lo para 270. Agora, selecione isso. Aqui, vou manter 29, mas há muito espaço, então eu não quero isso. Então, defina a altura da linha também, então vamos chegar às 1,3 da manhã. Essas seções estão bonitas, mas se você quiser alterar o tamanho, você pode. Então, vamos ajustar isso. Eu quero torná-lo mais pequeno. Eu quero esse texto em duas linhas. Sim, 26 está bem. Na altura da linha, vamos mantê-la em 1,5 e diminuir seu tamanho aqui também. 15. Sim. Eu quero esse botão aqui. Então, vamos selecionar isso em Avançado para desvincular o preenchimento. Agora selecione esse contêiner, em Rasgo avançado, desvincule a margem Vamos dar a margem dos lados superiores e os itens de linha para começar. Vamos selecionar isso em Estilo t aqui, vamos manter seu tamanho em 20 e diminuir a margem do lado superior. Então, selecione este contêiner em Avançado, desvincule a margem e, do lado superior, eu o darei a 50 Agora eu quero tudo isso no centro. Solte esse contêiner, justifique o conteúdo para centralizar, um centro de itens de linha defina isso, um centro de item de linha Selecione este contêiner, alinhe os itens para centralizar. Então, sim. Agora que todas essas coisas estão no centro, selecione esse título em Tecnologia de estilo, item de linha ao centro. Sim, então todas as coisas estão no centro. Agora selecione isso e, a partir daqui, alinhe os itens para centralizar. Agora publique seu conteúdo. Então, agora vamos criar nosso menu. Então abra o bar. Em primeiro lugar, não quero mostrar esses botões no celular. Então, selecione o botão em Avançado a partir daqui, aqui está um botão responsivo Aqui você pode ver o retrato oculto no celular. Então, vou habilitar essa opção. Eu farei a mesma coisa com esse botão. Agora, esse botão não será exibido no dispositivo móvel. Se você não quiser mostrar esses botões em tablets, pode fazer isso aqui. Essas são coisas que você pode ajustar de acordo com você. Agora esse logotipo e esse botão, eu o quero em uma linha. Então, vamos fazer isso. Vamos selecionar essa imagem em estilo aqui. Eu quero fazer com que seja do tamanho 225, mas 25 parece muito grande, então eu faço com que seja 223 E para esse título, desvincule primeiro a margem Do lado esquerdo, quero dar para -100. Se eu der para -100, isso ainda é. Vamos diminuir isso agora. Então, darei a margem do lado esquerdo menos 129. Então, agora selecione este contêiner partir daqui do conteúdo justificado para começar, vamos diminuí-lo então, desta forma, selecione esse contêiner a partir daqui, estou fazendo com que ele chegue a 50 pixels. Então, agora eles estão em uma linha, minimize a barra. Ok, então eles estão ótimos em dispositivos móveis. Quando você abre isso, você pode ver como estão nossos menus. Então, se você clicar em uma seção, você será redirecionado para essa seção Então você pode ver como eles estão lindos. Nosso site está pronto agora, então nos encontraremos no próximo vídeo. Espero que tenham gostado da aula de hoje. 29. Primeiro site intermediário de contêiner: Olá, pessoal. Então, vamos começar a criar nosso segundo site. Primeiro de tudo, instalaremos nosso tema. Procurando por um tema extra. Clique em Instalar. Não se esqueça de ativar o tema. Agora exclua isso. Agora entre nos plug-ins, clique em Adicionar novo plug-in. Nosso primeiro plugin será o elemento, clique em Instalar agora. Não se esqueça de ativar o plugin. Clique em Adicionar novo plug-in. Agora vamos instalar os elementos, o plugin. Clique em Instalar agora, clique em Ativar. Para criar este site, precisamos da versão Elementor Pro porque usaremos nossa opção CSS personalizada Para usar essa opção, devemos ter o Elementor Pro Então, vamos fazer isso. Clique em Adicionar novo plugin. Aqui está mostrando o plugin de upload. Clique aqui e selecione Escolher pilha. Aqui, pesquise por Elementor Pro. Clique aqui, clique em Carregar, clique em Instalar agora. Então, agora nosso plugin. Então, agora nosso plugin está instalado. Clique em Ativar plugin. Ok, então esses eram nossos plug-ins. Agora vamos criar nossas páginas. Primeiro, exclua essas duas páginas. Agora vá para Adicionar nova página, cancele esse pop-up, os nomes dos títulos na página inicial e clique em Publicar. Agora clique em Adicionar com Elementor. Cancele esse pop-up. Então, agora vamos começar a criar nosso site. Então essa é a nossa estrutura de duas colunas. Agora estou selecionando essa seção do lado esquerdo. Clique no ícone de adição. Aqui estou arrastando meu widget de cabeçalho. Em Stid Now, clique no ícone de adição, arrastando mais um título abaixo desse título Na guia Estilo. Oh, desculpe, eu esqueci de adicionar o plano de fundo aqui. Ao selecionar esta imagem, clique em selecionar Abaixo do layout. Em primeiro lugar, vamos definir sua altura mínima de 650 na guia Estilo, posição no centro e rolagem do anexo. E a partir do tamanho da tela, escolheremos a capa. Agora clique em publicar pop-ins familiares tamanho 250, peso 700, clique no ícone de adição, arrastando o editor de texto Tamanho 15, ícone CLConPlus, arrastando um botão na guia Family pop significa. Em condições normais, texto na cor branca, estou escrevendo um código de cores. Raio de borda 50. Acolchoamento 20 Agora desvincule isso e, do lado esquerdo e direito, estou chegando a 30 abaixo do conteúdo Aqui você pode ver a opção de ícone. A partir disso, você pode fazer o upload do AVigi e, a partir disso, escolher qualquer ícone da biblioteca Estou procurando a inserção do ícone Bitcoin. A partir daqui, você pode ajustar a posição do ícone e o espaço do ícone para dez. Clique em publicar. Quero todo esse conteúdo no centro. Então, para fazer isso, selecione esse contêiner do conteúdo justificado para o centro. Há muito espaço entre o botão e esse texto. Então, vamos lá, selecione esse botão, vá até a aba Avançado A partir daqui, estou dando a margem do lado superior. Estou chegando aos 20. Nossa seção de montagem à esquerda está pronta. Agora, vamos pular aqui, clique no ícone de adição. Arraste o widget de imagem. Escolha a imagem, selecione esta, clique em selecionar resolução da imagem para total. Agora clique no ícone de adição, arraste o widget de imagem nesta posição Escolha sua imagem. Eu selecionei isso. Clique em selecionar Resolução da imagem para total. Vá até a guia Avançado. Agora, para ajustar, quero essa imagem nessa imagem. Você sabe, então, como fazer isso da posição ao absoluto. E a partir daqui, estou na orientação vertical, dando o valor a 105. Quero que essa imagem seja movida para o site. Sim, menos dez está bem. Agora, clique com o botão direito do mouse e duplique essa imagem. Eu selecionei este, clique em Custo. Aqui, vou mudar o valor. Uma orientação vertical. Estou selecionando a parte inferior. Eu dei o valor 150. Sim, isso é bom. Agora publique seu conteúdo, clique com o botão direito do mouse e duplique mais uma vez, altere a imagem O ícone é selecionado sob orientação horizontal avançada à direita. Altere esse valor. Vamos dar para 80, aumentar mais, minimizar a barra. E você pode ver isso. Eu quero aumentar o espaço entre essas duas seções. Então, vamos ajustar isso. Abra o contêiner principal. Gaps, estou chegando a 60 dos dois lados. Portanto, minimize-o. Como você pode ver agora, essa lacuna aumentou. Mas essas imagens são mais transferidas para o site. Então, vamos sugerir que aqui estou fazendo. Se eu chegar a 50, isso é agora, é como esta imagem, chegando a -40 Sim. Então, agora eles são bons. Clique em publicar. Agora vou usar o código aqui, selecionar esse contêiner aqui, abrir a opção CSS personalizada. Vamos colar o código CSS personalizado aqui. Então, como você pode ver quando colei meu código, agora essa imagem está movida, vou colar esse código dentro dessa imagem também Então, como você pode ver, como isso está lindo agora, como esta imagem. Em código CSS personalizado. Agora publique seu conteúdo, minimize isso. Como você pode ver como essas animações estão funcionando lindas essas animações estão funcionando Vamos adicionar a animação dentro desta seção também. Então, na guia Avançado, em Efeitos de movimento , farei com que a animação desapareça para a esquerda, o mesmo com este título, mesmo com este editor de texto e também no botão Agora clique em Publicar e, para ver as prévias, clique aqui com que beleza e facilidade criamos nossa primeira seção. Agora, volte. 30. Segundo recipiente: Então, agora vamos começar nossa segunda seção. Então, estou usando essa estrutura de duas colunas. Primeiro, darei uma cor de fundo. Estou escrevendo o código de cor 060531. Eu dei essa cor de fundo escura. Então, vamos apenas essa cor. Estou escrevendo aqui, azul escuro. Clique em Criar. Agora, clique neste ícone de adição, adicione a imagem aqui. Escolha sua imagem. Estou pegando este, clique em Slack. Resolução total da imagem na guia Estilo. Essa imagem parece tão grande, então estou fazendo com que valha 85%. Clique no ícone de adição, arrastando o widget do título Na guia Estilo. Código de cores: um E seis, tipografia E F, tamanho da família 218, peso 500, ícone Tlicon Em vez de arrastar um widget, vamos copiar o texto daqui Clique com o botão direito e cole. Eu não quero essa animação aqui, então vamos removê-la. OK. Agora volte colando o título na tag de estilo. Vamos diminuir mais o tamanho da fonte. Então 39 está bem. Oito para continuar publicando seu conteúdo, clique no ícone de adição. Vamos apenas copiar para este texto e colar aqui, remover a animação. Agora clique no ícone de adição procurando a lista de ícones Witt e veja isso Você colará nosso texto aqui. Vou apenas decorar este item. Então, eu estou excluindo este, então para deletar lá, você pode simplesmente clicar neste botão Cancelar E se você quiser duplicar , basta clicar aqui para ver se deseja adicionar mais agora, basta clicar aqui Primeiro de tudo, vamos duplicar isso porque eu quero te mostrar uma coisa Então, use o estilete. Aqui está um espaço entre. Basta ver quando eu coloco o valor. Então, o espaço é aumentado aqui e o alinhamento à esquerda abaixo dos ícones, cor que estou escolhendo. Estou escrevendo o código de cores para dizer AFF oito Então, a cor do ícone mudou de tamanho, estou fazendo 15, espaço, cinco, alinhamento horizontal Dessa forma, você pode ver que a posição desse ícone está mudando. Então, estou centralizando o alinhamento vertical central sob a opção de texto de cor para branco Agora volte e, a partir daqui, abra isso, e eu vou mudar meu texto, abrir isso e colar aqui o texto aqui. Agora é só copiar esse botão, clicar com o botão direito e colar. Removendo a animação. Eu darei uma margem de oito do lado superior. Agora minimize a barra, e esta seção também está pronta, mas como você pode ver, há muito espaço, então eu não quero isso. Vamos apenas diminuir isso. Selecione esse contêiner. Vou manter o valor em dez. Minimize isso. E sim, agora o espaço diminuiu, mas ainda há muito espaço. Então, para diminuir isso, selecione esse widget em Advancab, desvincule a margem e, na parte inferior, estou chegando Minimize essa barra e C. Agora essa lacuna é suficiente. Agora publique seu conteúdo. Agora selecione esse contêiner na guia Avançado. Aqui vou dar a animação para caber na esquerda. Não, eu vou dar para caber bem. E para esta seção, darei o feed à esquerda, publique seu conteúdo. Portanto, esta seção está pronta agora. Vamos pular para a terceira seção. 31. Terceiro recipiente: Ícone C plus. Estou escolhendo essa primeira estrutura em Estilo na cor do plano de fundo. Já salvamos essa cor. Aqui está em azul escuro. Agora, basta clicar com o botão direito do mouse e copiar. Clique com o botão direito e cole. Em Alinhamento da guia Estilo, chegando ao centro, primeiro selecione esse contêiner principal e, a partir daqui, a altura mínima, vamos mantê-lo assim Altere o conteúdo, clique com o botão direito do mouse e copie. Clique com o botão direito do mouse e cole no alinhamento de estilo da TV no centro, clique com botão direito e copie, clique com o botão direito do mouse em colar Em Estilo, toque em, primeiro, quero esse texto em duas linhas. Então, eu estou usando a etiqueta de quebra depois de dentro. Certifique-se de usar tag Beak na seção de textura se você usar a tag break aqui Portanto, essa tag de quebra será mostrada aqui como texto em Alinhamento da tag de estilo ao centro Clique no ícone Com plus, arraste um contêiner da direção, transformando-o em linha. Clique no ícone Com plus e arraste mais um contêiner. Clique com o botão direito e duplique, clique com o botão direito e duplique Conteúdo justificado para o Center Center. Pesquise a caixa de ícones. Este widget vem da conexão do kit de elementos. A partir daqui está o tipo de ícone. Você pode escolher de aqui para nenhum e, a partir daqui, você pode escolher o ícone. Estou escolhendo a imagem aqui. Então, agora podemos escolher a imagem. Vamos selecionar essa imagem, alterar o título, alterar a descrição. Então vá na guia Estilo, tipo de plano de fundo 0d15 Então eu escolho essa cor. Largura da borda, estou tornando-a padrão. Eu não quero nenhuma fronteira. Raio da fronteira, estou chegando a dez. Em conteúdo, aqui estão as cores do conteúdo. Tão branco. E no Over, eu também quero que fique branco. E a partir da descrição tipográfica de Poppins, vamos dar sua cor para B um, B um, B um A partir daqui, da tipografia até o tamanho dos pompins, estou fazendo 240. E de ícone, ícone, cor de fundo, dando código de cor para fd86, A cor de fundo do ícone é amarela e o tipo de borda é sólido, largura da borda 22. Eu não quero nenhuma cor de borda. E o raio da borda, estou chegando a 50. Agora, ao passar o mouse, cor de fundo, estou fazendo com que fique branco ao passar o mouse Eu não quero nenhuma animação flutuante ou qualquer outra coisa. Agora, aqui está uma coisa espacial. Desvincule isso do valor inferior, estou dando 25 e preenchendo 25 de todos os E agora você pode ver como isso é bonito e arredondado, e aqui está um preenchimento suficiente Eu não quero fazer nenhuma mudança a partir daqui. Agora abra essa opção de sobreposição de fundo. A partir daqui, habilite a sobreposição. Se você habilitar a sobreposição de imagem, poderá adicionar a imagem sob o tipo de plano de fundo flutuante Agora, como você pode ver, quando eu passo o mouse sobre isso, nossa animação de foco está funcionando da esquerda porque aqui a esquerda está selecionada, mas eu estou passando de baixo para baixo Então, agora, quando eu passar o mouse sobre Agora, publique isso. Agora, o que faremos, clique com o botão direito e duplique, clique com o botão direito e duplique e agora exclua esses contêineres, clique com o botão direito do mouse e duplique toda essa seção porque quero as seis Então, publique seu conteúdo. Eu quero essa cor de fundo amarela em todo o cartão. Então, vamos mudar isso. Vou apenas mudar o título. 32. Quarto contêiner: Então, vamos começar nossa próxima seção. Estou usando essa estrutura, altura mínima de 750 na aba de estilo, estou escolhendo azul escuro. Role para baixo, clique com o botão direito e copie, clique com o botão direito e cole, mude para mais apertado Role para baixo, clique com o botão direito e copie. Clique com o botão direito e cole. Mude o título. Clique com o botão direito e copie. Clique com o botão direito e cole. A partir daqui, depois da palavra bancária, usarei a tag break. Como você pode ver, aqui há muito espaço. Não quero isso, selecione seu contêiner principal em layout. Estou fazendo a diferença cinco. Sim, agora está tudo bem. Agora clique no ícone de adição, arrastando um contêiner e a direção para a linha Agora clique no ícone de adição. E aqui vou arrastar mais um contêiner clicar com o botão direito do mouse e duplicar para esse contêiner Clique no ícone O plus e arraste mais um contêiner e direção para a linha. Eu sei que há muitos contêineres. Clique no ícone O plus, arraste mais um contêiner, clique com o botão direito e duplique. Agora selecione este recipiente do lado esquerdo. Vá com estilo. Aqui vou dar a cor de fundo, escrevendo o código de cores zero d um. Agora, clique no ícone CO plus, arraste um título, altere o título, a taxa de câmbio Alinhamento à esquerda, cor branca. Family Popons tamanho 18, peso 500, clique no ícone CO plus, procurando o título Vou escolher este título. Curly braces one ETH. Se você pode ver essa linha azul. Não quero que isso abra a opção de separador e, a partir daqui, desative isso Vá até a guia Estilo. Abra a opção de título para título. Vou escolher a cor para o branco Overcolor. Abra a tipografia, os pop-ins familiares, tamanho 15, peso 400 Agora feche isso, abra o título do foco para a cor, escrevendo o código da cor. Sobre a cor branca. Tipografia, pop-ins familiares, tamanho 15, peso 400 Vou fornecer preenchimento aqui, então selecione este contêiner na guia Avançado, preenchimento desvinculado na parte superior 25, direita e inferior 14, lado esquerdo Então, agora nosso texto está bom. Agora, basta clicar com o botão direito do mouse e duplicar. Exclua esse contêiner. Agora selecione toda a seção, o botão direito e duplique, clique o botão direito e duplique Primeiro publique seu conteúdo. Agora vou apenas mudar o texto. Agora eu não vou te explicar nada. Eu só vou fazer as mudanças. Você pode ver isso ou outras coisas. Agora é como se Discontainer, sob a tag de estilo da borda dez, usasse efeitos de movimento avançados Estou escolhendo o estilo fade na animação à esquerda, botão direito do mouse e copie, clique com o botão direito e cole o estilo, clique com o botão direito e cole o estilo. Vá em Advanced Tf, abra os efeitos de movimento Aqui, vou escolher fade in right animation, usar style tv, abrir a opção de borda e bordar dus ten Agora clique com o botão direito e copie, clique com o botão direito e cole o estilo. Clique com o botão direito do mouse e cole o estilo. Agora, selecione este contêiner sob a lacuna, farei aqui zero, e agora você pode ver que o espaço está diminuído. Nossa seção do lado esquerdo está pronta. Agora faremos nossa seção do lado direito. Copie para este título e clique com o botão direito do mouse e cole, altere o título primeiro. Agora vá em Estilo, abra a tipografia, tamanho 25, peso 500, agora clique no ícone de adição e pesquise por Aqui, usaremos o cronômetro de contagem regressiva do Lementkit, e você pode ver que aqui estão muitos designs Então eu vou escolher isso. Então você pode ver como está. Agora, role para baixo e abra as configurações do cronômetro. Mudaremos a data de vencimento da contagem regressiva. A partir daqui, você pode escolher rótulos personalizados e, na próxima opção, escolher Ação de expiração, tudo o que você pode alterar Agora vá na guia Estilo. E a partir daqui, vou manter a altura em 175. Agora abra a opção de dias. Abra a tipografia, os pop-ins familiares, o peso 500, da cor preta da etiqueta, abra a tipografia, os pop-ins familiares, 500 e o tipo de fundo branco do tipo de borda Cerveja ou preto. Role para baixo em geral, tipo de borda até sólido. Então você pode ver essa pequena borda. Agora abra a opção Os em tipografia, pop-ins familiares, peso 500, abaixo do rótulo, abra a tipografia, pop-ins familiares, peso 500, tipo de borda como sólido, cor da borda abra a tipografia, pop-ins familiares, peso 500, tipo de borda como sólido, cor da borda em preto. Agora, role para baixo em geral. Tipo de plano de fundo para escrever o código de cores. Tipo de borda para sólido, agora abra os minutos sob dígitos, abra a tipografia, pese 500 na tipografia Tipo de borda para sólido, cor da borda para preto em geral, tipo de fundo escrevendo o código de cores. Tipo de borda para sólido, agora abre em segundos, cor para branco, tipografia sob tipografia de rótulo Tipo de fundo para branco, tipo de borda para sólido, cor da borda para preto, rolagem para baixo e, em geral, tipo de fundo, código de cores. Coloque o tipo em sólido. Agora o cronômetro de contagem regressiva está completo. Você pode ver como eles estão lindos. Agora publique seu conteúdo primeiro. Agora com o ícone plus, arrastando um contêiner, direção para a linha, conteúdo justificado para o espaço dessa forma Agora copie para este título e cole aqui, altere o conteúdo. Na guia Estilo, abra a tipografia. Agora, duplique esse título, altere o conteúdo. Agora clique no ícone de adição. Estou procurando a barra de progresso. Vou escolher essa barra de progresso. Primeiro, remova o título. Eu não quero isso. Em porcentagem, atribuirei o valor a 70 e exibirei a porcentagem, desativarei e removerei o texto interno em Stile tap color code Para a cor de fundo, escrevendo o código de cores a partir da altura, vou mantê-lo em dez, raio de borda 50 Não vou mudar nada a partir daqui, abra o avançado, desvincule o preenchimento, lado direito 40, lado esquerdo, 40, agora com o ícone plus, arrastando Abaixo dessa direção, escolherei alinhar o centro de conteúdo justificado, clicar no ícone de adição e arrastá-lo para clicar no ícone de adição e arrastá-lo Estou selecionando esta imagem, clique em selecionar resolução da imagem para pesquisar, botão direito do mouse e duplique Certo, clique e duplique. Mais uma vez. Agora vou apenas mudar as imagens. Agora, todas as coisas são feitas agora, assim como este contêiner. Vá na guia Estilo. A partir daqui, vou escolher o tipo de fundo, escrevendo o código de cores. Vá abaixo do nível avançado e desbloqueie o preenchimento do top 40. Você pode ver que aqui há muito espaço, então vamos diminuí-lo. Selecione este contêiner, em rasgo avançado, vincule o preenchimento e, do lado direito e esquerdo, eu o darei a 40 Agora selecione esse contêiner. Vamos entregá-lo para Border. Vá em Estilo rasgo, abra a borda, tipo de borda para sólido, largura da borda para um, cor da borda, raio da borda para dez, vá para rasgo avançado, abra o efeito de movimento A nusão de entrada se encaixa perfeitamente. Agora, vamos fazer nossa terceira seção. 33. Quinto contêiner: Vamos começar nossa próxima seção. Vá abaixo do título, dê a ele uma cor de fundo. O código de cores é azul escuro. Agora, uma rolagem para baixo. Vou duplicar para este título e colá-lo aqui. Mude o título. Agora clique no ícone Com plus, arrastando um contêiner, em direção à linha Clique no ícone Com plus, arrastando um novo contêiner Certo, clique e duplique. Agora selecione este recipiente do lado esquerdo. Conteúdo justificado para centralizar. Ícone ClioPlus, arrastando o widget de imagem. Escolha sua imagem. Resolução da imagem até quatro. Agora clique no ícone de adição, procurando a barra de progresso. Vou escolher a barra de progresso do Element skit. Do estilo, você pode escolher qualquer coisa. Estou escolhendo a sombra da barra. Altere a porcentagem do título para 46 animações com duração de 1.500 Vá até os códigos de cores do tipo de fundo do Stitb. Uma altura para um, raio de borda para cinco, preenchimento zero, role para baixo e abra a faixa Tipo de plano de fundo. O código de cores agora está aberto no título, cor branca. tipografia aparece, abra a porcentagem, a cor para branco, a tipografia para os pop-ins, clique com direito Agora vou mudar o conteúdo, cor e a porcentagem. Então, vamos fazer isso rápido. Agora selecione este contêiner em lacunas, aumentarei a lacuna aqui em 30, vou em Avançar, rolar para baixo e abrir os efeitos de movimento. Agora selecione este contêiner em lacunas, aumentarei a lacuna aqui em 30, vou em Avançar, rolar para baixo e abrir os efeitos de movimento Aqui, vou escolher fade in right animation. Então, vamos aplicar a animação aqui também. Portanto, selecione esse contêiner. Role para baixo, abra os efeitos de movimento, aqui escolha fade in left Agora publique seu conteúdo. 34. Sexto contêiner: Clique no ícone de adição. Altura mínima, estou mantendo 800. Vá abaixo do DVaster Run no preenchimento do top 18. Clique no ícone de adição. Vou arrastar três contêineres. Ok. Então, agora selecione primeiro a direção de contenção da linha. Agora clique no ícone O plus, arraste um widget de título, altere o título, vá para o alinhamento do toque de estilo à esquerda, cor branca, pop-ins da família tipográfica Agora clique em OplusCon, arrastando um widget de botão. Agora mude o título. Escolha o ícone na Biblioteca de ícones. Estou procurando por btqingLkon insert. Espaço do ícone em dez. Agora vá na guia Estilo, tipografe dois pop-ins, pese 500 cores de texto O código de cor de fundo é o raio da borda até 50, desvincule o preenchimento e estou dando 20, 30, 2030 Agora selecione este contêiner, justifique o conteúdo para espaçar entre eles, alinhe os itens ao centro, agora clique no ícone Com plus, arrastando um título e escrevendo o Vá na guia Estilo, cor do texto 201b, pop-ins familiares, tamanho 15, peso 400 Agora vá para a guia avançado, desvincule os cinco primeiros do preenchimento, dez à direita, agora role para baixo Abra a opção de fundo. A partir daqui, o código de cores é que você pode ver que essa cor de fundo verde está separada. Então, agora abra o layout a partir daqui, alinhe para começar, agora minimize a barra Então, você pode ver que também precisamos colocar o acolchoamento na parte inferior. Então, de baixo, estou chegando a cinco. Selecione este contêiner daqui em direção à linha, clique no ícone com plus. Agora, arrastando um editor de texto com ele. Mude o título. Clique em Estilo, toque. Próxima cor também. Agora vá para um terceiro contêiner. Eu selecionei esse contêiner. Vá em Estilo, toque, abra a borda e, a partir daqui, digite a borda para vinculá-la de forma sólida. Do lado esquerdo e direito, darei a um pixel a cor da borda. Dei este BrerColorg na guia avançado, preenchendo Agora clique no ícone Com plus, procure a tabela. Eu quero usar o widget de tabela do plugin Xp, então eu não o instalei Então, vamos instalá-lo. Clique no logotipo simental. Aqui está uma saída para o Wordpress. Estou abrindo em uma nova aba. Acesse plug-ins para adicionar um novo plug-in, pesquisando por Expro. Estou instalando isso. Agora ative este plugin. Então, agora esse plugin está instalado e ativado. Agora volte, publique seu conteúdo primeiro e agora recarregue seu site Agora pesquise a tabela Widget, e eu escolherei essa tabela de expropluge Agora aqui está o serial. Você pode ver isso, como está. Agora clique aqui. Vá para Estilo, toque na cor do texto para branco. O código de cor do tipo de fundo é. Agora estou fechando isso, excluindo tudo isso Agora, basta duplicar isso. Agora vou trocar o mais apertado. R Agora nossa cabeça de mesa está pronta. Agora vá para a linha da tabela. Aqui está um início de fila. A partir daqui, vou escolher uma linha, ir para Sra, cor do texto para branco Plano de fundo, vou mantê-lo muito transparente. Agora feche isso. Agora vou deletar tudo isso e vou apenas duplicá-lo Aqui está uma opção de mídia. A partir daqui, vou escolher Imagem. Escolha sua imagem aqui. Vou escolher esta imagem, clique em selecionar resolução da imagem para puxá-la. As outras mudanças faremos em apenas alguns minutos. Agora vou mudar o título primeiro. Queremos que a próxima linha faça isso, role para baixo e duplique até a seção inicial da linha e mova-a para o final Dessa forma, duplique para tudo Agora altere o título Então nossa mesa está feita agora. Eu mudei todos os títulos e as imagens. Aqui está o alinhamento. Eu vou fazer isso para a esquerda. Abra a cabeça da mesa e, a partir desse alinhamento, também a manteremos do lado esquerdo Agora vá para a etiqueta de estilo, tipografia, família, pop em tamanho 15. Estamos fazendo alterações no chapéu da mesa e na cor do texto para branco, tipo de borda para sólido, desvinculando a borda com Darei a largura somente da superior e inferior como cor da borda de um pixel. Agora abra a opção de linha da tabela a partir daqui, tipografia, tamanho pop 14 e peso 2300 cores de texto, branco e até mesmo cor de texto Quero manter todo o texto na Aqui está uma cor de fundo para ímpar, então eu quero mantê-la muito transparente e a cor de fundo, estou escrevendo o código de cores para isso Agora você pode ver a cor de fundo do número par foi alterada. Tipo de borda para sólido. Em primeiro lugar, desvincule a largura da borda a cor da borda para que você possa ver essa pequena borda e a parte superior E aqui está a mídia. E vou manter o tamanho aqui 20. Você pode ver agora que essas imagens são pequenas e você pode escolher a posição. Vou mantê-lo no lado esquerdo. Sim, agora todas as imagens estão boas. Agora minimize a barra. E você pode ver como nossa mesa está linda. Agora abra. Agora vou aplicar aqui a animação. Eu selecionei esse contêiner em Avançado, abra o efeito de movimento Aqui vou escolher a moda em uma animação. Então você pode ver como é lindo vindo do lado de baixo. Agora publique seu conteúdo. Agora esta seção também está pronta, vamos fazer a próxima seção. 35. Sétimo contêiner: Ícone mais ícone, e a partir daqui, vou escolher essa estrutura, altura mínima de 550 pizza, vá em Estilo, cor de fundo para azul escuro. Role para baixo de borda, tipo de borda até sólido. Aqui, eu quero dar uma pequena borda. Portanto, desvincule a largura da borda. Na parte superior e inferior, vou escolher uma cor de pixel ou borda, código de cor é E cinco. Agora selecione esse contêiner, centralize o conteúdo justificado. Clique no ícone Com plus, arrastando a imagem. Escolha sua imagem. Eu escolho essa imagem, clique em Cosletimage resolution 24 Esta imagem parece muito grande. Então, vá para a guia Estilo com 85% de tempo. Agora venha aqui, escolherei copiar para este título e colarei aqui. Dessa forma, copie para este título, cole aqui, vá em estilo, alinhe à esquerda Ok. Agora copie para este widget do editor de texto e cole-o aqui Mude seu título, vá até o alinhamento do estilete para a esquerda. Agora clique no ícone CO plus, procurando pelo ícone Widget de lista Estou arrastando isso para baixo aqui. Agora exclua este, altere o texto. Alterando o ícone. Estou procurando usuários. Eu escolho esse. Clique em Inserir dessa forma, mudando para este item. Agora vá para Espaço de estilo entre 220, alinhamento à esquerda e para ícone R Eu escolho essa cor para ícones. Tamanho, estou mantendo 30 lacunas, dez, alinhamento horizontal e vertical em relação ao centro Abra o texto em tipografia, pop-ins familiares, tamanho para 19, cor para branco Agora vou arrastar o botão, então vou copiar o botão para isso e colar aqui. Agora é só mudar o conteúdo. Ícone, estou pesquisando downloads. Estou escolhendo esse. Clique em inserir. Sim, isso está parecendo bom. Então selecione este contêiner, vá para a opção de layout. Estou chegando aos cinco e o conteúdo justificado para o centro. Agora, selecione esse título, vá em Srta. Estou fazendo o alinhamento para a esquerda. Aqui há muito menos espaço, então estou selecionando meu botão, vou em Avançado e, a partir daqui, aumentarei o preenchimento para 12 Então, vamos fazer nossa próxima seção. Estou escolhendo essa estrutura. Vá até a guia Estilo. A partir daqui, vou manter a cor azul escura. Selecione um dos contêineres. Então, estou selecionando esse contêiner, clique no ícone de adição e arraste mais um contêiner aqui. E altura mínima, estou inclinando para 350 pixels. Vá até a guia Estilo. Vou dar uma cor de fundo aqui. O código de cores é então eu escolho essa cor, vou até a guia Avançado, desvinculo o preenchimento e, na parte superior, dou 30 Agora, clique no ícone Com plus. Estou arrastando uma imagem aqui, escolhendo a imagem. Eu escolho esse. Clique em Selecionar resolução da imagem para quatro, vá em Largura inicial que estou mantendo em 40%, clique no ícone Com plus, arraste um widget de título e altere os Vá abaixo do iniciador, alinhe com o centro, a cor com o branco e a família para inserir Ok, então isso está parecendo bom. Vou apenas duplicar para este título, alterar o texto. Vá para a cor do texto inicial até e nós para 400, vá para Avançado, clique na margem e eu estou dando dois menos dez Crontp e eu estou dando dois menos dez Crontp , agora clique no ícone Comprimir. Estou procurando por ícones sociais. Para, em primeiro lugar, Facebook, Twitter e YouTube. Eu quero pegar mais um ícone social. Então, eu estou procurando pelo Skype. Pegue e sirva Ok. Forma para circular, agora vá para a Etapa. Cor para cor primária e personalizada, estou tornando-a transparente, tamanho para 20 e espaçamento, para 15 Clique no ícone A partir daqui, cor primária para escrever o código de cores. Agora, quando eu passo o mouse sobre meus ícones sociais, você pode ver isso Em vez da animação, vou escolher o buzz. Agora, quando eu passo o mouse sobre meu ícone social, você pode ver essa bela animação Agora vá para a posição avançada que estou tornando absoluta e quero orientação vertical para baixo. Agora, não importa quantos conteúdos você escreva, ícones sociais sempre permanecerão na parte inferior do conteúdo Agora é uma rolagem para baixo. Aqui está o plano de fundo. Vou dar cor de fundo aos ícones sociais. Então, ok, agora esse é o nosso cartão. Agora vou adicionar um código CSS personalizado aqui. Então, estou selecionando esse contêiner, role para baixo e abra a opção CSS personalizada e cole seu código aqui. Eu colei meu código aqui. Agora, quando eu passo o mouse sobre o meu cartão, você pode ver esse lindo conjunto Eu quero torná-lo arredondado. Então, para isso, selecione sua imagem e o raio da borda, estou fazendo com que seja 200 Agora, quando eu passo o mouse sobre o meu cartão, você pode ver esse lindo efeito Agora isso é mais redondo. Você pode alterar essa cor se quiser. Como aqui, você pode mudar qualquer cor, como se eu fizesse aqui amarelo, por exemplo. Então agora você pode ver que isso é amarelo agora. Então, eu vou voltar. Então, agora nossa primeira carta é carne. Agora vou apenas copiar para este cartão. Agora vou copiar e colar para publicar seu conteúdo. Agora vou apenas mudar as imagens e esse conteúdo. Então, vamos fazer isso rápido. Então, agora nossos cartões estão prontos. Quando eu passo o mouse sobre o meu cartão, você pode ver essa linda barbatana Portanto, esta seção também está pronta agora. Agora vamos dar as animações a esses cartões. Então, estou selecionando este contêiner, vá em Avançado, abra o efeito de movimento. Aqui vou dar comida para a esquerda. Aqui eu vou desistir da moda. E para isso também, estou desistindo da animação de fading up, e aqui vou dar o feed in certo Ok. Agora publique seu conteúdo. Eu esqueço de dar as animações aqui, então vamos fazer isso. Efeitos de movimento para desaparecer à esquerda. E para esta seção, vou dar tudo certo Então, ok, agora essas seções também estão prontas. Agora vamos seguir em frente. 36. Recipiente de altura: Vamos começar nossa próxima seção. Então clique no ícone de adição. Estou escolhendo essa estrutura. E a partir daqui, vá para o estilo. A cor do fundo é sempre azul escuro, vá para o layout. Tempo mínimo máximo de manutenção de 75 pincéis. Clique com o botão direito e copie, clique com o botão direito e cole. No texto abaixo, estilize o alinhamento ao centro. Dessa forma, copie para este título e cole aqui, altere o título. Clique com o botão direito e copie, clique com o botão direito e cole. Altere o título, vá para manter o alinhamento no centro, volte para o texto e role para baixo. Depois de fazer transações bancárias, estou usando o Break path. Sim, agora o texto parece bom. Role para baixo e clique com o botão direito e copie, clique com o botão direito e cole. Em primeiro lugar, o layout que estou escolhendo alinhar aqui, alterando o texto. E procurando por mim, estou escolhendo esse ícone. Clique em inserir. Ícone 1. Vamos usar aqui este. Clique em inserir. Ícone additm, altere o tenagrama técnico. Vamos pegar esse. Agora vá para o estilo Pasi fazendo aqui 50, alinhamento ao centro. Agora vamos seguir em frente. Clique no ícone C plus, arraste o contêiner aqui, em direção à linha. Clique no ícone de adição, arraste um contêiner, clique com o botão direito e duplique. Agora selecione neste lado esquerdo e, partir daqui, alinhe os itens ao centro Agora, clique com o botão direito e copie, clique com o botão direito e cole, altere o título e vá para Estilo, passando para 30 e até 500 Sim, publique seu conteúdo primeiro, clique no ícone Com plus, pesquisando o formulário de contato e eu estou arrastando esse formulário de contato Aqui está uma opção de mostrar rótulo. Estou desativando isso. Eu quero aqui mais uma seção, então estou duplicando isso, e estou arrastando para cá, e aqui vou escolher o telefone e digitar dois, podemos fazer isso em números Então, agora abra essa opção. Aqui você pode ver tudo isso. Aqui está o botão. Estou escrevendo aqui para enviar mensagem. Agora vá para toque de estilo e lacuna de colunas, estou chegando a 25, Rose gap para 20. Agora, aqui está a margem, então eu estou dando para dez de todos os lados, e eu não vou mudar nada a partir daqui. Abra a opção de campos, tipografia para pop-ins familiares e tamanho para 15 e cor do espaço reservado, estou fazendo com que fique A partir daqui, a cor, eu vou torná-la branca, e a cor de fundo eu vou torná-la transparente. Agora, quando eu escrevo, será a cor de fundo transparente. Quando alguém digita qualquer coisa , a cor do texto será branca e a cor do plano de fundo será transparente. E borda tipo dois sólida, borda com Tim fazendo um e cor da borda, vamos fazer com que eu dê essa borda clara e o raio da borda a dez Agora, abra os avisos, família aparece e abra o botão tipografia aparece, então. A cor do texto já é branca e a cor de fundo, estou aumentando o raio da borda para 50 agora, desmarcando De cima, estou fazendo 220, direita, 25, inferior 20 e esquerda 25. Então, agora nossa casa de contato também está pronta. Agora selecione esse contêiner. Acesse o site. Aqui estou escrevendo o código de cores. Ok, então isso está bonito agora. Agora vá para Avançado e, a partir do efeito de movimento, estou fazendo com que ele se alimente para a esquerda. Sim. Agora nosso formulário de contato está muito bonito. Agora clique no ícone de adição, arraste Imagem, escolhendo a imagem Estou escolhendo esse. Resolução de imagem para enganar, vá para Sita. Esta imagem parece muito grande. Portanto, a largura I faz com que 80% e a altura até 350 peças sejam padronizadas para objeto, ajuste para cobrir, selecione Então, agora selecione esse contêiner e justifique o conteúdo para centralizar, vá para avançar, efeito de movimento, encaixar, direita. Ok, então esta seção também está pronta agora. Agora publique-o. OK. Então, agora vamos começar nossa próxima seção. 37. Nono contêiner: Agora vamos falar sobre nossa próxima seção. Então, eu estou usando essa estrutura. Vá para Estilo. Cor do plano de fundo. Estou fazendo um tubo. Vá para o layout e a altura mínima de 300 pincel. Vá para desvincular a roupa de cama e, do lado de cima, estou chegando a 50 Agora selecione este contêiner, clique no ícone de adição arraste um widget de imagem aqui Escolha sua imagem, resolução de imagem para quatro. Agora, clique com o botão direito e copie. Clique com o botão direito e cole, altere o conteúdo. Vá para o alinhamento de estilo à esquerda. Clique no ícone Com plus, procurando por ícones sociais. Estou me arrastando por baixo disso. Vamos pegar mais um ícone social, procurando por interesse. Vá para a cor do estilo para personalizar. Cor primária, estou tornando transparente e tamanho 15. Secondrycolor, branco, vá para o conteúdo, e eu quero seu alinhamento Sim, agora está lindo. E o raio da borda é de 50. E o ícone ao passar o mouse para cor primária e a cor secundária, torne-o branco E sobre a visão, Bob. Agora, quando eu visito meus ícones sociais, você pode ver como eles estão incríveis. Agora, você pode ver que aqui há muito espaço. Então, avance para desvincular a margem. E do lado superior, estou fazendo dois -30 e selecionando esse título, é o alinhamento Também estou virando para a esquerda. Agora vá aqui, selecione este. E largura, estou ganhando 20% e clique com o botão direito do mouse e copie. Clique com o botão direito e cole, altere o título. Categorias, vá para o alinhamento do assento à esquerda. A partir daqui, tamanho, estou fazendo 20 e peso 600. Sim, agora isso está bonito. Agora, basta clicar com o botão direito do mouse e duplicar, alterar o conteúdo. O que é ICU, vá para a guia Estilo abaixo do tamanho da tipografia, estou mantendo 15 e peso 400 Sim. Agora, com a direita, clique e duplique. Certo, clique e duplique. Certo, clique e duplique. Mais uma vez. Sim, agora é só mudar o conteúdo. Então, agora toda essa seção está pronta. Agora, basta definir isso e clicar com o botão direito duplicar e excluir esta seção Agora, aqui, basta alterar o conteúdo. Estou fazendo isso rápido. Agora está esse contêiner, e aqui vou mantê-lo no valor de até 40%. Clique com o botão direito e copie, clique com o botão direito e cole, altere o conteúdo para boletim informativo, clique com o botão direito e copie. Clique no ícone de adição. Estou pesquisando o formulário de pesquisa e usarei essa pesquisa simples para. Aqui está uma pele. Você pode escolher o décimo. Estou mantendo isso como padrão e, por favor, mantenha-o. Estou escrevendo aqui. E digite que eu estou fazendo para o texto, e eu escreverei aqui. Tamanho, vou mantê-lo em 50 pixels. Agora vá para a guia Estilo em tipografia, pop-ups familiares e cor do texto, vou mantê-la igual Cor do texto que estou criando e cor de fundo com a largura da borda branca, estou criando cinco pixels e a borda é 50. Abra o botão e a folha aparece, com a cor do texto branca. Cor do fundo, estou fazendo com que fique azul. E o código de cores para isso é Largura, eu fiz 2,5. Ok, então agora isso está pronto. Mas estou selecionando meu contêiner principal no layout. Quero aumentar as lacunas aqui e estou criando para 40 pixels. Sim, agora o espaço é suficiente. Agora vamos aplicar as animações nessas quatro seções, selecionar esse contêiner em efeitos de movimento avançados para desaparecer à Como este em Advanced Fading Down. O mesmo aqui, animação desvanecida. Aqui vou escolher a animação de gravação desvanecida. Agora publique seu conteúdo. Todas as seções estão prontas agora. Então, vamos ver a prévia. Você pode ver como nosso site está lindo . Sim, todas as coisas estão muito boas. Eu quero dar o acolchoamento aqui de cima para baixo. Então vá aqui. Selecione o recipiente do pendente em Avançado , rasgando o acolchoamento E do lado de cima, estou ganhando 50. Sim, 50 está bem. E aqui está uma peça muito menor. Então, vamos do layout, estou aumentando a altura mínima e, como esse contêiner na guia avançada, estou dando o preenchimento do topo aqui 50 e abaixo da guia Layout, aumentando sua altura mínima Então, estou chegando a 550. Eu vejo as mudanças. Sim. Agora, aqui está um espaço suficiente. Sim. Agora isso está bonito. OK. Sim, tudo está perfeito agora. Ok, então nosso site está muito, muito bonito. Agora, criaremos nosso cabeçalho e rodapé no próximo vídeo. 38. Cabeçalho e rodapé: O site está pronto. Agora vamos criar nosso cabeçalho e rodapé. Agora vamos fazer nosso cabeçalho. Então, para criar nosso cabeçalho, primeiro criaremos nossos menus. Então clique neste logotipo nmental e saia para o Wordpress. A partir daqui, vá para a aparência menus e forneça o nome do menu. Você pode nomeá-lo como menu, exibir localização no menu principal e clicar em Criar menu. A partir daqui, abra esses links personalizados e digite aqui, à direita, Olá, página inicial e vincule o texto para. Clique em no menu. O URL aqui tem recursos. Clique em no menu. SL Sales, clique no menu AT. Ao lado de URN, clique em Menu. Então, agora nossos menus estão aqui. Se seus menus não estiverem organizados , você poderá organizá-los. Ok, agora clique em Salvar Menu. Então, agora nossos menus estão salvos. Então, agora o que vou fazer é clicar em Template tooth Builder. Agora vamos criar nosso cabeçalho. A partir daqui, clique no cabeçalho, clique em Anu. Se você tiver um elemento de vantagens, também poderá inserir os cabeçalhos daqui Mas eu não vou escolher aqui, então cancele isso. Então, agora clique em PlusCo e, a partir daqui, eu escolherei essa estrutura Vá na guia Estilo. Eu quero dar uma cor de fundo, então o Droove agora clique no ícone de adição e arraste o widget de imagem escolhendo Eu vou escolher essa imagem. Selecione neste contêiner, conteúdo justificado para centralizar e alinhe os itens para começar E dessa forma, selecione esse contêiner agora, justifique o conteúdo para começar Agora clique no ícone de adição. Pesquisando menus. Vou arrastar esse widget. Você sabe, nós já fizemos o menu, então os menus estão aparecendo aqui. Você não pode sentar agora. Então, primeiro de tudo, vamos mudar sua cor. Então vá para a cor do texto Sita, estou tornando-o branco. Agora você pode ver claramente as mudanças. Alinhamento, estou chegando ao lado direito. Aqui vou aumentar a oferta. Ok. Então, agora meus menus estão em uma linha. Neste ponto de interrupção positivo, estou escolhendo apenas dispositivos móveis. Vá em Style te. Layout, estou escolhendo Underline Center. Você pode ver que pode explorar todos os layouts. Eu escolho o layout Underline Center. Agora, quando eu passo o mouse sobre os menus, você pode ver essa linha rosa Eu também vou mudar a cor. Mas antes de tudo, vamos ver as outras mudanças. Abra a tipografia. Família, estou escolhendo canecas pop e vou manter o tamanho em 50 Eu já escolhi a cor do texto, e em quem, eu quero as cores azuis, então eu estou escrevendo o código. Agora, quando eu passo o mouse, você pode ver que os menus estão mudando para a cor azul E eu também quero que a cor da linha seja azul. Então eu colei o mesmo código aqui. Agora, quando eu passo o mouse sobre meus menus, você pode ver esse lindo efeito, e eu vou colar a mesma cor aqui Portanto, nossos menus também estão prontos. Agora vou fazer um botão. Agora vou arrastar o widget do botão aqui, então pesquise o botão Arraste-o até aqui, altere o conteúdo, vá até a guia de estilo. A partir daqui, definirei a cor do fundo como transparente e da borda para o sólido, borda com um pixel e a cor da borda para branco. Ok, então essas mudanças que fiz aqui, soltam o contêiner, justificam o conteúdo para centralizar Então, agora tudo está no centro. Nosso cabeçalho está pronto agora. Eu quero fazer um cabeçalho adesivo. Então, como você pode fazer isso, selecione esse contêiner principal, vá para Advance e, a partir daqui, clique em Motion Ificky para escolher o topo Você pode escolher as condições aqui como se eu quisesse um cabeçalho fixo em todos os dispositivos, então vou apenas alterá-lo Agora publique seu cabeçalho. Adicione condição a todo o site, você pode escolher anti. Vou mantê-lo em todo o site. Clique em Salvar e fechar para recarregar seu site, e você pode ver que nossos menus estão aqui Agora você pode ver que nosso cabeçalho está fixo e eu vou até meu site, então nosso cabeçalho está fixo Agora, o que vou fazer, agora vou vincular os menus com as seções. Então, vamos fazer isso, vá para Avançado. Aqui temos que colar nosso ID CSS, e esse ID CSS, você deve copiar daqui. Certifique-se de que você não está copiando para esse hash. Agora vá para o leitor de página do Elementary e cole seu ID aqui. Ok, dessa maneira. R Ei, pessoal, então eu vinculei toda a seção a esses menus. Então veja agora. Vamos ver a prévia. E agora, quando clico em home, ele nos redireciona para essa seção Ok. Agora, vamos fazer nosso rodapé Então, para criar um rodapé a partir de modelos, acesse o Construtor de temas E aqui você pode ver o rodapé, clique em Rodapé, clique em Adicionar novo Você pode escolher o rodapé aqui, mas eu não vou fazer a partir daqui Então, agora vamos fazer nosso rodapé aqui. Então, estou fazendo esta seção. Direção, estou fazendo com que ela apareça sob a tag de estilo, dê a ela uma cor de fundo. Estou escrevendo o código de cores zero, um, zero, zero, 25. Então eu dou essa cor no fundo, vou para a opção de layout, e aqui vou escolher o espaço entre Ok e alinhar os itens ao centro Agora clique no ícone C plus, arrastando um widget de título e altere o Vá para Sa, alinhamento à esquerda, cor branca do texto e apareça a tipografia Tamanho, estou fazendo 15, peso, 500. Agora clique no ícone de adição. Estou arrastando um widget de imagem aqui. Ok, então escolhendo a imagem. Clique na resolução da autoimagem para selecionar completamente o contêiner principal Aqui, eu quero aumentar a altura mínima. Estou mantendo em 120. Ok, agora nosso oleiro também está pronto. Agora clique em Publicar. Você pode adicionar a condição aqui. Estou escolhendo o site inteiro. Clique em Salvar e fechar. Agora acesse seu site. Quando você recarrega em seu site. Agora, role para baixo e veja como nosso site está com você. Então você pode ver aqui nosso rodapé, como está lindo Agora, vamos ver a prévia. Antes de tudo, veja nosso cabeçalho e veja seu site. Nosso site está totalmente pronto agora. Então você pode ver como nosso rodapé está lindo. 39. Respposinve para tablet e celular: Olá pessoal, então vejam aqui como está nosso site em um tablet. Então, agora vamos criar nosso site, tablet responsivo. Então eu selecionei meu título. Eu faço o tamanho aqui 34. Então, agora isso está feito. Agora estou selecionando meu contêiner principal e vou na guia Avançado para desvincular o preenchimento e, de cima, estou dando 50 pixels do lado superior Agora vamos pular aqui. Então, selecionei minha imagem na guia Estilo. Eu faço isso com 75%. Eu selecionei essa imagem agora com toque de estilo, 70%. Vá para a guia avançado a partir daqui, orientação horizontal, estou chegando a -30 e orientação vertical a 80 Agora selecione esta imagem em estilo, toque com 70%, vá em tag avançada, tubo de orientação horizontal, estou chegando a -50 e tubo de orientação vertical 100 Agora selecione essa imagem, em fita de estilo. Largura de até 70% na guia Avançado, orientação horizontal de zero pixel. Orientação vertical, estou chegando a 160 pixels. Ok. Então, agora esta seção está pronta. Vamos pular mais longe. Em primeiro lugar, selecionei esse contêiner principal e aqui estou fazendo com que a altura mínima seja de 500 pixels. Selecione esse título na guia Estilo. Eu faço o tamanho até 27. Esta seção já está com boa aparência, então não precisamos alterá-la. Ok, então agora vamos pular aqui. Aqui, o lado esquerdo já está com boa aparência. Então, agora vamos fazer mudanças no lado direito. Sob a altura do suporte, estou chegando a 100 de largura, estou fazendo 90. Eu selecionei este recipiente sob um rasgo avançado de cima, estou dando 20 OK. Estou selecionando meu disparen. Padding, quero dizer zero. Vou manter seu tamanho em 30 na guia de estilo. Aqui também vou manter 30, selecione isso na guia avançado, preenchendo zero Ok. Agora vamos seguir em frente. Esta seção já está linda. Agora selecione este contêiner em rasgo avançado, desvincule o preenchimento Do lado direito, estou dando 20 e do lado esquerdo 20, feche este recipiente com rasgo avançado, desamarre o preenchimento e, do lado esquerdo, estou fazendo Sim, então agora isso está pronto. Esta seção já está com boa aparência. Não precisamos fazer mudanças aqui. Agora, venha aqui. Estou selecionando esse título em Sita. Eu digo, vamos chegar aos 30. Agora selecione o contêiner principal e aqui estou fazendo 450. Deixe esses ícones sociais ficarem abaixo do tamanho do estilo que estou criando 15. E seguindo o ritmo, dei um clique de oito pixels nesta carta e no mínimo 250, clique com o botão direito do mouse e copie, clique com o botão direito e clique com PAtyler e clique em PAtyler e copiar, clique com o botão direito no estilo P, clique com o botão direito e clique com o botão direito e clique com o botão direito e em Patyle para que você possa ver agora que nossos guardas estão nesta carta e no mínimo 250, clique com o botão direito do mouse e copie, botão direito e clique com PAtyler e clique em PAtyler e copiar, clique com o botão direito no estilo P, clique com o botão direito e clique com o botão direito e clique com o botão direito e em Patyle para que você possa ver agora para que você possa Vamos seguir em frente agora. Em primeiro lugar, selecione o contêiner principal. Eu mantenho a lacuna aqui de cinco pixels. Agora selecione essa opção. Vá abaixo do texto. Sob tipografia. Estou diminuindo o tamanho. Vamos manter em 15. Ok, agora abra a opção de ícone e o tamanho que estou criando para 25. Ok, então agora eles estão parecendo bons. Aqui, entre em contato, não precisamos mudar nada aqui. Agora selecione essa imagem. Na guia Estilo. Largura, vou fazer aqui 100%. Ok, então agora isso está parecendo bom. Esta seção também está pronta. Selecione esse título na guia Estilo. Estou aumentando seu tamanho para 80. Vamos fazer aqui também 80 e aqui também, eu estou fazendo um tamanho de 16 pixels assim. Vamos fazer aqui um tamanho de 13 pixels, clique com o botão direito do mouse e copie e cole esse estilo em todo o texto aqui. Ok, então isso está pronto agora. Essa imagem ainda não está boa, então estou chegando a 300 de altura e, a partir daqui, vamos escolher a capa. Ok, então agora a imagem está melhor. Assim, você pode ver todas as coisas. Essas cartas estão lindas. Não precisamos mudar. Nosso site é responsivo para tablets. Agora vamos projetar nossos menus. Então, agora vamos projetar isso. Estou selecionando meu contêiner de disco e estou fazendo com que ele atinja toda a largura, vá até o site. Vou manter o tamanho em 15 pixels. Selecionei meu contêiner gasto, entrei em Advanced te, desvinculo o preenchimento e, do lado direito, estou chegando a 20 Agora estou selecionando meu botão. Vá para a etiqueta de estilo e, a partir daqui, estou aumentando o tamanho da digitação e desvinculando o preenchimento da parte superior, dez, dez inferior Lado direito, estou dando 15, lado esquerdo, 15. Então, agora todas as coisas estão indo bem. Então, agora nosso site está ótimo em um tablet. Agora vamos ver o dispositivo móvel. Vá para o dispositivo móvel. Então, agora vamos tornar nosso site responsivo para dispositivos móveis. Agora você pode ver aqui aparência do nosso site em dispositivos móveis. Então, isso está parecido com isso. Então, agora vamos fazer isso. Selecione este título, vá em Estilo rasgar. Vamos fazer esse tamanho para 30 pixels. Ok, como este título em Style Tear, 13. Então, agora selecione esta imagem em Estilo rasgar. Estou fazendo com que mude para 60%. Ok, agora selecione essa imagem. Está pronto agora? E uma estrela de 22 pixels. Outras coisas parecem boas. Selecione este título, na aba Estilo, tamanho dois, 25 pincéis Mas esses cartões ficam bem em nosso dispositivo móvel. Portanto, não precisamos mudar nada. Selecione este título na guia de estilo. Eu selecionei esse título na guia Estilo. Estou fazendo com que ele tenha um tamanho de 14 pixels. Essas caixas estão muito bonitas em dispositivos móveis, então não precisamos mudar nada. Vamos fazer algumas mudanças aqui. Então, eu estou selecionando isso, e eu vou fazer 100. Altura, vou manter a margem 20 abaixo de 90. Então, agora está parecido com isso. Deixe esse contêiner, desvincule o preenchimento e, do lado direito e esquerdo, estou dando 20 pixels Agora selecione esse título. Vamos diminuir seu tamanho. Então, estou chegando a 25 pixels. Esta imagem parece muito grande. Então, sob Sita, vamos chegar a 80%, o Slack Dictainer aumente sua Agora, neste contêiner, vá em t avançado, e ocultaremos esta seção no celular. Portanto, abra essa capacidade de resposta e oculte no retrato do celular, ative essa opção e agora essa seção não será exibida no dispositivo móvel Portanto, agora esta seção não será exibida no celular. Esta seção está com boa aparência. Selecione esse título em Estilo, toque, chegando a 30, mas ainda assim é muito grande. Eu quero fazer isso em duas linhas. Então, sim, o tamanho de 26 pixels está bem. Curta esse texto e faça com que ele tenha 13 pixels. Agora, selecione essa lista de ícones em SytppEce entre Estou chegando a dez pixels e quero diminuir o tamanho do texto Então abra o texto e, a partir daqui, eu quero torná-lo em 15 pixels, e vamos diminuir a altura dos ícones, tornando-o em 25 pixels. Sim. Agora está tudo bem. Com este título em Stay, estou fazendo com que ele tenha um tamanho de 25 pixels. Este editor de texto, vamos transformá-lo em 14 pixels. Estou selecionando este contêiner, esse contêiner externo e 40 do site. Agora selecione esse carrinho interno. E a partir daqui, manteremos sua altura mínima em 300. Alinhe os itens ao centro. Ok, selecione essa imagem. E a largura eu estou ganhando 50%. Agora, selecione os ícones sociais abaixo do tamanho que estou criando em 18 pixels Ok, então agora eles estão parecendo bons. Ok, agora você pode ver que este cartão está pronto. Ok. Então, agora, clique com o botão direito e copie. Clique aqui e cole o estilo, selecione este contêiner externo, copie para este contêiner. Agora selecione seu recipiente externo e cole o estilo. Agora selecione copiar para ícones sociais e passar o estilo Mas você pode ver que não há espaço entre os cartões Então, selecione este contêiner pai e, a partir daqui, estou criando uma lacuna de 20 pixels. Agora vamos diminuir ainda mais tamanho de 30 pixels, selecione isso , isso , entrar neste formulário de concurso fica bem em dispositivos móveis com esta imagem, em estilo. Estou ganhando 200%. Estou fazendo com que sua altura seja de 220 pixels e objetos para cobrir. Sim, está tudo bem agora. Essas coisas estão bem, mas aqui há muita lacuna, então esse contêiner daqui, eu estou fazendo dez pixels. Ok, então agora eles já estão ótimos. Portanto, agora nosso site também é responsivo para dispositivos móveis. Agora vamos responder a esse menu. Eu não quero esse botão, então selecione esse contêiner em Tag avançado, responsivo, ocultar no retrato do celular Ok, agora esta seção não será exibida no dispositivo móvel. Agora, selecione esse contêiner, tornando-o com 30 pixels. Agora selecione esse contêiner e vamos transformá-lo em um pixel t. Selecione este contêiner em layout. A partir daqui, estou chegando ao espaço intermediário. Concluímos nosso site responsivo para celular e tablet Espero que você tenha aprendido algo novo hoje. Obrigada 40. Primeiro site avançado de contêiner: Olá, pessoal, então vamos começar a criar nosso terceiro site, que é o site Avançado. Então, hoje, criaremos essa linda seção para que você possa ver como essas belas imagens estão mudando, como essa parede está se movendo, esse texto em gradiente, esse contêiner de gradiente, tudo será feito com muita facilidade Então, sem mais delongas, vamos começar a criar nosso site. Então, primeiro de tudo, vamos instalar nosso tema Astra, ir para a aparência dos temas Então, aqui já está instalado o tema Astra. Vamos apenas ativá-lo. Agora estou entendendo isso. Agora instalando nossos plug-ins. Nosso primeiro plugin é elementd O segundo plugin é expro Install it Agora ative-o. Comece a adicionar um novo plugin. Usaremos a versão Element Pro, clique em um plugin Plot. Escolha Arquivo. Clique em um gráfico, clique em Instalar agora. Agora ative seu plugin. Ok, então nossos temas e plug-ins estão instalados. Agora vamos folhear nossas páginas. Cancele o pop-up. Página inicial do título, publicar, publicar. Clique em Adicionar com o Alimentor Cancelar o pop-up. Então, agora vamos começar. Estou levando aqui essa estrutura. Altura mínima, estou mantendo 800 abaixo de Sita. O código da cor de fundo é Estou salvando essa cor. Ok, vá para Avançado para desvincular o preenchimento. E, de cima para baixo, estou dando 100. Agora, volte ao layout. E neste local de corte, estou mantendo minha primeira seção em toda a largura. Agora estou selecionando esse contêiner e, com 40% de conteúdo justificado centralizar os itens da linha no centro. Clique no ícone de adição, procurando por carrossel de imagens Então escolha suas imagens. Eu escolho essas três imagens. Clique em criar a nova galeria. Você pode simplesmente excluí-lo daqui, ok. Mas eu quero adicioná-lo à Galeria. Estou guardando esse. Então você pode excluí-lo daqui, ok. E a partir daqui, você pode adicionar mais imagens, se quiser. Então, agora clique em Inserir Galeria. Resolução da imagem até o slide completo para mostrar. Quero um slide agora com os ícones de seta anteriores. Eu não sei nada daqui, então nada. Clique nas opções adicionais. Reprodução automática, vou escolher s, pausar ao passar o mouse, Você pode se adaptar a todas as coisas. Velocidade de reprodução automática, estou dando valor, e agora você pode ver que aqui está o efeito, slide é a escolha, e é por isso que as imagens estão deslizando E eu estou escolhendo o efeito de desvanecimento. Então, agora você pode ver que isso está parecendo bom. Ok, então agora isso está feito. Agora vá para Estilo, toque. Raio da borda, estou dando um raio de borda de 300 pixels. E agora você pode ver os cantos arredondados em 300 pixels. Agora selecione este contêiner do lado direito com 60% agora do ícone KCN plus, arraste um título, altere o título vá para Style tap Cor do texto branca, tipografia, tamanho, estou fazendo 102 pixels e peso 900 E você pode ver como esse título está incrível. Agora, basta clicar com o botão direito do mouse e duplicar para este título, alterar o conteúdo Futuro da IA, vá no estilo e na tipografia, estou fazendo com que seu tamanho seja de 120 pixels Vá para a guia Avançado na classe CSS. Classe CSS, eu adicionei um traçado de gradiente. Role para baixo e abra o código CSS personalizado. Vou colar aqui meu código. Colei meu código e você pode ver esse belo gradiente de cor. Agora clique no ícone Com plus arraste esse widget abaixo desse Colei meu texto aqui, vá para Estilo, toque em cor do texto, tipografia branca Tamanho 15, vá abaixo do conteúdo do texto, estou usando aqui a tag Breaking, publique seu conteúdo. Agora clique no ícone de adição, adicionando o contêiner e a direção. Clique no ícone de adição, pegue mais um contêiner, à direita, e duplique. Agora selecione esse contêiner do lado esquerdo e largura que estou fazendo 60% em direção à linha, centro e centro do conteúdo justificados e lacunas que estou fazendo zero. Vá para o iniciador, cor de fundo, estou fazendo preto. Agora clique no ícone de adição, arraste mais um contêiner e, com 45%, vá para Starter No tipo Bgroun, estou adicionando uma imagem. Clique em definir resolução de imagem completa. Agora clique no ícone de adição, arrastando um título para o lado direito da imagem Sim. Agora é só mudar, vá para o estilo, toque na cor do texto: branco, tamanho 24, peso 900. Agora estou selecionando esse contêiner externo e estou dando a borda. 20 pixels abaixo do layout. Estou atribuindo à lacuna aqui 20 pixels. Então, agora minimiza. E aqui, agora parece bom. Não precisamos alterar nada agora selecione este contêiner com 75%, clique no ícone de adição, pesquisando a lista de ícones. Eu o arrastei até aqui. Vou mudar o título, colar meu segundo título. Agora vou escolher o ícone. Estou escolhendo esse ícone. Insira, abra em segundo lugar, procurando por cheque. Vou escolher o mesmo ícone em todos os títulos. Vá para o estilo. Você pode ajustar o espaço entre eles. Estou mantendo dez pixels, alinhamento à esquerda. Você pode adicionar o divisor, abrir o ícone, cor branca, tamanho 18 e espaço, vou dar cinco pixels, centro de alinhamento horizontal, centro de alinhamento vertical, abrir o texto, abrir a Tamanho 15, peso, 300 e cor que estou fazendo de branco. Agora estou selecionando esse contêiner, conteúdo justificado e centro central de itens de linha. Então, agora minimize isso. Você pode ver que há muito espaço. Então, vou ajustar isso agora, abri-lo, selecionar esse título na guia Avançado, alinhar a margem e, do lado inferior, estou criando 55 pixels. Dessa forma, selecionei esse título em Avançado entregando a margem e, do lado superior, dei -30 Então vá para Estilo em tipografia, altura da linha. OK. Então, agora minimize isso e a seção do lado esquerdo está pronta. Estou arrastando esse contêiner. Linha de direção, centro e centro de conteúdo justificados e lacuna que estou criando aqui, zero. Agora, ícone do Picom. Estou procurando o Search Guard. Estou arrastando essa parte do exprosearch. Layout, estou escolhendo Classic. Você também pode explorar essas outras opções. Espaço reservado. Estou removendo isso e estou escrevendo aqui. Vá abaixo de Sita sob tipografia, aberturas familiares e peso 300 de largura na coxa totalizando 1.000 de altura, Cor de fundo, estou fazendo com que seja branco puro. E focando, eu não quero fazer nenhuma mudança. Ok, agora o raio da borda é o 101º de todos, desvincule E do lado esquerdo, estou fazendo 50. Abra a opção do botão. Aqui, cor do texto, estou fazendo preto. A cor do texto é essa. Então, estou fazendo com que seja preto. E a cor de fundo, estou tornando-a branca no texto flutuante, branca e o código da cor de fundo é três CCC Agora, quando eu passo o mouse, você pode ver esse lindo efeito Tamanho do ícone. Tamanho do plano de fundo, você pode ajustá-lo a partir daqui desta forma, desvincular o preenchimento e, do lado direito, estou dando 40 pixels Agora vá para a tecnologia avançada inclinando a margem e, do lado esquerdo, estou fazendo -200 Agora você pode ver que não podemos ver nossa barra de pesquisa aqui. Então eu vou dar o Zentax. Ok, agora você pode ver, e do lado direito, estou fazendo -20 Agora clique no ícone O plus, arrastando um contêiner aqui, direção, linha, início e início, vá para Advancter Estou curtindo aqui classe CSS, contêiner de ingredientes, role para baixo e, na opção CSS personalizada, baixo e, na opção CSS personalizada meu Assim, você pode ver essas lindas cores vazias e ajustar as cores a partir daqui OK. Agora abra a opção de layout, desvincule a margem e, do lado superior, estou dando -55 Aqui você pode ver os contêineres de gradiente na parte de trás da barra de pesquisa Então, para isso, darei um valor ao índice Z, agora clique com o botão direito e copie , clique com o botão direito e cole nesta lista de ícones. Estou excluindo esses dois. Aqui estou escrevendo o texto de preenchimento de texto e o ícone que usarei aqui frio Nós nos concertamos. Agora vá para Style tech na opção de ícone. Cor, eu estou escolhendo aqui preto. Abra o texto abaixo da tipografia e aguarde 900 e clique em cores Agora clique no ícone OPlus. Arrastando um título para o lado direito. Em estilo, toque em x cor preta, em tipografia, clique nos pop-ins, tamanho, 15 pixels para selecionar este contêiner a partir daqui, estou fazendo com que o conteúdo justificado comece aqui porque quero esse título na posição inicial Agora clique no ícone de adição procurando por contador, e eu estou usando esse contador termina no número dois e no sufixo numérico Aqui vou usar o sufixo K. Vá para Estilo, toque, posição do título. Então, vou escolher posição do título depois, se você escolher antes, para que você possa ver agora que nosso título está na primeira posição. Então, estou escolhendo o alinhamento horizontal do título como início e a posição do título como depois e a posição do número Estou escolhendo começar a abrir o número Cor do texto branca, abaixo da tipografia, pop-ins e tamanho 70 pixels e peso 900 e título abaixo da tipografia, pop-ins familiares e tamanho 20 na rolagem avançada para baixo, abra a Eu quero esse texto traseiro do jogo como cor gradiente. Então, vamos colar nosso código aqui. Antes de tudo, vou mudar as cores. R Tudo bem, eu acho, clique com o botão direito do mouse em duplicar. Então, para isso, vou usar um contêiner. Estou arrastando um contêiner aqui e, em direção, farei uma linha E eu estou arrastando esse contador e o arrastando até aqui. Dessa forma, arrastarei esse contador aqui, clicarei com o botão direito do mouse e duplicarei e, botão direito do mouse e duplicarei e as lacunas, farei com que ele suba 30 pixels E a partir daqui, estou abrindo espaço entre eles. OK. E agora vou mudar o texto e os números. Então, vamos fazer isso rápido. OK. Agora, quando você minimiza isso, mas há muito espaço, vou diminuir esse espaço, afrouxe o contêiner Estou dando aqui uma lacuna de 40 pixels. OK. Agora veja aqui no lado esquerdo. Clique no ícone de adição e eu estou tirando uma imagem aqui, escolhendo a imagem. Estou selecionando este, clique em Selecionar. Use Style com 85%. Vá em Stylta para vincular a margem. E de cima para baixo, estou dando aqui -200 OK. E do lado esquerdo, 410 pixels, não consigo ver a bola aqui Então, vou dar a Zyntax aqui como uma. Então, agora podemos ver isso. Agora, coloque a classe CSS aqui como agora, na opção CSS personalizada Certifique-se de ter escrito a classe CSS corretamente. Então, eu estou copiando essa classe CSS e colando-a aqui. Então você pode ver agora que essa bola está se movendo porque houve um erro na minha classe CSS. Então, agora publique seu conteúdo. Vamos ver a prévia. Então você pode ver como esta nossa primeira seção está linda . 41. Segundo recipiente: Olá, pessoal. Então, hoje, vamos criar a segunda seção. Então, vamos começar. Altura mínima, estou criando 800 pixels na guia de estilo, cor de fundo, cinza escuro. Ok. Vá na guia avançado, desvincule o preenchimento e, do lado superior, estou dando 80 pixels na opção de layout abaixo, criarei esta seção na Então, agora, clique no ícone Plus, arrastando um título, altere o título Sob a estrela do Papai Noel, criarei esse texto em gradiente de cor e colarei o código para isso Agora, a família insere o peso 400 no texto da classe CSS avançada um, role para baixo na opção CSS personalizada. Eu colei meu código aqui. No início, darei o tamanho aqui de 20 pixels. Clique em copiar para este título e cole-o aqui. Eu usei aqui a tag de quebra na guia Estilo, centro de alinhamento, fixador de tamanho de tipografia 65, altura da linha, estou criando 70 pixels, agora Estou removendo essa margem. Agora clique em OplusCon, arrastando o contêiner, linha de direção. Agora clique no ícone do ClickoPlus pegando mais um contêiner, clique com o botão direito do mouse e duplique e duplique. Estou selecionando este contêiner em estilo, abro a borda e o tipo de borda como sólido, mas a largura é de três pixels e a cor da borda Eu dou essa aquarela e estou salvando essa cor. E raio de borda de 15 pixels. Vá para a Opção Avançada, desvincule o preenchimento da parte superior 50, inferior 50 e, do lado direito e esquerdo, eu dou 40 pixels Agora clique no ícone MPlus, procurando pelo ícone Box. Clique no ícone e pesquise por Estou pegando o ícone, veja aqui que vou empilhar e formar de forma arredondada, alterando o título Vá no alinhamento de inicialização à esquerda e no espaço do ícone, estou dando 30 por pixel Abra a opção de ícone. Cor primária, estou escolhendo preto aqui e depois, vou escolher a cor primária como preto. Volte e dimensione 35 pixels, abra a opção de conteúdo, cor, você pode dar uma cor ao seu título, então estou fazendo com que seja branco e a família tipográfica se destacando, fixador de tamanho 25 Tipografia, canecas pop e pizza tamanho 17. Você pode ver aqui que a cor de fundo do ícone é preta. Então, eu quero fazer com que seja uma cor gradiente. Então vá em Avançado, abra a opção CSS personalizada e eu colarei meu código aqui. Assim, você pode ver aqui cor do gradiente na opção de ícone da guia de estilo Cor secundária, você pode alterar a cor do ícone, então estou deixando-o preto. E, esperançosamente, estou fazendo preto. Estou diminuindo porque é muito grande. Eu faço 30 porcos para cima. Agora clique no ícone de adição. Procurando por widget de botão. Estou arrastando esse botão e alterando a textura. Ícone, procurando pela direita. Vamos escolher. Vamos escolher esse RO, clicar na posição do concerto e do ícone e no espaço do ícone de dez pixels, ir para a posição Srta à esquerda e tipografia aparecer no tamanho 17 pixels de texto, cor do texto no estado normal, branco e cor de fundo, vou torná-la Então, agora esta seção está pronta. Vou apenas duplicar isso e agora excluir essa folga desse botão e, a partir daqui, estou dando o preenchimento como Agora vou mudar o texto e os ícones. Então, vamos ser rápidos. Não estou encontrando aqui o ícone que eu quero. Então, para isso, eu preciso de um skit de elementos de plugin. Então, vamos fazer o download disso. Vá para Plugins. Você pode ver aqui, eu esqueci de instalar esse plugin. Recarregue seu site agora. Então, agora, se eu começar aqui, widget de pesquisa, se eu pesquisar aqui os itens de pesquisa, escolherei escolherei essa dica e o estilo de copiar e colar. Ok. Agora publique, minimize a barra. Ok. Quero diminuir o espaço aqui, então estou selecionando meu contêiner principal Avançado para desvincular a margem e, na parte inferior, estou fazendo aqui -15, ok 42. Terceiro recipiente: Olá, pessoal. Então, neste vídeo, criaremos nossa terceira seção. Você pode ver quando eu recarrego no meu site. Então você pode ver esse lindo efeito. E quando eu passo o mouse sobre o meu botão, você pode ver esse lindo gradiente Então, vamos fazer isso. Altura mínima, estou fazendo 650 pixels com o styletap. Vamos dar uma cor de fundo. Cinza escuro. Agora, o ícone ClicomPlus adiciona um contêiner Estou fazendo com que seja 630, vá em Estilo, toque, abra a opção de borda, tipo de borda para sólido e largura da borda, estou criando pré-pixel, cor da borda Estou dando rádios descoloridos e fronteiriços. Vamos dar 15 pixels de todos os lados. Vá em Avançado: manuseio do preenchimento. Do lado superior, estou fazendo 80 pixels, 90 na parte inferior e 60 pixels à esquerda. Agora, o ícone PC plus, e eu estou copiando este título, cole aqui. Em avançado, primeiro removerei as margens e, em Iniciar alinhamento, alinhar à esquerda, clicar com o botão direito do mouse e copiar e colar, vou até a guia Estilo, alinhamento à esquerda, abro alinhamento à esquerda, Não quero fazer nenhuma alteração, vá até a guia de conteúdo e usarei a pré-tag aqui desta forma. Agora, copie para isso, cole aqui, primeiro removendo a margem. Peça para o título aqui. Estou selecionando texto aqui, e aqui estou usando a tag Baking, vá até Sitab, abra a tipografia Vou remover essa altura da linha, passar para o tamanho avançado que estou fazendo aqui 18. OK. Agora, clique no último ícone, adicionando um contêiner aqui. Vou pegar esse contêiner aqui, direção, linha, início do conteúdo justificado e centro de itens de linha. Estou fazendo aqui 60% de largura, agora clique no ícone de adição. Estou apenas duplicando essa lista, botão direito e copie, clique o botão direito e cole Vou apenas mudar o texto. Procurando por ícone. Agora estou procurando um vídeo. Vamos pegar esse. Clique em Concerto. Estou usando isso, vá em Sitab, aqui estou criando espaço de 15 pixels, abro a opção de ícone, tamanho que estou fazendo 20 e espaço de dez pixels, abro a opção de texto, tamanho que estou criando 17 pixels e peso 500 e cor branca Vamos colar o código aqui. Role para baixo. Agora, basta clicar com o botão direito do mouse e duplicar para a seção E eu estou mudando o texto. Aqui estou aumentando a diferença. Aqui estou mantendo uma lacuna de 70 pixels. Então, agora vamos criar nosso incrível botão. Vamos criar isso. Eu apertei meu botão aqui. Vamos criar um botão incrível. Então, querida, estou escrevendo aqui o título, crie um vídeo gratuito de IA. Aqui vou escolher o ícone. Vamos pegar esse ícone e posicioná-lo na guia de estilo, abrir a tipografia, os pop-ins familiares e o tamanho 15 do píer, peso, estou criando 600 cores de texto, vamos torná-lo preto raio da borda de 15 pixels desvincula o preenchimento da parte superior, darei 25, direita, 30 pixels, inferior 25 OK. Agora vá para o avanço. Eu vou fazer o fundo gradiente. É por isso que eu não dei nenhuma cor ao fundo. Estou dando a margem da parte superior e do pixel, rolando para baixo e, na opção CSS personalizada, estou colando meu casaco para dar a ele uma cor gradiente Agora veja aqui, quando eu passo o mouse sobre o meu botão, como essas cores estão se movendo lindas, esse botão está realmente incrível Eu realmente gosto disso. Clique no ícone Com plus. Estou arrastando um contêiner. Estou fazendo com que sua largura 15% e a linha de direção, clique no ícone Com plus e estou arrastando o widget de imagem Resolução de imagem completa. Vamos escolher a imagem. Este, Go under Style, largura de toque, tração, largura máxima da piscina e altura do pneu, totalizando 420 pixels Objeto ajustado como capa, vá para avançado. Agora vou dar a margem aqui. Então, primeiro de tudo, desvincule a margem. Do lado superior, estou fazendo 120 e do lado esquerdo, vamos fazer 301 pixels Agora vá para Estilo, toque. Eu quero dar uma fronteira a isso. Vamos fazer isso com uma borda de dez pixels. Vamos arrastar outra imagem. Escolha sua imagem. Esta, CSLectigerSolution, poste under style dag width. Estou fazendo dela uma 50% e a largura máxima uma 30% e a altura 550 pixels e a largura do objeto cobrir em tempo avançado, desvincule E do lado superior, estou dando 55 pixels e do lado esquerdo menos 250, vá para a guia Estilo Vamos dar a ele uma borda também de dez pixels. Ok, agora esta seção está muito bonita. Agora clique em Publicar, estou selecionando esta imagem. Vamos aplicar as animações aqui. Vamos aplicar aqui, desvanecendo para a direita e duração da animação que estou tornando lenta. Ok, e o mesmo com esta imagem, preencha para a direita e lentamente Ok, agora publique. Então você pode ver que parece muito bom, certo? Você pode ver como essa parede está linda. Vamos aumentar a lacuna aqui, voltar para a guia Avançado, desmarcando o preenchimento Do topo, estou fazendo 30 pixels. Agora publique seu conteúdo. 43. Quarto contêiner: Olá pessoal, no vídeo de hoje, criaremos essa seção. Você pode ver esse belo fundo gradiente. E quando eu passo o mouse sobre a minha imagem, ela está girando, certo Então, vamos criá-lo. Estou escolhendo essa primeira estrutura e altura mínima, estou fazendo 950 pixels Vá abaixo do estilo Agora vou dar um fundo gradiente. Estou escolhendo gradiente e cor Imagine que você possa definir o local dessa forma Ok. Estou fazendo 30% da localização da minha primeira cor e do segundo código de cor. Então eu dou essa cor. Você pode ajustar a localização da segunda cor, e eu estou fazendo com que seja 50%. Ok. A partir daqui, você pode ajustar o ângulo dessa maneira e escolher o tipo se eu escolher o rádio aqui para que você possa ver. E dessa forma, ao escolher assim, você pode ver como essas cores estão se comportando Então, estou escolhendo a posição no canto superior direito, vou na guia Avançado, desvinculo o preenchimento e, do lado superior, eu tenho 60 pixels, agora o ícone Picom plus, e copio para este título, colando-o aqui no centro de alinhamento E copie para este título, cole aqui e mude o título para liberar Em Estilo e toque no centro de alinhamento, estou criando 800, inclinando a margem a partir do lado superior, estou criando -15 agora PC mais o ícone, arrastando Vamos escolher essa imagem, clicar em Conslectimage resolution full na guia Style, borda do rádio, estou criando 30 pixels na guia Avançado, abro a opção de transformação e, ao passar o mouse, dou o valor de rotação como um, e agora passo o mouse sobre minha imagem, para que você possa ver que nossa imagem está girando e agora passo o mouse sobre minha imagem, para que você possa ver que nossa imagem para que você possa ver Estou copiando para minha barra de pesquisa e colando aqui. Vá em Sita, largura, estou criando aqui 600 e altura 70, cor do texto, estou criando branco e a cor de fundo estou fazendo preto, abra a opção do botão Aqui eu não vou fazer nenhuma mudança. Quero fazer algumas mudanças aqui, voltar, abrir a opção do botão. Estou removendo o estofamento. Ok. E ao passar o mouse, vou torná-lo preto puro Então, agora, quando eu passo o mouse sobre isso, sim, parece bom agora Então, agora esse painel de pesquisa também está pronto, agora publique-o e veja a prévia. Eu quero aumentar o espaço aqui. Então, selecione essa imagem. Narrando a margem e, do lado superior, estou fazendo 20 pixels, minimize-a Acho que deveríamos precisar de mais espaço. Ok. Agora publique-o. Então, sim, 44. Quinto contêiner: Olá, pessoal, no vídeo de hoje, faremos essa seção. Aprenderemos como fazer esses botões legais. E quando eu passo o mouse sobre meus ícones, você pode ver como isso está lindo Então, vamos começar. Vamos começar nossa próxima seção agora. Estou escolhendo essa estrutura. Na guia de estilo, quero pegar o fundo gradiente Então, primeira cor, estou escrevendo o código de cores. Aumente sua altura mínima. Você pode ajustar a localização dessa maneira. Estou ganhando 55% e, para o segundo, o código de cores é o local. Estou escolhendo 80% da posição do rádio, vamos colocá-la no canto superior direito Você pode explorar as outras opções. Espero que você entenda, vá para Avançado, abra o preenchimento e, do lado superior, 60 pixels, 790, vá para Estou escolhendo esta posição da imagem, centro, linha de anexos, repetição, sem repetição, tamanho da capa. Eu quero adicionar algum texto, então clique no ícone Coplus, arrastando o widget de título Acesse o centro de alinhamento técnico da Style. Tamanho 30 e peso 500, estou duplicando esse título, cole aqui, mude o texto Vá para Syla 35 e pese 700. Estou removendo esse valor de altura da linha. Estou removendo essa margem, copiando para este título, colando aqui, alterando o conteúdo. Vá para Srta. Estou fazendo 600 e tamanho 22. Agora selecione esse contêiner em layout. Estou criando conteúdo justificado para que você possa ver centro de itens de linha que estou procurando por espaçador. Se você quiser espaço em qualquer lugar, então você pode usar este widget Estou fazendo com que seu valor seja de 35 pixels. Agora clique no ícone Coplus, procurando por botão e agora vou usar este botão de plugins profissionais, altere o texto aqui Centro de alinhamento, vá para o início com, vamos torná-lo 150 e, sob a tipografia, Poppins tamanho 15, x cor branca e cor E ao passar o mouse sobre a cor do texto em preto e na cor de fundo, quando eu passo o mouse sobre o meu botão, para que você possa Isso está bonito, mas eu quero torná-lo mais atraente. Quando clico aqui, você pode ver que existem diferentes tipos de animação ao escolher dois D, então você pode escolher os tipos de animação aqui e há muitos planos de fundo que você pode escolher aqui. Único, você pode escolher. Assim, você pode ajustar de acordo com sua escolha. Eu quero fazer com que seja do tipo animação, do outro lado. Agora, quando eu passo o mouse sobre o meu botão , você pode ver que está muito bonito Tipo de borda, quero torná-la sólida, mas a largura, um pixel e a cor da borda. Mas o botão de raio 50, preenchendo 20 para cima, está Agora clique no ícone de adição e solte esse botão dentro do contêiner. Em primeiro lugar, a direção do centro e do centro dessa linha de contêineres. Espaços entre os botões, estou criando 30 pixels. Agora arraste esse botão aqui. E duplique mais uma vez. Agora basta alterar o texto instantaneamente e aqui você pode ver que nosso texto não está claramente visível nesta imagem. Então selecione descontinuado, vá até a etiqueta de estilo, abra a opção de sobreposição de fundo Aqui estou adicionando imagem. Eu escolho esse plano de fundo. Eu escolho essa imagem como sobreposição. Você pode ver aqui uma camada preta na parte inferior. E você pode ver agora que nosso texto está claramente visível, mas para torná-lo mais do que isso, podemos aumentar sua opacidade, então estou fazendo Ok, então você pode ver agora que nosso texto está claramente visível, assim como a imagem. Agora selecione este contêiner, vá para Avançado, preenchendo 30 de todos os lados, clique no ícone de adição, clique botão direito do mouse e copie e cole este título aqui, altere o texto Vou aumentar o tamanho 45 e o peso 900, copie para este widget do editor de texto E cole aqui, mude o texto, vá para Sita É cor. Estou fazendo. Sob tipografia, tamanho 16 pixels e peso 500. Clique no ícone de adição, arrastando um contêiner, linha de direção pesquisando o widget de ícone Arraste-o aqui. Escolha o ícone Ida e eu escolhemos este ícone e visualizamos a forma da pilha arredondada Vá para Sita, cor primária Eu escolho essa cor clara transparente e a cor secundária branca e sobre a cor secundária preta quando eu passo o mouse sobre ela, para que você possa ver, vá para Avançado a partir daqui, classe CSS, estou adicionando o ícone de gradiente Opção CSS personalizada. Estou colando meu código. Então, agora, quando eu passo para o meu ícone, você pode ver o fundo gradiente Agora copie, agora duplique esse ícone. Agora é só trocá-los. Ok, agora clique no ícone de adição. Arraste o widget de imagem e escolha a imagem. Vamos dar a ele uma borda de 15 pixels, copiando esse botão e colando-o aqui. Vá para Avançado e marque do lado superior, eu dou -55. Parece bom agora. Agora, selecione esse contêiner, vá para Ser abaixo do sólido padrão, raio da borda 20 e pinte a borda com Agora você pode ver que não há lacunas, então selecione o contêiner principal vincule-o a lacunas de 40 pixels. Então você pode ver que esta seção também está pronta agora. Vamos delimitar isso aqui também, tudo bem. Então, por baixo, faça com que também seja de 20 pixels. Ok. Publique seu conteúdo e vamos ver a prévia. Quando você passa o mouse sobre ele, você pode ver como isso está lindo, certo? 45. Sexto contêiner: Olá, pessoal. Hoje faremos esta seção. Você pode ver como esses cartões estão lindos alinhados. Isso nos dá três defeitos. Parece muito bom. Então, vamos começar e fazer esta seção. Então, estou usando a estrutura de duas colunas e altura mínima, aumentando dessa forma, usando o estilo. Estou escolhendo esta posição da imagem, anexo central, rolar, repetir, não repetir, tamanho de exibição, capa, copiar para este título e colar aqui. Copie para este título e cole aqui, altere o conteúdo, cole seu conteúdo aqui. Estou usando dita aqui depois de cinco palavras. Vá em Alinhamento de estilo, tamanho esquerdo, mantenho 60 Faça com que esse título também fique alinhado à esquerda. Agora duplique para isso, copie para isso e cole aqui, copie para o botão Cole aqui, vá até a tag Avançado, remova essa margem. Eu darei aqui -15. A seção do lado esquerdo está pronta. Agora vamos pular pelo lado direito. Pesquisando por carrossol, arrasto esse carrossol de mídia aqui. Você pode escolher a capa como quando você escolhe agora que o arousol está selecionado, e quando você escolhe a apresentação de slides, agora você pode ver E quando você escolhe o fluxo de cobertura, você pode ver as imagens assim. Então eu vou escolher a skin aqui, fluxo da capa e escolher as imagens e escolhendo essa, abrir o item dois. Você também pode fornecer o link aqui. Agora estou escolhendo este item três, slides por visualização, dois e slides para rolar cinco e altura. Vou manter 520 de largura, estou fazendo com que seja 100% Vá abaixo de Sta. Você pode dar o espaço assim, mas estou fazendo com que seja zero, largura da borda de três pixels, raio da borda 50, cor da borda, estou fazendo com que abra a etiqueta de navegação A navegação são essas setas. Você pode ver agora que está em preto, mas estou fazendo com que seja branco. Se você não quiser essas setas , podemos desativá-las aqui Flechas, etiqueta Nannne. Ok, então pare, estou desativando essa opção. Então, dessa forma, eu o projetei para que este seja nosso carro de mídia. Estou habilitando essas opções de setas. Podemos rolar para o lado direito ou para o lado esquerdo. Então eu acho que essa é uma boa opção, então eu nunca fiz isso. Ok, agora esta seção também está pronta, mas estou selecionando esse contêiner e justificando o conteúdo, tornando-o central. Dessa forma, selecione para este contêiner, centro de conteúdo justificado. Então, agora esta seção também está pronta. Depois de fazer qualquer coisa, não se esqueça de clicar em Publish Burton Vamos ver a prévia agora. Portanto, esta seção também está pronta. Eu quero fazer uma lacuna aqui, então vamos fazer isso corretamente na guia Avançado, vou dar o preenchimento aqui na parte inferior do site Ok, agora publique. E vamos ver aqui. Ok, então agora isso está bonito. Você pode ver como isso está lindo, certo. 46. Sétimo contêiner: Ei, pessoal, no vídeo de hoje, faremos essa linda seção de depoimentos Então, vamos começar. Vá para Style gap. Tipo de fundo gradiente. Ocação 40% e segunda cor. E localização 70% e ângulo que estou fazendo aqui 165. OK. Agora, copiar e colar, copiar e colar, faça com que gire, mude o texto Bom na guia de estilo, tamanho 65, coloque no centro a seleção do contêiner principal na guia Avançado, preenchimento. Estou enviando um prompt para o site principal de 50 pixels. Em busca de depoimentos, cole seu texto Dessa forma, estou excluindo esses dois itens e duplicando este Mude a imagem. Peguei três itens aqui. Vamos duplicá-lo. Peguei quatro itens aqui e a pele intestinal, para que você possa ver com bem, posição da imagem que estou fazendo à esquerda, o alinhamento à esquerda, slides por visualização, dois, mas vamos fazer isso 100% em opções adicionais Setas, estou desativando, taginação. OK. Vá abaixo do ritmo de toque de estilo entre esses 30 e a cor de fundo, você pode ver a cor de fundo. Estou criando preto e raio de borda, estou dando 15 pixels Você pode ver aqui a garrafa. Preenchimento 30, abra a opção de conteúdo, lacuna, fixador 25, cor do texto Estou fazendo preto, e no tamanho estou fazendo 250 e lacuna 15. Essa é a lacuna entre a imagem e esse texto. Então você pode ativar a borda, assim. Você pode dar a borda, mas eu não a quero, então estou desativando-a Borda de dez pixels, abra a opção de bolha agora Então, eu estou dando a cor aqui. Desvincule o preenchimento do lado superior, estou fazendo 30, direito, 25, inferior 20 e lado esquerdo, 25, e raio da borda 15 por cento aqui, estou habilitando estou Cor da borda, estou tornando branco e a largura da borda em dois pontos Agora abra a guia de conteúdo e a cor do texto que estou tornando Agora selecione esse contêiner principal. E aumente a altura mínima, 665 dígitos Publique seu conteúdo. 47. Oito contêiner: Olá, pessoal. Então, no vídeo de hoje, vamos fazer essa linda seção. Então você pode ver como o Tapi está lindo. Quando eu abro isso, você pode ver como a cor do texto é alterada. A cor do plano de fundo é alterada. Isso está bonito. Então, vamos começar a fazer isso. Estrutura de duas colunas, altura mínima dessa maneira. Vá abaixo do motor de partida. Tipo de plano de fundo. Imagine escolher isso. Você pode ver que essa imagem está se repetindo. Portanto, não repita, tamanho da capa da tela, posição de rolagem, centro central. OK. Clique no ícone de adição, arrastando um widget de imagem Escolha sua imagem. Essa. Agora, a seção certa, vamos fazer isso rápido. Então copie para este passado, copie para isso, cole isso, mude o título. Estou usando breakdan aqui depois da palavra perfeita na guia de estilo Tamanho 54 pixels e 900 linhas de altura, 60 pixels, clique no ícone de adição, procurando por Acordeão Então, eu estou usando esse kit de elementos, widget de acordeão, abra isso, mude seu mais apertado, Se você desabilitar isso, todos esses slides serão exibidos assim. E se você habilitar isso, o primeiro slide sempre abrirá, abra o segundo slide, altere o texto, cole minha descrição. Estou excluindo isso e duplicando para isso e o estilo que estou escolhendo aqui, light Veja aqui, como isso está lindo. Agora vá para a tipografia Sitab, Poppins. Não preciso mudar o tamanho, a cor branca. raio da borda é de 40 pixels, retirando o preenchimento 20 na parte superior, na parte inferior 20 e na esquerda 35, e a margem inferior dessa forma, você pode ajustar para que eu faça dez, abra Então, cor, você pode alterar a descrição que estou tornando branca. E a família exibe uma cor de fundo como essa e, dando à borda 40 pixels, abra a opção de borda. Então isso também é feito. Quero fazer uma coisa aqui, abrir a opção de título e fechar, quero a cor em preto e a cor de fundo Então, quando fechamos a guia, a cor é preta. E quando abrimos a guia, você pode ver essa cor azul. Então, parece bom. E no raio da borda flutuante, eu também quero usar 40 pixels OK. Portanto, esta seção também está pronta. Agora, selecione esse contêiner principal. Tampas de 60 pixels, em avançado, desvincule o preenchimento e, do lado superior, estou criando Aproveite esse contêiner e um centro de conteúdo justificado. Agora publique seu 48. Nono contêiner: No vídeo de hoje, faremos uma tabela de preços. Então você pode ver como essas lindas estão. Então, sem mais delongas, vamos começar. Aumente a altura mínima na etiqueta de estilo. Em Tag Avançado, 50 preenchidos a partir da parte superior, copie esta Colagem Agora ícone mais ícone, Arrastando um contêiner, linha de direção Clique no ícone C plus. Eu arrastei mais um contêiner. Agora duplique-o, vá para a cor de fundo do SDA. Abra a opção de borda, padrão como sólido e borda com três. Mas o raio 15, pixel, fica em Advancer, manipulando o preenchimento e, de cima para 40, para a direita, 45, para baixo 50 e Agora, ícone LConpl, arrastando seu widget de cabeçalho. Vá em Alinhamento Srta e coloque a placa colorida do texto abaixo dos pontos tipográficos para mostrar claramente que, em primeiro lugar, estou Posteriormente, faremos preto, tamanho 12 pixels e transformaremos em maiúsculas. Ok, agora vá para a tag avançada, desvincule o preenchimento dos dez primeiros, da direita, 15, dos dez inferiores e dos 15 da esquerda Abra a opção CSS personalizada, cole meu código aqui para que você possa ver o fundo do gradiente Agora abra a opção de layout e linha self que estou criando e você pode dizer agora. Agora vá para a guia Estilo e a cor do texto que estou tornando preta. Então veja aqui agora, isso está parecendo bom. Agora, clique no ícone de adição e, pegando um contêiner abaixo desse título, espere selecionar este contêiner e a direção em que estou criando Agora arraste esse contêiner aqui. Clique no ícone de adição, arrastando o dólar do título do título sob a cor branca do texto Siletac Duplique isso e altere o título para 99 tamanho 55 e peso 900 do Sitec Agora selecione para este contêiner e direcione a linha e as lacunas, agora copie para isso e cole aqui. Altere o conteúdo em alinhamento da guia de ladrilhos, laboratório e família, tamanho 27, lápis, peso 600 Agora copie para este editor de texto, cole aqui, altere o conteúdo. Sob a etiqueta de estilo, estou fazendo essa cor e tipografia com peso 600 Agora vamos usar a lista de ícones. Então, em vez de fazer uma nova lista, estou apenas copiando para o passado aqui, isso economiza nosso tempo. Agora é só mudar o conteúdo. OK. Agora vamos duplicar o botão também Também copiaremos para o botão, alteraremos o conteúdo na guia Avançado, removendo essa margem. Na verdade, darei a margem entre os dez primeiros. Agora você pode ver que nosso primeiro cartão de preços está pronto. Duplique isso e exclua isso. Ok, agora, publique, selecione este contêiner e o layout, aumente a altura mínima aqui. Agora está tudo bem. Publique-o. Selecione esse contêiner externo. Vamos aumentar a lacuna aqui, publicar em 30 px e ver a prévia agora. 49. Décimo contêiner: Ei, pessoal, o que está acontecendo? Espero que você esteja gostando. Vamos começar nossa próxima seção. Aumente a altura mínima na guia Estilo. Cor de fundo. Eu colei meu casaco. Copie para isso. Cole isso. Copie para isso, cole. Mude o conteúdo. No tamanho da guia de estilo de 55 pixels TCN mais o ícone, arraste um contêiner, linha de direção Agora o ícone PCN plus, procurando a caixa de imagem Vou usar este elemento Image Box des para que você possa ver quando eu amplio quando eu sobrecarrego meu peso, para que você possa ver o efeito Zoom. Então eu escolho essa imagem e a dupliquei. Ok, agora selecione esta e a área de conteúdo, estou pegando uma caixa flutuante. Todas essas opções são muito boas. Você pode explorar isso. Então você pode ver que quando eu passo o mouse sobre minha imagem, o outro conteúdo revela o corpo e o título abertos e eu não quero nenhum ícone, então desative-o, por favor, a descrição Estou excluindo isso porque não podemos ver, não podemos ver o corretamente Então você pode ver como isso está lindo, certo? Você pode ajustar um alinhamento como esse, mas estou centralizando Agora, abra a opção do botão. Estou desativando isso, vá para a guia Estilo, altura, estou fazendo 80, Largura, estou fazendo 80 Cor de fundo preto. Abra a opção de imagem, raio de borda 20. Agora você pode ver imagens arredondadas, abrir a opção de corpo, tipo de borda sólida, aquarela Agora título. Então, você pode ver o espaçamento Agora estou fazendo dez, abro a tipografia, estouro, 20 porcos na cor branca, abro o estilo flutuante e, em Over, vamos fazer um a um Agora, quando eu passo o mouse sobre ela, para que você possa ver que essa altura está boa Agora vamos apenas duplicar isso e esta seção também está pronta Exclua isso agora, estou apenas alterando as imagens. Coloque isso no layout, aumente sua altura. 50. Décimo primeiro contêiner: Ei, pessoal, neste vídeo, vamos fazer essas duas lindas seções. Vamos começar. Uma guia Estilo, cor de fundo e cópia para esta pasta, Op e cole. Altere o título em Style tear size I make 65. Agora clique no ícone de adição, arraste um contêiner e, na linha de direção, clique no ícone O plus, arraste mais um contêiner e duplique-o Estou arrastando este widget para Image this one, resolução de imagem full dieta fight Vamos torná-lo um objeto padrão completo com capa. Sim, está tudo bem. O raio da borda faz com que seja um pixel. Antes de tudo, selecione esse contêiner e faça sua linha de direção. Agora KCN plus icon, procurando por caixa de ícones Vou pegar a caixa de ícones Elements c, esta. Não quero nenhum ícone, então estou desativando isso Mude o título, mude a descrição, no modo de leitura, e eu quero o botão, então habilite o rótulo, altere o título, estou escrevendo E o ícone desativá-lo, abra as configurações. Agora vá para Sita, a cor do fundo, tornando-a transparente, preenchendo Não quero que ninguém use o padrão, exclua os valores, abra a opção de conteúdo agora, então a cor do texto, a cor do título, deixando-a branca e sobre quem está o código de cores . Agora, quando eu passar o mouse sobre minha caixa de ícones para que você possa ver a cor do título, fique azul ao passar o mouse Então, agora, sob a tipografia, Poppins, tamanho 45, peso 700, agora, descrição, descrição, cor Ok, e eu copio o código de cores e colo em O. Ok. E sob tipografia, Poppins tem 17 pixels. Abra a opção de botão, preenchimento, dou 20 agora desvinculo do lado direito, 40 e do lado esquerdo também 40, desvinculo a margem, do lado superior, dou 12 pixels Abra a tipografia e espere uma cor de texto de 600, estou fazendo preto Cor de fundo, vou fazer uma dupla de verde e borda. Vamos dar 40 pixels. Agora vá para Avançado, cole o código para avaliar o plano de fundo do botão, para que você possa ver cores bonitas Agora duplique essa seção inteira. Faremos apenas pequenas mudanças. Então, vamos fazer isso. Em primeiro lugar, flexionei meu contêiner Prent, entrei em Avançado e coloquei o preenchimento da parte superior 50. Não quero esses títulos, Não quero esses títulos OK. Vou mudar o pedido agora. Eu selecionei meu contêiner, vá em Avançado e faça o pedido, inicie. Agora vou alterar o texto aqui, alterar a imagem, esta, selecionar e, para este contêiner, e, para este contêiner, ir em avançado e fazer o pedido, iniciar o contêiner, agora não consigo selecioná-lo, abrir o navegador e, a partir daqui, selecionei meu Vá em Avançado e eu darei a orientação horizontal mais 60. Agora está no lugar certo. Ok, então você pode ver com que facilidade criamos esta seção. Agora clique no ícone de adição. Estou pegando um contêiner aqui e na largura, estou ganhando 26%. Agora, ícone Picon plus, coloque mais um contêiner dentro desse contêiner, centro de conteúdo justificado, vá em Avançado Estou fornecendo um preenchimento de dez pixels do lado de fora e sua posição para deslocamento absoluto , orientação horizontal -55 e valor de deslocamento de orientação vertical Então, agora clique no ícone de adição. Adicionando um título, altere o título em 25 de dezembro, grave a cor preta do tia, centro de alinhamento, alfinetes pop tamanho Agora estou fazendo sua cor branca, pesando 700. Agora, relaxe neste contêiner. Eu quero fazer o fundo gradiente. Estou colando meu código aqui. Ok, selecione o título e agora torne sua cor preta. OK. Então, agora esta seção está pronta agora. 51. Tornando seu site responsivo: Vídeo, tornaremos nosso site responsivo para tablet e celular Então, vamos pular para o retrato do tablet. Então, vocês podem ver, pessoal, que isso está acontecendo dessa maneira no tablet. Vamos corrigir primeiro essa seção do lado direito, então eu selecionei meu título. Tamanho da aba de instalação: eu tampo 65 pixels. Agora vá para a guia Avançado, remova a margem. OK. Agora selecione esse título. Estou mantendo o tamanho 70 pixels. Agora selecione este widget do editor de texto e remova a margem. Vá para a tag de estilo, vou manter seu tamanho padrão e aumentar a altura da linha. Eu mantive 1,3 m de altura da linha. Agora selecione este contêiner externo e sua direção na coluna que estou mantendo e remova os centavos de itens Aline começando aqui Selecione este título, vá até a guia Estilo. Estou mantendo seu tamanho de 23 pixels. Há muito espaço entre esses dois textos. Vamos selecionar isso. Dando uma margem do lado inferior, dou uma margem do fundo -40 Agora selecione este editor de texto, e aqui daremos a margem do lado superior -20. OK. Agora, selecione essa pesquisa. E vá para Style tech. Estou mantendo sua altura 70. Selecionei meu primeiro widget de contador e usei a tag de estilo a partir deste número, e vamos definir seu tamanho Eu o faço no tamanho potty piger copy e, no estilo PasetylePast, seleciono este widget, vou mais apertado e, a partir daqui, estou diminuindo a altura da linha. Vamos manter isso às 11h da manhã, copiando e colando, no estilo de colar. Agora, selecione isso. Estou mantendo o tamanho 50 pixels e a altura da linha, vamos diminuí-lo. Eu mantive 1,2 m de altura da linha. Aqui, essas cartas parecem boas, mas estou diminuindo o preenchimento Selecionei meu recipiente de disco, fui para avançado e, de cima para baixo, estou fazendo 30. Guardei 30 acolchoamentos de todos os lados Eu mantive 20 pixels de todos os lados. Portanto, copie para este contêiner e cole o estilo. Estilo de pasta. OK. Agora, essas três cartas estão muito bonitas. Então, selecionei meu contêiner principal e estou diminuindo a altura mínima Vamos mantê-lo em 710 pixels. Eu selecionei meu título, vá na tag de estilo. A partir daqui, vamos manter o tamanho de 50 pixels. Selecione este widget do editor de texto. Seu tamanho eu estou mantendo 15 pixels. Agora estou selecionando meu recipiente de disco, vou no Advanctag executando o pelicano do lado superior, estou fazendo 50 e do lado esquerdo, 20 pixels ou vamos fazer 30 OK. Agora eu selecionei essa imagem. Talvez vá para Sta. Estou mantendo a altura aqui 500. Este contêiner está bom agora. Selecione este título agora, vá em Definir seu tamanho. Vamos mantê-lo com 55 pixels, selecionar este contêiner pai, diminuir sua altura mínima, e 25 pixels. Agora, seleciono esse contêiner e a lacuna criando 15 pixels OK. Agora, esta seção do lado esquerdo está bem. até este título, vá na guia Estilo Em tipografia, estou fazendo com que ela tenha um tamanho de 40 pixels, folga para este texto dwidgt aqui vamos dar Ok, então agora não precisamos mudar nada. até esse título, Vá até esse título, clique em Estilo e toque Aqui estou fazendo seu tamanho de 45 pixels e a altura da linha, estou fazendo 1,4 am. Use este widget de mídia também, altura que estou criando 400 está bem. folga neste contêiner principal, diminua a altura mínima. Está tudo bem. Esqueça a largura deste carrossel de depoimentos, vamos fazer com que seja de 520 pixels e slide por visualização, nós também o faremos E agora vamos fazer isso com a guia 955 Style, abra a opção de bolha E preenchimento, estou fazendo aqui dez pixels. Sim, está tudo bem. Ok, agora esta seção de depoimentos também reduz a folga do contêiner principal, diminui a altura mínima, 620 está diminui a altura mínima, 620 Aqui, não precisamos mudar nada, basta ir até esse título, diminuir o tamanho Estou fazendo com que 40 pixels diminuam a altura da linha que eu limitei às 1,3 da manhã Ok, então esta seção também está pronta. Selecione este título, vá na guia de estilo, tamanho, estou criando 45 pixels. Ok, aqui, selecione este contêiner externo, vá na guia avançada. Nós daremos o preenchimento aqui. No lado direito, estou fazendo 150 pixels da direção, estou criando uma coluna. Agora vá para a guia Avançado, desvincule o preenchimento. Do lado esquerdo, estou fazendo 200, está tudo bem e o mesmo com o esquerdo. Agora, esta placa está assim, mas acho que deveria dar mais preenchimento, então estou fazendo 250 pixels do lado esquerdo e direito OK. Agora está tudo bem. Use este contêiner com folga. Vá para avançado A partir daqui, também estou dando ao preenchimento 30 pixels de todos os lados Agora este cartão está com boa aparência. Basta copiar o estilo e colar o estilo. Estilo Pase. Portanto, esta seção também está pronta. Agora vamos pular para esta seção. Selecione essa direção do contêiner. Estou criando uma coluna e vou até a equipe avançada para desvincular o preenchimento Aqui, também forneceremos o preenchimento do lado esquerdo e direito ao pixel ti aqui Agora você pode ver que isso também está pronto. De cima para baixo, estou dando o preenchimento. Ok, então esta seção também está boa agora. Selecione esta imagem e altura. Vamos fazer com que 370 pixels tenham uma altura adequada. Selecione este contêiner, e aqui estou fazendo 210 pixels. OK. Sim, está tudo bem. Agora, selecione isso, vá para Sytaopen, a opção de conteúdo, e eu estou fazendo 35 OK. Aqui também faremos 35 fixadores e selecionaremos este contêiner Faça com que seja de 210 pixels, selecione esta imagem. Também o manteremos em 370 pixels. OK. Portanto, esta seção também está pronta agora. Então, agora vamos tornar nosso site responsivo para dispositivos móveis. Assim, você pode ver aparência do nosso site em nosso dispositivo móvel. Antes de tudo, solte este contêiner, vá para Avançado e faça o pedido até esse título, vá em Estilo e toque Estou fazendo com que seja 45 fixer. Agora, volte para este título. Vá em Estilo, toque em. Vamos fazer com que seja 45 fixer aqui. Agora selecione o texto generativo e desvincule a margem. Do lado inferior, estou dando -25. Selecione este widget de texto, vá para Estilo t e torne-o de 13 pixels, selecione este contêiner Aqui estou fazendo a lacuna zero, selecione o texto. Aqui estou fazendo com que tenha um tamanho de 20 pixels. Selecione este widget de pesquisa, vá na guia de estrelas Altura, estou fazendo 50. Selecione este contêiner, vá na guia avançado, desvincule a margem E do topo, vamos fazer com que seja -40. Selecione esse contêiner, vá até o layout e torne a lacuna zero. OK. Selecione esse contêiner externo. OK. Agora vamos pular para a segunda seção, até esse título, aumente o tamanho Não precisamos mudar nada com cartões. Está bem? Não precisamos mudar aqui. Além disso, basta diminuir o tamanho desse texto. Então, faça pizza do tamanho 35. Altura da linha 1,3 da manhã, folga neste recipiente, faça as lacunas aqui da pizza Selecione o contêiner, desvincule o preenchimento da parte superior 40 e da parte inferior, da parte inferior, vamos dar 40 pixels e, do lado esquerdo, 20 Agora, esta seção também está pronta aqui, relaxe esta imagem. Vá em Avançado, desvincule o preenchimento. Eu selecionei esta imagem, vá em avançado, abro o modo de resposta. Aqui vamos nos esconder no retrato do celular. OK. Então, essa imagem está boa porque movemos a margem. Então, agora selecione esse título, torne-o de 50 pixels, diminua a altura da linha. 1,3 da manhã, há muito espaço, então selecione o contêiner do pedente, diminua a altura 490, selecione este título, vá até a guia de estilo, faça seu tamanho 25 pixels, selecione este título, faça seu tamanho 20 pixels e selecione o espaçador selecione este título, faça seu tamanho 20 pixels e É o tamanho, vou fazer 20 pixels. Ok, selecione o contêiner, aumente sua altura mínima. 700 pixels. Dê uma folga neste título. Faça com que seja de 30 pixels aqui, folgue até o contêiner Gap, estou aumentando. Aqui, 32 pixels e conteúdo justificado, vamos colocá-lo no centro. Sim, agora, eles estão parecendo bons. OK. Agora vamos entrar nesta seção e selecionar o tamanho do título. Vamos diminuí-lo ainda mais. Então, 38 pixels, selecione o texto. Estou fazendo com que seja de 11 pixels. Está bem? E levou a esse cabeçalho, torne-o menor. Vamos fazer 45 pizzas, continuar com isso, ir até o conteúdo e deslizar por visualização, uma. OK. E com o que estou fazendo aqui 340, precisamos fazer algumas mudanças aqui, em estilos e abra a opção de conteúdo Estou fazendo pizza tamanho 12. Ok, abra a opção de imagem. Estou fazendo o tamanho aqui, 160 pixels. OK. Portanto, esta seção também está pronta. Clique no contêiner principal. Diminua a altura, 510 pixels, selecione para este título seu tamanho Estou fazendo 30 pixels. Não precisamos lidar com esse adfigus. Ok, então selecione isso agora. Vamos fazer com que ela tenha um tamanho de 30 pixels, diminua a altura da linha em 1,3 pixel. OK. Agora, selecione o contêiner Souter desvincule o preenchimento. OK. Então, acabamos de desvincular esse preenchimento e essas tabelas de preços ficam muito bonitas em nosso retrato móvel em nosso dispositivo móvel Então, agora selecione esse título. Aqui, vamos fazer essa altura de linha de 40 pixels, 1,2 am, selecionar o contêiner externo e desvincular o preenchimento Ok, então você pode ver que eles também estão muito bonitos. Selecione este título, torne-o de 50 pixels, diminua a altura da linha, 1:00 A.M. E esconda-o aqui também, selecione o Vá em Avançado, responsivo oculto enquanto retrato, selecione este contêiner, vá em Retrato móvel Hyden responsivo avançado Ok, agora minimize isso e veja. Isso está bonito. Então, vejam como nosso site está lindo em dispositivos móveis. O. Então, espero que tenham gostado da palestra de hoje Este foi o nosso vídeo de hoje. No próximo vídeo, criaremos os menus e responderemos a esses menus. Obrigada. 52. Cabeçalho e rodapé: Agora vamos criar nosso cabeçalho e rodapé. Então, vamos fazer nosso cabeçalho primeiro. Primeiro, criaremos menus. Então, para isso, iremos à aparência dos menus. Forneça o nome do menu, local de exibição, o menu principal e clique em criar menu. Abra a opção de links personalizados. partir daqui, digite o URL, hash, home, no texto home, clique em adicionar ao menu Hash Dessa forma, faça com offs Dessa forma, crie outros menus Agora, criaremos nossos cabeçalhos para solicitar modelos acesse o criador de temas Clique no cabeçalho. Clique em Adicionar Não. Você pode selecionar aqui, mas vou criar meu próprio cabeçalho, clicar no ícone de adição e escolher essa estrutura aqui, Centro de conteúdo justificado, centro itens Aline, clique em SDA Estou mantendo a cor do fundo cinza escuro. Agora, selecione este contêiner, conteúdo justificado, centro de itens de linha. Clique no ícone de adição, Drager Image Widget. A partir daqui, escolha a Imagem. Eu escolho esta imagem, clique em Consulado. Então esse é o meu logotipo. A resolução da imagem está abaixo da largura do estilo de 100%, da largura máxima de 100% Ok. Neste centro de contêineres, clique no ícone de adição, pesquise os menus de navegação. Eu escolho este kit de elementos, menus de navegação, selecione o menu. Cardápio. Ok, então esses são os menus que encontramos e, a partir daqui, escolheremos o ponto de interrupção responsivo Escolheremos as configurações do menu móvel, selecione aqui. Estou escolhendo a linha, então escolho este show de um clique. Ok. Este ícone de hambúrguer Mostre no celular. Agora vá para Srta. Estou fazendo a cor branca do menu. Então, para isso, abra os itens de menu, estilo, item, cor do texto, estou fazendo branco. Ok. Então, agora podemos ver as mudanças. Cor de fundo que estou fazendo assim, você pode selecionar a cor de fundo, mas estou tornando-a transparente. Raio da borda, estou fazendo dez pixels. Ok, agora clique em passar o mouse. Cor de fundo ao passar o mouse, quero a cor amarela Então, quando eu passo o mouse sobre o meu menu, você pode vê-lo assim, mas vou torná-lo mais atraente Quero a cor preta do texto ao passar o mouse. Ok, agora você pode ver, clique na cor ativa do Bground na posição ativa Estou copiando esse código. Eu mantive essa cor ao passar o mouse e copiei essa cor em ativa Cor de fundo, estou criando e cor do texto preta. A partir daqui, da tipografia, surge a família. Agora abra o invólucro do menu. Você pode ajustar a altura do menu. Então, eu vou ficar com 70 70 pizza. Ok. Eu não quero fazer nenhuma mudança. Agora selecione esse contêiner. Centro e centro. Clique no ícone de adição, procurando pela caixa de ícones. Vou pegar esse. Escolha o ícone. Essa. Clique em concerto. Ok, e empilhe Shape, circle. Ok. E título, peça ajuda. Ok, então esse é o número de telefone. Vá em etiqueta de estilo, posição do ícone, marcação à esquerda, centro de alinhamento vertical e espaço do ícone, 14 pixels, para que você possa ajustá-lo assim Então, estou fazendo 14 pixels, abra a etiqueta do ícone. Cor primária, fazendo com que não exista nenhuma. Quero tornar o plano de fundo transparente. Ok. Portanto, não estou fazendo nada com a cor primária, mas com a cor secundária, estou criando o tamanho 20 pixels. Agora vá para a tag de conteúdo. A cor do cyto, eu estou fazendo essa cor Abra a tipografia, pop-ins, tamanho 15 pixels. Ok, e abra a descrição. Descrição, estou fazendo com que seja de cor branca pura e tipografia Bit 700. Ok. Agora vamos tornar o plano de fundo transparente. Então, opção CSS personalizada, para que você possa ver o fundo gradiente Agora, esse é o nosso cabeçalho. Agora, vamos tornar nosso cabeçalho responsivo para tablet e celular. No Talt, nosso cabeçalho está parecido com este. Não precisamos mudar com o logotipo, mas vamos corrigir o subestilo dos menus Abra o estilo do item de menu em branco cáptico normal. Com isso, você não pode mudar a cor. Estou fazendo preto por cima, ok. E o mesmo com o Okay ativo. Abra a tipografia. Estou fazendo o tamanho dos meus menus, 11 pixels. Ok. Nossos menus estão com boa aparência. Minimize isso. E sim, nosso cabeçalho está lindo no tablet. Aqui eu quero fazer uma coisa, selecionar o contêiner, ir em avançado, desdobrar o preenchimento, selecionar este contêiner, desdobrar o preenchimento, selecionar este contêiner , desdobrar o preenchimento. Ok. Eu minimizo isso. E sim, está tudo bem agora. Agora vá para o modo móvel. Agora vamos tornar nosso cabeçalho responsivo para dispositivos móveis. Em primeiro lugar, estou selecionando meu contêiner. Abra a opção responsiva no topo do Portrd móvel. Está bem? Agora, selecione este contêiner, vá até a guia Layout. Conteúdo justificado, fazendo com que comece. A partir daqui, os itens de linha começam. E lacuna zero. Ok. E altura mínima fazendo largura, estou fazendo 200 pixels. Ok. Eu selecionei o contêiner principal do ícone de hambúrguer A largura do layout Go under já é de 100 pixels. A partir daqui, alinhe os itens que estão no final. Então, agora esse ícone de hambúrguer está no final. Ok. Largura, estou fazendo 100 pixels. Ok, agora você pode ver nosso ícone de hambúrguer e esse loco está em uma fileira Bata no contêiner principal, vá até a guia de layout e desvincule a lacuna Lacuna na coluna, estou fazendo 20 pixels. Agora, selecione o ícone do hambúrguer, escolha o estilo. Abra o estilo Hamburger. Em primeiro lugar, a cor do ícone do hambúrguer. Vamos torná-lo branco. Ok. Então, agora podemos ver as mudanças que precisamos no tamanho do ícone 20. Ok, em Howard, em Hover, eu quero torná-lo branco Você ainda pode ver ao passar o mouse que é branco e a cor de fundo, vamos torná-lo preto Ligue as roupas ao Hover, você pode ver que nosso menu é totalmente responsável pelo celular, então está E quando você passa o mouse sobre ele, você pode ver essa linha azul e o fundo preto, que parecem muito bons Agora vamos voltar. Nossa cabeça está firme. Agora é só importá-lo. Clique em Publicar. Adicione a condição de todo o site, salve e feche. Ok. Agora abra o site, publique seu site e recarregue-o Então vocês podem ver como nosso cabeçalho está lindo. Eu quero isso na rolagem. Nosso cabeçalho deve estar fixo. Então, clique no cabeçalho, solte o contêiner principal vá até a guia Avançado A partir daqui, abra os efeitos de movimento, com a parte superior adesiva. Ok. Agora, minimize a barra. Quando eu vou até o meu site, você pode ver que nosso cabeçalho está fixo na parte superior E quando eu passo o mouse sobre meus menus, eles parecem incríveis Ok, então nosso site está muito bonito, certo? O que eu quero agora, quando clico na minha casa, ele deve redirecionar para mim nessa seção Então, para fazer isso, clique em AddItPage, copie o URL, verifique se você não está copiando para esse hash Verifique se você está selecionando o contêiner principal em Avançado e cole o ID CSS. Agora selecione este contêiner, vá em Advancab, cole o ID CSS aqui, então vá aqui, abra a seção Mas, copie o URL e cole Está bem? Esta é a seção de serviços. R OK. Agora publique seu site. Pré-visualize. Criamos nosso cabeçalho e criamos o cabeçalho adesivo. Vinculamos nossos menus às páginas, como você pode ver aqui. Então, isso está muito bonito. Então, agora vamos criar nosso rodapé agora. Então, vou voltar aqui e, a partir daqui, acesse os modelos do TheIlderFro aqui, clique no Clique em Adicionar novo. Você pode escolher aqui de acordo com sua necessidade. Estou cancelando isso. Ok. Este é o nosso cabeçalho, e agora aqui vamos criar nosso rodapé Para Footer, estou escolhendo essa estrutura. Em primeiro lugar, vá para a etiqueta de estilo, e eu vou deixar a cor de fundo cinza escuro abaixo do layout. Agora selecione esse contêiner, centro de conteúdo justificado e o início de um item de linha. Clique no ícone de adição, widget de cabeçalho Dagi Agora selecione neste contêiner os itens da linha central de conteúdo justificados e clique em Percon procurando por ícones sociais, e eu pegarei esses ícones sociais profissionais entrarei na lacuna da coluna Syap, estou tornando isso zero Row Gap 15, escolha 15 e a cor que estou criando aqui, você pode escolher. Estou fazendo branco. E com a cor de fundo transparente e na cor preta, você pode ver que eu passo o mouse sobre meus ícones, os ícones são pretos e a cor de fundo branca dessa forma e passo o mouse sobre a animação, vou escolher a animação única, estou fazendo Veja aqui esse lindo efeito. Isso está ótimo. Ok, agora abra o ícone. Tamanho do ícone, estou criando 18 pixels e tamanho do plano de fundo, você pode ver o tamanho do plano de fundo. Então, eu estou fazendo aqui 45. Ok, então para baixo quando eu passar o mouse sobre ele. Então, agora eles são pequenos. Ok, então isso está feito. Agora, faremos nossas respostas de cabeçalho, celular e tablet. Então, no TagTPortrait, nosso rodapé está incrível. Agora vá para o retrato do celular. Selecione este contêiner. Alinhe os itens que colocaremos no centro aqui. Nosso rodapé agora também é responsivo para dispositivos móveis. Depois de fazer isso, podemos publicar e adicionar condições em todo o site e clicar em Salvar e fechar Agora veja nosso site. Então você pode ver aqui o rodapé no final. Isso é bom. Agora, depois de fazer tudo, basta publicar seu site e vamos ver nosso site. Você pode ver aqui como nosso site é lindo e, no final, você pode ver o rodapé