Como Criar SITE Com ÁREA DO CLIENTE e FRONT END (WordPress, Elementor e Jet Engine)

[Música] Fala galera me chamo Rael M sal Ninja cara no vídeo de hoje aí vamos ver como criar Esse site é um site para profissionais onde a gente tem uma área de login e uma área interna onde a gente vai cadastrar itens para os usuários os clientes a gente já vai ver aqui como que funciona esse tipo de site você pode aprender para vender ele para pessoas empresas todo cliente precisa de uma área de login uma área de membros uma interna para que seus clientes vejam treinos dieta processos PDF texto foto onde que o João

logando na conta dele ele veja os dados dele as informações dele o Pedro veja as informações do Pedro e assim por diante então até a área interna que ela é dinâmica de acordo com cada usuário beleza Eh vamos dar olhadinha primeiramente no projeto e logo na sequência vou te mostrar como cria tudo então obviamente para direcionar o exemplo aqui da aula eh eu queria aqui para advogados porém Rafa Meu cliente é um nutricionista cara você consegue adaptar tranquilamente Ah não meu cliente é um personal train você consegue adaptar independente do nicho enfim é só pegar

aqui a lógica e fazer as adaptações Ok então esse é o design que a gente vai poder criar cara layout bonito moderno Seguindo aqui tudo que tem relacionado às leis do Web Design Ok então isso aqui Já te ajuda a vender mais esse tipo de site porque imagina o cliente ele abre e vê uma página dessa fica muito mais fácil de você conseguir vender Porque design bonito gera credibilidade Ok então tá aqui a página porém não só a página a gente vai criar mas também o sistema vamos dar uma olhadinha aqui no sistema o cliente

estando logado ele vai ficar aqui minha conta Rafa o cliente não tá logado o que que vai acontecer te mostro também ele vai acessar mostrar aqui vai clicar em login e vai aparecer aqui ó login do cliente beleza ã então clicou aqui em minha conta aqui vai aparecer os essos ou PDF ou treino ou a dieta ou o que você quiser cadastrar do Rafael se eu logar na área do João vai aparecer os dados do João aqui se eu acessar a área de membros da Maria vai mostrar Só Informações referente a Maria e assim por

diante Beleza então essa linterna ela boa que funciona para todos os clientes você vai cadastrar conteúdo individual em uma área de membros por cliente galera Ó o valor da aula que eu vou ensinar aqui para você cara você consegue fazer muita grana com esse tipo de site aqui ó vai mostrar no caso processo mas poderia ser direta PDF o que você quiser clicou vai para uma página onde mostra mais detalhes aqui eu trouxe Eh esses campos né mas poderia ser imagem ã trouxe texto poderia ser foto também aqui eu trouxe vários pdfs é uma coisa

que o pessoal pediu bastante Ah Rafa beleza anexar um PDF eu sei como que que eu anexo mais de um PDF aqui no sistema no Jet Engine eh eu trouxe aqui para poder ensinar para vocês tá então você vai conseguir cadastrar se eu voltar aqui acessar um outro ele já mostra aqui para mim bonitinho outra coisa legal Quero mostrar aqui para vocês que eu coloquei no sistema eu tô nessa aba deslogado Se eu tentar vir aqui ó estando deslogado ele vai identificar você não está logado você precisa fazer o seu login né é uma área

exclusiva de cliente aí a pessoa vai ficar aqui fazer login cai na tela de login faz login com seu usuário e com sua senha eu vou explicar com mais detalhes como que funciona o sistema de registro né Como que você passa pro seu cliente Fica tranquilo que eu vou te ensinar a administrar também ã e depois de ter feito o login aí o João ou Pedro a Maria e assim por diante vai acessar e vai conseguir aqui ó identificar as suas informações né seja um processo seja um PDF seja um eBook seja uma dieta seja

um treino de academia seja o que você quiser beleza ã então basicamente Esse é o sistema que a gente vai ver nessa aula tanto a nível de design quanto a nível de sistema eu vou te ensinar os dois cara se você gosta desse tipo de vídeo você curte já faz o seguinte esmaga o dedo no like se inscreve no canal e já deixa aqui embaixo nos comentários a sua sugestão de sistema pra gente poder desenvolver utilizando aqui WordPress elemento Jet Engine e dependendo até o comerce para pagamento integrado a sua sugestão é bem-vinda aqui pra

gente inclusive galera Vou deixar emai na descrição link no nosso treinamento Deia pro onde você aprende do zero a criar sistemas sem códigos ou programação de uma maneira simples e fácil a gente te entrega template digitável de bônus a gente te entrega suporte na comunidade dentro da comunidade tem um sistema de vagas onde a gente tá postando toda hora vaga de freelan para você conseguir pegar projetos e ganhar dinheiro criando ses então é um pacotão bem bacana vale muito a pena você conhecer eu vou deixar o link na descrição e também vou deixar o link

da nossa loja onde você consegue comprar esses sites assim ó esses templates editáveis para você poder utilizar seja no seu site ou o site do seu cliente criar o site de uma maneira muito mais rápida você já s o template pronto não precisa criar do zero só vai editando em cima eu vou deixar os links na descrição dito isso vamos lá pro vídeo pra gente ver aqui na prática como funciona então vamos lá galera seguinte Eh cara para facilitar Eu sempre gosto de utilizar esse mapinha mental que tem todos os passos aqui são do Passo

um ao passo quatro ao final do do quarto passo site ponto aqui seja para você utilizar seja para vender para um cliente beleza e vamos às dicas iniciais antes da gente iniciar aqui o passo um que primeira coisa não vou entrar em teoria a aula vai ser prática direto ao ponto então não adianta cara entrar aqui na aula e ficar assim ó parado me assistindo você não vai aprender vai clicando junto comigo para você ir aprendendo como que cria o site Como cria sistema e como coloca toda essa estrutura no ar para que você entenda

para vender o site de fato aí pro seu cliente conseguir ganhar dinheiro com criação site é um serviços que tem muita demanda Principalmente quando a gente une layout e sistema que é o que eu vou te ensinar Então tudo prático direto a ponto eu vou enxugar o máximo as informações para ir direto clique a clique no que a gente tem que fazer para sair o site pronto beleza outra coisa Rafa você fala rápido você fala alero Depende muito da percepção de cada um você achar que tô falando muito rápido muito de tem uma engrenagem aqui

no vídeo você consegue ajustar a velocidade ou então pesquisa vídeo Speed Controller você vai encontrar essa extensão e você consegue né ajustar a velocidade do vídeo de uma maneira mais simples eu utilizo cara tem hora que eu acelero tem hora que eu diminuo eu tenho essa flexibilidade beleza outra coisa eu vou deixar na descrição o material didático grátis para você se acessa faz o download porque vai ser necessário material didático vai vir aqui é a imagem e um pequeno codigo Zinho também que você vai baixar aí você vai ver a gente vai deixar tudo pronto

para vocês tá Rafa eu não quero só a o material didático só as imagens por exemplo eu quero o template digitável pegar esse site já sair com ele pronto e aí eu vou acompanhar a aula para editar em cima se quiser comprar o tempate editável é opcional você comprando cara você us em quanto site você quiser você pode utizar no site dos seus clientes é barato vale super a pena Além disso você ajuda o canal a gravar mais vídeos como esse enfim não tem motivo para não comprar o template vou deixar o link na descrição

basicamente o template é esse site pré-configurado óbvio que você tem que assistir a aula para ver como que foi feito para poder editar em cima o tempo não acompanha suporte para te ajudar Ah quero editar o cabeçalho quero editar a página minha conta o suporte aqui na aula você vai aprender tudo junto comigo beleza vou deixar na descrição cara para você que compra o nosso temps Muito obrigado pela confiança né Graças você comprando nossos produtos e ajuda a gente a trazer esse conteúdo com essa qual aqui para vocês tá ã demais links eu vou deixar

na descrição tudo que você comprar pelos nossos links você ajuda o canal a continuar trazendo vídeos com essa qualidade beleza dito isso vamos lá pro passo um Então vamos iniciar aqui pelo passo um bem tranquilinho vou explicando para vocês passo dois e a final do quarto passo a gente já sai aqui com esse site pronto então galera pra gente colocar um site no ar a gente precisa ter um domínio hospedagem domínio é o nome do site você o seu nome nome do seu cliente nome da sua empresa nome da empresa do seu cliente assim por

diante seja P com ou pcom.br e a hospedagem é que deixa site no ar que é basicamente onde a gente coloca os arquivos imagem textos os botões fica na hospedagem e o domí é literalmente só o nome tá Rafa qu fica essa brincadeira como que funciona quero entender o preço cara e domínio em geral é R 50 por ano seja P com ou com.br que é o que eu recomendo que você trabalhe porém eu vou te mostrar como você vai conseguir o domínio gratuito Beleza a gente tem um link aqui um cupom Fica tranquilo que

eu vou te mostrar você vai conseguir esse domínio gratuito Lembrando que domínio a gente sempre registra por ano ok nunca é mensal é sempre por ano já hospedagem tem vários e vários preços tem hospedagem até de R 1. por mês cara se é um servidor dedicado Porém para você que tá começando quer colocar o site no ar numa hospedagem de qualidade que não vai ficar travando que vai ter um bom custo benefício se apagar cerca de r$ 2 por mês eu vou te indicar uma hospedagem que vai funcionar super bem e não vai te gerar

problemas beleza e a hospedagem que eu indico é a rosinger cara melhor custo benefício do Brasil uma hospedagem que eu confio e ela é de fato tem muita qualidade pelo o valor que ela entrega eu vou deixar o link embaixo na descrição para vocês se o nosso link você vai cair nessa página e obviamente contactando p o link do canal você não paga nada mais por isso além de ajudar obviamente o canal a gravar mais e mais vídeos como esse aqui para vocês tá então link aí na descrição a super o link vai cair nessa

página Lembra que eu falei que é direto ao ponto Desce aqui o screw do mouse o plano que você vai escolher é esse aqui ó Premium é o melhor custo benefício Ah Rafa mas tem um single o single Qual que é a diferença né ele só serve para um site aqui a gente pode colocar mais de um site Então olha só a diferença que a gente tem aqui de benefício né ã Além disso ele não acompanha o domínio então a diferença já não vale a pena é que a gente tem o o domínio gratuito conforme

eu expliquei para vocês Então esse é o melhor pacote a gente teve alguns outros que tem alguns benefícios a mais mas tá começando o prêmio já vai te servir você vai conseguir colocar esse site aqui no ar vai funcionar não vai travar enfim Fica tranquilo Beleza então seleciona aqui esse plano clica aqui em Square plano aqui galera tem uns períodos tá cara 48 meses eu acho muito tempo seriam aí 4 anos se você quiser você pode comprar E aí obviamente por mês ele te dá um desconto a mais ã tem um período mensal Esse eu

não recomendo porque não acanha o domínio gratuito lembra que eu expliquei o domínio ele registra por ano então você registrar aqui um mês de hospedagem você não ganha o domínio e também o valor mensal dele sai muito alto não vale a pena o que eu recomendo que você inicie é 12 meses beleza esse aqui é o maior custo benefício você pega um período não tão longo um período bacana e já ganha o domínio gratuito vai conseguir aqui aplicar o cupom Então você vai ter o melhor custo benefício tá seleciona aqui o Premium né 12 meses

e antes de fechar a compra você vem aqui ó e coloca o cupom a gente tem um cuponzinho sala Ninja você colocando aqui o cupom ele vai te dar um desconto né além desse que você tá recebendo aqui ó clicar em aplicar ele te dá um desconto a mais cara e olha só o valor que tá saindo aqui domínio por um ano e um ano de hospedagem para colocar teu site online ou o site do seu cliente no ar um ano inteiro fora conforme a gente vi você pode colocar mais de um site nessa hospedagem

cara melhor custo benefício do Brasil eh Então qual aqui o cuponzinho tá saindo aqui esse valor ó 16 16189 para ter todos esses benefícios Então você tem aqui cado de segurança você tem e-mail gratuito por exemplo contato @ o seu nome de domínio contato @s.com atendimento @s.com por exemplo já acompanha aqui também tudo nesse pacote Tá além do domínio grátis os benefícios que eu comentei com vocês feito isso clica aqui em continuar faz o pagamento e eu vou te mostrar aqui os próximos passos como que funciona beleza mas basicamente aqui passo um concluído só isso

domin hospedagem pra gente colocar esse site aqui no ar e aí vou te mostrar aqui agora os próximos passos galera depois de ter feito o pagamento você faz o resgate aí do seu domínio que você ganhou selecionando o plano que eu informei enfim clica aqui resgatar domínio e aí você vai colocar seu nome de domínio pom.com.br nome de domínio do seu cliente né enfim depois que esver tudo certinho você Resgate esse domínio e aqui na sua hospedagem Você vai clicar em configurar normalmente na primeira vez ele dá um passo a passo Inicial é algo mais

ou menos assim eu vou te mostrar aqui através de alguns prints mas se ficar com dúvida Tem suporte e eu vou te mostrar também como você solicita o suporte deles Tá mas basicamente a gente vai criar um site se perguntar se você quer o consultor de site da hosing WordPress não precisa pode pular eu depois eu vou te mostrar como a gente vai instalar WordPress que vai permitir a gente criar o site junto do sistema Beleza então clica aqui ó pular eu Começarei do zero ã aqui ele vai pedir o seu nome de domínio que

você acabou de registrar E aí o que que ele tá fazendo aqui apontamento de DNS que é basicamente uma concatenação entre a hospedagem e o domínio para quando pesquisar sobre o domínio no navegador aparec os arquivos da hospedagem aqui ele pede para selecionar o servidor E aí você seleciona o servidor no Brasil América do Sul Brasil se tiver fora você pode contratar não tem problema nenhum e você edita e coloca a região mais próxima de onde você está basicamente é isso Rafa cara travei fiquei com dúvida não consegui não tem problema você tem aqui o

suporte deles Ó você clica aqui fala com o atendimento suporte eles vão te ajudar Ok mas é bem tranquilo não tem dificuldade mas se ficou com dificuldade chama eles aqui no suporte e que eles te ajudam aí a você configurar instalar WordPress que é o que a gente precisa clica aqui em gerenciar na sua hospedagem e aqui a gente vai fazer aqui deixa eu mostrar para vocês a gente vai instalar o WordPress acessar ele e fazer algumas configurações básicas né então WordPress vai permitir a gente criar aqui esse sistema esse daqui é o panel Então

deixa só mostrar aqui de novo deixa voltar aqui cê vaiar em gerenciar vai abrir aqui essa linha esse aqui é o e panel da rosinger aqui você tem tudo sobre a sua hospedagem inclusive nessa parte você pode criar e-mail gratuito né o e-mail com nome da sua marca eu vou pular tudo vou direto ao ponto porém ten um vídeo no canal explicando exatamente como funciona todo esse e pen aqui depois recomendo que você assista eu só vou criar aqui um subdomínio para mim que é basicamente o nome que vem antes do meu site Vou colocar

aqui por exemplo sei lá advogados 2024 e eu vou instalar aqui meu WordPress para poder criar essa aula com vocês mas você pode deixar a instalação do WordPress direto no seu domínio principal tá bom Beleza Rafa como que a gente instala esse T WordPress aqui na ringer você simplesmente clica aqui em site Auto instalador cara eles T um instalador pronto muito simples de utilizar você vai vir aqui em WordPress WordPress selecionar aqui você preen com seus dados então e-mail do administrador que V WordPress nome de usuário e senha padrão para depois a gente conseguir fazer

