Como Criar SITE COM SISTEMA DE AGENDAMENTO INTEGRADO (Elementor, Jet Engine e Jet Appointment)

[Música] Fala galera me chamo Rafael M sol Ninja cara no vídeo de hoje eu vou te mostrar como criar um site de agendamento utilizando WordPress elementor e os plugins da coco Block o jet Engine e o jet appointment beleza inclusive esse sistema aqui tem pagamento integrado a você pode deixar com pagamento só deixar o sistema aqui de agendamento fica à vontade cara esse é o site que a gente construir eu vou te mostrar aqui a apresentação dele tá vou te mostrar que o sistema também de reservas e logo na sequência a gente vai passo a

passo aqui da aula para você poder aprender a criar esse tipo de site seja para você ou pro seu cliente Beleza então tá aqui o site cara ele ficou muito bonito muito bonito Rafa eu posso adaptar para uma clínica médica com agendamento pode ah para um dentista pode ah posso adaptar aqui para um salão de beleza pode uma barbaria pode esse sistema Aqui Você Pode configurar do jeito que você quiser e aí adaptar basicamente para qualquer nicho que tenha agendamento de horário show a pessoa vai clicar aqui né o cliente ou qualquer botão vai abrir

aqui um um popup onde a pessoa vai preencher os dados então Dea eu colocar aqui ó João jo teste.com beleza clicou aqui em próximo ele vai vir para cá onde a pessoa vai poder escolher o serviço tá vai poder selecionar o profissional que faz serviço dentro dessa clínica de estética por exemplo E aí para cada profissional que a gente pode ter sei lá um determinado profissional pode cobrar mais caro mais barato um serviço custa X Out do custa Y tudo isso eu vou ensinar a configurar para vocês Ah mas a gente não funciona aos sábados

dá para bloquear horário inclusive datas comemorativas como Natal também enfim eu vou mostrar tudo passo a passo cara fica tranquila só seguir a aula beleza clicou aqui ó vai abrir pro usuário selecionar o horário ele vai clicar e aqui vai mostrar o valor total do serviço né E aí se esse serviço for de hora em hora aqui vai mostrar pulando de hora em hora ah se esse serviço for a cada 30.000 minutos aqui vai mostrar também você vai configurar clicando aqui em fazer agendamento se você configurar o pagamento do jeito que eu vou ensinar vai

pra área de pagamento se você não configurar a parte de pagamento ele já faz o agendamento depois você vai conseguir acompanhar no painel que eu vou te mostrar aqui você vai conseguir ver todos os agendamentos do sistema Beleza Rafa depois de ter feito Esse agendamento tem como bloquear esse horário para outras pessoas não conseguirem acessar sim eu vou te mostrar também como que faz obviamente para não ter ali interferência de duas pessoas com o mesmo horário clicou aqui em fazer agendamento no meu caso aqui eu configurei a parte de pagamentos ele já vem para cá

pra pessoa conseguir preencher os dados e fazer o pagamento via pix ou cartão de crédito vou mostrar tudo o passo a passo para vocês beleza galera se você curte esse tipo de vídeo você gosta fala o seguinte esmaga D no like se inscreve no canal e já deixa seu comentário seu feedback inclusive qual vídeo você quer ver aqui no canal a gente criando um sistema para vocês só comenta aí que a gente faz uma aula completa beleza Inclusive eu vou deixar a descrição link do nosso curso se você quiser aprender tudo sobre o pacote de

plugins coco Block passo a passo clica clique ter acesso aos templates editáveis dos cursos acesso a nossa comunidade vou deixar o link do nosso treinamento mais completo na descrição que é o jet Ninja pro beleza dito isso vamos lá pra aula pra gente ver aqui passo a passo como que funciona para poder desenvolver esse sistema Então vamos lá galera seguinte aqui a aula separer em Quatro Passos bem simples A gente vai começar aqui pelo passo um e ao final do quarto passo que vai sair com o site pronto seja para você pro seu cliente por

raf não cria um site na vida fica tranquilo que eu vou te mostrar aqui cara tudo passo a passo clique a clique Como que você você vai montar esse site de agendamento que você pode adaptar obviamente para qualquer nicho que você for criar que tem aí agendamento seja agendamento pago ou agendamento gratuito você vai conseguir desenvolver beleza vamos começar aqui pelo passo um galera pra gente colocar um site online no ar dependente se um site de agendamento qualquer outro tipo de site é necessário ter o domínio e a hospedagem a gente paga para ter o

domínio hospedagem para colocar o site no á e as pessoas possam acessar Rafa quanto que custa como funci funciona o que é domínio O que é hospedagem eu vou te explicar beleza domínio nada mais é do que o nome do seu site ou o nome do site do seu cliente eu sempre recomendo você registrar o ponc ou.com.br ou de preferência você registre os dois tá já hospedagem é onde os arquivos do site ficam armazenados títulos textos botões imagens o sistema de pagamento que a gente vai ter aqui tudo que você tá vendo ele fica dentro

da hospedagem para que possa ser exibido então o domínio é literalmente só o nome e a hospedagem é onde vai a gente vai conseguir armazenar todo as nossas imagens e todo o nosso site em si Beleza Rafa entendi Quanto que custa como que funciona onde que eu contrato eu vou te explicar aqui os valores para você entender é como que funciona em relação ao domínio e hospedagem o domínio normalmente em média custa r$ 50 por ano então você paga o domínio uma vez e fica utilizando ele um ano inteiro o domínio da sua loja do

seu site enfim porém nesse vídeo vou te mostrar como Você pode ter o domínio de forma grátis Beleza já vou te explicar aqui passo a passo como funciona já a hospedagem a gente paga ela por mês normalmente tá o valor é mensal E aí uma boa hospedagem básica porém boa para você começar vai colocar o site aqui no ar não vai dar problema custa cerca de r$ 2 por mês então o domínio a gente registra por um ano para poder utilizar e a hospedagem é normalmente é pagado mensalmente não então se você pegar anualmente você

tem um desconto maior mas por mês em geral você vai pagar isso aqui por uma hospedar e de iniciante por hospedagem Boa PR você poder iniciar e colocar o seu site online no ar Beleza Rafa onde o registro vamos lá te mostrar aqui passo a passo eu recomendo PR você que tá começando quer colocar site online no ar com o melhor custo benefício a hinger já vou te explicar aqui os benefícios Lembrando que a gente tem um link com desconto eu vou deixar o link na descrição Obviamente você contatando pelo nosso link você não vai

pagar nada mais por isso você vai ter acesso ao nosso cupom Além disso você ajuda o canal a gravar mais vídeos como esse para vocês Então cara você puder contratar pelo nosso link vai ajudar bastante aqui o nosso trabalho vou deixar todos os links aí na descrição clicou no link vai cair aqui nessa página pode dess aqui o screw do mouse eu vou te explicar aqui qual que é o plano que você deve contratar ele tem aqui vários planos né começa pelo single tem um prêmium Business de cara o melhor custo benefício é o Premium

tá Rafa por que não single porque ele serve só para um site então ah depois eu quero colocar um outro site aqui na hospedagem para testar brincar um pouco aí ch fica AL limitado o prêmio não você consegue colocar mais de um site e a diferença que de valor acaba não compensando Outro ponto o single ele não acompanha domínio grátis só para quem já tem domínio Então você tá fazendo aqui do zero pega a partir do Premium tá obviamente a gente tem outros planos aqui como o business e o cloud e qual que é a

diferença eh eles acabam e tendo mais espaço de armazenamento né sendo um pouco mais rápido também você podendo colocar mais sites porém Rafa tô com começando quero o melhor custo benefício pega o premmium tá vem aqui no Premium clica aqui em escolher plano ele é um plano excelente Lembrando que ele acompanha o domínio gratuito que eu expliquei para vocês ele acompanha essa série grátis que é super importante que é basicamente aquele cadeado de segurança que tem um site pro site que a gente vai desenvolver é obrigatório e aqui você já tem incluído nesse pacotão tá

a gente também aqui tem a conta de e-mail então ah eu quero criar o meu e-mail contato @ san.com você consegue você consegue criar um e-mail profissional com o seu nome de domínio ou nome de domínio do seu cliente caso ele te peça aqui nesse plano Então cara Vale super a pena Beleza você tem tudo isso não só hospedagem Você tem uma S série de outros benefícios aqui ao contratar esse plano Premium tá é o maior custo benefício que tem clica aqui em escolher plano ele vai cair aqui nessa tela e a primeira coisa que

ter que fazer é escolh aqui em relação qual o período que você quer lembra que eu expliquei que o domínio ele é registrado por ano logo esse de um mês aqui ele não acompanha o domínio grátis por isso que eu sempre recomendo pegar a partir de 12 meses é melhor custo benefício Rafa por quê Porque alguns meses desse é equivalente você pegar o plano anual que já vem o domínio se já tem um desconto já sai com o melhor custo benefício tá algumas pessoas acabam pegando um plano com mais tempo né E aí obviamente conforme

maior o período você consegue um desconto a mais porém tô começando pega aqui o de 12 meses já vai ser suficiente para você esse mensal eu não recomendo porque o o valor mensal dele é muito alto comparado com os outros e não tem o domínio grátis Desce aqui o screw no mouse Beleza não esquece de selecionar aqui o 12 meses né clicou aqui beleza domínio grátis por um ano aqui você vai criar a sua conta e aí você e coloca seu e-mail senha e cria uma conta raf tô fazendo para um cliente cara eu recomendaria

você já fazer no e-mail dele porque depois de um ano ele faz a renovação aqui do domínio da hospedagem para que o site continue online no área ativo belezinha Desce aqui aqui o screw ã antes de você preencher aqui as informações de pagamento você pode ver aqui o valor total que tá dando com um ano de hospedagem mais domínio pro site ficar online no ar o ano todo e ter agendamentos aí e você vender seu produto seu serviço tá saindo aqui por 179 e88 pegar aqui a calculadora só para vocês verem o valor que tá

dando mensalmente aqui dividido por 12 sai por 14$ 14,99 por mês porém se você aplicar aqui o nosso cupom de desconto Ó você já vem aqui tem o cupom de desconto sim você acessa pelo nosso link e digita a sala Ninja clica aqui é aplicar ó t t ele sai aqui por 1661 e89 dividir aqui por 12 cara sai só r$ 49 por mês você vai ter o domínio você vai ter a hospedagem o site online no ar um ano inteiro 12 meses ea você tem ali o SSL gratuito que eu expliquei você tem questão

ali do e-mail profissional por isso que eu falo que esse é o maior custo benefício para você poder começar e colocar seu site online no ar beleza feito isso preenche aqui com as suas informações ou as informações do seu cliente e aqui você vai selecionar a questão do pagamento você pode colocar cartão de crédito se for você Rafa meu cliente você pode pedir para ele gerar um cartão e aqueles cartões virtuais para você fazer o pagamento ou então você pode gerar um boleto e envia pro seu cliente poder fazer o pagamento obviamente por boleto demora

a compensação ali que é um ou dois dias úteis beleza feito isso selecionou aqui as informações preencheu tudo dá uma conferida se tá tudo ok e aí você clica aqui em enviar pagamento seguro não esquece de colocar o nosso cupões pelo nosso link feito isso vou te mostrar aqui como que funciona os próximos passos para vocês entenderem aqui eh em relação como que a gente vai criar o site Beleza então passo um concluído com sucesso bem explicadinho domínio nome do site hospedagem é que vai permitir a gente colocar o site no ar porque o z

vão ficar armazenados na hospedagem expliquei aqui sobre os valores Como você consegue o domínio gratuito como que registra faz o pagamento como US nosso cupom tudo passo a passo finalizamos aqui o passo um cara O Passo do Passo TR passo 4 vai ser exatamente jeito que eu troque ideia aqui com vocês bem tranquilinho uma linguagem simples para que você consiga compreender e acompanhar beleza eh passo dois eh a gente vai fazer a instalação aqui do WordPress configurar Nossa hospedagem vou te mostrar aqui todo o passo a passo Beleza deixa eu Minimizar aqui então depois de

ter feito o pagamento você vai sa aqui a hospedagem na área do cliente com e-mail e a senha ali que Você registrou e ele vai per vai permitir você registrar o seu domínio Rafa como que funciona como eu já fiz aqui a contratação eu tenho aqui os prints né para te mostrar aqui aqui o passo a passo Lembrando que aqui você tem suporte com eles então ah fiquei com alguma dúvida entre contato com o suporte Tá bom mas é bem simples vai aparecer para você alguma tela alguma parte para registrar o domínio resgatar o seu

domínio que você ganhou você clica aqui vai abrir essa tela E aí normalmente ele permite você registrar ou domino.com ou.com.br você vai colocar o nome da sua marca ou o nome da marca do seu cliente lembrando Rafa eu quero registrar sal ninja.com não tem como por quê Porque eu já registrei obviamente esse domínio precisa estar disponível na web para que você possa registrar tá bom E aí você vai pesquisando aí e ele vai te mostrar qual que tá disponível ou não escolhido o domínio Você vai clicar aqui em resgatar domínio Ok vai voltar para essa

telinha aqui aí você vem na parte da hospedagem então o domínio a gente Zerou agora hospedagem a gente vai clicar aqui em configurar tá bom ele vai ver aqui uma tela de passo a passo você pode clicar aqui em começar agora coloca aqui a gente vai criar um um site Ok Ele pergunta se você quer instalar WordPress construtor de sites ali da hosier não precisa selecionar nada eu vou te mostrar tudo do zero lá no e panel que é bem simplificado também clica aqui em pular eu Começarei do zero Opa Deixa eu voltar caindo nessa

tela você coloca aqui o domínio que Você registrou tá bom no Passo anterior que eu mostrei aqui ele pergunta localização do Servidor então o ideal é você colocar a localização mais próxima aí do endereço que as pessoas vão assar site se for no Brasil selecion um servidor aqui da América do Sul do Brasil Ah Rafa eu tô em outro país não tem problema a única coisa que você vai ter que fazer diferente é alterar aqui a região Só isso tá bom clicou aqui finalizar configuração pronto a hospedagem já vai tá certinha para você poder utilizar

Ok como que agora eu faço aqui a instalação do WordPress Enfim deixa eu voltar aqui só pode explicar o que que é WordPress né WordPress é um cms basicamente ele é um que a gente chama de gerenciador de conteúdo e ele gerencia ali PR a gente poder criar qualquer tipo de site que a gente quiser desde um CRM uma loja um sistema de veículo um sistema de mobiliária que inclusive eu já criei todos esses e tá espalhado pelo Canal aí os vídeos e blog a gente pode criar site com área de membros site pro painel

front-end site de agendamento site de pousada cara dá para criar muita muita coisa no WordPress não é só L page ou só site adicional a gente pode criar sistemas o que você vai ver aqui nessa aula é um tipo de sistema que é o sistema de agendamentos Ok para que a gente possa instalar o WordPress a gente vai e aqui no osidade de fazer a instalação vou te mostrar como instala como que acessa Beleza então vamos ver outra coisa o pessoal pergunta Rafa tenho que pagar pelo WordPress o WordPress que a gente utiliza é WordPress

é uma coisa que pessoal confunde bastante wordpress.org esse WordPress é gratuito porém é necessário ter um domínio hospedagem para subir isso online no ar aqui na ros é super simplificado para poder instalar Word Price então contato domínio hospedagem você não paga mais nada para instalar Word Price não Ok não é necessário show deixa eu mostrar aqui para vocês caiu aqui nessa tela galerinha vem aqui Nosa hospedagem clica no botão gerenciar vou clicar aqui carregou pra gente beleza aqui é o que a gente chama de H panel ou em português mesmo HP da rosinger e aqui

você consegue gerenciar e ver tudo que tem na sua hospedagem aqui tem as opções né cara fica tranquilo que a maioria você não vai usar e as que você for utilizar já vou te mostrar então por exemplo Rafa você comentou do e-mail gratuito quero criar tá aqui ó e-mail grátis clica aqui gerenciar e você faz a criação aqui também no lado esquerdo ó aparece a parte de e-mails que você pode clicar aqui e criar o e-mail profissional do seu cliente tem vídeo aqui mostrando no canal como que faz se você tem dúvida tá ã outra

coisa Ah eu quero consultar o banco de dados caso você saiba mexer com isso caso não saiba não precisa beleza e aí tem aqui os arquivos do site né todos os arquivos do site ficam organizados dentro dessa pastinha aqui e também não precisa mexer Fica tranquilo eh os e-mails né conforme eu falei você pode vir aqui em contas Gmail e criar e aqui em domínios eu vou te mostrar uma opção que eu gosto de utilizar aqui para as aulas do canal que é o subdomínio ra Agora complicou que que é isso subdomínio nada mais é

que o nome que vem antes do seu domínio por exemplo a gente tem a ringer.com poré gente tá nopel deles e eles criar aqui um subdomínio para isso Ó hpel hos.com então vou aqui alguns exemplos gente voltar aqui na prática deixa eu abrir aqui bonitinho eh até tinha deixado aqui mas vou criar de novo tá que é um subdomínio vamos ver na prática imagina que o seu domínio principal seja sal ninja.com Beleza você pode instalar aqui o WordPress e criar o site em cima desse domínio tranquilo Rafa eu quero criar um sub domínio de teste

para eu aplicar essa aula e depois eu levo aqui pro domínio principal ou depois eu mexo com o domínio principal Tem como sim olha só o que é o subdomínio é isso aqui basicamente é o nome que vem antes do seu domínio principal Então tá o seu domínio você coloca um nomezinho aqui antes e você tem uma instalação do WordPress aqui e uma outra instalação aqui do WordPress nesse outro domínio dessa forma você pode ter um site de teste aqui brincar um pouco e aprender com as aulas e depois você pode mear pro site principal

ou construir um outro site aqui eles são eh totalmente Independentes tá Rafa eu quero criar uma loja eu quero ver a sua aula de loja virtual no canal eu quero criar com você depois quero criar um subdomínio para isso tranquilo você vai criar um subdomínio né loja Ponto o seud domino.com no caso aqui salja que tô dando exemplo ou pc.br aí você pode criando vários aqui beleza dá para fazer bastante subdomínios e para cada um você tem um WordPress diferente para você poder trabalhar então aqui eu posso criar um site de agendamento nesse outro posso

