Como criar uma LANDING PAGE no WordPress e Elementor grátis em 2025 -PÁGINA DE VENDAS alta conversão

Nesse vídeo você vai aprender a criar uma Landing page de alta conversão de forma rápida e fácil e sem precisar de programação usando WordPress e a versão gratuita do elemento essa Landing page é uma página de vendas que pode ser usada para vender cursos online e-books PLR ou serviços ou até mesmo produtos físicos é uma página de alta conversão com toda a estrutura pronta para você só depois trocar o conteúdo e as cores e adaptar Paraos seus negócios o você vai aprender tudo do zero não precisa ter experiência alguma para seguir essa aula Olá tudo

bem bem-vindo ao canal Web Design Evolution meu nome é Diogo deu bastante trabalho criar essa aula aqui então eu peço que você deixe seu like também se inscreva no canal e ative as notificações pro YouTube te avisar quando eu trazer mais conteúdo aqui para esse canal e eu pretendo trazer bastante conteúdo Então bora pra Aula eu quero te mostrar uma visão Geral do que que a gente vai fazer aqui então não pula Essa parte é muito importante eu vou utilizando um arquivo que eu criei no notion vai est disponível para você aqui embaixo na descrição

com todas as etapas que a gente precisa passar só para não esquecer de nada além desse arquivo notion Eu também tô disponibilizando todas as imagens e também um arquivo TXT aqui com as cores que a gente vai utilizar depois lá no Elementor esse arquivo notion ele contém as etapas que a gente precisa fazer desde a hospedagem as configurações iniciais no WordPress desenvolvimento então rapidamente se você nunca criou um um site que que é uma hospedagem você vai contratar o serviço da hospedagem e eles TM um computador que vai hospedar os seus arquivos do seu site

Então você precisa pagar por isso a gente vai usar um excelente custo benefício uma hospedagem de excelente custo benefício Então você não vai gastar muito link também com desconto na descrição e o domínio domínio é o nome www. nome do seu site.com a hospedagem que eu vou te ensinar a contratar você você ganha esse domínio e aqui a gente tem as etapas que a gente vai ter que passar depois a gente vai ver isso aqui e lá no WordPress daí também vamos ter as etapas mas se você nunca ouviu falar no WordPress o WordPress ele

é uma plataforma de gerenciamento de conteúdo É utilizado para criar sites mais de 40% dos Sites na internet utilizam WordPress então WordPress é bastante Popular bem conhecido e muito top e a gente vai usar o elementor o elementor é um Construtor visual é um plugin que roda dentro do WordPress e o elementor tem uma versão gratuita e uma versão paga a gente vai estar usando a versão gratuita você não precisa saber de programação para fazer páginas o elementor facilita muito você vai ver Como é fácil e ao final dessa aula aqui você vai ter aprendido

muita coisa de elementor para depois construir as Suas Próprias Páginas com layout diferente design diferente também as etapas que a gente vai ter que passar depois E aí finalmente temos a parte de desenvolvimento nós vamos ter que fazer umas configurações iniciais e aqui aí eu tenho todas as sessões da página que a gente vai estar construindo se você clicar aqui você vai ter os textos para Todas as sessões essa é uma estrutura de página de vendas de alta conversão muito utilizada pelos grandes infoprodutores aqui do Mercado Nacional inclusive Internacional e agora eu tenho uns avisos

muito importantes quanto que você vai gastar você vai ter que contratar uma hospedagem e o domínio Então a gente vai utilizar hostinger que é um excelente custo benefício então não tem como te dar um valor exato Porque dependendo de quando você tá assistindo Essa aula aqui pode ser um valor pouquinho mais pouquinho menos mas não vai ser muito link com desconto na descrição que que você vai aprender você vai aprender a contratar configurar uma hospedagem a instalar o WordPress fazer as configurações necessárias no WordPress instalar o elementor vai aprender muita coisa de elementor e vai

aprender também como estruturar uma página de vendas de autocon porque a maneira que eu vou construir essa Landing page ela vai ser uma estrutura de autoc conversão Então você vai entender também questão de estrutura para quem quer esse vídeo se você nunca criou uma página de venda se você nunca usou o elementor se você nunca fez nenhum tipo de de página Web Design tal esse vídeo vai te ensinar tudo que você precisa mas se você é intermediário e já tem algum conhecimento também tenho certeza que você irá aprender muita coisa principalmente esse vídeo aqui é

Focado para infoprodutores Se você quer ter uma página para vender produto de repente info produto PLR ou sei lá até encapsulado é só trocar as imagens depois ali os textos da essa página de vendas dá para você fazer para vender o que quiser web designers também Depende você quer se tornar um Web Designer ou é um Web Designer iniciante quer aprender mais então para você que que será feito vai ser feito uma Landing page fictícia de um curso de de é um curso para quem Quer se tornar DJ pode ser adaptada para qualquer nicho sei

lá PLR qualquer área de infoproduto quer sei lá vender encapsulado é qualquer nicho os arquivos estão na descrição como eu mostrei antes dúvidas assista a aula mais de uma vez se for necessário deixa as dúvidas no comentário interage com as outras pessoas aqui no YouTube porque a sua dúvida pode ser a dúvida de outra pessoa então de repente você pode ver que a sua Dúvida já foi respondida ou de repente outro colega vai responder a sua dúvida eu também vou vou responder e outros avisos muito importantes aqui ó siga o tutorial por completo não pula

nenhuma etapa porque se der problema depois fica mais difícil para você resolver e a questão aqui ó você pode alterar a velocidade do vídeo algumas pessoas acham que eu falo muito rápido outras muito lento então aqui no YouTube é só você vir nesse ícone aqui clicar aqui e Em velocidade de reprodução você altera aqui a velocidade Coloca mais rápido mais lento e agora o aviso mais importante deixe o seu like se inscreva no canal e ativa as notificações para garantir que quando eu postar novos vídeos aqui que o YouTube te avise e também compartilha com

algum amigo alguma pessoa que você conhece que possa ter interesse nesse conteúdo então sem mais delongas vamos começar nós vamos utilizar a hospedagem Da hostinger a hostinger é um excelente custo benefício tem um link na descrição que vai te dar um desconto então clica lá dependendo de quando você for contratar hostinger Pode ser que o valor seja um pouquinho diferente pode ter atualizado mas link na descrição com desconto só clicar lá aí depois vem aqui clica em comece agora e aqui você escolhe o plano Eu recomendo você pegar pelo menos o Premium esse aqui você

não ganha nem o domínio Então você tem que Comprar o domínio Esse aqui também Você pode colocar só um site Mas mesmo que você queira fazer só um site mesmo que você esteja disposto a comprar o domínio eu não recomendo pois esse plano ele é muito fraquinho pode dar até problema de performance então recomendo pelo menos esse aqui se você for investir pesado em anúncios na internet eu recomendo você pegar daí o plano Business ou Cloud Startup mas pra maioria dos casos esse plano Premium aqui serve muito bem eu Vou escolher esse aqui então é

só clicar aqui em escolher plano aí aqui você tem que selecionar o período que é quanto tempo você quer contratar a sua hospedagem a hostinger d descontos progressivos O que significa que se o período for mais longo você vai pagar um valor menor por mês que seria o valor equivalente por mês eu vou escolher aqui 12 meses eu recomendo que você pegue pelo menos 12 meses se você pegar só um mês você não vai ganhar o domínio Gratuito Então você precisa escolher pelo menos 12 meses para ganhar o domínio de forma grátis aí é só

clicar em continuar e aqui você precisa criar uma conta Aí você coloca o seu e-mail e uma senha e clica em continuar aí aqui você precisa colocar algumas informações suas é só clicar em continuar E aí escolher o método de pagamento se você pagar no cartão você recebe o acesso imediatamente se você pagar no pix Pode ser que demore um pouquinho alguns Minutos e no Boleto normalmente leva em torno de um dia para compensar o pagamento e para você ganhar um acesso à sua hospedagem eu vou pagar por PX aí é só clicar aqui selecionar

essa caixinha e clicar en Viar pagamento aí você precisa colocar o seu CPF clicar em Continue com pix via CRR code ele gerou um código aí é só você escanear esse código Q com o aplicativo do seu banco e esperar alguns minutos para confirmar o pagamento eu já fiz o pagamento e eu Recebi também um e-mail de boas-vindas e um e-mail para verificar o endereço primeira coisa você tem que verificar o e-mail Então já clica aqui em verificar e-mail e ele já vai te direcionar aqui pra tela de login e aqui você já pode logar

dentro da hostinger e a gente pode começar a fazer as configurações iniciais eu vou logar aqui com meu e-mail e senha a primeira coisa que eu preciso fazer é resgatar aquele domínio que eu ganhei de forma gratuita então é Bem simples para fazer isso aqui é só clicar em resgatar domínio e aqui eu posso escolher o domínio que eu quero utilizar aqui você pode utilizar o domínio que você quiser se ele tiver disponível e também você pode escolher a extensão Aqui nós temos várias extensões Eu recomendo você utilizar o pcom.br se você tiver fazendo negócios

aqui no Brasil e aí você tem que pesquisar a disponibilidade do domínio que você quer utilizar eu vou colocar um nome qualquer Aqui e ver a disponibilidade para ver se a gente pode continuar com esse nome digitei o nome do domínio eu vou clicar em ver disponibilidade e esse nome não está disponível então eu posso tentar outra extensão ou um outro nome eu vou mudar o nome aí mudei o nome clico de novo em ver disponibilidade e ele tá disponível você vê que o valor é zero porque você ganhou esse domínio ou contratar a hospedagem

aí é só clicar em resgatar domínio lembrando é por um ano Isso aqui é válido por um ano e ele tá aqui agora fazendo as configurações iniciais e aqui você precisa completar o registro Como que você faz isso aqui é bem simples é só seguir as etapas aqui clica aqui em próximo passo aí aqui você coloca as suas informações clica em próximo passo aí você coloca o seu CPF e clica em concluir ele rapidamente concluiu aí é só clicar em continuar e agora a gente vai instalar WordPress para fazer isso é muito simples é só

Você clicar aqui em sites Aí clica em configurar e de uma forma bem intuitiva a hostinger vai te ajudar a fazer essa instalação do WordPress é só você seguir esse passo a passo aqui ele vai te perguntar para quem é esse site eu vou colocar aqui que é para mim vou clicar em próximo Aí ele pergunta se você quer criar o migrar um site eu vou colocar criar um site próximo e aí você pode escolher o criador de site da hostinger ou WordPress nós iremos utilizar WordPress então vou clicar aqui em WordPress clico em próximo

aí aqui você define o idioma do site o e-mail do administrador e a senha assim que você colocar essas informações é só clicar em próximo E aí aqui eu recomendo você clicar em criar site em branco como eu acabei de registrar o domínio ele ainda não está disponível para fazer a instalação do WordPress Então nesse momento eu vou utilizar um domínio temporário e depois eu vou linkar com o Domínio que a gente acabou de fazer o reg Então é só você clicar em usar domínio temporário caso aqui em nome do domínio o seu domínio ainda

não esteja disponível pode demorar de 15 20 minutos até algumas horas normalmente alguns minutos eu acabei de fazer o registro do domínio então ele não tá disponível para mim então eu clico aqui em usar domínio temporário aí aqui eu vou escolher onde que está o público alvo é importante você escolher o país onde o seu público Está no caso aqui o Brasil se você escolher um país muito longe de onde os seus usuários estão Pode ser que você tenha problemas de performance então escolhe Brasil e aí clica em próximo e agora ele tá fazendo aqui

a instalação do WordPress isso vai levar no máximo alguns minutos ele concluiu a instalação e agora eu quero conectar com o domínio que eu registrei porque eu utilizei um domínio temporário Então é só clicar aqui em conectar não deu certo o que eu Vou fazer vou voltar aqui pro menu principal eu clico aqui em sites aí eu vou recarregar agora eu vou conectar o domínio é só clicar aqui em conectar e aqui se não aparecer ainda o nome do domínio você tem que esperar eu tive que esperar aqui uns 15 minutos então se não aparecer

o nome do domínio aqui eu recomendo que você espere Aguarde um pouquinho é só clicar aqui assim que aparecer e aí clica em próximo E aí eu recebo o aviso que o domínio já está Conectado aí é só clicar aqui em volte e essa instalação WordPress que foi feita nesse domínio temporário ela está sendo excluída aí a gente vai usar esse aqui para acessar a área administrativa do WordPress é muito simples você pode clicar aqui em WordPress ou vir aqui no site deixa o nome e coloca barra dashboard ou WP admin aí aqui é só

você colocar o nome do usuário e a senha e estamos dentro da área administrativa do WordPress agora é só a gente fazer as configurações iniciais dentro do WordPress nós vamos agora fazer umas configurações iniciais aqui dentro do WordPress eu tô aqui com a nossa lista de etapas e coisas que a gente tem que fazer então aqui contratar hospedagem já fizemos já resgatamos o domínio e já instalamos press posso fechar aqui e eu quis trazer a etapa aqui de alterar o idioma se o teu WordPress tiver em inglês é bem simples você colocar em Português é

só vir aqui em settings E aí aqui em General você vem aqui site language e muda aqui para português do Brasil vamos ver se eu acho aqui português do Brasil aí você também pode colocar aqui time Zone São Paulo clica qualquer lugar aí fica AP tando S até aparecer São Paulo vamos ver se eu acho que fechou São Paulo e aí salva aqui as alterações e agora tá em português então a gente pode alterar o idioma só quis deixar em inglês para ter mostrar como Fazer caso para você esteja em inglês aí agora a gente

tem que instalar o elementor bem simples A gente vem aqui em plugins adicionar plugin E aí aqui a gente vai procurar por elementor E aí a primeira opção que vai aparecer aqui é o elemento primeira a primeira primeiro resultado Aí clica aqui em instalar agora já posso colocar como completo aqui na nossa lista de etapas aí ele vai instalar depois de instalar tem que ativar Então tem que esperar um Pouquinho já instalou cliquei em ativar e agora a gente tem que instalar o tema além do Plugin tem que ter o tema aqui não precisa criar

conta então só aqui no canto superior direito só clicar nesse x aqui e aí você pode vir aqui em aparência temas e aqui nós vamos instalar o elemento só clicar aqui em adicionar tema ele já tá aparecendo aqui porque é um dos temas mais populares do WordPress então clica aqui em Hello elementor clica em instalar E aí ele vai Tá instalando tem que aguardar um pouquinho também tem que ativar então cliquei em ativar aqui aí a gente pode marcar aqui também e agora a gente vai dar uma limpada básica aqui isso aqui vai ajudar com

