Vidal é contigo agora Opa mais uma videoaula agora abordando a criação de uma landpage Ok conteúdo aí da nossa disciplina de gestão de startups beleza e também não é conteúdo que está ligado ao assunto sobre MVP produto minimamente viável principalmente aos tipos né no caso do tipo fumaça ok que o uso de uma landpage pode né apresentar pela primeira vez né o seu produto ao mercado né fazendo com que você atinja os seus objetivos capturando leads né que são futuros né clientes em investidores né pessoas que vão estar né interessadas aí no seu produto ok
então nós vamos começar com as configurações da ferramenta WordPress Lembrando que o cms WordPress também né Faz parte aí do conteúdo sobre ferramentas no code Ok então é um assunto relevante aí da nossa disciplina que nós vamos estar trabalhando aí de forma prática na criação elaboração dessa página né de uma land Page para o seu projeto de startups vamos lá aqui nós já temos o WordPress instalado OK agora nós vamos fazer as configurações básicas primeiramente vamos instalar os plugins e também instalar o tema que nós utilizar no nosso projeto em plugins nós vamos instalar primeiramente
três plugins importantes né para o nosso projeto o elementor Né o principal plugin que irá n nos ajudar a desenvolver a nossa página Ok vamos clicar aqui em adicionar plugin e Pesquisar pelo plugin elementor pronto elementor Website builder Ok você clica em instalar Ok plugin instalado e depois não esqueça de ativá-lo o outro plugin inclusive ele já está aqui na lista é o Royal elementor né que são complementos aí para o nosso não é plugin principal o elementor Ok então você instala também e ativa o outro plugin será o plugin contact 7 é o contact
form com plugin nós vamos poder criar formulários Ok E não esqueça de ativar agora nós vamos instalar o tema do nosso projeto aqui em aparência feixi essas notificações Você vai clicar em Adicionar novo tema e de início né já apareceu aqui o tema Hello elementor nós vamos instalar e também ativar pronto Pronto agora pessoal nós vamos fazer algumas configurações básicas no WordPress a primeira será em links permanentes ok aqui você vai alterar né Caso não esteja né porque aqui já está na opção correta viu se no seu WordPress estiver por exemplo como padrão Ok altere
para nome do post Ok salvar as mudanças ainda aqui em configurações você pode por exemplo alterar o título do seu site colocar a descrição Ok vou até colocar aqui o nome do nosso projeto será o qu neili PTI cuidamos do seu ti para você focar 100% no seu negócio e caso você tenha né uma descrição você Pode informar aqui ok Aí você salva Pronto agora nós vamos fazer a configuração da nossa página principal eu vou excluir estas páginas aqui de exemplo Ok pronto vou criar uma nova página aqui eu vou colocar como página principal pronto
outra configuração que você deve fazer aqui é na opção modelo você deve alterar para modelo tela do elementor que nós vamos criar a nossa página com o plugin então a gente já define aqui como modelo tudo bem publicar depois publicar novamente Pronto agora nós vamos voltar lá para as configurações Ok na opção leitura nós vamos mudar né aqui ó por exemplo sua página inicial exibe o qu o padrão é o qu seus ports recentes só que nós vamos mudar para uma na estática eu vou mostrar aqui como é que está o front não é do
nosso site aqui ó Fronte do nosso site tá basicamente isso daqui não é o padrão né o padrão é outro aqui a gente já fez algumas modificações Ok mas aqui você vai fazer o seguinte você vai mudar para uma página estática e página inicial n pegar aquela página que nós acabamos de criar salvar ações vou lá no front e atualizar agora a nossa página vai estar toda em Branco ok Porque nós vamos criar ela do zero Beleza então vamos começar a elaborar a nossa página Ok vamos clicar aqui em páginas página principal e agora nós
vamos selecionar o qu editar com elementor primeira coisa que nós vamos fazer aqui no nosso projeto pessoal será o qu a padronização né de algumas configurações por exemplo a tipografia a cor né das fontes né do nosso projeto é uma boa prática não é você fazer isso ok então vou fazer aqui a demonstração dessa configuração e depois nós vamos de fato começar o nosso projeto primeira coisa que nós vamos fazer é adicionar um contêiner do tipo flexbox não é e direção da coluna este exemplo aqui OK vou adicionar aqui alguns elementos não é você clica
aqui primeiramente o elemento título e observe né a facilidade que você tem aqui com esta ferramenta você clica e arrasta lá para o contêiner arrastar o título vou pegar também aqui o editor de texto Ok pegar também um elemento botão Então são os elementos que nós vamos estar utilizando mais no nosso projeto Então nós vamos definirmos não é algumas configurações padrões Ok como eu já falei é uma boa prática você clica aqui ó nas três Barrinhas configurações do site primeira coisa cores né cores globais a nossa cor primária do nosso projeto vai ser uma cor
azul ok então nós já Vamos definir aqui né informar aqui vou colocar o He [Música] decimal pronto salvar como é que você salva aqui no elementor você clica em atualizar pronto então a cor primária Ok vai ser esta cor aqui tudo bem próximo passo será né a definição das fontes do sistema não é Ou seja tamanho o peso ok da fonte do título de textos ok então nós vamos voltar aqui clicar em Fontes globais primeira coisa que nós vamos definir né é a fonte primária e aqui o exemplo né Vamos clicar aqui no lápis a
fonte que nós vamos a família né Nós vamos utilizar pops o tamanho aqui vai ficar definido em 25 Pixel né PX e o peso 600 Ok de como está aí você atualiza para salvar Ok fonte secundária vamos aqui pops tamanho 20 ok peso deixar em 500 e salvar Ok vamos agora para texto [Música] né tamanho 15 e o peso 500 Ok salvar Pronto né pessoal agora em Realce você vai definir o qu [Música] popins tamanho 15 peso 400 pronto salvar ok agora vamos lá para os botões primeira coisa que nós vamos definir tipo de plano
de fundo você vai deixar degradê Ok a primeira cor nós vamos colocar o quê a cor azul 0 é 20 1 7 1 pronto pronto a segunda cor vamos deixar Verde 49 ffb D Pronto agora nós vamos ajustar o ângulo né o ângulo aqui você pode deixar 227 Ok E também o raio né ou seja deixar em 30 tudo bem raio da borda então aqui está né o nosso resultado do nosso botão salvar Pronto né acabamos de definir aí as cores globais Fontes globais e também né configurações aí dos botões tudo bem agora vamos começar
o nosso projeto eu vou apagar aqui os elementos né eu havia adicionado salvar novamente pronto pessoal o nosso projeto nós vamos começar ele com um contêiner com duas colunas né coner do tipo flexbox duas colunas Ok inclusive já está no ar a prévia né do nosso projeto Vou acessar e aqui está né projeto que nós iremos desenvolver que é oti né lá nós adicionamos o dois Aliás umer com duas colunas na primeira coluna nós vamos adicionar logo também o título principal subtítulo e na segunda coluna nós vamos criar este formulário Ok nesta primeira aula vamos
estar né fazendo que a criação aqui da sessão Hero que é essa sessão aqui principal depois a sessão de soluções Ok e criar aqui também o nosso botão o botãozinho de saída que é o botão de ação né o botão CTA Lembrando que eu vou dividir esta videoaula em dois blocos Ok para que ela não fique tão extensa no outro bloco eu vou demonstrar a criação aqui do por escolhi nossos serviços também esta frase aqui de chamada quem somos depoimentos outro botãozinho de saída na verdade é o mesmo né botão aqui do primeiro exemplo e
finalizar com rodapé e a instalação do Plugin joinchat Ok então vamos lá já adicionei aqui o container com duas colunas agora pessoal nós vamos adicionar o backg n ou seja o plano de fundo que vai ser uma imagem do nosso projeto Ok você clica aqui nos pontinhos né editar o coner e aqui em estilo nós vamos escolher o que estilo clássico e localizar a nossa imagem Vou acessar aqui os arquivos pronto imagens utilizadas BG na ti não Hero pronto OK vamos realizar aqui algumas configurações posição centro ao centro Ok e tamanho da imagem cobertura atualize
para salvar OK agora nós vamos acessar a biblioteca de elementos e procurar o elemento imagem você clica arrasta e solta pronto aqui pessoal nós vamos adicionar a nossa logo não é então vamos localizar aqui está vou enviar selecionar e Pronto agora vamos fazer o seguinte vamos colocar aqui um preenchimento né ou seja um pad interno né para que a gente tenha um espaçamento aqui do nosso contêiner né voltando aqui para as configurações do contêiner você clica em avançado aqui em preenchimento você desmarca aqui a vinculação de valores e coloca no superior por exemplo 70 ó
estão vendo aí o espaçamento não é interno no inferior também 70 direita você coloca 50 esquero também Pronto agora já ficou melhor não é os espaçamentos o preenchimento Pronto agora pessoal nós vamos adicionar o elemento título você clica arrasta aqui para a primeira coluna Ok vamos pegar o nosso texto de exemplo textos utilizados vamos pegar aqui o [Música] título pronto vamos fazer aqui a configuração da cor não é do título vamos deixar né a cor branco Ok então eu venho aqui em estilo Observe que o título ele já trouxe né a nossa configuração global Só
que nesse caso aqui n nós vamos ter que modificar aqui principalmente a cor né Vamos deixar ó fonte cor branca tipografia nós vamos fazer aqui uma alteração nós vamos aumentar né o tamanho Ok então o tamanho aqui nós vamos deixar 45 pronto peso aumentar para 700 Ok então aqui está né o nosso título destaque belza agora nós vamos criar o qu o subtítulo subtítulo vou fazer o seguinte ao invés de pegar outro elemento eu vou duplicar o elemento título que está aqui já adicionado duplico vou pegar aqui o texto né H outra coisa aqui no
título né não tem aqui esse nome. ti pronto só cuidamos do seu ti para você focar 100% do seu negócio agora sim agora vamos fazer alguns ajustes aqui nas config ações do subtítulo Vamos deixar a cor a mesma tipografia 22 e o peso 400 não é pronto normal Ok nosso projeto já está ganhando forma pronto pessoal esta parte aqui ó por enquanto é só isso né vamos criar agora o noss formulário né De captação de leads de futuros contatos Ok do nosso projeto primeira coisa que nós vamos fazer é criar esse plano de fundo aqui
ó com os cantos né arredondados Vamos lá você clica aqui não éessa extremidade para editar oer nós vamos primeiramente colocar aqui um plano de fundo do tipo clássico e a cor sólida né cor branca Ok na borda você define aí 30 para ficar padrão Ok em todos os cantos aí do né contêiner Ok então quando você define aqui superior ess valor já fica aplicado nas outras extremidades porque os valores estão vinculados beleza vamos atualizar OK agora vamos adicionar as informações que tem aqui no formulário né para selar nossa primeira relação Você acaba de ganhar uma
consultoria gratuita de 30 minutos e depois o próximo texto né Ok vamos lá vou pegar aqui o texto de exemplo pronto pegar o elemento né o elemento aqui eu vou usar o título elemento título arrastar soltar aqui pronto vou colocar o texto fazer aqui algumas configurações ok aqui na tipografia do texto eu vou selecionar secundário Ok e centralizar o texto beleza próximo texto eu vou fazer a duplicação aqui do né do elemento título aqui do formulário para nós adicionarmos o próximo texto não é nessa consultoria tal tal vamos lá pronto aqui pessoal eu vou fazer
o seguinte né vou pegar aqui o primeiro aqui a cor colocar aqui a cor de texto tipografia texto pronto tão vendo aí já ficou mais ou menos do jeito que é para ser não é Ok a fonte que tá com pesoz a mais n é se você quiser você pode n modificar por exemplo peso 500 Pronto agora sim né Já já nós vamos colocar esse preenchimento Zinho aqui interno OK assim que a gente terminar de concluir todo o formulário pesso agora nós vamos nosso formulário Ok o elemento formulário que será adicionado com ajuda do Plugin
complementar o Royal Element você pesquisa primeiro form e você vai pegar esse daqui ó form Style arrastar aqui para o nosso coner pronto Observe que não tem nenhum formulário selecionado aqui você vai clicar em form seleciona o qu Qual foi o plugin que nós instalamos para o formulário contact form set tem outras opções né WP forms Ninja forms Caldeira forms Ok contact set já tem um template no ponto lá no Contact set que é este formulário de contato um pronto ele já TR aqui o formulrio alg uns Campos nós não vamos usar e todos esses
campos não é então nós vamos ter que editar o nosso formulário eu vou sair aqui do elemento você clica aqui no nas três Barrinhas sair Ok pronto aqui você clica no ícone na logo do aí nós vamos lá em contato formulário de contato aqui você edita né clica em editar e aqui pessoal nós vamos deixar somente o campo submit que é o campo Enviar Excluir aqui os demais e vamos criar os nossos o primeiro campo será o campo nome valor padrão nome marque esta opção aqui utilize Este texto como um espaço reservado aqui é o
Place holder né já mostra aqui inserir tag enter Vamos para o próximo elemento eil e-mail marca esta opção Campo obrigatório pronto e próxima opção telefone nome S nome valor padrão telefone esta opção também ser um campo obrigatório pronto porque aqui no nosso formulário principal ó temos nome e-mail e telefone beleza outra coisa se você for clicar em salvar agora você não vai conseguir porque n está aparecendo um erro aqui no na guia mail esse erro aqui pessoal você pode remover cabeços adicionais você pode remover isso daqui não é tão importante e agora sim não é
Ó formulário de contato salvo Ok pronto se você for lá visualizar aqui como é que está ficando né frontend do nosso projeto olha aqui ó nos formulário já tem agora os campos necessários vamos fazer agora a estilização aqui do nosso formulrio ok então nós vamos lá em página voltar de novo lá para nossa página principal para editarmos né configurarmos aqui o nosso formulário beleza primeira coisa que nós vamos fazer clicando aqui ó no lápis para editar n o formulário nós vamos clicar aí na opção estilo localizar o f Label e deixar primeiramente Zerado né obser
o espaçamento aqui já deu uma modificada pronto OK vamos também fazer aqui algumas alterações ó nos Fields Então vamos começar primeiramente aqui com o border [Música] col você vai escolher em border col padrão e escolher aí primário pronto OK depois vamos para a tipografia do tipo também ó Global texto pronto OK vamos agora para o input pode deixar 100 né para Eli ó ocupar Todo o espaço Ok e 50% aqui na altura do nosso imput Vamos agora para o border radians que é o arredondamento aí das nossas bordas você deixa que a gente vem sempre
usando 30 e esse vertical G você deixa menos Men 10 pronto OK já já a gente faz aqui o ajuste do botão vamos salvar logo ok agora nós vamos para o primeira coisa que nós vamos fazer aqui justificar ou aqui em justificar Observe que ele já tá ocupando Todo o espaço aqui do form né OK depois nós vamos colocar o qu a borda né bordinha aqui de 30 também e top distância nós vamos ó olha aqui colocar a distânci aqui pronto e atualizar Ok formulário criado agora vamos fazer o seguinte vamos colocar aqui uns espaçamentos
aqui interno né clicar aqui nas configurações do contêiner avançado preenchimento viu olha aqui ó se você colocar 30 já fica com espaçamento legal outra coisa fazer aqui o redimensionamento entre as colunas você clicando deixando o cursor aqui no centro né vai aparecer uma setinha dupla aí você faz isso você vai ajustando vou deixar 60 60% aqui do aqui no caso é o tamanho total do coner eu estou fazendo aqui o o redimensionamento ou seja 60% do tamanho total para N A primeira coluna e 40% aqui para o nosso formulário fazer a atualização vou olhar lá
o frontend e aqui está né show de bola né Agora nós vamos desenvolver a sessão de soluções vamos visualizar aqui o projeto final e Aqui nós temos um título soluções para todas as necessidades da sua empresa e temos aqui não é algumas soluções serviços que nós oferecemos depois nós vamos fazer não é vamos criar o botão né de saída que é o CTA tudo bem Lembrando que esta videoaula Ela será dividida em dois blocos primeiro bloco desenvolvimento não é da sessão Hero que tem aqui a logo título principal subtítulo e um formulário não é para
que os futuros clientes n possam entrar em contato ok e ter uma prévia aí dos nossos serviços ok vamos lá a sessão Hero já está concluída Vamos agora para a sessão de soluções do nosso produto primeiramente vamos adicionar um né do tipo flexbox Primeira opção né Ok pronto vamos lá nos elementos pegar o elemento título e arrastar aqui para o contêiner o texto será soluções para todas as necessidades da sua empresa pronto vamos fazer fazer alguns ajustes Ok primeiramente aqui na tipografia Vamos alterar o tamanho para 45 deixar o texto Centralizado pronto não é texto
inserido e finalizado Vamos agora para a próxima etapa você vai inserir um contêiner com duas colunas ok aqui no primeiro coner não é na primeira coluna vou pegar o elemento imagem arrastar para cá Ok e vou enviar a imagem proposta né a imagem que está lá no nosso projeto e aqui está pronto vamos agora para a segunda coluna na segunda coluna nós vamos utilizar o elemento list e aqui está ó este elemento faz parte do Plugin Royal né que são complementos para o elementor eu arrasto ok ele já vai mostrar aqui uma prévia não é
com alguns íncones Nós vamos né substituí-los pelos íncones não é do nosso projeto ok então nós vamos começar editar aqui no espaço vertical você pode deixar 50% ok e no horizontal 30% Ok vamos agora em conteúdos vamos inserir os textos não é dos serviços n as descrições e substituir os ícones Ok você clica por exemplo aqui em Victory list e onde tem media Type nós vamos substituir por imagem e vamos pegar né o primeiro ícone dos nossos serviços aqui ó 0 Já tá numerado pronto texto Alt s e Consultoria em ti é o título Ok
conteúdo e a descrição gente coloca aqui segundo ke fatur que é o Gestão em Segurança de ti título e a descrição substituindo também o ícone por um imagem enviar a imagem vou logo enviar a outra pronto aqui está vamos agora para conector Line substituir Lembrando que lá no projeto final são três n soluções que estão sendo apresentadas aqui nesta sessão Então nós vamos eliminar esse cust sty pronto para ficar somente três já já nós vamos fazer os ajustes né finais para que ele fique n parecido aqui com o resultado final backup em nuvem pronto vamos
aqui substituir a imagem Inserir a imagem não é isso Pronto agora vamos fazer alguns ajustes vamos lá na parte de estilização back Ground color vamos usar Cor primário lá das nossas cores né globais Ok olha aqui que já temos aqui n é a nossa cor sendo aplicada tamanho do ícone não precisa mexer não é porque nós estamos utilizando o qu imagens Então a gente vai alterar aqui o box sizer deixar aqui 100 pronto colocar aqui uma borda de 15 pronto ó temos agora espessura desta linha vertical vamos primeiro deixar a cor primária azul Vamos deixar
a largura em C e Pronto né Vamos pra parte title e descriptions n ou seja título e descrição primeira coisa cor Pronto né [Música] primário tipografia pegar tipografia de pegar aqui ó pronto secundário né descrição também vamos pegar aqui a cor de texto pronto tipografia texto pronto agora nós vamos fazer o seguinte Vamos diminuir aqui um pouco esta imagem né Para que ela fique proporcional aqui com os conteúdos que estão na segunda coluna ok aqui em largura ol aqui ó nós podemos realizar este ajuste de redimensionamento da imagem então deixem aí um tamanho ó Ok
pronto OK vou deixar com largura de 80% vou agora fazer aqui um ajuste no espaçamento ó espaçamento vertical pronto OK vamos salvar vamos visualizar o resultado e aqui está ok Mais uma etapa concluía agora nós vamos fazer o quê inserir o botão quero minha empresa [Música] segura vamos lá adicionar aqui coner do tipo flexbox pronto vamos lá nos elementos pegar o elemento botão Ok vamos aqui centralizar o botão vamos pegar o texto quero minha empresa segura aqui em conteúdo onde tem texto você coloca minha empresa segura aqui no link fazer o qu colocar o linkzinho
para o WhatsApp Pronto agora nós vamos aumentar aqui o tamanho tamanho da fonte estilo tipografia ó tá em 15 né 45 fica um pouco grande pronto deixar em 30 até um pouco mais n que aqui o padrão mas sem nenhum problema temos que deixar ele bem destacado Ok você pode também colocar aqui uma margem que você quiser a margem superior em 20 pronto salvar Observe também ó que o botão tem um efeito né Na hora que você passa o cursor do mouse ele dá um zoom vamos lá aqui ó ao passar o mouser animação a
passar o mouse ó grow feito grow pronto tá vendo Ok vamos atualizar e aqui está o resultado beleza vamos olhar aqui a responsividade ó show de bola pronto pronto neste primeiro bloco não é como eu havia falado nós concluímos aqui a sessão principal sessão Hero depois a sessão de soluções e a inserção aqui do botão de saída não é o botão CTA tudo bem até a nossa próxima videoaula com a conclusão final do nosso projeto Ok até mais e bons estudos