o login no WordPress aqui avançado você pode deixar o seu nome de domínio eu vou deixar um subdomínio que foi que eu acabei de criar porém cara você escolhe qual que você quer Beleza pegar aqui advogados foi que eu criei exclusivamente para essa aula e aí a gente clica em próximo vou configurar aqui o idioma pugs Brasil beleza clicou em instalar e basicamente é dessa forma que instala aqui o WordPress enquanto está instalando vamos aproveitar aqui eu vou te mostrar como acessa basicamente no seu navegador você vai digitar o seu nome de domínio que Você

registrou E aí depende se for P com.br ou P com enfim e aí você vai colocar isso aqui no finalzinho ó WP admin ah desi computador quero acessar coloca isso no seu navegador vai pra tela de login do Word Press E aí você coloca o seu nome de usuário e senha que a gente acabou de colocar aqui para poder instalar WordPress você vai conseguir acessar a área interna al do WordPress que vai permitir a gente criar o nosso site e o nosso sistema beleza galeraa is Lou aqui para mim vou retirar aqui essa mensagem ã

normalmente ele já ativa aqui a questão do SSL que é esse cadeado de seguranças aqui é obrigatório ter cara que já acompanha se precisa comprar se eu atualizar aqui a página ele já vai habilitar essa opção aqui para mim tá que é basicamente forçar o site abrir sempre no SSL que é a questão do cadear de segurança aí que eu expliquei para vocês ã beleza ó tá aqui ativo verifica se quando você atualizar ele voltar por exemplo pro domínio principal no meu caso a gente tá trabalhando esse aqui ó divulgados 2024 Então é ele que

eu vou selecionar boa esse lá Speed Cash vou desativar recomendo que você Desative também não deixa plugin De Cash ativado enquanto qu você tá construindo o site só depois de ter terminado aí você instala para deixar mais rápido aí tem que saber configurar certinho nesse caso desativo OK tá aqui ativo o SSL tá forçando aqui o SSL Então tá certinho Rafa como que acesso WordPress digitando seu nome de domínio bar WP if admin ou então aqui tem um atalho que já faz login automático aqui na própria roser você clica ó tum e ele vai redirecionar

a gente pro painel administrativo do Wordpress já logado Ó você vê que ele vem aqui pro WP admin só que ele não pede as credenciais de usuário e senha como eu já T aqui pela hospedagem ele já me leva logado automaticamente aqui é painel WordPress cara vou direto ao ponto então eu fazer uma limpeza geral aqui de post página e plugins que a gente não vai utilizar Então vou deletar tudo aqui também ó páginas vou deletar esse painelzinho aqui Eu sempre gosto de deixar ele mais limpinho ó fica melhor para mim poder trabalhar plugins também

que já vem instalados eu retiro todos retira também tá não usa Ah não ra vou deixar aqui um plugin que você não recomendou na aula não faz isso sério usa só o que eu vou te mostrar aqui tá bom então deleta todos os plugins aqui em configurações geral tem algumas coisas importantes primeiro aqui tá o título do site esse é o título que aparece no Google e a descrição também normalmente aparece aqui ó quando alguém digita o nome do site então é interessante que você e coloque uma descrição e um título bacana eu vou colocar

sei lá e deixa eu pensar Ninja advogados e aqui a descrição eu vou colocar e acompanhe seus processos online pronto algo bem simples aqui esr do mous você pode alterar aqui o endereço de administração não é necessário mas se quiser alterar no novo endereço que você colocar aqui chega o e-mail de confirma tá você entra nesse endereço de e-mail novo e confirma o fuso horário vitar São Paulo deixa ver se eu acho aqui São Paulo Ó fus São Paulo posso deixar aqui semana começ segunda sal alterações outra coisa importante pra gente terminar essa configuração básica

é vir aqui em links permanentes e sempre sempre sempre sempre deixa aqui nome do post Ok se não vai usar nenhum outro sempre nome do post e dá um salvar alterações basicamente a configuração inicial do WordPress tá feita a gente limpou aqui as páginas tirou plugins de necessários e fez algumas configurações Gerais não tem segredo nenhum Ok beleza Eh pra gente construir aqui o site prar de plugins e tema e o eu vou te explicar aqui quais a gente vai utilizar ok O tema é o Hello elementor então ele é um tema gratuito à Não

tem nenhuma configuração nele é um tema bem leve bem simples e por quê Porque não vou construir nada no tema eu só instalo aqui o tema porque é obrigatório ter tema no WordPress Não me pergunte por quê mas o que eu vou utilizar mesmo para construir site são os plugins então o tema tem que ser o mais leve possível cara uso Hell elementor Não inventa moda não coloca outro tema que eu não tô falando aqui você vai usar esse tá em relação a plugins Rafa como que vai funcionar tem plugin pago tem basicamente todos os

nossos sites a gente utiliza elementor pro e coco Block Rafa por não tem como economizar não se você usar algum outro plugin que substitui elementor que é gratuito cara em algum momento O plugin vai querer que você pague para construir um cabeçalho uma página individual não vai ser tão bom quant o elementor pro não vale a pena esforço que você vai ficar tendo que procurar addons Enfim então elementor free que é gro a extensão dele que é o elementor pro a gente vai utilizar cabeçalho rodapé pgina individual vai ajudar a gente construir o sistema e

preca uma licença coco Block então uma licença Element pro uma Lia com Block não tenho os plugins cara onde eu posso comprar vou deixar o link na descrição aí da nossa loja você comprando você ajuda o canal beleza Muito obrigado aí pela confiança cara e por que a gente precisa da licença COC Block ué Rafa licença coco Block tem três plugins sim você compra uma licença coco Block e acompanha todos os plugins que eles têm tá só fica de olho que esse plugzinho aqui eu vou te mostrar onde você vai conseguir puxar ele esse aqui

é gratuito ele é uma extensão tá porem esses daqui você comprando uma licença coco Block já vem esses daqui você instala esses dois um erro também que o pessoal comete muito compr licença coco Block licença coco Block cara é se eu não me engano tem 20 plugins diferente não instala esses 20 plugins é a mesma coisa que você pegar seu computador e abrir 30 programas vai travar vai travar os pedagem que o site vai ficar lerdo só instala os plugins que eu tô indicando para vocês nenhum outro Não inventa moda Beleza então você vai instalar

aqui o jet Engine e o jet Blocks o jet Engine vai permitir a gente criar o sistema a área interna é feita com ele beleza a gente também tem aqui o user hole editor vou te mostrar como instalado daqui a pouco esse aqui eu expliquei que você consegue baixar Onde você consegue eu vou deixar no material didático esse plugin aqui já para facilitar para vocês Porém onde você pode encontrar isso a site da coco Block Dev Tools pesquisa no Google mas você vindo aqui ó é o site da coco Block que é desenvolvedor do Plugin

vem aqui ó Dev Tools tá vendo ó esse aqui você vai cair nessa página e vai tá aqui essa extensão você consegue fazer o download é uma extensão que ajuda a gente eh em algumas coisas como por exemplo A questão aqui do do PDF Tá bom você pode vir aqui instalar ó ata-me link callback que inclusive eu fiz uma alteração talvez a gente nem utilize enfim atitude a vou retirar ele por enquanto mas se a gente for utilizar eu volto aqui para vocês e mostro depois no momento certinho se a gente vai usar esse plugin

ou não mas enfim São esses os plugins elementor free uma licença elementor pro uma coco Block Rafa como que eu instalo os gratuitos aqui no plan WordPress para instalar o tema vem aqui aparência temas Adicionar novo aqui Hello elementor instalar se não tiver aparecendo aqui para você não esquece de vir aqui na barrinha e pesquisar Tá bom você instala em ativa ele perfeito esses outros três temas aqui não a gente não quer então pode deletar então você viu que plugins que a gente não quer páginas tudo que a gente não quer a gente retira para

não ficar pesando aqui no nosso servidor Ok para instalar os plugins gratuitos Como faz plugins adicionar vou aqui elementor vai carregar aqui pra gente cque instalar agora e vaiar aqui em ativar feito o outro plugin gratuito que a gente tem é o user R editor eu vou explicar para vocês depois como que funciona deixa fechar aqui is aqui também vou retirar vem aqui em plugins adicionar e pesquisa user editor não tem segredo nenhum para instalar Plugin gratuito Ó cadê cadê cadê esse aqui ó esse aqui tá bom clique instalar agora ele vai permitir a gente

criar o nível de usuário cliente pra gente fazer um configurações bem legais que já mostro para vocês e vou ativar perfeito Rafa comprei o plugin direto no site oficial não tem problema vem aqui ó enviar plugin se comprar com a gente a gente já deixa e o plugin instalado e licena ativada para você poder seguir com essa aula mas basicamente que enviar plugin arrasta O plugin Onde você comprou e coloca aqui ou então se quiser ajudar o canal enfim comprar licença oficial aí pagando barato vou deixar o link na descrição da nossa loja feito isso

eu vou instalar os plugins e a gente já tá com continuidade que é a aula galerinha Instalei aqui os plugins Vamos só fazer uma configuração geral aqui basiquinha no elementor e a gente já pula o passo três bem tranquilinho tá vem aqui elementor configurações clica aqui avançado E aí eu vou colocar ativar envio de arquivos não filtrados pra gente conseguir fazer upload de svg que é o formato correto para ícones e logotipo e aqui carregar fonte aom 4 Eu sempre gosto de marcar assim então é marca ass pressa ção e marca assim para essa opção

aqui também dá um salvar alterações vim aqui recursos atualmente já tá vendo tudo habilitado então a gente não precisa mexer em nada se precisar eu volto aqui e posteriormente eu mostro para vocês cara passo dois concluído basicamente nenhum segredo configuração instal WordPress configuração geral Demorou o qu um minuto instalou o plugin aqui também rapidinho Pass TR concluído então a gente já avançou mais um passo aqui Vamos agora pro passo três onde a gente vai fazer a construção do sistema então eu vou te mostrar duas coisas aqui compreenda eu tô te ensinando a criar o site

porém um site com sistema integrado Rafa qual que é a vantagem a vantagem que em vez de pegar onepage só pegar site institucional você consegue pegar muito mais clientes atender muito mais projetos e consequentemente cobrar mais Porque em vez de só criar layout você cria layout com sistema integrado Essa é a grande vantagem aqui das Ferramentas beleza vamos ver como que a gente cria o sistema Então vamos lá começar aqui pela criação do sistema o sistema a gente vai fazer com o jet Engine da coco Block e a gente tem aqui Um CPT admine filters

nível de usuário relation Pode parecer complicado mas lembra que eu falei a aula direta ao ponto é prático passo passo cara é só acompanhar aqui que não tem erro então o CPT vai permitir a gente eh cadastrar as informações nome do processo ou treino ou dieta ou sei lá paciente o que você quiser aqui obviamente eu tenho que trazer ã direcionar o exemplo mas Óbvio você vai adaptar aí paraas necessidades do seu cliente tá então como que a gente começa construindo isso vem aqui em J Engine vem aqui em Post types vai abrir aqui pra

gente clica aqui em add New aqui você vai vai dar um nome porque você vai cadastrar se for dieta coloca dieta se for paciente coloca paciente se for Imóveis coloca Imóveis se for carro coloca carro Você pode você quiser no caso vou cadastrar aqui ó processos clientes tá vem aqui Advance des do mouse aqui menu icon é esse izinho que aparece aqui ó tá vendo ó eu consigo personalizar ele eu vou vir aqui e vou sei lá selecionar esse aqui ó beleza supor eu vou deixar ti editor um vai ser para nome então eu tenho

nome então beleza o outro vai ser pra descrição ok então eu já tenho aqui os campos agora eu vou adicionar outros Campos que são Campos personalizados baseados no sistema que eu tô criando vem aqui em metafield new metafield e vou colocar aqui os campos que eu vou ter no meu sistema para posteriormente eu vi aqui cadastrar as informações então eu vou ter o campo aqui tribunal e dentro desse campo eu vou colocar opções para facilitar na hora do cadastro Então esse campo ele não vai ser um campo de texto ele vai ser um campo de

checkbox eu poderia colocar tanto checkbox que é esse aqui quanto o rail o rail ele permite selecionar uma opção checkbox permite selecionar mais de uma opção aí depende muito eu vou deixar esse aqui a título de aula mas basear na explicação você pode ajustar Quando eu colocar checkbox aqui ou ra você vai ver que vai aparecer aqui a opção para eu cadastrar e opções Campos enfim eu vou clicar e vou aqui ó Justiça Federal aqui em valores eu nunca coloco caracter especial como se de cedil então você pode deixar assim ó Ok vou cadastrar mais

opções justiça estadual o próximo Justiça do Trabalho e o próximo vai ser Justiça do Consumidor Rafa quero colocar 300 opções cara fica à vontade parte da base que eu te mostrei aqui você pode cadastrando outros Campos tá vou clicar aqui para minimizar E aí clico aqui em metafield e cadastro o próximo esses campos vão permitir eu minhas informações aqui no sistema eu vou ter o campo chamado agora área de atuação então coloquei aqui de atuação aqui sempre quando for ID você tira Campos especiais como por exemplo sede cedilha ó aento Então vem aqui e altera

tá senão vai dar problema ó deixa dessa forma com essa nomenclatura Desce aqui o screw do mouse o tipo vai ser checkbox E mais uma vez a gente vai cadastrar as opções então direito civil direito penal Vou colocar aqui carar um pouco mais rápido porque foi exatamente igual o primeiro campo e mais uma vez Óbvio você vai adaptar se for dieta poder colocar aqui macronutrientes né enfim direito empresarial ah eh cardápio delivery eu poderia cadastrar as opções também de cadastro do cardápio aqui se é almoço se é janta enfim opções de pratos galera certinho vou

Minimizar e vamos pro próximo eh data de abertura número do processo então Começando aqui data de abertura E aí paraa data eu tenho duas opções eu posso colocar aqui data e aí quando a pessoa clicar na hora de de cadastrar eu vou te mostrar daqui a pouco vai mostrar uma um calendário Eu particularmente não gosto porque que normalmente ele puxa com o padrão americano então eu deixo aqui texto que a pessoa vai Editar o texto assim por exemplo ó e aí coloca o padrão que quiser Ok eu acho melhor então eu vou deixar esse campo

o tipo dele como texto mesmo coloca aqui bonitinho Fica de olho aqui em relação a acentuação não pode quando tiver colocando o ID conforme Explicado e já tá certinho esse campo minimizo e venho pro próximo o próximo é o número do processo tirar aqui conforme explicado número posso deixar texto Ou posso colocar Number nesse caso eu vou Number vir um outro exemplo aí para vocês verem como que funciona depois Number o próximo Campo que a gente vai ter vai ser situação do processo acho bem importante isso aqui colocar nesse sistema eu D um Tab ele

preenche aqui para mim só vou ajustar aqui em Type coloca ra por qu porque vou pertir escolher somente um se são vários é checkbox se é somente uma escolha é o rail ess pode ver que ele abre esse mesmo campinho onde você vai cadastrar pré cadastrar as informações então eu vou colocar aqui status ó em andamento eu vou colocar aqui audiência marcada mas entenda tudo que eu tô cadastrando aqui como exemplos tá você pode cadastrar o campo que o seu cliente te pedir aguardando [Música] sentença o próximo arquivado e o próximo Concluído concluído beleza venho

aqui minimizo e vamos pro próximo já tá acabando esse tema que eu vou criar bem simplesinho mesmo cara os os sistemas do curso é bem mais avançado que ISO daqui mas aqui eu prefiro fazer mais simplificado tá advogado responsável eu vou colocar como checkbox E aí também já cadastro os advogados que tem essa empresa caro Costa Rafa eu poderia montar um sistema frontend para cadastrar isso aqui daria para fazeria para fazer aí no no no curso a gente traz projetos mais avançados com painel front Change melhorado uma série de de de itens a mais né