performance e tal Porque não tem sentido a gente manter ter aquilo que nós não vamos utilizar então os outros temas que não é o Hello elementor clica em cima vem aqui em excluir clica em Ok e faz isso para todos os outros temas deixa só o Hello Elemento beleza vamos fazer a mesma coisa aqui plugins plugins instalados Aí você vem aqui e o seguinte a gente vai deixar só o elementor não vamos precisar de nenhum outro plugin nesse momento esse Light Speed Cash é o plugin que eu utilizo para D desempenho pras minhas páginas mas

essa aula a gente não vai falar de otimização eu vou gravar vídeo aqui trazer pro Canal mas nesse momento a gente vai deixar só Então selecionou aqui tem que desativar antes de excluir Aí eu seleciono de novo e aí coloco aqui excluir ok E aí tá só o elemento removi os plugins não utilizados E aí agora a gente vai criar página Então vem aqui em páginas coloca o mouse por cima clica em adicionar nova página e eu vou colocar aqui LP de Landing page aí clique em publicar publiquei E aí eu vou voltar aqui só

que aí se eu se eu quiser ver a página inicial desse site aqui coloca o mouse aqui em cima e clica aqui visitar site aí ele abriu essa aqui não é a Página que a gente definiu essa página foi a página que foi criada quando a gente fez a instalação Então eu quero que essa página que a gente acabou de criar seja a página inicial Então vem aqui em configurações leitura e aqui coloca sua página inicial exibe uma página estática página inicial seleciona LP E agora se eu vir aqui visitar site tem que recarregar é

aí essa página aqui que a gente criou que é aqui que nós vamos estar criando a nossa Colocando as sessões adicionando fazendo a página em si vai ser nessa página aqui vai ser a página inicial Então beleza ISO aqui tá feito aí outra coisa que podemos fazer a gente já pode vir aqui em página você vê que tem essa página aqui que foi criada de forma automática na instalação pode apagar vamos ver aqui lixo também posso vir aqui e excluir essa página Vamos deixar só a página aqui na que a gente vai criar aqui em

posts também a gente pode remover esse Post aqui se quiser E aí essa aqui esse aqui é o WordPress não pretendo ter passar todas as informações aqui ter ensinar tudo que tem aqui dentro do WordPress porque o WordPress é bastante coisa e para criar páginas você não tem que entender tudo aqui se você fosse criar um blog e tal pretendo pretendo também trazer aqui no canal vídeo para criar blog e tal aí você vai ter que entender melhor a questão de posts de página comentário usuári mas para criar Página é isso aí então vamos vamos

começar o desenvolvimento agora antes de começar o desenvolvimento em si a gente vai fazer umas configurações iniciais do elemento Então é só entrar lá na página clica aqui em páginas todas as páginas e aqui em LP pode clicar aqui em LP clica em editar com elementor e aqui tem tudo que a gente tem que fazer posso fechar isso aqui e aqui em cima em configurações do site Primeira coisa que a gente vai Fazer vou vir aqui em layout e aqui daí em Pontos de interrupção eu vou adicionar mais um ponto de interrupção que é o

modo retrato do do dispositivo móvel aí eu posso marcar aqui também vou salvar recarrega ele pede para recarregar daí a gente tem que voltar lá de novo aqui em layout E aí volta aqui e eu vou alterar esses pontos de interrupção isso aqui opcional você não precisa fazer mas eu acho que para ter melhor responsividade esses pontos de Interrupção eles funcionam melhores esses valores é o mesmo valor de um outro Construtor visual que não é para WordPress é um concorrente do WordPress se chama webflow eles usam esse esses números aqui esses valores então eu tô

utilizando aqui já testei Vários valores esse valor funciona também então vou colocar aqui 478 767 e 991 991 vamos ver fechou 4 478 767 991 aí eu posso salvar aqui a eu tenho Que recarregar vou clicar aqui em cima para recarregar aí volto lá de novo aqui em layout e aqui eu vou alterar ess aqui largura você pode deixar 110 mas eu gosto de usar 12 0 então 1280 e para garantir que a gente tem uma margem dos lados a gente vai fazer o seguinte para esses outros pontos de interrupção aqui nós vamos mudar aqui

de pixel para percentual vamos deixar aqui 90% aqui a gente vai fazer a mesma coisa 90% e aqui Também 90% só que eu tô vendo que ele não não sei se ele pegou o valor certo aqui do Break Point pegou que eu tinha alterado né para 478 deu certo então salvei aqui posso fazer o seguinte agora isso aqui também espaçamentos eu gosto de zerar isso aqui então vou pode deixar vinculado mesmo aí coloca zero e aqui em cima preenchimento do coner também pode Zerar isso aqui isso aqui só vai nos atrapalhar eu prefiro definir na

mão os valores depois do coner Você tá vendo que aqui tem o nome do site e aqui o nome da pgina a gente também tem se livrar disso aqui então é bem simples vem aqui em layout de página padrão muda de tema paraa tela do elementor aí salva aí a gente pode fazer o seguinte Fecha aqui e aí tem que recarregar recarreguei aqui e agora sumiu vamos ver os pontos de interrupção pegou os valores certos Você pode ver que aqui em cima abaixo do do ícone do mouse ali tá aparecendo os valores esses valores aqui

e agora a gente vai criar o guia de estilo de cores bem em cima simp voltar lá configurações do site aqui em cores globais agora eu vou colocar as cores aqui então as cores eu tenho aqui tá disponível para você também aquele arquivo TXT Então esse arquivo TXT eu vou deixar aqui do lado assim agora eu não vou usar isso aqui isso Aqui eu não vou usar então eu vou usar aqui embaixo Vou colocar aqui embaixo BG que é o fundo né background aí eu colo aqui aí BG cards se vai entender melhor onde que

eu vou usar essas cores depois quando eu tiver construindo a página mas basicamente eu gosto de deixar assim o nome não o nome da cor mas sim o nome semântico do que que significa a cor porque se depois você quiser alterar essa página aqui fica bem mais fácil você já sabe o que Que cada cor faz onde é que tá cada cor Então vou colocar aqui borda preço vou alterar aqui e eu te recomendo que você use essas mesmas cores aqui aí depois que a página tiver pronta terminou ela tá com tudo pronto aí quer

trocar beleza vem aqui e troca só porque se você não usar essas cores aqui talvez na hora que tiver desenvolvendo de algum problema então peço que você siga 100% esses tutorial Até o final mas daí no final você claro vai dar o toque especial colocar a a cor do seu negócio ou do negócio do seu cliente se você tiver fazendo pro seu cliente beleza aí eu quero te mostrar o seguinte vou salvar aqui salvei eu vou fechar e agora se eu adicionar um elemento aqui clicar aqui em título Por exemplo essa cor vai est disponível

para mim aqui em estilo eu posso clicar aqui e elas estão aqui só que esses valores aqui que são os padrões eu não quero que Isso aqui apareça Isso aqui vai me atrapalhar então eu vou sumir sumir com aquilo ali clicar aqui configurações do site aí eu volto aqui aqui em cores globais E aí aqui clica aqui clica nesse limpar faz a mesma coisa para esses outros para essas outras cores aqui e aí salva E aí se eu fechar aqui agora aí eu volto aqui vou selecionar esse título E aí opa não era para ter

feito selecionei o título aí aqui em estilo Agora você vê que a cor do texto aparece aparece Somente as cores que a gente definiu aqui quero te apresentar rapidamente que é a interface do elementor antes da gente começar a criar a página em si trazer o conteúdo e tal e aí é o seguinte o elementor é bem simples de usar por isso que ele fez tanto sucesso Ele É bem intuitivo nós temos aqui do lado deixa eu só apagar isso aqui para começar do zero a gente tem isso aqui que é chamado de widget widget

são os elementos que são colocados aqui dentro Da da página então tem vários aqui tem uma barra para buscar os wids tem os widgets de layout tem o contêiner tem a grade você vai ver ver na prática quando eu começar a criar aqui as sessões que eu às vezes eu uso um às vezes eu uso outro e eu acredito que a melhor maneira de você aprender qualquer habilidade na vida é colocar a mão na massa então não adianta eu ficar aqui te mostrar um ot por um isso aqui é contraprodutivo mas basicamente é o seguinte

você tem esses Aqui de layout que é para colocar os elementos na tela disposição e tal uma coluna duas colunas etc e tal e aí tem esses widgets básicos aqui título imagem texto vídeo botão várias coisas E aí você pode fechar aqui Fecha aqui Fecha aqui aí Aqui tem os widgets da versão Pro versão paga esse aqui a gente não tem acesso porque estamos usando a versão gratuita mas se você fechar aqui aqui embaixo tem mais widgets ainda eu já dei uma brincada com todos os widgets Incluindo a versão paga para entender melhor o elementor

e eu recomendo que você se quiser se especializar depois em elementor também dá uma brincada dá uma fuçada e tal mas basicamente é o seguinte deixa fechar aqui Aqui tem mais então vou voltar aqui nesses básicos vou colocar um título só para te mostrar um exemplo aqui nós temos do lado esquerdo as configurações do widget e aqui do lado a estrutura e aqui a gente vai estar utilizando isso aqui Depois para poder navegar mais fácil aqui entre as sessões da página você vai ver na prática mas aqui se eu quiser trocar esse título eu venho

aqui e coloco aqui o conteúdo aqui aqui eu posso colocar um link tem uma uma tag HTML você não precisa entender isso aqui também é aqui em estilo daí eu posso alinhar justificar centralizar etc e aí a cor do texto posso escolher uma cor aqui ou posso pegar uma das cores que eu já tinha definido globalmente E aí Aqui Também tipografia posso definir a tipografia posso aumentar diminuir todas essas configurações aqui que se você na já usou na sua vida um editor de texto Você já conhece tudo isso aqui e aí aqui traço do texto

sombra então é bem simples conteúdo estilo e aqui essa aba avançada é a aba um pouquinho mais complicada mas não se preocupa você também vai aprender muita coisa vou repetir de novo eu acredito que a melhor maneira de você aprender é Na prática Não adianta eu ficar um por um aqui então a medida que eu vou construindo Se surgir alguma coisa que eu acho que vale a pena explicar um pouquinho mais a fundo eu vou explicar mas basicamente são essas três Abas aqui o conteúdo estilo avançado e você vai ver se eu quiser adicionar um

outro wiet é só vir aqui em cima e adicionar elemento e a eu vou colocar um botão aqui por exemplo você vê que essa aba de conteúdo é diferente da de título mas Sempre é esse essas três Abas aqui em cima conteúdo estilo e avançado então se você quiser trocar o conteúdo é nessa primeira aba aqui é o estilo e aqui é o avançado eu vou usar vários widgets nessa aula então você vai pegar na prática Não se preocupe porque você vai aprender tudo não tem não tem dúvida vou deletar tudo aqui e agora a

gente vai começar a criar a página Vamos vamos trazer o conteúdo mas antes de trazer o conteúdo Eu tinha esquecido de fazer uma coisa a gente vai fazer agora então vamos voltar ali pra tela do WordPress clica aqui em cima nesse ícone E aí clica aqui em sair WordPress não precisa salvar então pode clicar aqui em sair a gente não precisa salvar não fizemos nenhuma alteração importante daí clica aqui de novo e aí aqui em mídia coloca o mouse em cima clica aqui em adicionar arquivo de mídia E aí aqui a gente vai adicionar todas

as imagens então aqui é só clicar em Selecionar arquivos e aí eu vou vir aqui na área de trabalho que é onde eu tenho as imagens e eu vou selecionar todas as imagens eu não vou selecionar o os estilos aqui então seleciona tudo aqui e aí clica em abrir e ele vai abrir aqui as imagens a gente tem que esperar um pouquinho que ele tá carregando e isso aqui tá pronto aí vamos voltar lá pra página Então vou voltar aqui em página todas as páginas vou clicar aqui posso clicar aqui direto Editar com elemento e

a gente tá de volta aqui se você for colocar suas próprias imagens na sua página e eu recomendo você pegar a imagens só de lugares conhecidos dos porque imagens podem ter códigos maliciosos pode ter vírus e tal pode dar problema então esse serviço aqui gratuito tá aqui na nossa lista também aqui em sites úteis tem aqui para escanear as imagens e também além de escanear imagens é importante você Otimizar as imagens imagem é o motivo número um para dar problema de Performance em em páginas porque as imagens elas podem ter um tamanho muito grande Então

você precisa comprimir essas imagens as imagens que eu tô utilizando Elas já estão num formato mais moderno que é um formato webp Então esse site aqui também tá na tá aqui no na nossa lista mas é bem simples você clica aqui e aqui você vai adicionar imagem Então Deixa eu pegar uma imagem aqui para te mostrar como que funciona aqui então vou pegar essa imagem aqui por exemplo que ela tá no arquivo tá num formato de arquivo png você pode ver que ela tá com 3 M aqui no canto esquerdo 3 3.53 M deixa eu

deixa eu fazer o seguinte aqui assim aí aqui do lado esquerdo 3.53 m e aqui você pode ver como é que ela vai ficar com a Compressão aqui do lado esquerdo é sem a compressão e passando aqui você consegue ver beleza aí aqui você escolhe o formato Eu recomendo você usar sempre o webp e aqui você consegue colocar a qualidade Olha só o quanto ele já diminuir você pode diminuir mais ainda aqui mexendo aqui ou se você acha que tá perdendo muita qualidade você pode mexer aqui o melhor algoritmo de compressão É esse aqui a

WiFi Porém esse aqui não tem tanta compatibilidade com navegadores é Um formato pouquinho mais novo que o webp então eu recomendo você usar esse webp aqui daí é só fazer o download e salvar as lembrando mais uma vez as imagens essas que a gente acabou de fazer o o upload Elas já estão em formato webp isso aqui esse aviso aqui é mais se você for utilizar suas próprias imagens Depois que terminar o tutorial e for criar sua própria página Então esse aí era o aviso vamos Continuar a nossa página ela vai ter um fundo escuro

com textos Claros Então vou definir esse fundo já então venho aqui em configurações do site e aqui em plano de fundo eu vou definir aqui clico aqui em clássico E aí eu posso selecionar aqui a cor BG que é a cor que a gente tinha definido anteriormente aí eu salvo volto para cá e isso aqui tá feito Antes de eu começar a criar sessões em si eu quero te ensinar algo importante um conceito que você tem que Entender então vou colocar aqui um flexbox e um conteúdo eu vou colocar um conteúdo aqui na página vai

