Como Criar Uma Landing Page de Vendas - Aula Completa | Wordpress + Elementor
o Olá seja muito bem-vindo academia não Cold no vídeo de hoje nós vamos desenvolver uma Landing page de vendas e você tá iniciando na internet e quer vender o seu produto o seu serviço Ou até mesmo disponibilizar um produto para o seu usuário Você vai precisar de uma além de peixe Aline page é uma página com um objetivo único e o nosso objetivo de hoje é vender um produto no vídeo de hoje nós vamos abordar alguns tópicos específicos nós vamos a desenvolver seus sonhos separadoras para dar
destaque aí é o seu site como desenvolver chamadas para ação dentro do seu se dentro da sua página em uma sessão de oferta totalmente customizado mas antes da gente passa para mão na massa tenho dois avisos importantes para te dar o primeiro aviso é que academia local onde está com um serviço de assinatura de conteúdo totalmente gratuito e que nesse serviço você receberá conteúdos exclusivos semanalmente e uma vez por mês eu vou te enviar um template para você poder implementar com o
elemento totalmente de graça segundo aviso é que se é inscrito no canal por favor Inscreva se e dê um like para poder continuar assistindo conteúdos como esse agora bora lá para a mão na massa e E aí Eu tô batendo o pessoal a gente tá aqui no painel de administrador do WordPress e para quem não sabe como chegar aqui no painel de administrador do WordPress Eu tenho dois vídeos no canal mostrando como eu instalo WordPress tanto no seu servidor né no seu site de hos pedagem ou localmente eu
vou deixar aqui nas opções desse vídeo para você ter acesso de como instalar o WordPress tomando iniciar aqui a nossa o nosso desenvolvimento da nossa página além de pedir de vendas para poder criar uma página que dentro do WordPress a gente vem aqui no menu lateral aqui na esquerda e clique em páginas o WordPress ele vai encaminhar a gente aqui para sessão para malícia de páginas todas as páginas Que Eu Já criei aqui no express né a gente vai criar uma nova p ágina clicando em adicionar nova
aí WordPress ele já encaminhou aqui para gente ir na para uma página aqui de criar uma página nova eu vou botar aqui além de peixe eu vou publicar Eu sempre gosto já de publicar minha página deixar ela publicada legal logo depois que eu publiquei eu vou editar com elemento cliquei aqui no botão de editar com ele mentor o elemento vai preparar todo o ambiente vai direcionar a gente aí para o painel aqui né no nosso o que eu gosto de chamar aqui noss o ambiente de trabalho dor de peças e o bacana
eu tô com Hello Kitty né do elemento porque instalado então que veja aqui em cima ele tá com esse academia não Cold Aqui também tá o nome da minha página eu não quero isso não eu vou querer limpar e o nosso ambiente de trabalho e para fazer isso eu vou ver aqui no menu aqui inferior em configurações nessa engrenagem Zinha vou clicar eu vou trocar o layout da página dizer for para ele a mente mente o Canvas bacana o atualizar aí note aqu i que ele já criou o nosso ambiente de trabalho aqui o nosso
Canvas em branco para a gente poder já trabalhar em cima só que tem mais uma coisa que eu quero alterar aqui nas configurações configurações gerais do da nossa página a nossa página que a nossa além de pedir ela vai ter um fundo preto para poder chamar dar mais destaque que os nossos itens que eu vou colocar então para fazer esse para trocar esse fundo eu venho novamente aqui em configurações na engrenagem e eu invés de mexe r em configurações eu vou na aba estilo aqui na aba estilo a gente vai
encontrar o tipo de fundo clássico gente clica aqui em clássico e troca a cor e nesse vídeo tchauzinho então aqui a cor do fundo vou botar o atualizar ele já pegou aqui a nossa cor preta legal né Agora sim a gente está apto a iniciar a desenvolvimento com as nossas sessões para adicionar uma sessão bateu clicar nesse botãozinho aqui e daqui é o elemento ele vai me dar uma 17 de estruturas de exceções eu vou quere r aqui adicionar a sessão com uma coluna somente beleza ele já inseriu aqui agora eu
vou querer alterar o fundo da sucessão mas eu vou querer inserir uma imagem no fundo é para fazer isso é super simples eu clico aqui ou nas abinha editar sessão foi eu venho com o botão direito e editar a seção Note que aqui nós quer dele já abriu aqui o nosso menu digitar sessão eu vou vir aqui em estilo eu vou ter ao tipo de fundo clicar em clássico ao invés de trocar a cor eu vou escolher uma image m a Carol pode escolher essa imagem inserir mídia E agora tem algumas configurações que a gente
tem que prestar atenção aqui quando a gente está trabalhando com imagens de fundo essa minha imagem eu não quero repetir Então vem aqui na opção repetir não repetir o tamanho eu vou querer o preenchimento completo Note que nada mudou para gente ver essa imagem com o tamanho total da seção ou sessão com o tamanho total da imagem né a gente volta aqui em layout vem aqui altura e ajustar a te la pronto aquele já ajustou a tela o tamanho todo aqui da tela vamos atualizar para deixar sempre a nossa
página atualizada né causa de algum problema a gente já tem a nossa página atualizada bacana agora eu vou querer inserir o nosso a nossa logo ainda nossa marca né então para inserir aqui eu vou inserir uma seção interna é só que eu vou querer uma coluna somente então eu vou excluir essa coluna da esquerda clicando com o botão direito excluir eu acho que é que agora eu tenho uma coluna somente no meio eu volto aqui para o nosso menu principal boa até imagem eu clico e arrasto simples assim
pois escolher uma imagem a imagem que eu quero essa aqui selecionei clique em inserir imagem bacana não acho que a imagem Ela tá no meio né eu vou querer alinhar ela esquerda Então vem aqui na aqui nessa opção de alinhamento eu vou alinhar a esquerda bacana o atualizar e enquanto atualiza o pessoal não tem que tá meio esquisito né que a nossa coluna ela tá centraliz ada bem no meio aqui da nossa sessão eu quero que essa coluna ela fique aqui superior então eu volto aqui na nossa sessão é a
posição da coluna eu vou alterar para superior bacana aquele já inseriu aqui para gente ir na posição superior Vou atualizar e tá que feita a nossa sessão é a primeira sessão né mas Note que ainda tá muito vazio aqui né eu vou preencher aqui com uma rede lan e chama ativa né já com uma página de vendas Então ela tem que ter uma rede lá ele tem que ter um a chamada para ação então para isso a gente vai inserir uma Red Line aqui e como é que eu faço um elemento simples eu volto aqui no nosso menu
principal eu vou querer escolher uma sessão interno aqui cliquei e arrasto Aqui para baixo também essa sessão ela vai acontecer somente uma coluna então aqui eu vou deixar somente uma coluna eu vou querer inserir um título aqui no meio então eu volto aqui para o nosso menu principal clique em título arrasto que solto aqui dentro opa E aí um s alto aqui dentro agora eu vou querer alterar que eu conteúdo a alterar esse conteúdo por eu também vou alterar aqui o estilo primeiro eu vou trocar aqui a
tag HTML né de um H1 H2 Tragam deixá-la mais chamativa isso vai fazer sentido também para o s ou a legal agora eu vou aqui na estilo eu vou querer mudar aqui um pouco estilo primeiro primeira opção que aparece para gente é a cor do texto eu vou ter aqui para branco e logo logo abaixo aqui é tipografia aqui eu vou escolher uma font e do tamanho 60 legal foto alisar bacana agora a gente já tem a nossa Redline Ou nossa logo aqui e a nossa sessão Aqui também tá ficando bem legal e logo que abaixo eu
vou querer inserir uma outra instrução né uma outra descrição então eu volto aqui no nosso menu principal eu vou querer agora inserir um texto aqui abaixo porém eu vou em seguir outra seção interna aqui para poder encapsula bem as coisas entendeu pessoal senhor vem aqui desculpa o que eu quero uma sessão com uma coluna somente e dentro dessa seção eu vou inserir o nosso componente de texto clicou e arrastou aqui super simples beleza tenho que o meu texto agora eu vou ter aqui um pouco do
meu estilo né então eu vou aqui na aba estilo a cor do texto alterar para a cor do texto é legal eu quero já está muito pequeno né vou alterar tipografia para alterar aqui da tipografia vou deixar o peso 400 mas o tamanho da fonte eu vou aumentar para o 25 bacana boa atualizar muito legal e aqui pessoal eu tô achando que tá muito tá muito colado essas duas sessões aqui então eu venho aqui volto aqui vou em avançado eu vou querer dar um Perry né um espaçamento superior de 50 pele aí ó legal eu já
tá mais mais suave de enxergar aqui os nossos componentes muito bacana né pessoal agora a gente vai para nossa primeira Call to Action Então a nossa próximo nosso componente que nosso próximo componente que vai ser uma call-to-action vai ser um botão então para inserir um botão também aqui eu vo lto aqui no nosso menu principal vou inserir mais uma sessão interna Eu gosto de trabalhar com as seções internas para poder encapsula todos os componentes corretamente boa excluir que a coluna e agora
aqui dentro dessa seção interna eu vou inserir e o botão agora eu vou querer mexer um pouco nesse botão veja que ele tá pequeno tá com uma cor que a gente não quer então eu vou primeiro alterar que a lei boné o texto nesse botão eu vou botar comprar agora G1 é legal que agora eu vou querer aumentar o tamanho desse botão eu vou querer um botão essa grande bem grande então agora a gente vai até a aba estilo para poder modificar em um pouco do estilo da tipografia aqui pessoal eu vou manter o mesmo
eu só vou alterar o peso para 800 para deixar ele mais grossinho aqui beleza a cor do texto eu vou querer preto e o fundo eu vou utilizar uma cor especial qual essa cor Então veja em um beijo mais chamativo agora pessoal eu quero alterar a sombra a sombra aqui do botão pa ra deixar ele meio com efeito de iluminosidade então para fazer isso eu vim aqui na sombra do bloco vem um em cor eu vou soltar a mesma cor para ele a sombra vai vai ter a mesma cor e aqui eu vou deixar em borrar 10 em espalhar
eu vou voltar para quatro ele dá um para espalhar melhor aqui esse Contorno né a sombra Bacana aqui a gente já tem o nosso o nosso botão call-to-action né que ia comprar agora ele vai direcionar a gente para oferta de fato mas depois a gente vai ver como eu vo u ali encarar esse botão pra woofer tão bacana o pessoal aqui já tá pronta a nossa primeira sessão né primeira sessão aí do nosso site eu poderia dar um espaçamento também aqui nessa nessa sessão então eu venho aqui e venho aqui no nosso
pele superior ou dar uma vez espaçamento de 50 para ele dar um espaçamento melhor aqui nesse botão bacana muito legal já tá feito aqui a nossa primeira sessão no atualizar muito legal né pessoal tem alguns componentes aqui dando continuidade agora a gente vai criar aqui hoje vai criar uma Seção que vai separar vai ser uma sessão separadora aí né ela vai separar outras sessões e vai dar um destaque maior aí enquanto a pessoa tiver enrolando ela vai dar um destaque maior aí nos nas sessões
para morar lá com e para construir essa sessão eu vou adicionar uma nova sessão vem aqui de uma coluna mesmo aqui dentro eu vou querer inserir uma sessão eterna novamente Então vem aqui no nosso menu principal básico clica aqui na seção interna e a raça aqui para dentro vão manter as duas colunas que eu vou precisar essas duas colunas para poder desenvolver essa seção aqui e agora no fundo da nossa sessão eu vou querer alterar eu volto aqui eu volto aqui na nossa sessão editar sessão ou eu venho
com o botão direito em editar a seção aqui O Bacana no na pede aqui né na nossa abinha de estilo eu vou querer alterar o tipo de fundo então eu venho aqui na opção de fundo o tipo de fundo clássico eu vou alterar a cor clico aqui em cor quer alterar para esse laranja aqui para dar mais destaque bacana né e agora aqui a gente volta para sessão interno eu vou querer adicionar um componente de título aqui então eu pego o que o título solta aqui dentro que altera o nosso conteúdo agora eu vou querer
alterar o estilo desse tipo desse título aqui então para poder alterar primeiramente eu vou vir no alinhamento e vou centralizar ele eu tô gostando nessa fonte e também do tamanho eu vou tirar somente a cor para alterar a cor a gente vem na água aqui de estilo na cor de texto A gente vai mudar o preto pronto J simples simples aqui e objetivo legal né pessoal aqui na direita eu vou querer alterar uma imagem então para inserir uma imagem eu venho aqui clico em imagem arrasto pronto aqui tá nossa
imagem agora para escolher uma imagem eu venho aqui no nosso menu da imagem não escolher uma imagem vamos escolher uma imagem a imagem que eu vou escolher pessoal essa imagem aqui então ruim seria a m ídia bacana já tá pronta aqui o nosso componente separador aí para dar destaque a nossa página só uma coisa aqui um detalhe que eu vou querer alterar essa coluna pessoal Norte que o conteúdo dela tá alinhado aqui superior então eu vou querer aulinha a esse conteúdo ao centro Para fazer isso eu venho
aqui na nossa coluna e venho layout na aba layout Note que tem uma opção aqui de alinhamento vertical e eu vou querer alterar por meio é legal já alterou aqui tem japonesa a e tá feito aí a nossa sessão separadora de destaque né ela dá um destaque maior porque ela contrata aí com as cores do site do tema do site um contraste aí com fundo preto muito legal então bora lá para nossa próxima sessão para desenvolver a nossa próxima sessão a gente vai clicar em selecionar aqui uma estrutura né de
sessão a gente vai usar a sessão de uma coluna somente então pra gente poder alterar que o estilo dessa dessa nossa sessão a gente vem aqui até a minha estilo Vamo dar aqui a c or que eu vou querer usar e essa cor o tamanho eu também vou querer modificar aqui eu vou mandar para um 60 bacana e também vou querer alinhar ela o centro aqui para fazer isso a gente volta aqui na aba conteúdo e no alinhamento eu vou centralizar pronto tá feito aqui o título da nossa sessão agora eu vou querer inserir
aqui alguns componentes né visuais aí para o nosso produto para fazer sentido para mostrar mais credibilidade do produto e etc Então bora lá para a gente poder adic ionar essa sessão a gente volta aqui na nossa e no nosso menu principal como adicionar uma seção interna O Bacana nessa seção interna ela vai contém 22 componentes um componente visual de imagem e uma descrição dessa imagem eu moro adicionar aqui a nossa imagem clica imagem e arrasta a gente já tem o nosso componente de imagem
vamos selecionar aqui uma imagem ou selecionar essa imagem é bacana e agora aqui é macho eu vou querer inserir um componente de título então eu venho aq ui dentro da nossa coluna eu vou inserir aqui o nosso componente aqui é o nosso conteúdo eu vim aqui em estilo na cor do texto vou querer esse texto em branco eu vou diminuir só um pouco aqui o tamanho outra aqui 25 vou voltar em conteúdo e vou alinhar ao centro é muito bacana né pessoal Agora eu já tenho esse componente aqui que eu criei então
eu vou querer utilizar o mesmo estilo e como eu vou recriar vou duplicar que todas as colunas eu vou ao invés de criar novamente do zero eu só vou duplicar Aqui as nossas colunas então para fazer isso eu vim aqui no cantinho e clico em na coluna duplicar O Bacana vou excluir essa coluna e pronto eu já tenho aqui duas colunas agora eu venho só aqui vou alterar essa imagem o escolheu essa imagem eu vou Será que o conteúdo também será que o conteúdo eu vou querer inserir mais um componente desse
mas não na mesma linha eu vou inserir aqui numa uma linha diferente então para pegar o mesmo o mesmo estilo aqui do nosso compon ente eu vou duplicar essa sessão inteira Note que ele duplicou eu vou excluir aqui uma coluna eu quero justamente nessa estrutura mas com conteúdo diferente então para eu vou inserir essa imagem como esse conteúdo legal só que eu esqueci de alterar aqui o título dessa o título da nossa sessão então eu venho aqui clica aqui em cima vem aqui na nossa caixinha na
lateral Oi e pronto tenho aqui o pontos Chaves né que é explicando aí como esse suplemento aí que a gente tá vendend o esse produto que a gente tá vendendo ele trata né Beleza só que eu tô achando que essa sessão ela tá muito espremida então eu vou dar um pé em um espaçamento na seção toda vou vir aqui clicar na nossa sessão ou em editar sessão aqui com o botão direito vem aqui até o avançado bem aqui em Perry eu vou desvincular os valores que eu quero usar somente dois valores aí do quadrado né
do retângulo então eu venho aqui superior e inferior e beleza Guarujá tá aqui com espaçamento melhor tá melhor de visualizar que a nossa sessão e tá pronta a nossa sessão aí dos pontos-chave sair do nosso produto oi tá ficando muito legal aqui a nossa página bom então pra dar continuidade aqui na nossa página a gente vem aqui e adicione uma nova sessão a sessão ela vai conter uma coluna somente e aqui eu vou falar um pouco da tecnologia e desse produto então para fazer isso eu venho hein e no
nosso menu principal aqui na seção interna eu vou arrastar uma sessão interno aqui Prudente vou excluir aqui a nossa coluna agora a gente tem uma seção interna e dentro dessa seção interna eu vou querer adicionar um título para a Seleção só que a nossa página Ela já tem um padrão de títulos de seções e esse padrão aqui então para fazer isso para eu não criar novamente do zero eu vou vir aqui e vou duplicar E esse título depois eu venho e arrasto aqui para dentro da nossa sessão interno pontos
Chaves aqui só que o que eu não quero escrever pontos Chaves eu quero escrever t ecnologia inovadora bacana né pessoal pronto aqui é um requisito para você ter mais agilidade em seu desenvolvimento aí aqui abaixo eu quero inserir uma descrição então para isso novamente pessoal eu vou inserir uma uma sessão interno aqui abaixo O Bacana vou excluir essa aqui essa coluna vou inserir agora aqui pessoal invés de um título eu vou inserir um texto Tá aqui o nosso conteúdo eu vou alterar duas coisas
nesse nesse nesse conteúdo aqui pessoal primeiro eu venho aqui em es tilo eu vou querer centralizar esse nosso conteúdo também vou terá que acordo conteúdo Então vem aqui em cor de texto alterar para Branco roupa E ai eu vou querer também alterar aqui pessoal o tamanho da linha Tô achando que a linha tá muito colada aqui então eu venho em tipografia altura galinha para botar 1.6 eu vou deixar melhor o atualizar Beleza Aqui tá o início da nossa nova seção aqui tecnologia inovadora aqui abaixo
eu vou botar mais uma prova né uma prova aí esse é um co mponente aí das páginas de marketing né sempre lembrando que no Marketing e vendas Você é muito importante você ter provas provas sociais provas de aquilo que aquilo funciona então aqui eu vou inserir mais um conteúdo aqui de provas então para fazer isso eu venho aqui então beleza logo que abaixo a gente vai querer inserir uma seção interna então eu venho aqui em uma nossa sessão interna o bacana eu vou deixar aqui com duas colunas porque
eu vou querer usar duas colunas nesse pessoa l então esse componente aqui também vai ser um componente visual com uma imagem e um título vocês vão entender Então primeiramente o que eu quero isso aí um título eu volto aqui no nosso menu principal vou inserir um jeito legal né que sol é só que agora eu quero dar um estilo aqui para esse título então eu vou centralizar aqui nosso time e vou ter a aqui a cor desse título selecionando aqui a cor do texto e colando aqui essa cor eu vou querer essa cor
laranja Vou atualizar e logo aqu i embaixo pessoal vou querer adicionar uma imagem então a volta aqui no nosso menu principal clique a imagem vou até aqui opa e solta aqui em baixo uma imagem e para alterar a imagem eu volto aqui escolhi uma imagem eu vou escolher essa imagem aqui que a nossa imagem de antes É isso aí feito o nosso componente E aí diante Então logo que eu tenho um componente de antes eu vou querer ter um componente de depois então para fazer isso de modo ágil para não poder
para poder ter agili dade aqui no desenvolvimento eu venho aqui e duplica essa coluna ou excluir essa aqui que soube tá sobrando a bacante agora vem aqui eu escrevo depois e vou ter a essa imagem aqui também vou botar é pois é O Bacana Então agora a gente tem aqui a nossa componente de prova que é o antes e o depois tá ficando muito legal aqui só tá faltando uma coisinha para sessão para a gente poder finalizar e essa seção aqui ela vai conter uma call-to-action também em forma de Botão então
para eu fazer isso eu venho aqui e adicionou mais uma sessão então e aqui abaixo legal vai ser uma sessão que vai possuir somente uma coluna então não vou precisar de uma coluna ela vai possui um botão com o mesmo estilo que a gente já criou lá no início então para não criar tudo do zero eu vou vir aqui vou clicar aqui duplicar esse botão se vou arrastar esse botão até a nossa sessão interna legal já tá aqui o nosso botão A única diferença que tem esse botão é o alinhamento dele que eu
vou centralizar esse botão e também vou dar um espaçamento aqui superior nessa seção para ele ficar descolado aí né então a gente para fazer o homem para fazer esse espaçamento a gente vem aqui na sessão na minha avó sabe a gente desvincular que os valores e não superior a gente vai botar 50 para dar um espaçamento bacana né pessoal agora a gente vai vir aqui na seção vamos voltar aqui na sessão para a gente dar um espaçamento na seção incita voltamos aqui na sessão o avançado vamos desvincu lar
aqueles valores volto aqui no Inicial vou dar uns 50 e nem inferior eu também vou dar uns 50 então ele vai estar ele vai dar um espaçamento de 50 aqui peixes em cima e vai dar 50 pixels aqui embaixo Também e tá aí feita a nossa nova seção aqui de comparação né Muito legal muito bacana a nossa próxima sessão vai ser a sessão de oferta de Fato né que a gente vai vender para isso eu vou querer dar um destaque aqui inicial para nossa sessão então para poder criar essa sessão de desta que eu venho
aqui crio uma nova seção com uma coluna somente e eu vou criar aqui como sempre uma seção interna a Dilma coluna somente Então vem aqui aqui dentro dessa coluna eu vou querer inserir um título Então vem aqui me ser um esse título pessoal ele vai ser um H1 para poder fazer sentido aí para o s ou então escolha o seu pacote em baixo eu vou centralizar aqui em alinhamento ou centralizar volto aqui em estilo é a cor pessoal desse dessa fonte aqui ela vai ser preta porém o fundo para poder dar um
destaque como eu falei eu vou escolher uma outra cor então eu volto aqui não nossa sessão venho aqui venho aqui em estilo é do tipo de fundo plástico a cor eu vou tirar essa cor aqui volta aqui na nossa sessão interna para poder alterar a cor de texto Então vem aqui na opção de texto ó e vou querer escolher aí a cor preto já tipografia eu vou querer alterar o tamanho porque 60 para deixar bem grandão mesmo Ah então tá aqui a nossa sessão de destaque para s eparar aí a nossa fé agora para agora a
gente vai criar a sessão de oferta e se dá para fazer isso eu venho aqui e adiciono mais uma sessão de uma coluna somente e dentro dessa seção eu vou querer inserir uma seção interna para sempre em capsular e os nossos componentes e deixar eles bem bem sólidos aí no nosso no nosso template no nosso layout essa seção interna que essa coluna eu vou querer alterar a cor da coluna para poder dar um destaque aí você vai entender o porquê então eu ve nho aqui vem no cantinho e clico ele está coluna ou
eu clico na coluna e vou alterar aqui o estilo e o tipo de fundo clássico eu vou ter a a cor no fundo votar uma cor a Branca aí aqui dentro pessoal eu vou querer inserir o conteúdo ainda nossa da nosso sessão de oferta para fazer isso super assim então o primeiro componente que eu vou inserir aí na nossa sessão vai ser um componente de título eu venho aqui solta o componente de tinta é eu vou querer centralizar esse componente eu vo u tirar o estilo do título eu venho aqui na habite na
água estilo a gente vai usar essa cor que e essa por aqui bacana dando continuidade a gente vai um seria agora um componente visual ainda nosso festa e tu mora lá em série uma imagem aqui para dentro do nosso componente de oferta vamos voltar aqui até o nosso menu principal nos até imagem clicar imagem vão soltar aqui em baixo uma imagem muito bacana vamos colher aqui imagem imagem que a gente vai utilizar essa imagem aq ui beleza estamos aqui o componente de imagem agora a gente vai querer
inserir mais componente de título então abaixo dessa imagem a gente volta aqui no menu principal eu vou querer inserir mais um título só vem aqui em cima o mais antigo eu vou querer centralizar esse tipo também vou trocar que a tarde HTML joga dois praga 3 pouco menor eu vou aqui na aba estilo vou trocar também aqui o nosso a cor aqui na tipografia pessoal vou fazer um efeito diferente eu vim aqui em tipograf ia e na decoração eu vou deixar taxado que essa linha aqui no meio né atualizar eu vou
inserir mais um componente de texto aqui né o nosso título volta aqui no menu principal vou até aqui em ser um mais um mais um componente de texto vai ser por 12 vezes eu volto vou centralizar e vou alterar aqui o estilo Navy estilo é deixar ele preto vou alterar mais um componente de texto volta aqui vai ser o nosso valor de fato e o valor do produto vou centralizar esse produto vou aqui em estil o e que eu vou ter a pessoal o acordei e também vou tirar o tamanho na tipografia aqui vou ter a ele
para e 5555 Esse é o tamanho alterando aqui para 55 Beleza agora pessoal eu tenho mais um componente para botar aí que a call to Action mesmo para efetuar a compra e qual é a qual to Action para compra é o nosso botão para fazer isso eu não vou criar o botão do zero eu vou ver aqui duplicar esse botão vou arrastar ele aqui para baixo E aí o bacana está aqui já e o nosso botão e tá feit o aqui o nosso componente de oferta tá muito bacana que nos componentes de oferta porém eu vou querer fazer
algumas alterações aqui eu vou voltar aqui na coluna e vou querer deixar ele mais aproximado né eu vou esmagar um pouco aqui o conteúdo desse dessa coluna para fazer isso eu vou vir aqui em avançado na coluna e vou botar um Perry de todos os lados de 100 não achei que ele já ficou mais legal né já ficou mais aproximado já tá ficando com cara de conteúdo mesmo a e aqui na di reita eu vou querer dar um espaçamento também eu queria dar um espaçamento de 10 Opa desvincular aqui E aí é bastante de uma
margem Zinho aqui do lado eu também vou querer alterar as bordas para alterar as bordas eu volto aqui em estilo tem uma sessão aqui um submenu borda que o arrendador arredondamento eu vou levar ele para vou levar ele aqui para 60 legal quero bem redondinho aqui muito bacana né pessoal e tá feita aqui o nosso componente de oferta vocês votaram em que deu um certo trabalho para fazer esse componente né e eu vou precisar criar um novo componente quais exato como esse só que com um conteúdo
diferente é para poder fazer isso eu não vou criar ele do zero eu vou vir aqui na coluna e vou duplicar essa coluna inteira não acho que aquele perdeu um pouco do estilo também esmagado só que quando eu excluir essa coluna e note que aqui ele já vai ficar bem legal tem uma coisa só que tem que acertar na coluna então eu venho aqui nessa coluna veio e m avançado e aqui ao invés de ser 10 e na direita vai ser 10 no esquerdo é tão bacana né pessoal agora vem a gente vem aqui e outra o conteúdo e
tá pronto aqui o nosso componente de oferta muito bonito na pessoal bem bacana aqui com vários componentes já tem a nossa call-to-action que para o link de checkout né Para a gente poder alterar o link de check-out basta a gente clicar aqui em cima do botão o botão ele já possui aqui uma sessão de nem que é onde a gente vieram mente vai b otar e o link de check-out né o link da compra aí do produto Então tá que feito tá quase feito aqui a nossa página com todos os componentes agora a gente vai
pro finalizar para finalizar a gente vai criar um folder que alianças são do rodapé na última sessão aí do seu site para deixar mais bonito geralmente a gente usa para botar uns contatos deixar uma loguinho ali eu moro a construir para construir essa sessão a gente vem aqui insere uma sessão com uma coluna somente a gente vai querer alterar que a cor do fundo da sessão tal fazer isso a gente vem aqui em estilo Navy estilo é o tipo de fundo clássico a gente vai alterar a cor de fundo que eu quero
que fique com essa cor mesmo e aqui no meio eu vou querer inserir uma uma seção interna com duas colunas aqui na coluna da direita eu vou inserir uma imagem que vai ser a imagem da Nossa logo a logo do rodapé para alterar isso a imagem o vem aqui em escolher imagem vou escolher essa imagem aqui vou inserir e pronto eu vou querer alinhar essa imagem à direita para que ela fica lá no canto da coluna isso mesmo aquela ficar alinhado aqui e aqui desse lado eu vou inserir um título do tipo
parágrafo 1 E aí eu alterei Aqui botei o número de contato vou vir aqui estilo na cor de fundo ou será pret vou duplicar e aqui embaixo eu vou botar o nosso e-mail muito bacana aí né pessoal ficou muito muito muito legal a nossa página finalizamos a nossa página eu vou dar um espaçamento nessa sessão nã o achei que ficou legal vem aqui com espaçamento na espaçamento superior a 50 e aqui 50 no inferior também para dar um espaçamento legal é muito bacana ficou aí a não ser nossa além de peixe de
vendas né pessoal uma recapitular o que a gente fez a gente em sua primeira sessão aqui com uma Call to Action né logo aqui embaixo a gente criou uma sessão que separa aí né uma sessão de destaque é que a gente criou uma exceção com os componentes aqui visuais bem legal também aqui a gente f ez um compara né a gente com parou aqui aqui embaixo a gente criou um botão uma Call to Action né uma outra sessão de destaque aqui escolha seu pacote abaixo aqui a nossa seção de vendas né totalmente
customizada aí né Lembrando que o elemento ali outros pacotes aí de widgets de terceiro religião disponibilizam aí esse elemento nesse componente aí de oferta já pré-pronto para definir para gente só trocar o conteúdo aqui a gente acabou fazendo do zero para você ter mais habilid ade de desenvolver os seus próprios componentes e logo que embaixo a gente criou o nosso rodapé e com o nosso contato Então é isso Pessoal espero que vocês tenham gostado desse vídeo deixa seu like inscreva-se no canal
se você não é inscrito para ver mais conteúdos como esse até
0 Comentários