Opa seja muito bem-vindo aqui quem fala é o Marcelo Rocha também conhecido como celão se você quiser especialista em criação e venda de sites e esta é a aula número dois da imersão à Nova Era da criação de sites uma série de aulas onde eu estou ensinando designers web designers e pessoas comuns que estão no absoluto zero todo o caminho ruma a faturamento de mais de R 10.000 mensais com criação e venda de sites Profissionais tudo isso através de um negócio já falei antes e repito agora não é Fórmula Mágica não é dinheiro milagroso não
é um negócio que você pode montar uma profissão que você aprende e que te permite vender esse serviço para empresas empreendedores podendo ser bem remunerado com esse trabalho inclusive trabalhando de qualquer lugar do mundo com uma conexão de internet apenas e o seu próprio computador e fazendo o seu horário você precisa apenas cumprir os Prazos que você prometer pros seus clientes mas é um trabalho beleza precisa suar camisa e precisa trabalhar e nessa segunda aula a gente vai falar debaixo do seguinte tema desvendando as ferramentas para criar sites você vai descobrir como na prática nós
podemos criar sites profissionais e na aula de hoje nós vamos falar inclusive também sobre a possibilidade de montar um serviço próprio de hospedagem de alta performance trazendo mais qualidade pros Sites dos seus clientes trazendo ganhos recorrentes para você inclusive mais segurança pros seus clientes e você vai parar de deixar dinheiro na mesa por indicar outros serviços de hospedagem externos ao invés disso você vai descobrir como é possível ter o seu próprio serviço de hospedagem beleza nós vamos ver isso aqui na aula de hoje e também vamos ver é claro Quais são as ferramentas na práticas
melhores ferramentas do mundo para criar sites Profissionais que podem ser vendidos por valores como por exemplo R 2.000 R 3.000 R 5000 e assim por diante E é claro a gente vai colocar a mão na massa a gente vai juntos criar um projeto aqui utilizando essas ferramentas que eu vou te apresentar e você vai ver na prática na tela do meu computador como essas ferramentas funcionam tudo de maneira muito rápida muito simples 100% pessoal se você quiser nem precisa utilizar programação você vai ver isso aqui na Prática tá ferramentas literalmente que você arrasta e solta
para montar um site profissional mas antes da gente prosseguir com o conteúdo dessa segunda aula eu preciso te avisar urgentemente que você deve ter assistido antes a aula número um para que você prossiga assistindo a aula número dois se você não assistiu você vai pausar esse vídeo Você vai assistir agora A primeira aula porque ela é essencial para você entender o conteúdo dessa segunda aula Se você continuar daqui sem ter assistido o conteúdo da primeira aula a mesma coisa você assistir uma série da Netflix do meio pro fim você não entende isso aqui é um
quebra-cabeça você precisa de todas as peças encaixadas e na ordem correta beleza na primeira aula eu te mostrei quais são os tipos de sites que mais existem em demanda no mercado Quanto em média que iniciantes podem cobrar por esses sites e além disso também te mostrei cinco conceitos Fundamentais Se você realmente quer ser valorizado e aprender a criar e vender sites sendo muito bem remunerado nesse mercado Beleza então se você não assistiu você vai pausar assistir a aula um e depois você vem aqui e prossegue fechado o link para você Acir a primeira aula tá
em algum lugar aqui dentro dessa página aqui em cima do lado em algum lugar você estando no YouTube ou você estando dentro da nossa plataforma da imersão Nova Era Beleza então assiste a Aula primeiro depois a gente continua agora se você já viu antes a aula número um Aí sim Você pode prosseguir daqui pra frente e rapidamente aqui antes da gente prosseguir com o conteúdo da aula número dois eu quero agradecer pelos inúmeros pelos vários comentários e agradecimento que eu tenho recebido pelo conteúdo que eu compartilhei na aula número um seja pelo meu Facebook seja
pelo Instagram várias pessoas vários de vocês estão deixando seus comentários e eu estou Muito feliz de ver comentários como esses que você tá vendo aí olha só por exemplo o comentário da Empire media em duas horas entregou muita informação já estou ansiosa pela aula número dois e gostei que e gostei mesmo eu que sou somente designer depois de tudo que eu vi e vi quero ser Web Designer Muito obrigado Denise sensacional a maneira que você ensina tão boa que a gente nem vê o tempo passar anotando aqui ansiosa pra aula número dois vamos começar já
já Denise aula sensacional Marcelo Na expectativa da aula dois enfim são vários e vários e vários comentários tem mais esse da Denise ali embaixo também né que é outra Denise Marcelo achar o seu canal foi provavelmente uma das melhores coisas que aconteceu comigo esse ano você me inspira a sair do meu comodismo conteúdo excelente ansiosa pra próxima aula gente muito obrigado por esses comentários mas tem mais tem um monte de comentários que as pessoas Estão deixando e também dá tempo ainda de você deixar o seu comentário é muito importante para mim saber a sua opinião
eu valorizo aquilo que vocês que estão me acompanhando pensam sobre o meu trabalho e procura ao máximo atender os pedidos de vocês e ajudá-los com esse conteúdo que está transformando vidas Então deixa o seu comentário sobre o que você tá achando das aulas seja aqui seja dentro da plataforma do workshop seja no Facebook Enfim pode até ser inclusive Que eu mostre o seu comentário na próxima aula tá legal mas ó você não vai deixar isso aqui para depois Porque é importante que você consuma todo o conteúdo desse workshop até domingo domingo eu vou tirar todas
as aulas do ar e não adianta vir me mandar mensagem no Direct não adianta me falar que teve que viajar que não sei o qu que não sei o quê não isso aqui é prioridade tá legal aqui é para quem está realmente comprometido a aprender essa profissão e Seguir essa carreira não é brincadeira não é conveniência então leve a sério esse conteúdo e agora pra gente começar o conteúdo da aula número dois eu te convido a comentar um hash criar sites dessa maneira eu sei que você já está nesse ponto da aula e que você
também quer aprender a colocar a mão na massa Quais são as ferramentas serviço de hospedagem e todo o conteúdo que eu preparei para você na aula número dois comenta agora o # criar sites e Partiu Pro conteúdo muito bem então pra gente começar eu preciso te explicar um conceito que eu já falei um pouquinho na aula número um mas eu vou reforçar agora e dar um pouco mais de detalhes que é o conceito de domínio e hospedagem domínio e hospedagem são duas coisas essenciais atenção aqui em mim agora domínio hospedagem são duas coisas essenciais para
qualquer site ficar online na internet qualquer site que você acesse tem essas duas coisas aqui domínio e Hospedagem e o que que é domínio e hospedagem domínio ele é o Ere endereço de um site www.guma.com como se fosse vamos dizer assim o número de um celular é o chip de um celular por assim dizer então imagina que você comprou lá o chip de um celular aquele chip vem com um número para você é simplesmente isso só que apenas o fato de você ter comprado um chip não garante que você vai conseguir fazer ligações vai conseguir
usar aquele número para Você se comunicar com alguém é necessário além do chip que é o número o endereço também é necessário um plano de dados e esse plano de dados é como se fosse a hospedagem só que no nosso caso aqui de criação de sites o domínio ele é o endereço www.algo.com.br por exemplo já a hospedagem ela é um computador remoto ou seja um computador em algum lugar no mundo nós normalmente chamamos esse computador de servidor tá ele é um Computador que armazena todos os dados do site Então veja bem o site ele tem
imagens tem pode ter música pode ter vídeo pode ter texto informação código interno Enfim tudo isso são Dados referentes a aquele site e isso fica dentro de um computador remoto que nós chamamos de servidor tá igualzinho o computador que você tem na sua casa servidor tem lá a o espaço de memória tem o espaço de armazenamento processamento tudo aquilo que um Computador convencional tem só que esse computador que é nós chamamos de servidor ele vai servir para hospedar os dados do site Beleza então ali vão ficar todas as informações mas agora eu preciso da sua
atenção o que a maioria dos gurus não falam por aí a maioria das pessoas não falam é que existem atenção aqui agora tipos de hospedagem existem tipos de hospedagem e quando eu falo tipos de hospedagem eu não estou me referindo a empresas que oferecem um Serviço de hospedagem Independente de qual seja a empresa tá Existem várias por aí no Brasil existem algumas que são muito comuns como por exemplo hostgator hostinger mas eu quero que você entenda o conceito por trás Independente de qual seja a empresa Fechou então vamos lá o primeiro os três tipos de
hospedagem que existe basicamente tá são esses aqui que você está vendo primeiro a hospedagem compartilhada segundo hospedagem dedicada e terceiro hospedagem VPS o que Que é cada um desses tipos de hospedagem qual deles é a melhor para você e pro seu cliente vou te explicar agora vamos lá então vamos entender primeiro o que é e como funciona a hospedagem compartilhada eu vou ler a legenda aqui e vou te explicar melhor olha lá um único computador ou seja um único servidor que compartilha recursos compartilha recursos do computador ou seja memória processamento armazenamento enfim entre milhares ou
Milhões de sites de diversos usuários então atenção aqui em mim é um computador então imagine um computador físico certo e dentro desse um computador físico tá o seu site e mais outros milhões milhares de sites de diferentes pessoas de diferentes diferentes clientes daquela empresa de hospedagem beleza e aí esses clientes podem ter milhares milhões de sites não sabend se esses outros milhões milhares de sites que estão na mesma máquina que O seu site está Pode ser que esses outros sites de outras pessoas não foram construídos com boas práticas de segurança não foram construídos de uma
forma otimizada ou seja para abrir rápido entende então o seu site tá Compartilhando os mesmos recursos do computador que são memória processamento armazenamento com todos esses outros milhões ou milhares de sites beleza para você entender um pouco melhor vamos fazer uma comparação então Então você Vai imaginar o seguinte você vai imaginar um prédio tá legal você tá vendo o desenho de um prédio aí e a hospedagem compartilhada É como se você tivesse um apartamento dentro desse prédio tá vendo ali ó um apartamento Pintadinho de azul aqu ali é o seu apartamento só que dentro do
mesmo prédio existem outros n apartamentos ou seja outros n vários e vários sites diferentes de outras pessoas que moram ali no mesmo prédio entendeu E aí qual Que é o grande problema disso aqui Veja bem você compartilha os mesmos recursos do prédio com outros moradores ou seja se um prédio de algum dos seus se um prédio não se o apartamento de algum dos seus vizinhos pega fogo acontece um acidente que que vai acontecer não tem jeito esse fogo uma hora vai chegar também no seu apartamento e nos outros que estão ali no mesmo prédio físico
aqui é a mesma coisa com relação a hospedagem compartilhada atenção aqui em Mim o seu site tá no mesmo computador do que outro outros milhares ou milhões de sites está se um desses milhares ou milhões de sites recebe algum tipo de pico de acesso ou seja muitas pessoas acessando sobrecarregando o uso do Servidor Se algum desses outros sites que estão ali tem algum tipo de ataque hacker não não foi construído com boas práticas de segurança o que vai acontecer esse problema vai afetar o seu site também porque ele tá dentro da Mesma máquina que o
outro site Você tá entendendo esse é o conceito de hospedagem compartilhada e ó por isso por esse motivo que eu te aviso que trabalhar com hospedagem compartilhada não é a melhor solução não é a melhor solução você acabou de entender o motivo disso porque não é seguro você não consegue garantir uma boa velocidade de abertura no site já que os recursos estão o tempo inteiro sendo compartilhados com outros sites que você Não tem controle que são de outras pessoas que você nem sabe quem são Esse é o grande problema da hospedagem compartilhada e ó já
te aviso aqui que só isso aqui só isso aqui já valeria a aula inteira tá por quê porque a maioria das pessoas os gurus que estão por aí ficam te indicando esse tipo de hospedagem não porque é a melhor solução mas porque eles querem simplesmente ganhar uma comissão em cima de você quando eles indicam uma hospedagem Compartilhada eles estão indicando com o link de afiliado deles para que a comissão pela venda vá pro bolso deles sem se preocupar em entregar um serviço de melhor qualidade para você e pro seu clientes que você atende tá legal
existe outra solução muito melhor que eu vou te apresentar já já ok então esse é o primeiro tipo de hospedagem a hospedagem compartilhada agora vamos entender o segundo tipo de hospedagem o segundo tipo de hospedagem é a hospedagem Dedicada O que que é uma hospedagem dedicada eu vou ler aqui e vou te explicar novamente vamos lá um único computador físico inteiro com todos os recursos dele seja processamento memória armazenamento somente para você sem dividir com mais ninguém então aqui a gente tá falando de uma máquina física inteirinha dedicada só para você por isso que a
gente chama isso aqui de servidor dedicado porque todos os recursos da máquina são dedicados para Você ninguém mais utiliza os mesmos recursos da máquina vamos entender mais uma vez na comparação do prédio Então você vai imaginar que você agora é o dono de todos os apartamentos de um prédio a máquina ela é isso aqui ela é o prédio e os apartamentos são cada um dos seus sites que você tem ali dentro daquela máquina Qual que é a grande vantagem disso aqui a grande vantagem é que você tem controle sobre absolutamente tudo você tem todas as
Chaves de todos os apart de um prédio dessa forma você consegue garantir que nenhum acidente vai acontecer em nenhum desses apartamentos você tem controle Total sobre todos os recursos do prédio entendeu só que o grande problema desse tipo de hospedagem aqui que é a hospedagem dedicada é que por conta de você ser o dono de um prédio Esse é um serviço que custa muito muito muito muito caro Então eu não te recomendo justamente por causa do preço tá porque No nosso caso gente que trabalha com criação de sites talvez não seja viável e assim como
eu falei é bom é ótimo mas às vezes pensando no custo não é viável pra gente isso aqui é viável para projetos maiores como por exemplo imagine um projeto de modelagem 3D online que exige realmente muito processamento exige muito do computador que tá hospedando o site Então nesse caso sim compensaria ter uma hospedagem dedicada mas no nosso caso que Trabalhamos com criação e venda de sites e prestamos ess e prestamos esse serviço para clientes a minha recomendação é o terceiro tipo de hospedagem que é a hospedagem VP então VPS significa vend da sigla do inglês
né virtual Private server ou traduzindo servidor privado virtual e agora eu preciso que você preste atenção nisso aqui ó é um servidor privado virtual que que isso quer dizer servidor privado virtual vamos lá que eu vou te explicar Então Pensa novamente num servidor físico só que esse servidor físico ou seja esse computador físico onde vão ficar armazenados os arquivos do site ele tem dentro dele como como se fossem mini servidores tá a gente chama esses mini servidores de servidores virtuais É como se você pegasse um computador vamos dizer que tenha dois servidores né dois servidores
virtuais dentro dele então você pega uma máquina física um computador e divide ele no meio Divide Por dois por exemplo eí você tem dois servidores privados virtuais ali dentro e detalhe agora que é agora que é grande vantagem presta atenção aqui em mim o que acontece no servidor a embora ele seja um servidor virtual que está dentro de um servidor físico O que acontece no servidor a não afeta em nada o que acontece no servidor B mesmo eles estando na mesma máquina física entendeu por quê Porque são servidores virtuais então atenção aqui atenção aqui em
mim Imagine-se que o servidor a que compartilha a mesma máquina física do Servidor B tem um pico de acessos então muita gente acessou ele ou então teve algum ataque hacker nele mesmo se esse servidor a que é um servidor que está dentro do Servidor físico vinha cair tiver algum problema isso não vai afetar em absolutamente nada o servidor B que tá na mesma máquina física eles estão separados porque embora são servidores que compartilham dos mesmos recursos Físicos cada um deles tem um recurso virtual separado para ele beleza então para você entender mais uma vez vamos
fazer mais um um pequeno exemplo aqui imagina um servidor físico com 100 GB de memória RAM e você cria dentro desse servidor de 100 GB de memória RAM um outro servidor com 50 GB de memória RAM e um outro servidor com 50 GB de memória RAM só que são dois mini servidores dentro desse servidor grandão desse servidor físico o que acontece num Servidor de 50 GB de memória RAM imagina que aconteceu uma explosão de acessos e ele tá usando toda a memória o outro de cima não afetou em nada esse é o ponto E aí
qual que é a grande vantagem disso que por conta de ser um servidor virtual ele é muito mais barato ele é como se fosse um servidor dedicado da mesma forma só que por ser um servidor virtual é muito mais barato mais uma vez pra gente entender isso aqui na prática vamos lá então agora na nossa ilustração Que noss essa comparação dos prédios imagine agora não apenas um prédio mas imagine um condomínio que tem vários prédios no caso do Servidor privado virtual que é a VPS detalhe ó é VPS não VPN Tem muita gente que fala
VPN mas não é VPN não VPN é outra coisa que não tem nada a ver isso aqui é VPS gravou então beleza estamos lá no nosso condomínio que é a máquina física que é o computador o servidor físico Imagine que o prédio um é o seu prédio ali a sua VPS Você é dono dela mas de repente acontece um incêndio no prédio número três o que que acontece presta atenção Eles estão no mesmo Condomínio Eles estão no mesmo Condomínio na mesma máquina física mas são prédios diferentes então ele não afeta o primeiro prédio entendeu então
uma outra máquina virtual que tá ali dentro não vai afetar em absolutamente nada a máquina virtual que está no primeiro prédio dessa forma eu te garanto que VPS é a melhor escolha para Você e e pro seu cliente inclusive tá Por que que eu tô te falando isso aqui porque veja bem é um serviço extremamente seguro você tem controle sobre todos os sites que estão no seu computador ali na sua VPS no seu servidor isso por um preço muito mais barato do que você contratando um servidor dedicado já já vou te falar um pouco mais
sobre valores tá e eu garanto para você que é exatamente por esse motivo que VPS é a melhor escolha para Quem quer trabalhar com criação e venda de sites porque pode te trazer escala e recorrência você tem tal você tem absoluto controle sobre todos os recursos do Servidor E aí mais uma vez eu tenho que ressaltar isso aqui porque ninguém ninguém fala sobre isso aqui você vai procurar aí sobre assunto de criação de sites a mais de 90% dos players que estão aí que se dizem e entendidos na criação e venda de sites vão te
indicar serviço de hospedagem com O link de afiliado deles não é porque é mais F cara não é difícil configurar a VPS tem gente que pensa assim Ah mas isso aí da ISO ser muito difícil cara não é em 15 minutos é possível configurar uma VPS quando você tem aqui o procedimento correto e é coisa simples de verdade coisa simples não vai te dar bucha com manutenção você consegue ativar backup de forma automática extremamente seguro muito mais seguro do que colocar um site numa hospedagem Compartilhada só para você ter uma ideia tem sit que tá
dentro de hospedagem compartilhada vazio site vazio numa hospedagem compartilhada que do nada pega vírus vem lá com problemas de segurança justamente por causa desse conceito de recursos compartilhados uma coisa que não acontece na VPS beleza eu ti garanto que essa aqui é a melhor escolha para quem quer escala e recorrência nesse negócio e além de ser a melhor escolha para o seu cliente no Quesito de velocidade e de segurança também é a melhor escolha para você e eu vou te falar isso aqui agora por causa de uma estratégia que mais uma vez as empresas de
hospedagem compartilhada por aí devem me odiar por causa disso aqui mas eu vou falar não tô nem aí vou falar a verdade pura e na reta para você vamos lá eu quero te contar o que acontece comigo tá em um dos meus servidores que eu tenho eu eu já cheguei a colocar 300 sites de clientes em uma VPS que eu Tenho vamos lá então 300 sites de clientes mais de 300 na verdade né e eu cobro sabe quanto por ano para mim colocar cada um dos Sites dos clientes lá eu cobro uma média de 300
a R 350 Tá mas vamos dizer aí que eu padronizei nos 300 Então esse é um preço antigo que eu cobrava depois eu subi o preço né claro com passar do tempo você pode cobrar mais os seus clientes mas vamos bater o martelo e vamos dizer que seja 300 tá é o seguinte pensa um pouquinho 300 sites Em uma máquina em uma VPS que você cobra r$ 300 por ano cada site então 300 x 300 quanto que dá dá R 90.000 por ano que você recebe de forma bruta simplesmente por oferecer um serviço próprio de
hospedagem por você saber configurar uma VPS e colocar o site dos seus clientes ali ao invés de indicar uma empresa de hospedagem compartilhada Beleza então esse aqui é o que entra de dinheiro bruto Ok mas aí qual que é o custo então para você Conseguir manter uma VPS que suporte aí cerca de 300 sites agora eu vou te falar o custo disso aqui o custo para uma VPS de 300 sites é de aproximadamente $0 por mês para você manter essa VPS detalhe tá é possível até colocar mais sites Se você souber construir eles de forma
otimizada tudo bonitinho e dependendo da configuração do site Ok mas eu vou chutar uma média de $0 por mês inclusive sobra espaço maravilha então $0 por mês vamos multiplicar isso aqui por 12 meses Pra gente chegar no custo anual então $60 x 12 meses dá um total de $20 por ano para você manter a sua VPS com 300 sites o custo anual $720 Beleza agora a gente vai transformar isso aqui de dólar para reais pra gente entender o custo em Reais Vamos chutar que o dólar esteja r$ 6 tá ele tá um pouco abaixo disso
mas vamos ser pessimista aqui e Vamos chutar para cima vamos dizer que ó seja equivalente a R 6 na cotação beleza se For isso aqui se ó for igual a R 6 então R 720 por ano vezes r$ 6 na cotação do dólar dá um total de custo presta atenção em mim dá um total de custo de r$ 320 por ano de custos para você manter uma VPS de $0 capaz de suportar cerca de 300 sites para cima Beleza agora é só a gente fazer um cálculo pra gente saber quanto de lucro que sobrou disso
aqui e atenção porque ó isso aqui mostra como é Uma mina de ouro você saber configurar sua VPS quanto que dá o faturamento menos o custo atenção agora é só a gente fazer os cálculos aqui ó se você pega 90.000 de faturamento Ou seja que entrou R 90.000 menos o custo para manter de 4320 São cálculos anuais tá 90.000 de faturamento anual menos 4320 de custo anual livre lucro anual no seu bolso só de oferecer o serviço de hospedagem 85.000 680 então r 8 5.680 livre lucro no seu bolso simplesmente por você ter o seu
serviço de VPS e você oferecer essa hospedagem PR osos seus clientes você tá ligado como isso aqui é uma mina de ouro isso aqui é fora aquilo que você ganha para criar o site pro cliente isso aqui é só de você oferecer hospedagem para ele você tá entendendo o tamanho da mina de ouro que existe em você saber configurar esse serviço de hospedagem e vamos lá vamos vamos mais ainda vamos dividir Esse valor de 85680 por ano por 12 meses pra gente saber uma média mensal Olha só vamos dividir 85.600 80 dividido por 12 meses
dá livre só de lucro tirando já os castos tá que é o Casto que é o custo para você manter a VPS só de lucro R 7.140 por mês de lucro livre simplesmente por oferecer o seu serviço de hospedagem ainda te digo mais te digo mais 300 sites você vai com o passar do Tempo você Vai acumulando porque depois que termina um ano o cliente vai ter que renovar para manter o site dele online então ele vai te pagar mais R 300 Só que nesse meio tempo você vai atender mais clientes e você vai aumentando
a quantidade de sites na VPS ao invés de 300 No outro ano você pode ter 500 No outro ano você pode ter 800 e assim por diante e detalhe todos os anos os clientes vão renovando com você para você conseguir manter os sites deles no Ar na internet agora você tá entendendo porque é que ninguém fala sobre isso aqui e eu tô te trazendo esse conteúdo as empresas de hospedagem compartilhada por aí me odeiam me detesto mas eu não tô nem aí você sabe por quê Porque eu não vou indicar serviço ruim não vou indicar
serviço de dagem compartilhada porque eu sei que não é a melhor solução eu não tô interessado em ganhar dinheiro com comissão vendendo porcaria eu tô te indicando aqui uma coisa que realmente é O melhor que realmente presta não só pro seu cliente ter mais qualidade no serviço que ele vai ter de hospedagem mais segurança mas também para você ter recorrência no seu negócio então meu amigo minha amiga Valorize esse conhecimento que eu tô passando para você porque ninguém aí é capaz de passar um conhecimento como esse que eu tô te passando e quais são as
principais empresas de hospedagem que eu te indico hospedagem VPS tá a as brasileiras não São as melhores tá Existem algumas brasileira mas cara não vai nessa confia no salão eu tô falando a verdade para você as melhores são as Americanas dentre elas tem três daqui ó essas três empresas que eu estou te indicando que é a digital Ocean essa primeira a lodde e a vter tá então L node então só para você saber como é que escreve é l i n o d e linode e a outra que é a vooter é vul TR e
detalhe os planos de VPS são dinâmicos olha só Aí que eu coloquei na Tela para você ó a partir de 6$ você já pode começar com um plano de VPS então eu falei para você que uma das minhas VPS custa $0 por mês mas se você não tem $0 por mês para você começar você pode começar com uma VPS de 6 por mês e detalhe os planos são dinâmicos O que que significa os planos serem dinâmicos e a qualquer momento com apenas um clique você pode aumentar os recursos da sua VPS então o plano mais
básico começa a partir de 6 por mês mas Digamos que você encheu de site lá agora você precisa de mais recursos precisa de mais potência no seu computador que que você pode fazer com um clique você consegue fazer aquilo que a gente chama de resize né que é fazer o upgrade aumentar o seu plano de VPS ali de uma forma extremamente simples e rápida Mas ó Isso só acontece esse upgrade só acontece quando você você já tiver sites de clientes ali dentro da sua VPS então meu amigo quando você for fazer esse Upgrade aí você
já vai est ganhando dinheiro você pode ter certeza disso você começa com o plano mais simples e aí à medida que você vai colocando sites de clientes ali com um clique você aumenta você melhora o plano para que você consiga colocar cada vez mais sites dentro dessa VPS você entendeu agora por que que esse conhecimento é uma mina de ouro Olá galera tudo bem E me chamo Marcelo sou gestor de tráfego e Web Designer já passei dos 10k graças a Deus e conheci o Marcelo pelo YouTube né Marcelo é um cara certo Marcelo tem um
atendimento top Marcelo me tirou muitas dúvidas ele me ajudou muito principalmente nessa coisa de de eu ter hospedagem oferecer pros meus clientes a minha hospedagem e Ou seja eu deixava muito dinheiro na mesa eh eh esse esse dinheiro que eu pegava dos clientes eu levava eles para hostgator e algumas outras empresas aí eh similares e esse Dinheiro eu passei a não deixar mais na mesa e passei a pegar para mim oferecendo um serviço de melhor qualidade de uma VPS e o Marcelo foi fundamental nisso te passa umas Sacadas fundamentais que ele tem uma experiência monstro
muito maior que a minha O Marcelo é o cara valeu um abraço galera só isso aqui já Valeria o conteúdo dessa aula mas nós temos mais vamos pro próximo conteúdo agora eu quero te apresentar as ferramentas usadas para ar Sites profissionais quais são como elas funcionam vamos lá que eu vou te mostrar isso agora primeiro eu quero te dizer o seguinte nós vamos classificar aqui as ferramentas em duas categorias nós temos as ferramentas que eu considero essenciais para você aprender você já deve começar aprendendo essas ferramentas e nós temos também as ferramentas opcionais não são
obrigatórias para você já conseguir criar sites mas eu recomendo fortemente Que você aprenda porque você vai conseguir elevar a qualidade do seu trabalho e aumentar o ticket ou seja cobrar mais caro pelos seus serviços ok Primeiro vamos para as ferramentas essenciais aqui nós estamos falando de duas que são essas aqui ó o WordPress e o elementor Essas são ferramentas essenciais que na minha opinião todos os que trabalham com criação de sites deveriam ou devem saber mexer nessas ferramentas e eu vou te explicar que Elas são e como que elas funcionam Tá então vamos lá vamos
começar com o WordPress só para você ter uma ideia mais de 43% dos Sites na internet inteira atenção aqui comigo mais de 43% dos Sites na internet inteira são criados usando a ferramenta do WordPress ela é simplesmente a maior ferramenta de criação de sites do mundo inteiro da onde que você tira isso Marcelo do seu sovaco não é do meu sovaco eu tô tirando Informação gente eu tô te falando com base em dados reais quero dar uma olhadinha em alguns dos Sites que foram criados utilizando o WordPress veja aí ó então o site por exemplo
da Casa Branca nos Estados Unidos então tem gente que acha que WordPress é ferramenta fraquinha né Olha só o site da Casa Branca foi criado utilizando WordPress veja se é fraquinho tá maior potência mundial atualmente quer ver outro site que foi criado com WordPress site da Cantora Kate Perry mais um site famoso o site da Super Interessante da editor Abril então lembra que eu falei lá na aula número um sobre os tipos de site eu falei sobre o site do tipo blog Então esse é um exemplo Esse é um site do tipo blog que foi
criado usando a ferramenta do WordPress beleza mais um exemplo o site do rocken Rio outro exemplo sites da Gisele bint modelo tem n e n n n sites diferentes por aí que foram criados usando a ferramenta do WordPress E mais uma vez como eu te falei não tirei da minha imaginação os dados de que WordPress é a maior ferramenta de criação dos Sites do mundo eu tirei a partir de dados reais por exemplo dá uma olhada nesse link aí que mostra as ferramentas ou seja ou melhor mostra o percentual de sites construídos com as maiores
ferramentas do mundo e o WordPress tá ali ó no topo tá no topo tá vendo aqui ó 43,4 por aqui ó no mês de julho de 2024 43,4 dos Sites no mundo inteiro foi feito com WordPress existem outras ferramentas no mercado por exemplo shopify para fazer loja virtual wix squarespace Jump enfim existe várias outras né Ó webflow o pessoal fala de muito de framer aí mas cara não chega nem não dá nem pu cheiro fala bem a verdade para você olha só a segunda a diferença que já é brutal ó 4,4 da diferença do WordPress
para shopify então não tem jeito WordPress é Líder é o número um e aqui ó está essa informação não não veio da minha imaginação é uma informação real de mercado de campo de batalha quer ver mais uma fonte olha essa outra aqui ó Então essa esse site aqui que é esse inclusive que tá aqui no link que você pode ver também aqui ele mostra o percentual de uso de várias ferramentas dentro da internet essa linha azul que você tá vendo é o percentual do uso da ferramenta com relação a todos os outros Sites da internet
inteira e essa linha vermelha ou esse gráfico vermelho aqui ele é referente o ao percentual dessa ferramenta comparado apenas a outras ferramentas tá então você consegue perceber que o Word press ele está extremamente disparado na frente de qualquer ferramenta usada para criar sites inclusive até mesmo de sites feitos 100% por programação ó aqui como você tá vendo ó ão programadores de plantão veja só aqui a quantidade de Sites feitos somente com programação ainda assim é menor do que a quantidade de sites feitos usando a ferramenta do WordPress mais um motivo para você aprender a utilizar
WordPress inclusive se você for um programador vou te mostrar mais alguns detalhes importantes pelo quais você deve conhecer WordPress se você ainda não conhece e você precisa realmente trabalhar com essa ferramenta tá legal e além de tudo tenho que te dizer que o WordPress ele é uma Ferramenta open source que nós chamamos de open source ou seja de código aberto Isso quer dizer o quê que o uso da ferramenta do WordPress é gratuito você não precisa pagar nada para você utilizar a ferramenta do WordPress Ok é uma ferramenta gratuita a única coisa que você precisa
ter um sistema de hospedagem para você conseguir colocar para você conseguir instalar o programa por assim dizer o software do WordPress no seu site beleza E já quero te avisar aqui uma coisinha bem rapidinho porque tem muita gente que confunde existe wordpress.com e wordpress.org tá wordpress.com é uma outra coisa tem gente que acessa wordpress.com E aí vai ver uns preços lá e vai falar assim ah Marcelo mas não é gratuito nada não Wordpress com é uma outra coisa ali é um sistema de revenda de hospedagens tá a a ferramenta mesmo ela pode ser Baixada no
wordpress.org então tem gente que Confunde tem gente que vai sair da aula aqui vai acessar wordpress.com fala assim já quero criar o site lá mas não não é assim tá wordpress.com é outra coisa wordpress.org onde você de fato baixa a ferramenta e aí será que você precisa Então contratar uma hospedagem para de fato você aprender para você brincar para você mexer cpress não enquanto você tá na fase de aprendizado você não precisa contratar um sistema hospedagem propriamente dito existem Programas que fazem com que o seu computador possa simular uma hospedagem e você consegue instalar e
brincar com wordp ali localmente só dentro do seu computador tá um desses programas de exemplo é o local WP Inclusive tem o vídeo sobre isso aqui no meu canal do YouTube beleza mas o ponto é a ferramenta ela é gratuita e inclusive de código aberto isso significa o quê significa que qualquer pessoa com conhecimento em programação mais Avançado pode entrar dentro da ferramenta ali do do do programa do WordPress do software por assim dizer e fazer os ajustes conforme for necessário então se você vem no mundo programação só um recado rapidinho WordPress ela é uma
ferramenta construída usando PHP e MySQL tá então se você tem conhecimento disso você consegue inclusive entrar e modificar a ferramenta Ok por isso que eu te digo que é a melhor ferramenta que existe beleza mas aí vai ter gente que Vai falar assim ah Marcelo mas eu já mexi com WordPress alguns anos atrás WordPress é um sistema muito engessado Ele só tem alguns temas prontos eu não consigo ter Total Liberdade de criação não consigo modificar o layout como eu quero e eu tenho que dizer o seguinte meu amigo minha amiga Se você pensa dessa forma
eu também pensava assim até alguns anos atrás até quando não existia o elementor que é a segunda ferramenta que eu vou te mostrar agora o elementor Ele é um plugin ou seja ele é uma extensão do WordPress atenção aqui em mim que nos permite criar layouts de forma 100% visual e inclusive se você quiser você nem precisa utilizar a programação Você faz tudo Literalmente com o sistema de arrasta e solta para você montar um site você arrasta os objetos solta posiciona eles Onde você quer e pronto você já montou aquele site você já vai ver
isso aqui daqui a pouquinho na prática na hora que a gente Começar a parte prática da aula tá então se você acreditava que WordPress era essa ferramenta engessada que você não consegue modificar é Provavelmente porque você não pegou a época do WordPress do elementor que é uma extensão que a gente coloca né dentro do WordPress ou seja um plugin que a gente instala forma eu te garanto que o WordPress elementor é a melhor combinação e pro pessoal que acha que construir um site com WordPress Elementor vai deixar o site lento ah não mas o elemento
ele gera um monte de código interno vai ficar sobrecarregado cara não é assim se você souber trabalhar de forma otimizada utilizando WordPress elementor você sim consegue resultados como esses aqui ó veja só Então essa aqui é uma nota de velocidade de abertura de um de um dos Sites que eu fiz aqui de vários né E olha só nota 99 nota máxima de velocidade de abertura você consegue sim apenas usando o WordPress e o elementor Pois é meu amigo não tem desculpa não tem essa história de que WordPress é lento que ele deixa o site devagar
não talvez não seja você que não sabe exatamente como que você pode fazer essa otimização mas sim olha só e não é um site apenas são vários olha um outro exemplo aqui de um outro site que eu fiz e uma outra imersão olha um outro exemplo aqui que é esse site que você viu para entrar nessa imersão de aulas tudo com nota máxima Nota 100 Nota verdinho no talo de rápido o site então não tem essa conversa de que fica lento entende por isso que eu te digo que usar WordPress e o elementor é a
melhor escolha possível para quem quer trabalhar com criação e venda de sites e por esses e vários outros motivos primeiro porque são milhões milhares milhares talvez até bilhões de sites que existem construídos usando essas ferramentas isso significa o quê que existem muitas diferentes integrações Várias ferramentas do mercado criam plugins criam extensões que podem se integrar com WordPress elementor funciona com absolutamente quase que tudo tá mais de 9999% das integrações é possível fazer com WordPress elementor Além disso como eu te mostrei nesse sprints é altamente o projeto para ele pensa na bucha no problema que é
se o cliente Entra lá e Mexe numa linha de código que ele não sabe o que ele tá fazendo se você Trabalha com programação você sabe muito bem que isso pode quebrar o site inteiro agora quando você trabalha com WordPress e o elementor esse risco é praticamente nulo já que você vai entregar um dashboard você vai entregar um painel pronto visual fácil e intuitivo para que o seu cliente tenha acesso e consiga fazer algum tipo de modificação se ele quiser você de fato você tira as rodinhas da bicicleta do seu cliente Imagina só se ele
quisesse simplesmente Talvez mudar o texto de um título no site dele imagina só ele ficar entrando em contato com você você tem que abrir o projeto inteiro caçar no meio daqueles milhares de linhas de código naonde que tá para você modificar e depois entregar para ele muito mais fácil quando você trabalha com WordPress elementor porque você entrega um painel visual pro cliente é tudo de forma fácil de mexer depois de pronto eu vou te mostrar inclusive isso aqui já já na parte Prática da aula mas o cliente mesmo consegue ele entrar e com poucos cliques
ali consegue fazer a mudança que ele precisa você tira a rodinha da bicicleta do seu cliente você dá autonomia para ele além de entregar um projeto de maior qualidade Ok então por isso você deve sim conhecer e trabalhar com essas ferramentas Ok mas ainda tem mais vamos falar agora da segunda categoria que são as ferramentas opcionais que eu recomendo que você aprenda quais são Essas ferramentas primeiro é o figma e segundo é o Photoshop Então para que que serve vamos lá o figma Ele trabalha com Como diz a própria legenda aqui protótipos de sites Então
veja bem você tem a opção de lá e desenvolver direto o sites no Word Prise elementor é possível de você fazer dessa forma se você quiser mas eu recomendo atenção aqui em mim eu recomendo que você antes de fazer lá direto no WordPress elementor você cria um protótipo visual desse site E aí você Vai utilizar essa ferramenta que se chama figma tá o que que ela faz ela é uma ferramenta gratuita você não precisa nem instalar no seu computador se você não quiser funciona direto no navegador direto no Google Chrome que eu recomendo que você
faça eu recomendo que você crie esse protótipo tá é como se fosse um rascunho do site visual só pro seu cliente aprovar o visual E aí depois você vai lá e você implementa ou seja você deixa o site no ar utilizando o WordPress e o elementor é uma boa prática Tá mas como eu falei é opcional se você não quiser trabalhar dessa forma você consegue diretamente fazer no WordPress elementor Sem problema nenhum beleza a segunda ferramenta que eu te indico também é opcional trata--se do photoshop e o Photoshop serve para quê para você editar as
imagens dos site Então quando você vai criar um site espera-se que não seja só um site de texto muito provavelmente na grande Maioria das vezes o site vai ter também imagens pode ter logo do seu cliente pode ter imagens de fundo e alguma coisa do tipo né E aí eu recomendo que você saiba uma ferramenta de edição de margens para você conseguir fazer a manipulação necessária Eu recomendo que você trabalhe com essa ferramenta aí que é o Photoshop porque ela é na minha opinião a melhor ferramenta do mercado inclusive como eu falei aí anteriormente se
você não precisa de uma máquina super Potente para você rodar o Photoshop tá claro que numa máquina que tem um pouquinho menos de memória talvez você tem que ter um pouquinho mais de paciência porque ela vai travar um pouquinho mais mas é só você ter paciência Eu recomendo Tá mas de qualquer maneira o princípio por trás da coisa é editar imagens você conseguir fazer edições de imagens então se você não quer utilizar o Photoshop que é uma ferramenta paga não é caro tá é cerca de R 40 por mês alguma coisa assim para você utilizar
o Photoshop de forma legal enfim de qualquer maneira o princípio é você você editar imagens e aí se você não quiser gastar essa mensalidade com Photoshop nós temos alternativas gratuitas vou te mostrar aqui algumas delas então tem três alternativas aqui que eu te indico primeiro delas é o photopia o que que é o photopia ele é quase que a mesma coisa que o Photoshop só que ele funciona de forma online você Consegue abrir o site do photopea e você mexe no Photoshop de maneira online ele tem alguns recursos a menos do que o próprio Photoshop
tem um pouquinho de coisa a menos assim dá para começar que caso alguém não queira trabalhar de fato com Photoshop também é possível tá e Existem várias outras ferramentas também que estão aí no mercado que são gratuitas para você detar imagens o próprio canva tá então ele é um site também que permite você fazer edições de Imagens Claro que mais limitado do que o photoshop mas é gratuito dá para começar né como eu falei o princípio é você saber editar imagens e também tem um outro programa que é o jmp que ele também é uma
versão gratuita de um editor de imgens com bastante recursos Beleza feixou selão então entendi que essas são as ferramentas que eu preciso aprender para mim criar site profissionais são as ferramentas mais usadas no mundo as melhores que existem Mas talvez você que já seja programador web já Trabalhe com programação ou até saiba alguma coisa de html CSS JavaScript Talvez esteja pensando assim Ah mas então eu joguei todo esse conhecimento fora não vai servir para nada calma calma calma tá eu também vim do mundo da programação então eu entendo Exatamente isso inclusive quando eu fiz o
meu curso técnico como eu mostrei lá na aula número um da ssão eu comecei fazendo sites com HTML CSS tá levou um Tempo até eu descobrir como que funcionam essas ferramentas que eu vou te apresentar E aí talvez você pergunte o seguinte então será que eu não devo aprender programação posso usar só essas ferramentas Olha eu vou te falar a verdade você consegue fazer sites só com essas ferramentas mas mas eu indico que você mesmo assim não deixa a programação de lado você deve sim aprender programação mas num segundo momento ela deve ser uma coisa
que você vai aprender Depois para aumentar aumentar as possibilidades coisas que você pode fazer por exemplo quando você aprende CSS que é uma linguagem de programação web você consegue fazer alguns efeitos especiais no botão alguma coisa do tipo mas não é obrigatório para você começar e inclusive para você vender sites até mesmo para você chegar até aos 10.000 por mês é possível chegar até menos 100 programação tem alunos que já fizeram isso mas você não deve deixar de Aprender só que num segundo momento beleza E por que que você não deve começar aprendendo programação para
depois você aprender essas ferramentas eu vou te falar alguns motivos o primeiro motivo deles do qual você não deve começar na criação de sites através da programação é que primeiro a curva de aprendizado é muito mais longa tem gente que fica aí 2 3 4 anos na faculdade para aprender programação talvez pegar bem o jeito e aí começar a fazer alguns Layouts começar a fazer algumas coisas mais simples mas de verdade não é necessário com essas ferramentas que eu vou te mostrar e já já nós estamos pertinho da parte prática da aula você vai ver
que tudo é feito de maneira visual e muito muito rápido você em poucos dias talvez poucas semanas Você já consegue pegar bem o jeito dessas ferramentas e colocar a mão na massa fazer a roda girar lembra o objetivo aqui é a gente não esperar a perfeição Para começar a gente começa com aquilo que a gente tem nas melhores circunstâncias possíveis E aí depois a gente vai melhorando tá quem quer dá um jeito quem não quer dá uma desculpa e inclusive você pode vender o seus primeiros sites sem usar a programação isso já vai dar um
ânimo para você continuar nessa área E aí de pois posteriormente a medida que você vai aumentando seus conhecimentos Aí sim uma hora você chega na programação tá legal Que é uma coisa que demora mais tempo para você pegar bem o jeito ok outro motivo pelo qual você não deve começar na criação de sites por pela programação é que você vai ter mais lentidão para produzir um site É isso mesmo você vai demorar mais se você fizer um site 100% por programação Então por que que você demora mais porque veja bem você tem que muitas vezes
ir lá fazer várias linhas de código Salva para você você vê como é que ficou e às vezes dá um erro nessa Linha de código até você encontrar o erro quem trabalha com programação Sabe às vezes você fica horas para descobrir que faltava uma vírgula para você conseguir completar aquele código corretamente e esse é o motivo pelo qual o código não funcionava então quando a gente pensa do ponto de vista de negócio isso às vezes não é tão viável o viável é o quê a gente entregar os projetos o quanto antes você entrega o projeto
pro seu cliente você já tá livre para pegar Outro é linha de produção meu amigo mais eh produtividade resulta em mais dinheiro depois então se você perder muito tempo ali fazendo tudo 100% pela programação você vai conseguir atender muito menos clientes você vai ter que acabar cobrando muito mais caro vai ser mais difícil porque você vai atender pra sua hora valer aquele tempo que você tá trabalhando Você precisa cobrar extremamente mais caro e às vezes isso Foge da alçada quando você trabalha de uma forma mais inteligente com relação ao gerenciamento do seu tempo você entende
que essa é a melhor solução você aprende Primeiro as ferramentas que eu indiquei e depois você aprende programação para você fazer uma coisa outra mais no site quando você já tiver manjando inclusive fazendo dinheiro tá outro motivo para você não começar pela programação na criação do site é que a manutenção é muito mais complicada como Eu falei aqui imagina só imagina só se o cliente precisa de uma mudança pequena por exemplo mudar a cor do texto e aí até ele encontrar na linha de código na onde que ele vai conseguir mexer isso fora a chance
dele mexer e dar cagadinha né que você sabe se você trabalha com programação você sabe que isso é muito possível ou então ele vai ficar dependente de você toda hora para para mexer uma uma um palitinho no site ele vai precisar chamar você e aí você vai Ter que parar tudo que você tá fazendo para ir lá e fazer a mudancinha que o cliente pediu Então não é viável tá não é viável quando você trabalha com essas ferramentas você já tira as rodinhas da bicicleta do seu cliente você entrega o negócio pronto você pode depois
que terminar o trabalho gravar a tela do seu computador e fazer um pequeno tutorialzinho mostrando para ele ou até mesmo fazer um manualzinho um PDF alguma coisa do tipo mostrando como é que ele Faz mudanças simples mudanças corriqueiras ali no ses por exemplo mudar a cor de um texto mudar o o link de Botão uma coisa ou outra dessas pequenininha que você consegue fazer de forma visual e já já vou te mostrar isso aqui na prática tá esse é mais um motivo uma outra razão pelo qual você não deve começar na criação de sites pela
programação é que você consegue dar um foco maior na qualidade visual do seu site E por que que eu tô te falando que Você consegue dar um foco maior na qualidade visual do seu site não só na qualidade visual mas qualidade dele como um todo inclusive estrutura do site a otimização Veja bem se você trabalha na programação muitas vezes que que você tem que fazer você tem que ficar ali e caçando Naquele monte de de linha Naquele monte de código onde é que tá um detalhezinho que você precisa acrescentar às vezes uma tag que você
esqueceu de fechar às vezes Ah um um um Pontinho que você esqueceu ali na classe do CSS alguma coisa do tipo e você fica ali focado nisso na parte técnica e aí você acaba deixando um pouco de lado aquele foco entregar uma coisa que enche o olho do seu cliente de tão bonito que é aquele site já quando você trabalha com essas ferramentas de forma visual você não precisa se preocupar com esses detalhes técnicos isso aí é só cereja do bolo você se preocupa muito mais na qualidade e na estrutura como um todo Que você
já tá fazendo o quê você tá arrastando e tá vendo como é que tá o resultado final você não precisa ficar salvando para depois você ir lá e ver como é que tá ficando salva e tem que ver como é que fica seria esse o caso na programação na maioria das vezes então você precisa salvar o código para você atualizar a página e ver como é que fica salva o código atualiza a página para ver como é que fica ali não aqui com essas ferramentas que nós vamos mexer na Prática você arrasta solta ficou bom
ótimo não ficou ali mesmo de forma visual você já arrasta um pouquinho mais para outro lado e assim por diante tá então você consegue sim ter um foco maior na qualidade do trabalho Ok esse é mais um motivo e mais um outro motivo e esse aqui é muito importante que eu tenho para te falar tá atenção aqui em mim agora você que trabalha com programação ou Você que acha que isso aqui é bobeira é o seguinte se você não Quer aprender essas ferramentas aqui pela ambição de ter mais conhecimento eu vou te dizer uma coisa
aprenda por medo sabe por que que eu tô te falando para você aprender por medo porque meu amigo essas ferramentas aqui WordPress elemental Já é mais de 43% da internet isso aqui só tá subindo mais e mais essas ferramentas estão se tornando cada vez mais o topo da internet e isso faz com que aqueles que ficam da forma arcaica de querer fazer tudo 100% por Programação por achar que que é mais seguro por achar que é mais rápido sendo que essas ferramentas PR elementor são as melhores esse pessoal que fica 100% pela programação tá ficando
para trás e eu não falo isso aqui sem provas você sabe que tudo que eu tô falando aqui eu tô te falando e tô te provando Então vou te provar mais uma vez uma coisa olha só esse sprints aqui ó Eles são de alguns dos grupos de program Eu participo de vários grupos por aí né Tem grupo de Programadores inclusive que eu participo programadores web e dá uma olhada só no que alguns desses programadores Estão dizendo em um desses grupos que eu participo Veja só o primeiro print aqui ó querem diminuir o tempo de desenvolvimento
das páginas de 5co dias para 15 horas quanto mais página mais dinheiro para eles Então esse foi o comentário de um programador atenção aqui em Mim Esse foi o comentário de um programador que trabalha em uma agência E ele tá dizendo que o pessoal da agência está querendo diminuir o tempo de produção de uma página exatamente pelo quê porque utilizar 100% na programação leva muito mais tempo agora veja o segundo print é vão fazer um layoff e mudar as LPS ou seja as Landing pages que é um tipo de site que eu mostre na aula
um de react para algum page builder então o que que é o react react é uma linguagem de programação JavaScript tá para algum page builder o Que que é um page builder o elementor é um page builder um construtor de páginas então estão querendo parar Olha só olha só olha só então querendo parar de fazer página na programação e querendo utilizar um Construtor pronto que é o próprio elemento acelerando o desenvolvimento não precisam mais de devs ou seja de desenvolvedores programadores pessoas que trabalham 100% apenas com programação os próprios designers podem fazer 90% das LPS
das Landing pages Então olha só o que o mercado tá andando nessa direção então por isso meu amigo minha amiga que acha que fazer sites 100% na programação é melhor cara se você manter uma atitude arcaica não tem jeito vai ser passado O mercado inteiro tá caminhando nessa direção não existe razão não existe motivo pra gente não utilizar essas ferramentas do WordPress elementor E aí você vai me dizer assim ah Marcelo mas eu gosto de mexer na Linha de código eu sou um cara que gosta de programação tá legal se você gosta eu tenho uma
notícia para você se mesmo assim você quer utilizar código nos seus sites a notícia é que o WordPress e o elementor também aceitam o uso de códigos como eu te falei antes trata-se de uma ferramenta open source tá então WordPress é uma ferramenta open source de código aberto qualquer um que tem conhecimento de programação pode entrar dentro do projeto e manipular o código Interno como bem entender entendeu Então olha só não existe motivo não existe razão para não utilizar as ferramentas do WordPress do elemento a mesma coisa de você querer apertar um parafuso com a
com a chave de fenda sendo que você tem a sua disposição uma parafusadeira não tem motivo para você não usar é muito mais eficiente muito mais inteligente do ponto de vista de negócio você utilizar a furadeira utilizar a para fus Madeira ao invés de fazer faz querer fazer tudo Na unha não tem porque Reinventar a roda O que você pode fazer é aprimorar o uso dela tá mas como eu te disse comece usando as ferramentas que eu indiquei eu te garanto com toda a certeza do mundo que é a melhor forma possível de começar e
Inclusive eu sei que você agora tá muito ansioso tá muito ansiosa pela por um dos pontos altos aqui da nossa imersão de aulas que é a parte prática onde a gente vai colocar a mão na massa e vamos criar um projeto juntos então Bora pra tela do meu computador que eu vou te mostrar tudo agora na prática muito bem então estamos aqui na prática eu vou te mostrar aqui esse site que nós vamos criar juntos aqui e você vai ver como é que funciona tá primeiro eu quero te falar sobre as ferramentas lembra que eu
falei sobre ferramentas opcionais falei lá sobre o figma e sobre o Photoshop não lembro se Eu mencionei ou não mas o figma é uma ferramenta que ele funciona tanto direto no seu navegador Se você quiser não precisa instalar nada no computador ou também tem a opção de você baixar o aplicativo do figma e instalar ele pro computador tá bom nesse caso aqui eu tô usando ele aqui direto no navegador para você ver realmente como ele funciona inclusive de uma forma muito fluída tá ele é gratuito ele é leve ele é muito muito muito bom mesmo
tá E aí o que que acontece Como eu disse o figma aqui ele serve pra gente fazer protótipos né dos nossos sites então eu Crio aqui um rascunho uma parte visual que é o que eu acabei de fazer aqui que eu vou te mostrar Inclusive a gente vai criar esse site aqui já já E aí eu gosto de fazer isso por quê Porque eu tendo esse protótipo aqui eu já sei como é que vai ficar o visual e depois na hora que eu faço lá no elementor ele tende a ficar muito melhor a qualidade tá
legal Além de que a gente consegue trabalhar de uma forma mais fluida mas ressalto que isso aqui é meramente opcional se Você acha que você consegue fazer direto lá no elementor sem precisar fazer esse rascunho do site aqui antes também é possível e sobre a outra ferramenta que eu te falei também que é opcional que é Photoshop eu gosto de usar Photoshop para criar imagens porque ó essas imagens aqui eu já editei previamente né pra gente para mim te mostrar aqui na prática como é que é o criação do site no elementor mas eu editei
essa imagem aqui previamente usando Photoshop que é Uma ferramenta de edição de imagens né Não precisava ser o Photoshop você pode usar outras Como eu disse anteriormente mas eu gosto do Photoshop porque eu consigo fazer esses efeitos bacana fica tudo bonitinho né percebe como ele fica com um visual bem legal quando você também entende aí um pouquinho de manipulação de imagens é legal sim e agrega valor pro seu serviço pode ter certeza disso agora falando um pouquinho sobre o WordPress tá então esse aqui é o Painel do WordPress que é o que a gente vai
usar aqui paraa criação dos Sites tá e como é que funciona esse painel a grande chave do WordPress aqui ele tá nessa barra aqui à esquerda Então essa barra aqui ela tem várias opções tá então Lembra que eu falei que é possível criar blogs por exemplo né então se você for ver ele tem essa aba aqui ó de posts tá E essa aba aqui de posts ela serve se eu quiser criar matérias dentro do meu site por exemplo eu posso vir aqui em Todos os posts e aqui eu poderia adicionar uma matéria se eu quiser
tá E aí ele tem categorias lembra que eu falei de categorias e post aquela coisa toda aqui do lado esquerdo também nós temos a biblioteca de mídia então Lembra que eu falei que aqui dentro do site é Onde ficam armazenadas a as mídias do site como por exemplo imagens e enfim aquilo que for mídia né Por exemplo música PDF alguma coisa do tipo você consegue colocar aqui dentro desse Campo Tá E aí nós temos também aqui a opção de páginas então o que que são essas páginas tá aqui literalmente são as páginas do site lembra
que eu f falei de site institucional por exemplo que ele possui várias páginas diferentes então ele tem a página de contato a página quem somos aquela coisa toda então se o seu site tem multi páginas aqui você consegue criar todas essas páginas proos sites tá beleza só mais uma coisinha aqui ó aqui nós temos essa aba de Plugins então aqui a gente consegue colocar as eh eh as extensões por assim dizer como se fosse aplicativos que você instala aqui dentro do seu WordPress né Então imagina que seu WordPress por exemplo é o sistema operacional do
seu celular seja um um iOS se você tiver um Apple ou um Android se você tiver um um outro tipo de se uma outra marca do celular né Então imagina que o WordPress ele como se fosse esse sistema operacional só que o sistema operacional Ele precisa de aplicativos para ter funcionalidades adicionais e o WordPress aqui você consegue instalar esses aplicativos né instalar só que aqui a gente não chama de aplicativos aqui a gente chama de plugins certo e o elementor é um plugin que a gente instala aqui dentro do WordPress né então por exemplo se
eu vi aqui em plugins ó e adicionar plugins eu tenho aqui uma loja de aplicativos vamos dizer assim do WordPress né e aqui eu consigo Pesquisar por vários plugins por exemplo vou pesquisar pelo elementor tá E aí você consegue instalar ele no site aqui ó então é esse aqui ó esse aqui é o elementor tá aqui nesse caso eu já instalei antes né para para adiantar a aula mas você consegue instalar ele dessa forma aqui você simplesmente pesquisa aqui depois clica em instalar agora e você consegue instalar é esse aplicativo vamos dizer assim dentro do
WordPress do seu site tá para você Conseguir construir o site beleza e aí quando você faz isso ele já abriu essa opção aqui de elementor né então isso significa o quê que ele tem é o elementor instalado no site mas aí Existe aplicativo para tudo quant é coisa disponível se você quiser pegar é possível instalar aplicativos aqui para cuidar da segurança do seu site alguns outros aplicativos ajudam é em questões de Performance em questão de velocidade de abertura do site e assim por diante Né Beleza mas vamos lá eh agora eu vou aqui em páginas
todas as páginas e a gente vai de fato criar então vamos colocar a mão na massa e usar o elementor aqui você vai ver exatamente como ele funciona pra gente fazer esse site aqui que eu já deixei eh já deixei o rascunho dele pronto no figma né Beleza como eu falei não é obrigatório você fazer esse rascunho você faz se você quiser mas eu recomendo que você faça porque aí depois o trabalho é é só De repassar no elemento e a qualidade final tende a ficar melhor tá bom mas não é obrigatório Fechou então vamos
lá então vamos adicionar aqui uma nova página eu vou colocar o nome dessa página aqui como por exemplo esse nome aqui ó malhando em casa né que é o que a gente criou aqui de exemplo Tá então vamos colocar aqui malhando em casa malhando em casa então o que que é essa pagin minha do malhando em casa aqui que eu inventei Então imagina que isso aqui É uma página fictícia né isso aqui essa pessoa não não não tá realmente fazendo um uma página com esse tema mas eu criei aqui só para te mostrar como exemplo
Então vamos imaginar que aqui essa aqui é uma página de captura então Lembra que eu falei que a página de captura aqui tem um formulário e aqui tem um botão que a pessoa clica e ela consegue se cadastrar para assistir uma série de aulas Então nesse caso aqui você tá assistindo uma série de aulas de criação De sites Mas vamos imaginar que fosse uma série de aulas aqui ensinando a pessoa a fazer exercícios na casa então eu inventei esse evento fictício aqui tá E ele tem esses pontos aqui enfim uma página bem curtinha aí ó
uma página começa aqui cara você pode vender aí por como eu falei no mínimo r$ 800 para quem tá começando no mínimo Tá mas eu já vi casos de páginas começa daqui sendo vendidos a mais de r00 r$ 800 tranquilamente fácil tá legal mas vamos Lá vamos continuar aqui então e ó aí aqui é a carinha do wordp tá a primeira coisa que eu tenho que fazer da carinha do elementor desculpa primeira coisa que eu tenho que fazer é clicar aqui nessa nesse navegador aqui embaixo tá E aí eu só vou tirar esse aqui isso
aqui é o cabeçalho e o roda pé do site né então se o seu site tem um menu por exemplo aí você precisa deixar essa parte agora se o seu site tem um rodapé aí você precisa deixar essa parte e assim por diante Tá Mas eu vou tirar isso aqui só pra gente e criar porque nesse caso aqui ele não tem menu Então como o site não tem menu eu tenho que vir aqui em layout da página ó em vez de padrão eu vou mudar pra tela do elemento quando eu faço essa mudança ele vai
recarregar E aí sim ele abriu aqui para mim como uma folha de papel em branco então aqui o negócio funciona de forma visual meu amigo minha amiga então como é que funciona a parada aqui o negócio é o Seguinte Isso aqui é uma folha de papel em branco tá então aqui você consegue criar todo o layout do site então se eu pego por exemplo arrasto um contêiner para cá e e como é que e funciona aqui dentro do elemento aqui funciona com base em contêiners né então um contêiner é como se fosse uma caixa Imagina
é uma caixa e aí você vai colocando os elementos dentro dessa caixa certo então o contêiner é isso Olha só eu vou arrastar um contêiner para cá por Exemplo ó e aí eu consigo definir informação veja bem em vez de eu ficar criando uma div se eu tivesse lá com programação eu simplesmente venho aqui ó mudo a altura ó mudo aqui a largura do conteúdo entendeu então eu tenho essa flexibilidade de trabalhar assim no elementor E aí também Além disso eu tenho aqui o que a gente chama de widgets tá que são o quê são
elementos que a gente usa aqui para arrastar soltar e montar o visual do nosso site Quer ver um exemplo Então vou pegar vamos adicionar um contêiner aqui ó eu vou deixar ele com uma altura mais ou menos assim e eu consigo pegar aqui um objeto por exemplo de título né então ó tá vendo esse objeto de título aqui ó eu clico nele arrasto para dentro do meu projeto e ó ele tá lá entendeu Aí eu consigo pegar esse contêiner ó nas opções dele eu quero centralizar esse título aqui ao centro quero pegar esse objeto quero
deixar um no no centro né Então outra coisa importante n Lembra que eu falei que se você souber de programação você também consegue usar a programação aqui ó então caso você saiba ó Isso aqui é uma tag HTML ó então aqui na tag HTML você consegue mudar o tipo da tag tá então isso aqui é uma coisa mais relacionado com programação tá não vou entrar em detalhes técnicos até porque você não precisa nem saber disso aqui mas é caso você venha do mundo da programação e e acha que o elemento ele É faquinho né então
você tá vendo que não é Você tem liberdade total é beleza inclusive você pode vir aqui em avançado você consegue adicionar código CSS aqui ó aqui dentro você consegue adicionar Opa seu próprio código CSS se você quiser tá então aqui você adiciona esse código beleza mas aí gente tem outras coisas e detalhe isso aqui não é obrigatório eu consigo adicionar várias coisas aqui por exemplo se eu quiser vir aqui e adicionar um botão eu posso Arrastar ele aqui ah eu quero deixar botão Centralizado você vem aqui deixa Centralizado Ah eu quero mudar sei lá a
cor do botão aqui então você pode clicar aqui nessa aba de estilo que tá aqui em cima tá vendo ó e aqui você consegue mudar Ah eu quero mudar quero que esse botão seja por exemplo aqui vamos pensar numa outra cor quero que seja um Cor de Rosa então venho aqui ó coloco o rosa aqui ah eu quero mudar a fonte o conteúdo aqui da fonte do botão então eu Posso vir aqui selecionar a fonte desejada né então vamos pegar aqui por exemplo é a Poppins né que é fonte que eu gosto aqui bem bacaninha
então peguei a Poppins aqui quero aumentar o tamanho da fonte Ó você aumenta aqui ah eu quero aumentar o espaçamento interno do botão Então você aqui ó ah eu quero que para cima ali onde tá o espaçamento interno eu quero que tenha 50 pixels quero que do outro lado fique 100 do outro 50 do outro 100 também tá então só para você Ver ah eu quero mudar a cor de do Rosa quando eu passo o mouse em cima Então você clica aqui ao passar o mouse ó então em vez de ser é essa cor rosa
eu quero que quando eu passe o mouse ele vá pro vermelho Então o que acontece ó quando eu passei o mouse ele foi pro vermelho aí eu quero adicionar um outro objeto aqui quero adicionar uma imagem você arrasta aqui o objeto de imagem ó aí você consegue clicar aqui na imagem subir a imagem do seu computador para cá Enfim tá Ah eu quero duplicar esse objeto clica o botão direito duplicar ó quero e duplicar de novo entendeu ah eu quero tirar então vou clicar aqui ó excluir tá vendo consigo excluir ah mas tem como ajustar
isso aqui para funcionar em qualquer dispositivo para funcionar em tablet para funcionar em celular tem meu amigo é só você clicar aqui ó nesse botãozinho aqui embaixo ó modo responsivel tá então o que que é responsivel é justamente o site ele se Adaptar a outras resoluções se adaptar para celular para tablet então vou clicar aqui em modo responsivel para você ver ó e olha lá eu consigo deixar ele como é que o site está ficando no tablet como é que o site está ficando no celular você consegue adaptar tudo para funcionar em todos os dispositivos
possíveis tá e aqui eu tô mostrando três e Mas você consegue inclusive nas configurações avançadas adicionar mais Ah eu quero editar como é que ele fica Por exemplo num e numa televisão você consegue adicionar outras opções mas aqui eu deixei as padrões que já vem no elementor que são essas três Tá beleza então bem facinho aqui ah is aqui é um objeto de vídeo você arrasta o vídeo para cá Ah você quer que que ele sei lá eu quero que esse objeto aqui Fique é que esse contêiner aqui temha a cor vão pegar uma outra
cor aqui quero que ele fique com a cor nessa cor aqui por exemplo um preto Então deixei ele Preto Ah eu quero que e sei lá eu qu tá vendo que esse objeto ele tá dentro de um de uma largura aqui ó Então vamos deixar o botão aqui por exemplo para ele ficar na largura total que é esse aqui o justificado né Ah mas eu quero que ele venha até o fim da página como é que eu faço você pode vir aqui no contêiner que é esse objeto aqui no qual está todos os outros objetos
dentro e eu posso vir aqui na largura e mudar em em vez de encaixotado né que é que é o quê ele Exatamente dentro dessa caixa por assim dizer eu consigo mudar em vez de encaixotado eu posso mudar aqui de encaixotado paraa largura Total tá então quando eu mudo pra largura Total perceba que agora ele já ficou na tela inteira percebeu ah mas tem um espaci aqui do lado como é que eu tiro esse espacinho é simples você vem aqui ó na opção do contêiner avançado você deixa Zerado aqui ó Então esse aqui é o
espaçamento interno né preenchimento é o espaçamento Interno desse desse objeto né Então olha só agora ele ficou colado Nas extremidades entendeu então Você tem liberdade total de fazer tudo que você quiser aqui ah eu quo colocar o objeto um do lado do outro então você pega esse contêiner aqui ó ele tá na direção o quê Ele tá nessa direção de colocar as coisas de cima para baixo Então eu quero que fique um do lado do outro eu pego e jogo aqui ó olha só se eu clicar aqui um do lado do outro ele fica os
objetos um Do lado do outro eu quero que ele fique aqui no meio da tela que que eu faço consigo mudar aqui para ele ficar no meio tá Ah e um detalhe você consegue até colocar contêiner dentro de contêiner aqui no no elementor tá então se você tiver um layout mais complexo às vezes um detalhezinho você pega pode pegar outro contêiner aqui ó e joga aqui dentro tá ó então eu consigo dentro desse outro contêiner colocar outros contêiners se eu quiser então coloco um Outro contêiner aqui tá não é recomendado você colocar muito muito muito
contêiner um dentro do outro porque é uma das boas práticas de otimização tá então você tem que sempre trabalhar com boas práticas para que seu site é ele abre de uma forma rápida tá Tem gente por aí que acha que simplesmente basta você instalar o plugin de otimização pum o site vai abrir rápido Nem sempre é assim Você precisa aprender algumas técnicas Específicas né que são boas práticas que vão juntas fazer com que o site tenha uma boa performance Tá mas esse é um assunto um pouco mais e avançado Tá beleza então vamos lá vamos
criar esse layout aqui que a gente acabou de fazer aqui ó usando o figma Então vou excluir essa esse container Zinho aqui a gente vai agora criar o layout Tá então vamos lá eu vou clicar no mais aqui para mim adicionar um contêiner esse primeiro que tá aqui ó então que tá aqui dentro do Figma né então é o figma ele é também como se fosse uma um vamos dizer assim um editor né então se você talvez já tem familiaridade familiaridade com Photoshop alguma coisa do tipo você consegue fazer bastante coisa aqui no figma então
ele trabalha aqui com com esses frames você consegue inserir aqui também como se fosse folhas de papel em branco enfim tá bom mas ó vou pegar esse primeiro objeto aqui que a gente consegue editar no figma essa primeira Sessão aqui ó que é essa aqui que a gente criou tá E aí eu consigo ver ó por exemplo que a ela tá sendo e ó Isso que é legal de usar o figma você vê também os tamanhos então eu consigo ver que ela tem ó 1920 por 890 Então na hora que eu for criar um contêiner
lá eu já posso criar o contêiner com o tamanho certo tá Então nesse caso aqui ó ele tem essa imagem de fundo que eu já editei previamente aqui e a gente vai usar né então eu consigo ver todos esses Detalhes Tá bom então vamos lá criar um contêiner que tenha que ele pegue a tela inteira com 890 de altura Então como é que eu faço isso coloquei o contêiner aqui primeira coisa que eu vou fazer eu vou deixar a altura mínima aqui ó então em 890 então ó 890 que é o mesmo que eu usei
lá que ele vai ficar com esse tamanho aqui certo e aí depois eu só vou tirar esse preenchimento para ele não ficar com nada eh aqui em cima nenhum espacinho menorzinho depois disso aqui Eu vou jogar a minha imagem de fundo aqui tá Então como é que eu faço para mim jogar a imagem de fundo que eu usei aqui no meu contêiner é muito simples basta você clicar aqui Ó nesses três pon que tá editando o contêiner depois eu clico aqui em estilo e aqui ó tipo de plano de fundo eu quero selecionar uma imagem
Então feito isso eu tenho aqui a passinha onde tá as imagens né Já deixei essas imagens prontas aqui pra gente usar e eu vou jogar essa imagem para Dentro aqui do meu projeto joguei ela para dentro tá então ela carregou aqui dentro do meu site aí aqui embaixo exatamente onde eu tô aqui ó aqui embaixo tá vendo ó esse botãozinho aqui ó selecionar eu clico nesse botãozinho ó e pronto já defini a minha imagem como imagem de fundo aqui desse contêiner tá aqui eu consigo até ajustar a posição da imagem tudo bonitinho né se ela
vai ficar fixa ou não vou deixar não repetir tamanho eu vou deixar aqui em cobertura Tá Então olha lá como é que tá aqui a sessão inicial do nosso site Por enquanto né que a gente vai fazer agora vamos lá pro próximo ponto né então o que que tem mais aqui ó eu tenho também aqui ó a logo eu tenho a e o texto e eu tenho essa esse formulário tá Como é que eu faço para inserir um formulário cara tem um objeto de formulário aqui dentro do elemento elemento é completo né então ó ele
tem objeto de formulário aqui a gente consegue jogar esse objeto de Formulário para dentro da página né Mas vamos fazer o seguinte vamos começar aqui com a logo primeiro Beleza então e eu vou pegar aqui e vou jogar um objeto de imagem tá que ele vai ser o que eu vou colocar na minha logo vou jogar essa imagem aqui e aí ó aqui eu clico em cima da imagem eu consigo selecionar uma imagem né então Lembra que eu falei que a os arquivos de mídia ficam armazenados dentro do site então aqui já tem aquela primeira
imagem que a gente usou né e Agora eu vou arrastar alô aqui para dentro Prontinho Então já coloquei a logo aqui para dentro do meu site que ela tá aqui cliquei em cima dela aí aqui embaixo eu tenho o botão de selecionar de novo né que você tá vendo aqui cliquei lá em selecionar e aqui ó já tá a imagem do meu logo tá só que tem uma coisa aqui nesse exemplo ela tá alinhada à esquerda Então como é que eu faço para alinhar à esquerda é essa logo ali dentro da minha página também é
simples Eu clico aqui em cima do objeto da logo aí ó aqui dentro de imagem Eu tenho esse aqui no estilo da imagem né O que ten como alinhar ela à esquerda tá então alinhei esquerda quero deixar os objetos no meio da página em vez de ficar aqui em cima que eu façil vou clicar aqui no contêiner e vou selecionar para deixar ele alinhado aqui ó no centro entendeu joguei ele para centro pro centro Ok próximo passo que que a gente vai fazer aqui agora vamos colocar agora esse Texto aqui ó conquiste o corpo do
sonho sem sair de casa então vou copiar esse texto aqui ó que eu já criei ele como exemplo antes e vamos pegar é um objeto aqui ó de título vou jogar ele para cá aqui eu vou colar o texto tá agora a gente vai personalizar Primeiro vou mexer na largura vou deixar mais ou menos como tá aqui né então como é que eu diminuiria a largura desse texto para ele ficar mais ou menos aqui eu posso fazer assim se eu quiser então posso vir Aqui em avançado ó e aqui em largura colocar uma largura personalizada
e eu consigo ó aumentar ou diminuir essa largura posso deixar em percentual posso deixar em Pixel se eu quiser um valor exato né nesse caso aqui por exemplo vamos deixar Pixel vamos deixar 632 pixels por exemplo tá daí ele termina aqui certinho na onde eu quero certo e agora vamos e mudar a cor desse texto aqui então como é que eu mudo a cor desse texto tenho que vir aqui ó em fil Tá vendo aqui fil que significa preenchimento em inglês aqui eu tenho o nome dessa cor que eu usei dei um Ctrl C para
copiar o nome da cor vou vir aqui ó e vou aqui no estilo ó vou mudar a cor para essa cor do desse Rosinha né e a Fonte que eu usei aqui ó que é essa essa letra usada é uma fonte chamada unbound tá tá vendo que essa daqui ó Então essa fonte é uma fonte que tem no Google Fontes que são são fontes gratuitas né inclusive o Google Fontes ele já é Nativamente integrado aqui com o WordPress com elementor então quando eu clico aqui em tipografia eu consigo selecionar qual fonte que é no caso
é a fonte unbounded tá que é essa aqui ó então cliquei aqui em unbounded aqui eu consigo mudar o tamanho da fonte quero que fique Grande quero que fique pequeno então o que eu vou fazer vou deixar no mesmo tamanho que eu usei aqui anteriormente no meu protótipo né então aqui eu usei o tamanho ó de 40 você tá Vendo aqui ó acho que minha imagem tá na frente né deixa eu jogar minha imagem para cima olha lá então aqui tá no tamanho 40 percebeu então que eu vou fazer eu vou deixar também com o
tamanho 40 aqui ó Tá então vamos lá mudar para 40 e nesse caso aqui ó essa fonte ela tá em certo então eu vou deixar também aqui consigo mudar até isso aqui no elementor aqui ó em tá coloquei a fonte beleza tá lá ó o texto do mesmo jeitinho que tá aqui Dentro do figma certo é o que que eu vou fazer agora vamos adicionar esse outro trecho aqui né que é essa esse bloco de texto vamos copiar dar um Control nisso aqui ó nesse texto vamos vir aqui e vamos pegar agora o objeto de
editor de texto aqui tá vendo Então joguei aqui um objeto de editor de texto vou colar esse texto aqui ó Então você consegue inclusive fazer algumas coisas isso aqui como se fosse um wordzince Então você clica aqui ó em tá Ah eu quero deixar aqui ó é em Itálico você consegue deixar aqui em Itálico tá você personaliza do jeito que você quiser incrível né Beleza e aí agora aqui no estilo eu vou mudar a cor vamos deixar a cor no branco né então cliquei aqui em cima da cor vamos puxar ela pro Branco tá E
aí feito isso eu consigo mudar também a largura né então perceba que esse aqui tem uma largura um pouquinho menor Então esse aqui eu deixei 632 esse aqui por exemplo eu vou Deixar uns 500 e quer ver vamos ver quanto que a gente deixa aqui ó Então vou vir aqui em largura e vamos mudar essa largura aqui ó para personalizado aí eu vou diminuir vamos deixar em pixels também gosto sempre de trabalhar em Pixel né que daí fica bem alinhadinho milimétrico né E ó vamos ver quanto que tá mais ou menos aqui ó até o
feito né então fe Ah tá Primeiro vou mudar a fonte né então a fonte que eu usei aqui nesse caso aqui ó é essa fonte aqui que Eu já fiz no protótipo que é a fonte Poppins tamanho 16 tá então eu vou procurar por essa fonte aqui também lá dentro do elementor quer ver ó então venho aqui na fonte do elementor editor de texto mudo aqui para Poppins ó então Poppins certo coloquei Poppins tamanho de 16 que é o que eu deixei elá antes tá E aqui no caso não ela não é negrita vou deixar
em normal mesmo tá bom E aí deixa eu ver ó é eu deixei com uma largura um pouquinho maior Então vamos deixar aqui A largura um pouquinho maior ó aí ó mais ou menos assim 500 vamos deixar 542 só para ficar certinho o valor tá 542 Beleza então olha lá como é que tá ficando ó agora vamos colocar esse formulário aqui como é que a gente faz como eu mostrei já existe um Edit né que é um elemento pronto do formulário vamos adicionar ele aqui então vou vir aqui ó nos elementos né aqui eu tenho
a lista de elementos vou pesquisar pelo form peguei o form arrastei aqui para dentro E aí aqui eu consigo inserir várias opções inclusive esse formulário aqui se você souber de mail marketing alguma coisa do tipo é possível você integrar com todas as ferramentas que existem no mercado Ah é no caso de mail marketing né para quem trabalha uso o active campaign que é uma ferramenta de mail marketing seu cliente usa cara você consegue integrar aqui de forma Nativa você ah quero integrar com meio shimp você consegue integrar existe é é Infinitas possibilidades tá vou clicar
aqui em não quero nenhum desses Campos quero apenas o campo de e meio tá então aqui ó primeiro Vamos diminuir a largura desse formulário né então vou vir aqui no formulário ele tá com deixar com 632 igual deixei esse daqui né então vamos vir aqui na largura vou deixar personalizado ó V mudar para pixels e vou deixar em 632 certo ó 632 de largura fechou agora o que eu vou fazer perceba que ele tá com esse texto Zinho aqui em Cima né esse texto aqu ele é chamado de Label né E aí é o que
tá exatamente aqui então vou pegar esse Label aqui vou apagar E aqui onde tá Place holder é o texto que vai aqui dentro né então aqui vou deixar um outro Bora no protótipo eu não criei né mas eu vou criar aqui um texto e de exemplo Vou Colocar assim ó Digite o seu e-mail certo aí ele já ficou como texto aqui de fundo tá é aí o botão aqui ó perceba uma coisa esse botão aqui ele tá ele não tá embaixo Nesse caso ele tá do lado como é que a gente mudaria isso aqui no
elementor também é muito fácil é o seguinte ó é esse campo aqui onde tá o formulário que a pessoa consegue digitar de fato o e-mail dela aqui tem a largura dele tá então ela tá 100% por isso que ele tá do Canto até o canto Mas em vez de 100% eu vou mudar aqui por exemplo para 60 tá então ó ele já ficou menor agora eu deixo o botão com os outros 40% tá então como é que eu faço isso agora eu clico Aqui em buttons né E aí eu vou editar o botão aqui e
aqui em vez de ser 100% ele fica com 40 né então 60 + 40 vai dar o 100% e ele ficou um espacinho aqui que eu quero tirar como é que eu tiro esse espacinho eu tenho que fazer o seguinte eu tenho que vir aqui ó no estilo tá vendo ó então aqui é o GAP né O que que é um GAP é um espaçamento então aqui eu consigo diminuir esse espaçamento tá vendo ó Ele já vai cortando ali ó ó mais espaçamento menos espaçamento então Mudei aqui pro preto vamos vir aqui na tipografia que
é a fonte que vai ser usado aqui dentro a gente vai mudar de Roboto para Poppins tá então mudei para Poppins vou deixar aqui com 16 pixels é aí aqui é a borda tá então se eu coloco 10 por exemplo aqui ele vai ficar com uma borda grande eu não quero borda aqui no formulário então vou deixar Zerado e esse border radius aqui ele é o arredondamento tá Então imagina que eu quero ó só só para você ver uma coisa Vou deixar aqui Zerado então cliquei aqui deixei Zerado e aqui eu consigo ver como é
que fica o arredondamento de cada um dos cantos por exemplo aqui superior então aqui eu vou colocar 50 ó percebo que ele arredondou esse canto aqui tá aí tem esse outro canto aqui como é que eu faço para arredondar Opa que eu tô na frente né então como é que eu faço para arredondar esse outro no canto aqui eu venho aqui ó em vez de zero coloco 50 tá você consegue eh personalizar como é que Fica o arredondamento tá no exemplo lá eu usei 10 em todos os lados né Ou melhor não é em todos
os lados é 10 aqui né então vou deixar esse aqui com 10 tá esse lado aqui da direita que é esse aqui eu vou deixar Zerado então aqui eu vou deixar zero certo esse outro aqui eu vou deixar Zerado também e esse de baixo aqui eu vou deixar com 10 tá dessa forma ele arredondou só esses cantos aqui esses aqui não tá porque ele vai ficar colado com botão tá só que isso aqui é o Arredondamento do formulário como é que eu faço o arredondamento no botão aí eu tenho que clicar aqui dentro do estilo
do botão tá então buttons ó aí eu vou fazer o arredondamento também do botão Só que no caso do botão eu vou arredondar esses outros cantos aqui ao invés de ser os cantos que eu já arredondei lá anteriormente né vou fazer o seguinte vou clicar aqui em border Radi vamos zerar isso aqui tá e vou mexer com arredondamento aqui ó desses Dois pontos que é exatamente esses dois aqui ó Então vou mudar aqui para 10 ó e vou mudar aqui também para 10 qu ficar com 10 pixels de arredondamento ah não não é esse daqui
de baixo não desculpa é na realidade esse aqui né então é esse aqui que é direita e esse aqui vai ficar Zerado Tá beleza então olha lá ó como é que tá ficando ó percebeu então eu já criei aqui ele como sendo um só né que é o que tá lá no exemplo que a gente fez aqui dentro do figma agora eu quero Mudar outra coisa vou mudar aqui por exemplo o texto né então eu vou colocar o texto quero assistir onde que eu mudo esse texto aqui dentro do do elementor eu tenho que clicar
aqui ó em conteúdo aí aqui ó buttons ó e aqui tá o texto né em vez de send eu vou colocar quero assistir e colocar uma exclamação ó tá vendo ele já mudou o texto do meu botão aqui aí eu vou mudar esse botão vamos deixar ele também com essa mesma cor rosa aqui então vou copiar essa cor vou Clicar aqui no formular ário vou vir aqui no estilo vou vir aqui nos botões e vou colocar aqui a cor tá olha lá beleza a fonte que eu usei aqui também foi a mesma fonte que eu
usei aqui que é aquela unbounded então eu vou clicar aqui na tipografia ó vou pesquisar pela fonte unbounded e olha lá já ficou aplicada aqui no botão também igualzinho tá desse jeito tá que eu tô usando ela em vamos deixar ela em aqui também então vou vir aqui ó em é e o tamanho dela é 16 pixels tá dessa forma que ficou aqui Fechou então olha lá já tem aqui o nosso formulário pronto tá E aí eu posso inclusive colocar vários é detalhes aqui se eu quiser aumentar o espaçamento do botão aquela coisa toda né
então ó deixa eu ver se eu consigo aumentar aqui PR você ver ó consigo aumentar Só que nesse caso ficou maior que o formulário então vou deixar do mesmo tamanho aqui só para manter o mesmo tamanho do formulário tá Tem como a gente é mudar isso Enfim vou fazer o seguinte né se ó detalhe aqui assim desse jeito aqui já funciona se você quiser deixar desse jeito aqui já tá joia tá mas lembra que eu falei que a programação ela não é obrigatória ela te ajuda em algumas coisinhas tá Então nesse caso aqui ó o
elementor nessa situação específica ó ele não muda o tamanho ó Então deixa eu aumentar aqui ó esse aqui é o espaçamento interno do botão nesse caso o elemento ele não muda Isso aqui por padrão tá então o que que eu poderia fazer nesse caso eu poderia usar e um pouquinho de programação aqui né então vou usar só um trechinho de programação só para você ver não era obrigatório mas eu vou mostrar aqui só para você ver que é possível inserir programação dentro do elementor tá então vou clicar aqui em selector por exemplo ó e eu
vou chamar a classe né então ó agora tô falando se você é um programador você tava achando que eu Tava mentindo que eu sou programador também ó Então agora você tá vendo que eu não sou então vou usar aqui a classe do elementor text Opa texto e elementor na realidade elementor Field textual tá então esse aqui é a classe que ele usa aqui tá E aqui dentro dessa classe eu consigo colocar um pad que espar Lamento de cima e de baixo tá Então olha lá agora ele fica igual só qu diminuir um pouquinho vamos deixar
uns 18 vai ficar igual não 16 ó então é 17 na verdade né 17 é agora ele ficou certinho tá então ó perceba você ó tá vendo inseria um pequeno trecho de código CSS aqui para me personalizar completamente do jeito que eu quero né Beleza mas Lembrando que isso aqui não era obrigatório só fiz só para ajustar esse pequeno detalhezinho e e percebeu como é legal a gente saber a programação mas num outro momento Cara você já consegue vender site sem precisar de programação se você não quiser fechou clico aqui em atualizar e Olha lá
ó Então tá tomando corpo aqui a nossa página né que eu vou fazer agora vamos adicionar esse objeto aqui tá Então nesse caso aqui essa esse textinho que tá aqui embaixo eu posso vir simplesmente adicionar um objeto de texto aqui colocar ele aqui embaixo também ó ele já funcionaria eu coloquei isso aqui mas o elemento ainda tem um outro widget que eu não coloquei ele mas acho que vai ficar legal que é o seguinte tem um widget aqui chamado de Lista de ícones tá vendo ó Então vou jogar aqui essa lista de ícones Aqui para
baixo Vamos diminuir primeiro a largura dela então aqui em avançado vou deixar a largura em 632 então cliquei aqui em personalizado vamos deixar aqui a largura em 632 ó 632 beleza aí esses ícones aqui eu vou deixar um do lado do outro tá como é que eu deixo um do lado do outro aqui nas opções desse desse objeto eu mudo aqui para em linha tá e eu vou deixar ele Centralizado para ficar bem no meinho aqui então eu tenho que clicar aqui nas opções ó Centralizado Fechou então olha só ele já ficou Centralizado aqui agora
ten que fazer o ajuste da cor e do texto né então vamos primeiro mudar a cor do ícone aqui deixar esse mesmo tom de rosa deixa eu copiar aqui que eu não lembro de cabeça vou vir aqui ó e vamos colar esse ícone ou melhor colar essa cor aqui para mudar a cor do ícone ó já mudou e aí a gente vai mudar texto aqui primeiro Vou deixar a fonte Poppins igual a gente a gente tá padronizando ali vou deixar no tamanho de 16 pixels também e vamos deixar aqui ó com a cor no branco
fechou feito isso é agora eu tenho que editar essas informações né então aqui dentro do conteúdo eu consigo editar essas informações adicionar mais ícones se eu quiser enfim tá E olha só eu vou clicar aqui e então isso aqui é como se fosse uma lista né então como por isso que o nome diz do do objeto né a lista de Ícones então se eu clicar aqui ó eu vou copiando essa lista eu posso aumentar aumentar quantas vezes eu quiser né mas nesse caso aqui a gente vai usar dois apenas tá porque eu vou colocar duas
informações que é a data e também que é online gratuito tá e como é que eu faço para colocar os ícones aqui tá então existe uma biblioteca chamada fonte Orson tá essa biblioteca ela também é integrada nativamente com o elementor você não precisa de buscar fora nada Então se eu clico aqui em cima do ícone ó eu tenho todos então o elementor ele já me dá todos esses ícones aqui para mim usar se eu quiser certo nesse caso aqui eu vou colocar aqui um um ícone de calendário Então posso pesquisar aqui na biblioteca por exemplo
calendário tá Então olha só o calendário aqui ó então cliquei no calendário depois eu clico nesse botãozinho aqui embaixo de inserir então cliquei aqui em inserir e ol Ele já mudou o ícone para mim colocou um Calendário inho lá tá aí eu vou colocar um outro ícone aqui ó além do calendário Então nesse aqui eu vou colocar por exemplo o ícone de um computadorzinho né então será que eu ten um ícone de computador aqui tenho nesse segundo item aqui eu clico aqui em cima do ícone vou pegar o ícone de desktop Então olha só coloquei
desktop ele já tá aqui certo então cliquei aqui em desktop aí eu venho aqui ó e clico em inserir cliquei em inserir ó Pronto já mudou meu ícone Tá se eu quiser eu posso até deixar um espaçamento um pouco maior entre eles né aumentar esse espaçamento aqui ó Então vamos aumentar isso aqui no estilo ó aqui é o espaçamento dos ícones ó deixar mais ou menos assim não tem problema Dee ficar com espaço maior acho que os 40 aqui ficou bom V colocar um divisor aqui se eu quiser né Ó lá então olha só como
é que fica oor o divisor Ficou legalzinho mas nesse caso eu vou deixar 100 tá é agora beleza então aqui eu vou Colocar a data que qual que é a data então 1 3 e 5 de Março deixa eu copiar esse texto aqui para ficar mais fácil ó dei um Ctrl C para copiar o texto vamos voltar lá e aí eu vou colar o texto aqui beleza e agora esse outro aqui ó eu vou colocar texto que é online e gratuito tá então só que eu vou escrever aqui mesmo deixar tudo em maiúsculo né então
ó online e gratuito certo Inclusive só mais um pontinho para quem gosta de programação né você consegue inserir Programação aqui dentro do do do próprio objeto tá então aqui do próprio objeto eu vou inserir uma tag do tipo B não precisa tá mais uma vez é só se você quiser fazer um efeito alguma coisinha mais ó onde tá escrito gratuito ó então eu abri uma tag b e aqui eu fechei uma tag b ó Então olha lá o que aconteceu ó ele fez o efeito de tá então isso aqui é um pequeno trecho de código
de programação que ele torna esse conteúdo aqui em tá então fiz Isso aqui para você ver vamos fazer de novo aqui também no Marcio Então vamos deixar aqui onde tá escrito Marcio ó abro o b aqui e fecho o b aqui como você pode ver né então eu abri uma tag B aqui e ela fechou aqui então quando eu fiz isso Ó aqui já FIC ficou também em tá beleza para quem gosta de programação e ó aqui embaixo você vai sempre clicando nesse botãozinho de atualizar né para você não ter o risco de perder né
de repente você perde seu Computador é Acaba energia Onde você tá E aí quando você vai clicando aqui em atualizar ele já não não tem esse risco tá bom Beleza então Olha lá a primeira parte aqui ó já tá praticamente feito já tá praticamente não já está feita essa primeira sessão do site quantos minutos que a gente fez cara se fosse fazer isso aqui por programação você pode ter certeza que ia demorar muito mais tempo tá então eu fiz aqui de uma forma simples e rápida só para você ver mesmo Vamos continuar fazendo aqui o
restante do site ó Então vamos pegar essa outra sessão então isso aqui é um outro contêiner eu vou clicar lá no elementor e vou arrastar aqui eu posso criar o contêiner clicando aqui nesse botãozinho mais né que é o que eu fiz agora né então se eu clicar aqui ó deixa eu mostrar PR você então se eu clicar aqui em mais eu crio um contêiner aqui eu seleciono a direção dos dos componentes do contêiner ou eu posso também fazer do Outro jeito que é clicando aqui ó e arrastando o contêiner para cá tá arrastei o
contêiner para cá Ótimo então só pra gente ter uma ideia do tamanho aqui no figma ele tem Qual tamanho aqui ó eu fiz ele com altura de 200 Então tá vendo como eu fiz a altura de 200 então aqui eu venho e também coloco aqui altura mínima de 200 tá Então vamos colocar a altura desse contêiner ó 200 Qual que é a cor que eu tô usando aqui então deixa eu copiar essa cor aqui ó Para ficar igualzinho mesmo O protótipo que é essa cor aqui tá então dei um copiar aqui nessa cor vamos voltar
e vamos colar aqui dentro do estilo Então olha lá colei aqui dentro do estilo beleza ó já tenho o meu contêiner da mesma cor né se eu clicar aqui nessa flechinha eu consigo prev visualizando o ses né é o que que eu vou fazer agora eu vou zerar o o preenchimento aqui que para não ficar com esses espacinho nas laterais que ele vem por padrão né E aí Feito isso eu vou e colocar esse texto aqui né mas nesse caso aqui ó você vai perceber uma coisa é aqui ele tem duas linhas do lado como
é que a gente faz isso aqui será que dá para fazer no elementor cara é claro que dá para fazer no elementor você vai fazer o seguinte aqui o elementor ele tem um objeto que chama divisor Ó coloquei aqui div na pesquisa dos objetos tá tá aqui divisor vou arrastar o divisor aqui para dentro tá vou deixar ele Centralizado primeiro Né para todos os objetos aqui dentro desse contêiner ficar bem no meinho que é onde eu quero né então cliquei no contêiner vou clicar aqui em layout vou deixar aqui c e deixar Centralizado aqui dentro
do justificar conteúdo né centralize ele tá aqui tá só que ele tá preto por isso que a gente não tá enxergando eu vou mudar a a cor pro Rosa tá tá vendo que você para seguir o mesmo layout né então vou mudar aqui a cor pro Rosa deixa eu copiar o tom de rosa aqui Que tá mais fácil ó dei um cont CRL C para copiar venho aqui ó e consigo colar tá isso aqui inclusive tô mudando de cores Se eu quisesse podia mudar cor global de mudava de uma vez em todo o site mas
tô fazendo aqui manualmente só para você ver mesmo tá ok aí aqui ó nas opções ó eu consigo adicionar elemento tá então eu vou mudar aqui para texto ó e eu consigo inserir o texto aqui no meio exatamente como tá aqui nesse exemplo tá então no caso é três é 1 2 1 3 e 5 de Março Então vamos colocar aqui ó 1 3 e 5 de Março também Então vou vir aqui em estilo texto ó vou mudar a cor do texto pro Branco vou mudar a fonte aqui pro unbal né que é a mesma
fonte que eu tava usando lá é deixa eu ver só Qual que é o tamanho que eu tava usando aqui que eu não lembro aqui eu tô usando o tamanho de 48 pixels né Então é ele tá aqui nesse lugarzinho aqui ó 48 pixels Então feito isso vamos voltar aqui e vamos mudar aqui o tamanho ó para 48 Pixels e aqui eu vou deixar em tá então aqui ó no conteúdo vou mudar aqui em divisor vou deixar 1,3 E5 de Março tá Então olha lá o texto já foi aplicado aqui certo só que você percebe
que tá com um espaç um pouco maior né como é que eu aumento esse espaçamento é só eu clicar aqui ó dentro do do estilo ó e aqui ó espaçamento Opa Não não é esse espaçamento Desculpa deixa eu ver aqui ó esse espaçamento aqui ó Então olha lá consigo aumentar ou diminuir Esse espaçamento não sei se você tá vendo por causa do zoom né mas ó tem esse espaçamento aqui se eu quiser ó deixa eu dar um zoom aqui só para você ver um pouquinho melhor ó ó perceba que esse espaçamento aqui ele vai aumentar
ou diminuir conforme eu mexo aqui né Então olha lá tá vendo ó diminui ou aumenta diminui ou aumenta vou deixar ele maiorzinho aqui porque aí Segue mais o layout né clico aqui em atualizar e olha só ó essa outra sessãozinha aqui Também já está pronta tá não precisamos mexer com nada de programação beleza aí o próximo ponto aqui ó é esse aqui então vamos fazer agora essa sessão aqui você percebe que na realidade ela é uma só né então você poderia fazer um contêiner para esse e poderia fazer um contêiner para esse mas nesse exemplo
aqui eu não fiz isso tá nesse exemplo aqui eu eu criei tudo como um contêiner só por quê Porque eu tô usando o mesmo a mesma imagem de fundo aqui né que inclusive Nós vamos subir ela aqui então Vamos criar um contêiner só a altura dele vai ser ó 1580 certo então vamos vir aqui dentro do editar vamos adicionar um contêiner ó adicionei aqui altura 1580 vai ficar aqui que é o que nós vimos lá anteriormente tá então ó 1580 é vou tirar esse preenchimento aqui para ficar Zerado tá essa folha em branco aqui na
realidade eu consigo até mudar a cor de fundo aqui né Então deixa eu mudar aqui rapidinho só para ficar o mesmo tom que A gente tá usando lá né Não precisava mas eu quero mudar aqui rapidinho e deixa eu só copiar que daí ele vai ficar a mesma cor de fundo aqui então venho aqui nas configurações e eu mudo aqui ó pra mesma cor para ficar a mesma cor de fundo ó só para ter Pronto já ficou tudo aqui mais fácil né Beleza clico aqui em atualizar E aí o que que eu vou fazer eu
vou subir antes de mais nada vou subir essa imagem de fundo aqui para dentro do meu é do meu componente aqui né então Clico aqui no no contêiner na verdade né cliquei aqui no contêiner venho aqui em estilo aqui tipo de plano de fundo escolher imagem e aqui ó eu vou arrastar aquela imagenzinha que eu tenho aqui já no meu computador que tá nessa pasta aqui na realidade na pasta de imagens né no caso é essa imagem aqui tá então vou arrastar ela aqui para dentro ó certo coloquei aqui clico aqui embaixo em selecionar tá
E aí ó ela já tá aqui certo aí eu consigo só mudar as Configurações a de posição para deixar ele Centralizado ó vou deixar ele enrolar e vou deixar aqui não repetir e aqui eu vou deixar em cobertura tá aí ele vai ficar do tamanho certo tá ele já tá até com a imagem da pessoa aqui mas Digamos que é que na realidade o que que eu fiz né Na hora que eu fiz a edição dessa imagem só para você ver ela né Então na hora que eu fiz edição da imagem ó eu já editei
e já coloquei essa imagem aqui para ficar direto no fundo Mas se eu não quisesse o que que eu poderia fazer se eu não quisesse fazer isso né Eu já preferi fazer dessa forma porque acho que fica mais fácil mas se você não quisesse você poderia inserir o fundo aqui ah eu quero inserir essa imagem então você poderia vir aqui ó pegar o idit de imagem tá e arrasta ela aqui para dentro ó aí quando você arrasta você consegue mudar essa imagem específica aqui tá nesse caso já deixei aqui como imagem de fundo Belê e
o que Que a gente vai fazer agora agora é o seguinte vamos criar deixa eu sempre vai clicando aqui em atualizar né para você não ter o risco de de perder o trabalho caso aconteça é uma falta de energia alguma coisa do tipo aí ó eu vou fazer o seguinte vamos criar essa sessão aqui primeiro né então primeiro eu vou adicionar esses dois aqui que eu vou fazer eu vou adicionar o widgit de título aqui tá tem outras formas de fazer mas vou adicionar um wiit de Título certo então vou pegar aqui ó é aqui
o título ó tá vendo tá aqui o título joguei para dentro tá joguei o título aqui para dentro o que eu vou fazer vou vou escrever ó veja se é para você então vou copiar esse texto aqui e vamos colar aqui colei aqui ó consigo deixar Centralizado consigo deixar aqui na cor branco e eu vou mudar pra fonte que é a unbounded tá só que nesse caso aqui é a unbounded ela não está sendo in tá sendo a versão regular dela e Tamanho de 16 pixels né então vou voltar lá então que 16 pixels é
uma medida de que é usado aqui caso você não saiba né enfim e aí vamos vir aqui em tipografia vamos deixar aqui em unbounded deixei em unbounded V mudar aqui ó para normal e vamos deixar aqui em 16 de tamanho tá Então olha lá veja se é para você já ficou igualzinho tá aqui e aí ó para quem são as aulas agora esse aqui é um outro texto nesse caso aqui ó eu tô usando o tamanho de 32 e ela tá em bold Ou seja tá em tá bold é a mesma coisa que se você
não sabe fechou vamos voltar lá então vou clicar aqui ó vou duplicar e olha só o o elemento ainda te permite duplicar as coisas para agilizar ainda mais o trabalho então ó duplicar dupliquei aqui eu vou colar aquele texto ó para quem são as aulas e eu vou aumentar o tamanho dele para 32 ó 32 vamos deixar aqui em tá E aí vamos é é copiar essa cor aqui então deixa eu copiar essa cor Aqui de novo ó cont Crol c na cor vou vir aqui e vou colar aqui ó Beleza então olha lá do
jeitinho que eu preciso tá bom próximo passo é adicionar esses objetos aqui né então existe várias formas de adicionar esses objetos aqui ó mas eu vou fazer o seguinte vou usar uma forma bem simples para você ver como é realmente fácil de de fazer isso aqui que é o seguinte eu vou adicionar um outro contêiner aqui tá Então vamos pegar um objeto de contêiner aqui ó Então posso pegar um contêiner jogar aqui ó tá então joguei um contêiner aqui vou zerar esse espaçamento aqui que fica interno dentro do coner como é que eu faço isso
ten que vir aqui em avançado e aqui em preenchimento eu vou colocar zero tá que daí ele já tirou todos os espaços laterais tá bom feito isso eu vou fazer uma outra coisa aqui vou jogar um outro existe outra forma de fazer isso tá não é uma boa prática pra otimização tem um jeito mais eh tem um Jeito melhor pr pra otimização só que eu vou jogar um outro contêiner aqui só para você ver realmente como dá para fazer também dessa forma e fica muito bem feito tá então vamos jogar um outro contêiner aqui ó
joguei um outro contêiner Beleza então eu tenho um contêiner dentro de um contêiner só que esse a gente chama isso aqui de coner pai e contêiner filho né para ficar mais fácil pra gente ver A Hierarquia das coisas aqui ó nós temos essa Ferramentinha aqui no elementor chamada navegador vou clicar aqui ó no navegador ó e ele abriu para mim como se fosse uma lista de camadas né Então quem trabalha com Photoshop consegue e ter esse controle aqui você vai entender se você trabalha com Photoshop né mas se você não trabalha também não tem problema
isso aqui é uma lista eh com os objetos né então ó dentro de um contêiner veja bem esse primeiro objeto aqui ele é um contêiner então eu clico aqui em Contêiner ó dentro dele eu tenho uma imagem que é essa imagem aqui eu tenho também ó um título que é esse título aqui eu tenho aqui um editor que é esse aqui eu tenho aqui um formulário tá E aí ó se eu quiser para mim organizar Eu também consigo clicar no objeto aqui ó d dois cliques ó e renomear ele por exemplo aqui eu vou colocar
ó primeira sessão tá então essa aqui é a primeira sessão do site essa de baixo aqui ó Então essa aqui é a segunda sessão vou Dar dois cliques Ó segunda sessão aí essa de baixo aqui é a terceira sessão eu vou dar dois cliques e vou colocar terceira sessão certo Então olha lá são todas as sessões tá E aí dentro delas cada uma delas tem os objetos dentro dela tá beleza ok então feito isso aqui ó então lembra que eu coloquei esse contêiner aqui ó só pra organização vou colocar ele aqui como por exemplo ó
é box é box para quem tá E aí dentro aqui eu vou colocar é kem um tá então vai ter Quatro colunas né Quatro Kens vamos dizer assim ó esse um do 3 4 então eu vou colocar essas quatro Vamos criar primeiro a número um aqui tá ok então dentro desse primeiro coner o que que eu vou fazer primeiro eu tenho que mexer aqui deixar ele com a mesma largura que eu criei aqui no meu protótipo tá se eu clicar aqui em cima do meu protótipo eu consigo ver que essa largura é de 376 Tá
então vamos deixar essa largura aqui dentro desse contêiner de 376 ó 376 só Que o problema é que aqui ele tá como encaixotado então ele ficou só nesse ponto pronto nesse caso aqui eu preciso mudar de encaixotado pra largura Total quando eu mudo pra largura Total Aí sim eu consigo deixar aqui em pixels ó 376 tá Então olha lá tá você pode se você quiser você não precisa nem trabalhar dessa forma você consegue arrastar aqui ó ah eu quero visualmente ajeitar a você vem aqui e muda desse jeito aqui mesmo mas eu gosto de o
valor certinho porque A gente trabalha milimetricamente né a gente tá falando aqui de um trabalho realmente muito bem feito né então lembre-se quanto mais Caprichoso você for quanto mais bem feito você fizer seu trabalho maior sua elevação de valor tá não é obrigatório você trabalhar com com valor exato mas esse é um dos motivos pelo qual eu gosto trabalhar com figma que ele vai te ajudar nesse ponto também então 376 a gente vai vir aqui vai deixar como 376 Tá beleza tá feito isso Aqui próximo ponto é o quê eu vou adicionar aqui ó um
ícone então eu posso adicionar um ícone um título e um outro objeto aqui no de de texto né então para agilizar o que que eu poderia fazer poderia simplesmente pegar aqui ó um ícone ó então pesquiso aqui por ícone jogo aqui um ícone e eu consigo selecionar também daquela biblioteca né Eu posso também eh para agilizar eu posso vir aqui ó duplicar esse texto aqui eu jogo ele aqui para dentro do Contêiner e só alinho ele pra esquerda e mudo aqui ó o tamanho da fonte nesse caso que eu tô usando uma fonte de Qual
tamanho de 20 pixels tá então aqui eu teria que vir aqui mudar para 20 o tamanho dele e aí depois eu Posso duplicar esse texto aqui ó e vir aqui e jogar aqui para dentro também né então Ó eu já tenho o meu primeiro aqui pronto tá então eu poderia fazer dessa forma poderia Só que tem uma forma ainda mais fácil de fazer isso aqui que é o Seguinte ó eu vou excluir todos esses ó cliquei com o botão direito cliquei em excluir para você ver que tem como fazer de forma mais fácil ainda então
cliquei aqui em escluir e eu vou pegar aqui a Inés de de eu pesquisar o ícone depois o título depois o texto já tem um objeto chamado caixa de ícone então ó caixa de imagem se fosse uma imagem né mas nesse caso é um ícone Então vou usar o objeto de caixa de ícone arrastei aqui para dentro já tem os três prontos tá então Ele tá vendo como elemento ele realmente é feito para facilitar sua vida então eu clico aqui em estilo vou arrastar aqui esquerda não aqui no caso Ele ficaria desse jeito também fica
legal né mas na realidade eu quero não é isso aqui é aqui em alinhamento tá Então olha só agora sim ele ficou do jeitinho que a gente programou para ficar anteriormente né Beleza e Marcelo então é o seguinte como é que eu faço então para deixar um círculo aqui ao redor do ícone também o Elemento já te dá essa opção né então se eu vim aqui em ícone ó eu consigo mudar aqui ó quer ver ó o conteúdo aqui ó na realidade no ícone ó então ó tá vendo esse ver aqui ó tá como padrão
em vez de padrão vou mudar para empilhado aí se eu quiser aí ele já fica com círculo né eu consigo Ah não quero que seja um cirrc quero que seja um quadrado você muda aqui para quadrado Ah não quero que seja empilhado quero que seja emoldurado ele vai ficar só a as bordas né mas nesse Caso aqui vai ficar empilhado mesmo porque é redondinho que a gente quer em vez de quadrado vou deixar círculo tá aqui na realidade o texto aqui ficou só um texto de exemplo né Então não vou nem mudar esse texto aqui
aqui mas se você quisesse você poderia mudar aqui escrever qualquer outra coisa né Ó mas eu vou não vou fazer isso aqui porque é só um texto de exemplo né Então deixa eu dar um Ctrl Z aqui ó para ele voltar como estava antes Ok feito isso que eu Vou fazer agora eu quero mudar a cor de fundo aqui pro Rosinha né Então deixa eu copiar esse tom de rosa aqui que a gente usou antes ó cont CRL C vou vir aqui ó vou vir na no ícone vou dar um cont CRL V aqui o
título mesma coisa vou mudar aqui pra Rosa então vou clicar aqui vou mudar pra Rosa tá aí aqui a gente vai mudar para unbounded mudei PR fonte unbounded o tamanho que eu tava usando aqui era de 20 pixels né E esse aqui 16 Então vamos padronizar isso aqui também Vou mudar aqui o tamanho para 20 pixels aqui em peso vamos deixar em e aqui em descrição vou mudar pro branco e vamos deixar aqui com a fonte Poppins que que a gente tinha feito antes né Então olha lá Poppins vou deixar aqui com 16 pixels que
é o tamanho dela e aqui eu posso deixar normal mesmo que é o 400 que já tá né Beleza então olha lá já tá tomando cara aqui né ó Inclusive eu consigo mudar a cor do ícone aqui se eu quiser vamos fazer o seguinte só para Ficar mais bonitinho Ainda vamos pegar esse ícone aqui ó vamos deixar ele aqui ó aqui eu consigo mudar a cor do objeto interno do ícone né Vamos deixar ele no branco e ao passar o mouse ele vai inverter tá então ó eu vou dar um cont Crol C para pegar
essa cor aqui então ele vai inverter aí quando eu passar o mouse ó Onde tá o rosa ele vai ficar branco lá tá vendo ó então ele inverteu aqui quando eu passo o mouse tá bom Fechou então agora ah eu quero deixar Esse ícone um pouco menor Então posso vir aqui no tamanho ó acho que mais menos assim ficou legal V deixar aqui uns 32 tá 32 ficou bacana Aí esse esse contêiner deixa eu abrir o navegador né então esse contêiner aqui ó do k um eu vou fazer o seguinte eu vou aumentar o padding
dele tá vendo que tá um espaçamento maior aqui então é esse espaçamento a gente chama de padding tá se você não sabe então isso aqui ó só para você ter só para você eh ter ficar Ciente do que eu tô falando né então esse espaçamento a gente chama de pading tá que é o espaçamento interno do objeto tá E aí o elemento ele traduziu isso aqui para preenchimento Tá mas às vezes você podem me ouvir falar pading que significa esse espaçamento interno Tá mas não precisa saber detalhe técnico Mas ó Então vamos lá falar preenchimento
tá então vou vir aqui no estilo ó vou vir aqui em melhor no estilo não aqui em avançado e aqui ó preenchimento tá no Caso eu quero que todas as laterais fiqu por exemplo com 50 daí ele vai ficar esse espaç mentinho um pouco maior aqui tá como ele tá exatamente no exemplo lá certo e olha lá e aí ele tem também uma borda aqui embaixo então ele tem um tom clarinho aqui um cinza um pouquinho mais claro e ele tem essa borda embaixo então o que que eu vou fazer eu vou vir aqui ó
nesse contêiner vou pegar aqui o estilo dele ó em vez de branco Vou deixar um cinza mais clarinho mais ou menos assim Ó e vamos jogar uma borda que é um risquinho só aqui embaixo como é que a gente faz para jogar essa borda vai fazer o seguinte vamos vir aqui em borda tipo de borda Vamos mudar para sólido aqui ó na largura então aqui eu consigo Ah eu quero que tenha 10 pixels então aqui eu mudo para 10 né Eu quero que seja na cor branca tá então você consigue também deixar do jeito que
você quiser só que nesse caso aqui ó eu quero que ele fique só embaixo e vamos deixar Bem pequenininho vamos deixar um aqui mesmo tá então ó em cima eu quero que ele fique Zerado na lateral direita eu quero que ele fique Zerado embaixo eu vou deixar um e na esquerda vou deixar Zerado ó então ó como é que ele ficou tá só que se você for reparar quando eu fiz aqui eu coloquei um arredondamento de 10 pixels né nesses cantos então eu consigo também mudar isso aqui no elemento em raio da borda ou seja
arredondamentos né então aqui eu consigo mudar para 10 Pixels por exemplo ele vai deixar todos os cantos arredondados com 10 pixis tá então mas se eu quisesse deixar esse aqui com 50 e esse com 50 para ficar um estilo diferentão por ex exemplo consigo também basta eu clicar desmarcar aqui né que aqui se você deixar marcado isso aqui ele vai aplicar o mesmo valor para todos os lados Agora se eu desmarco aqui ó em direita eu colocaria 50 que é esse de cima aqui e esse de baixo aqui ele vai ser o esquerdao então ó
esquerda ó Olha lá o que aconteceu percebeu Então veja bem ó ó como é que ele ficou Tá mas nesse caso que eu vou voltar e vou deixar tudo para 10 mesmo só pra gente padronizar cliquei lá em atualizar maravilha agora eu vou deixar a cor da borda aqui perceba que a cor da borda tá no branco eu vou deixar no no no tom de rosa Então vamos copiar aqui o mesmo tom de rosa que a gente usou ó cont Control C no tom de rosa vou vir aqui dentro do box em borda eu vou
clicar aqui ó e dei Um colar tá quando eu fiz isso o que acontece ele já ficou com a borda Cor de Rosa tá E aí lembrando para agilizar o trabalho o que eu posso fazer ten que clicar adicionar um outro contêiner aqui aquela coisa toda não meu amigo minha amiga basta eu vir aqui ó e clicar com o botão direito duplicar ó ó tá vendo ele duplicou só que eu não quero que ele fique um do lado do outro o que que eu tenho que fazer Opa desculpa que na realidade eu dupliquei o contêiner
Errado dei um control Z né então ele também reconhece atalhos de teclado né deu um Ctrl Z para desfazer aí agora sim é esse aqui na realidade que eu tenho que dupli Car né Foi sem querer então foi sem querer querendo clico aqui com o botão direito ó duplicar Olha lá então ele já duplicou é só que no caso ele tá um do lado do outro né então como é que eu faço para ele ficar ou melhor tá um em cima do outro como é que eu faço para ele ficar um do lado do outro
eu tenho Que clicar nesse contêiner principal aqui né que é o box para quem cliquei nesse contêiner do box para quem ó e eu vou jogar um do lado do outro né então tem que clicar aqui em layout e ó agora um do lado do outro aqui em linha percebeu aí ó vou vir aqui ó vamos duplicar esse ó duplicar e vou duplicar mais uma vez tá Ah mas ele passou do tamanho Calma que tem como a gente ajustar isso né então vou clicar aqui em no box ó e eu vou mudar essa opção Primeiro
para Centralizado segundo eu tenho que mudar aqui deixa eu ver ah na realidade é deixa eu ver o que eu tenho que fazer aqui ah não aqui encaixotado Aqui tem que tá largura Total tá e Ah não na realidade o tamanho aqui tá errado eu acho que eu calculei errado aqui o tamanho Deixa eu ver se eu calculei errado mesmo é por que ele deu esse erro aqui deixa eu ver é acho que ah tá a largura aqui ah eu coloquei 376 acho que não era 376 é Ah tá 376 é a Altura tá então
eu confundi é 308 tá então aqui eu ter que mudar para 308 tá então quando eu coloco 308 agora ele vai dar certo né então só tenho que colocar em todos né E olha só que interessante outra funcionalidade né aqui ó eu mudei só o estilo desse objeto né se Será que eu preciso clicar nesse aqui e vir aqui e mudar de novo clicar nesse aqui e vir aqui e mudar de novo não eu consigo até copiar e colar o estilo olha só que incrível isso aqui ó então vou clicar Nesse aqui ó primeiro nesse
primeiro contêiner cliquei com o botão direito cliquei aqui ó em copiar E aí quando eu venho aqui ó cliquei com botão direito tem essa opção ó colar estilo e ele vai colar o mesmo estilo Que eu apliquei para esse objeto aqui ó quer ver ó então colar estilo ó ele diminuiu a largura vamos fazer nos outros ó então cliquei aqui ó colar estilo e por último eu cliquei aqui ó tem também a opção colar estilo Agora sim ó do tamanho que eu Preciso redondinho bonitinho tá E aí Isso aqui é incrível né esse colar estilo
por exemplo V só rapidinho para você ver né então se eu quisesse clicar aqui ó dentro do do ícone Ah eu quero mudar isso aqui para um azul né então ó mudei Azul então eu posso clicar aqui ó copiar eu venho aqui colando o estilo ó colando estilo colando estilo tá então ele agiliza demais o processo aqui imagina se você fosse fazer isso aqui na programação até você encontrar a linha Certa até você copiar o código entendeu então agora eu vou dar um cont CRL Z Ctrl Z cont CRL Z mais uma vez e ele
desfez essa ação para mim tá bom então ok Maravilha já tenho aqui os meus quatro contêiners do jeito que eu quero bonitinho clico lá em atualizar sempre vai salvando o trabalho e aqui só pra gente ficar mais organizado eu vou clicar aqui no navegador e aqui eu vou também renomear aqui só para ficar organizado né Então em vez de k um aqui Ó esse aqui é o k 2 esse aqui ó é o k 3 esse aqui é o Ken 4 Tá bom então tá tudo organizado bonitinho fechou próximo passo agora é o seguinte vamos
e colocar aqui essa informação da especialista aqui que é a biografia dessa pessoa por exemplo né que eu inventei aqui o nome ali na zevedo não existe eu criei eu criei aqui tá mas vamos lá então como é que eu faço para mim adicionar essa informação aqui embaixo então eu posso fazer o seguinte Primeiro vamos fazer Assim ó primeiro eu vou colocar um pouquinho mais de espaçamento aqui ó só para esse para esses objetos descerem um pouquinho mais aqui ficar mais perto né então o que eu vou fazer vamos clicar aqui dentro desse contêiner ó
e eu vou eh clicar aqui em avançado depois aqui ó no preenchimento que é o espaçamento interno lembra que eu falei do padding né que é o espaçamento interno que a gente chama de preenchimento ó 100 pixels Ele puxou um pouquinho mais para Baixo então ele criou um espaçamento interno aqui ó e agora eu sinto que ficou mais confortável dentro dessa sessão do ses Tá bom agora a gente vai criar o outro Box que é exatamente o que vai ficar aqui né que é a informação que nós temos ali do texto como é que eu
posso fazer isso então vamos lá então vamos pegar primeiro então aqui que eu vou fazer eu vou pegar e vou jogar aqui dois títulos né então vamos jogar não Ou melhor vamos fazer o seguinte vamos PR Para facilitar vou jogar um contêiner aqui mesmo tá é é legal a gente trabalhar às vezes com menos contêiner mas aqui vou usar um só para você ver realmente como é fácil né então vou jogar aqui um objeto de contêiner então contêiner vou jogar aqui ó jogar ele aqui ah ele ficou do lado né como é que eu faço
para tirar Então posso clicar no navegador ou jogar ele para fora aqui certo E aí esse box para quem vai ficar para cima e esse outro contêiner aqui Vai ficar para baixo eu vou chamar esse outro de contêiner de biografia beleza chamei esse outro contêiner de biografia que que eu vou fazer vou mudar primeiro a largura dele aqui né então se eu clicar aqui dentro desse objeto eu consigo ver mais ou menos a largura que tem ó 416 tá vendo Então vou deixar esse contêiner aqui ó com largura de 416 pixels ó então 416 tá
ó perceba que ele já tá aqui só que nesse caso eu quero que ele fique alinhado pra esquerda como É que eu jogo ele pra esquerda eu posso vir aqui na configuração do contêiner ó e jogar pra fim ó então ele já ficou pra esquerda só que eu vou querer que ele fique com um espaçamento um pouquinho aqui tá Então o que eu posso fazer então Lembra que eu falei que o padding Né que é o preenchimento é esse espaçamento interno agora a gente precisa de um espaçamento externo tá então como é que a gente
coloca isso aqui essa outra opção de cima que é margem tá só que eu Quero colocar essa Margem Não em todas as direções apenas em cima certo quanto que eu posso colocar de Margem daí eu posso calcular mais ou menos se eu quiser e aí ó tá vendo a vantagem de você usar o figma você pode pegar por exemplo esse quadradinho aqui ó eu quero calcular exatamente o espaço que existe aqui ó Então posso jogar esse quadradinho aqui ó e olha só ele tá me falando que tem uma altura de 270 73 tá então o
que eu vou fazer vamos pegar Essa altura de 273 e colocar aqui na margem Ó 273 e ó aí agora sim ele ficou exatamente a mesma altura do protótipo lá que a gente criou anteriormente tá bom e vamos colocar esse texto aqui agora né então primeiro vamos pegar é vamos duplicar na realidade né então vamos duplicar esse objeto aqui ó para facilitar a vida então vamos jogar esse objeto aqui de título Aqui para baixo vou deixar esse título aqui alinhado à esquerda Vamos mudar aqui para quente Guiará Então olha só vamos jogar aqui ó quente
guiará certo depois vamos jogar aqui o nome dela que é Aline Azevedo Então é eu vou duplicar esse aqui ó duplicar e vamos jogar aqui PR PR baixo Vamos colocar aqui Aline Azevedo certo V deixar Centralizado PR ou melhor Centralizado não deixar alinhado pra esquerda né Beleza alinhou pra esquerda é aí eu vou jogar um outro objeto aqui que é essa que é o objeto de texto né então para agilizar também ó vou vir Aqui vou copiar esse aqui ó duplicar vou arrastar Aqui para baixo e vou jogar aqui para baixo tá então a gente
trabalha uma forma mais otimizada né aqui nesse caso não preciso dessa largura aqui posso deixar padrão mesmo e eu vou só copiar o texto que eu usei Antes aqui né Então deixa eu copiar esse texto ó cont Control C nele vem aqui e dá um cont contrl V tá então Ó o elemento já identifica até esses espaçamentos aqui tá deixa eu ver se eu Copiei ele inteiro acho que eu tô Ah tá só esse esse aqui que acho que ele não identificou né então não tem problema a gente vem aqui ó em educação física eu
preciso dar um enter aqui então beleza ele já pulou aqui bonitinho exatamente como eu queria tá aí esse espaçamento interno aqui desse contêiner eu vou zerar também faço isso clicando aqui ó em preenchimento e ele já Ficou zerado tá para ficar exatamente do mesmo jeitinho que tá aqui né você percebe que Tá ó você você v como tá igualzinho duas linhas três linhas quatro linhas Então vamos ver como é que ficou no outro aqui ó só para ver que tá igualzinho ó uma linha duas linhas ou melhor duas linhas duas linhas três linhas quatro linhas
belezura aí aqui ele tá com um espaç mentinho aqui em cima do minha grande vou tirar esse espen tenho para você ver ó pronto opa pera que acho que não foi né então ah agora sim beleza agora sim tá pera aí aí agora foi então ok clico Lá em atualizar maravilha então essa já tá pronto praticamente o site né ó já tá feito na realidade já tá feito né Você só vai perceber um detalhezinho Tá o que que é esse detalhezinho que eu quero te mostrar Então olha só o poder do elementor tá você ó
presta atenção no seguinte aqui no meu protótipo que eu fiz Ó presta atenção Como é que tá a divisão entre essa sessão e essa de baixo perceba que ele Acontece uma sessão uma divisão de forma suave aqui Como é que eu posso fazer isso aqui ó então aqui no nesse caso ele não tá essa transição de forma suave então eu poderia ou editar minha imagem já para ter essa essa transição Suave ou se eu quiser eu posso fazer isso aqui direto no site mesmo então eu clico aqui no contêiner ó cliquei no contêiner clico aqui
em estilo ó e aqui eu tenho essa opção de sobreposição de fundo então quando eu clico em sobreposição de fundo ele ele é ele insere vamos dizer assim Alguma coisa em cima do do background aqui da minha imagem nesse caso se eu clicar aqui ó ah inseri ó tá vendo Então ele fez uma sobreposição do vermelho como se ele e colocasse um vidro na frente né da do fundo então aqui é como se fosse o plano de fundo ele inserisse um vidro na frente do plano de fundo vamos dizer assim né tá e eu consigo
até fazer um isso sendo um degradê então ó degradê ó que vem do vermelho por exemplo pro pro preto ó então ou melhor Pro Azul ó então ol do vermelho pro Azul tá então você consegue fazer um monte de efeito Bacana aqui tá mas nesse caso aqui eu vou fazer o seguinte vamos pegar essa mesma cor e fazer um degradê dessa cor pro transparente Tá qual que é essa cor é a mesma que a gente usou aqui em cima então deixa eu copiar essa cor que tá aqui em cima ó essa aqui ó cont CRL
C vou vir aqui nesse objeto e onde tá o vermelho eu vou jogar essa outra aqui e aqui embaixo eu vou deixar transparente Quer dizer vou jogar aqui para baixo na realidade vou colar e depois eu vou jogar aqui para baixo tá pronto ele ficou transparente e eu consigo até aumentar a opacidade aqui para ele preencher certinho então olha lá o que aconteceu ó agora não tá mais aquela quebra né aquela quebra que tinha ficado anteriormente ele Já puxou de uma forma fluída aqui o fundo tá E olha só que bacana gente a a versão
desktop aqui do nosso site já tá pronta Quanto tempo que A gente demora para fazer esse site aqui cara e você consegue vender sim por valorizado eu só vou diminuir um pouquinho esse degradê aqui que eu usei de fundo vou jogar ele um pouquinho mais para cima para ele terminar um pouquinho antes ó aí Acho que fica melhor terminar aqui nos 40% tá Então olha só tá feito tá feita a versão desktop tá só que como você sabe o elemento ele é poderosíssimo e ele também te possibilita fazer nos outros tamanhos nos outros dispositivos Cliquei
aqui em cima do tablet e olha só aconteceu agora eu consigo editar a versão do tablet tá então como é que eu vou fazer vamos lá então no caso do tablet vamos voltar pro nosso protótipo Eu tenho um protótipo separado só pro tablet agora é mais simples ainda agora vai ser mais rápido porque a gente precisa simplesmente adaptar o que nós já fizemos antes né adaptar os objetos que estão aqui dentro do site para essas outras resoluções E no caso do tablet Aqui ó é o seguinte eu tô usando uma outra imagem de fundo então
tem como a gente mudar as imagens de fundo aqui também tem se eu clicar aqui ó cliquei nessa nesse contêiner vou clicar aqui em estilo e aqui ó quando eu clico aqui em cima da imagem eu consigo subir outra imagem pro tablet então eu já fiz aqui previamente ó a primeira imagem pra desktop essa segunda imagem ela tá paraa tablet e essa terceira imagem tá pro mobile né que é o celular Vamos jogar Aqui essa imagem de tablet aqui aqui para dentro ó e olha só que interessante eu já clico aqui em selecionar e ó
ele já mudou a imagem para mim adaptou ela por caso do tablet né Então olha lá só que eu vou mudar aqui no nesse caso do tablet é ele tem uma largura menor aqui tá então eu vou mudar essa largura aqui ó como é que eu mudo ela eu posso clicar aqui em cima do objeto Então olha só que legal consigo brincar com essa largura aqui tá nesse caso aqui eu vou deixar a Seguinte largura vamos deixar 781 aqui de largura tá que é a largura onde vai ficar o conteúdo mesmo aí Aqui tem algumas
pequenas mudanças né então o que eu vou fazer eu vou deixar esse objeto aqui com uma largura um pouco menor tá então aqui ele tá me dando uma largura de 302 382 Então vamos vir aqui também ó vou deixar esse objeto aqui com largura de 382 quer ver ó então aqui eu vou vir aqui em avançado vou mudar aqui para 382 Olha lá vamos mudar aqui ó 382 Ó quer ver ó 382 certo só que eu vou ter que mudar também o tamanho do texto tá então eu vou como é que eu faço mudança do
tamanho do texto vou mudar aqui ó para 32 pixels né Então deixa eu vir aqui ó vamos deixar Cadê ó no estilo mudar aqui para 32 então ele já ficou três linhas exatamente como eu deixei aqui nesse Exemplo né né então ele já é não ficou quatro linhas né Aí ó agora eu vou mudar esse outro texto aqui ó para deixa eu Ver a largura dele ó 382 também então vamos vir aqui ó nesse objeto de baixo vamos deixar aqui com 382 olha lá ó como é que ficou tá ele tá quebrando a linha aqui
exatamente do jeito que a gente precisa né Beleza e aí ó eu vou pular aqui esse aqui deixar também com uma largura de 382 que é o mesmo que a gente tá não tem que ser mais né É nesse Ah tá nesse caso aqui eu tô usando mais né Então deixa eu ver quanto eu tô usando ó 632 Então eu acho que já tá já tava 632 Ó é já tava então ele puxou automático tá não preciso mudar aqui não preciso mudar aqui ó e ó Tá feito mais uma sessão né Deixa eu só ver
a altura que eu usei aqui pra gente deixar igual nesse caso aqui eu usei a altura de 890 então aqui também ó vamos ver ó lá 890 que ele o que acontece ele já puxa da do tamanho superior né que no caso é o desktop então ele Já puxou por padrão os 890 que a gente colocou aqui no desktop né Então olha só olha lá como é que tá ó Isso aqui é a nossa versão pro tablet da primeira sessão também já está pronto vamos fazer a adaptação aqui agora dessa próxima aqui então como é
que a gente faz é aqui nesse caso naade Ach que já tá até no jeito não preciso nem mudar nada né ah não preciso mudar nada tá tá pronto né beleza que a gente vai fazer agora vamos vamos passar pra próxima então então vou clicar nessa aqui agora vou mudar a largura desse objeto aqui para 781 tá que ele ficou tá vendo ele Já tá encaixadinho bonitinho deixa eu ver como é que tá no protótipo é aí eu vou mudar a largura aqui Então nesse caso aqui a largura de cada objeto ela vai ser específica
vai ser 300 e deixa eu ver 382 Tá então vamos deixar também 382 vou vir aqui dentro dos contenders deixa eu abrir o navegador aqui para facilitar minha vida né então vou vir aqui ó esse primeiro aqui ó que é o o k1 vou mudar para 382 então 382 dois tá aí só que tem um problema tá vendo que ele Tá ficando um do lado do outro nesse caso aqui ó ele tá quebrando Então como é que eu faço para ele pular vamos dizer assim pular a linha né como é que eu faço para ele
pular a linha também é muito fácil aqui dentro do elemento a gente pega esse Box aqui ó para quem e eu ativo essa opção aqui ó de envolver tá olha lá cliquei aqui para ativar a caixinha ativou a caixinha pronto tá então aí eu vou fazer o mesmo aqui PR os outros n se eu quiser até para agilizar Posso clicar com o botão direito ó copiar vem aqui ó colar estilo aqui também colar estilo e aqui também ó colar estilo tá pronto então tá feito aqui pros quatro também já Tá adaptado aqui pro pro tablet
essa próxima sessão já adaptamos em em minutinhos né e agora vamos adaptar essa última né então eu também fiz uma imagem de fundo aqui ó para essa última que é essa aqui tá Então olha só outra imagem de fundo aqui tá Eh vamos lá então deixa eu mudar aqui Ó vou pegar essa sessão aqui e agora dentro do estilo eu vou mudar para essa imagem de fundo que eu criei aqui exclusiva pro tablet Então vou jogar não era obrigatório tá em algumas situações você consegue reaproveitar as imagens tá e detalhe essas imagens adicionais aqui ó
se você souber fazer elas da forma correta elas não vão pesar absolutamente nada no site então fica tranquilo com relação à performance isso aqui não deixa site lento Tá se você for ver o Tamanho da imagem aqui ó é extremamente pequeno extremamente pequeno Tá bom pode fazer sem medo de ser feliz então clico aqui em selecionar e ó já posicionou a minha imagem aqui só que agora eu tenho que ajustar o posicionamento dela né O que que eu vou fazer aqui ela tá Centralizado nesse caso não quero que fique Centralizado eu quero que ele fique
ó Centralizado na realidade é inferior ao centro né então ela vai ter como base a parte inferior tá e eu tenho Que fazer alguns pequenos ajustes aqui ainda né Quais são esses ajustes primeiro eu tenho que ver Ah desculpa eu mudei no no lugar errado não era aqui né Então deixa eu dar um Crol Z aqui para desfazer ó ah não era aqui mesmo tá é deixa eu ver se só se é isso aqui mesmo Ah não nesse caso aqui teria que ser uma outra sessão né então é na realidade eu fiz o protótipo de
uma forma diferente aqui então vamos fazer o seguinte vamos deixar esse protótipo aqui para ele Ficar igual vou ter que calcular o tamanho aqui né Então deixa eu fazer um cálculo aqui só pra gente identificar ó que vai ter que ser o seguinte a gente vai mudar a altura desse contêiner né então vou pegar esse objeto jogar aqui para daqui até aqui né Deixa eu ver qual que é a altura que ele tem Total ó 200 Opa 200 2000 Opa aqui ó 2.460 né então vamos pegar aqui e vamos jogar a altura nesse objeto de
2.400 60 Então olha só aqui ó em vez de 1580 2.460 Agora sim Agora sim tá certo né Beleza eu joguei 2460 só que aí eu posso pegar o meu Ah não beleza Tá ok Maravilha tá só que aí qual que é o problema você percebem que a imagem ficou escadona né como é que eu resolvo isso aqui eu tenho que resolver do seguinte forma então vou clicar aqui na imagem né então vou vir aqui ao invés de de de ser cobertura eu vou mudar para conter tá quando eu mudo para conter ó a imagem
vai ficar ele vai conter a imagem e ajustar ela pro tamanho que eu preciso Aqui embaixo tá só que aqui no caso ela tá Cent ten que mudar para inferior ao centro então Ó cadê inferior ao centro tá Então olha lá agora ele tomou como base a parte de baixo e ó aí ele foi lá para cima tá bom beleza e aí como é que eu teria que resolver essa quebra aqui do mesmo jeito que a gente resolveu antes tem que vir aqui ó dentro do da sobreposição de fundo ele já tá aqui ó só
que aqui nesse caso eu mudo a localização né então ó ele vai essa essa Sobreposição começa mais para baixo tá então ó deixa eu ver aqui ó certinho o valor que el ah não não é não é para cá é para cá né Deixa eu ver não na verade o ângulo aqui tem que ser 90 mesmo né Não não é 90 não é 180 tá para ele ficar de cima para baixo Agora sim é só arrastar tá esse aqui mais para baixo ó ó lá beleza já quebrou aquele problema lá né e eu posso até
aqui diminuir um pouquinho ó para ele não ficar muito em cima dela né Mais ou menos assim no 75 Esse aqui vamos deixar nos deixa eu ver 50 acho que 50 deu bom aí ó deu bom beleza agora eu quero alinhar esse objeto aqui pro meio para ficar igual tá aqui no Exemplo né como é que eu faço isso tem que clicar aqui ó agora nesse objeto nesse contêiner né cliquei no contêiner e vamos deixar aqui alinhado pro centro maravilha alinhei aqui pro centro agora o que eu vou fazer aqui nesse caso ó então aqui
ó ele tá com uma largura um pouco maior 514 de largura Que você tá vendo aqui né então vamos mudar aqui também para 514 ó Então vem aqui no layout 514 beleza clico lá em atualizar ó e ó tá feito tá feito tá feito já a versão de tablet também ó olha só como é que ficou então quando a pessoa acessar pelo tablet ele vai carregar desse jeito aqui né então ele até tem uma diferenc Então porque tem tablets que são maiores e menores aqui nesse caso ele ele tá ele deu um errinho aqui mas
é por causa que aqui ele Já Identificou como se fosse celular né E a gente vai fazer isso aqui já já tá mas olha só aqui você consegue ver como é que tá é dentro do tablet e no caso do desktop Olha só já ficou desse jeito aqui também bonitinho né né Agora só falta a versão de celular né Vamos lá para fazer a adaptação da versão de celular então como é que a gente pode fazer aqui agora vamos lá vamos primeiro mudar a imagem de fundo que eu também fiz uma aqui já pronta pro
celular no Caso essa daqui né mobile tá que é essa aqui que você tá vendo ó certo vamos jogá-la aqui para dentro então cliquei aqui em cima desse primeiro objeto vou clicar aqui em estilo e eu vou pegar aqui ó em imagem vamos jogar esse objeto aqui para dentro ó joguei aqui para dentro beleza joguei aqui para dentro agora eu clico aqui embaixo no botão selecionar então cliquei em selecionar e ó Ok só que aqui nesse caso eu não quero que ela fique centro ao centro ela quero Que ela fique superior ao centro tá porque
ele vai não vai cortar a cabeça aqui da pessoa né Eh Beleza então deixa eu só voltar aqui agora a gente ó então só pra gente ser organizado né então desktop e tablet Ok Maravilha só falta ajustar pro celular né Ó lá então agora no caso do celular vamos lá então essa primeira sessão do celular eu deixei com altura maior um pouco 900 Então vou vir aqui no meu objeto vamos deixar aqui ó layout de altura 900 Então tava 890 Aumentar um pouquinho né então 900 Tá beleza tá criado aqui com altura de 900 Só
que nesse caso aqui você vai perceber uma coisa tá esse form tá vendo esse formulário aqui ele não tá bem no centro eu joguei ele um pouquinho mais para baixo tá então o que eu vou fazer eu vou deixar aqui ó é alinhado para ele ficar pro fim ó então ele tomou como base aqui embaixo e aqui embaixo eu coloco um pading que é esse espaçamento que tá aqui né quanto de pading eu coloco aqui Vamos usar aquela técnica que a gente viu anteriormente de pegar aqui ó colocar um quadradinho aqui pra gente calcular mais
ou menos ó então 99 vou colocar 100 de PED para arredondar né então joguei é vou vou colocar agora aqui ó um padding de 100 embaixo ó então ven aqui em avançado preenchimento embaixo vou colocar 100 certo coloquei 100 agora eu tenho que mudar a largura do conteúdo aqui né Então nesse caso aqui eu vou deixar por exemplo ó 360 tá Então deixei 360 ó olha só que legalzinho né só tenho que ajustar algumas coisas aqui ó o tamanho da fonte por exemplo Então qual que é o tamanho dessa fonte aqui nesse caso aqui deixa
eu ver qual que é o tamanho da fonte que eu usei ó 30 pixels tá então pro mobile essa fonte aqui tá em 30 pixels Vamos ver eu acho que já é o mesmo né não tava em 30 Diminui um pouquinho só né então mudei para 30 é esse texto aqui não preciso mudar aqui eu vou ter que mudar É a questão do arredondamento apenas né então como é que eu faço isso aqui vamos clicar aqui no formulário ó e aqui aqui vou mudar para é ó então lembra que eu que uma coisa que eu
deixa eu voltar aqui rapidinho né então lembra que aqui no no colum Gap eu consigo mudar esse espaçamento aqui eu deixei Zerado tá só que no caso do celular do mobile né É no no não é o espaçamento de um lado pro outro aqui no caso é espaçamento de cima para baixo Opa Apertei o botão do volume Sem querer aqui ó é é o esse aqui ó Então esse espaçamento que eu vou deixar Zerado aqui né Ou posso deixar um espacinho vamos deixar um espacinho tá para ficar bonitinho esse espacinho vamos deixar por exemplo aqui
oito tá então deixei oito e aí o que eu vou fazer vamos arredondar agora nesse caso eu quero que ele arredonde os cantos né então tem que vir aqui ó dentro do Field né E aqui ele tá cadê o arredondamento é Então olha só border raids eu posso Deixar 10 né então deixo 10 Aqui também tá Então olha lá ele ficou arredondado tá beleza aí aqui o botão eu também vou deixar aqui com os cantos arredondados Tá então vamos deixar esses cantos aqui arredondados olha lá então 10 aqui 10 aqui aí ele já ficou tudo
redondinho como eu quero beleza olha só que bonitinho aí aqui ó nesse caso aqui ah tá aqui ele tá em uma linha só Então como é que eu posso fazer para ele ficar em uma linha só vamos simplesmente vir Aqui ó e diminuir aqui ó a largura Ó mas ó então aqui ele não quebra linha Então vamos deixar aqui em 25 tá daí ele fica em uma linha só como você tá vendo aqui no Exemplo né Beleza e aí tem mais um detalhezinho que é o seguinte ó aqui é o espaçamento aqui ele tá um
pouquinho maior de 16 né nesse caso aqui como tá no celular a gente tem uma tela um pouco menor eu acho que é interessante a gente deixar um espaçamento menor aqui tá fazer o máximo possível para esse Formulário ficar para cima tá como é que eu posso fazer isso mudar esse espaçamento aqui para oito né olha só então mudei aqui para oito ele já deixou mais coladinho um pouco e aí a sobreposição de fundo que é aquela aquele background aqui a gente vai mudar aqui em sobreposição de fundo ó e eu vou deixar uma so
sobreposição que ele vai do transparente e ele vai pegar aquela cor também de fundo né Deixa eu só copiar Qual que é o tom da cor que eu Não lembro de cabeça que é esse aqui ó cont Crol C eu venho aqui ó e só no celular eu vou deixar com essas configurações aqui para ele ficar com essa sobreposição de fundo um pouquinho mais para cima né Então essa daqui vai vir mais para cá aqui vai ficar 180º né E ó aqui ele acontece essa sobreposição tá tá vendo ó então só para dar um pouco
mais de leitura que senão ele tem que ficar atento para não perder a leitura né então vou aumentar aqui mais ou menos Assim ó na opacidade vou deixar aqui no máximo eu vou deixar mais ou menos aqui para ele ficar bonitinho né então a esse aqui vai jogar um pouquinho para baixo tá Então olha só bonitinho né Só que nesse caso aqui ó o logo tá Centralizado Então como é que eu faço para fazer essa centralização aqui lá no elementor é só clicar aqui ó dentro do objeto Centralizado ó Então vou selecionar a opção beleza
Tá Centralizado agora vamos continuar editando aqui o restante né Então como é que eu faço essa edição para ficar igualzinho tá aqui então deixa eu descer aqui ó aqui eu vou ter que diminuir um pouquinho o tamanho da fonte né então nessa próxima sessão aqui ó nesse caso eu vou diminuir um pouquinho Qual que é o tamanho da fonte que eu usei aqui nesse caso é o 32 pixels né então vamos mudar aqui para 32 para ficar igual né vou vir aqui em texto e ao invés de 48 vamos deixar 32 beleza clico lá em
atual ar e olha só Aqui agora eu vou ter que mudar a largura desse conteúdo vamos deixar em 360 para ficar igual também ó deixei lá 360 é E aí aqui eu também vou deixar essa fonte aqui diferente então deixar 24 né Então olha só aqui nesse caso aqui ó deixar ela com o tamanho de 24 tá bom perceba que nesse caso aqui eu quero que ele quebre a linha um pouquinho antes né Tá vendo jogou o ass para cá então o que eu posso fazer se eu quiser nesse objeto específico posso vir aqui e
mudar a Largura dele se for o caso né Olha só vamos deixar aqui ó deixar Centralizado vamos deixar aqui ó dessa forma aqui ó aí ele quebra do jeito que eu quero na onde é necessário tá bom esses ob objetos aqui eu acho que nem preciso mexer né Aqui nem preciso mexer Já tá feito né do jeito que eu preciso aí só tem essa última questão aqui do background né da do da imagem de fundo Então vamos subir aqui a imagem de fundo que a gente criou usando já ou melhor Criou já especificamente pro celular
então virm aqui no estilo e vamos subir lá aquela imagem que tá aqui na pasta né que no caso essa última imagem aqui então vou arrastar ela aqui para dentro do meu projeto clico aqui em selecionar tá cliquei em selecionar e pronto ó a imagem já está aqui tá bom Então olha só é aí eu vou só tirar esse espaçamento aqui porque no caso o celular é só para você visualizar como é que tá ficando ó no caso do celular Ah não apesar que Ficou bom esse espaçamento aqui acho que eu vou deixar desse jeito
mesmo não tem problema Beleza então aqui embaixo o que eu vou fazer agora eu vou como eu troquei a imagem eu vou ter que mexer na altura Tá então vamos ver qual que é a altura que tava aqui ó Então vamos vamos lá definir vamos descobrir qual que é a altura aqui usando aquela técnica né então eu vou pegar aqui essa sessão ó que começa aqui e aí só para facilitar vamos arrastar isso aqui para baixo Porque é só para mim pegar a informação né então ó 345 Então posso dar um cont CRL Z aqui
ó cont contrl Z aí eu vou criar ou melhor vamos e definir essa altura aqui ó em vez de ficar do jeito que tá vamos mudar para 345 3000 45 acho que é 345 eu tinha feito antes né Deixa eu só conferir é 3.045 É isso mesmo tá Beleza feito isso vamos voltar lá já deixei aqui com 345 E aí agora a minha imagem tá certinho onde eu preciso tá só que eu vou diminuir um pouquinho esse Espaçamento aqui ó só para não ficar um espaço muito grande aqui um espaço muito pequeno aqui tá Então
o que eu vou fazer vou vir aqui nesse objeto lembra que a gente tinha mexido no margem ó em vez de 273 Vamos colocar um 150 aqui por exemplo né então ó 150 acho que tem um pouquinho mais né É na verdade eu posso até calcular o valor certinho né para ficar bem feitinho vamos calcular Ah nesse esse caso aqui eu fiz ele ficou um pouquinho torto né mas não tem problema Então vamos vamos nos ômetro mesmo lá tá é deixa eu ver então aqui eu posso até deixar Acho que uns 160 acho que 160
vai ficar melhor tá mais ou menos esse espaço aqui E esse espaço aqui né então esse outro espaço aqui tá beleza então Maravilha ó tá feito né então clica aqui em atualizar para salvar minha página Pronto já adaptamos Ah não aqui ainda tem uma configuração que eu preciso mexer né na verdade eu tenho que fazer o seguinte tenho que clicar aqui ó e aqui Eu vou ter que deixar a opção esse aqui é o do celular mesmo é do celular tá então aqui eu vou ter que deixar outra opção né então só para não dar
ess rinho aqui quando a gente diminui né então aqui ao invés de com conter tem que ser cobertura não cobertura não não acho que tem que ser conter mesmo tá só se eu calculei errado ah não ah não tá não é isso aqui mesmo tá Por que acontece aqui ele vai se adaptar PR as outras resoluções né então tem celular que no Caso do celular ele tem uma diferença grande de tamanho Então pode acontecer mas espera aí que tem uma coisinha aqui acho que conter deixa eu ver personalizado Só se eu deixar aqui personalizado ó
e eu vou deixar essa largura aqui é com 767 que é a largura Total aqui né tá vendo ó 767 aqui em cima Então vamos deixar aqui 767 ó vamos ver o que acontece ó é é isso mesmo tem que deixar 767 daí o que acontece quando tem essa diferença de largura de celular Ó aí ele não vai quebrar não vai ter esse perigo tá é na realidade vou jogar isso aqui um pouquinho mais para baixo ainda para ficar um pouquinho mais colado Então vou aumentar em de vamos deixar 200 aqui não 220 não 250
É acho que 250 ficou melhor então ele ficou um espaço maior aqui em cima mas é porque eu quero associar essa informação com essa sessão de baixo então de fato ele vai ficar um espaço maior em cima mesmo tá clico lá em atualizar agora sim ó Vamos ver como é que ficou aqui pro celular ó Então olha lá ó maravilha viu só o Super Poder da gente saber utilizar essas ferramentas para criar sites profissionais dá uma olhadinha como é que ficou o o resultado do trabalho que a gente criou juntos aqui em poucos minutos de
forma 100% visual e detalhe sem precisar utilizar código sem necessidade de mexer com várias linhas de código tudo de forma visual e um trabalho que diga-se de passagem pode Ser vendido tranquilamente aí por pelo menos uns r$ 800 no mercado mas agora eu tenho um aviso importante para você apenas saber as ferramentas não é o que vai levar você a conseguir lucrar alto nesse mercado não vai te levar aos 10.000 por mês se fosse simplesmente saber as ferramentas todo mundo que saberia conseguiria Mas isso não acontece até porque as ferramentas como eu te mostrei elas
são muito fáceis elas são muito intuitivas de você aprender Você precisa sabe do quê você precisa saber vender o seu serviço saber conseguir clientes e não qualquer clientes os clientes corretos os clientes realmente de alto padrão que valorizam o seu trabalho não é qualquer tipo de cliente você precisa saber fazer clientes qualificados chegarem até você doidos para te contratar E aí como é que você consegue fazer isso como é que você vai conseguir aprender a vender o seu trabalho eu quero te apresentar um Método um método para vender sites que eu elaborei e que vai
te ajudar se você aplicar esse método você pode ter certeza que vai ficar muito mais fácil conseguir clientes dispostos a pagar alo pelo seu serviço e esse método eu chamo de método 3c baseado em três etapas que chama-se etapa de captar clientes etapa de conquistar os clientes e etapa de converter os clientes eu sei que você tá doido para aprender como que você consegue aplicar esse método para Conseguir criar sites profissionais e vender esse trabalho mas esse será o assunto da nossa terceira aula da imersão Essa vai ser a aula mais importante afinal de contas
não adianta nada saber a parte técnica mas não saber a parte estratégica para conseguir lucrar de verdade o que paga a conta é dinheiro no bolso e é isso que eu vou te ensinar na aula número três que vai ser liberada sexta-feira às 8 horas da manhã debaixo do tema técnicas Poderosas para Vender sites Então já trate isso como prioridade já agora agora coloca no teu despertador risca no teu calendário para você não perder por nada nesse mundo a aula número três se você perder vai ser a mesma coisa nadar nadar nadar e morrer na
praia porque a aula três é a aula mais importante da nossa imersão é nela que você vai vou abrir a caixa preta para você vou falar coisa que tem gente que cobrem mentoria para falar aquilo que eu vou te mostrar na aula número Três Então não perca por nada essa aula estamos combinado mas eu ainda gostaria rapidamente de responder uma dúvida frequente que muita gente tem mandado Tenho recebido nas caixinhas de pergunta Tenho recebido no meu Direct que é o seguinte será que você tem algum curso algum treinamento que ensine tudo a do zero do
Passo a Passo cada pequeno micro passo que você precisa dar para conseguir fazer da criação de venda de sites um negócio altamente lucrativo sim A resposta é que eu tenho um treinamento esse treinamento se chama comunidade são web tá logo se você quiser participar da próxima turma você vai ter a oportunidade mas eu não quero que agora você se concentre nisso o que eu quero que você se concentre nesse momento é no que você aprendeu a primeira coisa que você viu Nessa aula aqui nessa aula número dois foram os três tipos de hospedagem você entendeu
o que que é uma hospedagem compartilhada que compartilha Recursos é o pior modelo de negócio você conheceu também a hospedagem dedicada que é extremamente boa mas também é muito cara e você conheceu também a hospedagem VPS que para nós no nosso caso específico é a melhor solução vai trazer mais segurança vai trazer mais velocidade e qualidade pros sites dos seus clientes além de te possibilitar também ter ganhos recorrentes oferecendo esse serviço Ok a outra coisa que você aprendeu aqui nessa aula foram as Ferramentas para criar sites você viu Quais são as principais ferramentas tanto nas
na na classificação de ferramentas essenciais como também nas ferramentas opcionais ferramentas essenciais WordPress e o elementor que inclusive o WordPress é gratuito O elementor também tem sua versão gratuita e você você viu também as ferramentas opcionais que trata-se do figma para criação de protótipos né de layouts de sites que também é uma ferramenta Gratuita você consegue eh mexer nela através do navegador não precisa nem instalar no computador se você não quiser e você viu também a ferramenta do Photoshop que é ferramenta para edição de imagens mas se você não quiser utilizar o Photoshop você tem
outras alternativas gratuitas que são fotopia canva e jimp tá E aí o princípio é simplesmente que você Edite imagens tá então qualquer ferramenta pode ser usada Ok e além disso também Nós criamos na Prática aqui um projeto de site Nós criamos uma página de captura que você aprendeu inclusive o que que é uma Landing page de captura no decorrer dessa imersão e Nós criamos ela juntos aqui em poucos minutos que inclusive é essa página que você tá vendo aí na sua tela e que pode tranquilamente ser vendido no mercado por pelo menos uns r$ 800
para quem tá começando na área agora então você tem que se preparar para a aula número três que vai ser liberada Sexta-feira às 8 horas da manhã trate isso como prioridade isso aqui pode realmente mudar a sua vida para sempre Então já anota no seu calendário porque embora seja a terceira e mais importante aula Ela é a que vai ficar disponível por menos tempo eu vou tirar todas as aulas do ar em breve e se você não assistir Se você não tratar isso aqui como prioridade como realmente um comprometimento você vai se arrepender depois vai
por mim porque você vai se Arrepender de não assistir o conteúdo da aula número três tá legal E eu também quero dar mais um breve recado se você ainda não está participando no nosso concurso de resumos cara seja rápido por quê Porque vai rolar uma premiação especial ao término destas três aulas do workshop como é que funciona essa premiação especial é o seguinte vou te falar quais são esses prêmios primeiro o prêmio número um você vai receber modo o grande vencedor o grande vencedora do Nosso concurso de resumos né vai receber modelos de briefing ou
seja formulários que nós enviamos pros clientes para que eles possam preencher e que a gente possa de fato executar o trabalho e é importante que os nossos briefings sejam muito muito bem elaborados com perguntas estratégicas perguntas específicas para que a gente evite depois ficar fazendo retrabalho excesso de alteração perder tempo Desnecessário né então você vai receber modelos que eu mesmo Marcelo uso E que eu elaborei e que são realmente muito bem planejados para você evitar problemas com seus clientes Ok Esse é o primeiro prêmio para quem for o grande vencedor ou grande vencedora do nosso
concurso de resumos mas nós temos também o prêmio número dois prêmio número dois é uma hora de consultoria individual de direto comigo sim eu vou me conectar através de uma videoconferência e eu vou dar uma consultoria de aproximadamente uma hora para quem for o grande vencedor Ou grande vencedora do nosso concurso de resumos essa consultoria você vai poder me perguntar o que você quiser no seu negócio dentro do nosso escopo de trabalho e eu vou dar os meus pitacos vou te ajudar vou falar aquilo que você deve fazer talvez vou corrigir alguma trilha errada que
você eventualmente esteja Seguindo para que você consiga alavancar ainda mais os seus resultados criando e vendendo sites profission Beleza então esse é o prêmio número dois Aqui da nossa imersão para quem for o ganhador do concurso de resumos e o prêmio número três é um pix no valor de r$ 1 sim eu vou ainda te dar mais r$ 1 do meu bolso como incentivo por você ter participado dessa imersão de aulas ter postado o seu resumo na comunidade enfim E como é que você faz para participar mesmo lembra-se você tem que entrar dentro do nosso
grupo fechado no Facebook deste evento não vale ser em outro lugar eu tenho que repetir isso Aqui porque sempre acontece Não vale me mandar o resumo via Direct Não vale me mandar o resumo no WhatsApp não o resumo tem que ser postado no grupo do Facebook desse evento Marcelo não tenho Facebook então crie um crie um porque só vale o resumo postado lá se for em outro lugar não vale tá legal você vai ter que fazer um resumo da aula um da aula dois e da aula três e no caso dessa aula específica aqui você
vai fazer com essas seguintes orientações o título do post Tem que ser o seguinte #rumo 2 Nova era e o que que você vai escrever no conteúdo você vai escrever o seguinte primeiro de 0 a 10 qual nota você dá para a segunda aula segundo ponto Quais foram os pontos mais importantes que você aprendeu Nesta aula terceira pergunta que você vai responder o que você quer começar a aplicar imediatamente e pergunta Número Quatro o que mais você gostaria de aprender nas aulas da imersão Relembrando você vai Ter que fazer isso aqui para a aula um
para aula dois e para aula três somente vai vai concorrer aos prêmios aquele que fizer o resumo das três aulas se for de apenas duas aulas ou de apenas uma aula não é válido precisa ser da aula um da aula dois e da aula três E aí é o término eu vou ler todos os resumos de todos os que postaram vou verificar se tá tudo certinho de acordo com as aulas E aí eu vou selecionar aquele que eu considero o melhor resumo E aí eu vou Dar esse prêmio para quem for o ganhador belezinha Mas
mesmo se você não vir a ganhar esse concurso de resumos e ainda assim não receber esses Prêmios Você não vai sair de mãos abanando isso porque simplesmente por você participar do nosso concurso de resumos Ou seja todos os que participarem que enviarem os três resumos das três aulas vão receber também Um certificado digital de participação nesse workshop nessa imersão de aulas da nova era da criação De sites que é esse que você tá vendo aí é um certificado bonitão personalizado digital que eu vou enviar para você com o seu nome e esse certificado vai atestar
Que você participou das aulas da imersão a nova era da criação de sites e que você de fato conseguiu entender os conceitos que nós passamos aqui durante a imersão de aulas Ok então todos os que participarem vão receber também esse certificado exclusivo do evento E mais uma vez por favor antes de gente te Encerrar eu quero te pedir para você comentar aquilo que você tá achando das aulas não importa se você tá vendo esse vídeo aqui no YouTube se você tá vendo esse vídeo aqui dentro da nossa plataforma da imersão Nova Era não importa por
favor comenta para mim aqui embaixo que que você tá achando dessas aulas a sua opinião para mim é muito importantes o meu objetivo aqui é gerar o máximo possível de valor para te ajudar então por favor não deixe de Postar o seu comentário ele é muito valioso para mim ele me ajuda a conseguir melhorar cada vez mais o conteúdo que eu trago aqui para vocês beleza Mas faça isso rápido porque as aulas dessa imersão vão sair do ar neste domingo todas as três aulas serão excluídas no domingo e depois não adianta me mandar mensagem não
adianta me dizer que aconteceu imprevisto não isso aqui é para quem está comprometido para quem quer levar esse negócio Como Uma carreira como uma profissão não como brincadeira não como como BL blá blá Não é sério tá então aproveite e assista as aulas o quanto antes sempre que eu for liberando elas porque isso aqui é para quem realmente quer mudar a sua carreira não se esqueça então no Episódio número três da imersão a nova errea da criação de sites nós vamos falar debaixo do tema técnicas Poderosas para vender sites você vai conhecer detalhes do Meu
método de vendas 3c e eu vou te mostrar como Vender o seu trabalho Isso aqui é uma mina de ouro é a aula mais importante de todas então ó prioridade pelo amor de deus essa aqui é a aula mais importante mas ela vai ficar disponível por menos tempo não perca essa aula ela vai de fato virar a chave para você sexta-feira 8 hor da manhã a gente se vê no Episódio número TR estamo junto um forte abraço é nós fala pessoal meu nome é Alf tô passando aqui para gravar um depoimento aqui pro Marcelo hoje
eu sou Web Designer graças ao Marcelo tá é antes eu não tinha tinha um conhecimento muito pequeno bem básico mesmo de site seguindo Marcelo no Instagram e depois no YouTube comecei a acompanhar o conteúdo dele e o pouco conteúdo que eu acompanhei que Eu segui do Marcelo no YouTube que por sinal o conteúdo que o Marcelo entrega no YouTube é muito melhor do que certos cursos de web design que tem por aí tá curso pago Ainda por cima Então e o Marcelo entrega muito ouro na verdade com os seus conteúdos se Então se no próprio
YouTube já é um um um um uma mina de ouro dessa e você não faz ideia do que que tem dentro da comunidade tá dentro do curso dele eu acabei encontrando o Marcelo por acaso entrei na turma dele em março desse ano e eu acabei tomando a decisão de entrar na turma dele em março desse ano devido a um problema no meu emprego porque eu já Tava bem saturado trabalhava o dia todo saía de casa 6:30 da manhã chegava 6:30 da noite basicamente passava 12 horas fora de casa eu minha esposa e minha filha a
gente sai pela manhã e voltava pela noite então eu tava basicamente sem vida então eu resolvi entrar na turma do Marcelo na esperança de largar o emprego e não foi outra e no mês de março quando eu entrei pra turma dele eu senti ali que era o meu momento de queimar o barco e não deu outra eu entrei em contato com Meu patrão pedi minhas contas tá eh combinei ficar lá mais 90 dias então eu ia ficar só até o final de junho e durante esse período eu ia assistindo o curso quando dava ia assistindo
o curso quando eu conseguia e porque eu não tinha muito tempo então acabou que eu concluí Hoje hoje eu tenho aí mais ou menos 20 a 25% do curso concluído e o mês de Julho foi o meu primeiro mês como web design como Autônomo e eu acabei vendendo um site ali eh consegui ter confiança e propriedade e conhecimento no assunto para vender o meu primeiro site e eu acabei vendendo meu primeiro site pelo valor de r$ 800 acredite ou não Eu vendi um site por R 3.800 e fechei parcerias com algumas agências e gestores de
tráfego que já estão rendendo alguns trabalhos então mês passado aí eu tive mais ou menos um faturamento algo em torno de r$ 5.000 eu Nunca ganhei R 5.000 de salário eh trabalhando o mês inteiro e com o que o Marcelo me ofereceu eu tive um salário basicamente de R 5.000 e esse mês tá se encaminhando parecido com isso algo parecido com r$ 5.000 de novo e eu espero que o meu próximo vídeo que eu venha a gravar seja o meu relato dizendo que bati os 10.000 porque não não tá longe e eu acredito que logo
logo vai acontecer e direto na comunidade o pessoal lá comemorando os 10.000 os 10.000 r000 no mês vendendo site tá se tornando bem comum então esse vídeo também serve para você que tá em dúvida e tá passando por alguma coisa parecida com que eu passei eu também passei por isso tava insatisfeito demais com a minha vida do jeito que estava o meu emprego e eu precisava virar a chave precisava virar meu jogo e foi o curso do Marc que me proporcionou isso então agradeço até aqui também ao Marcelo então se você tá com essa dúvida
Não Perca tempo venha fazer parte da comunidade que eu garanto que aqui o seu nível de de conhecimento para web design vai subir ó 100 vezes mais Então é isso pessoal Valeu obrigado e até a próxima não tem dois meses que eu entrei entrei na última turma e assim os meus resultados já são significativos eu saí de uma renda média mensal antes do curso eu fazia mais ou menos 18800 por mês com curso depois do curso e esse mês por exemplo né a gente tá na metade aí do do Mês e eu já fechei projetos
que acumulam quase R 5.000 fala Marcelão tudo bem meu parceiro E aí como que você tá cara vindo aqui para falar acabei de fechar um contrato de 2,7k já já fazia alguma coisa ou outra mas cara o curso foi surreal Tipo ele eu tava aqui e o curso me jogou aqui e e o método é ótimo faz um mês nem um mês nem chegou a virar um mês ainda e já paguei o curso muito bom mano muito bom parabéns é Método 100% aprovado galera que quiser comprar pode Ir sem medo eu não sabia nada sobre
sites em cerca de 2 meses de curso eu fechei dois projetos de aproximadamente r$ 2000 projeto simples que em poucos dias eu consegui desenvolver e entregar pro meu cliente Olha eu já fiz vários cursos voltados pra área de design e desenvolvimento web esses cursos me ajudaram bastante Mas uma coisa eu confesso para vocês o curso do Marcelo Rocha para mim tem sido o melhor a ponto de fazer eu deixar profissão anterior Que era motorista rodoviário para me tornar um web design e viver disso por qu porque o Marcelo Rocha ele não somente ensina você a
criar sites ele ensina você a criar com as ferramentas necessárias ele ensina todo o passo a passo de como usar essas ferramentas mas ele vai muito mais além disso ele também ensina você a vender o seu serviço a vender a criação de site e eu posso dizer para você que só esse módulo do curso do Marcelo que é o método 3c onde Ele ensina você a vender o seu serviço já valerá todo o seu investimento portanto pode ter certeza vale a pena você investir nesse curso fala pessoal beleza meu n é Lúcio e eu gostaria
de falar aqui sobre a minha experiência eu não sabia quase nada né sobre o desenvolvimento aprendi muito e através desses estudos que eu tive lá eu já consegui fechar um contrato aí meu primeiro contrato fechei por r$ 800 então assim eu indico muito eu indico Paraos amigos né que estão a fim de entrar nesse mercado para chegar nessa marca que é os 10k por mês é só seguir o que ele indica ali que com certeza você vai almejar também esse valor que é muito possível mesmo você não não sabendo muito sobre o desenvolvimento de site
você vai aprender o passa passo com ele completo tem vários vídeos lá indicando Beleza então est junto aí Marcelo abraço meu nome é Paulo e eu tenho 68 anos quando eu me aposentei em 2021 ao estudar desenvolvimento de sites eu identifiquei tanto eu me envolvi tanto eu me apaixonei tanto pelo desenvolvimento de de forma que pudesse criar sites para clientes para isso procurei alguns treinamentos que tinam no mercado e Participei de alguns deles H cerca de um mês eu inscrevi no treinamento e fiquei extremamente surpreso tanto com a qualidade do treinamento quanto com a riqueza
de seu conteúdo eu vejo conteúdos que sequer Era abordado nos treinamentos anteriores nem se tocar neste assunto para exemplificar eu vou falar apenas um deles que são muitos são muitos conteúdos nessa condição mas vou falar apenas um deles com exemplo hoje com apenas um mê eu já configurei o meu servidor VPS coisa que nos outros treinamentos sequer eram abordados eu estou muito feliz muito satisfeito e aprendendo muito aumentando minhas habilidades e crescendo muito Profissionalmente E é claro recomendo fortemente para quem quer se aprofundar nos seus conhecimentos e habilidades no desenvolvimento de sites só para terminar
em uma escala de 0 a 10 eu dou nota 1 Milão eu queria dar o meu testemunho aqui eu comprei recentemente o curso do Marcelo e eu já trabalhava fazendo sites mas eu trabalhava de uma forma totalmente errada e depois que eu conheci o Marcelo e o Curso dele e meu jogo mudou o jeito de trabalhar mudou e consequentemente agora eu posso cobrar um ticket até mais alto pelo profissionalismo que eu consigo entregar e justamente e unicamente porque eu adquiri esse curso do Marcelo então quero deixar aqui meu relato de que e sem dúvidas é
um dos melhores conteúdos que eu já consumi até hoje dentro do mundo digital fala pessoal tudo bem meu nome é Rafael Fernandes Sou de Caraguatatuba litoral norte de São Paulo Trabalho com suporte remoto de software tava buscando uma mudança na minha vida profissional e me deparei no Instagram com anúncio e do curso do Marcelo e fui convidado a fazer um workshop de TRS Dias gostei muito do que eu assisti e isso me chamou atenção de ingressar nessa jornada nesse treinamento gente desde a hora que eu entrei não me arrependi em nenhum momento Marcelo é um
cara muito Atencioso um cara muito muito didático um cara que muitas vezes nos pega pelo braço nos ensina bastante ali na comunidade no fórum no WhatsApp nos atende muito bem e o curso dele é muito completo comunidade é uma comunidade muito atuante e em todo momento que você tá ali dentro dessa jornada você tá sendo assistido né o curso dele conta com muitos módulos e ensina a mexer com WordPress com elementor com criação de servidor compartilhado VPS ã ele ensina Bastante ali sobre fig na Photoshop gente é muito completo programação frontend é site institucional site
on page site multipage e loja virtual gente é um conteúdo assim Fantástico não tem nem o que falar Eu recomendo muito o curso do Marcelo Eu recomendo muito essa comunidade a todos Fala galera beleza me chamo Gustavo eu faço parte aí da comunidade do do celão né celão web e eu indico muito o curso para quem quer começar ou Para quem já tá na área né como era o meu caso eu já era Web Design já fazia sites achei o selão aí pelo YouTube pelas aulas que ele já dava é grátis no YouTube que ele
sempre dá né Toda quinta tem Live dele ensinando alguma coisa nova aí eu já vi que que iria ser muito bom para mim e as aulas dele vai muito do básico ao avançado então mesmo você não saiba alguma coisa E ou se você já souber você vai aprender com certeza alguma coisa nova eu te dou certeza Nisso porque mesmo já sabendo alguns assuntos eh eu já já sabendo o assunto eu eu vi as aulas aprendia muita coisa nova fora que o jeito que ele explica é muito bom você vai entender muito rápido é a comunidade
que tem no discord é é maravilhosa pessoal sempre ativo lá sempre te ajuda no que você precisar alguma dúvida algum problema que você tiver o próprio selão te Responde muito rápido lá o mais rápido que ele conseguir ou se a galera não tiver conseguido te ajudar antes né porque sempre tem isso lá e qualquer coisa você precisar mandar para ele você vai ter total apoio aí eh e eu indico muito mudou muito o nível do dos meus sites a a otimização vocês vão ficar Malucos é muito bom site fica muito rápido fora todo o resto
de aula que você vai ter muita aula muito conteúdo bom indico muito aí viu Bora E aí beleza tranquilo eh me ch Pedro tenho 18 anos e hoje trabalho com a design graças ao curso do Marcelo Rocha mas nem sempre foi assim nunca trabalhei com design nunca fui de construir sites pelo contrário era fazia gestão de tráfego algo bem diferente tal mas quando eu vi a oportunidade de mercado se abrindo para mim através do curso do do Marcelo através do Marcelo eu não hesitei em comprar e eu antes de comprar o curso eu não Sabia
Photoshop nada era muito leigo eu usava câ todas azaras que eu fazia não sabia me elementor nem PR que é o que eu mais uso hoje em dia não sabia nada namente nada entrava lá achava que era um río de informações para mim era a única coisa que eu não tinha ciência não tinha sabedoria não sabia não sabia mexer mesmo e e outra coisa eu não sabia vender eu não sabia vender eu trabalhava agência eu não sabia comunicar para vender mas dentro do do curso tem o Método do Marcelo Rocha que ele criou e disponibilizou
para todo mundo que tem acesso ao curso né que é o método 3c através desse método eu consegui o meu primeiro cliente através desse método e meu segundo cliente cliente através desse método também então sem de dúvidas esse curso foi a porta que se abriu a porta que se abriu e fez bastante diferença na minha vida profissional bom faz mais faz um pouco mais de do meses já que eu adquiri o Curso eu posso garantir que eu já tive o retorno do que eu gostei já tive o retorno investimento o curso já foi pago com
meus trabalhos que eu fiz e eu te falo também não existe comprar Não fique pensando atrás não fiquei pensando não se em Photoshop elemento aprender tudo isso e muito mais muito mais do que você imagina Oi pessoal tudo bem Me chamo Luisa Robins ã e sou especialista Web Designer atualmente Eu Sou aluna do Marcelo e eu vim aqui dar um pouco do Meu parecer sobre o curso e como como tá a minha experiência até até então o que mais me impressionou no curso não foi nem o o conteúdo em si porque isso eu já esperava
que ele daria o máximo dele e ele tá dando ele deu então o conteúdo em si do curso as vídeoaulas do curso são excepcionais não tem nemum que reclamar sempre tá atualizando ã então às vezes tu vê o Marcelo sem barba Às vezes o Marcelo com barba quer dizer que ele gravou uma aula nova então ele o curso Eles ele ele é melhor que uma faculdade porque ele sempre tá em atualização não fica só com os vídeos antigos que ele gravou então Eh conteúdo 10 de 10 e o que mais me impressionou dentro do pacote
que Ele oferece foi a comunidade do discord 100% a minha rotina agora se torna abrir o computador e abrir o discord para ver o que que tá rolando ali o que que tem de novo o que que tem de novidade o que que o povo tá falando então isso foi o que mais Me me abrir os olhos assim que eu que eu entrei nesse nessa comunidade o discord em si é excepcional qualquer dúvida que tu tenha pro mais simples que seja vai ter gente ali para te ajudar e tu consegue ajudar as outras pessoas também
com as com as tuas experiências isso é excepcional Então o que mais me além do das aulas em si o que mais me me chama atenção é a comunidade ativa que ele tem e tá criando ele tá criando um monstro literalmente Então além das dúvidas que tu que tu vai ter durante durante o curso tu vai ter comentários ali para ver o que os alunos estão falando tu vai conseguir acompanhar a trajetória de cadão e fazer parte disso também isso é muito legal então Eh poucos conseguem criar uma comunidade tão engajada quanto ele tá criando
no no discord então te espero nessa comunidade em breve espero existem dois grupos de pessoas Que precisam do curso do Marcelo Se quiserem ganhar mais dinheiro primeiro grupo de pessoas se você é empresário ou empresária assim como eu dependem da internet para aumentar suas vendas e depois do curso do Marcelo eu passei a vender 70% mais do que eu vendia com o mesmo imento em anúncios Por que que isso aconteceu porque a minha página ficou primeiro mais bonita esteticamente falando ficou muito mais profissional e Isso mudou meu posicionamento fez com Que eu atraísse que eu
conectasse com o público que eu tava buscando eh isso é um dos pontos o outro ponto foi a otimização da página ela ficou muito mais rápida uma velocidade muito maior com isso com o mesmo custo eu consegui ganhar ar mais leilões ali no Google eu consegui e ficar muito mais na primeira página do Google e eu consegui ter uma experiência de usuário muito melhor na minha página o que fez com que aumentasse essas conversões então assim Para mim foi crucial existe a minha empresa antes e depois do Marcelo e sugiro fortemente que você também adquira
o curso e Aprenda com ele a fazer isso que é tão importante e pros números de todas as empresas o segundo grupo de pessoas é o de design e web designers que desejam e prestar esse serviço para empresários e empresárias e oferecendo ovimento de sites Por que que é importante aprender com o Marcelo porque primeiro isso vai Otimizar o seu tempo você vai aprender técnicas para fazer eh páginas com uma velocidade muito maior vai fazer muito mais rápido depois de do que ele ensina eh segundo que você vai entregar um trabalho muito mais profissional muito
mais sofisticado e você vai ter muito mais indicações e vai agradar muito mais os seus clientes eh eu tive uma experiência muito ruim com o Web Designer que eu contratei que foi frustrante eh não tava dentro do que eu Do que eu esperava do que eu tinha falado o que eu queria eh tava muito pobre em Recursos assim podia ser muito melhor eh não tava rápida então assim muito frustrante eu não indiquei eu não fiquei satisfeita foi desgastante pro profissional também porque eu fiz de tudo para chegar naquilo que eu desejava então enfim é não
é legal Sabe não não prospera então eu desejo muito que você também se é designer se é designers Deseja também prestar esse tipo de serviço aprende com quem sabe aprende com quem faz isso direito aprende com quem tem sucesso e eu Marcelo é essa pessoa então sugiro fortemente eu indico fortemente comprei Tô satisfeita suporte incrível enfim não tem que falar Marcelo é incrível recomendo para você Fala Marcelo tudo bem Tô passando aqui agradecer pelo curso um curso muito bom eh assistindo só dois né os dois módulos ali de dos 36 que é captação e Conquista
já deu para né a gente conseguir fechar um contrato bom eh um site que antes a gente cobrava em média de 1.5 né 1,5000 e 2.000 no máximo e entendendo mais ou menos estudando o cliente a gente conseguiu ver a necessidade deles IMP tá deixou TT de R 4,3 né R 4350 pô quando a gente viu isso ali quando eu vi né quando eu vi o o a primeira parcela ali caindo né a entrada que a gente trabalha no sistema 5050 né Foi muito gratificante se saber que o investimento por si só ele já se
pagou né um site ele já pagou o curso todo Ola me nbre é César Salinas so de Ecuador e quio dar mi testimonio acerca del curso el qual imparte Marcelo es un curso completo con V aprend desde cero hac pginas profesionales idioma no ha sido un problema para m ya que yo hablo espaol Y el curso está en portugués Pero siempre Marcelo va a estar presto a dar el Soporte que necesite cada Uno de Sus alumnos totalmente garantizado Y agradezco esta ense que Marcelo ha puesto en nos