ser um pouquinho mais rápido você não precisa entender o que que eu tô fazendo nesse momento mas é só para eu poder te ensinar um conceito importante depois eu vou fazer de uma forma mais devagar para você entender mas nesse momento eu vou só deixar um conteúdo aqui publiquei vim aqui botão direito inspecionar e olha só você se lembra que a gente definiu um Tamanho máximo de contêiner de 1280 então por isso que o conteúdo não tá vindo até os cantos aqui só que quando chegou nesse outro Break Point Aqui para baixo ele vai ter

um tamanho máximo de 90% tendo 5% de espaço aqui dos lados quando chegou nesse Break Point que ele tá com 100% de 1280 ou seja o conteúdo vai tocar as beiradas e eu não quero isso aqui isso aqui não fica legal por que que eu não defini 90% para tudo para cá Porque se você tiver num monitor muito largo um Ultra Wide ele vai est com uma largura muito grande usou o layout Não fica legal fica ruim de ler Então a gente tem que definir um preenchimento para esse Break Point aqui e aqui a gente

não precisa mais porque a gente já tá com tamanho máximo de 90% fazer isso aqui é bem simples volta aqui no elementor E aí aqui no contêiner você seleciona o contêiner vem aqui em avançado e aqui em preenchimento a gente Vai sempre ter que colocar um preenchimento superior e inferior então aqui eu vou colocar 120 E aí direita e esquerda vai ser 64 E aí a gente nós temos preenchimento em cima e dos lados publiquei aí eu volto aqui ó e olha só ele nunca tá tocando As beiradas só que aqui ele tá com 90%

e mais o 64 de cada lado é demais então para esses outros Break points eu posso tirar esse 64 então deixa aqui 64 aqui só que quando chegar Aqui eu vou clicar aqui para desvincular ele Zerou tudo e superior Eu também já posso diminuir Então em vez de ter 120 cima e baixo eu vou ter 64 direita e esquerda eu vou deixar Zerado então publiquei voltei aqui e olha só agora ele ficou do jeito que eu queria isso aqui é importante a gente vai ter que fazer para todas as sessões Então vou voltar aqui e

aí eu vou voltar para esse ponto de interrupção e isso aqui tá feito eu não preciso definir Para esses outros pontos de interrupção Porque no momento que eu definir para esse aqui ele vai herdar PR os pontos de interrupção menores vou zerar aqui e agora a gente vai começar a trazer o conteúdo eu vou agora criar a primeira sessão da nossa página de vendas que é a sessão conhecida como primeira dobra ou Hero ou até mesmo sessão de promessa bem simples clica aqui em mais flexbox pega um flexbox nessa direção aqui e para todas as

sessões a gente vai ter que Colocar aqueles preenchimentos internos mas a primeira coisa que eu vou fazer aqui agora eu vou dar um duplo clique aqui e eu já vou chamar isso aqui de primeira dobra é legal você manter organizado porque depois começa a ter muitos elementos aqui e é mais fácil você ter isso aqui nomeado e tal então venho aqui em avançado e aqui os preenchimentos vou desvincular e eu vou colocar um preenchimento cima e baixo 120 e dos lados 64 Só que nesse Break Point aqui ele já não precisa ter esses valores Então

vou alterar aqui eu vou deixar 64 cima e baixo não preciso colocar aqui pois pois ele vai herdar desse Break Point aqui salvei legal e agora eu vou começar a trazer os elementos dentro dessa primeira dobra aqui desse contêiner eu vou ter um outro contêiner então vou clicar em mais cliquei aqui em contêiner e esse contêiner aqui eu já vou colocar um estilo Então vou colocar um estilo Tipo de plano de fundo padrão aqui eu vou colocar BG cards isso aqui não é um card mas eu vou utilizar a mesma cor que eu vou utilizar

depois nos cards em borda eu já posso colocar uma borda também tipo de borda sólido dois cor da borda borda cards e já vou colocar também um arredondamento nos cantos desse componente vou deixar 12 aqui vamos ver como é que tá ficando tá assim não não ficou legal porque não tem nada dentro Desse componente aí então a gente vai colocar agora clico aqui em mais eu vou ter um título Esse é o título principal da página Então faz sentido que ele seja um H1 em vez de um H2 e agora eu vou copiar o conteúdo

que tá no notion aqui a gente você pode ver que eu tenho uma classe aqui destaque dentro dessas tags span de html Mas é porque o que tiver dentro dessas tags aqui eu vou poder utilizar depois CSS para dar uma cor diferente lá no final quando a gente Tiver terminando a página então copia aqui volta aqui e cola aqui e o que você quiser que esteja destacado Depois você coloca entre essas tags spena aqui legal aqui eu venho em estilo agora cor do texto eu vou colocar aqui texto primário não vou ajeitar o tamanho ainda

porque eu quero ter colocar todo o conteúdo aqui para depois ver como é que fica um conteúdo em relação ao outro aí além desse texto aqui eu vou ter esse outro texto aqui então copiei aqui eu vou Colocar mais aqui eu vou colocar um editor de texto e eu vou colar esse conteúdo aqui aí aqui em estilo eu vou colocar a cor do texto texto secundário Legal vamos fazer isso aqui ó vou copiar agora esse texto que é do botão vou colocar um botão aqui então cliquei aqui no botão e aqui em texto eu vou

colar aqui e aí eu venho aqui e esse faltou esse texto aqui copiei clico em mais para colocar outro widget editor de texto Cola aqui em estilo ven aqui Coloco texto secundário publiquei vamos ver como é que tá ficando e olha só agora é os ajustes finos Então vem aqui seleciona esse coner aqui em avançado vou colocar um preenchimento de 48 aqui tá legal só quando chegou aqui é muito preenchimento então aqui eu vou deixar 24 E aí ele vai herdar 24 também para esse ponto de interrupção aqui do celular legal publiquei aqui vamos ver

como é que tá ficando e a gente pode Testar a responsividade dessa maneira assim ó legal outra coisa que eu quero fazer eu não quero que esse componente aqui ele tenha toda essa largura máxima aqui então vou selecionar o componente já tava selecionado vem aqui em layout largura Total ele tá com 100% eu vou deixar 50% só quando chegar aqui eu quero que ele tenha 100% então mudei aqui de pixel volto aqui paraa percentual e aqui eu Vou colocar 100% e olha só ele pegou o tamanho máximo pros outros pontos de interrupção também então a

gente volta aqui e olha só legal que mais que a gente pode fazer aqui agora eu vou alterar o tamanho dessas Fontes aqui já vou mexer na tipografia Então vem aqui selecionei primeiro título eu venho aqui em tipografia eu vou deixar essa fonte família Robot que é uma fonte que eu Gosto muito e eu vou trocar de pixel para RM Por que que é importante você usar RM Porque se o usuário mudar o tamanho da fonte no navegador ven aqui nesses três pontinhos configurações e aqui em aparência eu posso alterar o tamanho da fonte Aqui

tá o tamanho recomendado tamanho médio algumas pessoas têm problema de visão e elas alteram isso aqui dá para fazer isso aqui no celular também não só no navegador no computador e aí se o Tamanho da tua fonte da tua página tiver em Pixel não vai alterar o tamanho mesmo que o usuário muda aqui alguns navegadores forçam essa mudança mas então é importante para garantir que vai funcionar em todos os navegadores você usar um tamanho que não seja um tamanho fixo deixar o RM um RM Vale 16 pixels então se você botar um RM aqui ele

vai ter o tamanho de 16 pixels mas eu vou tentar dois vamos ver como é que fica dois aqui acho que dois ficou legal vou Deixar o peso semin e o resto vou deixar igual para esse tamanho Aqui também tá legal para esse Break Point também tá legal aqui talvez seja demais então aqui eu já posso alterar de dois eu vou deixar 1 pon p8 é muito 1.5 acho ficou legal e vou deixar 1.5 aqui também para esse Break Point Então vou salvar de forma Global mesmo que eu não reutilize depois porque salvando de forma

Global fica mais fácil para depois na AB ali de fontes personalizadas eu Poder alterar os tamanhos se eu quiser fazer alguma mudança então por isso que eu vou salvar cliquei aqui e aí clica aqui em criar fonte global e aqui eu vou colocar assim ó título primeira dobra criei Tá salvo e aí esse outro texto aqui também vou alterar aqui tipografia vou deixar Robot vou mudar de pixel para RM e vou colocar 1.2 já é um tamanho um pouquinho melhor para ler e já vou salvar aqui vou deixar o resto igual e já vou salvar

aqui vou Colocar esse aqui texto normal criei e esse texto aqui eu vou reutilizar e aí aqui o botão não vou mexer agora mas aqui embaixo vou mudar aqui deixa um robot vou colocar o peso 600 sem e o tamanho RM eu vou deixar 1 ponto 1 não precisa ser o mesmo tamanho que aqui isso aqui eu posso salvar assim ó texto pequeno só para ter uma hierarquia então eu tenho o texto normal texto pequeno e talvez eu precise depois um texto grande Legal eu vou estilizar agora esse botão aqui só que eu vou fazer

de forma global para que toda vez que eu puxar um botão pra página ele já vem com o formato que eu quiser então vou clicar aqui em configurações do site e aqui em botões eu vou vir aqui primeira coisa aqui em tipografia vou deixar Robot um tamanho eu vou colocar RM também 1. 4 de repente demais 1.2 vamos deixar 1.2 peso eu vou colocar semito Transformação maiúsculas e a aqui dear o resto igual Posso salvar aqui também então vou clicar aqui vou chamar de btn de Botão criei e eu vou usar um Gradiente aqui então

tipo de plano de fundo você muda de clássico para Gradiente E aí aqui cor eu vou pegar destaque um e a segunda cor vai ser um destaque dois só que eu vou mudar aqui o ângulo de 180 vou deixar 65 ou até mesmo 60 acho que ficou legal quando o usuário passar o mouse por cima Aqui ao passar o mouse eu vou deixar um Gradiente também só que em vez de ser o destaque um e depois destaque dois eu vou alterar então vou deixar o destaque dois e aqui vai ser o destaque um o ângulo

também vai ser 60 então quando o usuário passar o mouse por cima ele inverte Claro depois a gente vai colocar uns efeitos CSS que mais que a gente pode fazer com esse botão dá para alterar mais coisas aqui mas eu vou deixar assim por Enquanto salvei aí eu posso fechar aqui e agora Toda vez que eu trazer um botão esse botão ele já vai vir com esse estilo aqui faltou aqui agora colocar os as margens entre cada elemento Então vou selecionar esse título aqui e aqui em avançado vou colocar uma margem inferior de o8 pixels

e aqui nesse texto avançado vou colocar a margem inferior de 40 pixels e do botão para esse texto aqui embaixo também posso colocar um valor aqui de repente o pixels vamos ver como É que tá ficando publiquei clico aqui para pré-visualizar e acho que tá ficando legal uma coisa que dá para fazer a gente pode fazer com que esse botão nesses outros pontos de interrupção ou pelo menos nesse ponto de interrupção menor que ele tenha 100% aqui 100% da largura Eu acho que eu vou fazer faz isso aqui então aqui eu vou deixar o botão

assim aqui eu vou deixar assim aqui Também só que quando chegar aqui eu quero que o botão ocupe Todo o espaço então aqui em estilo eu vou colocar este Car e o botão já ficou com todo o espaço disponível Olha só chegou aqui ele tá com todo o espaço disponível legal falta agora trazer as imagens Aliás a imagem é uma imagem só eu vou clicar aqui e aqui em estilo eu vou colocar um tipo de plano de fundo eu vou selecionar esse esse essa imagem aqui que é o BG Hero Desktop então selecionei aí Ele

trouxe a imagem aí eu tenho que vir aqui em tamanho de exibição colocar cobertura e posição eu vou deixar aqui centro ao centro outra coisa importante eu quero garantir que essa sessão ela vai ter uma altura mínima de 80% dessa altura disponível que é daqui de cima do navegador até aqui embaixo então eu venho aqui em layout com essa primeira dobra selecionada vem aqui em layout e aqui eu vou mudar de pixel para VH VH significa viewport height que é essa altura disponível aqui dentro do navegador Então vou colocar 80 também tem garantir que isso

aqui vai tá alinhado ao meio então vem aqui ó coloca aqui alinhado ao centro publiquei E aí olha só ficou esse efeito de de ter duas colunas só que aqui eu já não achei que ficou legal então aqui eu vou ter que alterar esse estilo como é que eu vou fazer aqui então muito simples nesse ponto de interrupção ele Vai carregar essa imagem aqui mas para esse ponto de interrupção eu tenho outra imagem então deixo nesse ponto de interrupção venho aqui em estilo e aqui eu vou pegar essa outra imagem que é o BG Hero

mobile selecionei E aí nós temos essa imagem aqui e agora é só trabalhar aqui os espaços orçamentos para dar esse efeito de que ela tá olhando de cima para baixo então muito simples eu venho aqui em avançado e aqui a gente testar Vários valores eu não sei qual o valor Exato mas eu vou colocar aqui em cima um valor a mais 64 eu vou eu vou ir aumentando aqui no teclado até um valor que eu acho que fique legal então vamos tentar aqui de repente um 200 acho que é muito pouco ainda eu vou deixar

64 embaixo só porque é um interessante tem um valor embaixo também e aqui de repente 240 acho que já ficou legal aí Aqui também 240 você pode mudar se você quiser eu vou deixar assim e aqui também 240 lembrando você tem que Testar no seu celular tem que testar no seu celular muito importante várias vezes eu criei uma página e essa página daí testando no celular não ficou tão legal quanto ver aqui porque isso aqui é uma simulação Isso aqui é uma simulação Então a gente tem que ter certeza que no celular vai funcionar vai

ficar legal aqui a gente também pode escolher o tamanho da tela por exemplo aqui já já não gostei ó Porque o botão já não tá no meio aqui eu gosto o botão já não tá mais tão visível aqui é legal que esse botão Esteja dentro da primeira dobra Então dependendo do tamanho do celular a gente também tem esse problema aí então talvez vale a pena Trazer isso aqui um pouquinho mais para cima não deixar tanto espaçamento aqui no celular ter 240 vamos deixar aqui então 200 e aqui 64 só para garantir que esse botão Esteja