ficar rabiscando e meendo em plugin testando nesse aqui eu posso criar uma loja e assim sucessivamente beleza e feito isso vamos criar aqui na prática vem aqui em domínios [Música] subdomínio beleza mais aqui alguns exemplos para vocês verem Olha só o tanto de subdomínio que eu tenho criado site de G Que Eu Já criei site de de ingresso blog Land page site de membros tá tudo disponível aí para vocês poderem assistir depois e aprender um pouco mais sobre essas ferramentas Tá mas ó cada um desses aqui é um site diferente com um WordPress diferente instalado

dentro dele e obviamente Ah não quero subdomínio não precisa criar no meu caso aqui eu vou criar eu vou colocar agendamento 2024 vou ccar nesse botão aqui de criar e t plim criado só isso cara é só isso literalmente só isso você pode digitar outros aqui criando caso você queira no meu caso já é suficiente feito isso Rafa como que eu faço para instalar esse tal Word Price que você tá falando tanto sim vem aqui em site olha sózinha aqui ó site clica aqui e clica em a instalador aqui no na ros tem um instalador

automático facilita tudo o nosso serviço clicou vai abrir essa tela ó tá vendo Eu tenho um WordPress aqui outro WordPress aqui outro aqui outro aqui outro aqui enfim eu tenho vários nesse mesmo mesmo plano de hospedagem aqui show e e como que eu instalo clica nesse botão aqui WordPress vai clicar aqui em selecionar vai abrir essa tela já preencher aqui previamente só para facilitar pra gente onde você vai colocar aqui o título do site Rafa e depois você quiser alterar te mostre aqui o e-mail do administrador você coloca o e-mail que você tem acesso caso

você perca esse usuário para SA aqui WordPress ou perca essa senha através desse e-mail você consegue recuperar porém vou te mostrar uma segunda forma de recuperar que é direta na hosar mesmo e facilita tudo pra gente aqui você vai selecionar se vai instalar o WordPress no domínio ou do subdomínio então é aqui que você vai colocar no meu caso vou colocar no subdomínio que a gente criou porém clicando aqui vai mostrar o seu domínio principal E caso você que est domínio principal fica à vontade feito isso clica aqui em próximo Beleza o idioma do site

vou clicar e vou colar português para facilitar ao máximo aqui pra gente Pronto agora que que você vai fazer vai nesse botão aqui de instalar e só aguardar galera ele fazer instalação PR aqui pra gente bem tranquilinho bem rápido a gente aguarda aqui uns 20 30 segundos fazer instalação e aí eu te mostro os próximos passos de como que vai funcionar beleza perfeito carregou aqui pra gente vou nesse botão pular show aqui atado porém se eu atualizar aqui a página provavelmente ele vai ativar para mim deixa eu só atualizar aqui pra gente ver vou dar

um F5 eu acabei atualizando esse mudou aqui pro domínio principal não tem problema eu vou clicar aqui presta atenção com relação a isso tá coloca o subdomínio que você est WordPress ou se tiver no domínio principal tranquilo importante é você selecionar aqui certinho show Você viu que ele já ativou aqui pra gente tá mas que que é isso Rafa esse forçar DPS ó é para forçar O cadear de segurança pro seu site abrir sempre do modo mais seguro que tem que é com o SSL ativo então ele já instalou o SSL pra gente e agora

ele tá forçando o site abrir sempre com esse SSL que é o https S de Security Ok então isso aqui deixa marcado em relação ao L Speed cche é um plugin De Cash muito bom porém a gente não tá utilizando o site a gente tá criando não deixa ativado OK pode desativar depois quando você finalizar o site quiser mexer e trabalhar com isso daqui mas é outra coisa eu não vou mostrar nessa aula perfeito agora Como que eu faço para acessar o painel administrativo do WordPress e criar o meu site duas opções você pode simplesmente

clicar nesse botão Verifica que está no seu domínio certinho né clica aqui no botão e de forma automática I fazer o login no WordPress para vocês uma segunda maneira é aqui ó vou mostrar para vocês também é basicamente você botar no seu navegador nomed domínio comom.com.br bar WP fmin colocando esse finalzinho aqui ó bar WP if admin ele vai para uma tela de login do WordPress Onde você consegue fazer o login no seu painel administrativo e mexer na parte interna do seu site eu voltar você vê que ele fez o login aqui pra gente você

pode ver ó que ele veio aqui ó WP if admin como eu tô aqui pela rosk ele já fez login com o meu usuário porém se você desligar o seu computador e ligar no outro dia não tem problema digita wpi f de mim conforme eu expliquei vai cair na tela de login e aí você coloca seu nome de usuário e senha Rafa perdi vai ter a opção para você poder recuperar vou até mostrar deixa eu sair aqui ó ele vai cair nessa tela quando você colocar WP de mim se você perder a senha você vem

aqui me perdi a senha ó e coloca o seu e-mail e você consegue recuperar Rafa não consegui e agora não tem problema vou te mostrar também uma segunda forma de você recuperar o acesso se você perdeu o e-mail perdeu a senha perdeu tudo simplesmente vem aqui no seu painel de cliente ó vem aqui no seu painel de cliente da rosinger vem aqui em Premium web hosting clique gerenciar vem aqui em WordPress visão geral seleciona o seu subdomínio ou o domínio enfim WordPress que você quer você vai selecionar e simplesmente clica aqui em WordPress e pronto

ele já vai fazer o login automático para vocês beleza show então em relação aqui a instalar WordPress e acessar é basicamente isso agora quero te mostrar algumas configurações Gerais antes da gente entrar na parte de tem plugins que eu já explico o que que é então se você nunca Mex WordPress Esse é a visão geral Car basicamente é muito simples aqui no meu lado esquerdo tem as opões e aonuma op vai abrir aqui me lado direito ISO ahero verhas páginas aqui pág quero ver exemplo Cri um blog Você vai clicar aqui lado direito vai mostrar

S ISO em Ger quando inst gosto de sempre clicar aqui Minimizar essas janelinhas ele sempre vem po págin e plugs padrões vamos deletar tudo então po vem aqui em lixeira e deleta e vou fazer a mesma coisa em páginas e plugins páginas lixeira vou deletar vou vir aqui em plugins e a mesma coisa pode desativar tudo porque a gente não vai utilizar nenhum desses plugins padrões que estão aqui primeiro Eu desativo e depois eu clico aqui para poder excluir ele vai fazer exclusão pra gente perfeito clicando aqui em configuraçõ em geral você tem algumas configurações

você pode mexer então o título do site que eu tinha explicado é aqui que você pode alterar aqui a descrição quando alué digita o nome de domínio no Google aparece uma pequena descrição ao lado do nome do site é isso aqui aí você pode colocar agendamento de estética online enfim um nome qualquer aqui mas você coloca de acordo com o site que você tá desenvolver aqui é o e-mail de administração do site foi o primeiro e-mail que a gente utilizou caso você alterar isso aqui não tem problema digitao o novo novo e-mail clique salvar alterações

e nesse novo endereço de e-mail vai chegar uma confirmação você clica em confirmar e pronto esse aqui vai ser alterado não precisa ter acesso a esse e-mail aqui tá Fica tranquilo E lembrando que só para falar para vocês caso você queira comprar esse temp digitável e acompanhar a aula de uma maneira mais simples e fácil porque você vai est com tempate em mão só para poder editar em cima eu vou deixar o link na descrição desse temp aqui editável que você pode comprar Beleza a gente tem esse template e outros mais de 50 templates editáveis

para WordPress desde loja L page site Sistema CRM vou deixar o link na descrição para você conhecer um pouquinho mais ok Lembrando que os temps tem uso ilimitado clico aqui em fuso horário vou colocar São Paulo e a semana começa em evocado domingo tem que salvar alterações outra coisa importante pra gente poder finalizar é clicar aqui em links permanentes e sempre sempre sempre você vai usar essa opçãoincorreta most também te mostrei as configurações Gerais de WordPress agora vou te mostrar o tema e os plugins que a gente vai utilizar para poder criar esse site tá

o que é tema plugins Rafa tema Hoje em dia a gente não usa muito né antigamente uns temas bem complexos ainda ainda tem o pessoal usa mas não faz muito sentido e e eu vou instalar o tema porque o WordPress me obriga a instalar um tema Então vou pegar o tema mais simples que tem que é o tema Hello elementor ele vai ser 100% compatível com o meu instrutor de página arrasta e solta que é o elementor ok esse tema aqui ele praticamente não tem nenhuma configuração e é exatamente isso que eu quero eu não

quero um tema pesado com milhares de configurações que vão acabar entrando em conflito com elementor por isso que eu vou usar esse tema Rafa entendi e o que são plugins plugins são como aplicativos de celular cada aplicativo que você instala não acrescenta uma função nova no seu celular exatamente que no WordPress Ah eu quero construir uma loja bacana a gente instala um plugin de loja Ah eu quero ter pagamento integrado no site perfeito a gente instala um plugin de pagamento Ah eu quero construir página arrastando e soltando os itens na tela perfeito a gente instala

um plugin que tem essa função de permitir criar sites somente arrastando os itens na tela então plugins é basicamente isso você acrescenta funções no WordPress os plugins que a gente vai utilizar vou te explicar aqui é individual exatamente o que é cada um Tá então vamos lá a gente vai instalar o elementor free que é o elementor gratuito já mostra como instala ele é o consultor de páginas mais usado que tem no WordPress e por ele é mais usado porque ele é muito simples cara você pega os itens arrasta na tela e vai criando o

teu site você já ver aqui daqui a pouco na prática como funciona porém o elementor free ele é limitado a gente necessita também do elementor pro porque ele vai liberar aqui pra gente alguns dinâmicos vai permitir a gente construir cabeçalho roda pé editar as páginas do comerce enfim por isso que a gente vai utilizar aqui o elementor pro Rafa não tem o elementor pro vou deixar o link na descrição para que você possa adquirir uma licença oficial e obviamente colocar no seu site o site do seu cliente para poder criar Teu site Beleza outros plugins

que a gente vai utilizar existe uma empresa chamada coco Block que ela tem um pacote de plugins você compra uma licensa da coco Block Vem tipo 20 plugins não instala todos pelo amor de Deus plugin vai pesando no site porém a gente vai utilizar alguns plugins da coco Block Então você compra uma licença coco Block e você tem acesso a esses plugins aqui lembrando que esse aqui ele é gratuito eu vou te mostrar como você instala esses dois aqui são pagos porém comprando uma licença você tem acesso aos dois Ok link na descrição também caso

você queira e adquirir Tá eu vou usar o jet Engine a gente chama ele de motor enfim porque ele permite a gente criar sistemas sem usar códigos ou programação Ah Rafa você tá falando de site não tô falando de sistema você pode criar sistema com o jet Engine cara sistema de cadastro sistema de área de membros ele é muito bom por isso que a gente tem um treinamento completo com mais de 300 aulas explicando vários e vários sistemas que você pode fazer com ele vale super a pena você fazer parte da nossa comunidade E aí

com ele eu posso montar basicamente muitos e muitos sistemas aqui no WordPress Ok inclusive sistema de agendamento a gente também tem o jet aport que é como se fosse uma extensão do Jet Engine e ele permite colocar as funções de de agendamento no site Ok o jet form builder vai ser o nosso formulário aquele formulário de reservas de agendamento é feito através desse plugzinho aqui e a gente tem o commerce o commerce vai permitir a gente colocar pagamentos caso você queira colocar pagamento no seu sistema Rafa não quero pagamentos aí você não precisa instalar o

e-commerce ok porém todo o restante aqui dos plugins são obrigatórios vamos ver aqui na prática como que a gente instala cada um deles então expliquei exatamente Para que serve cada ferramenta agora a gente vai fazer a instalação tá você vai vir aqui em aparência temas clica aqui em Adicionar novo tema e aqui cara tem muito e muito muitos muitos temas que você pode utilizar Inclusive tem sites que vende temas também para simplificar sua vida Rafa vou criar site x site ys é site de agendamento blog sei lá mais o que loja virtual você só vai

usar Element simplifiquei sua vida aqui não precisa procurar mais tema só o r Element é o suficiente para 99% do que você for criar Beleza você vai aqui em instalar depois ativar e se não apareceu para você não tem problema vem aqui ó Nessa Barrinha e você procura o tema tá bom pesquisa Hell Element eu instalei e agora vou clicar aqui em ativar perfeito eu vou fechar sua notificação e você pode ver que tem outros três temas aqui instalados que a gente não vai usar logo vamos deletar tudo eu vou clicar e v nesse botãozinho

aqui excluir Bele então fazer isso pros outros também perfeito Tranquilo então instalamos o tema e desinstalamos os outros temas que V padrão que a gente não prisa como instal os plugs Rafa vem aqui em plugs adici plugin e aqui você vai pesquisar o nome do Plugin então começar pelo elementor free ó pesquisa por elementor carregou aqui pra gente vou instalar agora e vou aqui em ativar você pode ver que esse plug dos mais usados do mundo porque olha só a quantidade de instalações mais de 10 milhões de instalações ativas desse plugzinho aqui ó vamos ativar

não precisa mexer em nada aqui clica aqui no x tá el também vem com essa notificação conforme expliquei V opções de tela a gente consegue retirar já vou aproveitar vi aqui em elementor configurações ou settings se tiver em inglês V aqui avançado e a recomendo que você habilite essa opha aqui em ativar Basic ela a gente fazer upload svg tá bom que é um formato de imagem que eu utilizo para logotipo e ícones outra coisa que eu recomendo deixar ativada é essa opha aqui ó carregar fonte a 4 que é pr a gente ter opção

de colocar ícones aqui no site vem aqui e salvar alterações então ativa esse e ativa esse aqui também ok agora vem na aba aqui de recursos selecionando essa opção aqui ó barra superior e ativa e basicamente só isso des do mouse até o final e clique salvar alterações pronto então aqui o elementor tá instalado eu vou instalar todos os gratuitos depois a gente instala os pagos enfim ó adicionar plugin Vou pesquisar aqui por Jet form builder ó builder é esse plugzinho Aqui você clica em instalar agora e depois clica em ativar perfeito show eh como

que eu instal agora os plugins pagos da coco Block o elementor pro Rafa você comar o site oficial clica aqui em adicionar plugin clica aqui em enviar plugin aí você consegue fazer o download do arquivo do site deles e joga aqui pro seu computador é pro seu seu site ou então clica nesse botãozinho aqui aqui ó ele vai pedir para você escolher uma pasta do seu PC Onde tá o arquivo você clica em instalar você comprar com a gente instala para você vou deixar o link na descrição enfim a gente deixa tudo instalado e ativado

a licença oficial aí e para você dar continuidade com a aula Ok então eu vou fazer a instalação e já volto com vocês pra gente dar continuidade instalar o comerce ir pro próximo passo Instalei aqui os plugins galera agora eu vou instalar o comerce também então instalei os plugins pre os plugins pagos e vou instalar o ecommerce E por que deixei o ecommerce por último porque tem algumas particularidades né Mas enfim vamos dar uma olhadinha aqui primeira coisa vem em plugins adicionar plugin e digita aqui o commerce dessa forma tá com dois MS e dois

os vai carregar aqui pra gente vamos ver carregou é esse plugin aqui ele é um plugin de loja e pagamentos online e também vai servir aqui porque a gente quer que é a questão aqui dos agendamentos Então você vai selecionar ele mas mesma coisa instalar ativar enfim normal como qualquer plugin ou tema né Sempre clica em instalar e depois ativa beleza carregar aqui pra gente pronto ativa aí sempre quando a gente ativa ele ele redirecionar para uma tela ó vou mostrar para vocês que que vai aparecer aqui e qual opção que você seleciona tá vamos

aguardar carregar simplesmente vem nessa opçãoincorreta eu vou te mostrar onde que ele cria isso e se não criou no seu como que resolve vindo aqui em páginas por padrão ele cria a página de carrinho finalização de compra loja minha conta para essa aula a gente vai usar de carrinho e de finalização de compra de loja não precisa e a minha conta também não vai ser necessária essa aquii eu vou excluir tá essas duas eu vou deixar mas saiba que a gente não vai precisar mexer nelas Deixa eu escolher essa daqui que eu não quero perfeito

Então tá aqui as páginas padrões do comerce Rafa no meu não criou instalei o comerce não criou pode acontecer que que você vai fazer vem aqui o commerce status clica em ferramentas e você vai procurar isso aqui ó criar páginas padrão do comerce ele vai criar automático simplesmente clica nesse botão e pronto somente para quem o commerce não criou aquelas páginas que eu mostrei carrinho checkout loja e finalização de compra beleza minha conta na verdade se o seu criou não precisa vir aqui mas saiba o caminho e como faz vamos agora galera ao passo três

tá então cara passo um domino hospedagem passo dois é WordPress e tema e agora o passo três a gente vai trabalhar o sistema né então a gente vai configurar método de pagamento o comce a gente vai criar o sistema aqui de fato de agendamento E por que eu falei que você consegue adaptar para qualquer nicho porque a gente vai criar aqui o sistema Então você vai poder adaptar porque você quiser não é nada pré pronto assim sabe a gente vai montando aqui mas ser bem passo a passo então depois aqui do Passo três você vai

tá com o sistema pronto para depois só a gente criar as páginas no elementor que é a coisa mais fácil que tem é só arrastar tela não tem dificuldade nenhuma presta muita atenção nesse passo três aqui beleza configurações Gerais oce Então vamos ver como funciona vai clicar aqui em ucommerce configurações não precisa preencher endereço porque a gente não vai vender produto físico a gente pode vender produto físico com ecommerce também nosso caso não precisa Então não vai ter cálculo de de Correios nem nada do tipo não precisa preencher locar de venda pode deixar aqui todos

os países caso você queira você pode limitar para algum país específico como é de agendamento não faz sentido mexer em nada aqui cupom de desconto você deixa essa opção marcada caso você queira ter cupom de desconto E caso você queira criar cupons Você vai vir depois aqui em market cupons e você pode criar cupons aqui no comerce tá bom Aqui é a moeda então Ah Rafa quero o dólar você clica aqui ó e você pode alterar a moeda no meu caso eu vou deixar aqui do jeito que tá mesmo tá tudo certinho produtos eh nessa