que não daria para trazer nesse vídeo aqui sen não vai ficar muito longo tá bom Ó documentos novo Campo documentos galera que que eu quero cadastrar um PDF ou vários pdfs vários documentos eh eu quero cadastrar vários documentos então que a gente vai fazer seix aqui documentos aqui em Type você vai colocar Repeater Repeater Ok E aí o campo repetidor ele permite o usuário cadastrar infinitos itens Ok então seria infinitos documentos que podem ser cadastrados aqui graças esse campo repetidor então marca aqui repetidor aqui eu vou colocar documentos processo beleza e o Type dele vai

ser mídia mídia mídia eu posso subir o qu foto posso subir PDF então ele vai dar uma flexibilidade para que eu consiga fazer upload de vários arquivos diferentes feito isso deixa ver se tem mais algum Campo não tem somente esse V em qued de Type Ok não sai dessa tela aqui no meu lado esquerdo aparece aqui processos clientes que foi que a gente acabou de criar se eu vir aqui Adicionar novo post vamos dar uma analisada título e descrição title e o editor então tá aqui e todos os campos que a gente cadastrou tá aparecendo

ó tudo bonitinho aqui também tá vendo pra gente poder ir cadastrando os processos inclusive aqui a parte de documentos ó eu consigo ir adicionando vários vários itens PDF imagem anexos Ok deixa voltar aqui p WordPress só conord que conforme a gente vai cadastrando clientes ele vai aparecendo todos aqui porém tem uma forma de eu filtrar isso tem você pode criar um filtro nessa áre Zinha como que eu crio o Rafa vai descer aqui o screw do mouse tem essa AB AD my filters vou clicar vou vir em addd new E aí eu vou chamar de

clientes para nessa área eu conseguir filtrar meus clientes vou marcar a opção aqui ó filtrar por meta datata e qual metafield eu vou selecionar aqui na verdade faltou relation né Daqui a pouco a gente faz vai precisar do rel para fazer essa parte daqui a pouco a gente qu esse filtro porque eu vou ter que fazer o relation Mas beleza em relação ao sistema tá funcionando a gente criou o sistema criou os campos vocês viram que tá tudo aqui que a gente cadastrou porém ess sistema tá muito básico ainda tá muito cru a gente vai

melhorar ele deixa eu jogar aqui ó pod my filters que daqui a pouco a gente cria é necessário o relation antes OK Rafa porém o que que eu vou fazer aqui eh por padrão por padrão o WordPress ele tem usuário eh convidado tem o usuário administrador usuário editor Eu quero um nível de usuário cliente ou nível de usuário corretor ou um nível de usuário paciente enfim dependente do sistema que você esteja desenvolvendo como que a gente cria esse nível de usuário para poder se comunicar com ele tem como tem vou te mostrar agora a gente

vai precisar do Plugin user Hall editor que eu te mostrei como que instala É ele que vai permitir a gente criar o nível de usuário e o nível de usuário que a gente vai criar vai ser cliente mas poderia ser paciente aluno o que você quiser Beleza então vamos criar aqui galera nível de usuário cliente como que a gente vai fazer vem aqui em usuários user R editor lembrando tem que tá plugin instalado tá se não instalou instala agora clicar aqui você vai ver que tem os usuários padrões do WordPress a gente não vai usar

nenhum deles a gente vai criar um do zero então aqui no meu lado direito VM aqui the beleza clicar aqui aqui e aí eu vou chamar de cliente Rafa quero dar outro nome cara fica à vontade col aqui bonitinho vou dar aqui on der Roll perfeito verifica se tá aqui ó selecionado o que a gente acabou de criar se tiver você desce aqui o scw do mouse e aí a opção que a gente precisa é essa aqui somente essa read que é a leitura esse usuário não vai adicionar nada editar Porque ele é o cliente

ele vai visualizar Rafa eu quero criar um sistema que o corretor cadastra móveis no frontend cara a gente tem também lá no treinamento painelzinho frontend com tela de edição tela de cadastro mais avançado nesse caso aqui eu fazer somente pra leitura des do mouse aqui você coloca High admin bar que que é isso essa barra de administração aqui do WordPress a gente não quer que ela apareça pro cliente Logo Eu escondo ela nessa opção então eu vou habilitar vem aqui update e resolvido então a gente acabou de criar ó cliente read marca a opin e

update e pronto perfeito níveis de usuário criado agora que que a gente vai precisar fazer galera um relation Ah Rafa Agora complicou é uma relação entre o usuário que a gente acabou de criar e o nosso sistema o nosso CPT Para quê Para eu conseguir exibir pro João somente as informações do João do Pedro somente pro Pedro e assim por diante conforme as pessoas os clientes forem fazendo o login ali no nosso sisteminha Ok então para isso fazer um relo bem simples vou te trazer tudo mastigada aqui direto ao ponto deixa eu abrir aqui meu

material perfeito Então como que a gente quera beleza vem aqui em Jet Engine vem aqui em relation cara Então olha só a gente trabalhou o CPT agora a gente vai trabalhar o relation carregou pra gente VM aqui dedil eu vou dar um nome aqui chamado processo para clientes por processo vai ser o objeto pai que é o cadastro principal e o secundário que é o filho o tio são os clientes então eu gosto de deixar a nomenclatura dessa forma mas pode alterar o jeito que você quiser aqui eu tenho o pai e tem um filho

para fazer essa concatenação esse relation então aqui vai ser processos clientes Onde está aqui ó processo cliente Rafa no meu CPT eu dei outro nome então procure o outro nome que você deu aqui beleza tild clica cara eu vou colocar aqui users perfeito a relação para facilitar vou deixar M to Main não vou parar para explicar isso agora aqui vou habilitar essas quatro opções basicamente aqui vai dar controle para quando tiver cadastrando eh um processo ou um usuário eu consiga fazer uma concatenação direto aí no arquivo enfim é algo eh que é melhor de mostrar

na prática fica mais fácil de compreender dá um add relation Rafa não peguei tá aqui ó a configuração pode pausar o vídeo e dar uma olhadinha beleza certinho vamos continuar agora sim que a gente vai trabalhar o admin filters Ok com relation agora eu consigo vou voltar aqui no meu CPT então de Engine post Type clique aqui editar Deso screw do mouse admine filters Vou colocar aqui clientes vou habilitar essa opção Type eu coloco aqui ó Filter by relat itens ou seja itens relacionados para quê para eu conseguir filtrar Pô eu quero ver só o

que tem cadastrado aqui do João só do Pedro e assim por diante então eu vou clicar aqui eu vou colocar processos para clientes então o que que é esse processo para clientes o relation que a gente acabou de fazer vou ver aqui update basicamente é isso super simples e se eu vi aqui na aba de de processos clientes você vai ver que tá aparecendo esse filtro ó e aí obviamente conforme os itens eh forem sendo cadastrados eu vou conseguir filtrar aqui por cada cliente e ver os processos específicos de cada um dentro dessa tela beleza

Basic bicente é isso eu tem segredo daqui a pouco a gente vai cadastrar Fica tranquilo show e lembrando Rafa não tô entendendo alguma parte cara compra o template e vai editando em cima fica mais fácil né enfim mas tranquilo aqui nada demais Montamos o sistema tá aqui no nosso sistema é só isso o que que eu vou fazer agora eu quero aplicar um filtro Rafa para que esse filtro deixa eu abrir aqui no meu material esse filtro aqui galera vai ser um filtro de filtrar usuário atual Rafa Agora complicou Não entendi você concorda Quando eu

fizer o login lá com o usuário Rafael eu quero que apareçam os processos o treino né e as informações do Rafa eu vou cadastrar ali o João eu quero que apareça os processos do João os treinos dele cara é assim por diante Mas se não tiver nenhum tipo de filtro vai listar tudo ali no painel frontend não é isso que a gente quer então a gente vai criar um filtro aqui no Jet para criar esse tipo de filro a gente chama de Cary builder Cara isso aqui mas tem tanta opção tanta opção que dá para

você fazer muita coisa é muito top mas vamos ver aqui na prática que a gente queria só para exemplificar Eu sempre gosto de dar exemplos práticos deixa eu mostrar aqui para vocês Ó aqui tá aparecendo os processos do usuário Rafa Mas como que o sistema sabe isso através do k builder que é o filtro tá bom basicamente é isso ra que eu crio esse Car builder Jet Engine Car builder ó a terceira função do Jet que eu tô te mostrando isso que é uma aula básica te mostrei CPT te mostrei relation vamos ver agora o

Ky builder add New vou dar aqui o nome pode colocar o nome que você quiser vou deixar aqui posts OK Des aqui do mouse e a primeira coisa que eu quero filtrar é eu quo sempre mostrar só o meu CPT o sistema que a gente tá fazendo né no caso aqui o processo clientes eu não quero por exemplo mostrar um post de blog uma página então eu já venho aqui já coloco processo client para não ficar aparecendo outras coisas al meu cliente meu usuário Bele segundo ponto eu vho aqui em Post page clico ó então

post page vou clicar e a você puxa o campo chamado rel items lembra que a gente criou um rel cara o rel vai servir para isso aqui também relat items Qual que é a relação que ele vai pedir aqui o relation que a gente criou Ele pergunta qual é o objeto P par parent Object e esse aqui eu coloco curent user ID Então vamos explicar esse aqui foi rel que a gente criou então só puxei tranquilo ele pergunta qual a relação de pai para filho então a relação pai part que é o processo e ele

pergunta tá que que você quer filtrar Eu quero filtrar o current user ou seja usuário atual se o Pedro acessar most osos do Pedro se a Maria acessar mostra osos da Maria e assim por diante beleza basicamente é isso que a gente tá falando aqui pro nosso sistema show D um apply a DD vou te mostrar aqui de novo porque pessoal com muita dúvida então colocou o nome coloca aqui processo clientes e aqui você vai copiar isso aqui certinho pronto é tranquilo galera é fácil não é difícil não tranquilo matou que a gente vai fazer

agora vamos fazer os cadastros Então vou cadastrar os processos no site e vamos cadastrar os clientes para que a gente tenha eh clientes aqui pra gente conseguir setar esses processos certinho tá acho que vou até cadastrar os clientes primeiro fica melhor mas você pode fazer o inverso não tem uma ordem incorreta eu quero cadastrar as clientes primeiro por isso que eu vou fazer assim Rafa como que eu cadastro você vai vir aqui em usuários Adicionar novo Rafa eu consigo criar um painel front Eng para registro de usuário dá dá para você criar um formulário de

registro ficaria bem mais longa a aula por isso que eu não vou colocar mas sem sempre dic cara quer aprender mais avançado vem pro treinamento tem tudo passo a passo né Mas vamos lá a Adicionar novo usuário perfeito e já tem aqui alguns usuários teste que eu criei no outro para facilitar vou copiar aqui o primeiro vai ser o João eu vou colocar aqui o e-mail para ele aqui o nome João Silva Silva aqui ã vou colar aqui uma senha para ele não precisa e aqui galera eu vou colocar ele como cliente e aí como

que vai funcionar Pô você pode deixar essa opção marcada E aí esse seu cliente no e-mail dele vai receber os dados de acesso ali para ele conseguir acessar a sua área de membros ou então você pode copiar esse nome de usuário essa senha e envia ali pro seu cliente e aí na página de login né aqui do sisteminha quando ele vem aqui ó que eu tô logado mas quando ele clicar aqui em login com esse usuário com essa Sena ele vai conseguir logar E aí vai ter acesso sua área de cliente onde ele vai conseguir

acompanhar seus processos sua dieta enfim o que você cadastrar Beleza então olha só bem simples Rafa não tá aparecendo a função cliente Porque Você Não cadastrou conforme eu expliquei aqui no user hol editor tem que fazer o cadastr Dinho tá bom Adicionar novo usuário beleza cadastrei o primeiro para cadastrar os outros é só repetir eu tenho aqui mais três eu gosto de cadastrar bastante exemplo e que fica legal da gente poder trabalhar né quando eu cadastro somente um exemplo pessoal fic com muita dúvida Ah mas se colocar 10 usuários não tem problema a gente tenta

exemplificar o máximo aqui para vocês ó cliente e tal Adicionar novo ó você vê que eles vão sendo cadastrados aqui e Óbvio esse aqui sou eu Rafa que sou aqui o administrador o próximo aqui é o Pedro beleza aqui para facilitar cliente perfeito cada seus clientes cara basicamente isso para 5 10 clientes você vai utizar essa estrutura agora que a gente precisa cadastrar no dia a dia ali da da clnica ou da vai cadastrar esses processos para cada cliente como que funciona isso você vem aqui já Engine ã na verdade aqui o processo clientes vou

clicar aqui ó no caso eu não tenho nenhum ainda vamos cadastrar aqui pra gente ver como funciona Adicionar novo deixa eu pegar aqui meu exemplo ó ação de cobrança Eu recomendo que você cadastro também coloca o nome do cliente aqui eu acho que é uma boa tá eu vou fazer dessa forma em relação ao texto o parágrafo vou pegar um texto teste então eu vou colocar aqui não vou me preocupar com essa parte beleza óbvio que aqui você vai colocar as informações você consegue aqui ó colocar em colocar links pode até colocar imagens nessa área

aqui também ó clicando aqui em mais Dá um enter aqui ó você clica em mais você pode colocar em imagem então dá para deixar bem completinho esse cadastro e você coloca o que você quiser no dia a dia aí que vai sendo solicitado aqui o tribunal aí eu sou como eu sou detalhista deixei certinho aqui o exemplo esse aqui seria justiça estadual Direito Civil aqui a data de abertura obviamente tô colocando dados fictícios aqui tá aí você adapta no seu projeto número do processo situação aqui advogado responsável e aqui é algo sei lá pode ser

que vocês tenham dúvida Então vou cadastrar bem bonitinho aqui que são os pdfs eu vou clicar clico eu posso arrastar imagem e PDF são os principais aqui nessa área Rafa como que eu faço isso eu vou deixar PDF testes no material didático gratuito também tá então eu tô com três pdfs aqui que eu vou arrastar ó PDF processo 1 PDF processo 2 pdf processo 3 a título de teste você pode fazer upload de 1 2 3 10 200 tranquilo eu vou dar exemplo de três aqui você replica paraas suas necessidades vou clicar aqui ó choose

media Rafa eu quero mais um e agora tan t t t t t t t addd item coloco aqui o segundo pum coloquei dois eu quero o terceiro tem problema te mostro ó e aí Obviamente você entendeu que dá para fazer isso com a quantidade infinita desço aqui o escru do mouse esse processo aqui ó essa dieta essa cobrança essa Finanças essa esse treino de academia ou que você estiver adaptando aí o projeto é do João que já coloquei o nome aqui porque eu acho que fica mais bonito que fica um nome para cada um

eu venho aqui ó Connect user clico e seleciono aqui o usuário do João que eu já deixei pré-cadastrado e clica aqui ó conectar usuário dessa forma através do relation isso aqui só tá aparecendo graças ao relation que a gente fez tá graças ao relation quando o usuário João logar na sua conta vai mostrar esse processo já se a Maria logar não vai mostrar pra Maria olha só que interessante Cara isso aqui abre um leque de possibilidades de coisas que você possa desenvolver aqui baseada nesse sistema Rafa eu não cadastrei o usuário não tem problema lembra