dentro da primeira dobra como é Que você testa isso aqui no celular bem simples seleciona aqui o nome da página abre numa outra guia e aí aqui em três pontinhos vem aqui em transmitir salvar e compartilhar cria um qrcode E aí aponta a câmera do seu celular aqui e testa lá no celular porque isso aqui é uma simulação e nem cond dis com a realidade vou mudar aqui para responsivo Porque daí eu posso fazer isso aqui e alterar da maneira que eu quero e olha só deixa eu voltar aqui eu acho que tá Legal ficou

legal Dá para fazer alguns ajustes finais depois mas eu tô vendo aqui e eu gostei ficou legal eu vou deixar assim nesse momento se precisar voltar depois fazer alguns ajustes a gente faz lá no final mas essa aqui ela tá pronta e agora eu vou criar uma sessão de benefícios bem simples clicar aqui no mais e eu vou escolher uma grade toda vez que eu tenho que colocar mais de uma Coluna eu prefiro utilizar a grade dá para fazer tudo no flexbox mas a grade é mais fácil de você adaptar para diferentes tamanhos de tela

Então vou escolher uma grade Pego aqui e aí você já sabem a gente tem que definir os preenchimentos internos Então vou desvincular vou dar um valor de 120 cima e baixo e E 64 dos lados só que daí para esses outros Break points eu já posso tirar zerar direita esquerda e deixar só 64 cima e baixo clico em publicar para Garantir que tá salvo e aí aqui cada Card vai ser esse widget aqui você pesquisa por caixa de ícone Então vou colocar aqui caixa de ícone e já vou estilizar esse Card antes de trazer o

conteúdo Então vou vir aqui em avançado e aqui em plano de fundo eu vou selecionar essa cor aqui ó que é BG cards e eu já vou colocar uma borda também então essa borda aqui ela vai ser pontilhado dois pixels de largura e a cor da borda vai ser borda cards Eu Também já vou colocar um raio da borda que é para dar um arredondamento nos cantos eu vou publicar aqui vou ver como é que tá ficando e olha só tá ficando legal agora a gente tem que estilizar o conteúdo de dentro Então vem aqui

em estilo e aqui em conteúdo eu vou colocar o o título a cor do título vai ser texto primário e a cor da descrição vai ser texto secundário o ícone pode ser a cor de destaque um publiquei vamos ver aqui como é que Ficou olha só tá legal Vamos colocar tipografia certa agora então volta aqui e aqui em conteúdo volta aqui em conteúdo tipografia eu vou pegar aqui vou criar uma tipografia nova Então vou mudar de pixel para RM eu vou colocar aqui 1.2 é muito pouco então vou deixar 1.4 ficou legal vou deixar sem

e vou salvar isso aqui como título título componentes vou criar e depois eu posso Reutilizar isso aqui se eu quiser o texto aqui da descrição também vou alterar isso aqui vou deixar como texto normal a gente já tinha definido esse texto aqui para aqui em cima Então vou reutilizar aqui já vou também aqui em avançado colocar um preenchimento interno de 32 pixels só que para esses outros pontos de interrupção 32 eu acho que é demais então já vou deixar 24 também publiquei aqui a gente pode ver como é que tá ficando e olha só acho

que Tá ficando legal poderia trabalhar os espaçamentos internos Então posso voltar aqui vou voltar aqui pro desktop deixo selecionado volto aqui em estilo e aí aqui espaçamento do conteúdo eu vou deixar aqui oito e eu quero do ícone pro título um pouquinho mais de espaço Então vamos ver se eu consigo alterar isso aqui espaamento do ícone vou deixar 16 acho que tá legal assim publiquei para salvar e aí agora é só a gente duplicar Isso aqui então botão direito aqui duplicar ou no teclado Ctrl d e a gente vai ter três colunas Então volta aqui

na grade vou já vou dar um duplo clique aqui e eu vou chamar esse aqui de benefícios aí com essa grade mesmo aqui selecionada a gente agora vai deixar isso aqui em três colunas como que eu vou fazer isso aqui volto aqui em layout e Aqui nós temos a opção de colunas eu vou deixar aqui três FR significa fração cada fração é uma coluna então Aqui nós Temos três colunas eu já vou deixar aqui um espaçamento também de 32 você vê que a gente tem coluna e linha eu já vou te explicar o que que

é essa linha quando chegar nesse ponto de interrupção eu não quero que seja três colunas eu poderia então aqui colocar duas colunas ou uma coluna E aí ele já altera só que você vê que a gente tem um problema deixa eu salvar aqui e te mostrar o problema Olha só eu vou diminuir aqui e aqui eu tô achando que tá muito grande esse a largura desse Card aqui ela tá tá muito grande e aqui também Talvez o Card esteja muito pequeno então a gente pode usar uma propriedade CSS que vai fazer essa responsividade automática pra

gente como é que eu faço eu venho aqui e altero DF para isso aqui e aqui eu vou colocar um código CSS bem simples que é o seguinte eu vou colocar Pit autoit Min min Max e eu quero que ele tenha pelo menos 300 pixels e no máximo FR o que que esse código faz eu tô dizendo que eu quero que cada Card tenha pelo menos 300 pixels e quando ele não tiver espaço para ter no mínimo 300 pixels ele vai ocupar o espaço de 1 FR Então vou publicar aqui você já vai ver o

que tá acontecendo só que eu tenho que me certificar que esse código vai funcionar para todos os outros pontos de interrupção então vou fazer assim eu vou Vir aqui e aqui eu vou apagar porque daí ele vai herdar aquele código daquele ponto de interrupção aqui também volto aqui e aqui também eu posso dar um delete aqui publiquei e eu volto aqui e aí vamos ver que que aconteceu deixa eu te mostrar o que que aconteceu eu tô diminuindo aqui e quando ele não tiver mais espaço para ter no mínimo 300 pixels ele vai ocupar um

FR aqui ele ainda então tem espaço para ter 300 pixels e você vê que Dessa maneira ele é mais responsivo Só que você tem que tomar o cuidado que se você deixar aqui um valor maior do que o menor ponto de interrupção ele vai dar um overflow Então vou colocar 500 aqui só para te mostrar o problema que você tem que tomar cuidado com isso aqui Então vou diminuir aqui agora tô dizendo que ele tem que ter no mínimo 500 Aqui você vê que ele já já deu problema então o que que você pode Fazer

se você quiser ter um card maior você tem que garantir que nesse ponto de interrupção aqui você não vai tá utilizando aquele código então para esse ponto de interrupção aqui eu vou deixar um frr E aí eu volto aqui e aí aquele problema tá resolvido ó aquele já não vai ter no mínimo 500 só que na verdade eu aqui 500 acho que 500 é demais eu vou deixar 300 então 300 para mim tá resolvido o problema aqui Voltei aqui e olha só tá legal aqui ele tá em linha ele não tá em coluna Então vou

voltar aqui e aqui se você quiser ter um valor diferente aqui eu tô com 32 se você quiser ter um valor diferente quando ele virar linha você coloca aqui então posso desvincular aqui e colocar aqui 40 por exemplo Então vou publicar e quando isso aqui virar linha ele vai ter um espaçamento de 40 e não mais 32 e eu vou deixar assim Acho que Ficou legal agora só falta trazer o conteúdo e trocar os ícones para fazer isso é bem fácil então eu clico aqui volto aqui no notion e aqui eu vou copiar o título

vou trocar aqui em conteúdo troquei aqui vem aqui em benefícios copio isso aqui cola aqui já vou trocar o ícone então clico aqui no ícone e esse ícone que eu escolhi aqui é esse ícone aqui inserir trocou publicar para salvar E aí vou trazer o conteúdo do próximo Card Então vou copiar aqui esse título volto aqui troca o título pegar o texto copiei aqui o texto vou colar aqui e vou trocar o ícone o ícone que eu escolhi aqui é o ícone do infinito então selecionei aqui inserir também clico em publicar para salvar e agora

eu vou trazer o texto do terceiro Card copiei aqui o o título selecionei O terceiro Card venho aqui em título troco e vou fazer isso aqui também pra Descrição então salvei aqui a descrição copiei a descrição salvei aqui e vou trocar o ícone troco o ícone e venho aqui o ícone que eu escolhi é esse ícone aqui acho que ficou legal legal inserir publiquei e agora eu vou visualizar como que tá ficando Vou recarregar aqui só para garantir que ficou legal e você vê que ele tá responsivo Eu gosto de trabalhar assim alguns web designers

preferem terminar tudo a versão do desktop e depois no final fazer a a Parte responsiva eu gosto de aos poucos ir trabalhando a responsividade eu acho que é mais fácil e é mais rápido e também garante que você vai ter o design e o layout que você quer então essa parte aqui tá pronta agora a gente vai pra próxima sessão agora eu vou criar uma sessão que é uma sessão que se chama para quem é Então vão ser duas colunas como vão ser colunas fica mais fácil usar a grade então vou clicar aqui no mais

vou Selecionar a grade duas colunas e a primeira coisa que vou fazer eu vim aqui em avançado E aí eu vou ter um preenchimento superior e inferior de 120 e dos lados de 64 então 120 64 120 64 só que quando alterar aqui o ponto de interrupção eu já vou alterar isso aqui que vai ser 64 cima e baixo e dos lados eu não preciso mais posso publicar aqui para salvar volto para esse ponto de interrupção aqui e aqui eu vou ter duas colunas já vou renomear isso aqui dou um Duplo clique aqui e vou

chamar isso aqui para quem é Vou colapsar aqui e aqui dentro dessa sessão para quem é v v eu eu vou ter duas colunas então aqui eu vou ter um título um texto de apoio um subtítulo e uma lista e aqui uma imagem para eu colocar vários widgets na mesma coluna eu primeiro preciso colocar um outro contêiner então vou clicar no mais aqui eu vou colocar um contêiner E aí aqui dentro desse contêiner eu vou colocar agora um título Então clico no mais vou colocar um título eu já vou vir aqui eu vou copiar esse

título aqui vou trocar e já vou iz também colocar uma cor de texto primário eu já vou definir aqui uma tipografia também eu quero que seja Robot mesmo posso deixar aqui RM eu vou colocar vamos ver como é que fica dois ser que eu posso usar o mesmo tamanho que eu tenho aqui em cima eu não vou usar o mesmo porque se eu quiser Depois ter tamanhos diferentes vai est atrelado a mesma fonte Global então não vou usar vou usar separado vou deixar 1.8 semin e aqui eu vou chamar isso aqui de título sessões pode

ser assim criei abaixo disso aqui vou colocar aqui um elemento abaixo disso aqui eu vou ter um texto Então texto que eu vou ter É esse aqui copiei aqui no notion colei aí eu venho estilo cor do texto texto secundário e a tipografia eu vou Utilizar o texto normal abaixo disso aqui daí eu vou ter uma lista Deixa eu só ver que tem um um errinho aqui tem dois pontos Eu Não Preciso desses dois pontos já vou corrigir aqui também no notion para quando você for copiar já não tenha esse Pontinho a mais sobrando legal

abaixo desse texto aqui eu vou ter uma lista então eu vou copiar aqui você pode ver que a gente tem essas tags HTML aqui esse essas tags B aqui o que tiver Dentro aqui vai ficar em Então vou vou colocar a lista cliquei em mais vou vou vou digitar aqui lista eu vou apagar esses aqui e aqui eu vou colocar aquele texto vou ir aqui em estilo e aqui em texto eu vou colocar tipografia texto normal e a cor eu vou colocar texto secundário aí você já consegue ver só que o ícone tá sem cor

a gente tem que dar uma cor pro ícone então aqui em ícone eu vou selecionar a cor de destaque um eu vou trocar esse ícone que Eu acho que vai ficar mais legal a gente usar outro ícone mas eu já vou definir um tamanho maior aqui de repente 24 acho que vai ficar legal e aí eu volto aqui em conteúdo vou clicar aqui e aqui eu vou definir o ícone o ícone que eu vou pegar é esse aqui esse aqui acho que vai ficar legal show de bola ficou bacana e agora é só duplicar isso

aqui que a gente já colocou o ícone aqui eu vou duplicar aqui dupliquei aqui E aí eu vou trazer os outros textos Então vem aqui CRL c e troco aqui cont control control v e a gente tem que fazer isso aqui para esses outros elementos aqui também então é só trocar e esse aqui é o nosso último elemento duplico aqui e colo aqui acho que essa lista também pode ter um espaçamento maior entre os itens Então vou voltar aqui em estilo espaço entre eu vou deixar 12 pixels eu acho que ficou melhor assim o tamanho

do ícone eu vou deixar assim por enquanto e eu Vou publicar salvei aqui do lado eu vou ter uma imagem então ten que selecionar aqui a sessão novamente porque se eu tiver com o contêiner selecionado a hora que eu for colocar um widget de imagem ele vai vir aqui para dentro mas eu quero que ele venha para esse contêiner aqui então eu tenho que selecionar aqui clico no mais clico em imagem e agora a imagem veio pro lugar certo agora é só trocar essa imagem e a imagem que eu quero é essa imagem Aqui ficou

legal só alguns ajustes eu volto aqui clico aqui no contêiner e eu vou alinhar tudo ao centro venho aqui em layout então a linho aqui ao centro também tem que deixar um espaço entre essas duas colunas e o espaço que eu vou colocar é 64 só que quando isso aqui virar linha quando virar uma coluna só Na verdade eu vou querer ter 40 publiquei vamos ver como é que tá ficando legal acho tá Tá bacana essa Imagem acho que ela tá muito grande e tal mas a gente pode ajeitar isso aí então vamos fazer o

seguinte eu vou quando chegar nesse ponto aqui ó eu posso deixar assim ou eu posso trocar aqui para uma coluna só tô achando que se eu deixar uma coluna só aqui não vai ficar tão legal o que eu posso fazer então é diminuir esse espaçamento aqui para esse ponto de interrupção Então em vez de eu ter 64 Aqui vou desvincular aqui eu vou ter 32 e já ficou melhor 32 mas nesse Break Point aqui isso aqui eu vou fazer com que vire uma coluna certo eu já vou definir o espaçamento quando isso aqui virar uma

coluna aqui mesmo eu posso colocar 40 então agora isso aqui tem 32 porque ele tá em layout de coluna mas quando virar linha aqui aqui ele tem 40 só que aqui eu quero que essa imagem Ela venha antes desse conteúdo aqui então selecionei a imagem venho aqui em avançado e aqui em ordem eu coloco no início e aí Altera a ordem vamos ver como é que ficou vamos ver tá acho que tem pouco espaço aqui entre os dois elementos então 32 Talvez seja muito pouco então vou fazer um ajuste venho aqui isso é bem normal