nesse site que eu recomendo você marcar essa opçãoincorreta aqui PX boleto cartão você vai entender como funciona então vou pular aqui por enquanto contas e privacidade é d opção da pessoa criar o fazer uma compra sendo um usuário visitante nesse caso eu recomendo deixar marcado aqui da opção do usuário fazer o login durante o checkout alguma conta que ele já tem aqui na loja ou no site você pode deixar marcado também aqui você também Marca essa opin Beleza então tudo isso aqui fala sobre criação de conta né de usuário conseguir fazer o login ou não

enfim Beleza vou solvar alterações Então essas são as opções que eu marquei vindo aqui em e-mails você pode configurar aqui para quem vai os e-mails de novo pedido pedido cancelado ok aqui a gente tem integração não precisa mexer site visibility Rafa vou publicar meu site coloca Live de publicado ok que é o que eu quero aqui com vocês então Live Salv alterações seu site está visível para todos e aqui avançado você vê que elea automa asg PR gente não precisa configur nada basicamente é isso configurações do ecommerce Não tem segredo porém pro comerce funcionar legal

a gente precisa colocar o método de pagamento que vai ser agora o próximo passo a gente vai conectar get de pagamento então se você for conectar get Brasileiro né que normalmente é mais aqui do Brasil tipo Mercado Pago paga seguro você precisa desse plugin aqui ó brzil Mark on commerce Ok se você for colocar pagamento internacional como PayPal stripe e vários outros que tem get de pagamento tem um monte não precisa desse plugzinho aqui eu vou instalar ele porque eu vou te mostrar como coloca o Mercado Pago porém caso você queira colocar outro fica à

vontade vou vir aqui em plugins adicionar plugin vou começar instalando esse plugin primeiro aqui é brzil Market comerce e que que ele faz Rafa ele bota o campo de CPF npj basicamente isso tá é que é necessário aqui no Brasil para rodar esses getos de pagamento né eu vou aqui instalar agora vou aqui ativar e se você só vende para CNPJ ou só vende para CPF dá para configurar também eu vou te mostrar vindo nesse plugin que a gente acabou de instalar clicando em configurações Lembrando que ele abre aqui também ó o commerce Campus o

checkout você pode colocar s vendo pra pessoa física ou só pessoa jurídica ou se vende pras duas deixa dessa forma aqui tem outros Campos também que você pode habilitar Porém esse padrão aqui já vai funcionar legal vou vir aqui em plugins novamente adicionar e você tem que escolher um geto de pagamento Ah Rafa meu cliente quer o PayPal digita aqui PayPal e você vai encontrar um plugin E aí você conecta com a com a conta do seu cliente do PayPal quando tiver um pagamento aqui esse dinheiro é enviado pra conta do PayPal e de lá

o seu cliente faz o saque Ah não pague seguro tem problema você vai encontrar aqui plugin para basicamente quase todos os gats de pagamento disponíveis no mercado e aí você escolhe qual get faz sentido com o seu ah o asas também que é um pessoal usa bastante aqui no Brasil ele tem cartão pix boleto tudo nele tá aqui ó no meu caso vou configurar o Mercado Pago é um plugin muito bom também então pesquis aqui Mercado Pago vou cair instalar agora e vou C ativar porém Rafa viu alum get de pagamento e não encontrei aula

aqui no canal comenta qual getto de pagamento você quer ver a integração que eu te mostro mas em geral não tem segredo nenhum tá Galera vocês vão ver que é bem simples vou aqui em ativar carregou aqui pra gente beleza você pode clicar aqui em configurações do commerce ou V aqui em commerce configurações pagamentos e agora você vai ver olha só aparecer aqui as opções do Mercado Pago eu posso colocar cartão de crédito e pix boleto você pode quar que você quiser eu vou te mostrar como você faz aqui basicamente todos Tá vamos começar desse

esse cartão de crédito você vaiar nesse botãozinho aqui ó concluir configuração ó concluir configuração ele pede para inserir as credenciais vou clicar aqui em inserir credenciais e ele vem para essa tela clicando aqui você pode ajustar prazos e taxas eu vou pular isso porque é muito pessoal de cada um você pode ver que ele exige que tenha SSL ativo contatou pela Rocha e p o nosso link tá Ativ SSL já tá bonitinho não precisa fazer nada essa é uma vantagem que eu falei para vocês é obrigatório tssl nesse site Você vai clicar aqui ó em

inserir credenciais ele abre essa telinha Rafa onde que eu acho isso basta você clicar nesse link que ele vai te redirecionar ó mercadopago.com.br Bars settings barac account bar creds né credenciais eu vou clicar aqui fazer login com uma conta de teste que eu tenho para pegar os dados e eu te mostro como que você é onde estão esses dados e como que funciona então vou clicar aqui cliquei no galera a gente cai nessa página que que ele vai te perguntar a primeira vez que você saar vai ter um formulario Zinho e ele vai perguntar o

nome da loja você bta o nome da loja e vai perguntar qual é o o processador de pagamentos que você tá utilizando Qual que é o commerce Vai colar o comerce e ele pesquisa o modelo de integração Ele pergunta né o modelo de integração você coloca checkout transparente clicou ali salvou vai vir para essa telinha aqui ó voalá e eu tenho essa conta teste obviamente vou tampar aqui alguns dados tá e RF eu tô usando só de teste você pode pegar as credenciais de teste mas para pagamento real sempre usa credenciais de produção Beleza então

você vai clicar nesse botão aqui e ao clicar sobre ele ele vai te dar a Public Key e o ex token você vai copiar um E vai colar aqui copia o outro e cola aqui clique salvar e continuar e pronto a integração vai est feita então eu vou pegar aqui as minhas credenciais de teste pra gente poder trabalhar só para mostrar para vocês né Vem para essa telinha aqui então eu vou copiar a públ aqui e o exess token Ok então copio um copio o outro colo lá e pronto feito isso você vai ver que

vai ficar verdinho aqui né e ele V pro próximo passo você pode colocar o nome da sua loja na fatura dos clientes e é só preencher aqui eu vou deixar em branco Salv continua perfeito passo três Ele pergunta aqui qual que é o get que você quer cartão Pixel ou boleto eu vou te mostrar como você pode configurar aqui os três tá e Beleza vou mostrar aqui o passo quatro pode deixar aqui modo de vendas que de fato é o modo que você vende e tem pagamento real então se você quiser de Modo modo teste

você pode colocar porém eu vou deixar modo de produção mesmo para configurar e mostrar bonitinho para vocês tá Rafa como que eu coloco o cartão agora vai clicar aqui ó eh cartão configurar simplesmente você vai clicar aqui em ativar pronto vai tá ativo você pode configurar taxa de parcelamento né dá as opções aqui para você poder configurar mas cara se você não quiser ver com as taxas padrões normalmente isso aqui a gente configura quando quer receber o dinheiro um pouco mais rápido paga uma taxinha maior E aí e você consegue reber mais rápido esse dinheiro

pix normalmente cai na hora cartão demora um pouco mais Rafa qual que é a taxa do mercado paga Qual que é a taxa do Pag Seguro cara você acha isso 10 segundos no Google bota aí Mercado Pago taxas Pronto já achou eu quero tô te mostrando aqui algo que você não encontra tão fácil que é tudo esse passo a passo aqui beleza em relação à taxa como funciona você ver oficial até porque a taxa é alterada toda hora beleza salvar alterações Rafa quero botar o pix boleto vou mostrar ó oce configurações mostrar do zero pagamentos

o cartão de crédito e débito ativo Rafa quero configurar o boleto você pode ativar por aqui porém clicando em concluir a configuração eu acho melhor que ele mostra todas as opções pra gente ó se habilita aparece que a bolete lotérica Rafa eu quero só pagamento na lotérica só boleto vou deixar os dois mas você pode configurar ou um ou outro aí você seleciona dias de vencimento do boleto você pode colocar aqui e clica salvar alterações se eu voltar mais uma vez na aba de pagamentos pronto tá ativo cartão e boleto Como que eu faço com

pixel eu vou cliar aqui configuração e se você ainda não tem um pix criado no mercado Pag ele vai mandar você te mostrar o passo a passo vou mostrar aqui também você vai baixar o aplicativo vai em seu perfil sua chave pi E cria uma chave pix lá beleza depois você criar se atualizando aqui a página vai aparecer a opção para você só clicar e ativar assim como boleto e assim como cartão como é uma conta test eu não vou fazer isso porque não vejo necessidade porque é basicamente isso vai no seu aplicativo perfil Chaves

suas chaves PX e cria pum criou volta aqui atualiza e ativa ou você pode ativar por aqui também ó clicando aqui porém obviamente tem que ir no no aplicativo antes e seguir esse passo a passo que eu expliquei para vocês show Fechar isso aqui então beleza conf ações gerais do comce conectar com g de pagamento agora a gente vai entrar na parte acho que a parte mais legal que é para criar o sistema e presta muita atenção por você entendeu isso Você domina essa ferramenta E cria qualquer sistema de agendamento que você quiser Clínica Médica

sei lá Imobiliária quero botar de agendamento na imobiliária Imobiliária profissionais empresas serviços dentista diversos negócios aqui no Brasil precisa de enamento você vai conseguir criar entendendo que eu vou te mostrar aqui eu vou querer te mostrar muito mais na prática do que ficar explicando teoria que quiser teoria mais passo a passo explicação mais avançada entra no curso né tudo explicadinho lá aqui vamos direto pra prática e com a prática você vai aprendendo também da mesma maneira a gente vai começar criando dois cpts um para serviços e outro para profissionais Então como que eu crio isso

Rafa veja que eu ten aqui ó posts páginas tá vendo tudo isso são cpts acontece que não tem aqui sei lá médico ou enfermeiro ou Imóveis ou o que eu quiser cadastrar logo eu crio o meu próprio CPT personalizado vem aqui em Jet Engine vem aqui em Post Type deixa eu abrir aqui meu minha colinha eu gosto de acompanhando aqui para facilitar beleza vem aqui a Dil Então Rafa não peguei Jet Engine post Type não tem problema de novo a new show Qual é o nome do seu post Type Rafa não sei tá aqui ó

serviço a gente vai ter um para serviço outro para profissionais então serviços Rafa eu tô cadastrando é médico cara bota médico Rafa eu tô cadastrando sei lá delivery bota deliver você cri do jeito que você quiser eu quero que você ten dessa lógica independente do tempa que você for criar você só vai colocar o nome do sistema aqui no meu caso vou colocar serviços e profissionais Porém você pode colocar médicos pode colocar barbearia e Cortes enfim tá bom desce scru do mouse vem Advance series desce scw vou bem devagarzinho com vocês desce scru ó serviços

né então eu posso colocar um Icone Zinho deixa eu pegar aqui um ícone eu vou pegar esse aqui esse editor eu não quero eu quero o título para colocar o nome do serviço então eu tô criando meu sistema aqui é os campos que eu vou ter no sistema eu vou ter o campo de título para cadastrar o nome e vou ter o campo de imagem também Se bem que na parte de serviços deixa eu ver aqui acho que nem vou usar galera deixa só ver como que eu cadastrei porque se não for usar nem vou

colocar vamos ver é [Música] hum eu vou cadastrar aqui a título de teste tá para deixar o sisteminha mais completo porém não seria necessário o editor e o thumbnail porém o título ele é obrigatório ó Ok mas vamos deixar aqui mais completinho que o exemplo fica melhor para vocês fez isso adicionar post Type pronto Ah não entendi nada aqui ó serviços clicou em Adicionar novo serviço tá aqui ó o título a descrição que seria o aquele campo de editor e no meu lado direito a imagem e aí eu posso cadastrando serviços no sistema que você

criou você criou o sistema se quiser colocar mais campos é possível também só voltar aqui em J Engine post Type seleciona e aí você pode trabar os campos tantos por aqui com os campos padrões do WordPress ou então criar seus próprios Campos uma galeria de fotos vem aqui ó por exemplo galeria esse montanha eu tenho vídeos específicos para isso não vou mostrar para não perder tempo tá mas saiba que dá para você criar sistemas bem mais complexos do que isso eu vou fazer a mesma coisa agora para os profissionais Então vou vir aqui em Post

type addd New vai ser a mesma coisa profissionais vou até copiar aqui tô com preguiça profissionais Advance SS des aqui eu vou pegar o icin de pessoa para ficar bonitinho e vou os mesmos Campos tá título editor tamb Lembrando que o obrigatório é o title os outros não depost Type já tá aqui ó posso cadastrar os profissionais e posso cadastrar os serviços no meu sistema para depois colocar o sistema de agendamento aqui e fazer a interligação entre eles então a gente viu como que cria o cpts Lembrando que você pode criar de serviço de médico

de delivery de imobiliário de carro do que você quiser só alterar ali os nomes conforme eu expliquei vamos agora Cadastrar os serviços cadastrar os profissionais já que a gente criou o nosso sistema de cadastro vou mostrar na prática Como faz também vou cadastrar tudo aqui para não ter dúvida Então vai ser vários exemplos aí que eu vou repassando vou criar o primeiro mais devagar e os próximos um pouco mais rápido para não ficar eh muito lento também né então vou começar aqui em profissionais se eu clicar ele abre essa telinha eu posso adicionar tanto por

aqui né ó Adicionar novo ou então por aqui enfim Tanto faz você clica Beleza deixa eu pegar aqui os cadastros que eu fiz só para facilitar eu vou ter dois profissionais que vai ser a doutora D Carla Menezes eu vou colocar uma descrição para ela mas essa descrição não vai aparecer no site mas só para ficar mais bonitinho bem completo eu vou deixar cadastrado Beleza agora meu lado direito eu vou vou clicar definir imagem de destaque e posso colocar a imagem dela eu tenho a imagem aqui no meu computador eu vou pegar todas as imagens

que eu tenho e vou arrastar aqui de uma vez Rafa eu quero essas imagens também eu vou deixar na descrição para vocês o link do material didático dessa aula gratuito tá lembrando que o template é pago porém caso se qu só as imagens que eu estou utilizando eu vou deixar para vocês para que você possa fazer o download utilizar aqui tá então pegar aqui essa imagem definir imagem destacada nesse botãozinho aqui ó pronto publico publico cada ser a primeira médica a primeira Doutora o primeiro médico primeiro dentista primeiro corretor por exemplo se eu clicar aqui

no ícone n press eu volto para cá e vou adicionar mais um que vai ser a dout Marcela deixa eu aqui perfeito deixa eu pegar aqui a descrição Zinha que eu montei para ela beleza do lado direito eu vou colocar uma imagem que vai ser essa imagenzinha aqui lembrando que eu tive que padronizar todos os tamanhos de imagem para ficar leves Rafa não se mexer com imagem no site eu quero aprender tem vídeo aqui no canal tanto como você cria banner Como você tira as medidas das imagens como que define o tamanho os formatos E

como otimiza tem tudo cara só aí no canal você vai aprender como que faz vou publicar então cadastrei aqui os profissionais Rafa eu quero cadastrar 20 cara Adicionar novo Adicionar novo Adicionar novo e vai seguindo que eu expliquei você pode cadastrar conta se você quiser o site é seu o sistema é seu não é um sistema alugado que você tá pagando mensalmente o sistema aqui é seu essa é a grande vantagem do que eu tô te ensinando vem aqui em serviços Adicionar novo ou então você pode clicar aqui e clicar com Adicionar novo Dá no

mesmo e aí galerinha vamos cadastrar os serviços também ó tratamento facial como é a mesma coisa eu vou fazer um pouco mais rápido tá bom somente para poder adiantar aqui a gente não ficar muito tempo é com item repetitivo publicar então é a mesma coisa título descrição thumbnail Não esquece né clica aqui ó thumbnail você define e agora repete Adicionar novo beleza V aqui a descrição Zinha perfeito lado direito tratamento corporal eu vou usar esse iconz publo beleza Adicionar novo e assim [Música] sucessivamente beleza depilação a laser E aí eu tô dando alguns exemplos né

mas eh você pode também cadastrar todos os serviços que você quiser inclusive Não tem quantidade pré definida nem nada tá faltam mais três que eu vou cadastrar nesse exemplo e eu vou fazer aqui rapidinho com vocês Ah Rafa tô fazendo para barbearia Aí você coloca corte navalhado corte degradê corte dis corte daquilo ser a mesma coisa né só adaptando o nicho ah dentista é abturação arrancar dente e aí você vai colocando Beleza [Música] skinc skinc vou pegar S aqui show e o próximo é estética íntimo então eu vou colocar então eu fiz questão de mostrar

eu cadastrando todos os seis porque tem muita gente fica com dúvida muito iniciante mas cara você aqui que não tem segredo fiz tudo na frente de vocês pronto recapitulando todos os serviços e todos os profissionais Beleza então eu cadastrei os serviços e os profissionais que vão prestar esse serviço Rafa S eu quero cadastrar os serviços não quero cadastar os profissionais fica à vontade é só não criar o CPT de profissionais você tá montando o sistema isso vocês precisam compreender a gente tá criando sistema do zero então é totalmente adaptável às suas necessidades Beleza agora vem

que o pessoal erra muito cara que a configuração do Jet apman mas eu vou fazer aqui igual Fiz todo o site com vocês simplificar o máximo para que qualquer um consiga configurar eu vou te mostrar basicamente quase todos os possíveis cenários que você possa ter Então vamos conferir aqui o jet apport cara eu vou te mostrar Rafa quero cadastrar um horário geral Rafa quero cadastrar horário específico para serviço ah não para profissionais específicos porque por exemplo é a Paula trabalha só de segunda a quinta a Maria é de segunda a sexta isso pode acontecer muito

em salão em clínica tem um profissional que tá fazendo faculdade e só atende em determinados dias tem profissional que a hora dele é r$ 2 outro profissional custa 50 como que eu configuro isso dá para fazer individual dá para fazer geral Ah um serviço demora 1 hora e meia outro serviço demora 3 horas lá no agendamento tem que ficar travado um 3 horas e o outro fic travado 1 hora e me eu vou mostrar também horas feriados Natal ano novo Dias off dia de trabalho cara tudo é questão de tradução mostrar no finalzinho e basicamente