Aqua aquelas opções que a gente habilitou ali no relation aqui ó a ddn user é Basicamente aquilo lá você pode colar aqui login e-mail senha e coloca aqui também como cliente enfim você pode cadar tanto por aqui ou vir aqui na aba de usuários conforme eu mostrei para vocês eu prefiro vir por aqui eu acho melhor conectei publico publico pronto tá cadastrada aqui a primeira é primeiro item Rafa quero cadastrar outro cara você vai repetir nesses Passos eu vou cadastrar mais um ok para não ter dúvidas e aí vocês verem como que funciona ó reclamação

trabalhista vou pegar aqui um texto teste através dessa extensão chamada Lore Y generator show aqui aqui vai ser pra Maria então eu já coloco Maria Você poderia colocar nome e sobrenome também tá se você achar melhor ação trabalhista é justiça do trabalho e direito trabalhista aqui a data de abertura número do processo enfim T coração dados fictícios aqui tá trocar aqui advogado documentos mesma coisa Rafa Quero Subir bastante PDF ou bastante imagem você vai vir aqui ó DD item e vai só duplicando duplicando duplicando tá conecta aqui com o usuário da Maria Connect user publico

publico e pronto cadastre o segundo para que tenha bastante exemplos o que que eu vou fazer eu vou cadastrar sei lá uns 10 aqui inclusive vou cadastrar também pro usuário Rafa por quê PR a gente conseguir Quando tiver no nosso usuário de administrador tiver editando o painel front Change os dados apareçam pra gente também tá a gente não ter que sair para logar no usuário João usuário Maria Enfim vocês vão entender então vou fazer aqui os cadastros e já mostro para vocês pra gente poder dar continuidade galera terminei de cadastrar vou mostrar aqui para vocês

eh a quantidade que eu cadastrei eu cadastrei aqui 10 tá E também alguns eu fiz o cadastro e coloquei meu usuário também além do os usuários dos clientes de teste Para quê Para que eu consiga visualizar as informações na tela quando tiver aplicando os filtros Beleza então aqui tá certo certo certo certo perfeito Vamos pro próximo passo que a gente vai acessar agora o elemento é criar aqui uma listagem personalizada e também a gente vai aplicar algumas configurações globais vamos ver na prática é mais fácil para fazer isso uma outra função do J Engine J

Engine list add New list item esse esse botãozinho aqui tá não é componente é esse aqui ó deixa aqui posts e coloc o post Type no caso o post Type que a gente criou conforme explicado seria aqui t t t t Deixa eu procurar processos clientes aqui eu vou colocar processos dup é uma nomenclatura que eu gosto de utilizar e vou dar aqui um Create list item ele vai qu cai aqui na tela do elementor deixa eu fechar essas esses itens iniciais E aí vamos trabalhar as configurações globais quer já deixar pré-cadastrado cor imagem algumas

coisas que a gente vai utilizar que aí Vai facilitar todo o processo para isso você vai vir nesse ícone Ok configurações do site e a gente já pode deixar tudo isso pré-cadastrado toda nossa infraestrutura para facilitar a criação do site a gente não tenha retrabalho vou clicar aqui na parte de cores global e vou cadastrar algumas cores perfeito Na verdade vou colar essa cor aqui você pode copiar a minha paleta ou não Beleza eu vou colocar aqui ó E aí também obviamente a Rafa o site do meu cliente é laranja vem aqui e coloca uma

cor laranja né busca uma paleta de cores deixa ajustado de acordo com o projeto novas cores a gente clica nesse botão aqui para adicionar eu vou ter aqui o cinza um pouco mais claro vou ter uma cor que eu gosto chamar de borda que eu vou utilizar na borda dos itens fica bonita essa cor eu acho legal então eu vou colocar aqui também e o branco eu vou também deixar cadastrado aqui deixa eu só dar uma olhadinha essas cores estão muito parecidas talvez puxar um pouquinho mais esse e esse aqui tá muito escuro eu vou

dar uma clareada também selecionar esse aqui dar uma [Música] puxadinha galera vai ser essa paleta que eu vou trabalhar tá puxar um p pro [Música] lado eu acho que assim tá legal a gente vai ter um contraste bacana nas nas cores do site dá um salvar alterações perfeito volto aqui na setinha vamos cadastrar tipografia tipografia eu vou usar aqui o anon e vou usar o Poppins então primário vou clicar e seleciona aqui o anon essa secundária eu vou colocar o Poppins e vou deixar a espessura ou peso 600 e os outros dois eu vou colocar

popins 400 selecionar aqui esse também feito isso D um Salv alterações perfeito volto aqui na setinha desce scru do mouse vamos cadastrar aqui a identidade do site que é basicamente a logotipo F icon cliquei vou vir aqui em logo eu já tenho aqui no meu computador as imagens vou puxar aqui beleza seleciono e o Fave icon que é esse ícone que aparece aqui no navegador Eu também já tenho pronto eu vou arrastar beleza cadastrado salvar alterações Lembrando que as imagens eu vou deixar no material didático para vocês na descrição cliquei aqui vou vir na parte

de layout largura do conteúdo eu vou usar 12 e aqui o preenchimento do contêiner eu vou desabilitar porque eu não quero desce scw do mouse pontos de interrupção aqui você habilita notebook e e Wide screen dessa forma a gente tem uma flexibilidade melhor para adaptar o nosso site para vários dispositivos desktop tablet mobile wid screen e notebook Vou salvar alterações ele pede para recarregar a página não tem problema recarrego tranquilo outra coisa que eu quero fazer é aqui em plano de fundo eu vou deixar uma imagem que vai ser vai ficar no plano de fundo

de todo o site eu acho que vai ficar legal e enfim eu preparei Ass imagem aqui a imagem bem levinha vai ficar bem bonito vou vir aqui em plano de fundo clássico clico aqui na imagem eu tenho aqui a imagem no meu computador essa imagenzinha aqui galera Ó ela P só bytes então é uma imagenzinha que tem um fundo clarinho E tem alguns ícones ó relacionados ao que a gente tá desenvolvendo aqui né site de advocacia E aí você se quiser manter você pode manter aí você comprar o template mas é dessa forma aqui que

você altera essa imagem né então você pode deletar também enfim colocar uma cor de fundo eu vou colocar ela para ela ser tamanho automático e eu quero que ela repita ela vai ficar repetindo em todo o o background aqui do meu site tá bom sv alterações volta aqui na setinha CSS deixa eu ver se tem algum CSS aqui padrão Se tiver já mostro para vocês não aqui não usei perfeito galera tá aqui nossa configurações globais verifica se você copiou exatamente o que eu mostrei aqui para facilitar para você seguir com a aula clico agora no

x e quando eu clicar no X Ele vai voltar pra edição do loop né que é o nosso ling personalizado voltou aqui edição do loop clica nessa engrenagem list series então você pode ver aqui ó e tá puxando aqui o nosso CPT aqui tranquilo aqui a gente tem o preview wiit Lembrando aqui é só um preview tá não necessariamente vai ficar desse tamanho pequeno ou desse tamanho grandão no site é só um preview Mas eu sempre gosto de trabalhar mais ou menos Como de fato vai ficar na página coloquei aqui 400 Vamos trabalhar agora umer

flexbox coluna então a gente tá trabalhando aqui já o elementor né aqui em estilo eu vou colocar o nosso branco então cara olha só como facilita você deixar pré cadastrado já tá aqui ó um clique ó tum pronto esse contêiner eu vou usar aqui 2m de pad então p sempre vem aqui avançado e você ajusta vou alterar aqui paraa em coloco dois e se você quiser P tudo você deixa normal senão aqui em estilo você consegue deixar arredondado eu vou colocar uma bordinha cara toma cuidado com borda pessoal erra ess aqui ó deixar a borda

escura cara ess tá horroroso vem e deixa a borda mais ou menos 0.15 15% de opacidade aí fica legal Ok se você quiser você pode colocar uma bordinha também ó de um e colocar a nossa borda aqui acho que fica legal V deixar um ok e agora eu vou preencher com os nossos dados clicando aqui mais eu vou puxar os campos eu vou pegar aqui o campo damic Field deixa eu fechar aqui e mostrar para vocês o jet Engine ele tem o wid padrões tá que são aqui os listings elements e esse que que esse

list elements faz Rafa ele permite eu puxar os dados do sistema que a gente fez no nosso CPT custa um post Type pra página E aí eu monto o que eu quiser site imobiliário classificado CRM inclusive todos esses citados já montei dá uma procurada aí que você vai e encontrar cara top então eu vou puxar aqui o wiit E aí vou puxando os campos a gente cria o list né Por por isso que eu chamei de Lub porque a gente cria uma vez só e se aplica para tudo e dependende se você tenha 10 itens

cadastrados ou 1000 só vai ter esse trabalho aqui uma vez só dynamic Fi arrastar beleza Ele puxou aqui o título eu quero pegar primeiramente ã o campo vou puxar aqui a situação ó no caso que tá arquivado beleza situação arquivada tá você pode ver que tá aparecendo aqui ó todos os campos que a gente cadastrou e eu posso ir puxando ó você puxando aqui esse aqui deu um errinho mas não é problema enfim aqui não dá para explicar agora mas tem que aplicar um filtro de checkbox enfim depois eu mostro para vocês vamos puxar aqui

a situação ok aqui avançado eu quero que isso fique tipo um cardinho Fique bonito no site então eu vou vi aqui avançado e vou colocar uma cor de fundo nisso daqui para ficar parecendo tipo uma tag não sei se eu tô conseguindo explicar mas é para ficar assim ó tá vendo Beleza vou deixar a tipografia maiúsculo Ok e vou dar um pad trabalhar aqui um pézinho para deixar ele bem bonito Rafa ficou ess espação aqui ó tá feio tá horroroso Concordo eu vou só não é aqui não calma aí vou ajustar com vocês aqui em

bord né qual aqui é arredondamento então você pode arredondar com5 como que eu resolvo esse problema vem aqui no contêiner e você muda de coluna para linha ó a coluna contêiner clica aqui em linha e clica nessa opção aqui envolver beleza ele vai ficar encaixadinho ali na na área de conteúdo dele e lembrando que qualquer dúvida habilita aqui a estrutura que você vai ver o campo que eu tô mexendo tá essa tipografia eu acho que tá muito grande eu vou ajustar também vocês podem ver que questão de tipografia estilo galera não tem muito que explicar

espaçamento é aqui Aqui a parte de estilo você altera que você quiser cor tamanho não tem muito que eu ficar eh dando ênfase nessa parte vou vir aqui no próximo vou arrastar E aí todos os outros Campos eu não quero que fique ao lado desse se eu não quero que fique ao lado Basta vir no campo e colocar a largura dele 100% que eu garanto que ele pegue 100% da tela só de arrastar damic Field por padrão já puxa o title que é o que eu quero que é o nome aqui do processo E aí

simplesmente eu venho aqui e ajusto com as cores e a minha tipografia beleza 10 se tá bom tá o próximo câo que eu vou puxar eu poderia puxar aqui também através dos L Lis elements mas para facilitar a gente tem uma lista de ícones E dentro dele já puxa vários Campos de uma vez só isso aqui é só para facilitar Mas você pode continuar puxando vi dynamic Field deixa eu arrastar ele aqui para cá lembrando eu vou colocar largura 100% para pegar de ponta a ponta vou deletar aqui porque eu quero somente o o texto

né como que eu puxo os campos é semelhante ali ao Jet Engine só que aqui quando o wiit é do elementor e eu quero puxar o dado dinâmico do meu sistema eu venho aqui em tags dinâmicas ó Beleza vou descer escudo Mouse você vai ver que vai ter aqui Custom Field que é o campo personalizado que a gente criou eu vou clicar e aí aparece aqui os campos no caso eu vou puxar aqui o número do processo primeiro ele vai puxar o número Você concorda que se o cliente vê só esse número aqui eh parece

número de telefone não faz muito sentido mas aí o que que a gente pode fazer para deixar esse campo melhor você vem aqui e coloca processo número dois pontos e espaço começou a ficar melhor porém eu posso dar ênfase pro número colocando ele como eu coloco a tag B que é para deixar em no HTML e fecho aqui ó no depois pronto essa área aqui fica então fica melhor e agora simplesmente eu Posso duplicar essa estrutura clicando nesse botãozinho e só venho aqui e altero os campos as variáveis no caso tribunal venho aqui e altero

o nome assim por diante duplico o próximo Campo Rafa qual que é é o direito de família na verdade seria aqui a área de atuação né e Óbvio aqui é só um exemplo você pode puxar o campo que você quiser ali Ok eu vou puxar mais um que seria aqui o abertura data de abertura eí eu digito abertura Porém esse campo aqui cara tá muito rústico tá feio tem que ajustar tipografia vamos melhorar ele vou clicar aqui na aba de estilo aba de estilo conforme eu expliquei cara é só questão de você explorar então eu

vou fazer aqui uma configuração um pouco mais rápida tá colocar aqui uma bordinha aumento o espaço entre os itens e a tipografia eu vou deixar vez essa um pouco mais clara deixar um tamanho menor também para não ficar tão tão rústico né ó fica melhorzinho gera um contraste também visual entre o título aqui então acho que fica legal deixar menor Ah beleza perfeito vou puxar agora o campo que vai ser um botão eu poderia puxar ver dynamic link mas eu quero botão conforme vocês estão vendo eu posso puxar os dados dinâmicos tanto dos wis do

Jet quanto dos wis da do elemento os dois funcionam aqui eu vou colocar ver mais detalhes e aí o que que vai acontecer quando a pessoa clicar Ela vai para uma página onde vai ter todos os detalhes desse processo aqui para isso eu clico aqui em tegas dinâmicas na aba de link coloco o RL do post pronto resolvido Vou colocar aqui em biblioteca de ícones e vou colocar o ícone bonitinho vai ser o file pegar esse aqui OK trabalhar um pouquinho esse botão ele não vai ter cor de fundo tá então vou tirar eu quero

só borda vou arredondar ele deixar uma borda mais ou menos assim a cor do texto ajustar aqui um pouco o preenchimento também e aí você deixa do seu gosto quando passar o mouse por cima eu posso deixar a cor escura e a cor do texto Clara ficou efeito bacana beleza a tipografia eu vou deixar maiúscula e vou deixar o tamanho zero 87m talvez até um pouquinho menor espaçamento do ícone eu vou ajustar mas esse são detalhes que aí você personaliza beleza aqui já está legal aqui talvez até diminuir um pouco mais e colocar um pouco

mais de espaçamento perfeito galera Rafa como que isso vai carregar no mobile a gente clicando aqui nos ícones a gente consegue ter uma pré-visualização aparentemente aqui para mim tá legal não vou mexer Então tá aqui o nosso nosso listing né criado o link tá funcionando você pode ver quando eu passo o m aqui por cima aqui no canto inferior ele me mostra o link então então eu consigo enxergar que esse link tá funcionando por causa disso e vou com aqui em publicar perfeito tá criada aqui nossa listagem personalizada então criei o sistema criei tudo aqui

para funcionar o sistema agora eu tô puxando o sistema que a gente criou e coloquei transformei ele em design através aqui do Ling personalizado e vamos dar continuidade pra gente trabalhar aqui os modelos profile builder já tá quase no finalzinho dessa parte a gente partir pro passo quatro e jogar tudo pra página e aí a gente finaliza esse site então galerinha Vamos criar aqui o modelo eu vou criar só um Tá mas cara a gente pode montar dashboard com vários modelos diferentes uma parte de cadastro outra de edição uma parte pro usuário poder eh editar