a gente ter que ir fazendo ajustes Então tem que selecionar Aqui e aí aqui eu vou deixar quanto é que eu vou deixar o tal com 64 eu vou deixar 40 também deixar 40 também 40 e 40 Então eu acho que vai ficar melhor 40 ficou melhor realmente ficou ficou melhor que também a gente pode usar aquela função de CSS min Max para garantir uma melhor responsividade mas eu não vou usar aqui nesse caso agora show de bola eu vou diminuir um pouco tamanho dessa imagem que eu acho que essa imagem ela Tá muito grande

então vou selecionar a imagem aqui e aqui em estilo eu vou colocar uma largura de 80% acho que vai ficar legal e aí nesse ponto de interrupção aqui eu posso deixar 100% mesmo então ele vai ter 80% aqui aqui ele vai ter 100% E aí quando chegar nesse ponto de interrupção aqui eu vou diminuir de novo então venho aqui altero para percentual Só paraa imagem não ficar tão grande eu posso deixar aqui em 65 e quando chegar no celular quando chegar no celular talvez 100% ou até menos 80 80 acho que ficou legal publicar aí

eu volto aqui e olha só tá se adaptando ficou legal show que também eu acho que tá ficando Legal legal daria para fazer mais ajustes aqui mas para não perder muito tempo eu vou deixar assim mesmo porque eu acho que já ficou legal e se lá no final a gente achar que vale a pena voltar aqui aí eu faço esse ajuste fino de vir aqui e alterar o tamanho da imagem mas agora eu quero trabalhar esses espaçamentos aqui entre os elementos aqui da coluna da esquerda então bem simples volto pro desktop vou selecionar esse primeiro

Título e aqui em avançado eu vou colocar uma margem inferior de oit pixels e daqui desse subtítulo pro pra lista eu vou colocar aqui de repente 32 V publicar vamos ver como é que ficou ficou ficou legal acho que tá bem interessante acho que aqui pode ser um pouco mais Então volto aqui em vez de oito eu vou colocar 16 publiquei voltei aqui e acho que ficou melhor e olha só tá responsivo tá funcionando para todos os pontos de Interrupção E é claro mais uma vez lembrando você tem que testar no celular se você tá

trabalhando numa página real de um produto real aqui É fictício então se você tá trabalhando numa página real você tem que tá testando no seu celular de repente você vê no celular não ficou tão bem aí você troca e tal aqui por questões didáticas para não demorar mais eu não vou abrir no meu celular e testar mas quando eu tô criando uma página para um cliente ou uma página que é para mim Mesmo eu paro testo O celular eu tenho um tablet também eu tenho outras telas tal testo em outros sistemas operacionais também só para

garantir que vai funcionar tudo da maneira correta Então essa sessão aqui ela tá pronta agora a gente vai pra próxima sessão eu vou criar mais uma sessão onde eu vou ter algumas informações e um botão de call to Action eu poderia botar o botão de call to Action aqui e é interessante esse botão aqui que a gente Chama de botão de Cont Action chamada para ação é importante esse botão tá repetido em mais sessões ele não precisa est em todas as sessões mas tipo assim uma sessão sim outra não Ou no máximo duas sessões sem

o botão aí coloca uma sessão com o botão então aqui eu não vou colocar o botão aqui mas eu vou criar uma sessão específica onde eu vou ter algumas informações com o botão eu vou chamar a sessão de CTA essa sessão também vão ser duas colunas Então o que Eu vou fazer aqui para facilitar eu vou duplicar a sessão porque vai ser o mesmo layout só vai ser um pouquinho diferente então eu venho aqui clico com o botão esquerdo aí com o botão direito eu clico e clico em duplicar aí eu posso fechar aqui e

essa sessão duplicada eu vou dar um duplo clique eu vou chamar ISO aqui de CTA só para eu não me confundir em qual sessão que eu vou est trabalhando aqui agora legal aí para quebrar um pouco esse Grid aqui para mudar eu gosto De de ter assim ó tipo um s então eu tenho aqui um texto e a o texto na esquerdao a imagem na direita agora eu vou ter essa imagem do lado esquerdo e o texto do lado direito então selecionei a imagem e aqui em avançado eu posso alterar a ordem já altero a

ordem e agora eu vou trocar a imagem seleciono aqui pego a imagem certa essa aqui selecionei já fica no tamanho certo porque a gente duplicou ele duplicou todos o todo o conteúdo e também todos Os estilos que a gente colocou e eu vou trazer os textos então aqui eu vou pegar aqui também tô utilizando um HTML aqui para depois poder utilizar um CS SS para dar um destaque em parte do texto vou substituir aqui troquei essa parte aqui volto aqui vou pegar essa parte aqui vou trocar esse texto troquei e agora é trocar a lista

Então vou copiar aqui e vou apagar todos os itens com exceção do primeiro aí eu Posso duplicar o primeiro e pegar os outros elementos Aqui dessa lista e trazer para cá vou pegar o próximo elemento que é esse aqui criação de sets explosivos agora o quarto marketing para DJs posso fechar aqui duplico vou pegar isso aqui e aí falta só esse aqui e tá certo vamos ver 1 2 3 4 5 6 1 2 3 4 5 6 tá certo aí falta só o botão então o botão eu posso vir aqui em mais eu vou

Clicar botão você vê que o botão já vem com o estilo certo aí eu coloco aqui o texto garantir minha vaga e tá faltando um espaço aqui da lista pro botão Então vou selecionar a lista e aqui em avançado eu vou colocar aqui no espaçamento inferior de 40 acho que vai ficar legal vou clicar em publicar e vou fazer assim e acho que ficou legal só acho que esse botão aqui a gente pode deixar ele maior Então vou testar fazer o seguinte Ó eu vou clicar aqui em botão e aqui em estilo eu vou esticar

ele para deixar o botão maior e vamos ver como é que tá ficando show de bola acho que ficou bem melhor assim chama mais atenção você vê que tá pivo legal a imagem já veio antes do texto porque a gente já tinha configurado isso aqui nessa outra sessão e como a gente duplicou ele já pegou as configurações e aí Aqui também ficou totalmente Responsivo Talvez o que tenha que ser ajustado ainda é o tamanho dos textos para os outros pontos de interrupção aqui eu acho que tá funcionando legal mas talvez aqui porque eu tenho mais

texto Quando chega nesse ponto de interrupção aqui eu tenho que pensar se vale a pena diminuir esse tamanho Mas isso aqui eu vou deixar quando eu tiver fazendo os ajustes finais lá no fim eu prefiro fazer assim o grosso da coisa Deixar a maior parte da página pronta e depois lá no final faço os ajustes finos essa sessão aqui ela tá pronta eu vou criar uma sessão agora que é uma sessão de prova social onde nós vamos ter os depoimentos vão ser três colunas Então vou escolher aqui uma grade com três colunas você já sabe

que a gente tem que vir aqui em avançado em preenchimento vou colocar um valor superior de 1220 direita 64 inferior 120 também e esquerda 64 eu vou alterar aqui E para esse ponto de interrupção eu posso deixar 64 cima e baixo e direita esquerda Zerado clico em publicar para salvar e volta aqui pro desktop se eu clicar no mais aqui eu posso agora colocar um widget tem um widget aqui chamado depoimento Só que eu não quero usar esse widget porque o design que eu escolhi vai ser um pouquinho diferente então vou deletar ele mas só

para você saber que já tem um widget pronto e aí eu seleciono aqui a Grade vou dar um duplo clique e vou chamar isess aqui de prova social beleza aqui agora eu vou ter três colunas cada coluna vai ser um contêiner com outros widgets dentro então vou clicar aqui no mais vou colocar um contêiner E aí dentro desse contêiner selecionado agora eu posso dar um duplo clique aqui e vou chamar isess aqui de depoimento E aí eu vou clicar no mais aqui e aí eu vou ter Eu acho que o nome é classificação classificação inglês

Rating por isso que eu coloquei ra mas é classificação o nome desse wiot vou alinhar o meio e o eu vou aqui em estilo Vou deixar um tamanho 24 um pouquinho maior espaçamento eu vou colocar 12 cor eu vou colocar destaque um E aí aqui em avançado eu vou colocar uma margem inferior de 16 E aí eu vou também adicionar o depoimento em si então ven aqui em mais editor de texto aí eu vou copiar aqui em prova social e eu tenho aqui Esse texto se você perceber eu tenho essas tags HTML aqui também porque

eu também quero dar um destaque depois utilizando CSS então é muito importante que quando você adicionou esse widget aqui de editor de texto você troque de visual para texto e cola aqui pois nós temos tags HTML se se não tivesse essas tags daria para colar aqui tranquilo sem problema mas como nós temos essas tags então eu tive que mudar aqui para texto vou vir aqui em estilo e já vou alterar Cor para texto secundário e a tipografia para texto normal abaixo do depoimento eu vou ter uma imagem e o nome mas antes eu já vou

alinhar o centro que eu tinha esquecido de fazer isso aqui aí agora eu vou colocar a imagem que é a foto da pessoa então adicionar elemento imagem e vou selecionar aqui a primeira imagem selecionei e aí para arredondar essa imagem aqui eu venho aqui em estilo e aí aqui em raio da borda eu mudo de pixel Para percentual e eu posso colocar aqui ó 50% aí ele arredonda aí eu posso colocar o nome da pessoa agora vem aqui em mais e eu vou colocar aqui um título e aqui em prova social agora eu vou copiar

esse nome aqui que eu tenho três nomes fictícios ali então vou colocar aqui estilo já vou alinhar o centro cor do texto eu vou colocar texto secundário e tipografia eu posso colocar texto pequeno acho que vai ficar legal aí eu vou selecionar o contêiner aqui do Depoimento e eu vou colocar uma cor agora aqui em estilo eu venho aqui em tipo de plano de fundo eu vou escolher a cor de BG cards e a borda eu vou colocar aqui tipo de borda pontilhado dois pixels de largura e a cor vai ser borda cards Faltou um

espaçamento interno então aqui em avançado eu vou colocar 32 só que quando chegar nesse outro point em vez de 32 eu quero que seja 24 porque senão vai ser demais aí volta Aqui pro desktop publica e vamos ver como é que tá ficando legal faltou arredondar os cantos desse componente então volto aqui aqui em estilo borda raio da borda vou deixar 12 pixels publiquei e agora ele salvou ficou da maneira certa com o componente Pronto agora eu posso duplicar ele só que eu acho que ainda faltou um pouquinho os espaçamentos aqui então vou fazer isso

Aqui antes de duplicar vou selecionar esse texto aqui em avançado vou colocar uma margem embaixo você pode ver que já tem um espacinho aqui isso aqui é um bug de elemento há muitos anos que eles não consertaram ainda dá para remover esse espaço aqui utilizando CSS mas eu não vou fazer isso aqui eu vou colocar um pouquinho mais de Margem aqui para ter um espaço ainda maior mas se você quiser ter mais certeza dos números que você tá usando você tem que primeiro remover Esse espaço aqui utilizando CSS para depois aqui adicionar manualmente mas eu

não vou ser tão chato assim porque eu não preciso ter tanta precisão nesse momento eu coloquei 16 E aí da imagem pro nome eu vou colocar talvez qu pixels eu acho que vai ficar legal clico em publicar voltei aqui e acho que ficou bacana pouquinho mais de espaço daqui para baixo então vou deixar oito o vai ficar mais bacana vamos ver aqui deixa eu diminuir Aqui show aí o que tem que fazer agora é voltar aqui clica aqui no depoimento botão direito duplicar botão direito mais uma vez duplicar e agora é trocar essas imagens então

vou clicar aqui nessa imagem vou selecionar essa outra imagem e já vou pegar o outro nome nome aqui dessa outra pessoa e vou trocar aqui troquei já vou pegar esse outro nome de um cont control c troco aqui e faltou trocar imagem então clico aqui naem Imagem seleciono aqui selecionei publiquei para salvar temos que agora pensar na responsividade e também adicionar um espaço entre cada coluna Então vou selecionar aqui selecionar a prova social para eu colapsar tudo isso aqui é só clicar aqui em cima ó ele vai expandir e depois ele colapsa tudo e aí

eu venho aqui em layout e aqui eu quero ter 32 de espaçamento quando ele for coluna 32 só que quando isso aqui virar Uma coluna só o seja a linha eu quero que ele tenha 40 40 deu uma bugadinha aqui mas já voltou e aqui a gente pode fazer a mesma coisa que nós fizemos aqui que é utilizar aquela função CSS com tamanho mínimo e um tamanho máximo que vai dar uma responsividade melhor do que se a gente for fazer na mão para fazer isso aqui em vez de ter aqui um número fixo eu troco

aqui de FR para esse lápis e aqui eu vou colocar aquela função vou Chamar assim de repeat Auto Fit min Max e aqui eu vou tentar 320 pixels e um FR Vamos ver se esse tamanho vai ficar legal vamos vir aqui e vou testar agora e olha só eu tô dizendo que eu quero que ele tenha no mínimo 320 pixels se ele não conseguir ter 320 pixels se ele não conseguir ter no mínimo 320 pixels ele vai ter um FR que é um espaço total de uma coluna e assim ele fica 100% responsivel e olha

só como é fácil a gente trabalhar a responsividade Utilizando essa propriedade CSS aí essa função de min Max e essa sessão aqui ela tá pronta agora a gente vai pra próxima sessão eu vou criar agora uma sessão que é uma sessão de detalhes técnicos Então vou colocar aqui um flexbox nessa direção mesmo já vou vir aqui em avançado e aqui eu tenho que definir o preenchimento vou desvincular superior eu vou deixar 120 direita 64 inferior 120 e esquerda 64 mesmo valor das outras sessões só que quando eu chegar aqui no Tablet eu vou de deixar

um valor de 64 cima e embaixo a gente tá usando o mesmo valor para todas as sessões dá para automatizar isso aqui com CSS mas eu não vou fazer isso aqui agora não porque é mais complexidade isso aí vai te atrapalhar aqui agora eu vou colocar um título Então vou vir aqui ó eu vou copiar esse título aqui vou dar um cont control c vou clicar no mais vou colocar o título vou colar aqui já vou vir aqui em estilo vou centralizar vou colocar Uma cor de texto primário e vou colocar tipo topografia de título