vou te mostrar aqui todos os cenários para não ter dúvida vamos lá lembrando se quiser ajudar o canal vou deixar o link na descrição dos plugins da hospedagem também do tempo digitável dessa aula cara vai tudo PR configurado facilita demais e lembrando você compra somente uma vez você pode usar em quanto site de cliente se vocês quiserem eu vou deixar o link na descrição Bom vamos lá appointments a primeira vez que tu vai fazer Ah não D bo vem aqui em setup é um passo a passo ó setup pronto setup show eh deixa eu abrir

aqui porque eu vou criar dois Campos e eu vou olhar aqui na minha colinha porque não tem problema nenhum eh deixa eu ver só os campos que eu vou criar que eu acabo esquecendo Ah tá tá aqui pronto service serviços Quais são os serviços galera Rafa Não entendi você vai clicar e ele vai aparecer todos os cpts lembra que eu expliquei Custom post Type do WordPress são todos esses daqui inclusive os que a gente criou personalizado ó o poder do que tô ensinando para vocês a gente criou de serviços então Ó cadê serviço tá aqui

ó fo que a gente quou se você colocou outro nome procura aí e seleciona Rafa eu não quero colocar os prestadores desses serviços profissionais pronto clique next não tem problema ah foi eu criei junto com você eu fiz os dois clica aqui os providers são os profissionais e eu vou selecionar ó profissionais então aqui são os serviços e aqui os profissionais os profissionais não é obrigatório colocar caso você queira fica à vontade vem aqui em next aqui ele pergunta se você quer criar Campos no banco de dados eu quero para pegar o nome do cliente

e o telefone eu acho importante então eu vou colocar aqui nome nome cliente telefone cliente Rafa Quero adicionar mais campos sei lá e WhatsApp do cliente rede social Cuidado para não colocar 300 Campos aqui e cara ninguém vai preencher tá hoje em dia as pessoas querem coisas rápidas Então coloca só os campos necessários que a clínica aí ou a estética ou o que você tá fazendo pede fala pro seu cliente só pega os campos necessários depois completa o cadastro direto aí na loja enfim vem aqui em next pronto aqui é o que o pessoal confunde

muito todas as configurações nessa aba aqui do Jet apman são as configurações Gerais ok então a gente eh tem aqui o formato de hora que você pode colocar PM em não sei o qu ou então deixa o padrão brasileiro que é esse aqui ó vou deixar esse padrãozinho que é que a gente mais usa aqui no no Brasil mesmo né ã aqui a gente tem o tipo de agendamento então o que que seria esse slot slot é um horário disponível seja 30 minutos para fazer um corte de cabelo seja 3 hor para fazer uma unha

seja 10 horas para fazer uma uma progressivo enfim você pode definir períodos específicos para Serv serviços específicos E aí sempre vai ser slote 99% de vocês vai usar o slot então eu vou nem mostrar muitos outros aqui ó deixa eu só traduzir a gente tem aqui ó o o seletor de tempo Onde o próprio usuário consegue definir o tempo do serviço não faz muito sentido ou então sei lá eu peço consultoria eu quero que a pessoa defina o tempo que ela quer contratar você poderia usar esse seletor de tempo tem esse recorrente aqui também ó

o usuário pode agendar os compromissos 99% dos casos é o slot tá então deixa ele marcado duração Rafa todos os serviços tem duração de 30 minutos ou tem duração de 1 hora você vem aqui e configura só que você deve estar se perguntando Rafa mas tem um serviço que tem 3 horas de duração O outro tem cinco por mais que a maioria tenha uma hora de duração alguns serviços específicos T mais tempo outros tem menos tempo lembra que eu falei que eu vou mostrar daqui a pouco como que faz de forma individual aqui é o

geralzão Então vamos focar no geral Depois eu mostro como a gente entra em serviço por serviço e faz as configurações individuais tanto a nível de serviço quanto a nível de profissionais fechado combinado assim aqui a gente tem o buffer antes e o depois que que é isso eu terminei aqui o serviço de uma hora eu quero permitir vamos supor que alguém aido das 9 às 10 bom esse expr aqui é bom Alguém ago das 9 às 10 eu quero permitir que alguém agende das 10 às 11 pô Rafa fico cansado preciso de 15 minutos para

descansar para ir no banheiro Enfim então o que você tem que fazer tempo de buffer após é colocar aqui os 15 minutos precisa para descansar dessa forma o que que vai aconte aqui ó o que que vai acontecer vou explicar tá a o primeiro cliente agendou das 9 às 10 e o segundo cliente não consegue agendar 10 horas exatas ele só vai conseguir agendar a partir das 10:15 que é o seu tempo de descanso tempo de gordurinha de um serviço e outro caso você queira colocar você pode colocar aqui tá que é basicamente esse tempo

aí para você descansar ou o tempo o cliente não fic esperando enfim e aí que eu tenho o tempo antes também antes de cada horário e depois de cada horário caso queira teressa gordura 5 minutinhos antes 5 minutinhos depois você pode ir colocando eu vou deixar aqui o padrão que todo mundo provavelmente vai utilizar isso aqui você pode bloquear o tempo se ó não o agendamento não poderá ser feito se houver menos tempo restante então Ah tem um horário disponível 5:30 masos falam fecha 6 horas e o serviço demora 1 hora Rafa eu não quero

é eu quero bloquear aí você pode selecionar o tempo que você quer que bloqueie enfim reservar múltipla não faz sentido é a mesmo cliente poder agendar vários compromissos e horários Dias diferentes é não faz sentido PR a maioria né mas para alguns pode ser que sim ah eu quero que o meu cliente João já agende horário da aula de inglês dele de segunda da próxima quinta para travar aquele horário Pô você marca aqui e o mesmo cliente vai conseguir eh agendar V horrios e que você pode permitir o quanto de horários que ele consegue selecionar

na tua agenda no máximo 10 no máximo 20 beleza até aqui tá tudo certinho galera expliquei todas as opções com exemplos práticos Vamos descer aqui beleza vou explicar essa aba depois essa depois essa Ok e depois venho explicando novamente de forma individual para cada profissional aqui você vai colocar os dias que você trabalha os horários segunda terça quarta 15 até domingo aqui é o horário Rafa não trabalha esse horário trabalho das 9 à 6 clica aqui em editar e coloca das 9 a se salvar pronto quando a gente salva ele não atualiza aqui mas depois

de você atualizar a página ele mostra o valor certinho então eu vou fazer com todos imaginando que começa das 9 6 todo dia das 9 à 6 das 9 à 6 Ah não sexta-feira fecha mais cedo beleza coloca aqui das 9 A que hora que fecha ah 2 horas você pode colocar eu vou deixar até 6 também Rafa sábado domingo a gente não trabalha Pô maneiro Rafa a gente trabalha sábado das 9 A 1ora funcionar das 9 a 1 hora na verdade à 13 né pronto cara não tem dificuldade nenhuma aqui é só você colocar

os horários de trabalho vou tirar aqui que eu vou deixar só de segunda a sexta mesmo pronto hora de trabalho nenhuma dificuldade caso você queira colocar mais horas ah a gente para cinco mas volta seis o segundo turno ó adicionar você acrescentou o horário das se Das 7 às meia-noite que é o segundo turno do do serviço aí você pode colocar calma aí que eu coloquei errado pronto Das Das 7 às 11 Ó lá tá vendo Então você pode configurar das 9 às meio-dia aí para por uma hora do almoço e das 1 hora até

às 5 dá para fazer também e você vai critando múltiplos horários aqui que você permite que tenha agendamento beleza em relação à hora de trabalho bem explicadinho bem passo a passo para não ter dúvida agora dias de folga adicionar Dias Rafa a gente não trabalha no Natal não tem problema a tá aqui Natal selecionar a data de início Então vou pegar aqui a data de início dezembro ah a gente pode trabalhar no dia sei lá 23 e e só volta ah deixa eu tentar passar aqui é que tô com tradutor ativo né el atrapalha e

só volta a trabalhar Rafa dia dia 29 pronto travei aqui do dia 22 até o dia 28 né ninguém vai conseguir até dia 29 enfim ninguém vai conseguir agendar nada aqui então 22 dia 28 certo ninguém consegue agendar nada aqui no site se coloca 29 ele pega o 28 você coloca 30 pega o 29 enfim que é o período do dia né Mas beleza dou um save ah final do ano também não adicionar Dias ano novo são os dois principais aqui que o pessoal acaba não trabalhando no Brasil então eu vou configurar para mostrar ó

salá do dia 30 até o dia sei lá dois então save pronto esses horários vão estar travados depois qu a gente tentar eh reservar um sistema vai tá bloqueado aqui você pode colocar working Day são os dias de trabalho mas como configurou segunda terça quarta quinta sexta esse vai puxar todas as todas as semanas de segunda a sexta e vai colocar ali a opção de agendamento caso você queira configurar alguma coisa diferente disso ah esse mês a gente trabalha não sei só de segunda quarta alguma coisa desse Nesse estilo você pode selecionar aqui as datas

enfim colocar o nome dos dias mas aqui éo menos necessário tá porém caso você queira tá aqui a opção caso pe uma configuração super específica que eu nunca vi ninguém usando você pode trabalhar com esse aqui vou C em next galera eu tô um tempão mostrando um uma por uma as configurações com exemplos tá então bem passo a passo mesmo para que todo mundo consiga tomar aqui meu chavear aqui next muita atenção aqui muita atenção Rafa eu não quero pagamento integrado Então não precisa ativar o comerce Rafa eu quero pagamento integrado a gente configurou eu

quero colocar o meu cliente pediu pronto você integrou com comce com um clique Rafa aqui a gente tem a single service e tem a Simple page o que a gente vai usar vai ser esse aqui mas por garantia deixa os dois ativos o formulário ele vai ser criado como com o jine forms não aqui é antigo ess ó jine Nem aparece tem que habilitar tem que colocar aqui o J builder que é o novo que foi aquele PL que instalou lembra que é esse aqui ó J form builder é que você vai selecionar então revisa

se tá tudo certinho e clique em finish pronto plugin tá configurado você vem aqui em a podm series ele cai aqui nessa tela onde eu vou te explicar também aqui porque tem alguns outros Campos né então vamos rever isso aqui outra coisa quando você faz com comce você vê aqui em produtos ele tá aqui ó appointment cara não exclui isso isso aqui é integração com o comerce você não precisa mexer nesse produto não precisa fazer nada aqui tá galera dese jeito que tá Ah Rafa mas o preço dele tá R 1 não tem problema ele

vai puxar o preço que a gente definir depois certinho então isso aqui é só para fazer integração do sistema com o comerce para que a gente tenha pagamentos não mexe nisso não exclui se você tem que fazer a configuração novamente Deixa eu voltar aqui no Jet app na verdade é aqui mesmo ses então caso você queira Ah agora eu quero integrar o comce ou então não quero mais integrar você habilita ou desabilita aqui work horas né de trabalho você pode reconfigurar tudo que a gente fez ó das novas 18 tá puxando certinho E lembrando que

is aqui é para tudo depois eu vou mostrar como configuro de forma específica aqui a gente tem as Labes Eu recomendo você personalizar segunda terça quarta quinta sexta e sábado e aqui os meses do ano então vou configurar também janeiro fevereiro março abril maio junho julho agosto setembro outubro novembro e dezembro pronto traduz S tirar esse aqui da frente playout e deixa eu ver aqui essas opções não precisa mexer nso aqui depois Se estiver pronto o sistema se você quiser ver o formulário de forma diferente você pode habilitar essa opção ess aqui também não precisa

mexer aqui é Advanced aqui as configurações padrões já vai funcionar Tá então não precisa mexer em nada caso você queir algo muito específico que não seja o padrão é aqui que você pode fazer alguma alteração por exemplo e seleciona o tipo de verificação disponibilidade por meio de serviço de tudo né que esse geralzão aqui que a gente configurou ou de forma independente cara você deixando nesse daqui e já vai funcionar porque nele a gente consegue configurar de forma individual e de forma geral Então não precisa mexer em nada tá tá vamos pro próximo integrations não

uso aqui também então vou pular workflows isso aqui o que que é você pode configurar um workflow que é o seguinte depois que a pessoa fizer o agendamento ela vai receber um e-mail ah confirmação feita com sucesso eu não vou entrar nesse mérito aqui porque a aula ficar muito longa para mostrar uma função que nem todo mundo vai utilizar mas caso você queira o usuário fez o agendamento eu quero enviar um e-mail para ele de confirmação alguma coisa do tipo enfim te espero aqui na minha clínica você pode configurar nessa parte de workflows ok aqui

a gente tem TRS que são as ferramentas onde tem aqui nosso banco de dados beleza os campos que a gente criou eu vou deixar aqui cas se quer criar algum Campo pode criar aqui também esse setup aqui cara pelo amor de Deus e cuidado você clicar aqui em reset vai ter que refazer todas as configurações de novo então não marca ele de jeito nenhum Se não me engano ter até uma opção zinha aqui pra gente desabilitar aquele setup ó isso aqui ó aqui é Advanced Marca essa opção aqui para garantir tá que é esconder o

setup se você vi se seu cliente vem aqui ccar em setup ó e clicar aqui sem querer vai reiniciar todo o sistema vai ter que fazer tudo de novo então Por garantia vem aqui Advanced e Esconde isso ó se eu atualizar não aparece aqui o setup tá bom perfeito então te mostrei aqui tudo que é tipo de configuração em relação à configurações Gerais agora O que vocês vão me pedir que já sabia e já vou mostrar que são as configurações específic como que eu defino o preço individual como que eu defino eh profissional serviço eh

preço a nível de serviço preço a nível de profissional profissional que trabalha determinado dia e outro dia folga profissional que tá de folga e tal dia profissional eh que cobra mais caro serviço que é mais barato enfim serviço que demora 3 horas serviço que demora 1 hora eu vou mostrar tudo aqui nesse passo a passo agora então vai ser mesma coisa dos outros bem passo a passo para que você consiga pegar aqui não tenha dúvida em relação a isso porque seu cliente vai pedir ah configura Sim configura assado você prando atenção aqui você vai conseguir

configurar o jeito que o seu cliente quiser então vamos configurar agora galera esses mais individuais aqui tá então o primeira parte foi o geralzão agora individual conforme eu expliquei aqui para vocês então vamos abr aqui o site beleza vamos ver aqui na parte de serviços eu vou abrir os dois serviços profissionais para vocês verem aqui as particularidades de cada coisa eu vou pegar por exemplo comeando por esse aqui ó vou clicar Rafa tá aparecendo algo que não aparecendo antes ó essa appointment series sim porque a gente fez a configuração no jeto e por isso que

tá aparecendo essa configuração agora aqui pra gente poder configurar imagina que o tratamento facial Ele custa r$ 50 aqui eu tenho ó Price per slot preço por slot 150 lembra que eu tinha explicado também em relação a horas minutos então ah cada hora desse serviço custa e R 50 se a pessoa agendar 4 horas 4 x 50 200 então eu posso vender o serviço por hora por minuto ou definir um valor fixo já para o serviço completo que é que a maioria de vocês vão utilizar porém eu quero definir a partir de horas é x

horas custa tal valor ou então por minuto eu tenho a opção dos dois aqui então é um sistema bem é amplo que a gente pode adaptar para vários profissionais tem profissionais que trabalha cobrando por hora então coloca a hora se for é um serviço completa aquele valor você coloca slot E se for minuto mesma coisa né mesma lóg perfeito então acessei aqui o serviço o primeiro eu vou descer aqui o escuro do mouse e colocar o preço clicando aqui em Custom não sei eu falar isso aqui mas eh vou clicar aqui para vocês verem ele

vai mostrar para mim as opções e aí eu posso configurar de forma individual esse serviço ele demora 1 hora me0 1 hora me0 e aí eh alguém colocou ali vai travar e depois só de 1 hora e meia que vai liberar eh outro serviço aqui para o outro cliente conseguir agendar então aquele horário fica travado vamos supor das 9 às 10 me0 E aí depois alguém pode agendar das 10:30 a a meio-dia a 1:30 às 3 horas E aí vai pegando de 1 hora me e 1 h30 ou então qualquer horário aqui é só você

adaptar tá beleza imagina que o serviço só pode ser agendado até os próximos 60 dias para frente você pode configurar ou pode deixar ele e aberto em geral a gente sempre tem ele aberto cer mesmo aqui o buffer antes e buffer depois que é aquele tempo de descanso antes ou depois que eu expliquei para vocês aqui também já expliquei ã aqui os horários que esse serviço vai estar disponível estão aqui Rafa segunda-feira não tem e tratamento facial porque sei lá a a Fernanda que faz esse serviço aqui na clínica ela não tá disponível na segunda-feira

tá fazendo faculdade você deleta esse horário e esse esse dia na verdade ele fica travado e ninguém consegue eh selecionar nada aqui a gente tem os dias de folga eu posso colocar especificamente para esse serviço mas o que a gente configurou de Natal em ano novo vai pegar em todos se eu quiser sobrescrever com alguma opção aqui no Natal somente esse serviço eu posso adicionar no período do natal ou eu posso colocar aqui também ah que esse serviço aqui toda segunda e terça não vai ter sei lá algum período posso puxar eh por aqui tá

então só mesmas configurações que eu expliquei para vocês só que agora de forma individual tanto para serviço quanto para profissionais profissionais já vou mostrar terminou Rafa não a gente tem outra coisa que a gente pode fazer aqui deixa eu clicar né então aqui os horários e lembrando que os horários aqui do é das 9 às 6 né tem que vir aqui alterar também não pode esquecer deixa eu alterar aqui todos Beleza então bem passo a passo tô alterando tudo ele tinha que puxar o padrão que a gente já configurou né seria mais fácil mas enfim