seus dados e-mail usuário senha dá para aixar bem Completão aqui eu vou focar em fazer o simples bem feito que já vai funcionar sem acrescentar muitos itens tá PR aa não ficar muito longa Rafa como que eu qu o primeiro modelo aqui ó modelo modelo salvos a gente vai clicar aqui ó Adicionar novo modelo eu vou colocar que esse modelo é de página E aí eu vou colocar ó dashboard board template você pode painel A nomenclatura fica vontade para colocar do jeito que você quiser tá importante é você seguir a lógica que eu tô mostrando

clica nesse botão criar modelo carregar aqui pra gente não se preocupa com o cabeçalho Não se preocupa com o rodapé eu vou mostrar depois com medita clicou na engrenagem oculta esse título ó engrenagem ocultar título e o l da página coloca elemento largura Total Ok Cuidado para não colocar esse tela do elementor senão ele não vai acertar cabeçalho qual que elementor logo Total ele recarrega a página beleza e deixa eu abrir aqui meu minha colinha aqui galera eu vou criar a tela como se fosse um Saas então o Saas que que ele tem de diferente

Ele pega a tela toda então eu vou colocar o modelo aqui inicial fbox de duas colunas perfeito cara eu quero que você Repare Bem na estrutura que eu vou criar tá aqui eu vou dar um pad superior inferior ISS aqui é padrão em relação pad não vou explicar porque tipo é básico e aqui vou dar um espaçamento ó que é um que aem chama de GAP Aqui tá o gutter enfim entre um contêiner e outro dentro desse contêiner eu vou ficar um contêiner interno Rafa por qu deixa eu ver se consigo explicar com exemplo prático

se eu pintar esse contêiner aqui de branco o que que vai acontecer ó e aí eu vou ficar adicionando o conteúdo aqui tá vendo que esse Branco ele vai acompanhando tá vendo agora se eu mostrar o exemplo novamente para vocês verem colocando contêiner interno e dentro desse coner interno presta atenção eu tenho esse coner que eu tinha aplicado Branco Agora eu vou aplicar o nesse interno vou pitar ele de branco aqui beleza col que a imagem BM ele mant o branco aqui na caixa basicamente por isso que eu vou setar os contêiners internos selecion esse

contêiner interno eu vou colocar a cor dele a cor escura nesse outro aqui eu fazer a mesma coisa então coloco o coner interno e você tá a cor de branco perfeito eu quero que pegue de ponta a ponta então meu contêiner principal que abriga os contêineres internos eu vou mudar ele paraa largura Total acontece que ele de fato vai pegar de ponta a ponta eu quero que tenha um espaço na lateral também então eu posso colocar dois de pad aqui nas laterais tá esses itens eu vou selecionar trabalhar aqui arredondamento e pading para que o

conteúdo fique bacana dar uma olhadinha aqui isso mesmo eu vou colocar quatro em superior e inferior tá ó e na esquerda e direita dois vou colocar também uma bordinha arredondada uns 10 perfeito e vou aplicar aqui também então vamos fazer aqui tranquilinho quatro superior quatro inferior dois esquerda e direita tem segredo tranquilo nível Ninja show bordinha também botar e tá 10 Oi Ah aqui eu vou colocar uma eu fiz um site exemplo eu gostei essa bordinha assim ó deixa eu ver se aí ficou top boa perfeito organizamos as caixas agora vamos só alimentar aqui o

conteúdo Esse vai ser o nosso dashboard principal Clic segura o título jogo aqui na tela Vou digitar aqui dashboard cliente ou painel cliente enfim Eu particularmente prefiro A nomenclatura em inglês tá acho que fica mais bonito aqui vou aumentar a tipografia show acho que tá bom aqui hum hum hum muito grande né ou não espaçamento acho que vou deixar assim vou puxar agora alguns dados do usuário Então vai mostrar aqui Pedro João Maria né De acordo com o usuário logado Rafa como que a gente faz isto eu vou usar aqui o lista de ícon só

para organizar mais fácil mas você pode utilizar outro widt se você quiser enfim na dúvida cara usa que eu tô utilizando aqui facilita tua vida vai ser mais prático clica aqui em t dinâmicas vem aqui em informações do usuário dados do usuário nessa partezinha aqui clica em cima que ele vai abrir as opções e aí você coloca nome de usuário vai puxar o meu nome Rafa ó lá Rafa eu vou colocar bem-vindo dois pontos e espaço para organizar e a coloco aqui um ícone bonitinho clico Lembrando que você pode fazer upload os seus próprios ícones

também então você tem aqui a opção de enviar o arquivo svg mas se quiser se preocupar usa a biblioteca do elementor que é mais simples eu vou duplicar E aí vou ajustar isso aqui para e-mail Ah Rafa eu quero colocar mais informações usuário deixar esse esse sistema mais complexo cara dá para deixar você pode alimentar através aqui do metabox E aí você coloca Campos personalizados para cada usuário fica show também mas não vou inserir aqui já tá bom demais clica aqui em ícone dita aqui e mail e aí vamos trabalhar um pouquinho espaço aqui a

cor do ícone a cor do texto deixar esse cinza aqui um pouco clarinho quase um branco ou branco deixa eu ver acho que o branco vai ficar melhor Vou aproveitar também galerinha Eu Posso duplicar essa lista de ícones aqui botão direito ó Dupa E aí eu vou deixar um izinho escrito sair beleza vou clicar aqui em ícone e aqui V pegar um ícone de Left para simular saindo do site tá que que a gente vai fazer Rafa como que eu coloco esse link de saída eu costumo colocar esse link dessa forma eu venho aqui no

WordPress passo o mouse aqui em cima e aqui em sair Clica com o botão direito copia endereço do link eu volto aqui colo e aí tudo que tiver aqui ó do Barra WP login para trás Eu deleto porque aqui automaticamente ele já puxa o URL do site do seu site ok aqui já tá funcionando ó WP login Action logout aqui já vai funcionar beleza show outra coisa gosto de fazer também vou pegar aqui o divisor vou colocar nessa área mudar aqui a cor dele ajustar aqui o espaçamento E aí dou uma margem para empurrar esse

contudo para baixo ó meio que estilo Saas mesmo normalmente é assim essa borda não tá legal vou tirar um pouco da opacidade mas aí são questões de é questão de ajuste de design você bate o olho aí e vê o que faz sentido para você ajustar do seu jeito enfim botão direito vou copiar esse título botão direito vou colar posso mudar aqui a cor e aí eu vou colocar seus processos ou sua dieta ou sei lá o que que você cadastrou aí tá seus documentos e assim sucessivamente beleza Ah agora vem a parte legal lembra

que a gente criou o LIS que que eu vou fazer vou puxar o LIS para cá vou jogar Rafa como que eu faço você vai usar o chamado lingrid não é esse não é esse é esse aqui ó LD ele é um padrão do Jet Engine Ok então eu clico seguro arrast aqui na tela que que tá falando aqui tá pedindo para mim selecionar qual L que eu quero mostrar a gente só criou um processo loop vou clicar aqui vou puxar Rafa tá esmagado teve algum problema não é só trabalhar aqui a coluna você pode

colocar mais colunas ou menos você decide do jeito que você quiser nesse caso aqui vou deixar duas a quantidade de posts Ah eu quero mostrar só seis eu não quero limitar quantidade quero que mostre infinito enquanto o usuário tiver cadastrado então vou deixar sei lá 600 e se o cliente acessar aqui e no usuário dele não tiver nada cadastrado a gente coloca ó não H itens cadastrados aqui nada demais tranquilo coisa importante você vem aqui em Custom Carry lembra que a gente criou um Carry builder que eu falei ah galera a gente tá criando aqui

um filtro e tal para filtrar o usuário atual eu vou clicar aqui ó filtrar usuário atual você vai ver que só uma parte disso vai ser listado agora Rafa por que agora menos estão sendo listados porque só está sendo listados os itens do qual marquei o usuário Rafa lembra que eu expliquei ó esse tá aqui deixa eu ver esse aqui no vai aparecer para mim porque não tá eh meu usuário aqui mas se eu olhar aqui ó ação trabalhista João ó aan aqui e aqui meu usuário tem que tá se não tiver deu pau deixa

eu ver ó lá Rafa tá mostrando certinho outro exemplo ó ação de idenização Pedro vamos ver ó vou clicar aqui se o meu usuário não tiver aqui o sistema tá não tá funcionando vamos ver não tá certo Ó Rafa ele tá mostrando Aqui de acordo com o meu usuário Beleza se eu lugar no usuário do Pedro agora e ele vai mostrar só os processo do Pedro do João do João é assim por diante conforme eu expliquei aqui ó só tá aparecendo para mim os que eu marquei meu usuário também pra gente poder testar galera basicamente

cara esse vai ser esse dashboard não vou mexer mais tá daria pra gente fazer diversas outras coisas legais colocar o formulário de edição exclusão aqui cadastro no frontend tudo isso eu ensino treinamento cara de pro acessa o link na descrição eí você consegue aprender deixa eu mostrar aqui para vocês ó ó sisteminha aqui de pousada sistema de tickets ó a quantidade de itens no painel que a gente tem ó painel frontend edição cadastro cadastro no frontend eh imobiliário 2.0 filtro área de corretor área de login registro Imóveis rank de venda você tem tudo aqui tá

a gente também utiliza o jet Engine só que de uma forma mais avançada link na descrição e todos esses sites você recebe o template editável de bônus ó a quantidade de cara é muita muita coisa que você ganha que que eu vou fazer aqui já vou otimizar pro mobile porque tá pronto dar um publicar aqui perfeito aqui a gente tem os ícones tá E aí eu tenho um vídeo explicando mais sobre mobile tá depois você pode assistir conforme eu falei vou direto ao ponto então não vou entrar tanto em detalhe Nossa esse des esse wien

aqui ficou zoador hein hum não gostei deixa eu ajustar ele deixa eu ver se é algum bug deixa eu dois largura 100% eu acho que é um bug porque não faz sentido mas você pode talvez diminuir aqui ó para 90 até encaixar legal aqui no Wide screen voltou aqui pro desktop a gente mantém que já tava porque foi que a gente configurou primeiro e aqui o notebook eu fazer as configurações aqui com vocês se quiser manter no notebook assim você pode manter tá eu acho que vou deixar assim porque às vezes a galera compra o

template fica um pouco com dúvida E aí só ajusto um pouco aqui os tamanhos pra gente poder encaixar melhor layout lembrando tem vídeo aqui no canal explicando Mas ó tô alterando os itens que só tem é que tem o ícone do desktop depois do tablet do mobile logo quando tem esse ícone quando eu alterar aqui o meu notebook não vai alterar aqui o desktop tá Por quê Porque tem o ícone então o elemento ele já fez isso para facilitar pra gente aqui esse texto talvez vou diminuir um pouquinho o tamanho aqui também e aqui eu

tenho que ajustar acho que é algo assim esse aqui eu coloquei quanto dois aqui ficou meio esmagado particularmente não gosto layout esmagado então vou deixar uma coluna lembrando tô mexendo aqui ó tem um izinho Então não vai alterar os outros dispositivos Beleza agora tablet e mobile eu já costumo deixar a coluna pegando 100% tá eu mudo aqui ó pra coluna lembrando tem um iconeinstagram [Música] o outro aqui mesma coisa tem que ser esse coner e não esse esse aqui ó que é o pai você muda para 100% agora eu venho aqui no meu contê interno

e dentro desse interno eu posso trabalhar aqui os pads do jeito que eu quiser esse outro aqui é a mesma coisa tipografia do aqui tipografia dois tá bom Agora vamos aqui pro celular deu uma quebradinha aqui a gente pode melhorar essa parte eu já acho que essa margem já não vai fazer sentido Então vou tirar ã aqui Beleza vou ajustar também pad em tipografia basicamente ajuste de pad tipografia é o mesmo para todo o site é você basicamente vir aqui cara e colocar o ajuste que você quer baseado no que você tá eh enxergando aqui

tá beleza no tablet eu vou tirar esse aqui também não quero show aqui esse texto eu acho que vou deixar um pouquinho menor 08 beleza gala já está bom aqui dou um publicar e tá pronto o nosso modelo ã esse modelo ele fica aqui e aí como que eu seto isso em um sistema uma área interna uma área de membros próximo passo agora a gente vai trabalhar profile builder cara profile builder É minha função preferida no Jet Engine porque com ele eu construo área de membros área interna painel front Eng tudo com profile builder normalmente

ele vem desabilitado a você tem que habilitar como que faz Rafa vem aqui em J Engine J Engine e a você procura aqui ó profile builder habilita e d um salvar atualiza a página e agora ele vai est aparecendo aqui então habilita primeiro e depois atualizando a página já vai aparecer eu vou clicar sobre ele ele pergunta qual é a página de conta a gente não tem V já criar essa página vi aqui em página adicionar então daqui a pouco a gente volta aqui no Prof para não confundir Vamos criar a página vou criar a

página chamada aqui minha conta ou dashboard ou painel eu vou chamar de minha conta eu vou ter a página home também página de login Então já vou aproveitar já já que eu tô aqui criando páginas lembrando páginas adiciona nova tanto aqui ou aqui pra gente poder criar as nossas páginas como eu tô criando aqui uma estrutura Simples então eu colocar TR pgas no meu sistema mas poderia ter outras també então home log minha conta resolvido vamos voltar agora configurar builder pois era necessário a página minha conta para poder configurar el corretamente Prof builder Show pgina

Minha conta foi que a gente acabou de criar só você setar minha conta vou dar um save vem agora em account page Não mexe em nada inclusive vou até deletar isso aqui ó e agora eu vou pegar o modelo que a gente acabou de criar e vou setar nessa área presta atenção o modelinho que a gente acabou de criar aqui modelos ó eu vou puxar ele para cá eu vou chamar aqui de dashboard por exemplo Mas fica à vontade para colocar A nomenclatura que você quiser e aqui em templet a gente puxa o modelo eu

chame ele do qu que eu até esqueci de dashboard ó dashboard pronto dou um save tudo que tiver dentro desse dashboard é necessário fazer o login pro cliente conseguir acessar E aí por isso que o profile delee é tão legal porque ele cria ajuda a gente criar essa área interna para acessar o conteúdo de memos só queem é membro E aí tem que fazer o login Ok então basicamente Deixa eu só voltar aqui ó eu coloquei minha conta página e aqui na account page Eu puxei o modelo Só isso tá tá configurados aqui nosso profile

builder simples fácil certinho a gente já tem tudo para entrar no layout sim no design né então passo três concluído bem passo a passo direto a ponto não entrei detalhes aqui se bem que os detalhes Na minha opinião são bem importantes para você poder adaptar para outros projetos depois colocar suas próprias ideias aqui no sistema mas enfim eu vou direto ao ponto Agora que a gente vai fazer vamos trabalhar o design do site cabeçalho roda pé a página home página individual aqui do processo tela de login e aí depois a gente vem testando todo o

sistema validando todos os pontos para vocês verem que tá tudo certinho Você vai colocar isess aqui pro seu cliente vai vender não vai vai sei lá tiar problemas O sistema funciona corretamente tá a gente já faz sites aqui no Jet Engine ó a anos e tá tudo funcionando tudo certinho beleza vamos lá galera começar aqui pelo cabeçalho é a gente precisa criar as páginas já criamos Faltou só definir a página home como a página inicial do site provavelmente já sabe isso se você já mexeu no WordPress mas enfim eu vou mostrar aqui para não ter

dúvidas configurações leitura é que você fala pô qualquer página inicial do site você fala WordPress no caso aqui é a home salvar alterações perfeito beleza coloquei aqui ó você vem avitar o site tá aqui a home páginas criadas e você pode ver quando a gente definiu o minha conta lá no profile builder ele mostra aqui ó essa tzin né só para informar que essa é uma página de conta enfim ele mostra que bonitinho aqui a página inicial também mostra essa tzin beleza vamos criar o menu então aparência menus dá um nome qualquer aqui e clica