sessões abaixo desse título eu vou ter um componente de Carrossel de imagens então vou clicar aqui e aí para colocar as imagens é só clicar aqui nesse mais e aqui eu vou pegar as imagens vou pegar na ordem já para ver se vai dar certo da maneira que eu quero vou clicar aqui módulo 1 módulo 2 3 4 5 6 7 8 9 10 criei uma nova galeria e aí inserir galeria e vamos ver se deu certo deu certo e agora o que eu Vou fazer é o seguinte eu tenho que fazer alguns ajustes resolução

da imagem eu vou colocar aqui completo que daí ele já fica no tamanho que eu quero e eu quero também aqui em opções adicionais vamos ver se tem mais alguma coisa que eu quero fazer você pode definir aqui se você quer deixar reprodução automática para ele já ficar passando assim pro lado ou você pode deixar da maneira padrão vou deixar assim eu vou Também aqui em estilo eu vou colocar o tamanho da seta acho que eu vou aumentar um pouquinho que essa seta tá muito pequena então vou deixar aqui um tamanho 40 fica mais legal

já vou alterar a cor também vou colocar uma cor de destaque você pode aqui colocar a seta Opa essa paginação Você tem uma paginação aqui embaixo Só que não dá para ver deixa eu te mostrar vou trocar aqui paraa cor de texto secundário e a cor ativa eu vou deixar destaque um você Pode deixar essa paginação fora ou dentro ele altera aqui e aí aqui na imagem eu vou colocar um espaçamento personalizado 20 pixels eu acho que é muito pouco então vou deixar 32 publiquei vamos ver como é que ficou E aí eu posso diminuir

e ele já pega a responsividade automática esse componente ele já é responsivo por padrão então ele já se adapta aos diferentes tamanhos de tela e olha só que bacana que ele ficou legal falta a Gente colocar um espaço entre o título e esse componente então volto aqui vou selecionar o título e vou vir aqui em avançado e aqui eu vou colocar uma margem inferior de 40 vou publicar E aí eu volto aqui e ficou legal se você clicar aqui ele passa pro lado e mais uma sessão pronta vamos pra próxima a próxima sessão é a

sessão sobre onde você apresenta o autor do curso a pessoa que tá vendendo o curso Que fez e tal então vão ser duas colunas layout simples vou clicar no mais vou pegar uma magr de duas colunas essa aqui eu vou vir aqui em avançado e já vou colocar aqui um valor Val superior 120 direita 64 inferior 120 esquerda 64 só que quando chegar nesse outro Break Point aqui ele já pode diminuir então pode ser assim pode ser 64 cima e baixo e Zerado dos lados publiquei volto aqui aí aqui eu vou colocar uma imagem então

vou clicar no mais e eu vou clicar aqui Em imagem já vou selecionar a imagem correta aqui que é essa imagem aqui que é para ser desse curso e aí eu vou selecionar a grade aqui e aí essa outra coluna vai ser um contêiner Vou colocar aqui um elemento de contêiner então e dentro desse contêiner eu vou ter um título e eu vou ter um texto editor de texto Legal vamos pegar o conteúdo aqui agora então aqui no noche vou copiar o conteúdo vou Copiar aqui Colei estilo texto primário tipografia título sessões aí esse outro

texto aqui copiar cola aqui aí eu venho aqui em estilo e também vou alterar isso aqui para texto secundário tipografia vai ser texto normal Legal vamos fazer o seguinte vou colapsar aqui e vou colapsar aqui essa sessão anterior aqui eu esqueci de renomear aqui o contêiner Então vou dar um duplo clique vou chamar ISO aqui de detalhes técnicos que eu tinha esquecido de fazer antes e aí essa sessão que é a sessão que a gente tá trabalhando agora eu vou dar um duplo clique e vou chamar de sobre E aí com essa aqui mesmo selecionada

eu venho aqui em layout e eu vou alinhar ao centro também já vou definir que aqui eu quero ter 64 de coluna mas quando isso aqui virar linha eu quero que seja 40 a gente já vai ver se tem que fazer algum ajuste de Diferente e aí assim tá legal vou vir aqui posso fazer a mesma coisa que eu fiz aqui em cima aqui eu defini que eu quero que seja quanto aqui 40 40 legal Posso manter a consistência posso deixar aqui então 40 40 vou alterar aqui então desenc eu vou colocar 40 e aqui

e 40 na verdade como é o mesmo valor você pode deixar vinculado Então a Gente vai deixar vinculado aí quando chegar nesse ponto de interrupção aqui aí sim aí não tem jeito vai ter que virar uma coluna só porque senão vai ficar muito muito pequena cada coluna não vai ficar legal volta aqui vamos ver legal acho que essa imagem tá muito grande também então vou diminuir o tamanho dela eu vou ver qual é o tamanho que eu tava usando aqui ó eu posso fazer o seguinte posso clicar na imagem aqui Botão direito copiar aí eu

posso voltar nessa imagem aqui clico aqui com o botão esquerdo aí clico com o botão direito e clico em colar estilo e aí ela cola o estilo daquela imagem que eu copiei e olha só já ficou bacana responsivo Só falta agora colocar um espaço aqui entre o título e o texto vem aqui em avançado então aqui inferior eu vou colocar 16 publiquei e vou vir aqui rapidamente para ver como é que tá Ficando e olha só ficou legal totalmente responsivo se adaptando a diferentes tamanhos de tela show de bola essa sessão aqui ela tá pronta

eu agora vou criar uma sessão que é conhecida como alavancagem de preo então eu vou colocar aqui duas colunas então vou clicar no mais grade selecionar esse aqui já vou vir aqui no avançado e aqui eu vou colocar Superior eu vou colocar 120 direito 64 120 inferior 64 na esquerda já posso renomear isso aqui chamar isso aqui de preço pode ser preço e aí aqui dentro eu vou ter duas colunas A primeira coluna eu vou colocar um contêiner e dentro desse contêiner eu vou ter um título colocar um título já vou copiar também o conteúdo

vou copiar aqui copiei aqui troca vem aqui em estilo já posso Trocar essa cor aqui para destaque um posso colocar aqui o texto também texto pequeno acho que vai ficar legal e aí eu vou copiar esse outro título porque eu já vou precisar também clicar aqui no mais colocar um título e aqui eu vou fazer isso aqui já vou vir aqui em estilo e aqui cor do texto eu vou colocar texto primário e tipografia eu posso colocar título de sessões legal uma coisa que eu posso fazer eu posso trocar essa tag aqui aqui em Conteúdo

T HTML dh2 posso deixar aqui um p como se fosse um parágrafo isso aqui não faz muita diferença em termos visuais na verdade não faz diferença nenhuma só porque em termos de html isso aqui fica um pouco mais organizado mas show de bola seleciona de novo esse título aqui deixa eu ver se eu deixei certo texto primário título sessões legal faltou esse texto aqui agora vou copiar copiei clicar no mais aqui colocar um editor de texto e aí eu tenho Eu não tenho nada de html dentro desse texto Então não preciso mudar de visual para

texto é só eu colar aqui mesmo aí eu venho este e aqui eu vou trocar para texto secundário e tipografia texto normal bacana do lado aqui eu vou ter um componente agora que vai ser um uma caixinha de preço então vou clicar aqui mesmo tem que clicar aqui no componente principal E aí eu vou clicar no mais eu vou colocar um outro contêiner esse Contêiner eu já vou colocar uma cor aqui em estilo vou selecionar aqui BG preço vou colocar uma borda também uma borda pontilhada não vou deixar a borda normal acho que vai ficar

melhor sólido dois pixels com a cor de borda preço e raio da borda 12 já para arredondar os cantos vou clicar em salvar só para não perder nada caso dê problema aí aqui dentro eu vou começar a trazer os elementos primeiro elemento que eu vou colocar é esse título aqui oferta de Black friday clica em mais clica em título coloca aqui aqui e aqui em estilo daí eu posso trocar aqui colocar texto primário posso alinhar o centro e posso também trocar tipografia colocar aqui título sessões aqui embaixo daí eu vou ter uma lista eu já

posso pegar uma lista aqui que eu já fiz antes então eu posso clicar aqui botão direito copio e aí eu colo ali embaixo já ganho um pouco mais de velocidade clico aqui botão direito colar Tá aqui a lista vou Remover todos os itens com exceção do primeiro it item Porque eu já tenho o ícone certo então vou agora copiar aqui esse conteúdo e vou colar aqui aí eu duplico volto aqui e pego o resto do conteúdo faço assim ó dessa maneira eu ganho velocidade copiando componentes e reutilizando e a maneira que eu trabalho porque senão

você toda vez ter que criar na mão acaba tomando mais tempo beleza vou fazer assim 7 dias de Garantia e vamos ver 1 2 3 4 5 1 2 3 4 5 legal posso publicar aqui para salvar embaixo Aqui eu vou ter aí um editor de texto e aqui eu vou ter esse texto aqui como eu tô utilizando o HTML aqui para depois dar um uma estilizar com CSS eu tenho que mudar aqui do visual pro texto colei aqui e aqui em estilo eu vou trocar a cor do texto para texto secundário e a tipografia

eu também vou trocar para texto normal já vou centralizar isso aqui também publico Aqui para salvar embaixo disso aqui daí a gente coloca esse outro texto aqui do valor à vista então clica em mais editor de texto e aí eu posso colar assim e já dou a cor certa aqui cor do texto cor de texto secundário e tipografia texto normal já vou centralizar também Opa centralize aqui publiquei aí eu vou colocar um botão vou clicar aqui colocar um botão e esse botão Qual é o texto é fazer a inscrição legal coloco aqui fazer inscrição em

estilo Deixo esse Botão Centralizado E aí eu posso colocar esse texto de compra segura clico em mais aqui editor de texto cola aqui vem aqui em estilo e aqui em cor do texto eu coloco texto secundário e tipografia eu posso colocar também texto normal já vou centralizar também aí eu vou ter aqui pix boleto cartão algumas pessoas gostam de ter uma imagem aqui com os meos de pagamento mas eu gosto de fazer isso aqui ó eu gosto de usar Esse essa lista de ícones assim e aí eu coloco em linha aí eu apago assim e

aí eu vou duplicar esse aqui mas primeiro eu vou colocar aqui ó pix aí eu duplico porque eu vou usar esse mesmo ícone aqui pix boleto e aqui eu vou chamar de cartão legal aí eu venho aqui em estilo alinha oo meio ícone eu vou trocar para destaque um E aí o texto eu vou colocar tipografia texto pequeno e cor eu vou Colocar texto secundário legal acho ficou bacana publiquei vamos para os ajustes finos agora vou selecionar o componente vou vir aqui quem é avançado Vou colocar aqui um preenchimento de 48 só que aí quando

chegar nesse outro ponto de interrupção aqui eu posso deixar 24 acho que vai ficar melhor a gente já vai fazer os ajustes eu fiz algo errado aqui que é o seguinte ó vou selecionar esse componente principal aqui ó e aqui eu Esqueci de alterar esse preenchimento para esse ponto de interrupção que é a primeira coisa que eu faço então com esse com esse com essa sessão selecionada eu vou desvincular já vou fazer isso aqui porque eu errei anteriormente aí você vê que tinha ficado uns espaços a mais que não é o que eu queria beleza

falta alinhar essas colunas então aqui em layout eu venho aqui justificar o meio e agora eu vou Colocar um espaçamento entre as colunas Então vou colocar aqui 64 quando chegar nesse ponto de interrupção 64 já é demais então posso deixar aqui 32 de repente E aí aqui isso aqui vai virar uma linha então mudo aqui de coluna e vai ficar uma coluna na verdade então isso aqui vira uma Coluna então aqui pode ser um espaçamento maior daí aqui eu posso botar daí 40 E aí ele ficou legal ficou melhor legal falta alguns ajustes aqui a

gente vai fazer isso aqui agora então você selecionar aqui esse título aqui para trabalhar essas margens Então vou vir aqui em avançado e margem inferior eu vou colocar quatro lembrando você tem que desvincular aqui sempre clica aqui para desvincular se você quer colocar só Um valor senão ele vai pegar o valor para todas todos esses lados aqui superior inferior lado direita esquerda etc aí vou pegar esse título aqui aqui em avançado desvincula de novo aqui inferior eu vou deixar 16 e aqui nesse componente a gente também tem que trabalhar esses espaçamentos então vou vir aqui

aqui vou selecionar aqui vou colocar 16 aqui a gente já tem um espaço embaixo Porque eu copiei esse componente lá de cima só que acho que vai ficar 40 vai ficar demais então vou deixar aqui 32 e depois quando eu colocar os tamanhos certo desses textos aqui talvez a gente tem que alterar esses espaçamentos então vou então a gente talvez tem que voltar aqui ã novamente mas como eu já tinha avisado anteriormente vou deixar oito como eu já tinha avisado anteriormente eu gosto de fazer o grosso da coisa primeiro deixar Tudo alinhadinho o que eu

preciso e no final faço os ajustes finos E aí aqui vou deixar 32 legal aí do botão para baixo aqui vou selecionar o botão avançado inferior Vou colocar aqui oito e aqui tá legal ficou legal publiquei vamos ver aqui acho que também tá muito pouco então vou selecionar aqui em avançado vou colocar oito Legal vamos ver a parte responsiva agora como é como que isso aqui tá ficando aqui Ó tá acho que tá legal aí Aqui também essa caixinha aqui deixa eu ver deixa eu pensar vou selecionar aqui e aqui em layout eu vou colocar

assim para ficar tudo ao centro Aí ele dá uma uma alinhada mais mais interessante fica tudo aliado ao centro era o que tava faltando aí vamos ver a parte [Música] responsiva acho que tá ficando legal o Que eu posso fazer é esse botão deixar ele maior em todos os Break points ou só nesse aqui então o que eu vou fazer é o seguinte eu vou voltar aqui eu vou selecionar aqui o botão vou clicar aqui e aqui em estilo eu vou colocar aqui para esticar deixo aqui em esticar e aqui em avançada eu tenho que

vir aqui em largura Total 100% E aí ele fica assim legal falta os ajustes finos mas bem Dizer essa sessão aqui ela tá pronta ficou bem bacana lembrando você tem que testar no seu celular para ver se precisa fazer algum ajuste um pouco diferente mas nós temos essa sessão de preço aqui ela tá pronta agora a gente vai fazer a próxima sessão não se esquece de clicar aqui em publicar para salvar Eu agora vou criar uma sessão que é uma sessão de frequentes bem simples vem aqui em mais então flexbox escolhe essa direção aqui Já