ele vem sempre esse padrão aqui não tem problema é rapidinho para ajustar tá bom ó deixa eu salvar e atualizar a página beleza 9 18 18 18 9 8 d no futuro 1:30 Beleza então explicadinho aqui como a gente faz a nível de serviço né você vai colocar o preço obviamente vai definir se ele é um Preço Fixo ou por hora ou por minuto fica a vontade aqui você coloca a duração desse serviço aqui expliquei também como funciona a questão aqui das horas dias off esse aqui você não precisa configurar o Natal ano novo porque

já tá configurado no geralzão e aquele geralzão já puxa em todos beleza beleza no meu lado direito tem uma opção que eu quero mostrar aqui para vocês que é aqui ó selecionar profissionais que que é isso quais serão os profissionais que vão atender aqui o tratamento facial então Eh imagina que seja a doutora Marcela e a Carla então Marcela e a Carla Ah não Rafa é só a doutora Marcela que faz esse tipo de tratamento aqui na clínica A D Dra Carla não então deleta E aí lá no agendamento só vai ter a opção de

selecionar a doutora Marcela se tiver outros doutores outros profissionais você pode puxar por aqui vou salvar beleza configurado volto Rafa o tratamento corporal ele tem um valor diferente então você pegou aqui o esquema tudo que a gente tinha configurado anteriormente na aba aqui de appointments ele vai funcionar para tudo ele vai puxar aqui os horários tudo vai ter uma h de duação poré algumas coisas não tem hora de é uma hora de duração tem mais ou menos algumas coisas eh tem dias específicos que vão ser trabalhados enfim e aí tendo essa particularidade eu entro no

item específico e simplesmente altero ele conseguiu compreender vamos continuar aqui fazer para todos os serviços bem passo a passo depois pros profissionais bem passo a passo também vamos lá ah tratamento corporal custa R 200 beleza e e ele tem uma hora de duração se tiver uma hora de duração puxa lá do geral que a gente definiu se tiver 30 minutos ou mais ou menos você configura aqui Ah Rafa is tem Du horas vou mostrar mais uma vez ess que vai ser o último que eu vou mostrar assim só para não tomar muito tempo aqui né

mostrando repetitivo eu gosto de mostrar repetitivo só para garantir que tu vai entender que é importante aí mais uma vez vem aqui configuram por umos horários ah segunda eh terça-feira esse serviço aqui só funciona a partir das 11 você pode configurar também não tem problema aí os primeiros horários vão ficar o quê bloqueados tá bom lá mais um mais um mais um mais um mais um mais um perfeito lado direito lembra o relation relaté de profissionais ah is aqui vamos supor que as duas doutoras que a gente tem na clínica ele elas atendem então eu

seleciono aqui as duas eu vou Car em salvar beleza pronto volto aqui pra Oba de serviço e eu vou ter que configurar um por um para facilitar eu fazer um pouco mais rápido esses próximos aqui pra gente não demorar muito Então vamos lá ah esse aqui custa sei lá é 120 beleza sai sai sai sai sai sai sai sai 120 deixa fechar essas notificações aqui porque eu acabei rolando o screw do mouse e preço Aumentou e diminuiu foi salvando automático vou pegar aqui as outras doutoras colocar beleza salvar hum vem no próximo serviço coloca o

preço Lembrando que os preços que eu tô colocando aqui é nomes fotos são todos dados fictícios só para exemplificar para vocês aqui na aula de como funciona o sistema tá bom E lembrando que é só uma repetição que eu tô fazendo aqui do que eu já expliquei tô fazendo mais rápido pra gente não ficar travado aqui numa parte da aula tá bom configurei toda a parte aqui de serviços Pronto agora vamos ver a parte de profissionais vão ser as mesmas configurações só que em vez de eu me comunicar diretamente com os serviços eu posso me

comunicar com os profissionais que faz esse serviço aqui na clínica no dentista sei lá mais o que que você vai fazer aí vamos aqui pra parte de cara da dos doutores né então vou abrir aqui a primeira e a segunda vocês podem ver que automaticamente aqui já vai ficar os serviços que essa doutora faz porque puxou lá da parte de serviços que a gente tinha configurado Rafa puxou errado vem aqui e clica no xizinho e deleta tá bom Lembrando que aqui também tem Unos preços e eu posso alterar imagina que a hora dessa doutora aqui

é mais caro sei lá custa R 200 e a hora da outra Custa r50 você pode fazer aí você configura aqui individualmente a hora dela vem aqui na outra e configura de de de forma e individual a hora dela Rafa eu quero que o preço puxe lá do serviço que eu configurei 120 200 250 que a gente tinha configurado lembra nabaa de serviços a gente configurou eh um preço para cada tipo de serviço eu quero que puxe de lá sem me preocupar deixa aqui ó herdado preço do serviço pronto caso eu queira configurar e o

horário dela para qualquer serviço a ser R 300 porque é uma doutora mais cara eu posso colocar aqui também ou então deixa essa opção que é mais intuitiva que já vai puxar automaticamente da aba de serviço que aba Rafa essa daqui ó que a gente acabou de configurar todos esses preços vão ser dados automaticamente caso você não queira você seleciona aqui alguma opção que vai sobrescrever Aqueles dados ã imagina que essa Doutora ela eh deixa eu tirar isso aqui lá você pode colocar a duração do serviço dela e você pode colocar que por exemplo pô

segunda-feira era um trabalho aí você retira aqui e a duração aqui do do serviço para ser atendido com ela demora uma hora é uma a partir de 1 hora não sei você pode colocar aqui também ah ela não vai trabalhar em novembro Ela tá de férias vem aqui adiciona novembro né vou até mostrar para não ter dúvida ó do dia um dia 30 pronto a vai tá de fera esse período fera ninguém vai conseguir agendar nada com ela nesse mês o sistema vai travar automático porém essas particularidades aqui por Doutor não é muito comum normalmente

é pro serviço mesmo então eu vou retirar vou deixar aqui herdado e show aqui a outra Doutora também então vai aparecer as mesmas configurações aqui os serviços que ela faz caso e pode ficar aqui no X para alterar ou então você pode pesquisar aqui também ok e é basicamente isso então a gente tem aqui três níveis o primeiro nível que é o geralzão aqui em aport series que a gente deixou tudo configurado porém esses esse horário e tudo isso daqui é sobreescrito caso eu venha aqui diretamente na aula de serviços e faça alguma alteração em

algum serviço específico Ah quero me comunicar somente com esse serviço e ele só dura sei lá é 30 minut ou uma hora ou o que eu quiser configurar esse dado vai sobrescrever os dados gerais e isso aqui que vai funcionar Ok por caso você não queira deixa o padrão enfim a você vai colocar os valores né vai correlacionar aqui os doutores os profissionais e também eu posso selecionar cada profissional e fazer a mesma coisa então expliquei os níveis mostrei passo a passo como configura revisei com vocês aqui falando novamente Então cara tá mais explicado eh

se você não entendu alguma coisa é questão de você clicar aqui botão direito traduz volta à aula porque eu mostrei aqui para vocês ó como configurar preço Como configurar eh profissionais que oferecem determinados serviços ou serviços de determinados profissionais opções a nível de serviços opções a nível de profissionais preços específicos para profissionais específicos e preços específicos para serviços específicos Então tá mais que explicado Beleza agora a última parte pra gente finalizar todo o sistema e deixar is aqui rodando bonitinho é ajustar o formulário de agendamento vamos lá como que faz Rafa vem aqui em builder

forms por padrão Ele criou esses dois formas pra gente Rafa no meu criou e agora cara você vai ter que fazer aqui ó o seguinte é aport e você vai ter que fazer aquela parte [Música] de setap novamente porque se fez alguma coisa errada Beleza se o seu tá criado aqui dá continuidade sen não volta na na parte que eu mostrei lá como que faz aqui a gente tem o single service e o state page o que a gente vai usar vai ser o stake page esse aqui seria pra página individual dos doutores caso eu

fosse criar como eu não quero que essa aula fique muito longa esse aqui demoraria sei lá uns 20 30 minutos a mais eu não vou configurar isso aqui nessa aula então vou mover pra lixeira eu vou deixar aqui na lixeira porque eu não vou usar Beleza eu vou usar esse aqui ó state page book form presta atenção é esse não o outro cada um tem uma particularidade diferente Beleza clica sobre ele carregou Rafa Agora complicou não tô entendendo nada calma calma calma o formulrio já vem todo pré-configurado facilitando aqui pra gente mas que que eu

vou fazer aqui aqui tem o user e-mail só que eu tenho o nome telefone foi aqueles Campos que a gente tinha criado lembra preciso colocar aqui também eu tenho aqui o botão submit Então vamos passo a passo clica aqui e você vai ver Exatamente tudo que tem aqui na página né no nosso formulário você pode selecionando por aqui porque eu acho mais simples eu vou começar nesse user eil sobre Rafa não peguei aqui ó clica aqui mostra Tod as leias do form vou pegar esse user e-mail e vou arrastar ele aqui para cima e vou

digitar aqui e-mail pronto vou posso pegar esse campo aqui como ele é o campo de texto na verdade eu vou criar um do zero vamos lá bom que eu mostro para vocês eu vou colocar o campo de nome e o campo de telefone Como que eu faço clico em mais vou pegar esse campo aqui ó ó text Field clico automaticamente ele vai vir para cá ó e aí eu vou colocar aqui nome e vou criar um de telefone porém Eu sempre gosto de fazer isso para não ter nenhum risco de dar problema coloquei o campo

de nome Rafa eu não peguei clique em mais vem aqui em text F E você clica Você clicou ele vai ser adicionado se você tá se perdendo onde ele tá você consegue ver por aqui ó que eu já mostrei esse esqueminha aqui para vocês para auxiliar o campo de nome eu quero que seja o primeiro então vou arrastar aqui para cima e o que que eu gosto de fazer que eu expliquei vou vir aqui em appointment settings E se eu não me engano aqui ah vou procurar layout Labes eu preciso aqui na parte de deixa

só me encontrar aqui aqui achei os campos que a gente criou aqui na na coluna eu botei de e-mail e telefone vendo tá esse nomezinho aqui copia exatamente o nome que você colocou C exatamente igual você vai selecionar e aqui em for Field name você cola aquele mesmo nome Não pode errar nisso não erra Nisso vem aqui no plugin né então appointment settings choose e copia exatamente igual esse aqui é o identificador único desse Campo tá você fazendo isso o sistema não vai dar nenhum tipo de problema PR não ter que criar um outro Campo

Posso duplicar esse também ó duplico esse aqui vai ser o telefone e aí o mesmo rolê volta para copia vem aqui cola simples só isso só isso só isso então Já tenho campo de nome e-mail e telefone no meu for eu tenho esse outro Campo aqui ó vamos um por um selecionar aqui serviço e que eu vou digitar selecione o serviço beleza aqui el automaticamente tá puxando serviços ó se você não tiver puxando você coloca aqui serviços mas tá certinho e aqui eu ten O provider que é o prestador do serviço aqui ó selecione o

profissional então um é pro serviço outro profissional e a lógica que é a mesma ele tá puxando aqui o provider certinho o próximo Campo que a gente tem é o de data cara eu não vou mexer nesse Campo vou deixar ele do jeito que tá Tá e aí eu quero colocar um outro Campo que vai ser o campo de calculadora que vai ficar abaixo aqui do desse Campo ó raa como eu boto o campo de calculadora Você vai clicar aqui em mais ó ou então galera clicou aqui em Mais também enfim você escolhe o local

e aí você vai pegar esse campo aqui ó presta atenção esse aqui o pessoal errar muito cara calculated Field é esse o campo que tu vai pegar você clica ele ficou aqui abaixo do botão deixa eu ajustar com aquele esqueminha que eu expliquei para vocês eu vou arrastar Eu Vou Chamar esse campo aqui ó de preço preco tá não coloca que tá especial nessa parte o fio de lebo não precisa preencher e ela é um campo de calculadora e aqui você faz uma fórmula você coloca a fórmula que você quiser você pode fazer os cálculos

para puxar o preço aqui do do que a pessoa for selecionar você vai colocar esse campo pum esse campo tira um print aí enfim copia exatamente igual no meu lado de ele D algumas métricas né ó só que ele não traz esse campo do jeito que eu mostrei C igual meu aqui você não precisa puxar nada com o campo selecionado de calculadora no meu lado direito eu tenho aqui o que é o ponto e o decimal que é vírgula no Brasil nos Estados Unidos se não engano é inverso e a você adapta que você tá

desenvolvendo aqui em calculate prefix eu vou digitar valor do serviço dois pontos e pronto se você quiser que isso aqui Fique essa parte eu gosto de colocar eu coloco um B né dentro do maior e menor e um outro B fechando que significa para forçar el ficar em então recapitulando mais uma vez coloquei um campo do tipo calculate Ó coloquei essa variável e quem comprar o temp já vai vir com isso aqui aplicado mas você não que comprar não tem nenhum problema é só copiar aqui que eu jeito que eu tô mostrando agora meu lado

direito você você colocar o nome do campo desce do mouse e repete essas configurações ou altera pro jeito que você quiser perfeito eu vou ficar aqui no submit ã e aqui eu vou colocar fazer agendamento para ele ficar bonitinho Rafa tá pronto Sim porém do jeito que tá aqui o formular ele vai aparecer gigante na página eu quero que ele fique passo a passo deixa eu mostrar o exemplo prático ó se eu deixar daquele jeito todos os campos apareceram aqui mas eu quero que apareça primeiro esse depois esse e por fim esse Como que eu

faço isso Rafa tem como tem a gente vai utilizar aqui ó eh deixa eu pegar aqui o nome vai ser o o form page Break você vai ficar aqui mais pesquisa aqui pro form page Break É esse aqui eu vou arrastar ele para depois do telefone ou seja vai ser a primeira parte do meu formulário Ele veio para mim e aqui ele pergunta o nome do botão eu vou colocar o quê próximo para passar PR a próxima P do formulário de agendamento tá bom o próximo que eu vou pegar aqui é vai ser outro form

page Break e eu vou arrastar ele aqui nessa parte ó antes do do formulário de agendamento tranquilo eu vou colocar próximo e eu vou clicar aqui ó adicionar preview Button que é o botão de voltar então você clica aqui né ó PR Button e coloca botão de voltar beleza cli em salvar Rafa tá pronto é um pouco complexo mas é muito passo passinho né eu sei que enche o saco mas não vai ficar da hora velho confia mim Você vai clicar aqui no Jet form post submit Actions e faz mais algumas configurações que eu vou

mostrar então t no meu formulário cli em salvar para não perder as alterações vem aqui em jetform clica aqui na nesse Edit Action beleza seleciona aqui o serviço seleci profissional a pata aqui o campo de e-mail aqui a gente tem o username E aí você coloca aqui ó nome e aí você pode copiar isso aqui colar aqui e copiar isso aqui colar aqui beleza o commerce Price Field você seleciona o preço el vai dear o preço do daqui pra página de checkout docce outra coisa importante qual o primeiro nome você vem aqui ó nome e-mail

e-mail e o fone F então isso normalmente V pré preenchido PR parte de checkout vou dar um update Vou salvar vou até fechar esse formulário vou abrir de novo bem tranquilinho clico então aqui ó nome vamos revisar os campos ó nome e-mail telefone um por um dos Campos est mostrando Aí coloquei aqui um page Break para ter a parte de próximo nessa área depois seleciono o serviço deixa tirar isso aqui show ó aqui as configurações que estão no meu aqui seleciono profissional E aí eu coloquei outro page Break de próximo me voltar com essas configurações

aqui Não mexe em nada pelo amor de Deus deitar porém vou te mostrar como tá minhas configurações ó eu não mexi em nada aqui são as padrões tá ó do aport data e o campo de calculadora copia exatamente igual que tá aqui e aí no lado direito deixei dessa forma depois inject form Você vai clicar aqui Edit E aí você pode personalizar essas áreas Ok galera basicamente tá certinho cara o update então eu crii o formulário com vocês depois vi revisando Campo por campo most a melhor forma de você mexer como que adiciona os campos

eu adicionei aqui alguns a título de aula mas você poderia adicionar mais Campos também PR poder pegar do cliente ali na hora de fazer o agendamento tá a gente tem esse General mensagens séries são as mensagens que aparecem ali Você pode traduzir então eu vou traduzir também e não vou cortar a aula OK aí vou bem passo a passo aqui para você não ter nenhuma dificuldade vou usar o Google Tradutor mesmo beleza então belza ó restante aqui se mexer em nada velho só vai nível Ninja bum Já era então Esse passo TR aqui eu sei

que é um pouquinho chato cara mas se apenda aqui acabou você faz sistema de arrendamento que você quiser então vale muito a pena parar um tempo sai do celular rede social presta atenção foca aprende porque você pode vender um s desse por R 2000 3000 5000 não sei mas imagina você vende qu c seis sites desses por mês aí para clientes e lembrando se quiser facilitar seu trampo link na descrição para você comprar o temp digitável aqui já vai tudo PR configurar todas as pequenas configurações que eu mostrei já vai est tudo bonitinho para você

Obviamente você vai alterar aqui baseado na aula o que você quiser tá E também o link da nossa comunidade Lá tem todo passo a passo muito mais explicado do que o básico que eu tô te ensinando aqui galera chegamos ao passo quatro cara é o passo mais fácil que tem porque basicamente a gente vai eh at tirar isso aqui tão simples elemento eu nem preciso de introdução eu eu vou só criar as páginas aqui com vocês essas já estão criadas vou editar em cima o popup a gente vai criar e o a página home E

aí a gente vai conseguir finalizar aqui o site então eu te mostrei o sistema sistema tá Prontinho agora vamos só criar o layout para puxar esse tema aqui pra página Então vamos lá galera passo quatro cara você chegou até aqui comentem aí dá desmala o dedo no like velho inscreve no canal dá aquela moral para nós aí beleza e deixa o feedback também Eu sempre gosto de L os comentários de vocês muita gente fala você me ajudou cara tava prando de dinheiro aprend aqui quer para cliente a gente fica muito feliz incentiva mais a gente