em criar menu esse meu menu ele vai ser um menu de sabe quando clica desce rolando então para poder fazer ele eu vou eu meso adicionar aqui os links então baseado nos serviços que eu tenho ou a página que eu vou ter no caso aqui serviços aqui eu vou colocar sobre Rafa por que esse hashtag sobre porque quando clicar ele vai descer rolando pra sessão sobre E aí a gente vai colocar esse mesmo ID na sessão que a gente quiser fazer a concatenação eu vou mostrar para vocês a gente vai ter aqui depoimentos e contato

beleza porém obviamente partir da base aqui você adapta pro teu site show ã belezinha criamos ali o cabeçalho deixa eu ver se tá certo então criamos o menu e as páginas agora vamos trabalhar o cabeçal a gente vai ter dois um especificamente pra página home e outro pras outras páginas e vocês vão entender como funciona vamos vir aqui em modelos construtor de tema cabeçalho e vamos criar o cabeçalho Inicial Então vou vir aqui Adicionar novo vai ser o que vai aparecer na home né Deixa eu colocar aqui cham ele de cabeçalho geral colocar uma estrutura

uma estrutura de linha galera Vou perder muito tempo aqui no cabeçalho não porque a gente tem a página ainda para ajustar o design layout Então vou quar ele bem simplesinho porque não tem nada demais cara é basicamente o logotipo menu e um icin aqui que eu vou mostrar para vocês e pronto tá a logotipo clica nesse Elite arrasta Beleza vou puxar aqui o menu menu do WordPress vou arrastar perfeito ponteiro esse sublinhado que aparece aqui eu não gosto então Retiro tipografia vou usar essa de texto os espaçamentos Eu costumo zerar e colocar aqui espaçamento que

assim tá legal já e o eu vou usar o out links vou arrastar e vou ensinar vocês a configurar esse daqui cara ele é um Wi dinâmico então quando tiver logado ele vai identificar quando tiver deslogado ele vai identificar ele vai mostrar que eu posso fazer o login ou sair ou posso me registrar a parte registro não vou explicar porque eu não quero colocar isso nesse sistema porém eu poderia colocar também aqui mensagem a parte de logado o que que eu vou fazer eu vou deixar aqui login isso aqui eu vou deletar e a eu

preciso levar o usuário pra página de login então vou clicar aqui em tag dinâmicas URL interno clico coloco conteúdo e digito aqui minha conta minha conta não login na verdade para quando o cliente clicar ele pra página de login o segundo logout eu vou aqui sair e aqui eu vou deixar olá ele mostra Olá Rafael Olá João Olá Maria e assim por diante registre link vou tirar não quero e esse último aqui ó quando usuário está registrado tá logado eu vou colar aqui ó minha conta ou área do cliente enfim clico aqui URL interno E

aí minha conta dashboard enfim a página que você setou PR ser a página de minha conta beleza aqui em estilo você pode personalizar Se bem que eu já acho que já tá legal só esses prefixos aqui eu gosto de deixar um cinza cinza mais clarinho sabe fia tamanho aí fica a sua vontade que você quiser trabalhar só uma coisa que quero explicar para vocês para que não tenha confusão vem aqui no container e você vai colocar aqui o Space between ou espaço entre para quê vai jogar cada item numa ponta e o que tiver a

centro vai centralizar ó pronto e alinhar items que seria o alinhamento vertical centro galera só isso tá criado aqui o nosso cabeçalho cara simples e fácil mais fácil que isso não tem como beleza e deixa eu ver aqui certinho Vamos só utizar isso aqui pros dispositivos móveis Não esquece de sempre colocar espaamento aqui para ter respiro no site sen não fica colado fica estranho o tablet normalmente o menu quando a gente não configura direito ele empurra aqui o conteúdo e aí você vai usar essa opin aqui ó largura Total tá você v que eu vou

marcar vai dar uma esmagadinha e agora ele funciona corretamente ó aqui o mobile eu quero forçar tudo ficar numa linha só para isso eu preciso vir no meu contêiner e vou marcar essa opção aqui ó sem envolver que que eu tô dizendo aqui ó eu não quero quebra de linha pronto ra ficou estranho ficou Mas é isso que a vai ajustar agora a logotipo vou diminuir o tamanho do celular 160 pixels mais ou menos que tá legal E essa área aqui eu costumo vim e ajustar os tamanhos deixar todos os tamanhos menorzinhos aqui das das

tipografias ó e aí já ficar bom tá E aí vou fazer o mesmo para todos então o mesmo tamanho que eu coloquei eu só vou replicar aqui ó beleza galera tá criado aqui nosso cabeçário cara vou clicar aqui em publicar adicionar condição e eu vou deixar aqui em todo o site por tem gente que vai comprar o temp vai criar a página e vai ficar sem cabeçalho vai reclamar falar temp não tá funcionando se eu setar aqui só para home por esse motivo eu vou deixar aqui em todo o site porém a gente vai ter

um segundo cabeçalho que eu vou definir ele para páginas específicas tá porém eu poderia vir aqui adicionar uma condição e deixar ISO aqui somente aparecendo na página home que é o que eu quero porém a título que eu vou vender o template e tem cliente que vai comprar e vai criar página não vai saber configurar enfim eu vou deixar assim tá só vai fechar beleza Tá criado nosso cabeçário Geral agora vou criar um outro modelos consutor de tema veja que eu deixi aqui aberto por porque eu vou copiar não vou recar de novo Faz Sentido

vol aqui em cabeçalho Adicionar novo vou criar um outro cabeçalho esse aqui eu vou chamar de sei lá cabeçalho largura total e você vai entender o porquê eu volto no início então eu deixei aberto ele crie aqui o novo certo vindo aqui em modelos Conor de tempo tá aqui tranquilo olha só que simples botão direito copia botão direito Cola pronto eu não vou ter menu nesse cabeçalho de largura Total vou deletar e ele eu quero que ele pegue de ponta a ponta Então vou mudar para largura Total lembra quando eu mudei largura Total o nosso

modelinho interno eu coloquei PED nas laterais mesma coisa aqui e aí o Wide screen eu tinha colocado em 90% 80 eu acho se não me engano pronto beleza aqui notebook tablet mobile El já vai vir configurado porque eu copiei do que a gente acabou de desenvolver e aí qual que é a sacada aqui eu vou ccar em publicar vou adicionar condição porém eu não quero em todo o site eu vou com aqui adicionar condição eh eu mudo aqui para singular e eu vou querer que ele apareça na página da minha conta então eu venho aqui

ó e procuro singular significa individual né até meio Óbvio Mas enfim página e Marco aqui ó eh minha conta a página de login também então vou vir aqui e vou login eu vou querer também a página interna dos posts que seria a página individual que é quando clica no processo ou na dieta vai aparecer aquela página com mais informações para isso eu venho aqui ó e seleciono processo clientes que que ele vai fazer ele vai pegar todas as páginas desse CPT para aplicar esse cabeçalho eu acho que é isso deixa eu ver aqui o meu

meu modelinho É esse aqui mesmo galera beleza cingular Tá certinho só vai fechar Então eu tenho dois cabeçalhos eu tenho esse largura total e tem esse aqui que ele pega o centro pra página home eu [Música] vou fechar sei lá um vou deixar o outro aberto que eu uso como modelo pro rodapé também se eu vi aqui clicar em visitar site ó tá aqui nosso cabeçalho se eu vi em minha conta por exemplo você vê que o cabeçal ele muda ó então aqui ó home vem aqui em minha conta e já pega de ponto a

ponto então fica tipo um Saas mesmo sabe fica bem bem bem bacana bem bonito ó agora a gente precisa criar o Rod pezinho né rodapé tá feio Rafa como que cria vamos lá mesmo caminho mesma coisa não muda nada basicamente é configuração é mesma se você quiser pausar o a pode estar fazendo sozinho modelos conso tema vem aqui em rodapé Adicionar novo bocar aqui na engrenagem rodapé clico aqui em mais e vou criar aqui um rodap pezinho bem simples vai ter aqui logotipo menu e só nada demais o a logotipo eu não vou puxar essa

por não vai funcionar ó vai ficar feio tá vendo interessante que a cor da logo seja branca para isso eu vou arrastar o de imagem clico E aí já tenho aqui também a logotipo Branca então Sempre quando você for criar logotipo cliente se você cria logotipos cria a versão colorida e crie também a versão branca pra gente conseguir utilizar aqui dessa forma o link eu sempre coloco URL tags URL interno Na verdade eu puxo aqui o URL do site que quando clicar aqui ele vai pra homepage do site Beleza eu ia puxar o menu mas

eu não vou puxar não vou deixar assim mesmo e eu vou arrastar aqui o título já tá legal vou digitar aqui ó Ninja de [Música] divulgados 2024 reservar aumenta aqui o espaço pronto tá criado aqui o nosso rodapé vamos só dar uma olhadinha aqui como que tá aparecendo osos positivos ó só mobile que deu uma cagadinha eu vou dar um pading aqui beleza deir o tamanho também e o espaçamento que eu coloquei tá muito grande clica em publicar deixa aqui a condição todo o site porque diferente do cabeçal a gente não vai ter nenhuma definição

aqui de página e pronto galera a estrutura aqui no nosso site tá criada cara a gente tem aqui ó cabeçalho tem aqui o roda pé falta configurar a página home login e a página individual porque a página da minha conta aqui ó o modelinho já foi aplicado Porém quando eu clico Olha só vem para essa página desconfigurada que a gente vai fazer também uma por uma beleza então cabeçada Ok rodapé Ok vamos trabalhar aqui a página home que é a página que vai dar talvez aqui um pouquinho mais de trabalho para fazer mas é bem

tranquilinho vou mostrar para vocês todo o passo a passo na página que fica bem bonito e você pode pegar o que eu vou te ensinar aqui o conhecimento dessa página para poder adaptar para outro sites aí que você vai desenvolver Então vamos construir a página home aqui galera vamos lá página home você vai vir aqui em páginas editar elementor aqui padrão nada de de novo vamos retirar esse título aqui clicando na engrenagem esconde o título e coloca o da página elemento lagura Total Beleza vou colocar aqui uma estrutura fbox vou colocar deixa eu ver aqui

Tanto faz ser coluna no caso ou linha vou deixar coluna beleza e vou colocar um coner interno de 50% tá aqui tranquilo no contêiner principal eu vou colocar um pouco de adpad pra gente ter um espaço poder trabalhar e basicamente esse cont interno que eu coloquei de 50% vai abrigar o conteúdo título descrição botão de contato é uma imagenzinha que a gente vai ter enfim Ok nesse meu contêiner vou vir aqui em estilo clássico e vou colocar aqui minha imagem de fundo então tô com várias imagens que eu preparei eu já vou arrastar as imagens

para cá pra gente não ter que ficar já facilitar tudo aqui pra gente tá então que rast as imagens para facilitar pra gente vou pegar a imagem principal que ela já tá aqui no tamanho certinho que a gente precisa pro desktop se você não sabe sobre tamanho de imagens qual formato utilizar a gente tem vídeo aqui no canal ensinando Tá ok eu vou colar essa imagem em cobertura vou colocar ela não repetir e vou colocar a posição superior ao centro ela ficar bem encaixada aqui no site agora que que eu gosto de fazer eu gosto

de colocar os itens e depois eu venho ajustando então eu vou colocar aqui o primeiro título ele eu vou colocar como pezinho de parágrafo Deixa eu só deixar a cor branca só vou alterar aqui a tipografia Por enquanto vou pegar um outro título e vou arrastar ele vai ser meu H1 beleza esse aqui eu posso copiar botão direito eu colo aqui eu vou ter um botão vou ter uma imagem e eu posso mais uma vez copiar esse texto e colocar aqui também beleza cara essa é a nossa estrutura para poder criar essa áre zinha aqui

do site tá então Começando aqui galera vamos personalizar um por um que é facilita para vocês ok esse aqui o texto vai ser proteção jurídica completa eu vou colocar uma borda em volta desse item de mais ou menos uns dois e coloca aqui cor branca raio da borda 10 beleza mais ou menos assim porém conforme a gente tinha visto cara não faz sentido o item pegar de ponta a ponta fica estranho fica esse espa em branco aqui e aí não sei se você se lembra para ajustar você coloca tudo em linha e clica aqui para

envolver então selecion cont linha envolver Pronto ele vai ficar pegando só a camadinha aqui e agora eu posso ter uma personalização mais interessante ó beleza mais menos assim OK esse aqui eu vou colocar Justiça com foco em resultados e vou aumentar o tamanho toma cuidado para não deixar o texto assim ó estranho tem ter uma boa legibilidade sem ficar estranho tá altura da Linha também ó não pode ficar algo muito colado Ok vou pegar agora o texto aqui do meu H2 vou ajustar também acho que 1,25 MM altura de linha acho que vou at dar

uma margem negativa aqui PR grudar um pouquinho mais vai tomando forma aos poucos e a gente não tá fazendo nada complexo basicamente ajuste simples simples de tamanho pad tudo que vocês já viram só T aplicando aqui esse botão eu vou colocar aqui #contato quando clicar rolando PR área de contato daqu Pou a gente vai configurar aqui eu vou pegar um calendário beleza e vou trabalhar aqui o design sem ficar inventando muita moda já Ach tá aqui bom o botão só quando o mouse passar por cima para ficar legalzinho eu vou colocar aqui o preto e

branco ó assim tá bom por último eu vou clicar aqui e vou pegar uma imagem que eu já tenho preparada também que é essa imagem aqui eu fiz no figma e também tem vídeo aqui no figma no canal beleza e se você não quiser que a imagem F lado do botão seleciona o botão e coloca em largura Total tá a imagem eu vou definir mais ou menos assim porque eu quero que o texto fique ao lado da Imagem e eu vou colocar aqui ó já ajudamos mais de 10 de 1 clientes eu quero que esse

texto ele fique aqui ao centro E para isso seleciono o meu texto e vou alinhar ele ao centro aqui ó pronto vamos em publicar ver como que tá ficando cara simples não fiz nada de difícil a gente colocou o primeiro item o segundo terceiro quarto quinto sexto tudo desconfigurado aí eu vi um por um mostrando para vocês para você conseguir ajustar bonitinho aí beleza galera vamos trabalhar agora a segunda parte aqui do site pra gente não perder tempo tá então clicar aqui em mais vou adicionar uma estrutura de duas dois contêiners o primeiro contêiner eu

vou setar em largura de 40% o segundo contêiner você está numa largura de 60% Ok o contêiner principal Então olha só o da esquerda 40% e o da direita 60 e o contêiner principal eu vou colocar espaçamento pad superior e inferior nele quanto Rafa cara de olho aqui eu vou deixar uns 6m vou colocar espaçamento aqui ó porque a a coluna não sei se estão conseguindo enxergar mas tá colada E aí a gente coloca P aqui resolve E aí vamos trabalhar esse texto aqui vou copiar botão direito colo vou facilitar minha vida ao [Música] máximo

já tem aqui Um textinho pronto também para essa área só acho que o texo aqui ficou grande eu assim Acho que fica melhor e eu vou tirar essa margem Assim fica mais interessante vou pegar um outro título e vou arrastar e vou editar aqui serviços eu acho que esse t tá muito pequeno porque essa tipografia Anton se você usa um texto pequeno fica difícil de enxergar Então vamos deixar uma pegada mais maior assim tá texto maior fica mais bonitinho show no meu lado direito que que eu vou ter aqui nesse outros 60% que ficou eu