vamos vir aqui no avançado e em preenchimento a gente já vai definir um valor superior de 120 direito 64 inferior 120 esquerda 64 eu já vou alterar aqui para esse outro Break Point eu vou desvincular primeiro aqui eu vou deixar 64 cima e baixo e Zerado dos lados clica em publicar para salvar e volta pro desktop aqui primeiro eu vou ter um título então clica no mais e aí clica em título aí eu vou copiar aqui do notion vou clicar Aqui vou collei já venho em estilo vou alinhar o centro vou deixar a cor do

texto texto primário e a tipografia eu posso colocar título sessões embaixo desse título eu vou ter um subtítulo então copiei ali vem aqui em mais editor de texto cola aqui e aqui em estilo já vou alinhar o centro vou colocar cor texto secundário e tipografia texto normal vou publicar aqui embaixo disso aqui eu vou ter as Perguntas e respostas Então o que eu vou fazer eu vou colocar o componente é um componente que se chama sanfona então cliquei aqui e aqui a gente vai colocar as dúvidas eu vou deixar uma dúvida primeiro para estilizar ela

e depois a gente duplica só porque senão tem que fazer trabalho duplicado E aí toma mais tempo primeira coisa que eu vou fazer eu vou colocar uma cor pra gente ver o que nós estamos fazendo aqui em Estilo eu vou vir aqui em cabeçalho e aqui eu vou escolher primeiro a tipografia eu posso escolher a tipografia de título de componentes cor eu posso colocar texto primário ao passar o mouse eu vou colocar a cor de destaque um e ativo vai de destaque um E aí aparece a aqui e aí em conteúdo eu não preciso mudar

nada aqui por enquant só que aqui dentro ten que colocar o conteúdo Como que eu faço eu Tenho que arrastar um edito para cá então eu posso simplesmente aqui em mais e pegar um editor de texto e arrastar para cá aqui eu vou ter o conteúdo para dentro desse item da sanfona vou vir aqui em estilo e aqui em cor do texto vou alterar para texto secundário e tipografia eu já vou escolher também texto normal vou publicar aqui só para ver como é que tá ficando e vou ver aqui legal faltam alguns ajustes e a

gente vai fazer isso aqui agora Então Agora falta a gente colocar o estilo que a gente quer para SF bem simples eu venho aqui em tipo de plano de fundo e eu vou colocar aqui uma cor BG cards já vou colocar uma borda também a borda sólida de dois pixels talvez tenha que ser um mas eu vou deixar dois agora só para ver como é que fica cor da borda vou colocar borda cards não é um card Mas é a mesma cor dos cards então vou deixar isso aqui e raio da borda eu vou colocar

12 só para arredondar Também preenchimento eu não vou deixar V publicar vamos ver como é que ficou volta aqui ficou legal só não gostei que tem essa marcação aqui desse componente desse item dentro da sanfona então o que que eu faço vou vir aqui seleciona de novo a sanfona E aí eu vou vir aqui em conteúdo aqui em conteúdo eu posso colocar tipo de borda eu vou colocar nenhum porque daí ele não vai ter borda só que eu tenho que deixar deixar um Preenchimento então vou deixar um preenchimento aqui de 16 só para ficar um

espaçamento vou clicar em publicar E aí eu venho aqui eu acho que ficou bacana Olha só pra gente ver como é que ficou na real tem que colocar mais mais itens Então volta aqui deixa selecionado vem aqui em conteúdo e clica aqui para duplicar aqui o que que você pode fazer aqui esse componente normalmente você usa para responder dúvidas e quebrar objeções Dos seus possíveis clientes então eu já vou deixar aqui um o texto para você saber vamos deixar assim cinco objeções vou publicar e aí eu vou voltar aqui vamos lá para baixo Opa e

olha só ficou bacana Só tá faltando um espaço entre cada item desse dessa sanfona então vou fazer isso aí agora a gente pode vir aqui em estilo e aqui espaço entre itens eu posso deixar assim hum eu acho que 12 vai ficar legal vou Publicar E aí vou vir aqui show de bola só que você vê que tá um tamanho muito grande aqui então não não gostei disso aqui isso aqui eu vou limitar o tamanho disso aqui existem mais de uma maneira de fazer isso aqui a maneira que eu vou fazer é limitar o tamanho

de Tod tudo que tá dentro desse componente aqui dessa grade de uma vez só então seleciona o o contêiner principal já vou renomear isso aqui vou chamar isso aqui de dúvidas e aí você Vem aqui em layout e aqui a gente tem largura do conteúdo 1280 eu vou diminuir o tamanho aqui então posso vir aqui e posso colocar um tamanho máximo de 700 acho que 700 ficou legal só que a gente tem que tomar cuidado porque aqui eu quero que ele tenha 100% da largura eu não quero que ele tenha mais 700 pixels então aqui

eu vou mudar de pixel para percentual e aqui eu vou colocar 100% só que só que aí não vai ficar legal porque ele vai ficar com 100% da Largura e o que eu tô utilizando paraas outras sessões é 90% largura máxima Então em vez de 100% eu vou deixar 90 e aí eu tenho que me certificar que nos outros pontos de interrupção também vai ser 90% E aí ele ficou com as margens do lado 5% de margem para cada lado ficou legal vamos ver a gente tem que colocar agora uma margem entre cada elemento Então

vou selecionar aqui vem aqui em avançado aqui vou colocar oit e Aqui eu vou colocar em avançado aqui vou colocar pente 40 vamos ver como é que ficou publiquei E aí vamos ver aqui na na parte responsiva acho que vai ficar bem bem interessante legal ele ele ficou com com aquele tamanho máximo de 700 pixels que a gente colocou E aí quando ele chega nos outros pontos de interrupção ele fica com no máximo 90% e quando você clica aqui ele troca a Cor cor Ativa é a cor de destaque mesmo bacana a gente terminou mais

uma sessão falta agora só o rodap pé eu vou criar agora a última sessão da nossa página que é a sessão de rodapé bem simples de fazer clica aqui no mais flexbox e eu vou selecionar essa direção aqui agora a gente não precisa de 120 pixels de preenchimento em cima embaixo porque eu acho que é demais mas eu vou definir um valor um pouquinho Diferente aqui então vou deixar 24 vou continuar com 64 no lado direito e esquerdo só porque eu quero garantir que o conteúdo nunca toque as beiradas mas aí quando ele chegar nesse

ponto de interrupção aqui eu posso deixar um valor superior e inferior e zerar dos lados vou clicar em publicar para salvar e aí eu vou voltar aqui pro desktop e aqui eu vou colocar esse conteúdo aqui que é o conteúdo de copyright então clico no mais coloco um título aqui Posso colar aqui posso mudar aqui de H2 para span se eu quiser não é um texto tão importante assim em termos de html só para deixar um pouquinho mais organizado Mas você não precisa fazer isso aqui na verdade isso aqui não não muda nada em termos

visuais aí eu venho aqui em estilo eu vou colocar aqui cor do texto eu vou colocar texto secundário tipografia eu vou colocar texto pequeno e aí eu posso dar um Ctrl D para duplicar ou botão direito e duplicar E Aí eu seleciono esse segundo aqui e aqui eu vou copiar esse outro texto aqui que você coloca desenvolvido por você pode também colocar o link pra sua página de portfólio e tal se você tem um site ou não se você for Web Design tiver fazendo essa página para outra pessoa ou deixe sem esse rodapé algumas pessoas

colocam aqui política de privacidade termos de uso Muitas pessoas não colocam acho que por lei você é obrigado a colocar não não tenho certeza mas eu vou alinhar Isso aqui agora vou clicar aqui duas vezes para chamar aqui de rodapé então chamei de rodapé E aí eu venho aqui em layout e agora é bem simples a gente coloca aqui espaço entre se você quiser que isso aqui esteja um em cada lado ou deixa aqui em espaço ao redor ou um espaço uniforme eu vou deixar aqui espaço ao redor eu acho que vai ficar mais bacana

clico em publicar E aí eu só tem que tomar cuidado se isso aqui tá responsvel Então vamos vamos ver como é Que tá ficando aqui aqui eu acho que aqui de repente já poderia est em outra direção posso fazer assim então só que aqui daí eu vou centralizar eu tenho que colocar um espaço também então vou colocar um espaço já aqui ó já venho nesse Break Point aqui eu coloco o espaço aqui então vou deixar aqui 32 e ele já vai herdar esse espaço para cá por que que eu fiz assim por que que eu

coloquei o espaçamento aqui e não só nesse Break Point aqui porque se você Colocar mais texto aqui depois você já vai ter um espaçamento aqui para garantir que isso aqui Nunca fique tão próximo um do outro só que eu vi que 32 é demais então 16 acho que é um valor mais apropriado eu acho que ficou bacana show de bola vou publicar vamos ver aqui na página em si como que ficou legal essa parte aqui do rapé tá pronto nossa página tá pronta falta agora fazer Uns ajustes finos que é a próxima coisa que a

gente vai fazer agora eu quero fazer uns pequenos ajustes para deixar a página ainda melhor eu abri a página no celular testei no celular ficou bem legal ficou 100% responsivo Mas eu acredito que nós podemos melhorar um pouco a tipografia então é bem simples você tem que vir aqui em configurações do site e aqui em Fontes globais a gente vai fazer algumas alterações primeira coisa você pode Clicar aqui para a gente poder ver em tempo real o que que nós estamos fazendo e eu percebi que esse texto aqui ó ele tá muito pequeno no celular

Então a gente vai fazer uma alteração aqui e também vamos melhorar essa altura de linha Então esse primeiro texto aqui eu tô chamando de título primeira dobra Deixa eu só reordenar isso aqui porque daí fica até mais organizado então vou fazer assim ó tem o título primeira dobra título sessões E aí o resto então O título primeira dobra eu vou selecionar aqui se certifique que você tá no desktop aqui tá dois ficou um tamanho legal só só que aqui então aqui eu vou deixar 1.8 E aí pros outros Break points aqui eu posso deletar aí

deletando ele vai pegar 1.8 que é o que a gente acabou de definir pro outro ponto de interrupção e aqui também a gente pode deixar assim ficou um tamanho legal aqui parece tá meio grande mas no celular esse tamanho Vai ficar legal porque eu já testei então vou fazer assim ó volto aqui outra coisa que eu quero fazer essa altura de linha acho que ela não tá legal então volta aqui no desktop mesmo porque a gente vai colocar uma altura de linha aqui e aí ele vai pegar para para todos os tamanhos de tela troca

de pixel para esse lápis e uma altura de linha que vai ficar legal é 1.15 não dá para ver não tá alterando nada aqui Isso aí é um bug no elementor então você pode salvar Alterações aqui vamos fechar aqui eu vou recarregar Beleza você pode ver que já trocou a altura de linha Mesmo não mostrando naquela página é um bug já faz muito tempo não foi consertado ainda mas tem mais coisas que nós vamos fazer aqui ó essa altura de linha aqui não dá para ver porque tem pouco texto mas aqui também eu vou melhorar

essa altura de linha então isso aqui eu tô chamando de título sessões vem aqui no desktop mesmo troca aqui de pixel para esse lápis e eu Vou colocar aqui 1.15 você vê que deu uma bugada que o elemento tem esses problemas ele tem uns bugs Mas é só a gente salvar aqui e aí se você recarregar aqui você vê que aqui já alterou também o altura de linha e vai alterar a altura de linha para todos os pontos de interrupção todos os tamanhos de tela ficou bem melhor eu testei no celular ficou melhor você pode

alterar da maneira que você quiser mas isso aqui tá feito a gente pode fechar aqui agora E voltar lá pra edição e agora ele vai levar um tempo aqui porque ele tá passando por todos os textos que a gente utilizou lá e ele demora aqui um pouquinho se travar aí você tem que vir aqui copiar isso aqui e aí abre numa página nova aqui e aí você vem aqui e clica em editar com elemento mas vamos ver aqui ele terminou de carregar só que ele não pegou o fundo Então vou recarregar aqui mesmo para ver

se ele volta o Elemento tem dessas às vezes ele dá umas bugadas ó ele já voltou já tá pronto a gente já pode continuar a edição essa parte aqui esses ajustes aqui eles estão prontos agora eu quero adicionar um CSS para dar alguns estilos aqui a mais eu reajuste reorganizei aquela pasta essa pasta aqui eu coloquei as imagens dentro de uma pasta chamada imagens e outra pasta aqui que eu criei é essa pasta outros arquivos aqui dentro então você tem o guia de estilos que a gente usou Anteriormente e também coloquei aqui um arquivo chamado

CSS PT XT aqui você seleciona tudo para selecionar tudo no Windows eu apertei CRL A então apertei control a e apertei CRL C aí ele copia tudo a gente pode fechar isso aqui também eu vou fechar aqui e aqui para adicionar o CSS é bem simples aqui na prévisualização e aqui eu vou clicar aqui em personalizar E aí aqui eu vou colar esse código CSS eu já vou te explicar o que Que tá acontecendo aqui primeira coisa nós temos essa cor de destaque que eu tinha utilizado algumas tags HTML Então essas tags HTML elas deram

essa cor aqui essa cor de destaque aqui aqui que você vai trocar a cor para alterar essa cor aqui você pode ver que eu tô utilizando ela em mais lugares aqui também tô utilizando aqui nos depoimentos também tô utilizando e talvez em mais algum lugar acho que não tô usando em mais nenhum lugar beleza Aqui essa parte do CSS parcelas é esse tamanho de texto aqui então se eu aumentar isso aqui de 1.18 para por exemplo 2.18 você vê que já aumenta o tamanho Mas eu vou quero deixar aqui 1.18 RM que eu acho que

ficou legal e esse aqui é o tamanho do valor então se eu aumentar aqui de três para quatro ele também já aumenta o tamanho eu vou deixar em três que é um tamanho que eu acho que fica legal o resto do CSS agora é importante eu fazer O seguinte deixa eu só tirar esse espacinho a mais que tinha que não é necessário eu vou copiar isso aqui btn tracinho pulsante mas primeiro eu vou publicar aqui publiquei aí eu vou voltar aqui agora nós vamos colocar um efeito nesse botão bem simples eu vou clicar aqui no

botão e aqui em avançado classe CSS eu vou colar aqui btn com esse tracinho assim dessa maneira mesmo e aí aqui vou fazer isso aqui para todos os botões ven aqui em avançado Classes coloca isso aqui e aí nós temos mais um botão que é esse botão aqui vou clicar aqui venho aqui em avançado coloca a classe importante em classe não em ID você coloca em classe beleza nós temos essas classes aqui aí eu vou publicar e as classes elas estão salvas agora para eu poder ver essa alteração que eu fiz aqui além de ter