fazer esse tipo de vídeo né tem muitos outros que a gente possa fazer deixa sua sugestão també ra quer ver um sistema sobre x coisa a gente vai analisar sua sugestão obviamente se fizer sentido a gente faz uma aula pum pum pum passo a passo Igual essa beleza então vamos lá começar aqui pela home a gente não criou a nossa home page Então vamos criar ela vou vir em páginas adicionar nova digita aqui home publico publico Ok só que aí não tem como WordPress saber qual que é a página home do site preciso falar para

ele para eu falar para WordPress Qual que é a home para ele entender eu tenho que vir configurações leitura a página inicial exibe uma página estática qual página home sal alterações beleza definimos aqui se vier visitar o site inst aqui a home ó a gente vai mexer daqui a pouco fica tranquilo mas aqui configurado e vamos começar pelo não notei aqui mas o cabeçalho roda pé né que é importante Rod Pé beleza Vamos comear então vem aqui em modelos consutor de tema e aqui que a gente constrói o nosso cabeçário nosso rodapé do site mais

uma vez modelos consutor de tema ou tem build se eu esver em inglês aqui tem um cabeçário rodapé clica aqui em mais ou aqui ó em mais ele vai redirecionar a gente aqui para construir o cabeçário deixa eu fechar aqui cara o elementor é tão simples que eu não vou fazer uma introdução com vocês não tá mas basicamente galera a gente vai pegar itens como texto e imagens botões a gente vai arrastar aqui pra tela e vai personalizar exemplo quero um texto Rafa aqui no meu site pego ess de título arrasto aqui para dentro ó

e eu personalizo ess meu texto quero alterar a cor estilo e aí eu altero a cor altera aqui a tipografia né o tamanho posso aumentar diminuir enfim ah eu quero uma imagem um botão cara é literalmente pegar itens e arrastar e ir construindo você pode começar aqui uma estrutura do zero também com duas colunas uma coluna enfim e você vai trabalhando tá em geral o que a gente mais vai fazer aqui é adicionar os contêiners e trabalhar aqui os preenchimentos dele que são os pads né para deixar isso com espaços eh e basicamente pegar os

itens e arrastar e construindo não tem nenhum segredo Ok Lembrando que aqui a gente vai configurar o site para vários dispositivos diferentes então site vai se abrir no mobile no tablet no notebook vai se abrir bem em tudo tá de clicar nessa engrenagem vou só renomear aqui para cabeçalho mas também é opcional e antes da gente mexer em si vamos fazer algumas pré-configurações clicando nesse ícone aqui ó de nessa engrenagenzinha né Ó você vai clicar e aí já Vamos definir galera aqui e a cor do site como que vai funcionar as tipografias que a gente

vai utilizar eu já deixei tudo separado aqui pra gente não e meio que perder tempo nessa parte né Depois se quiser ver aulas específicas sobre design layout a gente tem aqui tem nos cursos também mais detalhado então para facilitar aqui mais ser o mais rápido possível mais breve eu vou colocar as configurações aqui direto começando pelas cores vou pegar aqui as cores que eu vou utilizar E aí só você copiar esse mesmo código que tá aqui para você poder colar caso você queira utilizar a mesma cor que eu Tá bom então fazer aqui um pouquinho

rápido porque basicamente não tem segredo Eu sempre gosto de fazer uma paleta de cores bem simples mesmo igual fiz aqui sem muita firula já funciona bem site fica bonito Branco be beleza clico aqui na setinha para voltar e defino aqui minhas Fontes globais cco E aí seleciona seleciona aqui a famía da fonte um por um vou te falar que as fontes que a gente vai utilizar nesse site eu vou usar aqui a play fair play Fair display que é uma fonte serifada Beleza vou usar el com o peso 500 e todas as outras eu vou

utilizar aqui o outfit outfit outfit e outfit de peso 400 mesmo já vai ser suficiente aqui não precisa fazer uma salada de de de fruta com tipografia tá clico na setinha aqui identidade do site eu vou colocar aqui a me logotipo fcon icon é esse ícone que aparece aqui ó no canto superior é opcional personalizar mas mas eu gosto de deixar bonitinho tá aqui é meu logotipo e aqui o Fave icon pegar esse aqui salvar alterações clico aqui na setinha para voltar vem aqui em layout e aqui você vai colocar a largura do conteúdo cara

usa 1200 vai ficar bom tá mas basicamente a largura do conteúdo compreende o tamanho do conteúdo aqui no site e aí do lado vai ficar os espaços em branco e é por padrão todo contêiner ele tem espaço para não ter que ficar desabilitando um por um eu vou colocar um zero aqui e desativar e deixar e esse espaamento Zerado tá bom aqui em ponto de interrupção é uma forma de gente poder e adaptar nosso site para mais dispositivos além desses três padrões que tem desktop tablet e mobile porém entre o tablet e o desktop a

gente tem o notebook Rafa eh como que eu posso fazer isso você vem aqui ó e seleciona notebook e o Wi screen são os dois que eu gosto de trabalhar além desses três principais eu vou em salvar alterações ele vai pedir para recarregar vou aqui em recarregar e olha só agora tenho vários dispositivos que eu vou conseguir trabalhar meu site para que ele se abre de uma maneira interessante né em todos esses dispositivos tá clico aqui no x e beleza Essas são as configurações globais eu já deixo tudo pré definido para poder facilitar todo o

nosso trabalho agora vamos trabalhar aqui o nosso cabeçalho Vou colocar aqui mais flexbox vou colar um flexbox de linha vou alterar aqui a cor de fundo colocar um preenchimento de dois superior dois inferior tá lembrando que eu expliquei que preenchimento cara não tem segredo e outra coisa aqui galera se você for muito iniciante eu fazer uma coisa que vai pass Tá bastante para você você pode clicar aqui ó tá vendo essa estrutura tudo que eu colocar dentro da página vai aparecer aqui para facilitar o seu trampo eu vou deixar aberto e você pode ir acompanhando

tudo que eu tô mexendo lembrando tudo que eu selecionar vai mostrar aqui também ó ah ele tá mexendo no quê agora no título ou no contêiner vai mostrar ó editar contêiner se eu arrastar um título ó editar título tá vendo ó e aqui também vai mostrar então Eh facilitar ó para que todos consigam acompanhar esse nosso objetivo simplificar o máximo e não complicar eu vou arrastar o urit de logo Ah Rafa não tá aparecendo eh clica aqui em mais ó aí aparecem os wid vou pegar e vou arrastar bonitinho aqui e vou colocar a largura

de 240 pixels para organizar melhor o conteúdo que vai ficar no meu lado direito eu vou colar um contêiner interno vou limitar a largura desse contêiner interno para um sei lá 25% por [Música] enquanto ou vou selecionar meu contêiner principal eu vou só colocar aqui ao centro horizontalmente é na ver vertical verticalmente e horizontal vou ficar espaço ent que ele vai pular lá para outra ponta ó tum E aí vai ficar aqui o resto do meu menu vou pegar aqui galera o carrinho do menu e vou arrastar perfeito beleza aqui a gente tem um subtotal

tá vendo deixa eu S mudar a cor aqui já explico para vocês tá aí tá vendo sub tootal você quer quer mostrar ou não quer eu vou deixar mas se não quiser mostrar você pode retirar aqui pode personalizar os ícones e os indicadores aqui eu gosto de deixar o padrão mesmo aqui em carrinho quando a pessoa clica abre o carrinho lateral ó abre o carrinho lateral com os produtos ou eu posso selecionar o mini carrinho que que é mini carrinho Rafa tá aqui ó mini carrinho É esse aqui ou o carrinho lateral eu vou deixar

carrinho lateral tá eu gosto mais ícone de fechar remover e preço e quantidade botões de ver carrinho finalizar compra Vou deixar tudo marcadinho mas aí você pode desabilitar aqui vou personalizar com as cores e fica à vontade para manter a mesma que a minha ou você é ajustar de outra forma tá então deixa eu ajustar quando passa o mouse por cima eu vou deixar o bege beleza e aqui na parte de indicador é esse iconeinstagram porque é basicamente você ir colocando as cores e vendo como que vai se comportando o widt tá Mas Obviamente você

pode copiando no meu aqui para facilitar essa parte não aparece a gente personalizou isso aqui agora certo essa parte aqui não aparece porque a gente vai ter que ter itens aqui no carrinho poré a gente já pode deixar is aqui pré personalizado então ícone de remover eu vou deixar sei lá esse cinza ah fechar vou deixar ISS aqui subtotal vou deixar e sei lá o bege vou personalizar aqui as tipografias aqui o título eu vou deixar assim com a tipografia secundária né Beleza variações a gente não vai ter mas por padrão vou deixar preço do

produto vou deixar aqui talvez essa cor quantidade enfim é questão de colocar as nossas eh as configurações globais aqui o botão de ver carrinho eu vou deixar ele é deixa eu ver como coloque site exemplo vou deixar ele assim a cor texto branca e vou um ramento de 50 nele o botão de finalizar compra eu vou deixar ele com a cor marrom e a cor texto branca e vou arredondamento também E aí eu não quero um ao lado do outro eu quero el empilhados um abaixo do outro e depois quando a gente é visar o

site que vocês vão ver certinho como que vai funcionar mas em geral faz aqui as configurações jeito que eu mostrei PR vocês tá aqui vou configurar também perfeito vou adicionar aqui o botão de marcar consulta clicar em mais pega o edit de Botão ó clica segura e arrasta E aí você movimenta até a parte que onde você quer eu vou deixar aqui beleza vou escrever marcar consulta aqui em estilo vou personalizar esse botão deixa eu ajustar aqui um pouco esse PED deix um pouco maior para ficar mais bonito e aqui no contêiner eu vou travar

e fazer que eles fiqu em Então o coner que tá brigando esses dois wis eu vou fazer assim perfeito e esse ficar sem espaço você ajusta aqui manualmente Ok centraliza e aqui posso ajustar também o espaçamento entre eles para ficar mais bonitinho Beleza deixa eu voltar aqui deixar mais espaço Rafa quando clicar nesse botão como que eu faço para abrir o popup de agendamento a gente tem que configurar o popup eu vou criar o popup aqui só pra gente já conseguir conectar com esse botão Então vou vir aqui no painel modelos popups não vou mexer

no popup agora tá para não confundir a a só vou criar ele Adicionar novo popup ó modelos popup Adicionar novo pop de gelamento vou cair em criar [Música] modelo Beleza vou aqui no x clique em publicar salvar e fechar deixa eu sair aqui pro WordPress perfeito como que eu vou chamar agora esse popup para esse botão eu vou clicar aqui em salvar rascunho e vou precisar atualizar essa página beleza clico no botão agora venho aqui em tag dinâmicas e seleciona a opção de popup quando clicar aqui vai abrir o popup eu vou pesquisar aqui por

popup de agendamento pronto quando clicar abrir o popup obviamente a gente vai configurar o popup depois aqui nosso cabeç tá criado fiz ele bem simplificado mesmo você pode melhorar eu só V ele agora com os dispositivos móveis colocando aqui pading espaçamentos tá deixa eu colar aqui mais espaço nessa região lembrando eu tô mexendo aqui não vai alterar o desktop porque ele tem um iconeinstagram belza logotipo vou diminuir o tamanho e aqui como que eu faço para que eles fiqu em linha eu seleciono aqui o contêiner principal layout vou fazer a mesma coisa que eu tinha

feito lá no outro eu vou travar aqui ó para eles ficar em linha eu vou ajustar um pouco esse pad esse botão aqui eu vou precisar diminuir um pouco ele tá muito grande não vai caber tudo certinho e ajustar aqui o espaçamento manualmente beleza aqui também mesma coisa tipo só acho que eu expi um pouquinho essa fonte aqui só para garantir aí pronto tá aqui o cabeçado galera feito isso clica em publicar clica aqui em adicionar condição e deixa aqui em todo site pro cabeçalho aparecer em todo site só vai e fechar beleza estamos com

o cabeçalho criado eu vou fechar aqui e voltar pro plan WordPress e vou criar o rodapé para criar o rodapé é o mesmo esquema aqui do cabeçário o mesmo local basicamente modelos consultor de tema seleciona aqui o Rad pé clica em mais vou fechar aqui clica na engrenagem se você quiser renomear eu vou deixar só rodar pé vou clicar aqui flexbox de coluna Vou colocar aqui os as cores né o o roda pé Já ensinei vários modelos aqui no no no canal Porém Aqui eu quero simplificar também tá então eu vou colocar só um título

padrão que aí você pode adaptar que eu vou colocar aqui ó Ninja Beauty 2024 todos os direitos reservados 2024 ó aqui a tem o notebook tem aqui o tablet o mobile deixa eu poder ajustar aqui também então nada de segredo fazendo aqui um pouco rápido porque questão de você pode ajustar tá publicar adicionar condição só vai fechar pronto se eu vier visitar o site aqui agora cabeçalho rodapé aqui o popup não tá configurado por isso Tô clicando no taino mas daqui a pouco a gente vai testar e vamos dar continuidade vamos fazer aqui a home

configurações globais tá certinha vamos começar aqui a home vamos lá cliquei em páginas venho na página home clico e cliquei está com elementor para cair na tela do elementor eu poder personalizar ar ração noos blocos Beleza cara essa página home ela tá muito bonita tá muito top clica nessa engrenagem aqui galera para tirar esse título tá então você clica oar título e aqui você coloca e elementor lura Total então engrenagem oculto o título elementor Total ele vai recarregar pra gente show eu vou começar aqui colocando uma estrutura eh de contêiner flexbox flexbox de coluna dentro

dessa estrutura eu vou colocar um outro contêiner então tô com o meu contêiner aqui ó eu vou colocar um outro dentro dele e esse que tá aqui dentro eu vou determinar uma largura coloco a largura que eu quiser no site exemplo aqui eu usei 46% que eu acho que ficou bem o título ficou bacana ficou bonito beleza esse contêiner principal eu vou deixar ele em 90 VH deixa eu centralizar Tudo beleza e nesse contêiner principal é colocar uma imagem então seleciono o contêiner é estilo clássico você pode colocar uma cor de fundo ou clicando aqui

na imagem Você pode adicionar uma imagem eu vou colocar o banner que eu criei criei no Photoshop Rafa não sei Photoshop tem vídeo aqui no canal deixa eu até mostrar um pouquinho para vocês como que eu queri o banner não não vou mostrar aqui tudo porque e não é objetivo aqui da aula tá não tem como parar aqui para ensinar banner sendo que já tem aqui de graça para vocês e mas Sra aqui só para te mostrar um pouquinho então tá aqui o banner que eu criei galera no Photoshop tá então a largura é 1920

pixels a altura a gente ele fique de acordo com o banner aqui no meu lado direito tem as camadas né Então deixa eu mostrar para vocês eu começa aqui pelo background coloquei uma cor de fundo e coloquei uma uma textura que você acha no site chamado freck ó para ficar mais bonitinho depois eu coloquei essas setas aqui e algumas luzes né para ficar atrás da modelo coloquei aqui a modelo e trabalhei um pouco as iluminações sobre ela uma textura aqui no finalzinho e depois mesclei toda a camada e foi esse efeito que eu tive ó

na imagem ó cara ficou top isso aqui é bem simples inclusive Se quiser que eu grave uma aula mostrando especificamente como criar esse banner passo a passo comento aí que eu faço para vocês logo na sequência tá mas é o passo a passo é aquele que eu ensinei Lembrando que tem vídeo mostrando aí a questão do Photoshop para vocês passo a passo ensinando como que eu mexo eu vou arrastar aqui o título para cá deixa eu colocar aqui meu título H1 colocar aí na cor branca para que a gente tem um contraste visual aqui consiga

enxergar vou ajustar a altura de linha e também vou ajustar aqui a tipografia né ó deixar bem grande depois eu vou arrastar aqui um outro título ó clico segur arrasta jogo aqui vou deixar ele como H2 mesmo a já tem aqui meuu a colinha né para facilitar E aí em relação a textos né Eu sempre peço pros clientes me enviarem Rafi meu cliente sei lá não sabe escrever texto você pode gerar cara um de teste no chat GPT sei lá e mandar para ele a sugestão enfim perfeito vou pegar aqui agora o botão vou arrastar

vou instar aqui marcar consulta clico aqui em tag dinâmicas popup é o mesmo esquema E aí a gente puxa o nosso popup tag dinâmicas popup você pua popup que a gente criou que daqui a pouco a gente vai configurar vou ajustar aqui ele bonitinho Ok eu vou colocar também um divisor que é esse aqui ele vem assim eu vou ajustar um pouco o espaçamento dele talvez alterar essa cor aqui para um branco e aí vou puxar um pouco a opacidade tá agora a gente vai ter três caixinhas de ícone que é esse aqui Caixa decone

ou icon Box né Se tiver em inglês tá eu preciso colocar ele dentro aqui do contêiner Então deixa eu arrastar para cá e cada um vai ter uma largura de 30% para que fique um ao lado do outro então eu venho aqui na caixa de ícone avançado largura personalizado e coloco 30% beleza e aí vamos trabalhar aqui essa descrição exclusivo aqui o ícone eu vou ccar em enviar arquivo svg eu já tenho aqui aqui alguns ícones para usar que eu já subi Porém você tem a própria biblioteca de ícones aqui do do elementor né você

clicando Ó tem uma série de ícones que você pode utilizar tá bom fica à vontade você escolhe qual que você quer aqui eu posso movimentar as posições né como que vai ficar e a cor do texto eu vou deixar Branco tá com isso em mãos eu só duplico um duplico dois vem aqui altera o conteúdo de cada um o próximo vai ser tecnologia de ponta e Peguei uns izinho assim meio bobinho Mas enfim você pode alterar aí tá qualific atendimento exclusivo eu vou deixar todo as letras assim em maiúsculo as primeiras como que eu faço

para cada um ficar de ponto a ponto clico no cont coloco ele PR linha feito isso CCO nessa opção aqui de envolver envolver quebra de linha pronto certinho galera simples fácil bem tranquilo vamos pra próxima pra gente não perder tempo eu vou colocar aqui um coner de coluna vou trabalhar aqui o pading dele superior inferior de uns 5 mais ou menos tá para que eu tenha espaço né de um conteúdo e outro não pode ficar tudo grudado senão fica estranho fica feio o site arar aqui o título serviços beleza e vou aumentar o tamanho aí