vou ter minhas imagens ó vou arrastar aqui a imagem clico E aí eu tenho que direito empresarial Direito Civil tal eu tenho aqui seis imagens se eu não me engano eu vou alinhar aqui à direita posso até diminuir um pouco esse contêiner acho que assim tá legal vou redundar um pouquinho a imagem e agora só duplico pum vem pra próxima na verdade fazer diferente eu poderia só duplicar aqui ó e vou mostrar para vocês mas eu vou um efeito ó poderia deixar só assim só que eu quero que a imagem faça um efeito de sobreposição

para fazer isso deixa eu deletar vou pegar a primeira imagem vou vir aqui avançado eu vou colocar a posição dela fixa não aqui não vai funcionar efeito de movimento posição superior pronto eu eu quero que isso só se aplique eh no desktop notebook e hard scen por enquanto eu quero que ela fique na [Música] coluna e o layout dela tem que ser Z index1 por a próxima imagem vai sobrepor ela e a próxima imagem vai ter o z index 2 e a terceira imagem vai sobrepor as duas e os ind vai ser três e assim

por diante se já o efeito aqui vai ficar mais claro você não conseguiu compreender Beleza então na primeira imagem coloca Z index1 e efeito de movimento cara copia isso aqui botão direito vou duplicar vou selecionar aqui olha só o efeito ó eu vou selecionar aqui a segunda imagem e na segunda imagem Coloco os enx 2 duplica a segunda imagem venho na terceira e é só repetir galera já entenderam ó zenix 3 quarta imagem zenix 4 e assim por diante tá duplica quinta imagem zenic 5 e aí duplica sexta imagem zenx 6 e pronto ó tá

Rafa não entendi nada vou ccar aqui em ver alterações para vocês verem o efeito como que fica aí é opcional se você quiser deixar eu acho bonitinho ó como que ele vai ficar vend ele vai sobrepondo beleza cara Acho que fica da hora eu vou deixar enfim dessa forma que faz já tá boa essa parte e aqui eu só vou copiar esse botão poderia deixar aqui também ó entrar em contato aqui eu vou colocar uma margem e essa área aqui de serviços você vê que tem aqui ó no menu serviços como que eu faço para

fazer o link Âncora lembra lá do do cabeçal que a gente criou o menu vou só revisar aqui com vocês de forma rápida menu serviço eu coloquei servicos eu copio sem o hashtag não é necessário vem aqui direto no contêiner a avançado e procura aqui ó ID CSS Rafa por que não precisa colocar aqui o hashtag porque quando eu coloca aqui o ID ele já puxa hashtag automático então não coloca publico E agora se eu clicar ó ele desce rolando E aí os links pra parte de sobre depoimentos e contado vai ser a mesma coisa

ó cliquei desce rolando beleza só aqui que vou tirar um pouco ficou bom agora a próxima área é parceiros isso aqui não tem segredo nenhum também pading mais uma vez copiar esse texto aqui para facilitar minha vida ó botão direito col Vou digitar aqui parceiros E aí qual que é oit que eu vou utilizar para conseguir colocar as imagens de logotipo Carrossel de imagens eu vou arrastar clico vou pegar as logotipos simulando parceria aqui do site enfim coloco tamanho completo vou tirar aqui a deixo ele automático pega esse meu contêiner eu coloco ele para pegar

de ponta a ponta largura Total eu vou colocar aqui slides a mostrar um cinco publico e clique ver alterações ó pronto simples fácil bem tranquilinho tá próxima área Bora ã vou ter uma área que é um pouquinho mais chatinha de configurar na verdade não é chate não é fácil também vocês vão ver aqui na prática Deixa eu só dar uma olhadinha aqui como eu configurei estrutura tá vou coloc aqui um flexbox um flexbox de linha e já vou dar o pad superior inferior de 6m Beleza eu vou colar um cont interno para organizar os títulos

aqui para ficar mais fácil e aí lembra que eu falei pra gente reaproveitar os itens ó copio botão direito Cola Peg a descrição aqui em cima botão direito copio vem aqui botão direito colo eu vou pegar esse contêiner e fazer cor si ficar um ao lado do outro ó sem envolver e coloc em linha pronto posso deixar esse título pegando cerca de 40% e esse outro cerca de 60% que aí eles ficam cada um no seu quadrado beleza aqui eu vou estar sobre nós e aqui vou col outro texto V um pouquinho vai ficar mais

bonitinho aqui para mim tá bom assim agora nessa parte aqui embaixo que a gente vai fazer eu vou colar algumas imagens E aí deixa arrastar eu quero arrastar para fora a imagem para fora desse contêiner interno calma aí que ele deu uma bugada ai deixa eu só é isso se tiver com dificuldade quando você for arar alum item pega aqui a estrutura né ó a estrutura vou arrastar a imagem qualquer lugar aqui tanto faz Beleza agora eu pego essa imagem arrasto aqui para fora feixo o contêiner e tento puxar ela para fora aqui ó deixa

eu ver aí não deu certo ainda meio chato isso daqui no elementor pronto arrastei a imagem aqui para fora do coner tá vendo ó O coner tá aqui com o tex os dois títulos na verdade e a imagem tá fora é isso que eu quero aí agora tem outras imagens ó missão visão de valores deixa eu ver como que eu fiz aqui aqui só para explicar coner principal vou mudar pra coluna para aparecer aqui embaixo a imagem essa imagem eu vou deixar a largura dela cerca de50 28% vou arredondar a imagem só 5 botão direito

eu vou duplicar clico E aí eh vou pegar outra imagem divisão a a imagem tá Menorzinha obviamente eu já deixei configurado o tamanho e muda a largura para 40% tá e E aí eu tem que vir no contêiner principal mudar pra linha e cair envolver beleza para quê Porque linha né senão eu não iria conseguir colocar essas imagens de uma lado da outra esse conteúdo aqui tá muito colado também tá horroroso isso daqui deixa eu colocar um uma margem para baixo mais ou menos assim essa aqui vou duplicar vou botar ela aqui em 100% E

aí eu tenho uma outra imagem que vai pegar toda a parte de baixo ali ó valores assim cara olha só que layout top galera e não tem nenhuma dificuldade cara três imagens aqui ó 40 60% aqui 40 aqui e essa pegando 100% de ponto a ponto um t a um lado do outro vou só vir aqui nesse cont e vou colocar ele o ID dele sobre só confirmar se eu coloquei aqui sobre ó sobre Tá certo e aí eu quis deixar mais bonitinho eu fiz uma imagem de fundo mas também cara não é é opcional

ó essa imagenzinha aqui ó só para dar um ar diferente eu quis colocar mas enfim que eu gosto de caprichar no layout 100% deixa eu colar aqui 100% também Rafa perdeu a qualidade de uma imagem coloca a resolução dela completa pronto deixa eu colocar aqui de todos para não dar problema que você vai ter a imagem com máxima qualidade publicar ver alterações V ver como que tá ficando clica aqui no link Ancora ó tá funcionando beleza [Música] certinho publicar eu vou só colocar o botão de entrar em contato ali vou colar ele aqui embaixo pronto

e acho que vou dar uma margzetta tá mas aqui você não precisa colocar não eu nem sei se vai ficar tão bom deixa eu colocar aqui completa vou deixar 100% e o contêiner eu vou colocar em 100% também então coloquei um contêiner uma imagem e aí ele vira um divisor tá vendo ó enfim eu vou deixar que eu acho eu achei que ficou legal copiar aqui esse título botão direito o Colon e eu clicando assim ele já cria um contêiner com esse título para mim eu vou deixar aí na largura de 100% e vou centralizar

aqui eu vou dar uma margem expor inferior digitar aqui depoimento cop esse texto também botão direito colo vou reaproveitando sempre os itens para facilitar já tenho que ter meu texto pronto beleza e agora a gente vai ter a aba de depoimentos então eu vou pegar o wid depoimentos esse aqui ó depoimento ou testemunho se o seu tiver em inglês ele vai ter quatro de pading superior inferior e três na laterais beleza a largura eu vou colocar 48% eu vou colocar o fundo dele branco e aí para fazer isso venho aqui avançado plano de fundo coloco

a cor branca vou colocar uma bordinha também aqui de uns dois dois pixels corda e coloco aqui arredondamento Beleza o nome do cliente eu vou deixar secundário vou ajustar aqui essa parte de designer eu vou diminuir o conteúdo Eu acho que o texto tá muito grande deixa eu ver quanto que eu utilizei aqui foi um em o em também posso ajustar aqui ó um pouquinho a altura de linha pronto a base tá pronta agora simplesmente eu venho aqui e só Alelo as variáveis então basicamente é só você colocar os depoimentos aí dos clientes a foto

e aí na imagem eu vou comar um pequeno detalhe aqui que é a bordinha assim ó agora botão direito duplico Altera a segunda variável terar aqui a imagem perfeito eh aqui o contêiner venho aqui em layout e mudo para envolver para eu consigo colocar um ao lado do outro e eu pego o botão aqui ó meu CTA botão direito eu colo mais uma vez eu vi nesse contêiner e aqui em ID eu vou editar depoimentos na dúvida você vem aqui e verifica o nome que você colocou tá ó copia esse nome publico vê alterações ó

depoimentos sobre e serviço certinho hã botão direito eu vou copiar esse divisor botão direito eu vou colar ele aqui beleza e aí agora a gente vai trabalhar a última área do site que é o file conosco E aí não vou querer criar el do zero não vou copiar essa estrutura ó Posso copiar o contêiner inteiro clico aqui ó copio eu vou copar copiar o contêiner inteiro tá botão direito eu colo e aí como ele já tem essa esse esse contêiner interno é ele que eu vou utilizar as imagens eu posso deletar deleto o botão deixa

eu arrastar aqui para dentro então só para explicar a estrutura a gente tem um coner principal é o coner interno esse coner interno vou mudar el PR coluna posso centralizar tudo e aí ele eu vou colocar uma cor de fundo que vai ser aqui nossa cor um pouco mais escura assim perfeito vou trabalhar um pouquinho o pad nele então vou 10 superior inferior e cinco nas laterais beleza vamos trabalhar aqui um arredondamento também e aí só vir aqui alterando as cores ó Beleza vou aqui ó Fale Conosco vou terar aqui o subtítulo Eu sempre gosto

de organizar a caixa para deixar um pouquinho melhor assim botão aqui de entrar em contato aí aqui eu posso mandar pro WhatsApp eu clico ó e altero o ícone e vou te ensinar criar eh ícone também no WhatsApp e link de WhatsApp daqui a pouco vamos só poder finalizar esse site aqui quando passar Mouse por cima eu vou assim Beleza deixa eu só colocar uma lista de ícones e vou com alguns dados de contato enfim atitude exemplo que você pode adaptar aí pro site do seu cliente tá telefone e aí você vem aqui f não

esqueça de sempre colocar o ícone que você quer em inglês tá aqui é WhatsApp por exemplo e você altera as variáveis e aqui por último o e-mail vem aqui pesquisa por mail aqui em estilo vou centralizar tudo alterar aqui o ícone e a cor do da tipografia beleza vamos ver vamos só criar agora o o o link de Whatsapp deixa eu só também colocar aqui no Meu Container o ID contato deixa eu ver se tá funcionando a gente cri aqui o linkzinho E aí a gente já vai poder finalizar essa página beleza galerinha criar aqui

o link de WhatsApp cara não tem muito segredo basicamente pesquisa link WhatsApp vai ter vários criadores aqui vou pegar qualquer um você vai colocar o seu número com o DDD clique em gerar link copia e aí você vem aqui no botão Cola como vai mandar para fora do site coloca aqui a opção de abrir em nova janela basicamente é isso tá vamos agora otimizar nossa nossa página aqui pro notebook tablet mobile E aí a página home que a página aqui que é um pouquinho mais é um pouquinho maior vai tá terminada tá aqui no notebook

eu vou ajustar a tipografia que tá muito grande então a gente pode começar aqui ajustando tipografia aqui também mas basicamente cara não vai que a gente já tá trabalhando que é são os pads tamanho de tipografia e não sai disso tá não tem nenhum segredo ó já tá otimizado aqui essa área mesma coisa trabalhar aqui os pads beleza Tá certo aqui eu vou colocar PED na lateral e vou colocar a quantidade de colunas Três beleza é que mesma coisa vou trabalhar o pading também show posso diminuir um pouco a largura dessa imagem ó para concatenar

com essa beleza aqui também trabalhar o pad e aqui também PED então você vê que é umum padrão que a gente segue né para otimizar legal aqui mobile e os outros dispositivos aqui o tablet tablet galera essa área aqui eu já costumo deixar em lura 100% E aí tablet e o M eu criei uma imagem então eu vou clicar aqui você vê que a imagem ó em vez de ser horizontal ela é vertical para poder se encaixar nesse dispositivo né porque o dispositivo desktop é assim quando vem pro tablet e o mobile Fica assim então

não dá para ser a mesma Imagem Beleza tem que ser uma imagem específica já otimizada vou centralizar aqui aqui também beleza essa área eu vou ajustar aqui a largura deixar uns [Música] 80% mais ou menos assim e você pode ver que a imagem não tá aparecendo por qu eu preciso trabalhar melhor esse pad então colocar um pad menor Talvez o lado superior inferior também e aqui eu vou aumentando ó até minha imagem encaixar Beleza eu vou puxar um pouquinho ela aqui e como que eu poderia fazer isso aqui na aba de estilo é a posição

eu vou mudar PR personalizado posição Y que é altura eu vou puxar um pouquinho ó pronto aí já tem uma imagem muito mais ajustada aqui pro tablet beleza aqui mesma coisa então largura 100% e vou pegar o contêiner principal vou forçar tudo em coluna Ok trabalhar melhor aqui o pading aqui eu vou deixar em 100% posso colocar tudo no início aqui que eu acho que vai ficar melhor alinhado Beleza Aqui tá ok aqui eu vou colocar em coluna e vou deixar os textos em 100% aqui dá para deixar assim só nesse contêiner a gente tem

esse tem uma margem aqui ó acho que eu vou retirar beleza aqui também 3 1 3 1 aqui eu vou ajustar também TRS 3 se certinho galera agora o mobile cara mobile é mesma coisa Ó tipo o grf tá muito grande vamos ajustar um e mail não F muito feia assim Acho que Car tamanho muito grandão deixar assim por enquanto esse aqui eu vou deixar em 100% ajustar aqui a margem vou deixar o tamanho que 0,87m f F melhor aqui acho que eu vou deixar uns 2,5 diminuir um pouquinho o tamanho e a imagem eu

vou dar uma ajustada também na posição aqui ó x na verdade deixar aqui é centro Centro já acho que vai ficar legal deixa eu dar uma olhadinha tá Rafa não tá encaixando bem a imagem a gente pode trabalhar aqui o pad ó igual a gente fez no tablet aí eu trabalho o pad certinho que eu preciso pro mobile pronto tá bom aqui já aqui no celular eu costumo centralizar tudo a tipografia aqui eu vou diminuir um pouquinho o tamanho [Música] também que tá [Música] certo aqui mesma coisa vou centralizar e aqui essas imagens coloco largura

100% também depoimentos largura 100% os textos eu acho que estão muito grandes eu vou deixar 2 E5 em todos cara se alterou um tem que alterar todos tá senão ele perde padronização aí fica zoado aqui também que largura 100% e a tipografia 087 galera cara a página home tá pronta só isso bem tranquilo bem fácil nada de dificuldade ser os C são todos repetidos é título é imagem aqui deu um bugzinho só atualizar a página que não tem problema nenhum tá de mostrar aqui para vocês tá funcionando ó calma aí certinho tá ó vou fechar