salvo já clicando em publicado eu preciso recarregar a página porque eu fiz modificações lá então vou recarregar a Página e agora você vê a gente tem esse efeito CSS não ficou legal porque nós temos que fazer alguns ajustes vamos ver aqui aqui ficou legal tá porque o botão ele tá pegando 100% da largura Então esse botão ele tem que tá com 100% da largura para esse efeito funcionar e a gente também tem que ajeitar essas margens é bem simples de fazer Então vou voltar aqui no elementor e aqui não tá aparecendo também o efeito porque

a gente acabou de de salvar aqui então a Gente salvou o CSS lá mas o CSS não pegou aqui porque eu não recarreguei a página então eu clico aqui para recarregar a página e agora o CSS também vai ser aplicado para essa para essa página aqui beleza primeira coisa vou selecionar o botão aqui e aqui em estilo eu vou colocar assim estear ele já melhorou só que eu não posso ter uma margem embaixo Então vou vir aqui em avançado vou linkar tudo aqui e posso simplesmente apagar em qualquer lugar aí Ele apagou toda a margem

só que eu quero um espaço entre o botão e esse texto Então vou selecionar o texto de baixo venho em avançado vou desvincular e eu vou botar uma margem superior Não lembro qual era o valor agora mas eu vou deixar oito e aí eu publico aqui e vamos ver como é que ficou aqui eu tenho que recarregar daí eu posso fechar aqui esse SS a gente já vai vai voltar porque eu quero te mostrar como fazer mais umas alterações E olha só já ficou legal só tem que acertar isso aqui aqui também aqui tá legal

porque ele tá pegando 100% da largura mas aqui a gente tem que tirar essa margem inferior Então vem aqui seleciona o botão vem aqui em avançado eu vou vincular E aí eu posso selecionar qualquer valor deletar e ele tirou a margem E aí eu vou selecionar o elemento de baixo clico em avançar desvinculo e coloco uma margem superior e ele já fica da maneira com correta vamos ver aqui tá Ficou legal o botão ficou bacana ficou interessante vamos ver aqui garantir minha vaga show de bola ficou legal isso aqui deu certo como que você vai

alterar essa cor do CSS é bem simples dessa cor desse efeito vem aqui em personalizar volta aqui eu vou te explicar aquele código agora Bem brevemente clique em CSS adicional Aqui nós temos você pode ignorar a maioria da das coisas que tá das coisas que estão acontecendo aqui mas aqui a gente tem Essas variáveis em CSS e aqui a gente tem essas cores Então a gente tem a cor principal e a cor do efeito se você mudar essa cor aqui ele vai mudar a cor do efeito Então você tem que colocar essa cor aqui em

rgba a o a aqui é a transparência então é importante que essa primeira cor esteja aqui em um e essa segunda cor em zero aqui essa cor aqui a segunda Cor na verdade é uma cor branca você pode deixar essa a cor mas você pode testar diferentes cores Se Você quiser eu vou te mostrar aqui como trocar essa cor aqui então vou vir num site que nem esse aqui rgba color picker e aqui eu posso escolher uma cor em rgba se eu quiser pegar por exemplo uma cor azul deixa eu pegar uma cor aqui uma

cor qualquer pode ser um tom azul aqui e aí eu ten que pegar esse valor aqui 18 44 210 E aí eu coloco aqui 18 4 4 210 e você vê que ele já alterou a cor desse efeito claro eu não vou usar Azul aqui porque o botão ele tem esse outro Tom mais rosa Então tem que ser aquela outra cor mesmo mas só porque se você trocar a cor desse botão aqui Talvez você queira trocar também a cor do efeito então publico aqui só para garantir que salvou e o CSS Tá salvo você não

precisa trocar mais nada não precisa entender também mais o que tá acontecendo mas eu acho que dá um toque legal eu vou fechar aqui porque a gente terminou a parte do CSS agora eu quero Adicionar algumas animações agora eu quero colocar alguns efeitos de animação é bem simples vou voltar aqui e essa parte de animação é bem fácil de fazer vou colapsar tudo aqui e aí na primeira dobra eu não vou colocar animação porque eu quero que quando o usuário Chegue aqui na página isso aqui carregue da maneira mais rápida possível então eu não recomendo

você colocar nenhum tipo de animação nessa primeira dobra aqui mas daqui PR baixo a gente Vai colocar animações Então vou vir aqui nesse primeiro Card venho aqui em avançado E aí aqui em efeitos de movimento eu vou aqui em animação de entrada eu vou colocar assim ó Fade in Up e eu acho que esse efeito de animação de baixo para cima fica legal aí eu vou vir aqui no segundo Card venho aqui em avançado e aqui em efeitos de movimento eu também vou colocar a mesma animação só que eu vou colocar aqui um atraso de

100 msos porque eu quero que essa Animação venha Depois dessa aqui então vou fazer a mesma coisa para essa para esse outro Card ven aqui em avançado e aqui em efeitos de movimento eu vou trocar de padrão para Fade and up e aqui eu vou colocar 200 msos então aqui não tem atraso esse aqui tem 100 de atraso e esse aqui tem 200 vou publicar e você vai ver que legal que é o efeito que vai ficar Então vou recarregar aqui e aí não dá para ver direito porque a par Porque ele já tá carregando

aqui então eu teria que fazer o seguinte vou vir aqui vou pegar essa primeira dob eu vou aumentar de 80 para 85 Só porque eu não quero que essa animação carregue ao carregar a página então eu posso fazer assim e olha só já fica um efeito mais legal Ó e agora eu vou fazer a mesma coisa pro resto da página então aqui eu vou selecionar esse título venho aqui em avançado efeitos de movimento animação de entrada feing up e Tem outros efeitos aqui de animação que se você quiser testar Tem várias coisas aqui se você

quiser brincar tem zoom tem não sei mais o que só que não exagera aqui porque o mais importante na página de vendas não é ter essas animações bonitinhas é o seu visitante da sua página ele tem uma boa experiência então não exagera muito nas animações então vou deixar aqui fing up aqui também vou colocar avançado efeitos de movimento F in Up e nós não precisamos adicionar Atraso aqui porque a animação ela vai acontecer de cima para baixo Então os elementos Eles não estão aqui no mesmo nível que nem aqui ele aqui eles estão na mesma

altura na mesma linha então a gente por isso que a gente precisa adicionar um atraso mas aqui nós não precisamos adicionar um atraso então V pegar essa lista vem aqui avançado também efeitos de movimento fading up e aqui essa imagem vou fazer a mesma coisa efeitos de movimento padrão fading up Publiquei E aí eu vou testar aqui como que tá ficando Beleza já deu um efeito legal não pegou a imagem eu não sei por Então vou voltar aqui vamos vamos primeiro vamos tirar aqui aí eu vou salvar aí eu vou selecionar de novo ven aqui

em avançado animação Então vou colocar F up beleza vamos ver se deu certo agora às vezes dá umas bugadas o elemento tem tem dessas aí agora deu certo deixa eu ver de [Música] Novo agora o título não não pegou n problema o elementor às vezes dá umas bugadas assim então você tem que vir aqui e fazer de novo mas não tem problema e vamos publicar aqui vou voltar e agora Ah beleza não não deu certo aqui talvez depois a gente recarregue a página e consiga fazer isso aqui funcionar da maneira que nós queremos mas eu

vou fazer o resto aqui para pro resto dos elementos só para deixar isso aqui pronto animação de Entrada Fade in Up aqui também vou vir aqui pegar aquele título efeitos de movimento Fade in Up aqui também avançado efeitos de movimento e aí aqui e vou fazer também para essa lista e vou fazer aqui Fade in Up vou fazer pro botão aqui e aí eu vou feit esse movimento up e vou publicar não vou visualizar como é que ficou vou fazer agora para isso aqui Também depois eu vou testar tudo de uma vez Então vou selecionar

esse primeiro Card aqui avançado efeitos de movimento aqui eu também vou ter que colocar um atraso Então já vou me preparar aqui para colocar um atraso F up Vou colocar aqui 100 msos e esse outro aqui eu vou colocar 200 msos de atraso então aqui fing up H 200 msos vamos ver como é que ficou só porque eu fiquei curioso agora tá deu certo legal tá não tá pegando animação Em todos os elementos acho que é bug de elemento depois a gente pode testar de repente limpar cche botão direito inspecionar aí aqui em cima Clica

com botão direito também esvaziar cche e às vezes daí ele volta ele funciona certinho ou a gente tem que voltar no elemento lá e tirar a animação colocar de novo aqui efeito de entrada esse aqui e eu vou fazer isso aqui para todos os elemento se você quiser pular essa parte Do vídeo aqui se você já entendeu tá tranquilo mas eu vou deixar assim só porque eu quero deixar essa página aqui toda animada então F ó selecionar o texto aqui também feit de movimento isso aqui e aqui também vou colocar aqui e eu particularmente eu

não uso animação nas minhas páginas pros clientes eu uso porque ele alguns querem mas eu não acho legal não não curto eu acho que que se a pessoa chegou na página ela quer ler ela Quer ler o que o que tem na página a animação ela dá uma atrasada ela dá um efeito legal mas acaba piorando a experiência do usuário e como eu sou designer de experiência do usuário eu acabo não acabo preferindo ter uma boa experiência do que ter animação e ter um visual melhor não gosto de sacrificar eu não gosto de sacrificar a

experiência para ter um visual melhor Às vezes sim às vezes é necessário então muitas vezes eu prefiro deixar com Uma experiência melhor do que sacrificar a experiência do usuário para deixar mais bonitinho Vou colocar aqui daí a gente terminou e aí aqui e falando em experiência do usuário Claro tem coisas aqui que a gente poderia melhorar questão do contraste aqui teria que verificar com plugin de contraste para ver se tá tendo contraste suficiente aqui e tal mas eu acho que assim dessa maneira tá Tá legal não não se a gente Tiver algum problema de acessibilidade

aqui não é muita coisa acredito que tá tudo funcionando tá tudo da maneira que eu gostaria que fosse beleza essas animações estão feitas aqui só alguns elementos aqui não pegou direito a animação Mas infelizmente não tem muito que eu fazer o elemento Às vezes tem desses bugs aqui a gente pode depois depois vou voltar aqui passar por todos os elementos de novo para fazer algumas mudanças para garantir que tá tudo certo Verê se eu consigo ajeitar isso aqui mas essa parte de animação aqui ela tá pronta a gente também tem que garantir que quando o

usuário clique nesse botão aqui que a página role até essa sessão aqui de preço então pra gente fazer isso aqui é bem simples eu vou selecionar essa sessão de preço aqui aqui em avançado tem que colocar um ID aqui eu vou colocar a sessão de preço sem o cedila só porque eu já tive problema no passado colocando cedilha é aqui em ID Mesmo não é em classe e aí no botão nos botões na verdade a gente tem mais de um botão eu vou pegar esse botão aqui e aqui no link deixa o hashtag coloca assim

o nome que você usou lá embaixo que é o id e aqui nesse outro botão também aí e publica aqui e aí em pré-visualizar Agora se a gente clicar nesse botão ele vai rolar até aqui embaixo vamos testar esse aqui testou deu certo essa parte aqui do botão ela tá feita Também E a nossa página tá pronta chegamos ao fim do tutorial mas eu tenho algumas sugestões para você aprender ainda mais a utilizar o elementor primeira sugestão é você criar uma sessão de bônus nós não temos uma sessão de bônus então depois da sessão de

detalhes técnicos é bem comum você ter uma sessão de bônus eu te recomendo que você crie uma sessão de bônus isso vai te ajudar a entender melhor o elementor na prática se você tiver alguma dúvida Volta aqui assiste o vídeo vi vê como eu fiz outras sessões mas eu tenho certeza que com tudo que você aprendeu nesse tutorial criar uma sessão de bônus vai ser algo fácil outra sessão que você pode criar é uma sessão de contato para que a pessoa que chegou na página ela possa entrar em contato caso ela tiver alguma dúvida antes

de comprar o produto e tal é bem importante você ter uma sessão de contato com botão pro WhatsApp também fácil de você criar ou se você Não quiser criar uma sessão dedicada para contato você pode colocar dentro da sessão de dúvidas colocar ali um botão de contato um título também avisando que dá para entrar em contato é bem importante você ter isso aí e eu não fiz já pensando que isso aí vai te ajudar se você mesmo criar essas partes que estão faltando nessa página ou se você não quiser colocar não tem problema muitas páginas

não t sessão de contato muitas páginas não tem sessão de bônus a página Do jeito que ela tá já é uma página com uma estrutura de autocon Mas você pode deixar ela melhor outra sugestão é você assistir esse vídeo de novo para que se certificar que você aprenda tudo que eu ensinei aqui e depois você também pode alterar as imagens as cores deixar a página do jeito que você quer com o seu produto tentar recriar a página sem assistir o vídeo talvez de tal maneira que você consiga aprender na prática a melhor maneira de você

aprender qualquer Habilidade na vida é colocar a mão na massa se você tiver dificuldades não se assuste é normal eu também tive dificuldades quando eu tava aprendendo Web Design até hoje quando eu tô aprendendo alguma coisa nova eu tenho às vezes dificuldade mas eu não me assusto eu tiro o tempo que eu preciso eu sei que tudo tem uma curva de aprend às vezes um uma curva um pouco mais leve uma curva mais acentuada mas se você se dedicar você consegue aprender se você Quiser se especializar em web design e aprender Ainda mais se ficou

alguma dúvida tem outros tutoriais aqui no canal tem uma outra página de vendas que eu ensino a criar um outro tutorial é uma página com design diferente mas seguindo também o mesmo raciocínio você vai ver que tem muitas coisas que se repetem aquela página é até um pouco mais completa do que essa aqui tem mais sessões Tem a sessão de bnus Tem a parte de contato vale a pena você assistir Aquele tutorial também eu vou deixar o link na descrição para que você consiga assistir aquele tutorial também deixe o seu like é muito importante e

também se inscreva no canal e Ativ as notificações pro YouTube te avisar quando eu postar novos vídeos eu tô planejando uma aula de otimização para performance uma aula bem completa não vai ser um vídeo curto vai ser uma aula completa Então vai levar um tempo ainda tô planejando essa aula mas eu pretendo trazer essa aula Ainda ainda esse ano antes de fechar o ano Então se inscreva ativa as notificações para garantir que quando eu postar essa aula e outras aulas também o YouTube te avise Muito obrigado pela participação boas vendas se você tiver utilizando essa

página para fazer as suas próprias vendas e eu te vejo num próximo vídeo