eu vou ter também aqui outras caixas de ícone então eu vou Dear de novo caixa de ícone mesmo que a gente apru a trabalhar vou arrastar e cada uma dessas caixas de ícones eu vou deixar a largura em 32% porque eu vou ter TR né então soma 322 T2 quebra a linha 32 2 do Quebra Linha Então você ser três se quisesse quatro você colocar cerca de 24 23% cada uma beleza eu vou alinhar os itens à esquerda [Música] Hã tá conteúdo beleza Tá certo talve vou deixar esse a cor vou virem avançado eu quero

colocar uma borda em volta desse conteúdo para fazer isso eu venho em avançado eu vim aqui em borda ti TIP de borda sólido um e aqui eu vou trabalhar um cinza assim e um arredondamento Rafa eu não vi aqui ó tá bordinha em volta tá vendo e é para essa borda não ficar colada no conteúdo trabalho um preenchimento aqui sei lá uns 2m cada lado ó fica uma caixinha bem bonitinha e agora eu só venho substituindo conteúdo Então trabalha deix arrumadinho e depois vem substituindo o conteúdo que facilita aí eu vou eh ajustar aqui porque

um vai ser tratamento facial vou ser aquele serviço que a gente cadastrou basicamente eu vou só colocar aqui direto eu poderia puxar de forma dinâmica também mas né não vou trabalhar isso aqui senão essaa ficar um pouco complexa e eu não quero eu quero simplificar mesmo para que todo mundo consiga então V fazer o mais básico mesmo para todo mundo e conseguir compreender aqui eu posso alterar os espaçamentos E aí o botão direito só vou duplicando isso aqui vou duplicar seis vezes porque eu vou ter seis caixas de ícone para ficar um lado do outro

lembra que a gente vem aqui no coner principal layout a gente muda a posição de horizontal e quebra a linha e para que não fique dessa forma né o meu título ele pegue 100% eu seleciono ele avançado e eu coloco ele 100% que aí ele joga tudo para baixo e agora eu venho aqui só substituindo tratamento corporal altera aqui o ícone selecionar esse depilação a laser essa aqui tenta pegar ícones que faça sentido ali com a imagem tá tem uns ícones são muito estranhos e não vale a pena eu gosto de pegar osos icones no

site chamado flat icon caso você precise de ícones você vai nesse site ele é muito bom quer e estética íntima beleza tá aqui bonitinho eu coloquei três mas você pode ajustar caso você quer que fique quatro itens né então 1 2 3 4 você vem aqui e Altera a largura Beleza eu vou aproveitar vou copiar esse botão e vou colar aqui no finalzinho que eu quero que ele fique aqui e já sabe que tem que colocar em 100% e para que ele se centralize eu vou colocar essa essa opção aqui de estilo Centralizado Beleza vou

adicionar aqui um outro flexbox de coluna mesmo eu vou trabalhar aqui um pad nele de cerca de uns 5m também superior e inferior E aí eu sempre eu gosto de colocar Sei lá uma citação um depoimento pro site não ficar só cor branca E aí gera uma um contraste visual aqui que eu acho bonito né eu vou copiar isso aqui botão direito vou colar e eu posso ir reaproveitando Blocs só preciso obviamente aqui alterar a cor Beleza vou colocar aqui um texto que eu já tenho eu escrevi esse texto no ch GPT eu falei que

tava aqui site iní de estética Ele montou para mim então fica uma sugestão para vocês poderem utilizar eu não gosto de deixar o texto assim ó eu gosto de deixar ele agrupado ó dessa forma porque fica melhor E aí para centralizar você pode centralizar por aqui Inclusive acho que eu vou aumentar um pouco o pad e essa altura de linha aqui eu não gosto ó quando tem letras na mesma mesma visão né Eu gosto de aumentar esse espaço tá deixa eu ajustar assim mais ou menos agora a gente vai ter mais duas Abas que é

depoimentos e sobre nós e basicamente a página home vai est construída Então vou colocar aqui em mais blackbox colocar pad E aí galera sempre gost de vir aqui ó e copio e reaproveito que facilita nosso trabalho é mais rápido para que em vez de ter que configurar cada zero não faz muito sentido clicando aqui mais você vai apar por depoimentos E aí a gente tem o depoimento solto e te o Carrossel vou querer o carrocel se você tiver em inglês vai est escrito testemunho que é se eu não me engano é é depoimento em inglês

tá eu tenho aqui alguns Alguns depoimentos fictícios que eu vou colocar a título de aula para ficar bonitinho eu vou colocar aqui os textos Lembrando que eu vou deixar aqui três Porém você clica quem adicionar item você consegue colocar outros depoimentos também tá Vou preencher aqui os dados e outra coisa legal é que eu consigo colocar foto dos clientes né Então você pede o depoimento do cliente e aí se ele puder te mandar a foto dele você coloca aqui eu vou pegar aqui colocar algumas fotos ó só selecionar aqui e show trabalhar um pouco essa

tipografia aqui na aba de conteúdo trabalhar um pouco essas cores tal acho que esse título aqui poderia talvez 35 em E aí se você alterar esse botão direito copia inclusive vou até colocar uma margem aqui para não ficar ó ficar melhor alterei botão direito copia aí eu posso vir nesse aqui e aplicar o mesmo estilo como botão direito sobre ele colar estilo aí ele aplica para mim tá a navegação que seriam as setas e os pontinhos eu vou mexer aqui também para ficar de acordo com o site pronto bem simples bem fácil bem tranquilo Talvez

o nome do cliente ali se quiser ó deixar marrom o título Preto você pode mexer tá vamos fazer aqui a área sobre nós a área sobre nós é até parecida com isso aqui não sei se é só Adapt Ah vamos criar do zero vai para ficar melhor para vocês conseguirem compreender Então vou colar aqui do zero Vou colocar aqui um contê interno e esse cont vai ter aqui 40% de espaçamento né de largura Então eu tenho um contêiner principal e um contêiner interno esse meu contêiner principal eu vou colocar um pading nele e vou aproveitar

e vou colocar uma borda aqui ó para separar as sessões tá eu acho que vai ficar bonito aqui nesse caso e vou colocar somente nessa parte mesmo coloco uma borda aqui ó um cinza bem clarinho vai ser uma borda divisão entre os as os blocos acho que fica bem interessante tá botão direito copio botão direito colo vou alinhar aqui à esquerda e coloco aqui sobre nós esse preenchimento aqui eu vou tirar e esse texto aqui ó botão direito copio Então cara vai reaproveitando os blocos precisa ficar quendo do zero tipo expliquei aqui uma vez eu

vou reaproveitando aqui também preciso ficar explicando toda hora a mesma coisa né eu facilito também a aula aqui deixa ela mais dinâmica deixa colocar ISO aqui como P parágrafo e eu vou colar meu texto quando você tem um texto assim que tem espaço usando it de título você não consegue colocar o espaço para colocar um espaço uma quebra de linha você coloca tag BR dessa forma Rafa quero outra outra outro espaço outro BR quero outro out BR E aí ele vai dando quebra deinha para vocês tá bom ã caso queira colocar redes sociais aqui da

empresa você pode pesquisar por social a gente tem ícones sociais o funcionamento aqui é só colocar o link clicando em adicionar item Você pode adicionar mais redes sociais Ó pesquisando aqui e aqui na aba de estilo você pode mexer um pouco a questão aqui da cor Prim costumo retirar eu deixo mais só cor secundária meso eu ajusto Pou os espaçamentos E aí vou alinar esquerda se você quiser colocar contato também ah quero colocar o contato aqui do negócio V aqui lista decones coloc eminha e eu vou deixar o exemplo aqui só para ficar bacana a

aula vocês então pega o lista decones arrasta você pode configurar ele em linha ou coluna E aí coloca dados de contato eu vou colar alguns dados fictícios e para pegar a ícone eu tenho duas formas clicando aqui em enviar arquivo svg ou eu clicando aqui em biblioteca Gone eu posso pesquisar por aqui lembrando de pesquisar em inglês tá colocar aqui WhatsApp e vou colocar também sei lá o e-mail de contato [Música] B acho que é assim que escreve beleza Tá espaçamento se fic assim ficar melhor Pronto agora nesse lado direito eu vou colocar uma imagem

Então vou tentar arrastrar uma imagem para cá se não der deixa eu ver Deu ó ele ficou fora do contêiner tá vendo Então eu tenho aqui meu contêiner que é esse aqui e a imagem está fora dele ó eu vho no meu contêiner principal e forço eles ficarem em linha eles estão aqui em coluna coloc em linha para ficar um ao lado do outro acontece que a minha imagem tá pegando muito espaço tá esmagando o conteúdo que que eu faço aqui para ajustar eu defino a largura da imagem vindo aqui avançado e coloca 60% clico

aqui para poder escolher a imagem vou pegar o baninho que eu criei Eu sempre gosto de deixar alinhada ao centro então venho aqui no coner e centraliza e pronto clico em publicar clico nesse olhinho aqui para ver alterações tá aqui nossa home cara ficou top bem bem simples bem fácil cara simplifiquei ao máximo para vocês não tem segredo nenhum é só arrastar o bloco e configurar o jeito que você quiser vamos trabalhar aqui o mobile aqui o Wide screen você poderia aumentar esse tamanho ó para se encaixar melhor a imagem tá vendo e o restante

não tem muito o que mexer aqui o desktop e aqui o notebook o notebook já começa a ficar meio quebrado Então por padrão eu vou fazer basicamente todos os Box é alterar o preenchimento e tamanho de fonte só isso então deixa eu alterar aqui o preenchimento ó colocar espaço aqui nas laterais conteúdo não ficar colado beleza ok aqui acho que eu vou aumentar um pouco essa largura só que esse texinho eu não gosto então eu Talvez possa controlar isso colocando um espaçamento Ok ficou melhor aqui mesma coisa galera trabalhar PED sempre pading superior nas laterais

talvez eu vou deixar aqui em 48% que aí eu tenho uma caixa de ícone um pouquinho maior ó eu vou repetir esse padrão para todos tá sempre vindo aqui avançado muda para porcentagem E aí coloca 48% [Música] hum aqui também vou mexer então vocês podem ver cara aqui no mobile eu tô basicamente em todos os blocos fazendo a mesma coisa ó a mesma coisa em todos os blocos e você vê que ele já fica bom né então não tem nenhum segredo mais questão de prática e todosos Blos que eu mexi Tem um izinho aqui onde

eu posso mexer exatamente nele e não alterar os outros dispositivos vou vir aqui agora no tablet o único que vai ter uma diferença vai ser esse que vou deixar ele aqui em 100% e vou centralizar os itens beleza também essa margem na direita que tinha colocado no notebook eu vou retirar E aí eu uma imagem específica pro tablet pro mobile veja que aqui eu tenho ícone de tablet então eu posso alterar e não vai alterar o desktop eu vou subir aqui minha imagem Lembrando que vai est no material didático para vocês Caso vocês queiram utilizar

essa mesma imagem fica à vontade Beleza eu vou trabalhar um deixa eu zerar isso aqui eu vou trabalhar diretamente por aqui eu vou com bastante espaçamento aqui no lado inferior para conseguir encaixar essa imagem e aqui em estilo vou movimentar ela você tem aqui algumas opções pré prontas ó deixa eu ver se vai ficar boa mas aí se não ficar legal você vem aqui em personalizado você tem que a posição x que representa o vertical e a posição Y é x que é horizontal e y que é vertical um fala sobre largura normalmente né a

outra sobre altura ó esse aqui é o vertical Então vou trabalhar só ele ó e eu encaixe mais certinho sem segredo nenhum Ok E lembrando que tem os ícones Então posso mexer não vai alterar os usos positivos Ai aqui certinho aqui também também bonitinho aqui eu vou colocar em 100% porque tá muito esmagado não fica tão bonito e no meu contêiner principal ó eu mudo paraa coluna e posso centralizar essa imagem acho que eu vou até deixar um pouco maior Hum só que ela tá estranha ali vou deixar assim pronto agora no mobile Vamos trabalhar

também o mobile a gente tem que mexer bastante nas fontes é espaçamentos mas é a mesma coisa eu costumo deixar um de pé nas laterais não dois então eu venho aqui destravo e veio trabalhando novamente ó tá bom Ó a a perfeito aqui no mobile eu acho se eu colocar centro ele já vai ficar melhor aí essa tipografia tá muito grande no mobile Cuidado para não deixar muito gritante né Assim fica melhor aqui mesma coisa vou ajustar 2 1 2 1 e tipografia também eu vou deixar um pouco menor vou deixar 2m tá e cada

um desses itens eu vou colocar em 100% na verdade 2m ficou muito pequeno vou deixar 2,5 e aqui galera não tem muito de certo ou errado você pode trabalhar uma escala tipográfica e é mais avançado não faz nem sentido explicar aqui para vocês e também não vai mudar tanto o resultado tá bate o olho aqui e tenta definir padrões se você colocou aqui 2,5 nesse vem aqui nesse outro 2,5 nesse 2,5 também você repetindo os padrões é basicamente isso que eu peço que vocês façam tá 2,5 aqui 2,5 também vou tirar Aqua marzinho que eu

tinha colocado aqui eu acho não acho necessário e o preenchimento também eu vou deixar todos os padrões no mobile então eu defino aqui meio que um padrão que eu acho que fique legal e eu só vou repetindo eh em todos os textos Tá eu vou deixar isess aqui 0,87m pro texo não ficar tão grande nessa área aqui mesma coisa 2 1 2 1 2 1 2 1 2 1 beleza esse aqui eu vou colocar em largura de 100% Então olha só como que tá aqui a nossa versão mobile tablet Se quiser pode deixar aqui em

100% também no tablet deixa eu ver fica até melhor notebook e desktop clicou em publicar vai cair aqui no site uma dica que eu gosto de fazer com o botão direito clicar em inspecionar deixa eu mostrar para vocês e a você vai ficar nesse iconeinstagram [Música] trabalhar popup de agendamento carrinho checkout vamos fazer algumas traduções aqui que vocês vão entender daqui a pouco e depois a gente já faz o teste do sistema para vocês verem que tá funcionando e vou te ensinar a administrar os agendamentos Então vamos trabalhar aqui o popup Zinho de agendamento você

vai vir aqui na parte de modelos popups como a gente já criou ele a gente cli editar com elemento se você não criou vem aqui adicionar modelo só que não esquece de concatenar ele com os botões conforme eu ensinei esse popup eu quero que ele abre ali no canto superior direito então eu vou ficar nessa engrenagem e posso configurar ele ó para aparecer Deixa eu tirar vou deixar aqui na tela para facilitar para vocês tá a estrutura né en T deixar em toda a aula eu vou colocar ele para aparecer em largura de 450 beleza

animação de entrada eu vou colocar Fade Fade in right ele vir da direita ó da direita pra esquerda e de saída eu vou colocar ó Face out right que aí ele volta a animação vai durar 1.2 segundos Mas você pode mexer eu vou tirar aqui a sobreposição o botão de fechar eu vou deixar eu acho que assim tá legal caso você queira sobreposição assim ó para ficar escuro você pode deixar na verd acho que eu vou até deixar sobreposição porém a aqui ó em sobreposição eu posso diminuir deixar bem fraquinho ó pronto o botão de

fechar que é esse botão aqui eu vou alterar a cor dele pop eu vou dar um pequeno arredondamento nas bordas e aqui não vou mexer em nada perfeito caso você queera Rafa eu não quero que a pessoa a parte no teclado Feche você pode impedir isso né através dessas configurações ó pedir fechamento enfim tem várias coisas que você pode ajustar aqui tá eu vou clicar aqui em mais vou adicionar um título e vou arrastar beleza vamos trabalhar aqui o pading né você vê que conteúdo colado é muito estranho cara não faça isso e aqui eu

vou colocar Faça o seu agendamento o segredo para que funciona corretamente é você pesquisar aqui o jet form E lembra que a gente criou o formulário de agendamento né que veio pronto pra gente encher editou em cima eu vou puxar ele agora usando esse wiit J form eu vou arrastar clico aqui vou escolher meu formulário Beleza eu vou colocar ele aqui Ajax e agora galera aba de estilo velho não tem muito que eu ensinar aqui é só você personalizar então e vou te mostrar os que eu vou fazer começar aqui pela [Música] labo Ok a

bordinha ali da Label na verdade eu não quero borda na Lab Então vou tirar Ok input Fields esse eu quero mexer e a ele sim que eu vou alterar a borda a gente pode aumentar a largura vou deixar somente um e vou deixar um cinza mais claro Beleza a gente tem a questão aqui do form Break Roll form Break buttons que é esse é voltar e próximo voltar e próximo eu vou ajustar aqui ó não não ficou feio esse vou pegar esse é aqui então Ó form Break hole Button form Break buttons esse aqui esse

aqui que você vai mexer prve Button mesma coisa eu vou deixar a mesma cor também não precisa e ajustar isso só o Bordin que eu vou retirar o próximo Campo que a gente vai poder mexer vai ser submit que vou mexer aqui Rafa eu não tô vendo submit É porque não vai deixar eu passar o e eu não consigo clicar então eu tenho que meio que preencher o as informações de estilo sem est vendo os outros Passos tá então é botão de submit deixa eu ver como configuro aqui no site exemplo você copia aqui igual

depois você pode alterar quando a gente vê o isso aqui funcionando na página tá vou deixar assim beleza outra coisa que eu quero atar com vocês galera é essa aba aqui ó de appointment Calendar porque é a aba de calendário que vai aparecer aquele calendário pra gente poder mexer então Já venho aqui e vou alterar as cores esse aqui é bem importante você personalizar tudo tá então eu vou personalizar igual fiz no site de exemplo que eu mostrei para vocês no início mas eh esse fica à vontade para ajustar de outra forma caso você queira

vou deixar assim assim na verdade Hover vou deixar esse esse background na verdade que não precisa coloquei errado Slots mesma coisa e pronto depois pode aqui e ajustar quando a gente colocar isso na página ficar melhor esse formulário de enviado aqui não sei o quê eh você pode personalizar aqui em mensage então eu vou fazer também tem mensagem de sucesso e de erro eu vou preencher todas eh vou ajustar e a mensagem de erro mesma coisa Não esquece de tirar aquela borda vermelha ali não sei se estão conseguindo enxergar mas é horrível aqui a gente