aqui fechar votar P Wordpress página home tá certinha a gente tem a página área de login e a págin Zinha individual pra gente poder finalizar vamos fazer a página individual galerinha Tem um códigozinho aqui vou deixar no material didático para vocês comprar o temp já vem aplicado e e aqui o display conditions também a gente vai poder aplicar que é uma função legal tá eu vou abrir aqui meu l porque eu vou usar alguns Campos dele vou criar do zero para não demorar ainda mais beleza então deixar aqui o listin aberto porque vou aproveitar esse

campo aqui esses campos para facilitar eu vou vir aqui em modelos cons de tema e para criar uma página individual CPT você vem aqui em Post individual mais vou fechar aqui clicar na engrenagem e vou colocar página individual de processos que é o nosso sistema aqui perfeito aqui em visualizar configurações eu posso passar um preview do que eu quero ver eu seleciono aqui processos e pego um cliente qualquer aqui só para eu conseguir enxergar o sistema eu tenho aqui o meu ling que meio que já tá pré pronto eu posso vir nele aqui ó copio

né aqui ó Jet Engine list edita cor elementor copia vem aqui e cola Beleza deixa eu colocar ele dentro de um contêiner para ficar melhor tá deixa eu explicar que eu fiz aqui fazer do zero de novo para não ter dúvida vou col aqui um contêiner e dentro do contêiner dou colar Pronto ele vai ficar aqui dentro tá aí esse contêiner interno eu vou diminuir um pouquinho porque não quero que ele fique tamanho grande eu quero que fique menorzinho mais ou menos assim ó e aí o coner principal eu uso para centralizar organizar deixa eu

ver aqui quanto que eu usei de pad foi 42 42 bem tranquilinho O coner interno vou colocar uma borda nele acho que é por causa da sombra el não tá mostrando deixa eu ver ah isso eu prefiro a bord do que a somba então vou deixar assim tá ã beleza aqui eu vou deixar assim o título aqui eu vou usar um título maior mais chamativo Rafa o meu eu coloquei 2,5 m e ficou pequenininho é o bug tá rec Pixel volta para m e vai funcionar vou arrastar um [Música] título vou aditar aqui detalhes do

processo e só vou ajustar aqui um pouco o tamanho acho que um pouco menor e aí vou com a tipografia assim beleza e aqui vai ser o detalhe do processo só que aqui a gente tem mais Campos para puxar Como por exemplo o campo de advogado então eu vou duplicar isso aqui ó E aí só puxa o campo e advogado agora advogado [Música] responsável vou aumentar aqui o espaço no texto a gente consegue aumentar aqui assim também ó altura de linha vai ficar legal vou arrastar aqui esse aqui para ir separando o conteúdo deixar mais

bonitinho menos assim esse botão aqui não vou usar cop esse divisor Vou colocar aqui em cima na verdade deixa eu dar um control aqui porque eu vou usar o botão a vou arastar o botão aqui para cima isso eu vou deixar em largura de 100% Beleza deixa eu copiar esse divisor aqui agora vou colocar aqui em cima show aqui eu vou digitar voltar ao dashboard por a pessoa só vai ter acesso a essa página porque ela tá no nosso dashboard eu vou colocar isso daqui para conseguir voltar eu vou clicar aqui e vou left vou

pegar um iconeinstagram colo aqui eu vou digitar descrição E aí eu posso pegar aqui conteúdo da postagem que ele vai puxar a descrição que você colocar a é isso a descrição tá certa isso tamanho eu vou deixar menorzinho ajustar aqui a altura de linha e mais ou menos assim mais uma vez com o pce divisor você vê que ele vai separando os bloquinhos né deixa mais bonito pra gente Vou digitar aqui anexos do processo e vou usar galera o dynamic Repeater esse o wiit por lembra que esse campo é um campo repetidor então eu consigo

puxar um campo repetidor através desse Wi aqui o o dynamic Repeater tá aqui você vai colocar documentos beleza e aqui cara você vai colocar esse código é algo importante que vocês tem que saber deix deixa eu ver se tem aqui Um CSS tem também tá algo importante que vocês precisam saber você vai mudar isso daqui ó documentos underline processo de acordo com o seu campo Rafa Não entendi ó J Engine post Type vou clicar tá vendo esse campo aqui ó documentos underline processo do campo Repeater se você colocou outro o nome aqui não tem problema

mas você vai ter que vir aqui entre a porcentagem não mexe você coloca o campo que você definiu esse campo que que ele faz né ele tá aqui ó ele tá aqui na parte do repetidor É exatamente esse campo você vem aqui óli copiar e aqui você cola o nome se você colocou igual a meu não precisa alterar mas você colocou diferente você vem aqui altera tanto aqui qu aqui também então não tem segredo vem aqui no campo repetidor copia o nome que você colocou dependente de qual seja E aí você altera aqui e altera

Aqui também tá aqui galera vou pegar essa tzin aqui ó esse esse link né esse aqui é um link eu vou alterar a cor dele para sei lá Preto vorar color né Óbvio aí pronto aqui a gente pode trabalhar vertical trabalhar tipografia Eu acho que eu vou deixar ele parecer num um botãozinho aqui em items ó dá para deixar aparecendo no botãozinho fica mais bonito né uma marem ó Beleza deixa eu ver se tem mais algum detalhe para passar para vocês cara basicamente não tá puxando aqui ó pdf1 PDF 2 pdf3 se tivesse cadastrado 10

teria puxado 10 se eu quiser que fique um ao lado do outro não tem problema eu coloco aqui horizontal deixo um ao lado do outro e aí eu venho aqui ó em items e coloco a marinha na direita né Aí fica o jeito que você quiser configurar tá voltar aqui ao dashboard Deixa eu só digitar dashboard direito aqui tá errado errei de novo show o pading aqui acho que eu vou deixar um pouco maior não gostei tá que que eu vou fazer galera agora é cara tá pronto mas a gente pode deixar esse sistema melhor

Eu Posso duplicar isso aqui ó botão direito eu vou duplicar E aí pra pessoa que tentar acar essa página e não tiver logada que que a gente vai fazer eu vou mostrar uma mensagem meio que de erro deixa eu deletar tudo aqui então peguei aqui o bloco ó esse bloco tá configurado não mexe botão direito duplica beleza esse que a gente duplicou a gente vai editar e vai falar pô você não tá logado faça o login para conseguir ver essa tela e aí você vai entender aqui a lógica uma hora vai mostrar um bloco outra

hora vai mostrar outro bloco tá só ver aqui o negócio Beleza vou até aumentar o pad nessa a n porque vai ter menos texto vou arrastar aqui um título deixa eu centralizar ele colocar aqui layout em coluna vou aumentar também a tipografia nesse caso aqui e vou digitar você não está alogado vou pegar outro título como pentr aviso tal e aí eu vou colocar aqui ó página exclusiva para clientes faça seu login para ver o conteúdo exclusivo E aí vocês vão entender a lógica disso daqui daqui a pouco eu quero um botão como a gente

tem botão pronto na página home eu não vou criar de novo eu vou lá na nossa home cliquei estar com elemento el vou copiar esse botão deixa eu copiar venho aqui colo calizo e aqui eu vou editar fazer login e aí eu envio a pessoa pra página de login clicando aqui em tag dinâmicas URL interno que já pegar o esquema né a gente tá usando aqui em todo site E aí seleciona a página que você quer enviar no caso a página de o ícone eu vou alterar também user tá como eu faço para uma hora

aparecer isso aqui se a pessoa tiver deslogado outra hora aparecer isso aqui se a pessoa tiver logada simples vou selecionar aqui Meu Container vou vir avançado vou ver aqui exibir condições vou clicar Olha só avançado no contêiner exibir condições e eu vou colocar usuário login status logout deslogado ou seja quando ele tiver deslogado eu vou mostrar isso aqui quando ele tiver logado eu vou mostrar o outro e eu sigo o mesmo procedimento só que em vez de logout eu deixo login Salv e fecho Vamos só otimizar isso aqui pro mobile ver como que tá aqui

eu esse daqui eu vou aumentar a largura ess aqui também tablet Vou deixar 90% aqui também 90% dentro que o mobile vai dar uma estouradinha a gente pode ajustar também beleza aqui eu vou ajustar Pins aqui vou deixar vertical V que ele quebrou a linha não ficou legal mas alternando aqui pra vertical ficar bom galera tá pronto vou clicar em publicar presta atenção clique em publicar adicionar condição E aí você define para que isso apareça pro seu CPT que a gente criou ó processos clientes vou clicar todos Salv e fecha vamos analisar agora se está

funcionando minha conta vou clicar beleza estou logado no meu usuário Rafa tá mostrando certinho se eu copiar essa página e abrir aqui o site em aba anônima mostra que eu não tô logado fazer login e ele vem pra página de login beleza ã esse aqui eu só vou ajustar e deixar um tamanho maior mas em geral aqui já tá pronto cliquei em publicar Car e show o códigozinho eu vou deixar no material didático Não esquece mais uma vez de substituir pelo seu campo tá vamos trabalhar aqui a área de login para vocês verem como que

funciona é uma pagin bem bem fácil de fazer mas enfim é como que a gente mexe nela eu vou deixar aqui a página individual aberta porque eu vou copiar esse bloco mas clica aqui em pá login editar com elementor carregou aqui pra gente vou retirar aqui o título da página elemento lagura Total padrão vamos copiar esse bloquinho botão direito vou colar calma aí não gostei deix eu coloca o contêiner e dentro do contêiner você cola o bloco aí fica certinho esses itens aqui Você pode deletar tudo tá Opa acabei deletando o coner Deixa eu voltar

ó todos os campos pode deletar a gente não vai usar nada vai usar só essa bordinha aqui mesmo de fundo branco só para facilitar mesmo aqui no coner principal eu vou ajustar o layout e show clique em mais arrasta o título eu vou editar aqui login do cliente com H1 centralizar pede um pouquinho maior aqui né Tá e aí o formulário de login você vai usar esse entrar aqui tem dois eu prefiro Se entrar você clica ó arrasta Beleza deixa colocar aqui a contener em coluna ficar melhor cara aqui é só configurar je que você

quiser já vem pronto eu vou aumentar aqui os campos o rótulo você pode retirar eu vou deixar esse redirecionar após sair após entrar eu vou mandar paraa página de minha conta ou seja o usuário faz o login e é redirecionado pra página de minha conta automaticamente quando ele sair eu quero redirecionar ele para URL do site para homepage beleza Campos cor da borda aqui eu vou colocar uma margem inferior e questão de estilo eu vou personalizar Do Jeito Que Eu Acho interessante mas aí você pode ajustar o jeito que você quiser tá bom tá aqui

tá bacana para mim vou só otimizar aqui pro mobile vamos ver como que tá ah tá essa parte que tá zoada 4 2 42 Vamos alterar aqui a família tipográfica e certinho galera vou publicar tá aqui nossa página de login já aproveitando vamos testar o nosso sistema para ver se tá funcionando ou não né ah deu algum problema não sei vamos testar eu vou copiar o URL do site vou abrir aqui meu navegador em AB anônima onde eu estou deslogado beleza tô deslogado aqui se eu clicar nos links tudo funcionando aqui ó certinho at aqui

beleza design não tem muito que dá errado mas a gente precisa ver a parte do sistema eu vou clicar aqui e fazer o login com os usuários aí que a gente criou de teste por exemplo o Pedro vou ccar aqui em entrar você vê que aqui no usuário do Pedro ó puxa o nome dele o e-mail dele Puxa aqui seus processos e tá puxando certinho ó Pedro Pedro e Pedro se eu clicar aqui vem mais detalhes ele cai aqui nas informações certinhas se eu clicar aqui para abrir o pdf ele puxa o pdf aqui certinho

também tá ã vou voltar ó aqui em cima mostra também o nome do usuário e aí só ir alimentando o sistema não tem erro aqui tá se eu clicar aqui em sair vou fazer o log o logout vou entrar novamente com o usuário da Maria por exemplo Ó Maria Maria Maria Maria Ó Maria Maria e Maria se eu clicar você vê que é alterado com as informações desse processo referente a Maria nome número data enfim Beleza se eu sair e entrar com outro usuário que foi o Pedro né queem tinha ó Pedro certinho e o

outro foi o João né até esqueci qual que eu entrei mas vamos ver de novo João ó tudo certinho quando clica aqui em sair se você não quiser redirecionar pro painad de pressa tem um vídeo que eu ensino aqui no canal que ele redireciona pra página que você quiser depois você pode assistir tá que é basicamente ajustar esse deixa eu ver se tem que direto no wiit ah galera uma uma uma coisa legal que ele dá para ajustar aqui direto no ilit você vem aqui nos cabeçalhos né nos dois ó foi até bom ter visto

isso vem aqui no out links que é o wiit né E quando ele sair você redireciona ele pra home page ó pronto e aqui também é melhor do que aparecer aí no pinador de press né ó vamos testar de novo vamos lá então vou aqui abrir em AB anônima vou entrar aqui no usuário da Maria por exemplo beleza certinho clicar aqui em sair Pronto agora eu vou pra home page tá a página de login a gente viu e se a gente testar ó tentar alguém pegar aqui copiar o link e tentar acessar que que vai

acontecer vou colocar aqui o link ó ele vai identificar que eu não tô logado Aí clica aqui para fazer o login e aí segue o processo E aí você vai alimentando aqui com clientes e cadastrando novos itens né seja dieta treino cara o que você quiser cadastrar aqui você consegue essa base aqui Você pode adaptar para diversos diversos projetos de clientes que você for desenvolver e aí galera que vocês acharam Cara vocês curtiram sisteminha aqui de advogados que você pode adaptar para qualquer outro profissional qualquer empresa com área interna com conteúdo individual por usuário área

de login um painelzinho frontem bacana para cadastrar dados mostrei Como cadastra usuários mostrei algumas funções aqui um pouco avançadas do Jet né o profile builder cara o cm ficou muito bonito muito bonito você consegue adaptar para muito site diferente área de membros área interna cadastro individual aí de itens por usuário PDF que aí você pega a sua imaginação Os projetos que vai chegar até você e você faz as adaptações conforme todas as orientações que eu mostrei aqui beleza lembrando eu vou deixar ali na descrição o link do template de tar para você poder comprar Rafa

fiquei com dificuldade em alguma parte cara o template vai te facilitar bastante porque em vez de você ter que criar do zero junto comigo você vai editando junto comigo conforme a aula Beleza vou deixar na descrição link da ros também você precisar de hospedagem aí acompanha domínio Enfim vou deixar os links na descrição Beleza cara se você curtir esse vídeo você gostou faça o seguinte esmaga o dedo no like se inscreve no canal e deixa aqui embaixo a sua sugestão de vídeo aqui pra gente beleza bem importante pra gente trazer novos conteúdos assim como esse

para vocês vou deixar na descrição do dos templates você pode comprar avulso vou deixar link da hospedagem também e o link do nosso treinamento completo onde você aprende a criar sistema sar ces ou programação com WordPress Element Jet Engine isso aqui cara é o básico do básico tem muito mais a no treinamento tá então tem sistema de imobiliário com painel frontend registro login é cada no frontend edição de usuário rank tem um monte de coisa CRM enfim tem projetos projetos muito mais avançados com mais funcionalidades e OB para te facilitar a gente te entrega os

templates prontos lá dentro do treinamento Beleza vou deixar os links na descrição para você poder conhecer um pouquinho mais nosso treinamento de it Ninja pro galerinha dito isso muito obrigado aí pela sua audiência abraço até a próxima valeu