Como Criar Uma LANDING PAGE com Elementor Wordpress
e fala galera lembro frango aqui falando mais uma vez e dessa vez eu vim trazer um tema um pouquinho diferente do que a gente está acostumado aqui no canal vou falar um pouquinho sobre web há pouco tempo tô participando de uma mentoria de marketing digital com o Sesi month ago até mesmo não sei se vocês conhecem mas enfim o assunto não é esse e lá na mentoria a gente tava passando por umas abordagens de Landing page e o Website e ele disponibilizou alguns modelos de Landing pages é tanto do
serviço captura de e-mail enfim diversos modelos e em J pegue e eu vou nessa aula de hoje eu quero transformar isso jotapeg na versão web E aí é bom galera além de impedir que eu vou fazer hoje é uma de serviços tá é para você fazer a captura do seu lide e oferecendo seus serviços seja ele qual for tá então eu vou dar um resumão geral aqui como que ela vai ser né passam Inicial O header uma chamada apuração em vídeo a descrição dos serviços um pouquinho do que as pessoas fal am
quem somos um FAQ e a chamada final Beleza então eu basicamente vou reproduzir esse J tag E mais uma vez ele não é de minha autoria tá ele é do conversão extrema bom então eu já deixei instalado o meu olho depressa Já coloquei aqui o nem instalei o elemento bom galera como isso aqui é uma Landing page a gente não vai precisar é do desse menu né esse essa parte aqui do menu Onde fica o nome do site a gente não precisa dor subtítulo da página tá eu com que a gente remove el es e aqui na engrenagem
no lado esquerdo inferior configurações esconder título e para assumir essa parte a gente coloca no layout elementor Canvas Tá feito isso a gente já atualiza só para ele sair certinho certo e eu vou ficar provavelmente de um dou esse áudio Tá daqui para ficar mais fiel possível certo e aqui a gente vê que ele colocou o logotipo e um número de telefone no ladinho oposto tão que vou fazer ou eu vou eu vou dar possibilidades aqui rápida ou eu poderia ter criado e é como container já duplo ou
eu poderia ou eu posso acabar inserindo essa inserção que que acaba dando na mesma nessa situação Tá eu vou deixar o duplo o lado esquerdo logo o lado direito e ele não é um botão mas eu vou utilizar um botão nesse meu caso tá Esse é o botãozinho ok E aí E aí a nota que ele tem essa esse espaçamento né e o meu botão ele tá indo muito para a direita e eu não quero isso eu quero que ele fique com esse espaçamento e eu vou aumentar o pézinho do de cim a elemento do lado direito você sempre desmarca
o cadeado Quando você quiser mexer somente um um lado Tá eu vou padronizar aqui como 60 e tudo que eu quiser colocar e é 70 na verdade vai ficar melhor Ah e tudo que eu quiser colocar aqui e o forno utilizar um pedem a gente utiliza essa sempre essa regrinha tá 70 para ele ficar sempre alinhado não ficar Um item eu vou dar um exemplo para ele não ficar muito em com esse pede e o outro sem fim é uma outra coisa aqui que eu vou precisar c entralizar o meu botão com o logo eu não vou Inserir a
imagem eu não vou fazer nada porque apenas montar o layout tá que eu posso fazer aqui para ele alinhar eu tenho uma opção aqui no meu layout dia alinhamento vertical coloca o meio aí o meu o meu telefone ele vai se alinhar sempre ao tamanho do meu logo tá bom é apenas alterar essas cores e eu vou alterar a cor global para não ficar mexendo uma curva tá Quê que são as cores globais são as cores padronizadas eu sei que quando aquele um botão ele sai ele começa a verde né então é basicamente isso
que eu estou fazendo estou trocando as cores globais do meu site bom então a partir dos novos elementos que eu colocar se ele se encaixar em Conheça as configurações ele já vai vir nessa nesse preset de cortar Oi ok e é aqui e a gente tem e eu posso mano eu vou eu vou eu vou acrescentar mais um container como aqui com uma chamada e aqui embaixo com uma um subtítulo ó e aqui ele vem um formulário o título o texto Olá neste meu caso eu tô utilizando o elementor pro só que eu já tenho uma um outro
sistema de captura de e-mail que eu vou utilizar aqui tá aqui no caso é o a builderall E aí e agora eu vou dar a carinha aqui para ele ficar nesse mesmo estilo só Se você pegar essa mesma corpo E aí e para mudar a cor do fundo é bem simples estar você vai selecionar o container tu vai vir eu gosto de selecionar sempre por esses... Você vai estilo fundo aí você escolhe isso aqui é um Um clássico que el e é um flash né é um Gradiente um vídeo SlideShow eu não recomendo colocar vídeo no background e
o gradiente dá para fazer coisas agradáveis a SlideShow também para mim diferente Ah tá e aqui a cor ele é branco é essa aqui é um caso é a mesma coisa um de borda É sim aqui eu vou ter que mexer lá na builderall eu não quero mexer nisso Agora tá então eu vou remover ele eu vou colocar aqui em formulário não elementor pro vai ser mais rápido só para eu a fazer esse formulário é basicamente isso nem vou mudar nada tá aqui é uma coisa legal que não sei se todo mundo sabe fazer primeira coisa aqui
no mesmo esquema se eu coloquei 70 bom demais do lado direito ali no menu eu vou colocar aqui também tá bom e aqui nesse background e ele tem essa bola essa fundo branco né então vamos adicionar o fundo branco somente nesse bloco Como que você faz sempre seleciona por esse ícone Zinho aqui no bloco tá seleciona ele vem para cá né estilo background color branco como que a gente faz for colocar agora essa canção arredondado G1 E aí e você vai engorda né seleciona e começa a aumentar aqui no com
padrãozinho mesmo com o cadeado ligado tá e a gordinha bem Sutil E aí E aí E aí e Note que ele sempre mantém um bom espaçamento para que respiro a pessoa precisa ter tempo para respirar e fazer a leitura tá então é o que a gente vai fazer e eu aproveitei o chocolate para atualizar e e eu aproveito este post para atualizar e vir aqui e é copiar o texto Fala galera um a coisa que são coisas básicas do HTML que quebra de linha nesse caso note que não adiantou eu coloco da Inter aqui meu texto no
título no campo título ele não quebra que que eu faço para quebrar essa linha que um código você abre a chave BR e fecha assim ele já quebra a linha automaticamente certo é o que eu vou fazer aqui também é aumentar um pouquinho também da fonte tá é só para ele ficar bem parecido aumentar a fonte Como que eu faço seleciono o campo de título veio em tipogr afia e Já mexi aqui no tamanho da fonte vai ficar mais ou menos como que tá aqui nós vem cá e esse texto de baixo o dele pegou três linhas né eu
vou deixar mais ou menos o mesmo tamanho o Velho Chico 14 22 aqui para mim tá legal Oi e para ele ficar mais centralizar Dinho eu vou adicionar E aí é um pede no é um pede não há margem no lado direito já que eu quero reduzir esse espaço hoje eu não preciso de tudo isso né favor coloquei 10 aquele já quebrou a linha a gente já começa a ver qu e ele tá ficando mais parecido e é agora que eu vou fazer aqui e no campo da chamada eu vou aumentar o espaçamento superior o homem tem 30 o inferior a
mesma coisa é pa é Real o inferior eu vou mudar aqui no formulário tá porque se eu mudar aqui ele vai ficar para baixo chamado aí e meu objetivo é que ele aumente a o grupo todos brancos né e não a chamada em cima há 30 ok ele já tá ficando mais harmônico é uma coisa que eu reparei agora é o botão Branco Ele está sem alinhado com o formulário e o meu no caso não tá isso é uma coisa que não me agrada tá eu sinto sempre ir trabalhar com o máximo de alinhamento possível é uma outra coisa botãozinho
tá muito pequeno né colocar um número fictício aqui e eu posso colocar um ícone aqui no não tinha vou fazer bem padrãozinho mesmo né aumentei o tamanho do botão para ficar mais parecido possível um acordo botão ele é branco EA cor do texto eu vou colocar cinza Ok no meu ponto de vista deu uma melhorada tá eu acredito q ue o que eu posso fazer aqui para dar uma harmonizada é um tá é padronizar esse espaço em branco aqui sempre do mesmo no mesmo tamanho tá na lateral e o cão se homem e 30 para cá
eu vou aumentar eu entendo chegar na mesma proporção não precisa ser exato Até porque eu não tenho a distância entre o formulário e a borda Tá mas apenas visual mesmo para que fique algo mais harmônico E aí Tá bom eu acredito bem próximo do que a gente precisa tá vamos para o próximo bloco e é aqui a única coisa que eu adicionei que é dois elementor pro é o formulário o acesso no elementor Free você consegue fazer tudo tá inclusive vídeo tá e essa parte aqui onde está solicitando um vídeo eu vou
fazer a mesma coisa preciso adicionar margem E aí e para que para que ele não fique grudado e meu Meu leitor ele tenha uma uma leitura suave das coisas assim tá uma coisa atropelando a outra né E aí as opções de formulário a gente tem muitas tá você pode utilizar o próprio meio chip você pode co locar o contact form para quem é do conversão eu acredito que o pessoal nas aulas de construção do site deve ter sugerido alguns plug-ins tá eu tô colocando aqui o que eu utilizo mas todos são a
mesma coisa a mesma função e aqui utilizar um título O que é um texto é eu não vou me preocupar nesse caso com o tamanho desse título aqui e tá E nem desse podemos dizer subtítulo porque aqui é a Red Line é onde eu quero que toda atenção Fique onde se o meu usuário é executar estação para mim eu ganhei o foi foi validado sabe eu não preciso nem que o cara vem aqui para baixo desde que ele já entenda que eu consigo suprir a necessidade dele a partir daqui tá então aqui embaixo eu vou utilizar
todas as fontes padronizadas o tamanho tá a única exceção que não vai estar padronizada a rede lá e esse subtítulo viu é uma coisa que eu sempre faço é na verdade não é sempre né mas eu costumo fazer bastante é sempre colocar vinho layout altura alinhamento vertical e mei o tá Eu sempre gosto de trabalhar na sua proporção e aqui eu preciso aumentar um pouco o espaçamento nas laterais é do meu conteúdo a sopa mulher mais direito posso colocar 5S 5 bom então um pouquinho mais cinco Ok para mim
serve eu vou escrever título sobre o serviço apenas E aí o texto vai ser um famoso Lauri isso mesmo tá quebrei ele em dois blocos Note que no elemento de texto eu vou colocar um novo aqui só para vocês verem é o Inter funciona tá eu não preciso gerar o código igual no no item superior que a gente utiliza o título né bom então aqui é só dá uma interno conteúdo que ele ele já Puxa aqui tem também como você arredondar as bordas do vídeo tá E aí E aí e é mesma coisa você vem eu acho que é um
pouquinho diferente para falar a verdade do daqui né Mas você vai selecionar o vídeo vai vim avançado borda e você vai colocar o quanto você achar necessário tá eu como eu disse eu gosto de tentar deixar o máximo padronizada as coisas então eu quer o colocar igual a outra tá que eu coloquei 28 aqui também vou por 28 e pensa que Rua Heitor quanto mais padronizado mais organizado vai estar suas informações tá então o que você puder manter padronizado vamos tenha tá para agora a gente vai fazer um
bloco um pouquinho mais simples tá que é o seguinte essa parte aqui vou pegar já essa cor para mudar aqui eu vou adicionar o único bloco já vou mudar a cor dela estilo tipo de fundo cor o Ok fica a gente tem aqui nesse caso a gente tem um título tá que ele vai ser centralizado é com este serviço você fez descer por favor certeza pontos ok e agora veio uma coisa um pouquinho diferente aqui nessa parte da criação do logo eu falei que tinha dois duas formas a gente fazer e aqui é a mesma coisa
tá porque eu vou utilizar agora ao contrário a utilizar a seção interna onde eu vou dividir essa então eu tenho uma seção dentro da outra um container dentro do outro tá E aqui vamos ver a melhor forma de organizar esses ite ns a é bom galera nessa parte a gente vai vir em ícone tá Isaac também tem no elemento gratuito tá e é benefícios do serviço E aí E aí os benefícios serviço tá ok a mudar o ícone aqui e deve ser uma loja uma coisa assim vou deixar esse carrinho tá é e para ele ficar
exatamente dessa forma é bem simples tá Oi gente vai fazer apenas mudar a posição do ícone tá gente que ela para o lado esquerdo e o Finn ele já vai se posicionar certinho é preciso ver agora é a centralização de le tá tchau É melhor um pouquinho espaçamento o tamanho dele E aí e o galera esse daqui para mim é o suficiente tá e eu vou duplicar ele apenas e na verdade eu vou fazer assim gente de duplicar porque eu vou mexer no espaçamento dele porque eu já vi que tem tá bom então vou
mexer eu vou mexer nesse espaçamento do meu objeto tá G1 G1 E aí E aí E aí E aí e agora você é bem simples né eu posso deletar esse essa parte do container duplicar esse a e apenas ir duplicando o meu serviço E aí ó é uma coisinha eu não notei ele tem um espaçamento a direita também Ah tá bom então eu vou voltar o processo eu vou duplicar novamente do cliquei e eu cliquei certo O que eu preciso fazer agora vamos colocar espaçamento superior inferior no meu background esse espaçamento a gente vai
colocar com o pezinho tá ou pede ele vai aumentar parte superior da parte inferior eu só quero confirmar o quanto eu coloquei no no superior aqui eu coloquei 50 então eu vou trabalhar com 50 nesse também o superior 50 o Ismael cadeado outra 5000 inferior 50 e 50 o ok ó e aqui embaixo tem um botão de ação esse botão hoje eu vou fazer o seguinte eu vou duplicar é essa E esse grupo o que vou remover esse com Trina dessa forma ele ficou Centralizado só que eu tenho algumas especificações aqui
né então eu vou tirar o direito o superior eu vou aumentar para 50 Oi e o inferior também para 50 ó e vou te falar um botão se botão ele é centralizado o tamanho dele eu vou de ixar médio ó e aqui amada para prisão o ok na verdade é a parte inferior do botão eu não dou esse container eu não preciso deixar ele 50 porque eu já tenho 50 no background tá então eu acabei somando e agora sim ficou correndo 50 aqui 50 aqui e 50 aqui a partir de depoimentos tá a partir depoimento vou fazer basicamente o
que eu fiz nessa nesse bloco superior a cena um bloco único e eu vou duplicar a nova duplicar vou criar um nome salário novo É sim conhece encomenda E aí E aí é aqu ele colocou um vídeo e dois você foi Mentos e outro Cetam AM G1 bom então colocar uma sessão dupla o meu lado inferior é um vídeo eu vou copiar esse vídeo porque ele já tá na configuração que eu preciso a conectar-se grupo que ele criou um ok aqui ele tem dois depoimentos é bom galera nessa parte aqui eu vou fazer um pouquinho
diferente que eu vou utilizar a partir de depoimentos que o próprio alimento já já fornece tá isso é do próprio alimento ou do gratuito tá E aí a falar um fundo E aí a sua enganar era 28 que acaba utilizando vou precisar adicionar o ped E aí Oi meu neném tu e se pede ele vai ser de todos os lados porque eu preciso de um respiro em todos os lados tá E aí E aí a usar ele alinhado à esquerda é igual ele está vou mudar a cor do texto para branco o nome também para branco e o cargo também ok a
imagem e não utilizar uma borda nem nada o tamanho da imagem para mim tá ok certo e eu vou duplicar e esse meu elemento E aí no caso aqui sã o dois né eu vou vamos ver como vai ficar mais harmônico ou eu já sei que eu posso fazer a reduzir é o tamanho do meu da minha tipografia do depoimento tá eu não posso usar um 14 aqui que tá tranquilo a leitura tá ok já é vou remover a foto aqui nesse caso só para o layout bater certinho imagem do remover e eu vou duplicar Lu e o reduzir um pouco olha aqui
só para gente bater e se alinhamento tá E aí para mim tá ok e já tá bem parecido é preciso de uma chamada para São Aquilo Que ca rinha é essa e para baixo porque porque ele já tá com expansão a gente 50 que eu preciso Agora eu preciso colocar espaçamento é preciso Um espaçamento aqui né no quem conhece a recomenda é inferior 50 tem um pouquinho menor nesse caso o porquê esse título é referente ao conteúdo abaixo o superior 50 e inferior 50 e se meu botãozinho aqui eu vou mudar a cor dele
também Ah tá a chover tá ok para mim ok e eu acho que eu ia um espaçamento aqui seria legal Oi tá muito colado bom e ntão eu vou o amor e colocar um pé din e no meu lado esquerdo e para que ele fique essa distância aqui fica próxima é essa tá E lembrando que é só uma configuração que eu tô fazendo um nó desktop é você precisa fazer essa a todas as adequações Ou pelo menos fazer a verificação no mobile tá o OK agora vamos para uma parte de quem som e quem somos também bem tranquilo seu face é é
uma imagem aqui o outro lado do título e o texto E aí Oi ó uma uma dica legal quando você tiver escreven do o texto se você der um enter e Note que ele ficou com esse espaço se você quiser apenas quebrar a linha segura shift e Inter tá Olá a diferença aqui eu quebrei a linha aqui eu dei um espaçamento tá é só uma dica aí G1 E aí o ok Maria imagem do mesmo esquema né Ela tá com uma borda então eu ganho em estilo vou colocar 28 aqui é o arredondamento que eu estou utilizando em todos os meus
elementos é eu tenho que alinhar na vertical no meio minha conteúdo o background e E aí Eu j á copiei a cor e tem que aumentar o meu espaçamento E aí e no casal pede tem que aumentar o prédio posso tirar o da direita e da esquerda precisa aumentar meu espaçamento aqui também é pa direita perdão na esquerda é preciso lembrar esse passado só para mim tá ok E aí E aí a minha é isso tá G1 e agora tinha um perguntas frequentes é a minha bem tranquilo que você feito tô fazendo aqui rápido para o
vídeo ficar mais forte possível tá o texto Centralizado tem que aumentar o espaç amento que eu já sei há 50 superior 50 inferior o que vem perguntas frequentes E aí e aqui deixa eu só confirmar provavelmente ele tem na versão do elementor normal tá aqui ó é no geral ele se acordaram tá ou sanfona e É nesse caso eu vou utilizar e o os dois e prendo com que fica melhor porque eu particularmente não me lembro a diferença dele está e cadê escrever for eu não lembro a diferença deles tanto
é que quase não tem diferença tá então eu vou utilizar ou sanfona Po r uma questão estética do sinal Zinho aqui que eu não eu não fiz a mudar é uma coisa que é legal aqui a gente pode notar que ele não tá indo de ponta a ponta da página igual o meu tá você quer dizer que tem um pezinho já no lado direito e ele é grande Tá e no lado esquerdo também coloquei demais reduzindo o e aqui mais 200 200 para mim tá OK Tá quando eu começar E aí o tradicional sanfona bem simples também tá e quando vou
começar a ver o resultado das minhas campanha E aí Oi ok é um dois três quatro cinco e eu vou duplicar Lu o pa Há 5 meses Oi ok E aí E aí E aí e esse daqui também é bem simples E aí e copiadas na cor de das Grande um belo coloca no fundo E aí E aí o sexo colocar o meu Super 1000 50.000 inferior 50 e aqui eu fiz um pouco mais conter o meu direito está maior a sua chamada não E aí E aí e colocar a cor Oi pode falar e na verdade lembra aqui aqui no começo a gente colocou um terço fica muito grande
então eu minha ideia era copiar aquele mesmo texto tamanho colocar aqui embaixo que ele vai ficar muito grande então eu vou deixar ele o que te agradável aos olhos tá Olá aqui é o homem tá vou colocar um pouquinho de pedrinha minha direita tá meu nome é margem E aí E aí e aqui a gente vai colocar um contexto um botão e o outro texto em baixo o texto o botão um e outro em baixo o botão ele é grande E aí Ah tá mulher praticamente tamanho todo o comprimento do grupo a nota e ele tem muito
passamento de todos os lados a g ente já vai colocar aqui ó ó e o pezinho para todos os lados eu vou manter o padrão Zinho de 50 o botão ele é um pouco maior né entendi de novo chamada coração e os textos estão centralizados E aí E aí e na cor branca Aí sim hein é melhor eu vou deixar um pouquinho maior E aí Tá certo E aí um tiro por uma cor E aí rei eu mandei a força do texto para Branco sendo que na realidade nenê cinza ó e aqui galera aquela manter o padrão é arredondamento da borga né a 28 é
o que a gente está u tilizando e eu acredito que eu pedem aqui seja maior do que isso tá é e eu vou eu vou manter o pé de do jeito que tá aqui o nosso só que eu vou aumentam um pouquinho tamanho do E aí é da do grupo do lado esquerdo e o ok única coisa que eu tenho que fazer aqui é centralizar e na vertical Como já fizemos das outras vezes tá e aqui falta só um rodapé Zinho bem tranquilo também é E aí bom então resumindo galera quando eu tô fazendo aqui é o que eu fiz foi apenas retirar o
template esse layout do J pegue passando para o elemento tá como eu já disse essa esse template ele não é de minha autoria estou apenas replicando ele para que vocês possam ver as ferramentas que utilizo que vocês possam estar replicando as suas Landing page está a fazer algo vou dar um ver página né quero ver como que ela ficou ó e vou comparar depois com a outra diferencia aqui tá toda editável só você adicionar seu conteúdo e parte para venda E aí
0 Comentários