Como Criar um Site Completo do ZERO com Elementor na VPS + Otimizações + Segurança e Performance
2.807 visualizações • 15 de out. de 2021 • Nesta Super Aula eu vou te ensinar o processo completo para criar um site do zero, instalando e configurando na VPS com otimizações Premium. Link para o Elementor PRO https://elementor.com/?ref=2220 WP Rocket Performance https://shareasale.com/r.cfm?b=107594... Link para Hertzer VPS https://hetzner.cloud/?ref=Ouq10M5uoT9q Plugin de Segurança https://br.wordpress.org/plugins/all-... Plugin de Backup https://wordpress.org/plugins/updraft... Plugin de Otimização de Imagem https://wordpress.org/plugins/ewww-im... Mostrar menos Mostrar mais
o Olá seja muito bem-vindo a mais uma aula aqui para ficar na Escola Ninja WP e nessa aula atendido sair de muitos de vocês eu vou ensinar um processo do início ao fim passo a passo como criar um site utilizando o elemento da forma mais rápido prática eficiente e ainda assim utilizando uma VPS recebe muitos pedidos de vocês pediram de como utilizar a Reze Como criar uma se peça na reta é como fazer todo processo de instalação Como que eu faço os processos aqui internamente então atender
esses pedidos eu vou fazer esse vídeo aqui para você o que que nós vamos aprender criar um site do zero utilizando o elemento com o método mais rápido que se utiliza no mercado Tá bom então vamos lá nós vamos utilizar aqui uma VPS da resto na cama vs que nós utilizamos aqui na Escola Ninja WP tu e nós hospedamos nosso site lá é uma VPS muito barata e você vai conseguir ter sites aqui incrivelmente rápido para receber qualquer nível de acesso então primeira coisa vamos conhecer os pre ços aqui da
resta só para você ter uma ideia tá bom tem preço daqui a partir de 2.89 euros você não encontra nada no mercado brasileiro como esse preço tá bom isso aqui é uma VPS com diga de um CPU e 2GB de Ram tá aqui dois cpus 2GB de RAM 2 Duo CPU de 4GB de Ram e por aí vai só para você ter uma ideia de parâmetros tá bom só para vocês terem uma ideia essa GPS aqui de 4 cpus aqui ó só para você ser uma ideia essa peça de 4 CPU tem um cliente nosso e recebe uma média de 1 milhão e Qu inhentas mil visitas e
Ela utiliza essa VPS aqui só inibe de preço a gente pegar o Euro hoje o ator de euros hoje equivale a 100 reais só para você ter uma ideia essa VPS que hoje é vendido no Brasil por uma média só para vocês terem uma ideia de 600 há 700 reais por mês tá bom lavo mas meu site não recebe um milhão de visitas em seu site recebe seu a 100.000 cem mil visitas você consegue colocar numa vs dessa aqui tranquilamente de cinco euros se você seguir exatamente o processo q ue nós estamos ensinando aqui você
consegue né rodar em uma PSD duas cpus tranquilamente tá bom um Claro se você precisar de uma gordurinha mais você pode migrar para uma de 8 e tá tudo bem Beleza agora se o seu site foi muito pequeno foi um site ficar começando não tem muitas visitas você já pode vir de cara aqui parece de 2.89 euros tá bom E como é que funciona o processo da Hertz É muita gente tem dúvida pessoal toda a VPS funciona no no processo de pós-pago primeiro você usa dep ois bom então primeiro você vai cadastrar aqui
na reta você vai vir aqui no Sai na vai criar sua conta vai preencher todo o formulário que eles solicitam para preenchimento após isso eles vão autorizar sua conta ali tá bom você vai seguir o procedimento desse vídeo você vai colocar seu cartão de crédito e após os 30 dias você será cobrado no formato pós-pago primeiro você usa e depois você paga toda VPS americana é desse jeito tá bom eu já tenho aqui minha conta na reta Então eu vou fazer login aqui na minha conta então nós vamos começar a
criar um Cláudio aqui tá bom É muito fácil tá não tem método mais fácil de trabalhar com VPS do que esse método que eu vou ensinar para vocês passo a passo do zero tá bom essa é a oportunidade que vocês vão ter para trabalhar com GPS É legal vamos colocar o login sem aqui você vai colocar o seu login e senha E aí E aí tá beleza me lembrei aqui no meu painel Ok vou entrar aqui para criar uma VPS vou entrar aqui Aqui tem algum as coisas algumas vs que já tem tá bom E aí eu vou agora adicionar um
novo servidor aqui vou adicionar o novo servidor e aqui não importa tá muita gente tem dúvida Nossa vou escolher Alemanha vou escolher esses lugares aqui não tem problema porque a gente vai usar o cloudflare para fazer o roteamento para o Brasil tanto faz onde que você vai colocar vou deixar o bom tô aqui mesmo vou deixar esse primeiro essa primeira opção aqui tá bom E aqui eu vou colocar servidor aula a reação e acerte Ok vou ficar agora aqui vai não vou comprar né agora estou comprando aqui
ele já tá instalando aqui para Nova o servidor muito rapidinho é muito fácil de trabalhar com VPS e não tem nenhum motivo para você não trabalhar e só lembrando para você que vai usar esta o link para você acompanhar tá aqui abaixo o link da resta se você quiser contratar pelo nosso link de parceiro tá bom tá beleza minha VPS está pronta para isso eu vou precisar aqui do puty e você não tem pute aí ba sta você digitar no Google Cut fica puppysasha34 dar um control V ti beleza a porta que é
22 mesmo e olha só ele vai me levar para essa telinha preta eu vou clicar em essa tá bom bacana agora eu vou pegar o login aqui tá vou clicar em réptil e vou clicarem root password que eu quero Resetar senha de root e aqui tá meu login e senha eu vou clicar aqui com o botão direito aqui em cima vou digitar r o root e agora eu vou clicar uma vez com o botão direito do mouse porque eu já cop iei até a senha e vou dar um ente e vamos ver se ele vai logar às vezes ele dá um problema de loguinho se
ele der esse problema de login para você aqui não se preocupe basta você Resetar senha novamente tá bom cê Resetar senha novamente copia aqui e cola e pronto tá bom já logou agora o que que você vai fazer aqui abaixo do vídeo vai ter o link né o script para você instalar peninha então o cartão a Penny on install já vou pegar aqui o link para vocês já para ficar mais fácil aí tá bom é o link de instalação do apenas vou copiar isso aqui e vou colar uma vez com o botão direito do mouse Olha só ele
já tá instalando uma creme vou dar um viés viés aqui e orou Tá bom Agora ele já está fazendo o download aqui do a pena ou para nós ele vai fazer a baixar o pacote do a teriam vai fazer tudo isso e é e vai instalar o apenas para nós esse procedimento aqui pode demorar dependendo da sua internet aí uma média de cinco minutos tá bom então tem que aguardar Não mexa na t ela ok Não mexa na tela espere ele terminar quando ele terminar você vai receber um login e senha para você acessar o o a pena
Tá bom então Enquanto isso vou pausar o vídeo aqui que agora ele vai ficar rolando um monte de código aqui na tela e não tem necessidade de você ficar vendo aqui tá bom e esse aqui são os códigos que ele tá rolando só para você ver ele vai ficar rodando Esses códigos todos aqui e aí você aguarda ele finalizar Não mexa na tela tudo bem Então olha só aqui está o nosso servidor instalado e configurado O que que você vai fazer agora você vai pegar aqui para nós esse endereço aqui com essa porta e
vai digitar no navegador vamos copiar aqui comprou você eu vou jogar aqui no navegador aí você sai vai nos deve caminho aqui ó nós vamos então copiar esse caminho que control c botão direito do mouse uma única vez em ter Prontinho agora se você acessar aqui novamente ele acessou aqui o apenas para você o seu login e senha Ele está aqui ó eu v ou copiar control c control c aqui na senha é bem que maravilha aquele tá te perguntando Quais são as configurações que você quer na sua VPS a única
alteração que eu vou fazer que é do PHP que eu vou colocar PHP 7.3 e vou pedir para fazer o homem clique aqui agora o que que ele vai fazer na sua espécie ele vai instalar ou and next vai instalar uma S Kelly vai instalar o PHP vai deixar a plataforma redondinha para gente poder instalar o WordPress esse procedimento aqui também p ode levar de 5 a 10 minutos então sugiro que você não feche o navegador que você aguarde o processo finalizar bom então a nossa instalação aqui terminou olha só tá tudo
certo não tem nada aqui eu posso fechar agora primeira coisa que nós vamos fazer aqui como medida de segurança é alterar a porta padrão do apenas para isso você vai ficarem certinho eu vou alterar a porta aqui por exemplo um exemplo que eu estou dando Tá bom vou colocar porta 1245 a vou colocar essa porta 12:45 você po de colocar porta que você quiser Ok a senha usuário sente eu vou mudar também vou colocar a escola E aí vai me aqui peraí a Escola Ninja WP ouvir a colar é minha senha também vai
ser Escola Ninja WP temporária tá depois eu vou deletar você dois então preciso me preocupar Beleza então aqui eu posso mudar o título do meu painel vou colocar painel escola me GW com ele o e bacana então meu painel já tá instalado agora eu vou clicar aqui em Up Store a evoluir com a palavra clique aqui é para procurar um aplicativo que é para instalar o WordPress em um clipe tá bom ele vai procurar aqui na biblioteca dele e vai nos mostrar o legal do a pena que você tem uma flexibilidade muito
grande e tudo fazer tudo qualquer coisa aqui de qualquer utilização você consegue fazer você vai instalar esse painel aqui é porque é como se fosse um plugin que você coloca dentro do a pena que aí ele instalou WordPress em um Clic já faz toda a configuração de permissão EA faz tudo certinho ali tá bom é o método mais fácil da gente trabalhar aqui com o app no Beleza ele vai fazer o download aqui Infelizmente hoje a internet aqui tá um pouquinho lenta mas tudo certo ele é pequenininho esse
aplicativo Então ela instalação já terminou você vai habilitar essa opção aqui ok e agora a gente pode voltar aqui na nossa rama tá assim que você bota nessa home você vai ter aqui ó one-click depoiment eu vou clicar aqui vai fazer instalar Wordpress e vamos aguardar ele vai baixar t odas as listas Porque além do WordPress ele também instala outros aplicativos como jun é o grupo codeigniter laravel entre outros é aguardar aqui nós vamos colocar o WordPress e aqui eu vou colocar o domínio que eu
quero a Joyce Mattos. Com.br Lembrando que esse domínio então domínio que você vai ter que comprar né no registro.br ou em alguma empresa de registro de domínio a refletir não oferece venda de domínio Tá bom então você pode por exemplo entrar aqui no registro.br e fazer a contratação do domínio que você tem ou se você já tiver o domínio você pode utilizar ele aqui a versão do PHP 7.3 e eu vou agora instalar o WordPress ele já está iniciando depois do Wordpress Oi e aí ele vai finalizar para nós
Ok olha só já está fazendo o download aqui do WordPress Instalação feita com sucesso Tá bom então se a gente voltar aqui agora em websites Olha só já estou com Joyce Mattos aqui o que que eu tenho que fazer agora eu tenho que apontar o meu domínio agora aponta r esse site né para a empresa lá que eu coloquei o meu DNS daí eu já vou te dar uma dica para você que é para vocês utilizarem o cloud flare curso era gratuito é melhor ferramenta que tem que segurança a melhor ferramenta que tem de
performance para você ler a performance mas atenção o cloudflare não é uma hospedagem tá bom é muito importante você saber disso muita gente confunde vai falando que vai hospedar o site inclusive leva você não as pedras aqui no clube para você vir pula o seu site o clube isso é Beleza vou procurar aqui então Joyce Mattos e aí como é que funciona o povo de Israel você crie uma conta gratuita você e adicionar site coloca pro Joyce Mattos. Com.br ele vai adicionar o site ele vai ter um pacote é o
plano que você quer você vai escolher o plano gratuito não tem porque você por exemplo vou colocar um site aleatório aqui ó aleatório. Com.br só para vocês verem o processo e ele vai te perguntar o plano você vai ficar ligado vai confir mar o plano tá ele vai localizar os seus DNS se tá bom Se isso for um domínio novo não se preocupe não vai perder NS nenhum está certo tá bom ele vai procurar aqui e vai te dar uma opção aqui embaixo para você continuar E aí você continua Olha só beleza vou
continuar se for domínio novo não tem porque você se preocupa não tá bom vou pegar aqui no domínio novo e aqui ele tá pedindo para você alterar os DNS sair você tem que agora ir lá no registro.br e alterar os DNS saque para o cloudflare Beleza você tem que fazer apontamento aqui vai lá no registro.br ou onde Você registrou seu domínio e coloca os DNS lá vou dar o concluído bacana Só que não é esse domínio que eu quero trabalhar vou dar um concluído aqui novamente eu vou voltar aqui vou mudar
aqui para Joyce Mattos o domínio que eu quero trabalhar já é o domingo que você vai trabalhar também E aí bom então agora eu vou vir aqui em DNS por exemplo aqui ó DNS e vou mudar o IP para um IP do nosso na noss a VPS que é esse P aqui ó vou copiar esse tem aqui e vou colar aqui ó eu vou colar aqui vou deixar com proxy ligado mesmo pronto nesse momento que que eu acabei de fazer eu acabei de dizer eu já aprontei o eu já plantei lá no registro.br o cloudflare tá bom só para você saber eu já tinha
apontado isso lá G1 e vamo colocar aqui para vocês virem E aí ó eu vi aqui é o Joyce Mattos eu já estou com os DNS saque do cloudflare já está apontado tá então você deve vir aqui apontar seus DNS E a í sim que você apontar seu DNS Você deve mudar o IP aqui para o IP da sua Instância lá na reta tá bom que é o IP aqui o que você tem tá bom que esse pequi feito isso could fly vai começar a reconhecer seu site tá bom esse é o procedimento E aí feito isso basta você agora que ele tá em configuração
aqui ó em Website aba de configuração para nos habilitarmos ossl olha como é fácil habilitar o SL vou clicar aqui e vou habilitar o SL do site do Joice marcos.com.br ele já está lá no Cold play já tá tudo certinho agora é só vim aqui habilitar SL se você tentar habilitar SL dele e ele der erro é porque ainda não propagou então você tem que aguardar se ele ainda manter o erro ou e p tá errado ou você fez alguma configuração errada Tá bom então bacana seu Agora acessar aqui ó Joice match.com.br ele
vai me carregar a tela de instalação do WordPress Então a gente vai fazer a instalação do WordPress é aí agora nós vamos pegar aqui a português Brasil ele vai pedir os dados de banco de dados e os dados de banco de dados eles estão aqui ó databases e olha só aqui não tem um banco de dados criado tá vendo eu vou criar um novo banco de dados aqui na sua casa bebê Joice tá bom vou colocar local serve ela aqui tá tudo certo e vou submeter aquele tá falando que eu preciso de mudar a senha do root
então aqui eu vou clicar em root password e vou colocar aqui a de mim mesmo eu ver que você vai vai deixar E aí e vamos aguardar esse procedimento aqui até um proce dimento de segurança tá bom Tchau agora eu vou adicionar o banco de dados vou colocar bebê Joice tá e vou submeter e pronto cria o banco de dados o nome do usuário bebê Joice Então vou voltar aqui na instalação do WordPress vou colocar bebê Joice o nome do usuário para mim é bebê Joyce e a senha muda é uma senha é aqui ó vou pegar
nesse papelzinho aqui com o pior password voltar aqui e colocar aqui ó Beleza então aqui fica 127 01 e pronto olha só muito bem banco de dados criado En tão vou colocar aqui ó site joycimar só isso meu primeiro Haiti na VPS o peito a senha aqui vou colocar uma senha admin@com 23 A vou confirmar senha fraca ou por meu e-mail aí você quer tudo fez didáticos Então não precisa se preocupar tá bom não precisa de marcar essa opção tô marcando para fins didáticos que eu não quero que Index Esse site
ok é tão legal agora nós temos que aguardar ele finalizar a instalação aqui é bem rapidinho esse procedimento E aí nosso site já vai estar i nstalado e configurado nenhuma VPS bom então é nosso site já vai já tá pronto para receber muitas visitas E aí a gente vai entrar com o procedimento do elemento você vai ver que é muito rápido também então só para você ver que não tem desculpas para você não migrar para ver PS tá bom arrefecer a empresa mais barata que tem tem outras empresas obviamente tá
bom existem outras empresas dvs o APN ele funciona em qualquer empresa de VPS não somente na reta ele funciona na voltar ele fun ciona e na digital Ocean e funciona em qualquer empresa de VPS Tá bom a gente gosta muito da resta pelo preço dela tá bom até de mim admin@huawei.com a ver aqui Matos E aí E aí olá olá um chá Errei o nome de usuário aqui para vocês verem que gaste Né tava aqui gravando falando com vocês e renome de zoar mas que bom que isso aconteceu e agora eu tenho uma oportunidade
de mostrar para vocês Como que altera usuário aqui no banco de dados então vou clicar aqui ainda até mês PHP mas é d e mim ele vai abrir que o phpmyadmin para nós um OK pode ignorar tudo aqui vou clicar em bebê Joice vou vir aqui em usuários bebê user's e olha só ignorar tudo tá bom a nome do meu login Meu Primeiro site GPS que coisa hein é um Tudo bem não tem problema esse de crochê no o meu Lobinho Tá então vamos voltar aqui admin@huawei.com três se login mais estranho e se você quiser trocar a
senha do seu usuário aqui direto no banco basta você vir aqui por exemplo eu vim aqui trocar essa senha e colocar aqui em md5 você tem que lembrar que colocar aqui md5 beleza é um bacana pessoal já estou com meu WordPress instalado e funcionando agora nós vamos partir para a parte de criação de sites que é primeira coisa que eu vou fazer instalar o elemento aqui tá eu vou instalar o elemento é e o elementor pro porque o elementor pro ele é excelente ele me dá uma flexibilidade muito grande então
não tem como eu não trabalhar com elementor pro aqui tá bom então primeira coisa que eu tenh o que fazer instalar o elemento é na verdade a primeira coisa que eu tenho que fazer instalar o editor plástico tá que o editor classe que eu gosto muito dele então vou instalar aqui o editor clássico vou instalar o elemento o elemento e falar que o elemento ó e vou também instalar o elementor pro porque todo mundo que trabalha com criação de sites precisa trabalhar com elementor pro é um ecossistema não
tem jeito de não trabalhar com elementor pro Tá bom então agora eu vou instalar o elementor pro e se você ainda não trabalha com elementor pro aqui abaixo desse vídeo dessa aula vai ter um link para você adquirir elementor pro tá bom não é jaba não tal elemento o próximo você não trabalha então tem começar a trabalhar você vai ver que é o outro outra outra pegada é outro jogo tá bom então vou enviar que o elemento parou agora pegar um elemento o elementor pro vou instalar ele Oi e aí só você
olhar aqui abaixo na descrição do vídeo que você vai ver aí o elemen tor pro nosso link de parceiro da elemento Beleza vou agora ativar o elementor pro tá rottweiler aqui e colocar nossa conta aqui e não compra o elemento ali nenhum site MercadoLivre e Petra a bom não vale a pena é muito barato comprar o elemento original pelo que ele te entrega ok muito barato pelo que o elemento te entrega tá elemento de entrega produtividade eu sempre falo as pessoas me pergunta suave porque comprar elementor
pro eu falo tempo você não está comprando elemento própr ia tá comprando o tempo e você tempo em imensurável você não consegue é dizer quanto vale um minuto depende Então você não está comprando o elemento o próximo comprei o tempo e o tempo é que vai fazer isso que a gente vai fazer agora olha só agora vou estar o outro plugin aqui tá perguntar exato vamos instalar Plugin aqui darem vato e isso é um processo rápido e ligeiro de criação de site pessoal rápido rasteiro e ligeiro tá bom rápido
rasteiro e ligeiro de criação de site Ok ent ão vamos instalar ele aqui e pronto agora que que eu vou fazer vou vir aqui e vou colocar freaks aqui vou pegar um template que eu quero aqui por exemplo para trabalhar vamos supor que eu queria trabalhar com esse aqui ó grow your Business simples eu quero esse cara que aí você obviamente vai olhar qual você quer qual o melhor aprende minimamente projeto que você tem você pode fazer um review aqui do projeto Tá bom você pode trabalhar dessa forma então
por exemplo o seu cliente está q uerendo um site mais ou menos na área de educação você pode usar esse aqui por exemplo ao seu cliente tem alguma coisa na área de esporte pode tentar apresentar aqui para ele então não se apegue exatamente o que tem frente inteiro se aprende a proposta arquitetura da informação do template tá bom essa é a jogada eu vejo muita gente errando querendo comprar template pronto gente vai por mim noventa porcento noventa porcento de todos os tempos a cobra não importa se
você compra se você pega gratuito se você baixa na internet você vai ter que mexer em alguma coisa nele então não se aprende ao template se apegue arquitetura de informação e eu gosto muito dessa arquitetura da Cyber Security aqui vou instalar ela vou ver o kit aqui tá bom Agora eu vou importar as páginas eu quero usar eu quero utilizar Por exemplo essa página que como home e eu quero utilizar essa página que como serviços eu quero utilizar e essa página que como single Services que vai ser a
página d e serviços sobre nós hoje e vamos pegar aqui ó Price e contato o importando as páginas do meu site tá vendo aqui já são as páginas do meu site não tem segredo já tá importando aqui para mim ó já importou para mim já vai deixar disponível aqui para mim né o as páginas do meu site bom já tá finalizando aqui ahome ahome a maiorzinha Oi ok bom então legal então já instalei aqui olha o que que eu vou fazer agora repare gente vai ler as páginas do meu site Tá bom eu agora vou vir aqui em
páginas na verdade vou fazer uma coisa primeiro aparência tema eu quero mostrar uma coisa para você só eu estou utilizando o tema padrão do WordPress com uma boa prática vou remover os demais temas tá bom só você não trabalha com o CWB com esses temas não trabalho porque eu tenho elementor pro elementor pro dispensa qualquer tema seja tema Premium seja tema ou sem WP seja o Astra seja qualquer coisa ele dispensa porque o elemento o pronome de entrega isso vou atualizar esse tema aqui para a
última versão o twenty-twenty tá bom não tenho que comprar tema tá só como vocês estão vendo eu não preciso de comprar tema agora eu vou vir aqui vou querer Minhas páginas normais tá eu vou criar minha página tranquilo aqui ó home page home page eu vou publicar ela como todos os tá vou publicar como Canvas Porque como o Canvas que eu vou utilizar o template do elemento eu não quero nem o topo e no rodapé desse desse tema padrão aqui tá bom tá vou publicar como Canvas vou abrir ag ora o meu editor
do elemento eu vou importar minha home page Então como vocês podem ver eu posso por exemplo pegar aqui meus modelos olha só já tá aqui ó me pedir pro vão inserir sim venceria aqui E aí olha só a minha página aí no ar Então vou publicar a minha página home page E aí E aí eu vou publicar ela aqui ok se eu saber que você tá como o Canvas mesmo vou colocar aqui como cansaço elementor Canvas ele acabou perdendo ó e vou visualizar minha página e vamos ver e olha só olha o m eu site aqui como é que ele
está Olha isso aqui É bem a forma mais rápida e fácil de criar um site com essa não tem não tem sinceridade não tem forma mais fácil e rápida de se criar um site eu acabei de tirar minha roupa e queijo tá é claro agora que eu posso crer na home page eu posso acessar ela aqui e trocar os conteúdos do meu site da minha home page Ok então eu vou acessar minha home page novamente e agora eu clico aqui e vou trocando conteúdo conforme a necessidade do meu clien te olha só Oi meu bem Troca os botões
contra coloca os textos posso mudar os ícones OK posso trocar as áreas de atuação agora uma questão mais de conteúdo seu cliente ou conteúdos eu mesmo qual o conteúdo que você vai colocar em cada pedaço basta clicar nos lapinhas aqui ó vai clicando nos lapinhas e o legal do elemento pro por exemplo ele tem formulário de contato Olha se eu não tivesse utilizando o formulário de contato do elementor pro eu não teria essa opção aqui eu teria que i nstalar o plugin de formulário e fala outro plugin
outro joguinho outro encher meu saco de produto e pela metroplan não preciso agora basta eu vim colocando conteúdo aqui tá bom beleza criei minha home page tá certinho agora eu vou criar as outras páginas eu vou vir aqui primeiro e definir ela como home page links permanentes que eu vou definir ela como home page tá Primeiro vou arrumar o link permanente aqui vou colocar opção de nome do post e agora vou colocar aqui leitura e Vou d efinir minha home page O Bacana agora eu vou entrar na
minha nova página aqui e vou criar por exemplo a minha página de contato eu vou publicar essa página ó e vou abrir o elemento e eu já pedi a página de contato lá você lembra dela Eu já peguei a página de contato vou clicar aqui na engrenagem aqui em baixo vou colocar como Canvas Ok e vou vir aqui na pastinha páginas já tá aqui vou pegar meus modelos e tá aqui ó contato e vamos novamente colocar nossa página Vamos ver se ele não resetou aqui né ele costuma resetar lá ele reset Tá vendo quando eu
importo vou colocar elementos Kansas o About Us on ó tá vendo aqui então beleza Olha só então aqui tá minha página de contato ok então legal só que você deve estar notando que tem algo de estranho porque o meu cabeçalho não tá aqui tá faltando render né o header não tá aqui então olha só é uma outra coisa muito interessante que tem lá exato é a parte dos fragmentos do site agora eu vou te ensinar como é que c oloca um header no site inteiro Eu já queria a minha home e eu já criei minha página de
contato só que minha página de contato ela não tem cabeçalho e não tem rodapé e ficou alguma de faltando aqui eu preciso de colocar um cabeçalho ou rodapé Universal Ok então quê que eu vou fazer vou vir em modelos theme builder e agora eu vou que tem Renner ó e vou adicionar um novo item aqui eu vou colocar render e vou criar o modelo Oi e aí ele vai aplicar para todos os sites tá bom Aqui tem um modelo beijo só que aqui não tem um modelo de header tá vendo Então eu posso voltar aqui na exato
por exemplo e olha aqui ó vamos ver os tipos aqui ó e Aqui nós temos todos os kits instalados mas eles não têm cabeçalho mesmo tá se fosse expandido aqui ó ele não tem cabeçalho mesmo tá mas eu posso por exemplo pegar os blocos e onde e vai abrir aqui para nós os blocos eu posso colocar um render por exemplo vamos pegar um remédio aqui eu vou pegar um rede aqui de para trabalhar com aq uele menino lá por exemplo vou pegar esse remédio ele aqui ó Ah tá vou pegar esse header eu vou colocar a minha
cor essa esse background que tá aqui ó e vamos ver é um background gente está aplicando Certamente ele tá aplicando background degradê Olha só um linear dessa cor aqui e dessa primeira cor para a próxima cor tá bom é um verde Opa Tá bom mas ele também tem um background aqui ó e olha só isso também tem esse background então que que eu posso fazer eu posso vir aqui o e mudar essa cor de fundo o gradiente vou colocar esse Verde aqui que ele já colocou e vou colocar um verde mais escuro para
combinar com a minha identidade visual e aqui ó vou colocar um verde aqui ó e eu vou tirar um pouco de capacidade de se Verde porque eu posso como imagem de fundo aqui ó e essa imagem que vocês estão vendo aqui ó eu vou salvar ela aqui no meu computador Talvez o Natal ah as imagens os pegar essa imagem aqui é o nome da imagem aqui é com p e essa aqui ok e olha s ó mais ou menos só para você ver aí eu posso colocar aqui ó vou ver ela mais para baixo eu vou deixar assim por enquanto vou mudar esse
botão aqui ó eu posso mudar a coisa esse botão aqui uma cor mais bacana um verde né é um verde aqui mas combinando com a identidade visual E aí beleza vou pedir para publicar esse site se render no site inteiro Ok publiquei no site inteiro Olha o que que eu vou fazer aqui agora vou vir nessa página aqui vou editar com elemento ele colocar meu cabeçal ho aqui muito fácil muito fácil e olha só vou pedir para adicionar vou adicionar aqui por é política é que eu vou carregar um template a descarregar
o template aqui do elemento que eu vou colocar meu redor aqui em cima Oi e aí você pode fazer uns ajustes finos conforme a necessidade Como eu disse todos site precisa de ajuste todo site aqui ó e aí você pode fazer o mesmo procedimento aqui ó febre por exemplo rever modelo né Nós temos aqui o header modelo deixa eu ver se é isso aqui e n ós temos esse remédio aqui também a pele com nave aqui é rolo né então vamos pegar esse aqui mesmo e esse primeiro aqui bom então bacana eu vou fazer o
seguinte agora vou zerar primeira coisa colocar esse aqui como largura completa vou esticar sessão vou zerar todas as laterais o que é que eu vou tirar o ped oi olha só e tem um menu que vai Aqui tá bom então e eu não queria o menor ainda tá só que agora é só não ficou tão bacana tá na com esse background de fundo não ficou tã o interessante não então eu poderia colocar somente uma cor de fundo aqui eu deixo até branco branco ficar é melhor porque aqui ó já tá verde então não ficou legal isso
aqui então quê que eu vou fazer aqui então vou editar o template vou editar o template e vou por Branco porque branco vai ficar bacana porque vai ficar um tão sobre pão então aqui ó como é que eu vou por uma cor preta e aqui eu vou pro Branco eu vou remover essa imagem daqui EA que eu vou por branco e ele tem um de gradê aqui que eu vou até resetar ele E aí beleza e aqui ó aí que legal bom então aqui tá bacana Deixa eu só colocar mudar isso aqui para o Opa eu só tenho aqui e deixa eu só ver onde
que ele tá aplicando essa cor aqui sobreposição de fundo ele tá aplicando a sobreposição defunto Aí sim legal ele tava aplicando a sobreposição de fundo só que tá muito grande se tem esse esse cara aqui ó toda o Zé vou zerar Esses prédios dele aqui tá muito grande tá vendo tem um espaço tá muito largo n ão tá legal e olha só vou colocar simplesmente 20 aqui e 20 aqui tá ótimo isso aqui ó esse menu aqui eu não tenho nenhum menor ainda então por isso que ele não tava gritando meia-noite eu tenho
que criar um menu lá ainda tá Então olha só vou vir aqui agora eu vou criar os menus eu vou criar um menu bem básico tá aparência menos eu vou colocar aqui ó menu eu vou colocar aqui ó contato só para Vocês entenderam contato e home tá contato e Roni estão aqui eu vou colocar home as outras páginas só vou fazer importando elas gradativamente tá Vou atualizar essa minha página que para o menu aparecer e olha só menino já apareceu aqui para nós um OK aí aqui agora né horizontal mesmo vou colocar
isso aqui lá home tá vendo aqui o estilo dele normal eu vou colocar preto e um Rover aqui vou colocar um verde um verde musgo aqui um verde mais escuro Bacana Então beleza olha agora Como que meu site está eu vejo aqui na home page Não apareceu nada tá bom vamos colocar o header aqui na home page nós vamos tentar entrar na home page para editar com elemento e o tarak bom então vamos voltar aqui agora adiciona nós vamos colocar um template aqui em cima E aí e para vocês ver que ele deu
uma travadinha é um Beleza então não vai funcionar aqui Um item o template o Éder e em aí já está ele vou zerar aqui novamente vou colocar largura completa que vou zerar aqui ó verei E verei fazer aqui para minha coluna um pontinho ao meu redor está aqui eu posso volt ar aqui na minha home page agora bom então aqui está meu site posso colocar esse aqui como toco fixo meus menos posso aumentar essa fonte tá E aí eu posso clicar por exemplo em contato e olha só minha página de contato já veio com
meu header é a parte de contato já tá prontinha' Prontinho agora é só entrar e trocar o conteúdo aqui e você vai colocar as outras páginas também que você já viu como é que importa a página beleza e agora eu vou mostrar para vocês o processo de segurança n é então vamos fazer o seguinte e eu voltar aqui todas as páginas estão com elemento aberto né obviamente então para questão de segurança nós vamos instalar aqui o peludinho Caillou É opinião excelente de segurança Tá bom então nós já vamos
cuidar da segurança do nosso site WordPress você vai instalar esse plugin aqui ó all-in-one farrow E aí beleza agora nós vamos configurar aqui ele primeira coisa Faro nós vamos configurar o Firewall dele e você vai marcar todas essas opções aqu i ó vou seguir Exatamente esse procedimento que eu estou fazendo Tá bom então vamos adicionar novas regras de Faro e vamos virar que a regra do Lista Negra 6 G nós vamos colocar robôs na internet e vamos impedir Hot links O Bacana agora você vai clicar
em segurança de arquivos e olha só veja que a segurança dos meus arquivos não está bacana eu vou clicar aqui então para ele ajustar essa permissão para mim ó vou ajustar mais uma permissão e vou juntar próximo a permissão ou seja pe rmissão dos meus arquivos estão todas Ok legal agora eu vou vir aqui nessa água então de arquivos vou marcar essa opção o acesso ao WP também ok então parte de segurança tá ótimo agora nós vamos cuidar da parte do backup né que eu tenho que fazer backup do meu
projeto então para isso nós vamos fazer a parte do backup aqui e o pedreste Plus Lembrando que o apanhou também faz backup lá tá bom você pode configurar mas isso eu não vou abordar agora tá se você tiver interesse nós t emos um curso de GPS mais completo dentro da Escola Ninja WP lá eu ensino mais coisas a respeito do APN o utilizações mais sofisticadas etc Tá bom vou agora clicar aqui para configurar o meu backup vou colocar isso aqui como diariamente que o backup de arquivos e o backup de
banco de dados a cada hora você vai marcar a opção de Google Drive ou Dropbox o que você preferir e vai fazer o login na sua conta porque ele vai mandar o backup para nuvem Tá bom você vai clicar aqui vai aut enticar na sua conta para eu fazer o backup na nuvem Beleza então feito isso a basta você vir aqui e ele vai fazer o backup para você defamar automatizado e para finalizar né Nós vamos agora preocupar com a parte de performance que eu tenho que preocupar com essa parte de performance para
isso eu vou contar com a ajuda do WP Rocket que é o melhor plugin de performance para o WordPress o link para você adquire wp-rocket vai estar aqui na descrição do vídeo ele não é gratuito tá bom ele é o melhor que existe não tem outro que supere ele e vale cada centavo que você vai pagar nele tá bom é o cliente eu já uso há mais de quatro anos o WP Rocket já usa ele há mais de 4 anos e nunca me decepcionou beleza eu nós vamos configurar agora o WP Rocket configurações o Ok vou clicar aqui
otimização de arquivos e vou marcar todas as opções aqui e as últimas versões do WP Rocket tem não tem dado muitos problemas de quebra de site eles criaram por mim realmente muito bom tá então vamos colocar aqui ó vamos salvar o WP Rocket e vamos agora otimização de mídia aqui ou espera aí tem nada de salvar vamos dar otimização de mídia G1 bom e uma opção muito legal que o WP Rocket tem a opção de pré-carregar que eu vou mostrar esse aqui agora para você só para carregar você vai tirar
essa opção aqui ó Ok vai deixar seu site ainda mais rápido beleza e tu vim aqui vamos fazer uma utilização no banco de dados para remover algum lixo que pode ter ficado vam os ver aqui no banco de dados e olha só vamos marcar isso aqui tudo para ele ficar utilizando o banco de dados para nós e quem E aí é isso o nosso site o seu site WordPress se você seguiu esse procedimento provavelmente está pronta a gente gastou um pouco mais de uma hora mas nós fizemos o procedimento completo desde a GPS vez
a instalação do WordPress elemento performance segurança e backup fizemos tudo Claro a parte de conteúdo não tem como eu falar para você sair e vai cada um vai colocar o conteúdo que melhor atender a necessidade de você tá bom então Olha só esse aqui é o nosso site feito um elemento Tá bom você poder integrar ele com como esse facilmente vamos ver como que está a performance dele aqui no GP metrics e vamos analisar aqui como está a performance dele todos os links que foram utilizados nessa aula
vão estar aqui na descrição desse vídeo para você utilizar é com esse método aqui tirando a parte de conteúdo do seu cliente ele vai ter que te mand ar você vê que em pouca um pouco mais de uma hora você consegue colocar um site no ar Tirando a parte de conteúdo que essa realmente demora tá não tem jeito e você já tem um conteúdo todo já sabe tudo que vai pôr então e um dia talvez você vai conseguir colocar um site lar se você já tentou do conteúdo Tá bom se você não tem tem que providenciar tá
bom e veja que ele carregou aqui com 10 segundos Olha só vamos ver aqui o que que acontece e veja que ele está acusando 67 aquisições ag ora olha o que que eu vou fazer eu vou analisar ele de novo é isso aqui é normal tá bom dele acontecido primeiro acesso tem um delay Então vamos aguardar aqui ó o próximo acesso dele É para você vir a e agora por fim nós vamos utilizar as imagens do site porque o site veio com as imagens padrões né do WordPress e agora a gente tem que utilizar um pouquinho essas
imagens aqui eu vou utilizar o e www para utilizar nessa tarefa porque as imagens elas pesam muito o site então nós precisam os né fazer isso eu wp-rocket não utilize imagem ok bom então eu vou clicar em configurações e www e aqui ó nós vamos clicar no Advanced Vou colocar aqui 85 Vou salvar nós vamos pegar aqui a parte de res aisi converter J pegue tudo bem webpeak ele não tem ainda mas tudo bem vamos ficar em mídia otimização em massa Vamos pedir para ele a utilizar todas as imagens para nós
ele vai otimizar 29 das 115 imagens aqui como 115 imagens são poucas imagens então ele vai fazer o processo rela tivamente rápido uma das cinco imagens já foram utilizadas nos aguardar então o procedimento até finalizar ele tá ele vai demorar uma média de dois minutos para utilizar as imagens é aguardar aqui vou pausar o vídeo e aí eu volto Oi e aquele está finalizando o procedimento né ele vai começar a fazer um outro procedimento aqui né E aí você só tem que aguardar então vamos ver aqui como é
que tá a performance do site agora vou pedir para utilizar de novo rodar o GTA metro que você aqui d e novo após as primeiras utilizações de imagem vamos ver como que está a velocidade do nosso site G1 é aguardar aqui oi olha só 14.1.2 tem muitas utilizações Sem muitas utilizações já bateu aqui 4.2 tá obviamente são é uma utilização primária né isso aqui basicamente instalando o plugin ali do elemento e nós podemos também utilizar aqui no a Peniel em uma opção lá que eu vou P Cash ativar o apk
espera ele acelerar o carregamento dos escritos do WordPress também ajuda muito tá bom e ntão como vocês podem ver nós conseguimos uma performance é ótima aqui para o nosso site sem utilizar muitas imagens né Aqui tem outras imagens que podem ser utilizadas mas só que já é utilização que tem que fazer manual tá você quiser uma otimização manual das imagens que veio no tema então se eu utilizar essas imagens né fizer mais umas otimizações e principalmente em todas as imagens que tudo aqui a imagem
que tá que ele está acusando aqui é mais questão de imagem a logo do WordPre ss e tal fizer uma otimização mais bacana EA gente consegue ele chegar no três segundos tranquilamente tranquilamente e de bônus para finalizar esse vídeo eu vou te mostrar quanto turbinar o seu servidor VPS para ele receber muitas visitas que ele já naturalmente vai receber Tá bom agora é uma dica bônus aqui para finalizar essa aula masteries aulão aqui para o seu servidor ficar potente tá bom potente que é nós vamos
voltar aqui na nossa VPS Você vai clicar agora hein de home page e aqui ok Você vai ficar enrolando peixe Você vai clicar em PHP 73 você vai clicar agora em extensões bom e você vai ativar essa extenção aqui ó para acelerar o carregamento dos script do PHP você vai ativar essa extenção aqui ó do mesmo Cash bom e você vai instalar essa extenção aqui do Red Esquece essas três extensões juntas parado seu servidor um foguete você vai conseguir receber o triplo de visitas que você normalmente já
iria receber porque pelo seguinte o apê Cash ele ace lera o carregamento dos scripts PHP sem os clipes de demora 30 segundos ele vai carregar pela metade do tempo só para você ter uma referência homem cast vai fazer cast na memória RAM para fazer cast das coisas do ovo depressa na memória RAM e o head squash vai fazer teste das consultas do banco de dados ou seja eu não vou mais ter que ficar utilizando a CPU ali do meu WordPress para poder fazer as coisas beleza e aí nós vamos voltar aqui agora
no nosso Wordpress e as imagens terminar am Você vai clicar agora instalar um plugin chamado redes mesh primeiro and Splash Ah tá bom vou entrar no help e vamos falar esse cara aqui ou enviar-me help G1 é legal nós vamos instalar plugins and skate O que é isso aqui ok G1 Ah beleza então vamos configurar o engines help vamos habilitar ele aqui e vai fazer o cash no Head squash tá lembrando que o WP Rocket e o enviar nesse help é diferente as funcionalidades dele tá vou ativar agora o objeto cast
de objeto aqui que é o hash tá bom ele ainda tá dando aqui como não conectado porque tá instalando lá no servidor ainda tá bom quando eu terminar de instalar ele vai funcionar aqui beleza agora meu amigo ou minha amiga o seu servidor está pronto para receber milhares de visitas enviares dela você não vai mais ter que preocupar com seu servidor caindo toda hora saindo do ar e nem coisa do tipo porque eu sei que tu tá pronto para receber o número de visitas que eu acho que você nunca considerou
para o seu site e ele não vai cair bom ele não vai sair do a obviamente Eva e DPS de 2 euros Se você precisar de mais poder de processamento você pode virar as VTS de poder de processamento acima mas com essas configurações o seu servidor o seu site eu vou te pressão cai mais não cabe ok aqui ele tá dando esse tempo de carregamento até por conta das instalações que ele está que o servidor está fazendo lá mas o tempo de carregamento dele padrão Ali vai se estabilizar daqui a pouquinho em
3 se gundos e meio três segundos ok ah é porque eu tô fazendo várias instalações aqui no servidor se eu vier aqui ó olha como é que a máquina tá não sei se vocês conseguiram ver mas aqui ó o servidor está fazendo várias instalações aqui ok isso aqui é normal tá bom ele ficar desse jeito é normal porque eu tô fazendo instalação do Head squash do micast tô fazendo várias instalações aqui por isso que ele tá desse jeito tá mas assim que ele terminar as instalações ele vai voltar ao normal tá então
não se preocupe isso aqui é supernormal tá supernormal se eu vier aqui instalações ó ele já tá instalando e já instalou a p Cash e agora tá instalando nem Cash aqui para nós e depois ele vai instalar o head squash E aí ele vai parar de dar esse problema nenhum problema né porque o servidor está processando ali para instalar nas coisas tá bom então no mais é isso ela terminou já voltou a bater quatro segundos ele vai ficar oscilando ali de três segundos a quatro segundos é isso aqui então quando
quanto mais visita Se receber o seu servidor não vai ficar mais em sobrecarga ele vai estar muito rápido aqui para processar beleza e até melhorou um pouco mais a velocidade aqui e vamos aguardar tu já melhorou um pouco mais Então basicamente é isso espero que vocês tenham gostado dessa aula tá bom é não importa se seu site é uma loja virtual Não importa se o seu site é um site simples ele tem condição de ser um site performático ele tem condição de ser um site que carrega em poucos segundos
tá bom ele tem condição de ser um site que recebe milhões e milhões de visitas Não importa se WordPress beleza e se você precisar de alguma de nossos ajudas para seja para uma utilização seja para o auxílio técnico na VPS seja uma consultoria eu vou deixar que abaixa também os nossos dados de contato elas você quer agendar uma consultoria com a gente seja de uma utilização de uma migração talvez você tá na hospedagem tradicional você quer migrar para uma VPS já qu er fazer o processo
todo utilizado você pode entrar em contato conosco aqui tá bom e no final aqui só precisaria fazer essas otimizações dessas imagens e a ferramenta não fez e já deixaria a VPS redondinha esse site aqui em todas as utilizações manuais que terá que ser feitas aqui agora tá utilizações automatizadas todas foram feitas agora é utilização manual mesmo que é essas imagens aqui que elas têm um peso muito grande e aí a gente consegue chegar em 3 segundos dois s egundos e meio tranquilamente a esse site
que ele utiliza muitas imagens Ok então espero que você tenha gostado todos os links utilizados estão aqui abaixo na descrição do vídeo Um abraço e até o próximo vídeo aqui na Escola Ninja WP Otimizações Segurança e Performance
0 Comentários