0:04 Opa, parece que tem alguém aí. Cadê vocês, povo? Preparados para uma live que vai mudar a forma como vocês trabalham? Preparados? Preparados? Preparadas? Bora. Deixa eu colocar aqui rapidão nos comentários aqui. Aí sim. Belezsk mudar, bicho. Vai mudar. Ó lá o Alexar. Cheguei primeiro com o Marcelo. Vamos lá. Eu me atrasei aqui porque, cara, eu ol, vocês são nervoso aí. Eu tô nervoso daqui porque, cara, é legal mesmo negócio, cara. Ai, tô até nervoso. Ai, ai, ai, ai, ai, ai, ai. Deixa eu colocar os comentários de vocês aqui, ó. Aí, hoje eu mudo. Hoje o filho chora, a mãe não deixa. Aliás, que boa tarde. Boa tarde. Isso vai mudar tudo. Vai mudar
0:51 tudo. Chora aí. Fala aí, Alex. Tô esperando muito aqui. Bora. Hoje cheguei adiantado. Chamar os amiguinhos. Beleza. Like, like, like. Setembro vai entrar. Ô, que isso, rapaz? A surpresa vai ser um ano de hospedagem na cu. Que cuca o qu, rapaz? Você tá maluco, bicho. O negócio é bom, não é? Não é porqueira. Salve, salve, juventude. Ó, Thagovsk aí, bicho. Ó, vamos lá, povo. Vamos dar uma agitadinha aqui, ó, rapidão. Vocês me dê 5 minutinhos. Prometo que serei rápido. Deveras não demorarei para que nós comecemos o esquemation. E ó, o André tá dando risada, cara. Tchau. Tchau. Que que negócio é esse aí que você mandou aí, rapaz? Tá doidão, bichão. Vamos lá, vamos avisar aqui rapidão a galera. Hã, deixa eu dar everyone.
1:36 H, hello, galera. Partiu para a live mais essencial do web design. Vamos lá, deixa eu mandar nos lugarzinhos aqui rapideco. Eu fiz barulho para essa live, né? Vocês vão ver que vai valer a pena. Vocês vão ver que vai valer a pena, mas tem que ficar até o final. Chama, chama. Tem que ficar até o final que senão vai dar bosque. Se você não ficar até o final, vai dar bosque, tá? Porque no final vai ter uma surpresinha. Super master blaster, hiper mega blaster. Não vou vender nada. Nada. Não tô vendendo. Não tô vendendo. Não tô criando, não tô assustando à toa. Não é verdade. Fica até o final, você não vai se arrepender. Mas tem que ficar, tem que ficar. Certo. Chegou a Carol, chegou o Mateus. Ó o
2:22 chá. Não, eu pior que hoje tô no chá. Hoje eu tô no chazinho gelado, né? Porque últimamente tô muito nervoso. Então tomar café eu vou ter um piriri aqui na frente, então melhor pegar esse aqui. Não é um piriri, é um pereirão de tão nervoso que eu tô. Chá energético. É tudo pronto. Tudo pronto. Tudo pronto. Tudo pronto. Então beleza. Ó, deixa eu só avisar aqui nos grupos rapidão. Será que eu já disparei o e-mail? Porque ó gente, hoje vocês, ó, o melhor paninho que tem para limpar o óculos chama-se Higienic Paper. Higienic paper. É paper de boista. É o melhor papel que tem. Não serve para limpar só aquilo lá, não. Serve para limpar aqui também. Para mim é o melhor. Eu já compre uma plin. Mas deixa a luz azulzinha. É, vou deixar azulzinha porque eh do bem, né? Do bem. Paz e amor. Opa, bora, bora então. OK. Deixa eu só avisar aqui rapidão, turmaão, que eu esqueci. Querendo que eu esqueci muita coisa, né? Então, deixa eu mandar aqui o aviso de que nós
3:07 comecemos. OK. Replicar. Só me dê 5 minutinhos. Vamos começar, turma. Vamos começar. Agitem. Agitem. Mandem nos grupos que vocês tiver aí. Aqui, ó. Hoje o negócio vai ser chique, vai ser massa, tá gente? Isso aqui sensacional. É responsiv. Responsível. Beleza. 5 minutinhos nós já começamos. Enquanto isso, fala para mim no chat quem aí já é selado, quem aí ainda não é selado, quem é novo no canal, quem ainda não é novo no canal. A live mais importante para criar sites
3:54 milimétric milimétricos. Essencial assistir se quer ser realmente bom. Beleza. Ó, sem lado, selado, com orgulho, seladíssima. Aí sim, vamos ver essa novidade. Frente tô montando aqui. Chique, Rafá. Belezura. Vamos lá. Deixa eu só mandar aqui rapideco. Ó, estamos com a galerinha ao vivo, gente. Ó, seguinte, seguinte. Vamos, vamos falar uma coisa para vocês, ó. No final vai ter uma surpresa aqui. Se Vamos ver, vamos ver. Dependendo da quantidade de like que chegar esse vídeo, dependendo de quanto joinha eu receber, eu libero total. Dependendo de
4:39 quantos joinha eu receber, eu vou liberar só para ganhar selado, tá? Então, vamos ver se a gente vai bater bastante joinha. Então, se vocês der bastante like, eu libero. Senão eu não libero, tá? Senão é só para quem é selado. E se você já é selado pelo mesmo assim, dá like já que vale a pena, tá? Vale a pena. Vamos ver lá ele pro max, tá vendo? Lá ele pro max. Ó lá, os cara, os cara tá, os cara tá maluquete, bicho. Esse CVC aí. Hum. Ui, CVC. Vamos lá, povo. Seguinte, seguinte, seguinte. Vamos ver quanto joinha lá. Ele Pro Max 16. Os cara, os caras não perdoa, velho. Não, mas vamos lá, cara. Verdade, de verdade, cara. De é vero, é vero. Deixa eu achar aqui o link da live que eu vou mandar aqui, bicho. Aí, eu tô, tô até
5:25 nervoso. Tô até nervoso. Eu não quero demorar, mas o que eu tô fazendo aqui é fundamental, gente. Então, esperem 5 minutinhos que, ó, garanto pr vocês. Vai, vocês vão trabalhar de forma diferente daqui pra frente. Vai ser outra coisa. Vai ser outra coisa, bicho. Ah, control C, watch. Beleza. A forma de vocês trabalhar vai mudar completamente. Completamente. Então é isso. OK. Já vai dando joia, já vai compartilhando aí, chama a galera sem medo ser feliz. Eh,
6:10 a live mais importante para trabalhar de forma profissional. Não vou vender nada. Não vou vender nada. O guia para sites 100% responsivos no Pigma, Elementor e Photoshop. Atualizadíssimo e com novidade. Olha só, você v mandou Rzinho. Hum, nem sei o que é, mas já estou animada. Pois é, Carol, você vai descobrir. Você vai descobrir. E, ó, se vocês trabalhar dessa forma, eu acho que vocês vão conseguir implementar muito mais. Não vem essa historinha de templatinho
6:56 pronto, não é fame do profissional mesmo, não é conversa de de boi dormir. Você vão poder usar em qualquer dis: "Ah, o meu só tem Windows, pode usar. Ah, só tem o Mac, pode usar. Eu tenho Linux. Ah, pode usar que usa onde você quiser. Onde você quiser, mas ó, você tem que usar daqui pra frente. Vocês vão ver o que que eu vou fazer aqui, bicho. Vamos chaquaiar o negócio. Mas pera aí. E aí, Kennedy? E aí, Daniel? Responsividade? Sim, tem a ver muito com a responsividade, mas é mais do que apenas responsividade. Você vai descobrir o que é se você ficar até o final. Se você não ficar até o final, você não vai descobrir. Tem que ficar até o final. E a cereja do bolo tá principalmente no final. Ai, rapaz, pior que até lá roda, viu? Tarde, Renan. Bora
7:41 então galera, vamos nessa, tá? Hum. Mais dois minutinhos. Enquanto isso, não esquece de dar o joinha que nós já vamos começar. Eu preciso fazer barulho porque é importante mesmo, cara. Não é aquela história de que, ah, vai chegar o lobo, vai chegar o lobo, vai chegar o lobo. Aí o lobo não chega. Não, não é isso. É importante mesmo. É importante mesmo. OK. Salvar e enviar. Agora tô até tô até nervoso já. Tô até nervoso. Até nervoso porque o negócio vai ser chique. Vamos lá. Partiu enviando o bicho. Ah, eu quero. Qual que é a cuca? Ai, ai.
8:27 Acho interessante você aprender. Sim, sim, sim. Tem bônus hoje, cara? Na verdade não é. Eu tô falando, não vou vender nada, cara. Não vou vender nada. Hoje vai até às 8 lá. Vamos ver. Calma, Mateus. Você vai descobrir, mas você tem que ficar até o final, velho. Eu vou falar exatamente isso. Você vai descobrir, bicho. Você vai descobrir. Beleza? Então, e-mail enviado. Certo? Agora eu vou mandar aqui rapideco. E aí, Cianevsk? Chegou, né? Nessa hora chegou. Fala aí, Mone. Ó, o povo tá chegando. Tô me tremendo. Quero saber o segredo do cu. Pior que eu também tô, cara. Se eu de repente aqui no meio da live der vontade de cagar, vocês não estranhem, porque eu também tô nervoso.
9:16 Ai meu Deus do céu. Mas é verdade cara, o negócio é legal. Vocês vão ver que legal, cara. Vocês vão ver que legal. Mas tem que ficar até o final porque o melhor eu deixei pro final, tá? E não é abertura de turma, não é. Ai, Marcelo, você tá fazendo para m vender. Água de salsicha, não é? Água de salsicha, não é. O negócio é bom mesmo, mas vocês vão ter que usar, tá? Vocês vão ter que usar. Eu já usei aqui num projeto meu e eu testei a diferença, cara. Fez diferença mesmo para mim aqui, velho. Putz. E vocês vão vão, cara. Fica aí, fica aí. Eh, vamos lá. Deixa eu mandar aqui rapidão. Vocês vão ter que ficar até o final. Enquanto isso, vamos fazer uma uma Não, que isso daí, Thiago, nada a ver, filho. Mas é melhor do que Mas assim, muito melhor do que isso. Era para ver sua
10:01 caror pressão. Pois é, cara. Eu tô, é que eu tô falando, tô quase cagando aqui, viu? Presta atenção, ó. Eh, viu, gente? Ó, o seguinte, ó. É o seguinte, é o seguinte. Eu quero eu quero saber uma coisa antes. Quero saber uma coisa antes de vocês. Coloca no chat aí para mim, quem já assistiu a minha live 45 antes de estar aqui. Alguns de vocês, quer dizer, muitos de vocês com certeza já tem assistido. Isso aqui vai ser uma atualização da Live 45 e tem mais coisa. Então diga para mim quem já assistiu a live 45, fala para mim no chat aí que eu quero descobrir. Tô terminando de mandar aqui enquanto isso eu vou descobrir. Vamos ver. Tem que ser um bagulho, muito bagulho, bicho. E a atualização da live 45 tem mais coisa ainda. Vamos lá. Eu já assisti mais de uma vez, ó. Já assisti umas 23 vezes.
10:47 Duas, três vezes. Se ou então a live 45 vai ficar na história, porque hoje vai entrar a live 70, tá? No lugar do 45. E mais coisas. E mais coisas. Foi uma das primeiras que vi. Obrigatório. Sim. obrigatória. A de hoje vai ser mais obrigatória ainda. Assisti, reassisti, consultei. O Alden, eu já decorei a live 45. Eh, quem mais? Assisti duas vezes. Agora eu quero saber se algum de vocês ainda não assistiu. Se quem ainda não assistiu, fale para mim aí, por favor. Preciso saber quem não assistiu, porque hoje a gente, ó, vai ser como adestrar o bicho do pading. Boa. Ó o Mahá aí, ó. Ô, Mahá, você apareceu, cara. Tá mais sumido do que do que Tá mais sumido do que o que sei lá o quê. Tá mais sumido do que
11:32 gás no fim de semana. Não, ass. Ô Renan, então tá bom. Você não assistiu? Ó, o Renan não assistiu. Beleza não assistiu. Lá o Adrian ainda não assistiu. O que? Kenid. Kennedy. Você ainda não assistiu, velho. Meu Deus do céu. Kennedy, você não assistiu, cara. Velho, então tá bom. Então eu vou perdoar porque hoje é que atualizada. aqui, ó. E aí, Alfredo? Fui ver aqui que vi. Ah, então tá bom. Então, tá bom. Beleza. Certo. Então, hoje vai entrar no lugar da 45 e até mais importante, tá? Depois eu vou até tirar a 45 do ar, porque essa aqui vai entrar no lugar dela, tá legal? Vai ser conceitos atualizados e mais coisas, tá? Eu não assisti. Ah, Pablo, se você não assistir, rapaz, chicotão vai estralar no seu lombo, bicho. Vai estralar. Estralar.
12:18 Ó, um abraço da Itália, ó. Só bicho. Ó, manda uma pizza só. Abraço. Não quero, bicho. Não quero pizza. Quero pizza. Beleza, então tá bom, turma. Ó, estamos aí com Cadê, cadê o joia? Ó, vamos lá. Se o pessoal se, se der bastante joinha, a novidade será para o público em geral. Se não tiver bastante joinha, acho que eu não vou dar o a a o acesso da novidade pro público geral. Vocês não me vem com trocadilho, não. Vocês não me vem com trocadilho. Não é isso aí, ô, ô, Eric. Não é, é outra coisa. Você não vem com trocadilho. Aí, ó. Cheguei. Josvan like, ó. Cadê? Ó, tá aumentando os like. Tô, tô gostando.
13:04 Aumenta mais um pouquinho. Aumenta mais um pouquinho porque você vai valer a pena. Vocês vão ver que vai valer a pena, tá? Eu não tô fazendo barulho à toa não. Eu não tô fazendo barulho à toa. Vai valer a pena. Mas eu quero ver os joinha aí, bicho. Cadê os joinha aí? Sacanagem. Cadê os joinha? Pizza fria chega aí, ó. A pizza chega fria. Não tem problema. Eu gosto de pizza gelada. Inclusive tem pizza que eu comi ontem aí que sobrou. Galera da joia porque vale a pena. É isso aí, ó. Adriano, Adriano tá aí, não tá? Mandar só ir mais dois grupinhos aqui, a gente já começa, ó. Então, falta esse aqui e esse aqui. Beleza. OK. Cara, estamos estamos aumentando a
13:50 audiência, hein? Tô aumentando a audiência, gente. Se liga só que nós vai chaquaiar o negócio aqui hoje. Se você usar, vai sim melhorar o seu fluxo da implementação. Não tenha dúvida disso. Mas vamos lá, tá? Vamos lá. OK. OK. OK. Inclusive, o que vai ter de gente usando isso aqui é brincadeira, bicho. Ó, impactados, ó. Vi de novo, ó. Perdi a Não, vamos começar agora enquanto só tá fazendo barulho. Beleza, já mandei na onde eu tinha que mandar agora já tô com tudo aqui aberto. Ok, beleza, no jeito. Tá, deixa eu abrir a pastinha do bicho aqui. Na verdade, não é só uma, na verdade duas. Dá tempo de chamar mais amiguinhos. Isso mesmo. Chamem aí.
14:36 Então, vamos lá, povo. Vamos começar porque é o seguinte, ó. Chegou a hora de começar. Então, quem ainda não me conhece, eu sou Marcelo Rocha Designer. Eu faço conteúdos aqui semanalmente. Toda terça nós temos análise de site ao vivo e toda quinta-feira nós temos os nossos a nossa live de conteúdo. E hoje é uma live de conteúdo, tá? E essa live de conteúdo, ó, o William veio pela Raquel. Aí sim, ó. Raquel tá moendo. E hoje é uma live de conteúdo, gente, para todo mundo que trabalha com todo mundo que trabalha com criação de sites, tá? Se você trabalhar dessa forma, você nunca mais vai ter problema com o negócio de site quebrando na hora de mandar pro cliente. A coisa mais chata que tem é você ver o site, tá todo bonitinho, você manda pro cliente,
15:21 tá uma bosta, né? Então, e além disso, vou mostrar uma coisa também que vai otimizar o fluxo de trabalho de vocês, tá? Alguns conceitos de hoje são atualizações. Eh, a live, ó lá, o Mahá gostou, né? Então, ó, veja bem, eu já fiz a live. Presta atenção agora. Agora atenção, povo. Agora, atenção. Atenção. Vamos lá. Atenção que agora vai começar. Eu fiz aqui uma live número 45, onde eu tava falando sobre sites 100% responsivos. Essa live 45 era uma atualização da live 16 também sobre sites responsivos, né? Porque com o passar do tempo a gente vai evoluindo nossas técnicas e a nossa forma de trabalhar, né? E hoje vai ser uma atualização da atualização, uma live, a live 70, que é essa aqui que você tá assistindo, é uma atualização da live 45, mas não é só uma atualização, tá? Eu vou passar para você os conceitos
16:07 da live 45, mas vai ter mais coisas, OK? Mais coisas além dos conceitos da da Live 45 atualizados, OK? Mas eu vou começar desde o começo aqui explicando para você tudo que eu expliquei na live 45, só aqui com atualizações. E mesmo se você já sabe o que eu ensinei na live 45, você tem que ficar porque tem mais coisa, ok? Então vamos começar. Seguinte, povo, seguinte, ó. Primeiro vamos falar da parte conceitual, né? Então antes de eu pegar e começar a mexer no editor, seja do Figma, do Elementor, do Photoshop, eu tenho que entender alguns conceitos para que o meu site ele funcione corretamente, OK? Quais são esses conceitos que eu preciso entender? Eu separei por tópicos aqui, ó, e você já tá vendo que o último é surpresa. Então, ó, eu tô tô fazendo isso aqui para segurar você até o final da live. Não é, mas não é eh promessa falsa, não, que você vai ver depois que você vai ter um negócio chique, da hora.
16:54 E vamos ver, dependendo da quantidade de likes, dependendo da quantidade de joinha, a gente vai liberar essa surpresa para todo mundo, senão só para quem é aluno. Então, dá lhe dar joinha aí para nós, OK? Vamos lá. Primeiro de tudo, primeiro conceito que a gente precisa entender são as unidades de medida, tá? Quais são unidades de medida? Então, toda vez que você vai trabalhar aqui num site, você trabalhou no monitor, nós temos unidades de medida para você eh trabalhar. Essas unidades de medida elas são de duas categorias. Primeira delas em categoria de unidades e medida absolutas e unidades e medidas relativas. OK? Vamos falar primeiro sobre unidade e medida absoluta. O que que é absoluto? Que não muda? Atenção, atenção. Se se você quiser anotar um caderninho, anoto. Mas ó, o que que é a unidade de medida absoluta? Não muda. Unidade relativa é aquilo que muda. Então, absoluto não
17:41 muda, relativo muda. Absoluto não muda, relativo muda. Muda dependendo do quê? Dependendo da janela do usuário, dependendo do dispositivo que tá sendo acessado, dependendo de uma coisa ou outra. Então, essas unidades relativas elas podem se alterar, já as absolutas, não. OK? Que que são as unidades absolutas? Ó, por exemplo, algumas medidas, centímetros, milímetros, polegadas, pixel, ponto e paik. Que que é paik? Tem uma um contol para dá da tem tem outras ainda, tá? Eh, mas essas daqui são os que mais existem, né? Isso aqui você vai ver muitas vezes aqui dentro do elemento. Já vou abrir aqui para você uma pagininha só para te mostrar dentro do elementor uma coisa, tá? Então aqui eu tô com WordPress vazio que eu que eu criei, né? Deixa eu só mover essa porqueira aqui pra lixeira. Só instalei aqui o plugin do Elementor Elementor Pro, padrãozinho, né? Ai, Marcelo, não tem Elementor Pro.
18:27 Proelements.org. Então você consegue acesso gratuitamente. Então, e exemplo, tá? Vou colocar qualquer coisa aqui e vou editar com Elementor o droga. Ah, tá. Eu acho que tem um probleminha aqui com, deixa eu ver, na realidade, o probleminha aqui tá sendo com, eu preciso só salvar os links permanentes aqui, ó. Dar uma ziradinha no bicho, provavelmente isso aqui. Talvez seja um caszinho aqui. Se não der para mim mostrar nesse site aqui, eu tenho outro site aqui, não tem problema. Eu uso uma outra URL, mas eu acho que agora vai. Vamos ver. Editar com Elementor. É, essa desgraça aqui não vai. Ah, não, agora foi. Tá, não tem problema. Então, ô desgraça, eu vou ter que pegar um outro domínio meu aqui. Então, é que eu criei esse domínio aqui do zero, então acho que não deu tempo nem de propagar ele. Fiz a configuração toda aqui, então vou pegar um outro domínio que eu tenho, vou criar a página no outro aqui, só para não confundir você, tá? Então, página,
19:15 página de exemplo, OK? Coloquei num outro domínio meu aqui mesmo, não tem problema, tá? Então, beleza. Vamos abrir o Elementor aqui, ó, e você vai ver aqui na onde que ficam as unidades de medida, né? Nós temos aqui, ó, vou jogar esse título para cá, ó. Então você vai ver, por exemplo, se você tentar mudar o tamanho de um título, você vai ver que ele tem unidades diferentes de medidas, tá? Não só título, com qualquer coisa, contêiner, imagem, o que for, né? Mas vamos lá. Quais são as absolutas? Centímetros, milímetros, polegadas, pixels, pontos e mais. Qual que a gente mais usa no desenvolvimento de sites? Essa aqui, ó, pixel, tá? Então, pixel que a gente mais usa. E as unidades relativas são essas aqui, ó. E em room percentual, rain, né? Rain percentual, o VH e o VW. O que que significa essa parada aqui, ó? Então, vamos lá. Presta atenção. Presta atenção. Pixel é uma unidade que não muda. Se você chegar
20:03 pertinho do seu monitor, se você chegar bem pertinho do seu monitor, você vai enxergar um monte de quadradinho pequenininho. Aquilo ali é a medida de pixel, certo? E essa medida que você enxerga no seu monitor, você vai enxergar também num celular, você vai enxergar também num tablet, num num sempre vai enxergar a medida de pixels, beleza? Isso vai ser o mesmo tamanho. Você coloca 10 pixels no seu celular e 10 pixels no desktop. Os dois vão ficar ao mesmo tamanho. Não vai mudar. Beleza? Mas tem mais coisa, né? Eh, então vamos lá. Então, vou colocar, por exemplo, aqui, ó. Deixa eu só tirar esse nome chato aqui de cima para não atrapalhar a gente. Colocar a tela do Elementor. OK. Jogar um contêiner para cá. Deixa eu pintar esse contêiner de outra cor aqui, ó. Por exemplo, pintei na cor preta, né? Tá vendo isso aqui, ó? Pixel, né? Então
20:49 esse aqui é minha largura útil, né? Se ele vai aprender com a largura útil. Eu coloco 50, ele ficou menor, 500 ele ficou maior, tá? Isso aqui vai ficar fixo, certo? É, todo mundo grudou o monitor, a cara no monitor agora. E aí nós temos aqui essa outra medida que é o em. Essa aqui é relativa, tá? Relativa ao quê? Vamos entender um pouco como funciona o em primeiro. Então eu vou jogar, por exemplo, aqui, ó, um título aqui dentro, certo? Vou jogar um título aqui dentro. Vou pintar esse título aqui da cor branca, ó, só para você entender na prática como é que funciona, né? Vou aumentar aqui o tamanho deste contêiner. Vou deixar centralizado, tá? Este meu objeto aqui, ó, este meu objeto eu vou deixar ele com 16 pixels, certo? Ó, coloquei ele 16 pixels. Só que presta atenção, eu coloquei qual medida aqui, ó? Qual medida aqui, ó? Essa aqui, ó, pixel. Beleza? Tá? 16 pixels. Se eu duplicar
21:36 isso aqui, ó, essa de baixo, em vez de colocar 16 pixels, eu vou colocar 1 m, OK? Então, ó, 1 m, ó. Você vai perceber que os dois estão igual. Por qu? por padrão, 1 em igual a 16 pixels, certo? 1 em ig 16 pixels. Mas qual que é a diferença do em? Então, o em ele por padrão é 16, só que o em ele é relativo. Eu posso pegar o elemento pai, o elemento da onde ele está inserido, e posso dizer que esse elemento pi vai ter, por exemplo, um emo dizer que um ele é equivalente a 16 pixels, né? Tem como fazer isso? Quer ver? Ó, vou mostrar para vocês, ó. Deixa eu mostrar para vocês aqui, ó, como é que a gente vai fazer para alterar o tamanho do elemento em, tá?
22:23 Deixa eu colocar aqui para vocês, só um minutinho aqui, ó. Pera aí, pera aí, pera aí, só um segundinho, ó. Vamos lá, então. Deixa eu Vem cá comigo, ó. Aqui eu tô com mostrei pra vocês, esse aqui eu vou até escrever, ó, é título em PX. E esse aqui é o título em em. O título é em. Se eu pegar o elemento Pai, que é esse elemento aqui, por exemplo, e eu disser que dentro dele, ó, vou colocar aqui, ele tem, ó, o font size, quer dizer, o tamanho padrão dele vai ser agora 24 pixels, tá? Perceba o que que aconteceu? O m aumentou.
23:10 Presta atenção. Por que que o M aumentou? Porque esse aqui é relativo ao elemento pai. Se eu tô dizendo que o elemento Pai tem uma fonte size de 24, tá? O elemento PI, a gente chama de elemento PI aquilo que tá dentro, né? Então esse aqui, ó, é o título em, esse aqui é o título em pixel. Se eu aumento o font size desse elemento, ó, vou colocar aqui 32. Só que se você for ver esse aqui, ó, ele continua sendo em m, ó. Entendeu? Então ele é relativo. Relativo ao quê? Ao padrão do elemento pai. Se você no elemento pai você não coloca, ó, se eu no elemento pai não deixo nada, por padrão, ele vem com o tamanho de 16 pixels. Tá vendo, ó? Só que de 16 pixels, se eu colocar no elemento pai, ó, de 16 pixels não muda. Por que que não muda? Porque é fixo, entendeu? Essa é a primeira coisa que eu quero que você entenda, tá? É básico, não tem segredo nisso aqui. Beleza? E aí nós temos o rain também. O que que é rain? Eu posso colocar e aqui eu vou
23:56 fazer o seguinte, em vez eu vou duplicar isso aqui, ó, e vamos colocar, na verdade, vou duplicar. Esse aqui vai ser um título em rin. Então, em vez de colocar em, ele vai ser rin, ó. Então, em, vou colocar RM, 1 RM. Que que é o RM? Então, vamos lá. Enquanto esse elemento aqui, ó, eu posso dizer que, opa, droga. Enquanto eu posso dizer aqui, ó, deixa selector font size, ó, 24 px. Perceba que o de baixo agora ele não aumentou por o rain ele é o roots em ele é só do documento como um todo. Então se eu pegar o documento como um todo, ó, o HTML e eu colocar um font size no HTML como um todo de, por exemplo, e sei lá, 36, aí o Rin aumenta, tá? Por quê? Porque quando eu uso RM é é o root em, entendeu? Root significa administrador, pai, o responsável, tá? OK. Então,
24:43 beleza. Só para você entender isso aqui bem rapidinho, não tem segredo. E também tem o o percentual, né? O que que é o percentual? É quando um elemento ele ele tá relativo, eh, como que eu posso usar? Na verdade, o o percentual a gente normalmente não usa na para textos, tá? Vou mostrar com outra coisa. Então, por exemplo, vamos lá. Vamos dizer que eu tenho um, deixa eu pensar como é que eu posso colocar um exemplo para isso aqui. Então, vou pegar uma imagem, vou jogar uma imagem aqui, certo? Vou aumentar aqui, ó, o pading, colocar 100 pixels em cima e 100 pixels embaixo, tá? O meu percentual da imagem, ó, presta atenção. Tá vendo que a largura da imagem aqui, ó? Ela tem um percentual. Percentual é o quê? Ao todo que ela está, tá? Ela, por exemplo, essa imagem, ela tá dentro de um edit. Se eu diminuo o tamanho do id,
25:28 o que que vai acontecer com o tamanho da minha imagem, ó? Ela vai diminuir junto, ó. Tá vendo? Por quê? Porque ela é percentual, lembra? Percentual é relativo, ó. Então, se eu deixo 100% e eu diminuo meu elemento, ó, a imagem vai ficar 100% dentro daquele elemento pai dela, ok? Agora, se em vezes de 100% eu coloco um valor em pixel, por exemplo, vou deixar 100 pixels e vou aumentar o tamanho aqui, ó. Então, vamos deixar pixel também, ó. Vamos colocar 1280 pixels, né? Vou colocar 100 pixels aqui, ó. Então, olha que interessante, ó. Eu deixei o tamanho da imagem em pixel. Lembra que eu falei que pixel não muda? Pixel absoluto, não relativo. Então, se eu diminuo aqui, ó, olha só, a imagem, ela tá ficando sempre do mesmo tamanho, certo? Ela não tá diminuindo junto. Tá dando para vocês entender? Até agora todo mundo entendeu, né? Eu sei que a maioria dos que estão aqui já possamente
26:14 já assistiu isso. Então, até agora todos vocês entenderam. Ficou alguma dúvida? Até agora só quero, eu vou ir bem devagarzinho porque eu quero me certificar e que o pessoal tá entendendo. Digam para mim no chat, por favor, tá dando para entender? Tá com alguma dúvida? Ó, sim, beleza, entendido. Tá bom. OK. Sim, Alef também entendeu. Perfeito. O João também entendeu. Por enquanto tá tudo tranquilo. OK. Vamos lá. Eu vou sempre ir perguntando se vocês entenderam. Agora é o seguinte, ó. Além disso, nós temos aqui outras medidas relativas que eu acho importante vocês entenderem. Uma delas chama WW, que é o viewport widit, ou seja, a largura da janela. Presta atenção. O WW é a largura da janela, não
27:02 é a largura do dispositivo. Ele vai ser, é como se fosse um percentual, só que relativa a janela, beleza? E nós temos o VH, que é relativo, é a mesma coisa, só que relativo à altura, tá? Então o VW, viewports, widit, widit significa largura em inglês e height significa altura em inglês. Então o VW ele vai ser relativo à largura da janela. Por exemplo, vamos colocar aqui uma outra coisa, né? Então, ó, só para você entender o exemplo, eu vou pegar um título e vou colocar aqui, ó, esse título na cor branca. E aqui a a largura do título, eu vou colocar deixar qualquer fontecolage mesmo. Então, vou pegar aqui a largura do título, vou colocar VW, por exemplo, tá? Que que vai acontecer? Deixa eu deixar esse elemento aqui. Ele tá boxed, mas eu vou deixar a largura total, só para te mostrar uma coisinha, tá? Então, veja, ó, esse elemento aqui,
27:49 ou melhor, esse título aqui, ele está com VW. Eu vou colocar 1 VW, vamos colocar mais, então vou colocar 5V. Que que isso aqui significa? Ó, percebe que se a minha janela aumentar ou diminuir, esse elemento vai aumentar ou diminuir de forma proporcional. Olha só, ó lá, ó. Tá vendo que ele tá diminuindo de forma proporcional? Beleza? A largura mudou, ó. Ó a largura, tá? Se eu mexo na altura, ele vai mudar? Não, porque o VW referente à largura, não referente à altura. Tudo bem? Então, se eu mudar a largura aqui, ele vai diminuir ou ele vai aumentar? Diminuir e aumentar. de acordo com a largura, tá? E nós temos também o VH. Não sei se aqui tem VH, ó. Então aqui não tem VH, mas aqui no Elementor, quando a gente tem esse lapizinho, a gente consegue colocar via código, tá? Então eu vou colocar, por exemplo, 5V. Aqui eu tô forçando ele
28:35 através do código a ficar do mesmo tamanho da altura da janela, proporcional à altura da janela. Vamos testar como é isso aqui funciona. Então vamos para visualizar, tá? Agora o que acontece, ó? Se eu diminuir aqui, ó, olha lá o que acontece com o meu elemento, tá vendo, ó? VH. Então o o VH é é uma unidade de medida relativa à altura da janela. Agora, se eu mudar a minha largura não vai acontecer nada, tá? Eu fiz isso de propósito, só para você entender o que que é o VH. Tudo bem entendido? Então, beleza, já entendemos. Agora eu vou apagar isso aqui e vou apagar esse título. Então, deu para vocês entender o que que é o VW, o que que é o VH, né? Como é que eles funcionam, OK? Beleza? Alguma dúvida sobre essa parte de unidades de medida? Todo mundo entendeu o que que é uma unidade de medida absoluta, uma unidade de medida relativa? Todo mundo entendeu as principais que eu, ó, as principais que a gente usa, pixel, quando tá
29:21 falando desenvolvimento de site, tá? Em, o RM em algumas ocasiões pode se usar, mas eh não é tão comum. Percentual também é muito usado. O VW e o VH também são muito usados, tá? Esses são os que a gente mais usa. Esses outros aqui eu coloquei para você saber que existe, mas sinceramente a gente não usa muito aqui quando a gente fala do web, tá legal? OK, tudo entendido. Beleza, então vamos prosseguir pra próxima parte. Entendemos as unidades e medida. Essas unidades não são só do Elementor, tá? O Elementor ele é construído baseado no CSS. Então quando quem trabalha com CSS é as mesmas unidades de medida, tá? Beleza? Então foi. Agora a próxima coisa que eu quero mostrar para vocês é os break points do Elementor, certo? Por padrão, quando você instala um site com Elementor, vamos ver se aquele outro que eu tinha colocado aqui, vamos ver se ele já liberou, porque ele tá o Elementor
30:07 vazio, aí vai ficar mais legal para mim mostrar para vocês, tá? Deixa eu só ver aqui rapidinho se já deu certinho, porque ele tá, eu tinha acabado de de criar ele, então provavelmente eu não tinha propagado ainda. Deixa eu só colocar aqui, ó. Pera só um segundinho. Ã, tô colocando aqui. OK. Eu uso muito da conta com página, uma sessão só. Boa, Fabiano. VW, ô Ciano, desculpa aí, falei errado seu nome, bicho. Mas, ó, você vai ver uma outra coisinha que eu vou mostrar. Isso que é legal. Por isso que, ó, é muito importante vocês entenderem. Embora o que eu vou passar aqui nessa live para vocês hoje é um modelo de como trabalhar, mas vocês não significa que vocês tm que seguir sempre, todas as vezes, o mesmo modelinho que eu vou mostrar para vocês, que eu vou ensinar. Uma coisa é certa, se você seguir vai funcionar e o site não vai quebrar, mas não é a única coisa. Por isso que você tem que realmente entender. Aí você pode
30:52 fazer como Ciano, ó, dependendo da circunstância, usa o VW. Às vezes dependendo do que o resultado final é mais interessante. Beleza? Deixa eu só ver aqui se ele tá certo, se agora ele vai, ó. Teste publicar. Essa desgraça ainda não tá indo por causa da Ah, tá. Ah, tá. Acho que eu sei qual que é o probleminha. Deixa eu ver agora. Só um segundinho, povo. Tá. É, vamos usar essa daqui mesmo que eu tô, não tem problema. Então, vamos lá. Celar. OK. Voltando, então. O Elementor ele tem por padrão três unidades de medida quando você instala ele. OK. Quais são esses essas três essa esses três break points, tá? Então, o que que significa break point?
31:38 Só para você saber, break significa ponto de quebra. Ponto de quebra. Então, o que que acontece quando você vai fazer um site? Atenção, atenção, presta atenção, presta atenção. Quando você vai fazer um site e você vai acessar o site em diferentes dispositivos, eles têm pontos de quebra. Como assim pontos de quebra? Seu site vai ter uma, os três padrão que vem no Elementor, né? Desktop, tablets e celular. Então você acessa do de um desktop, ele vai ter uma visualização. De repente vai acessando um dispositivo menor ou então você diminui a largura da janela simulando aquele dispositivo, ele vai quebrar. É como se fosse uma segunda versão do site. E aí, ó, vai, vai diminuindo mais ainda. Ele você vai acessar uma terceira versão do site. Isso é um break point para quem não sabe. E como é que funciona? Tá? Como eu falei, os três padrão do Elementor são
32:23 esses aqui, né? Só que só que no Elementor Pro, no Elementor Pro você consegue ativar break points adicionais. Marcelo, quantos brick points eu tenho que trabalhar? Depende de quantos você quiser. Se você trabalhar com mais, você vai garantir ainda mais que o seu site vai funcionar, ou melhor, que você vai ter controle sobre cada uma dessas versões. Beleza? Eu gosto de trabalhar e eu recomendo trabalhar com todos os que o Elementor disponibiliza. Quais são todos? São sete, beleza? São esses aqui, ó. Wide, que é para televisores ou monitores muito largos, né? desktop, notebook, tablet, paisagem, tablet, retrato, tablet, eh, celular, paisagem, celular, retrato. Calma lá. Vamos lá. O que que é paisagem retrato? Vai aparecer um um céu límpido e aqui vai aparecer a
33:09 fotografia do criador do Elementor. Não, não é isso, tá? Então, ó, quando um dispositivo, atenção agora, quando eu tô vendo um dispositivo deitado, eu estou vendo ele no formato paisagem. Por isso que fala paisagem, é como se fosse um horizonte. E quando eu tô vendo o dispositivo de pé, eu tô vendo ele no formato retrato. É como se tivesse uma pessoinha ali, tá vendo? É como se fosse um retrato. Geralmente retrato, né, você vê assim, é fotinho 3x4, por isso que eu falo 3 por 4, né? Três de largura por 4 de altura. Então você tá vendo assim, tá? Então toda vez que você ouviu falava a palavra paisagem se refere a algo deitado e retrato se refere a algo de pé. Ok? E eu vou te passar o termo disso aqui em inglês, porque muitas vezes você vai encontrar termos em inglês. Inglês, isso aqui chama-se landscape e em inglês, isso aqui que é o retrato chama-se portrait. Eu vou escrever aqui
33:55 só para ficar claro, tá? Eu tô falando porque às vezes tem gente que que usa em inglês, né? Então, ó, paisagem é e paisagem igual a landscape e o retrato igual a portrait. Beleza? Então é desse jeito aqui, só para você saber como é que é em inglês. Fechou? Beleza. Vamos apagar isso aqui porque era só para você entender isso aqui mesmo. Então tá bom. Já entendemos o que que é cada uma do dos dispositivos. Como é que a gente ativa esses break points adicionais no Elementor? É muito simples, tá? E tem gente fica até o final porque tem mais coisa. Tem mais coisa por enquanto. Para quem já sabia, isso aqui pode parecer básico, mas depois vai ter uma outra coisinha. Então como é que eu ativo os pontos de quebra adicionais no Elementor? Primeira coisa, você vai vir aqui em Elementor, configurações. Depois você vai vir aqui, ó, em recursos.
34:42 Depois você vai vir aqui, ó, ponto de interrupção, personalizados adicionais, tá? Ou se eu tiver em inglês, é, como é que vai tá em inglês essa bodega aqui, ó? Vou vou traduzir por pro inglês aqui pra gente ver, ó. Eh, traduzir pro, né, já tá em português. Eu queria traduzir pro inglês, né? Escolher outro idioma. Vamos colocar aqui o inglês. Cadê o inglês? Se o seu tiver em inglês, vai tá assim, ó. Deixa eu ver colocar aqui. Traduzir, ó. Additional custom break points, uma coisa mais ou menos como essa aqui, tá? Se não, se o se eu tiver em português, deixa eu colocar outro idioma. Sen não, se o se eu tiver em português do Brasil, traduzir, ele vai est pontos de interrupção adicionais. OK? Então é isso. Vamos lá. Vamos lá. Vamos lá. As medidas que você passou para cada modelo responsivo no meu não dá sempre acrescentar 50 celular conta. Calma,
35:28 calma, Anderson. Vai ficar mais claro com outras coisas que eu vou mostrar. Acha uma boa opção usar plugin de Figma para importar as dobras direto pro Elementor? Então não, porque ainda até o momento eu não encontrei um plugin de Figma que faça com as boas práticas. Eu tô até querendo desenvolver um, mas vamos com calma. Então, ó, atenção agora no que eu tô falando. Atenção no que eu tô falando. Beleza? Ativei os pontos de quebra adicionais. Automaticamente vai aparecer sete pontos para mim? Não, não. Presta atenção agora. Se você só mudar aqui, automaticamente não vai aparecer. Você precisa fazer outra coisa que é o quê? Você precisa estar editando alguma página do Elementor, por exemplo, eu criei essa página aqui. Você vai vir aqui em cima em configurações do site. Você vai encontrar aqui, ó, o campo layout. Depois você vai fazer o quê aqui, ó? Pontos de interrupção ou break
36:14 points. Por padrão, ele vai vir só isso aqui, ó. Tá? Então, deixa, deixa eu tirar aqui o dispositivos, modo paisagem, tá ret, ó, tablet de paisagem, tela ampla, notebook, tá? Então, salvar. Ó, por padrão, ele vai até pedir para recarregar, né? Então, vou te mostrar como é que tava antes de de eu fazer essa configuração. Por padrão, ele vem só assim, OK? Quando você ativa o set break points, que que acontece? Ele vai liberar mais, né? Então, ó, deixa eu ativar aqui todos os sets para você ver, ó. Tablet paisagem, eh, tablet, paisagem, notebook, tela ampla, né? Então, tela ampla é o wide screen, né? Salvou. Que acontece? Quando recarregar, agora sim, ele vai aparecer os sete pontos de quebra. Beleza? Ótimo. Só preciso falar isso aqui, porque eu sei que tem gente que se confunde, pensa que é só habilitar aqui que automático vai e não vai. Você precisa fazer essa outra configuraçãozinha. Beleza, fechou? Entendemos. Agora que você já sabe que tem esses
37:00 sete breaks, agora o negócio começa a ficar legal. Por quê? Como eu falei, eu gosto de trabalhar com sete. Tem gente que trabalha com cinco, tem gente que trabalha com três. Eu gosto do set. Já respondendo uma dúvida frequente, Marcelo, se eu usar o set break, o site vai ficar mais pesado? Ele vai gerar um pouco mais de código interno, mas é extremamente irrelevante esse pouco mais de código que gera. É extremamente irrelevante. Então pode usar os sete pontos. Dá para você conseguir nota 100 com sete pontos, com três pontos, com cinco pontos, não importa. Ponto de quebra, eu quero dizer, tá? Eu recomendo que você trabalhe com sete. Você vai ter maior precisão no seu site, tá bom? Para editar ele. Outra coisa que eu tenho para falar agora sobre os sete pontos, tá? Até aqui, só me deem o feedback. Até aqui ficou alguma dúvida, vocês entenderam? Eu sei que para alguns que já sabia pode parecer muito básico, né?
37:46 Mas tem mais coisa. Até então só me deu um OK. Tudo entendido? Tudo certo? Alguma dúvida? Está ótimo. Beleza. Claro, como a neve. Então, tá bom. Beleza. Agora é o seguinte, ó. Agora é o seguinte. Esses sete breaks, eles são definidos pela largura da janela, não largura do dispositivo. A altura, você esquece um pouco a altura. O que vai definir aqui dentro do Elementor são a é a largura dos dispositivos. Então vamos lá, vamos entender como assim largura dos dispositivos. Vamos entrar no terceiro ponto. Terceiro ponto aqui, ó. Vamos entender as larguras. Nós
38:32 temos aqui dos sete breaks, nós temos sete diferentes larguras para cada um dos break points. E eu tenho um asterisco aqui que, como eu falei para vocês, o negócio tá atualizado. Eu vou deixar esse asterisco para depois. Vocês vão ficar curiosos porque vocês vão entender o porquê desse asterisco aqui. Primeiro, qual que é a largura do dispositivo wide? Tá? Então, o wide, para você saber qual que é, é esse camaradinha aqui, ó. OK? Isso aqui é o wide. Ele é telas muito amplas, televisores, OK? Monitores maiores. Então, isso aqui é nós chamamos de Wide. E o Wide tem um asterisco que tá relacionado com isso aqui. Depois você vai entender qual que é a largura. 2400 pixels para cima. Como que você sabe isso? Como que você sabe isso? Aqui no Elementor, né? Quando você vem aqui nas configurações que eu te mostrei agora a
39:17 pouco, ó, tô te passando os tamanhos padrão do Elementor, tá? Tem como você mudar se quiser, tem, mas eu não recomendo. Eu trabalho com o padrão do elemento. Não inventa moda. Não inventa moda. Certo? Ó, se eu vir aqui, ó, em layout, ó, você vai conseguir perceber ponto de quebra. Ó, aqui o elementor te fala quais são todos esses tamanhos, certo? Ultra wide ele tá 2400, só que presta atenção, presta atenção. 2400, tá legal? Como eu falei para você, largura. Então, quando um dispositivo tiver 2400 para cima, presta atenção, 2400 para cima, ele vai puxar essa versão do site que você fez aqui, tá legal? Ou seja, a versão wide. Agora vamos entender os outros tamanhos, ó. Desktop. Qual que é
40:03 o tamanho do desktop? Entre 1367 até 2939. Por que entre, Marcelo? Porque é o seguinte, ó. Existem desktops, computador de mesa, que a largura do computador é mais estreitinho. Existe outros que é mais largo, concorda? Então ele tem essa variação, esse intervalo de largura. O que nos importa que é só largura, não altura. Tendo esse intervalo de largura, você precisa, quando você vai fazer um site na versão desktop, tem que ter certeza que ele vai funcionar num desktop mais estreito e também num desktop mais largo, entendido? E aí, qual que é o mais estreito de acordo com o Elementor? De acordo com as medidas do Elementor, você pode personalizar e mudar se você quiser, mas não não faça isso. Ele
40:50 começa em um 367 ou 1367 pixels de largura até 2399 pixels de largura. Por que até 2399? Porque é um menos do que wide. Então, ó, presta atenção agora. Se for 2400, deixou de ser a versão desktop, ele vai passar a puxar a versão wide. Olha só, o Renão meu aqui 1920. Exatamente. Então o 1920 tá nesse meio, nesse meio termo. Ou seja, quando você acessar um site feito com Elementor, qual versão ele vai puxar no seu dispositivo? Ele vai puxar a versão desktop. Por quê? Porque ele vai entender que se enquadra aqui, certo? Beleza? Ó, pr você saber, ó. Tá? Ó, como que da onde que eu tirei esse 1367? Fui eu que inventei? Não, não fui eu que inventei. Tá aqui, ó. Ó, o notebook ele
41:36 é a partir de 1366. Quer dizer, um para cima. Ele já não é mais o notebook, ele já é o desktop, beleza? E vai até 2399. Quando passa para 2400, ele passa para seu wide. OK? Beleza? Entendido esse ponto. Agora o ponto três, notebook, né? O notebook ele é 1000 e 120 até um um 366, certo? Então, ó, se eu vir aqui no notebook, ó, e agora você consegue ver isso através da dessa opção aqui em cima. Marcelo, o meu Elementor não tem isso aqui. Meu Elementor não mostra a largura, tá? Que que você vai fazer? Você vai fazer o seguinte, tem uma extensão que eu desenvolvi, chama-se selon Grids. Selon Grids and Display, tá no no na Chrome Store, tá? Então você pode fazer o quê? Você vai entrar aqui e
42:21 você vai baixar essa extensão. Deixa eu ver se eu consigo abrir em guia anônima, se é o mesmo endereço. Ah, não, tem que ser um endereço completo, tá? Então, provavelmente esse endereço. Conttrl C. Deixa eu ver aqui, ó. É, eu vou inclusive deixar que tô em guia anônimo, por isso que não dá para instalar. Eu vou colocar no chat aqui para quem já não tem essa extensão, já vai fazer o quê? já vai instalar agora essa extensão aqui se você não tem no seu navegador, tá? Coloquei o link aqui no chat para quem não tem. Instalem essa extensão, certo? Uma coisa sobre essa extensão, ela funciona no Chrome. Eu não fiz, fala é tem outro ainda, tem outro. Vocês vão descobrir depois mais coisa, mas ó, eu fiz ela aqui pro Chrome, mas usuários relatam que no Opera funciona, os usuários relatam que no Vivald funciona, os usuários relatam que no Microsoft Ed funciona. Eu
43:06 particularmente não testei, eu fiz ela pro Chrome, mas funciona, certo? Viia perguntado na live anterior. Ah, tá, entendi. Então, beleza. Então, sempre já tenho instalado, tá? Se se quiser ajudar nós, dá uns cinco estrelinha e comenta lá que vai ajudar nós, tá? Sensção gratuita que eu desenvolvi para vocês, certo? Primeira coisa, tá? E inclusive quando você instalar essa extensão, ó, que que você vai ter, ó? Você vai abrir abrir ela assim, ó, no navegador, né? Aqui você vai perceber os sete pontos de quebra, tá? Inclusive essa extensão, é, eu tenho que fazer pro Firefox ainda, Marci. Vou ver se eu faço, tá? Agora é o seguinte, ó. Agora é o seguinte. Se você tiver essa extensão, vai ser até uma colinha para você. Por quê? Porque toda vez que você não lembrar quanto que é essas medidas aqui de quebra que eu tô te mostrando, você pode vir aqui na extensão, ó, e dar uma olhadinha, porque na extensão eu coloquei, ó, o wide
43:52 screen é 2400 para cima, ou desktop é entre 1367 até 20, entendeu? Então você consegue, e eu já vou mostrar outras coisas que essa extensão faz, tá? Mas já instala, já instala, tá? Aqui você consegue configurar todos esses sete pontos de quebra, beleza? OK. Vamos lá que eu vou vou continuar aqui, ó, mostrando os outros pontos de quebra rapidão, ó. Então, o notebook é entre 1201 até 136. Aí depois vem o tablet de paisagem que vai entre 100 e 1000 ou melhor 1025 até 1200 de largura. O dá um joinha lá para nós também. Dá um joinha, comenta lá, ajuda nós. Mas faz depois da live, depois. Presta atenção agora o tablet retrato entre 188, ou melhor entre 881 até 1024. O celular paisagem entre 768 até 880 e o celular retrato,
44:39 que é o celular de pé, é entre zero, né? Então zero eu coloco zero porque, né? É, é o ponto inicial até 768, mas eu coloquei errado aqui, é 767, tá? Beleza, Marcelo, onde que eu posso consultar isso aqui? Mais uma vez, se você instalar essa extensão no seu navegador aqui em cima, ele vai est tudo fácil para você ver aqui, ó. Ó, toda vez que você precisar consultar, você vê aqui o wide screen, ó, você vê o desktop. Isso aqui é o mesmo padrão do Elementor, tá? Ó, 1025, tá vendo, ó? 1025 até 1200 aqui, ó. Se você pegar outro, ó, 881, ó, aqui, ó, até o 1024. Esse aqui também, ó, 768. E assim por diante, tá? Tá tudo aqui fácil para você, certo? Beleza, entendemos esse ponto, ó. É o mesmo que tá aqui também, inclusive. Depois você pode ver, tá? Então, entenderam que o que vale para mim é só a largura do dispositivo, tá? E aí o que acontece? Quando quando você instala
45:24 essa extensão no seu navegador, quando você acessar o Google Chrome, você vai conseguir ver aqui em cima a largura, tá vendo, ó? Então, se eu diminuir a largura, ó, olha só, eu consigo ver quanto que tá a largura que eu tô desenvolvendo, ó, 1 367, tá? Então, aqui tá um 367. Aqui, ó. Se eu pegar esse aqui, ó, eu tô vendo em 1470, ó. Se eu diminuir aqui, ó, vai dar 1920 também, que é o mesmo o mesmo, o meu monitor, é o mesmo tamanho do carinha que comentou ali, do Renan, entendeu? Beleza. E ó, olha que interessante, o que muita gente não sabe. Muita gente não sabe o seguinte, eu vou pintar só aqui esse fundo da cor preta rapidinho, ó. Tem gente que no começo a gente confunde, tá? Você tá vendo que o Elementor ele tem essa alça aqui do lado quando você tá desenvolvendo uma parte, presta atenção agora. Atenção, você tá vendo que o Elementor tem essa alça aqui do lado. Por que
46:09 diabos ele tem essa alça? Justamente porque você consegue ver a variação, ó, dentro de um dispositivo. Se eu pego o notebook aqui, ó, se eu pego o notebook, lembra que eu falei que o notebook ele começa em 1201 até 136? Então, ó, se eu arrastar ele até o máximo, ó, qual que é o máximo? 136. OK? Se eu diminuo ele, qual que é o mínimo? 1 01. Então, tá vendo, ó? É exatamente o que tá aqui, certo? Alguma dúvida? Então, ó, que que você tem que fazer quando você tiver desenvolvendo um site? Você tem que se certificar que ele vai funcionar em um notebook mais largo assim e também no notebook mais estreito, tá? Tudo isso aqui, essa variação é notebook, beleza? Entendido? Até agora? Entendido. OK. Só que agora
46:54 eu quero fazer um adendo. Eu quero fazer um adendo e essa é uma das novidades dessa live. Então, atenção, atenção. Esses são os sete pontos de quebra padrão que o Elementor traz. Significa que não existem outros, mais ou menos. Existem alguns padrões que são que existem no mercado que são diferentes um pouco desses, certo? Significa que você tem que fazer para esses outros padrões. Se você quiser, tem como adaptar. Se você não quiser, não precisa para algumas coisas, tá? Mas eu vou trazer ele aqui porque é a primeira coisa que eu quero que você conheça já. Então atenção. Olha só. Tá vendo que eu tenho o asterisco aqui? Esse asterisco é referente ao celular retrato e referente à largura do wide. OK? Tá só nesses dois. Por quê? Porque o wide,
47:41 será que todo 2400 para cima de largura é sempre wide? Mais ou menos. Vamos entender, ó. Então, quando eu falo de wide, eu tenho dispositivo é que eu coloquei, na verdade, 2000. É. E é. Tá certo, ó. Então, ó, veja bem, veja bem, veja bem. Acima de 2.560, ele passa de wide para ultra wide. Então, a gente pode dizer que até aqui, ó, entre aspas, né, para cima, até 2560. Por quê? Por não, 2559. É um, é um atrás, né? Por quê? Por quê? Tá claro? Porque chegou em 2560 para cima, ele saiu do wide e ele passou a ser um ultra wide. Só que o Elementor ele não traz isso, pelo menos por enquanto. Se mais paraa frente vão fazer ou não, não sei.
48:27 É só para você saber por enquanto, tá? E aí, só que aí nós temos ainda outras categorias aqui, tá? Nós temos o wide, como eu falei para vocês, ó, que é atenção, eu preciso de atenção agora. Eu preciso de atenção. Não viaja na maionese. Não viaja. Ó, o wide ele vai de 2401 até 2400, na verdade, né? 2400 até 2559, certo? Esse é um monitor wide comum. Wide, eu até até coloquei é wide comum. É aqui que eu só troquei o nome aqui, ó. Ultra wide. Só só ultra wide, tá? Esse aqui é um wide comum. Qual que é o ultra wide que é o próximo ponto de quebra? 2560 até 3.439,
49:15 tá? 2000. Ó, uma resolução comum para monitores ultra wide é 2560 por 1080, tá? 1080 no caso seria a altura, certo? Eu coloquei isso aqui só para você saber mesmo que é uma resolução comum entre monitores ultra wide, beleza? Especialmente para modelos de entrada, tá? Mas pode variar, pode ser que tenha ultra wide com 3.000, entendeu? Então se ele tiver 3.000 de largura, é o quê? É ultra wide. OK? Até agora vocês estão entendendo, né? Tem um a mais, tem um a mais. Depois tem aquilo que a gente chama de WHD ultra wide. Então ele é um ultra wide, vamos dizer assim, um ultra widão, popularizando ultra widão. O que que é ultra widão? Ele vai de um depois desse, né? Então, ó, aqui, ó, é ultra wide, ele é 2560 até 3439.
50:02 Já o HQ HD ultra Wide, ele vai de 3440 até 519. Então é pixel pra caramba. É pixel para caramba, certo? Então, se você pesquisar depois modelo, você vai encontrar, tá? Resoluções comuns que existem para WQhd. Resoluções comuns. Esse aqui, ó, 3440, tá? Conhecida como HQHD Ultra Wide. Essa é a resolução mais popular para monitores ultra wide de alta qualidade. Então, é ultra wide de alta qualidade. E outra resolução comum para esse dispositivo também, ó, lembro que nos interessa, é a largura, tá? É essa resolução mais encontrada em alguns modelos mais caros, oferecendo uma experiência ainda mais ampla, tá certo? E aí nós temos um ultra mais blaster, tá? Então esse aqui não é não é, tá vendo, ó? W ele usa o Q de quality.
50:49 Agora ele mudou o quality para ultra, tá? Então esse aqui é um HD ou também é chamado de 5K ultra wide ou também é chamado de super ultra wide. Você já viu aquela televisão que você entra na sala e você olha o negócio assim, é uma parede. Então é isso aqui, certo? Super ultra wide. Qual que é o super ultra wide? É daqui para cima, ó. 5200. 5200 pixels em diante dali para dentro, ó. Então, uma resolução comum, só para você entender, uma resolução comum é essa aqui, ó. 5120 por 2160, conhecida como UHD. UH W até até me confundo. W HD ou 5K ultra wide, tá? Também é conhecido como super ultra wide, você também vai
51:35 ouvir falar assim. É a mais alta resolução ultra wide disponível comercialmente, sendo usada em monitores e ponta. Tá legal? É verdade. Daqui a pouco o pessoal pede, vou acessar o site no cinema, tem como deixar responsivo, mas é só para vocês saberem, tá? O Elementor atualmente ele tem o wide, que é só isso aqui. Então tudo isso aqui o Elementor considera como apenas o wide, certo? Eu só tô te falando por quê. Porque de repente vai que você tá fazendo um site aí, o o cara é um, sabe aqueles monitor largão assim? De repente seu cliente é um monitor largão, o cara acessa o e fala assim: "Putz, mas tá, o site tá quebrando". Mas também o monitor do cara parece um bambolê, bambolet bambolet wide. Aí o que que você faz, né? Nó é nós meros mortais não tem muito esse modelo, mas é bom que você saiba, é bom que você entenda, tá? Quando for assim, existem resoluções específicas, aí você consegue aplicar, dependendo da
52:21 circunstância, um código ali dentro para ajustar para esse dispositivo, tá beleza? Até aqui tudo OK, né? E agora então entendemos aqui esses outros quatro modelos de do Wide, né? Agora vamos falar sobre o celular retrato. Celular retrato é o seguinte, celular retrato, vamos lá. celular retrato. Basicamente, como eu mostrei para vocês aqui, deixa só fechar isso aqui porque ficou muito wide a coisa. Ó, o celular retrato, ó, ele vai até 767 pixel de largura, certo? Padrão do Elementor, OK? Vamos conferir, ó. Então, se eu vim aqui no Elementor, peguei o celular retrato, arrastei aqui, ele vai até 767, tá vendo? Beleza? Então, tudo isso aqui é o celular retrato. Em outras palavras, lembra o que que é retrato, né? Você lembra o que que é o retrato, né? É o bicho de pé. O bicho de pé. OK. Só que, só que
53:10 dependendo de como você estiver fazendo o seu layout, dependendo de qual medida você tá utilizando, às vezes ele dá muita discrepância. Por quê? Porque muitas vezes celular muito largo assim não é tão comum. Celular estreito talvez seja mais comum ou meio termo, tá? Então o que que eu fiz aqui? Eu separei, eu basicamente categorizei esse celular retrato em três mini em três etapas, por assim dizer. Nós temos o celular extrato, ou melhor, celular retrato estreito, médio e largo. Estreito, médio e largo, tá? O estreito, Marcelo, mas da onde que você vai tirar essa medida? Cara, não, na realidade, essa medida aqui eu peguei uma média de mercado porque tem muita variação do celular, tem muitos que são pequenininho, outro lar. Então, eu coloquei um valor médio
53:56 pra gente ter como base o celular retrato, certo? É um valor médio. Vamos lá. celular retrato, ó, estreito. Largura do viewports entre 320 pixels e 375, tá? Se você for ver aqui dentro do Elementor, quando você arrasta pro mínimo, ó, o mínimo dele é 320, tá vendo, ó? Quantos usam em 320, velho? Menos de 1% tem largura de 320, tá? Uma largura bem comum para isso aqui, que eu recomendo inclusive pra gente trabalhar, é 360, certo? Mas vamos dizer, vamos considerar que até 375 é o celular retrato estreito, tá? Então é mais ou menos até aqui, ó. É o estreito, tá? Inclusive seria até bom se o Elementor criasse esses outros tipos de celular, né? A gente ter ainda mais controle, quem sabe na atualização, né? Escuta nós, Elementor, faz o celular estreito aí para nós que vai ficar melhor.
54:42 Beleza? Mas só para você saber, um médio, largura que ele vai da faixa de 367 até 414, tá? E mais uma vez isso aqui são valores que eu coloquei em uma média de mercado que eu pesquisei, tá? Então, ó, 3 76, quer dizer o quê, ó? Vamos lá. 376. Então, mais ou menos daqui, ó, mais ou menos daqui em diante até 414, tá? É uma média, tá? E aí nós temos também o largo. O largo ele vai em média 415 até 480, tá? Então em média o largo ele vai até aqui, ó, mais ou menos até aqui, certo? Mas mas você aqui dentro do elementor vai até o 767, tá? Então você tem todo esse intervalo. Por que que eu tô te passando essas medidas aqui do celular retrato? Presta atenção. Por que que eu tô falando isso aqui para você? Porque se você quiser,
55:29 se você quiser, dependendo do layout que você estiver fazendo, você consegue com o CSS, eu vou mostrar depois para vocês como fazer uma coisa específica para celular, estreito, médio ou largo, OK? Aí, ó, até até aí vocês entenderam, né? Mais uma coisinha. Ai, Marcelo, do céu, mas eu fiz o seu fiz o meu dispositivo, fiz o meu layout lá no Elementor para celular retrato, fiz ele, rapaz. Mas sabe o que acontece? O cliente ele acessa lá do celular dele e tá carregando a versão de tablet. Meu Deus do céu, não sei mais o que que eu faço. Tô perdendo sono. Por que que tá acessando com tablet? sendo que o dispositivo dele às vezes
56:14 tem uma largura menor. Porque é o seguinte, meu amigo, é o seguinte. O viport, lembra que eu falei para você? Presta atenção em mim? Preste atenção em mim. Lembra que eu falei para você que o viport ele é com relação à largura da janela? Pixel não muda, mas o viportte sim. Só que a resolução eh, ó, uma coisa é a largura do dispositivo, outra coisa é resolução do dispositivo. Uma coisa é largura do dispositivo, outra coisa é resolução. Então, se o celular do seu cliente está configurado com uma resolução maior do que ele, ele vai acessar uma outra versão. Só que
57:00 assim, se você fizer, se você fizer todas as set bonitinhos, isso aí não pode, não, não será um grande problema, tá? Ah, eu não entendi esse negócio de resolução, me explica melhor. Vamos explicar, então, ó, vem aqui comigo, ó. Veja bem, ó. Aqui o meu dispositivo, ó, o meu o meu o meu esse monitor que eu tô é 1920 por 1080, certo? Se eu pegar aqui, ó, e der uma olhada aqui, ó, nos ajustes de tela do bicho, eu vou, ó, tá vendo, ó? O padrão é esse aqui, ó. Tá vendo meu padrão? 1900. Só que ai Marcelo, vou usar numa não, de repente o seu cliente, né? Agora vou imitar vou imitar o seu cliente, o seu cliente acessando, ai comprei um monitor novo, que que eu vou fazer? Vamos deixar esse monitor novo super grandão. Aí o cara muda a resolução padrão e muda, coloca essa aqui, ó. Aí, olha como é que fica o negócio. Tá vendo? Ficou tudo minúsculo.
57:46 Quando eu, Presta atenção, se o meu dispositivo tá configurado com essa largura, se o meu dispositivo tá configurado com essa largura e eu acesso o site, o que que vai acontecer? Ele vai baixar a versão eh de desktop? Não, ele vai acessar qual versão? A versão wide do caramba, entendeu? E aí, ó, eu vou colocar o padrão aqui porque também tá horrível de enxergar. Beleza, coloquei. Você entendeu? Então, o seu cliente pode ser que pode ser que o dispositivo dele esteja com uma resolução configurada diferente, entendeu? Pode ser que o dispositivo do seu cliente esteja. Do mesmo jeito que eu fiz isso aqui no meu computador, dá para fazer isso no celular, tá? Então o se você vai comprar um celular tá escrito lá resolução tal tal tal tal tal largura da tela, tantos de de de de largura, medida fixa, só que a resolução
58:33 é outra, entendeu? Isso vai afetar o quê? Uma coisa que chama densidade de pixels, né? Você vocês vocês estão entendendo? Deu para entender até aqui? Deu para entender? Ô Jorge, você chegou um pouquinho atrasado, mas acompanha daqui até o final, depois assiste o comecinho de novo. Até aqui vocês conseguiram entender. Ai, cara, esqueci de gravar o story para falar sobre a live, né? Olha só que burro. Mas tá bom, não tem problema. Vamos gravar uma história aqui rapidão no meio da live. Enquanto isso, me digam no chat, deu para entender até aqui? Deu para entender? Deixa eu colocar aqui rapidinho. Enquanto isso, eu vou gravar aqui rapidinho. Ó, turma, a live super importante começou e o cabeça de pepino aqui esqueceu de gravar story, então tô gravando agora. Depois você assiste desde o começo, mas de qualquer jeito vem aqui com nós. Chega aí com nós. Beleza. Então deixa eu colocar aqui. Tá dando entender? Exato. Consegui. Sim. De
59:19 buenas. Sim. OK, entendeu? Ó, Joemerson, ó. OK, entendeu? Então, vocês estão entend ó lá, basicamente irá abrir de acordo com a configuração. Exatamente. Exatamente. A maioria, né? Então, a maioria das pessoas vai deixar a resolução padrão, certo? Mas pode ser que o seu cliente, cabecinha de pepino, pode ser que ele faça diferente, tá? Vocês deram para entender? Entendido. Tá legal? Beleza. Eu acho que o Jorge, o Jorge já deve entender isso aqui, mas depois você assiste depois, desde o começo, tá Jorge? Ó, assistir live, tá? Deixa eu só colocar aqui o stor que eu esqueci, tá legal? OK. Assistir live, mas tem muito mais coisa do que isso, gente. Tem muito mais coisa, tá? Tem gente que já sabia, mas tem muito mais coisa do que isso.
1:00:06 OK, pronto, publiquei a história. Agora sim, ó. Então, legal. Entendemos entendemos esses outros pontos que eu sugiro. Inclusive, se o elementor fizer, faz aí para ajudar nós. Elemento, ajuda nós. Ajuda nós. OK? Beleza. Entendemos as larguras padrões. Agora é o seguinte, ponto quatro, conceitos de alinhamento. Eu quero que você entenda conceitos de alinhamento. O que que são conceitos de alinhamento? Seguinte, ó. Nós temos algumas coisas que nós chamamos aqui, ó, em português. Eu coloquei em português e em inglês para você entender, tá? Eh, é só isso aqui. Eu não coloquei em inglês, mas é, vamos colocar, vai. Boxed. Tá, então largura boxed. É, mas como é que largura? Widit. Boxed wid, tá? É, mas eu nunca ouvi falar boxed usa largura boxed mesmo. Ah, largura boxed. Largura boxed. Agora esse aqui sim. É aqui a gente
1:00:52 chama normalmente de full wid ou widit, né? Wid significa largura em inglês. English, certo? Tá bom. Agora é o seguinte, só para você saber o que que é cada uma dessas coisas. É simples isso aqui, tá? Quando você tá aqui dentro do Elementor e seja Elementor, é o conceito, tá? Eu vou habilitar aqui com o plugin, ó, os grids, tá? Só para você saber, só para você saber aqui, ó. Você tá vendo? É isso aqui, ó, essa trilha aqui, ó. Isso aqui a gente chama de coluna. Coluna, tá? Então isso aqui nós chamamos de coluna. Esse um quadradinho, só esse, esse filete aqui, ó. Certo? Quando a gente tá trabalhando com desenvolvimento de sites, a gente trabalha com colunas verticais desse jeitinho, certo? Existe outro tipo de de de disposições existe, mas quando a
1:01:37 gente fala de site mais comum esse aqui, tá? Beleza? Próximo ponto, ó. Eh, linhas guia. O que que são linhas guia ou grids aqui, né? Tá vendo? É, é esse negócio como um todo. Tá vendo tudo isso aqui, ó? Isso aqui são grids, né? Se você pegar a tradução de grides, é grade, ok? E na extensão que eu falei para vocês, que eu desenvolvi, que eu recomendo que vocês instalem, você consegue colocar
…