tem o mobile no mobile vai abrir Dessa forma não esquece de ajustar tipografia tudo que eu mostrei para vocês já se altera aqui pro mobile Tá feito isso publicar não precisa mexer nada clique salvar e fechar agora se a gente vem aqui visitar o site Olha só o que vai acontecer tá aqui o nosso formulário ó só esse botãozinho aqui Nossa aqui tá me incomodando essa borda vermelha como que eu abro meu pop-up de novo para mexer Você pode passar o mouse aqui por cima e vi aqui no pop-up ou então segue aqui ó modelos

popups e clica em editar com elementor o nosso botão de submit ele tá com aquela borda vermelha para eu poder editar eu venho aqui em estilo submit e retira essa borda aqui [Música] horrorosa só vai fechar deixa eu atualizar aqui a página tá tá puxando aqui o valor tudo certo ó passa aqui por cima beleza deixa só ver aqui questão do horário tem alguma coisa que eu possa mexer Colors Lord aqui aqui tio eu vou deixar P publicar só vai fechar atualiz aí tem ficar fazendo aqui é meio chato né se atualiza lá e tem

que vir aqui olhar mas e dá certo pronto fica ativo aí mostra horá que tá ativo é melhor galera tá aqui a nossa página home cara se você quiser só o a questão do agendamento sem pagamento já tá tudo funcionando a coisa que a gente vai fazer aqui agora é colocar um agendamento no carrinho para configurar a página de carrinho checkout que são as duas últimas páginas que eu vou mexer com vocês nessa aula então vamos fazer aqui é bem rápido tá então marcar a consulta eu vou pegar aqui preencher com dados testes só para

que eu consiga colocar um agendamento no carrinho pra gente poder trabalhar isso aqui pego aqui qualquer um e eu clico em fazer agendamento pronto feito isso eu vou vir aqui e vou pra página de carrinho pronto e aqui na página de carrinho eu cliquei página Element Rafa eu não achei a página de carrinho vem aqui em páginas ó D no mesmo seleciona a página de carrinho e depois com elemento essa página deixa eu ver como configurei eu vou deletar tudo que tá aqui clicar na engrenagem esconder o título e colocar o da página elementoa Total

C aqui em Xbox e vou adicionar basicamente só um título escrito carrinho não é obrigatório aí se quiser colocar também eu acho que vai ficar mais bonitinho aqui 4 está aqui carrinho como que eu configuro a lógica do carrinho Rafa você vai pesquisar aqui por carrinho esse wiit vai arrastar beleza só aumentar aqui trabalhar aqui o pad como que eu faço para mexer nisso né Você vai clicar aqui você pode deixar em uma coluna ou em duas Eu particularmente prefiro em duas resumo do pedido cupom cara é questão de você querer ou não e você

pode personalizar isso e aqui em estilo É para alterar essas cores com a nossa tipografia e os nossos nossas cores é isso que eu vou fazer agora tá então mais uma vez Vamos alterar aqui todas as descrições fazer um pouco rápido porque não tem segredo nenhum aqui tá é só questão de você vir em cada um e alterar E conforme você vai alterando automaticamente ele vai mudando alguma coisa aqui e você consegue acompanhar ó esses botões eu costumo deixar um cinza assim de acordo o texto cinza quando passa o mouse por cima sei lá talvez

deixar bege zumo do pedido itens variações link do produto quantidade essa partezinha né e os totais que seria para cá o botão de Pag que é o botão principal também não tem segredo vou alterar ele aqui para essa cor quando passar o mouse por cima eu vou deixar o bege pronto cara fácil tranquilo tá aqui nossa página de carrinho para adaptar notebook tablet mobile é só questão de você trabalhar os espaçamentos laterais aqui do jeito que você quiser ó no pading tá E aí já vai fluir bem aqui em geral ó meio e aqui o

PED V colocar 2 1 2 1 galera certinho nossa página de cí ccar em publicar clicar em ver alterações e ela tá aqui pronta Ah só tá aparecendo essa imagem aqui como eu faço para retirar eu montei um código já vou mostrar para vocês é para poder retirar isso aqui deixa eu só terminar a página de checkout que eu vou mostrar um cdigo Zinho que eu montei para ocultar basicamente é um CSS básico beleza clicar aqui avançar para pagamento checkout mesma coisa vem editar página e clica editar com elementor se teve dificuldade vem aqui ó

em páginas e finalização de compra que a página ch checkout que que tá com elemento ela vai ser a mesma coisa do página de carrinho o willit basicamente é o mesmo tá deixa eu fechar tudo aqui e vou adicionar o wiit de checkout e vocês podem ver que tem as mesmas opções deixar uma coluna duas colunas e a edição é a mesma também deixa eu dar um pad Então como que faz Pode mostrar posso vou vir aqui esse aqui é bom que você pode pegar os campos e traduzindo n alguns Campos ó aqui consumo retirar

informações adicionais não precisa conta pedido cupom que essa parte aqui é o cupom e estilo mesma coisa galera vem aqui e preenche um por um é um pouco repetitivo esse trabalho né mas é a gente tem que fazer não tem jeito Por isso que eu vou fazer um pouco rápido aqui com vocês porque basicamente é tudo que eu já expliquei lá no carrinho eu tô repetindo aqui os botões né A única coisa que muda aqui são os campos que do checkout tem um pouco mais de Campos do que ali a questão [Música] do da página

de carrinho tá botão de compra esse botãozinho aqui deixa eu ver tem algum local posso batido links links aqui ó pronto hã notebook mobile aquela mesma pegada ele já fica pronto beleza clica em publicar V alterações uma coisa que eu gosto de fazer aqui na página de checkout é tirar alguns Campos que não faz muito sentido eu vou vir aqui em personalizar vou vir aqui em commerce finalização de compra e o campo nome de empresa eu coloco oculto e endereço linha dois oculto Porque não são necessários clique em publicar e dessa forma eu ten um

checkout um pouco mais limo beleza tá vou mostrar agora o código que eu fiz para vocês que aí ó ele retira esse campo né esse aqui fica meio esmad eh eu vou pegar aqui o codigo Zinho que eu fiz que ele resolve essa parte tá vamos lá galera vou deixar aqui o código para quem comprar o template já vai est no esqueminha Cara isso aqui não tem nada de complicado é basicamente uma duas três classez inhas CSS vou deixar no material didático para vocês também para facilitar para não ficar perdendo tempo explicando questão aqui de

CSS Tá eu vou vir aqui no cabeçalho e você faz download do material didático comp tempo vai tá aí o o CS o CSS você vem nesse ícone e cola publica atualiza a página já deixei no esqueminha aqui ó pum pronto você tá arrumadinho deixa eu ver aqui a página de carrinho ele tá aqui também eu vou clicar editar acolhimento ir ajustar e para par gente carrear outro códigozinho CSS bem simples que eu preparei seleciona aqui o edit avançado CSS personalizado e cola vai est no material para vocês beleza para não ter que parar para

explicar isso aqui que levaria muito tempo e tem vídeo básico de CSS aqui no canal Deixa eu só colocar aqui o outro que depois eu coloco aí certinho traduções galera caso você queira traduzir você vai usar o translatepress Então por eu traduzir alguma coisa aqui ó appointment information Você pode traduzir esse tipo de coisa né aqui também ó information como que eu traduzo isso você v aqui em plugins adicionar plugins aqui é opcional tá Maso truz translate press deixa eu ver aqui esse aqui ó translate press você clica em instalar o bom dele que você

consegue basicamente traduzir o site de ponto a ponto do Je do jeito que você quiser ativa Skype para pular aqui no plugin ó configurações trans press desmarca essa opção aqui ó de seleção de idioma flutuante guardar alterações atualizar aqui a página ã E aí eu vou querer traduzir isso aqui deixa eu copiar esse nome Deixa eu ver aqui no checkout tem alguma coisa no checkout acho que tem um Campo também que a gente pode traduzir servar date tá como que a gente faz vem aqui ó em Traduzir página clica ou então aqui no tress traduzir

site ele vai abrir essa telinha então Traduzir página aqui ou aqui traduzir site vai ser redirecionado para cá se o que você quer truz aqui na página você pode clicar em cima e digitar informações de agendamento ó dá um save e pronto aqui serviço aqui data esse appointment eu não consigo traduzir Porque ele é o nome do produto ó appointment você pode mudar o nome dele para agendamento não tem problema e se eu traduzir atualizar aqui ele já muda para agendamento tá vendo esse data aqui esses dois pontos acho que não precisa beleza Eh se

eu clicar aqui eu posso ir navegando pelo site traduzindo deixa eu ver se vai permitir traduzir aqui o se não não permitir você clicar em cima e traduzir igual eu fiz não tem problema você vem aqui em string translation vem aqui em get text vem aqui em search coloca o nome do que você quer traduzir Dá um enter clique em Edit e dá um save ele atualizar aqui em tudo os dois pontos que eu tô colocando você vê que tá duplicando então não precisa tá deixa eu voltar aqui Traduzir página string getex até bom que

eu volto aqui para vocês e não se confundirem não é necessário Então deixa eu ver aqui ver carrinho ó informação de agendamento só do popup aqui que traduzido Deixa eu tirar o item do popup talvez colocando no novamente ele traduza vamos testar teste teste seleciono profissional deixa eu ver o que que aconteceu aqui eu acho por caso que eu mudei o nome do produto ele não tá puxando o profissional deixa eu verificar aqui settings serviços profissionais por algum motivo el não tava puxando mas atualizou os links permanentes e resolveu bem rápido é configurações links permanentes

mesmo que esteja nome do post você salvar alterações que ele vai recarregar todos os links do site atualizar tudo à ve a gente mexe alguma alguma coisa mas enfim galera eh aqui já tá funcionando agora vamos testar de fato o sistema é de ponta a ponta né então a gente vai testar o agendamento seu horário tá travado se não tá para vocês verem aí certinho beleza então vamos ver vou vir aqui em marcar consulta Vou colocar aqui dados de teste então tô estando tentando agendar aqui um sistema como se fosse um usuário comum aqui tá

os profissionais de estética íntima eu vou vir aqui na Carla próximo e eu vou agendar pro dia 3 das 9 às 10 então Carla dia 3 das 9 às 10 tá certinho de valor fazer agendamento vai cair aqui E aí eu vou preencher as informações Então vou preencher aqui as informações rapidinho com dados fictícios e já volto preenchi aqui Os dados aqui a pessoa vai selecionar o pagamento se é cartão boleto enfim pix eu pego bolo de teste tá então ó Carla dia 3 às 9 às 10 você ver que esse horário vai travar eu

vou aqui finalizar pedido beleza Tá aqui o boleto Eu só tirei o zoom porque tem alguns dados meus então é Tira aqui o zoom para vocês não verem Mas enfim tá certinho beleza tá o boleto aqui a pessoa ficar imprimir boleto apaga direto aqui no site todos os detalhes do pedido beleza Inclusive a Quero trazer esse campo deixa eu ver se ele permite abrir direto por aqui deixa eu clicar detalhes do agendamento beleza ó pronto traduzi tá E aí então o usuário fez um agendamento como que isso vai proceder aqui no site como que eu

vou administrar isso ra se eu vi aqui o commerce pedidos você vai ver que vai tá aqui ó o pagamento tá pendente por a pessoa não pagou boleto tá funcionando aqui pagou o boleto o dinheiro vai cair lá no mercado pago no Paypal no que você configurou Outro ponto você pode consultar isso aqui também ó em apartment appointments olha só tá aqui o João Silva ó tá pendente o pagamento né mas eu clicando aqui editar eu consigo ver todo o pedido dele ó o nome dele o o e-mail como que funcionou Qual o serviço Qual

o doutor enfim e aqui em pedidos também eu tenho todas essas informações todas as informações de pagamento certinhas eu vou pegar título de aula e mudar de pagamento pendente para concluído que significa que foi pago OK e vou atualizar obviamente o seu não precisa fazer isso quando você configurar pro seu cliente vai ser automático eu tô só fingindo que foi pago a título de aula se eu voltar aqui tentar agendar o mesmo serviço ó é estética íntima D dout Carla ó estética íntima Doutora Carla dia 3 Ó você vê que o horário das 9 às

10 que foi o que ele tinha agendado ó das 9 às 10 nem aparece mais aqui ah por quê Porque esse H já foi agendado com essa Doutora não tem como ela eh eh atender esse cliente entende não tem como mais e aí vai funcionando dessa forma o sistema uma coisa que eu reparei aqui que tá faltando o botão de voltar Ó nessa parte né pra pessoa conseguir voltar vamos aproveitar aqui ajustar também já estamos aqui com mão na massa vamos deixar tudo redondinho para que você não tenha nenhum tipo de dúvida aí de como

funciona aqui todo o site eu vou vir aqui em Jet form builder for e vou colocar aquele botãozinho de voltar al então aqui no form ler V aqui no nosso formulário eu vou pegar aqui mais e vou adicionar nessa partezinha aqui o PR page esse aqui PR p v arrar para cá page e vou voltar salvo vou verificar aqui agora como que tá ó voltar então fica mais fácil de Navegar né E aí Ah Rafa deixa eu voltar aqui C carna aquele horário tá travado né das 9 às 10 mas os outros estão disponíveis E

aí conforme for agando os horários vão sendo travados para essa profissional se vier aqui com a outra e dout Marcela vai tá disponível porque disponível na agenda da Marcela porque ninguém agendou mas se vi algum cliente agenda aqui esse horário vai ficar travado se eu vi aqui no Natal ó em dezembro a partir do dia 28 eu não consigo agendar mais nada porque a gente tinha configurado lembra Natal ano novo ó ele tá travado aqui ó não consigo agendar Lembrando que por exemplo eu vou pegar aqui do dia 2 ao 6 de dezembro vamos lá

como que eu mexo nisso lembra apo series working Hours vou adicionar aqui ó teste só para mostrar para vocês e essa semana aqui de dezembro dia 2 ao 6 eu vou pegar do Set que ele pega sempre de um dia para trás e um dia paraa frente dou um save atualiza aqui o site vou tar fazer aqui o agendamento no no dia ó lá a semana tá toda travada não consigo agendar porque sei lá é um feriado sei lá vai fechar a clínica para reforma você consegue configurar Então não precisa colocar o site de manutenção

nem nada do tipo você ajusta tudo por aqui tá E aí continuando os clientes vão acessando aqui fazendo a os pagamentos os agendamentos esses agendamentos vão todos entrando aqui no appointments e também aqui no commerce pedidos é super simples de você acompanhar tem segredo é só clicar e olhar os dados do cliente alguém pode entrar em contato com ele enfim ã você pode olhar também aqui os relatórios vê quanto eh Vendeu por mês Vendeu por categoria vendeu o produto você vai conseguir acompanhar tudo por aqui os valores né Você pode orientar isso pro seu cliente

e aqui tá tudo bonitinho tem várias análises que você pode explorar aqui a aba de cupons eu tinha mostrado Mas você pode criar cupom de desconto e a pessoal aplica esse cupom no carrinho ou no checkout né e é basicamente dessa forma galera eu cara eu vendo de todo dia pelo comerce eu gerencio por aqui a gente olha todos os pedidos dos clientes né Cada pedido gera um número único desse pedido então eu consigo acompanhar e gerenciar tudo por aqui de uma forma bem simplificada né el tem aqui a aba de pedidos clientes relatórios você

tem a aba de análise que você pode ver e todas as receitas os períodos tudo certinho tá aqui os profissionais caso você queira mexer eu mostre também e os appointments que basicamente ser É bem parecido com pedidos é só uma telinha diferente vocês poem olhar por um olhar por outro olhar pelos dois aí você fica à vontade Lembrando que o status ele vai ir alterando né conforme o status do pedido cara e é basicamente isso galera para você poder operar esse site aqui tá E aí galera que vocês acharam Cara vocês curtiram passo a passo

como você monta o sistema de endamento completo você mesmo criando um sistema aí utilizando o elemento para construção design das páginas e o jet Engine Jet apport para construção do sistema e o commerce para pagamentos caso você queira o commerce Caso não queira não é necessário conforme eu expliquei né É só você não habilitar a integração ali do comerce e você pode usar só o sistema de agendamento sem utilizar ali o ecommerce como é questão ali de pagamento Beleza cara ficou muito bonito e o legal é isso daqui que mais uma vez você pode adaptar

para qualquer seja uma clínica de estética massagem Você pode adaptar aqui para diversos tipos de profissionais que trabalh com agendamento de horas né com pagamento integrado ou sem pagamento integrado Clínica Médica dentista é quirla xia enfim cara dá fazer muita coisa a partir dessa base porque é totalmente adaptável tudo que eu mostrei aqui para vocês eu mostrei os conceitos de Como cria o sistema para que você não fique dependente né você consiga adaptar esse conhecimento para o que você for desenvolver velho se você gostou desse conteúdo já fala o seguinte esmaga o dedo no like

se inscreve no canal e já deix seu feedback galera seu seu comentário na descrição indicando Qual o próximo vídeo completo que vocês querem que a gente grave aqui no canal a sua sugestão é bem importante Beleza deixa os comentários aqui abaixo inclusive galera eu vou deixar em na descrição link da hospedagem ros Parceiro aqui do canal tem nosso cupom de desconto você contatando pelo nosso link você ajuda a gente gravar mais vídeos compl como esse vou deixar o link da descrição também o link do template editável dessa aula você pode cpar esse template ável e

utilizar no site do seu cliente cara você paga só uma vez link na descrição e também vou deixar o link na descrição o nosso treinamento completo de coco Block onde você aprende a criar sistemas T usar códigos ou programação utilizando aí elementor em conjunto com o pacote de plugins coco Block principalmente ali o jet Engine mas também tem aula de jet apoio também Jet book enfim eu vou deixar todos os links na descrição beleza dito isso muito obrigado aí pela sua audiência um abraço até a próxima valeu é nós