ok e aí todos bem-vindos de volta uh episódio número três de aprender ao vivo esses episódios têm sido divertidos, temos sido mergulhando fundo nas ervas daninhas em uh aprender sobre os atributos que mergulhamos como o primeiro nome do cliente outro dia hoje vamos aprender sobre isso novo uh filtrar selecionar formulário selecionar elemento que joe caiu no twitter na semana passada que foi super empolgante e também temos um um outro sistema de filtro para construir então joe o que está acontecendo hoje o que está acontecendo todo o mundo e aí, tudo bem, estou pronto para isso temos um pouco de uma configuração diferente com uma construção de comunidade, temos isso selecione o novo formulário, selecione que estamos falando sobre e sim este é uh o aprender ao vivo é muito empolgante, eu também estou tendo um muito bom tempo fazendo isso sim e é divertido ver o coisa tomando forma eu penso muito uh como se estivéssemos fazendo esta transmissão ao vivo por 15 de janeiro será um ano hum eu acho temos 46 episódios de crescimento stream, mas fizemos 76 ao vivo no total córregos ao longo do ano passado aqui uh e eu assim, aprender coisas ao vivo tanto quanto eu gostei de qualquer outra coisa porque estamos indo fundo você sabe e é como muitas das coisas sobre as quais falamos são muito teórico, apresentamos o produtos que você conhece, mas que a construção prática é tão útil para pessoas e eu acho que você sabe que somos vai ver isso então se você estiver lá fora assistindo e você gostaria de nos ver construir algo se houver algo que que fizemos, construímos ou lançamos no no último ano ou dois, se houver um produto que você é como eu realmente gostaria de ver isso ou um mergulho profundo sobre isso é onde você pode deixe-nos saber se você for para finnsuite.com você pode compartilhar essas ideias com o que você gostaria que nos concentrássemos mas gostaríamos de fazer esses episódios, aprenda em episódios ao vivo com base em coisas você quer aprender, então fique à vontade para compartilhar isso e também compartilhar um pensamento no comentários dizem o que há nos comentários porque vamos seguir em frente e começar a rasgar alguns desses vamos ver quem é nos comentários aqui bem rápido deixe-me ver se eu posso ir ao oop você sabe o que eu preciso ir para esta vista, na verdade tudo bem, vamos fazer isso bem rápido uh vamos ver quem está empolgado, oh, quem está amplificado esse cara Eric daly lá vamos nós então o que eric peter dimitrov na casa do chegou a hora de olá a todos com certeza kane está andando conosco joe está dizendo uh tipo de visão geral o que estamos dando lá é Michael Rose na véspera de casa kaiser, o que se passa véspera daniel está aqui daniel uh grite para Daniel, vamos destacar isso no show de crescimento na próxima semana, mas Daniel apenas desembarcou como um site de 50 000 dólares plus hum e ele nos deu um grito para algumas das coisas de crescimento que ele tem feito nos pendurando conosco no episódio de crescimento e amamos ver essas histórias de a comunidade e então sim, vamos, vamos compartilhamos um pouco mais sobre isso quando podemos ver uh michael collins na casa gabe perez e aí, babis está aqui corey richard o que está acontecendo vamos uh joe, o que temos hoje para falar sobre aquele filtro selecione exatamente como você tinha este tweet na semana passada e hum você sabe que as coisas ficaram um pouco selvagens e então lançamos uma pequena conversa sobre o produto Sobre alguma coisa sim as coisas ficaram um pouco selvagens eu eu tive meu mais popular e eu diria mais bem-sucedido tweet de todos os tempos ou uma série de tweets de todos os tempos Eu sugeri pela primeira vez que íamos fazer algo com formulário seleciona como você sabe seleciona formulário são realmente difíceis de estilizar e eu sugeri ser capaz de estilizá-los tem muito amar então eu disse tudo bem vamos uh vamos ver se conseguirmos mais de 100 curtidas e se conseguirmos mais de 100 curtidas, então podemos vá e libere isso e obteve mais de 100 curtidas, eu acho cerca de uma hora hora e meia então imediatamente estávamos nos preparando para ir e lançar isso e nós seguimos em frente e lançado seleciona formulário personalizado e este é a capacidade de usar um menu suspenso de fluxo da web componente como uma forma nativa selecione assim isso dá a você muita liberdade de estilo dá a você muito design liberdade e as pessoas estão adorando isso funciona muito bem funciona com cms isso trabalha com estática é super poderoso, então vamos sobre isso hoje estamos examinando um completo construir disso sim hum e eu sim aqui está o o o url aqui hum você pode ir para atributos e uh está lá no diretório uh você pode encontrar isso então sim é legal hum amo ver o twitter engajamento da comunidade eu acho vamos começar a fazer coisas assim em movimento para a frente para diferentes tipos de uh lançamentos e outras coisas, acho que temos um um pequeno vislumbre, potencialmente, aparecer como um presente de natal, então vamos conversar vocês sobre um pouco disso também, então onde nós queremos começar joe você quer apenas despeje direto neste formulário, selecione coisa ou sim vamos direto para o formulário de seleção absolutamente bom OK então eu estou aqui na minha tela e vamos abrir os documentos primeiro antes de entrarmos nisso, vamos abra a documentação vamos fazer certeza de que entendemos o que estamos fazendo façam isso vai ser seleção de formulário personalizado agora a seleção de formulário personalizado vai para apenas exija um atributo suspenso vamos construir esta queda de fluxo da web vamos aninhar um seleto elemento nele e também vamos olhar para estes atributos extras, então vamos através de tudo isso, incluindo os estados então vamos direto ao assunto, este é um grande passo a passo primeiro eu vou adicionar um menu suspenso de fluxo da web e componentes este é a componente suspenso agora observe que isso não é parte dos componentes do formulário é uma queda para baixo está fora da forma e eu não vou dar muitos estilos aqui vamos apenas ver o que temos dentro disso, vou manter apenas um drop down link e vou chamar este menu suspenso link uh template pode ser chamado do que você quiser, tem nenhuma diferença qual é o nome e dentro esta queda dentro de algum lugar dentro a lista suspensa pode estar dentro da lista pode estar dentro do botão de alternância não importa, precisamos ter um seleto elemento então agora vou adicionar um formulário aqui e você sabe o que vou adicionar um formulário realmente para esta camada externa então vamos adicionar o bloco de formulário razão pela qual estamos adicionando o bloco de formulário é porque no webflow é necessário para qualquer elementos do formulário a serem embalados dentro de um bloco de formulário, mas eu só vou ir e remova todo este conteúdo aqui então vamos arrastar este menu suspenso em cheio Oh [Música] ok eu não uh eu não vi isso em um tempo, na verdade, e não salvou o progresso hein não salvou o progresso, então vamos tente de novo talvez um pouco de um fluxo diferente eu descobrir que isso às vezes vai consertar isso eu vou arrastar este drop down dentro deste formulário agora exclua os elementos e agora vamos entrar em ação então agora, uma vez que isso está embrulhado em um formulário i agora pode ir e adicionar elementos de formulário nele precisamos do elemento select lá e é por isso que fizemos isso neste lista suspensa que vou agora os componentes do formulário e eu irei adicionar uma seleção esta seleção vamos chamá-lo urimar vamos fazer colleen vamos fazer marcel que está nos bastidores esperando para uma construção e eu irei e me adicionarei aqui temos nomes de pessoas, ótimo e nós selecionamos um então, se apenas abrirmos isso, não seremos publicado não temos nenhum atributo temos este elemento select aqui e isso é muito difícil de estilizar com algum css com algum javascript nós pode fazer isso parecer um pouco melhor mas realmente seleciona são muito muito inflexível quando nós vão estilizá-los então agora vou conectar o select elemento com esta lista suspensa e é só vai estar com um atributo e aquele atributo aqui está suspenso então eu irei e copiarei este elemento deixe-me ir para o primeiro passo ii frequentemente esquece isso na construção ao vivo passo um copie isto no projeto, então vamos fazer isso primeiro na cabeça aqui estamos na cabeça agora seremos capazes de reconhecer estes então vamos adicionar isso ao menu suspenso elemento e podemos ver no visual aqui está nesta lista suspensa externa elemento, então eu farei exatamente o mesmo coisa aqui Eu vou subir uma camada até a lista suspensa vamos ver isso por dentro navegador aqui e irei adicionar um atributo personalizado e isso vai ser o derrubar baixa e como vemos nos documentos, já feito esta etapa, mas temos um aninhado selecione não há atributos necessários em isso nós só precisamos selecionar algum lugar aninhado dentro daqui e agora com isso vamos agora Vejo a drop down que tem o mesmo opções como nosso seleto vamos publicar isso e vamos ver isso ao vivo e você deve saber disso quando estamos brincando com o drop down quando estamos selecionando coisas do cair para baixo, vai realmente ser selecionando coisas do select para que você pode realmente usar isso em um formulário e o selecione irá enviar, mas o menu suspenso será a interface de usuário front-end então vamos abrir isso e ver como funciona eu vejo aquele que já é um pedaço diferente de texto que estamos no caminho certo e lá vamos nós temos rymar temos colleen temos marcel e nós temos joe então se eu fosse selecionar reimar nós temos reimar selecionado e olhe para este select podemos esconder isso e vamos esconder isso mas eu quero mostrar a você para que você possa ver que está realmente sendo selecionado então, como usuário, posso usar este menu suspenso e então nós, como desenvolvedores da web, podemos envie isso por meio do formulário ou use-o para filtro de cms ou use-o para cms select ou usá-lo com cms sort ele se integra com tudo então lá vamos nós temos acabei de criar um suspenso populado dinamicamente excelente agora vamos torná-lo um usuário muito bom experiência, eu vou esconder isso nós não precisamos disso visível e eu irei e adicionarei alguns destes realmente recursos legais nós temos etiqueta aqui então talvez tenhamos dois pedaços de texto em a a chave aqui certa nós temos isso exemplo de país deixe-me ir fazer a mesma coisa com isto vamos adicionar nomes vamos adicionar um pouco de cor a isso eu sinto que tenho que dar um nome a essas aulas ou serei evitado pelo comunidade isso mesmo você deve apenas chamá-lo de drop down 58 apenas por diversão [Risada] legais OK vamos uh vamos fazer isso do OK nós temos um pouco de fundo cor sim e então o que você me leva através do que está acontecendo aqui você só solte o bloco de texto aqui dentro na lista suspensa Sim, estou mostrando como você pode ter vários pedaços de texto dentro desta queda botão para baixo e o texto correto será atualizado então talvez nós queiramos o objetivo disso é criar uma componente visual, então talvez queiramos muito componente visual, assim como temos aqui certo, não queremos dizer selecione um país que queremos país com selecione porque talvez tenhamos seis desses ou dez desses e não queremos todos apenas um para dizer selecione um país selecione um nome selecione uma idade para que possamos tenha o título aqui e o correto as informações serão atualizadas aqui então esta visualização está mostrando o opção de texto de rótulo então eu vou copiar este é isso está dizendo ei, isso vai ser o texto dinâmico que está sendo atualizado aqui isso é exatamente o que estamos dizendo atributos e vamos dar a isso um rótulo aqui e agora este texto suspenso será o um que atualiza, então vamos dar uma rápida verifique isso colocamos o select como oculto, não deveríamos estar vendo isso o o seleto elemento aqui, está escondido e agora temos esse novo texto aqui isso vai servir como uh nosso título para esta lista suspensa e agora vamos verificar isso veremos está funcionando, nós temos nossos nomes e temos a atualização de texto correta assim o rótulo está dizendo que isso é dinâmico, isso é o que queremos com o rótulo deste botão de alternância ser estar excelente agora vamos continuar passando por este a lista de opções aqui, então temos um total compreensão total opção redefinir este é ótimo este vai opcionalmente criar um novo pedaço de uma nova opção que diz reiniciar ou o que você quiser em vez de selecionar uma opção eu sempre pensei que era muito estranho isso quando eu for aqui eu tenho a capacidade de dizer selecione 1 de uma perspectiva ux, alguém que não conhece a web, isso parece estranho Eu vamos ampliar aqui para que possamos ver o que indo certo este não é selecione um este é essencialmente redefinindo a opção que é configurando-o para o valor zero assim vamos criar um diferente mensagem para o usuário aqui vamos agora vá na documentação aqui; vamos aplicar este atributo para outro bloco de link em aqui redefina a seleção e será uma opção redefinida e se você perdeu o que está acontecendo se você está se juntando a nós aqui e você é não estou familiarizado com a aplicação de customização atributos que eu sugiro que você vá de volta aos documentos sobre as coisas de atributos e reler o mergulho profundo que fizemos no atributos e como tudo isso funciona se você está assistindo isso no futuro e talvez você esteja apenas interessado nisso elemento, mas você não tem certeza do que é acontecendo com alguns desses atributos ou quais atributos personalizados voltam para a transmissão ao vivo que fizemos outro dia os atributos mergulham profundamente onde nós apenas explique tudo sobre como os atributos trabalho e o que está acontecendo por trás do cenas aqui opção de reset lá vamos nós e eu acredito que é isso foi redefinida a opção sim ok então agora quando algo é selecionado em vez de vendo o selecionado, vamos ver nosso redefinir o texto de seleção, vamos colocar um publique e veja aquele trabalho e eu vou adivinhar que está publicado aqui vamos nós redefinir seleções então agora eu posso abrir isso e escolha um e reinicie a seleção, mas talvez eu não quero ver isso imediatamente quando não há nada selecionado eu não quero ver as seleções de redefinição então a opção de reset funciona muito bem com nossa etapa final aqui nosso final atributo ou nossa sim nossa opção ocultar inicial opção se não houver nada selecionado, queremos esconda a inicial este também é um ux muito bom certo se eu não tiver nada selecionado eu não quero redefinir eu não quero selecionar um como uma opção, eu só quero ver o valores reais que podem ser selecionados para vou adicionar isso como uma opção ao lista suspensa observe como todo o resto era um elemento esta é uma opção ocultar inicial verdadeiro então eu irei e aplicarei isso na queda elemento para baixo lá vamos nós e vamos dar isso é verdade e salve-o então agora eu acho que este é o melhor ux onde temos este botão de reset, temos a altura inicial e agora o usuário é vendo apenas o que queremos que o usuário selecionar e vamos ver esse trabalho lá vamos nós, então vemos apenas os nomes direito, se eu clicar fora, eu não preciso selecione qualquer coisa, mas eu não linha ferroviária ryamar colleen e eu podemos redefinir minhas seleções então isso é na minha opinião um processo muito perfeito e eu diria até uma experiência melhor do que a seleção elemento em si porque temos esses recursos realmente interessantes de redefinir o seleções e não mostrando selecione uma opção aqui e antes de fecharmos isso, há mais uma peça que eu quero revisar isso vai fazer tudo acessível e isso vai permitem que você aplique estados primeiro trabalha com interações de fluxo da web se você deseja aplicar interações de fluxo da web funciona totalmente no elemento suspenso mas vamos aplicar o ativo Estado e a estado focado, então isso vai usar estado atual do webflow e do webflow estado focado, então vamos fazer isso eu vou fazer isso temporariamente atual sempre que você quiser estilizar o fluxo da web estado atual você tem que definir o link suspenso ou qualquer classe que você segmentação para a página atual que você vê como tem foi para o estado natural atual e então obtemos isso muito bom seleção aqui depois de darmos uma aula vamos baixar o link e agora temos atual aqui temos o estado atual e eu posso vá e estilize este estado atual, então vamos apenas dê um pouco de diferente fundo para que possamos ver o que está acontecendo aqui sim vamos fazer isso e vamos dar um branco bem aqui excelente eu também vou selecionar o foco diga então se formos e dissermos que estou focado realmente indo para primeiro remova a corrente, então agora não vemos mais atual quando clicamos fora abra esta lista suspensa não mais atual e agora podemos editar o foco Estado e o estado de foco eu posso ir apenas para fins de exemplo, eu irei vá e coloque uma borda aqui excelente tentamos imp, tentamos nos integrar com a funcionalidade nativa do webflow tanto possível e é exatamente por isso que nós faça isso que não queremos criar atributos desnecessários ou desnecessários classes para adicionar à sua construção nós só queremos que você trabalhe dentro do webflow e isso é exatamente o que este atual e o estado de foco é então se fossemos publicar este vamos ver ambos em açao e o estado de foco eu acredito que temos que conseguir com o teclado lá vamos nós e podemos ver você pode veja como estou selecionando isto e com teclado você esta é a razão de você fazer isso estado de foco e você pode ver o ativo funcionando bem e essa é uma visão geral completa que acabamos de ver através de cada opção cada atributo que tem a ver com isso selecionar então, como você pode ver, muito poderoso, muito flexível, nós não projetamos isso, mas deixamos sua mente enlouquece com designs aqui com layouts é tudo possível se você puder projetá-lo com o menu suspenso, ele pode funcionar para seleção de formulário personalizado sim sim eu ia dizer que é um ponto importante do você sabe como pessoas assistindo isso ficam tipo oh sim mas é feio sabe mas isso não importa direito como pensar sobre agora a partir daqui você pode fazer o que quiser com isso porque agora é o drop down nativo e fluxo da web que, mais uma vez, você pode estilizar qualquer do jeito que você quer então sim supe super legal pequeno hack lá para qualquer um que está usando selects no webflow e sempre foi frustrado com a forma como esses formulários são projetado ou não sendo capaz de controlar a estética desse elemento em seu formas uh meio que uma merda quando você constrói este lindo formulário personalizado e então você tem esse tipo de desajeitado que você sabe selecionar elemento lá que você não pode fazer corresponder ao resto disso, então este é definitivamente um valor agregado ai uh ok hum eu não estou vendo muitas perguntas ou qualquer coisa sobre isso se todos vocês têm perguntas no comentários vá em frente e deixe aqueles i pense neste ponto, marcel, você está pronto? no fundo, poderíamos provavelmente pegue uh marcel pronto para trazer vamos ver quem está dizendo isso é doce Caleb dizendo que isso é doce e isso é maldito doce, tenho que acertar Caleb [Risada] uh e então vamos prosseguir e trazer marcel aqui e aí marcel Ei pessoal o que está acontecendo hey marcel como vai indo bom estar aqui é bom fazer parte do doce time do céu por alguns minutos sim bom marcel é um membro de longa data nossa comunidade ele é um veterano de comp clones Uh constantemente vindo para eventos e todos isso sim, marcel, é muito bom você está aqui é uma honra eu tenho que dizer que é super legal poder conhecer vcs sim, obrigado, nós sempre amamos nos conectar com o pessoal da comunidade e eu acho que um sim, eu amo a ideia de trazer pessoas fazendo esse tipo de coisas interativas, então, um no no em os comentários na multidão se você assistindo isso uh como dissemos sobre recomendações antes se você gosta de um projeto ou se você quiser entrar e mostrar algo fora ou hum, nós até conversamos sobre experimentar com programas de chamada ao vivo onde nós apenas temos um tópico e então deixamos as pessoas ligam e entram para um casal minutos compartilham seus pensamentos e você sabe que riffs sobre esse assunto por um minuto ou dois e então nós saltamos ou nós responda a uma pergunta, então deixe-nos saber qualquer coisa que você queira ver à medida que avançamos através disso uh hoje nós vamos saltar para um sistema de filtro que marcel tem em um site aqui ele enviou isso para joe e como fizemos o último par semanas que joe vai entrar e meio que configurar e olhar para esses filtros aqui para vou deixar isso em suas mãos e agora joe legal ok então vamos ver o que somos construir primeiro e depois entraremos em construindo estamos filtrando esta lista esta é uma lista dinâmica de cms que tem alguns CSS customizado muito legal para criar isso layout mas é uma lista de cms e precisamos filtrar por três multirreferência listas vamos filtrar por andar espaço por peso e por opções de financiamento todos os três são multi-referência então, como conhecemos como desenvolvedores de fluxo da web isso representa um grande problema para nós, podemos só tem uma coleção aninhada por lista e podemos nos deparar com este cinco item no máximo, na verdade, cada um desses nós apenas tenho cinco macs, mas se digamos um cliente quer adicionar um sexto, poderíamos ter um problema sério, então vamos ser cms aninhamento todos os três destes nesta lista e então vá e crie nossos filtros então, antes de irmos e fazermos isso, vamos dar uma olhada nos docs vamos ver o que estamos construção estamos no cms nest docs e aqui vamos fazer isso vamos Aplique um atributo para a lista que vamos aplique um atributo ao aninhado coleção a coleção aninhada na parte inferior de a página e na página do modelo e faremos isso três vezes para cada lista de coleção e então, uma vez que temos isso lá, uma vez somos visíveis com aqueles que vamos vá e crie nosso filtro cms então vamos começar com o ninho e vamos pegar neste prédio eu sou um pouco de rolagem horizontal, mas não deveria importar para isso OK então, como sabemos, lista de cms antes de pularmos vamos adicionar os scripts vamos apenas adicionar o script aninhado e o filtrar script imediatamente vou fazer isso com a extensão fin suite, então vou entrar componentes em atributos temos cms dedo duro e para quem está interessado lá que as extensões fensweed.com apenas colocam isso na uh no show lá você não está familiarizado com isso, você sabe é uma ferramenta super útil para qualquer um desses material de construção e fluxo de trabalho estamos trabalhando em atributos para não fazendo você ir para as docas Acho que sempre teremos as docas docas sempre serão muito valiosas, mas nós queremos chegar a um ponto onde você não precisa ir até eles e neste passo a passo, vou tentar não ir nas docas então temos ambos os nossos scripts lá vamos apenas confirmar vai mostrar às pessoas que são novas no sistema de atributos que temos de fato adicionou estes à página excelente agora vamos começar a adicionar nosso ninho atributos a primeira coisa que vamos fazer é vá e adicione um atributo aqui na lista então vou chamar isso de fs ninho cms elemento cms elemento aninhado esta será a lista excelente agora dentro da lista a primeira coisa que tenho para confirmar é que temos um link para a página de cada item e lá vamos nós, eu vejo isso bem aqui chamada de layout para a página do modelo atual, verifique isso etapa é necessária, ela já está lá no projeto agora vou adicionar um div em branco para cada uma de nossas listas aninhadas, vamos espaço no chão do ninho que vamos aninhar peso e vamos aninhar financiamento opções, então eu preciso ter elementos aqui que aceitarão isso seja o lugar onde anexamos isso em formação então vou adicionar um bloco div aqui e vamos chamar isso de fs ninho cms esta vai ser uma coleção vou copiar isso porque seremos usando muito e agora eu tenho que criar um identificador nome então temos o peso do espaço físico e opções de financiamento, precisamos de todos os três Essa este será o espaço no chão agora vou duplicar isso duplicado duplicado este vai ser peso e este vai ser financiamento então, apenas para confirmar, olhe para isso, temos financiamento temos peso e nós temos espaço espaço no chão excelente OK agora precisamos criar listas dinâmicas no final desta página pode ser em qualquer lugar da página que eu gosto de colocá-lo na parte inferior e vamos adicionar uma lista de cada um desses itens espaço físico peso e opções de financiamento então vamos fazer isso exatamente vou fechar tudo aqui e eu vou adicionar meu primeiro Lista e vou apenas seguir em frente e duplicar isto eu tenho três deles agora na página lista listas listas que desejo aninhar todas três dessas listas de coleção dentro do item este será para o nosso espaço qual é o nosso filtro de metros quadrados este vai ser para o nosso peso filtro de peso e esta é a nossa opção de financiamento legais OK agora cada um desses precisa de um link de texto e vou copiar este link de texto em cada um destes então agora cada uma dessas listas tem um link de texto vamos lá e appen isso vamos lá e vincule-os aos campos corretos nós temos o nome nós temos a página atual e o nome e então aqui embaixo temos a página atual e o nome lá vamos nós, então temos 100 metros quadrados até aqui nós temos nosso peso e nós temos isso e percebemos como isso corresponde exatamente ao que está aqui nós apenas fizemos exatamente a mesma coisa aqui nós temos a nossa lista de espaços, temos a nossa lista de espera e temos nosso financiamento lista de opções qualquer pergunta da multidão eu deveria faça uma parada e responda não não há perguntas que eu meio que queria para esclarecer uma coisa novamente se você não assisti como esses atributos trabalho ou se você não usou um dos cms uh como recursos de biblioteca no passado onde essencialmente você tem que injetar isso conteúdo na página e é isso que joe acabou de fazer é colocar essas listas lá e então o próximo passo é ele vou mostrar a você como isso atrai fazem essas coisas do ninho e então algumas pessoas você sabe se você está assistindo e você não vi esse processo antes de você tipo sim, mas eu não quero a lista em o final da página você sabe que eu quero eles aqui e então como apenas parte de o processo que você conhece na próxima etapa nós explicar exatamente como isso se conecta e então, assim como fizemos com o filtro selecione, vamos mostrar como você pode remover isso da página e então o final produto é exatamente o que você precisa e então joga bem com os filtros exatamente ok então vamos continuar com isso precisamos aplicar um atributo para vincular essas listas de coleção a essas listas vazias, então precisamos ter o mesmo atributo exato que vemos aqui em cada uma dessas listas o chão o espaço precisa do mesmo identificador peso precisa do mesmo identificador e o financiamento precisa do mesmo identificador, então vamos fazer isso primeiro temos o espaço no chão, vamos faça isso, estou no elemento da lista e eu posso ir coleção e este é o espaço, joe, posso perguntar a um questão aqui nesta lista de coleção vejo que você não é nomear qualquer uma dessas listas importa se as pessoas nomearem essas listas, isso importa se eles lhes dão aulas, eles deveriam apenas listas vazias como o que o que é justo nisso Eu diria que não há aulas absolutamente nenhuma razão para classificá-los não vamos esconder tudo primeiro tudo vai ser visível mas no final vamos esconder isso e você verá que realmente não importa o que parece ou o que isso parece um Oh Na verdade, espere, eu estou deixe-me explicar isso isso não precisa de uma aula este bloco div não precisa de uma classe isso não precisa de uma aula, mas nós estamos provavelmente aplicarei uma classe se nós quer isso visível no exemplo de marcel, este conteúdo não é visível na lista então não nos importamos com o que parece ser vamos ficar escondidos vamos nos esconder isto mas se você está mostrando este conteúdo, se isso vai ser parte do visível página, então precisamos de aulas porque preciso estilizar isso entendi, então estou feliz você mencionou isso, vamos realmente olhar em um exemplo disso antes de irmos e esconder este conteúdo tão bem teoricamente o que eu estava tentando fazer é se eu fizesse estilize algo aqui quando chegar injetado na lista aninhada mantenha esse estilo ou você sabe como eu acho que só estou me perguntando se alguém está vendo isso, você sabe como sim conseguir para algumas daquelas questões lá em torno de como isso parece certo claro está bem, vamos olhar para isso vamos copiar isso nós temos nosso andar espaço lá, vamos agora adicionar nosso peso então lembre-se de que isso é o mesmo atributo que aplicamos àquele espaço em branco div dentro do item e isso vai seja nosso peso e agora mais um nós temos nossas opções de financiamento vamos entrar aqui por por dançando por enquanto não vamos olhar para nenhum estilo na próxima etapa ok então terminamos com esta página temos mais uma etapa importante e estamos vendo aquelas pessoas às vezes esqueço essa etapa, então eu quero deixar bem claro o que estamos prestes a do vamos usar o modelo cms página da lista de conteúdo principal então vamos para o nosso estes são os modelos certo, vamos para o modelo de modelos página e vamos fazer o mesmo coisa que acabamos de fazer aqui vamos fazer isso eu vou para as modelos template de modelos e a mesma coisa vamos adicionar essas listas eu também vou criar três deles faremos a mesma coisa o único a diferença é que precisamos ter certeza de que selecione a versão multirreferência para que possamos veja nossos campos de modelos com multi-referência que não queremos escolher eles desta lista nós queremos escolhê-los de nosso lista multi-referência então primeiro vamos fazer o nosso espaço físico então vamos fazer o nosso peso e então faremos nosso financiamento opções e faremos a mesma coisa aqui com o bloco de link agora falamos sobre estilos antes este é o lugar onde os estilos absolutamente não importa você pode aplicar qualquer tipo de estilo para isso e eles vão ser completamente ignorado, tem absolutamente nenhum impacto em nada então vamos fazer a mesma coisa aqui com a cópia da página e o texto você pode estar pensando porque não apenas copiamos do último página, não podemos copiá-la da última página porque precisa disso muito importante referência ligada Uau eu acabei de aumentar o zoom lá? por que tudo é minúsculo agora Oh, isso te elevou a um nível mais alto uh ponto de ruptura ah sim fez eu vou dar um ponto de interrupção maior [Música] [Risada] [Música] ok, de volta ao caminho, temos a página e nós temos o texto então eu estava dizendo que não podemos simplesmente copiá-lo do anterior implementação porque precisamos muito disso links especiais, precisamos ter certeza que estamos ligados por meio do modelo campo então isso tem que ser feito como estou fazendo agora e vamos voltar a este vamos escolher uma página e o texto aqui vou dar um zoom para fora talvez outro zoom out OK OK e agora vamos aplicar estes mesmos atributos, então vou fazer o mesmo coisa com fs ninho cms este vai ser o coleção e vamos fazer o espaço no chão estamos com baixo peso e aqui vou pesar sobre isso Lista e então aqui nesta lista nós vamos façam financiamento excelente ok, então estamos prontos nesta página tudo parece bem vamos agora voltar para a nossa página oficial e vamos ver isso funcionando, não quer começar a entrar no estilo ou filtrando ainda, nós só queremos confirme se tudo aqui vai aninhe-se adequadamente para o que devemos ver é cada um deles preenchido com o campos multirreferência corretos de nosso lista e eles realmente vão ser puxado direto daqui, então eles estão indo parecer exatamente assim então vamos confirmar isso nós iremos para a página eu vou carregar oh bela página aberta lá e lá vamos nós que foi uma bela página aberta e olhe para isso, temos nosso aninhado itens ou listas aninhadas, devo dizer o lista inteira cada uma das três listas vai colar-se ou anexar-se dentro do item e vai mostrar o correto pesar o espaço correto e o opções de financiamento corretas excelente agora vamos ver que estilo é esse meios eu não vou a lugar nenhum, vamos aqui e isso será apenas para exibição propósitos vamos fazer um link nós vamos ligar Este link b e vamos chamá-lo de link c eu vou aplicar esta cor vermelha terrivelmente feia eu vou aplicar este azul e este verde você também pode se inscrever na lista vamos na verdade, faça isso apenas para que possamos ver listar um e eu estou indo para faça-os assim com a capacidade de embrulhar e vou aplicar isto ótimo, então vamos ver esses primeiros itens estes espaços de chão em um flex horizontal e veremos todos estes se anexam diretamente em seus respectivos blocos div então vou publicar e veremos funcionar qualquer pergunta da nuvem do multidão jeremy estava perguntando algo, mas eu acho que podemos querer esperar até chegarmos durante o intervalo para abordar aquele OK Eu acho que seria bom apenas ver como esses estilos se traduzem em o aninhamento lá então lá vamos nós temos nossas cores nós tenha nosso flexionamento vamos ver um com um lista mais longa lá vamos nós, então termina então vai tirar esses itens de na parte inferior a lista da parte inferior e realmente coloque-os em seus lugares aqui sim, isso faz sentido agora joe’s acabei de receber esses três divs como empilhados um em cima do outro, mas você sabe com o que ele embrulhou talvez aquele vai no topo e lista o categorias e então você tem um pouco sinalize na parte inferior que você projeta real bom ser como um ícone de algo que você sabe e agora como se você tivesse isso ícone destacado para sua postagem de blog que você conhece e todos esses elementos agora você saiba como se nada disso fosse possível nativamente no webflow sem estes atributos de aninhamento e, então, ser capaz para filtrar em cima disso, como passo um é como vamos definir essas coisas e agora a próxima etapa será uma espécie de filtrando por isso e apenas o capacidade de adicionar essa funcionalidade, eu sei tanto nesses grandes você sabe sites multi-referência com muitos categorias e muitas opções como essa é que as coisas se tornam importantes para ser capaz de faça exatamente e isso é exatamente o que faremos a seguir vamos configurar isso com o filtro que estamos feito com a implementação do ninho, não mais etapas necessárias para que você possa ver que tem todas essas opções de espaço físico, o opções de peso e as opções de financiamento agora precisamos criar um link a conexão entre esses filtros e esses itens aninhados antes, então vamos podemos responder vamos responder um a pergunta de jeremy aqui para a lista de coleção na parte inferior você pode apenas usar texto em vez de um link na página com o filtro, se você não quer o link disponível para clicar jeremy você pode Uh mas você precisa ter o link em algum lugar então vamos vamos fazer um teste deste jeremy apenas para podemos ter certeza de que isso é exatamente do que você está falando eu vou crie este texto aqui e este texto é vai ser o nome eu vou me esconder a ligação o link deve estar aqui se eu remover o link como este está quebrado, não funciona, precisamos do link mas como qualquer outro item aqui, não precisa estar visível para que eu possa exibição unicidade e vamos deixar assim apenas para confirmar que está funcionando então vou enviar uma publicação, vamos continue com o filtro e nós iremos apenas veja isso funcionando conforme o esperado, sim sim, eu acho que meio que esclarece isso esclarece e o alex até disse lá como contanto que os itens tenham um link dentro de está escondido ou não vai funcionar para responder a pergunta que Jeremy estava fazendo originalmente, ele precisa ser um link, mas você pode adicionar outros elementos lá, o link é o que conecta isso e tipo de o que está dizendo aos atributos para se conectar para aquela coisa que está aí embaixo você sei então é como se isso fosse um objeto você precisa injetar aqui ou anexar aqui, sim, você precisa do link para fale com ele, mas não precisa ser visível exatamente e você pode ver no publicado página, agora perdemos o vermelho, o link estava escondeu o link c temos o texto simples aqui você não pode clicar nisto perfeito ok agora vamos entrar na filtragem então já copiamos nosso script do extensão de antemão, agora vamos começar para aplicar nossos atributos a primeira coisa eu gosto de fazer é acertar o item da lista, então este será um filtro fs cms elemento e copiarei para uso posterior. a lista isso está sendo aplicado à lista de modelos então vamos salvar isso vamos aplicar nosso atributo de filtros a atributo de filtros será algo que contém todos os nossos filtros e isso acontece em a forma elemento para que você possa ver que temos nosso formulário configurações este é um formulário de fluxo da web nativo e vamos aplicar isso como nosso elemento de filtros legais então, apenas uma verificação rápida aqui, temos o lista temos os filtros agora que entramos os identificadores de campo então vamos fazer isso vamos criar este campo identificador daqui e então vamos aplicar o mesmo identificador para os elementos aqui então vamos começar aqui vamos chamar isso de nosso filtro fs cms campo copie que para uso futuro este será nosso andar amperes espaço no chão e observe como isso é aplicado ao rotular esta é uma caixa de seleção então marcel tem escondeu esta caixa de seleção não é visível na página, mas é uma caixa de seleção que preciso que seja um elemento de caixa de seleção ok e é aplicado ao etiqueta elemento e porque é cms, é aplicado em todos os lugares, então cada um desses tem o espaço que é exatamente o que nós queríamos e poderíamos fazer a mesma coisa aqui com o peso então vou colar esse fs cms campo de filtro vamos pesar aqui e faremos a mesma coisa aqui com financiamento legais agora vamos fazer a mesma coisa com as coleções aninhadas abaixo vamos fazer isso eu farei bem aqui para o link vou chamar isso de campo e este vai ser o foco vamos fazer aqui com o peso e vamos fazer isso, podemos fazer no bloco de texto não precisa estar no bloco de link o bloco de link é apenas necessário para o aninhamento, então vamos fazer isso bem aqui no bloco de texto e este será fi dançando excelente então agora vamos enviar uma publicação e se tudo deu certo isso Deveria trabalhar quatro minutos, acho que acabamos de configurar filtrar em quatro minutos legais tudo bem OK recarregando a página aqui, vemos todos os nossos nossos itens aninhados, conforme necessário e agora clicamos nisto e vamos para ver este trabalho vou diminuir um pouco o zoom bit para que possamos ver os filtros com o resulta na mesma visão para que possamos ver nosso 0 a 20 ou 0 a 20. podemos desmarcar isso e fazer um 35 a 50 vemos nossos 35 a 50 anos, podemos adicionar isso a a mistura lá vamos nós podemos fazer nosso peso 5 a 10 trabalhando podemos fazer nosso leasing de opções de financiamento Comprar adicione vários filtros aqui e tudo funciona você pode ver que isso está funcionando exatamente como pretendido muito legais caras legais legal sim alguma dúvida marcel aí não, é muito legal ver como funciona e como você diz, são quatro minutos e é isso você sabe sim, é um pouco trabalhoso colocar em tudo esses campos e também para vinculá-lo e para certifique-se de não perder o controle do que voce esta fazendo mas uh sim quero dizer é uh é uh doce eu acho que sim e uma das coisas que joe estava dizendo quando nós uh quando ele estava olhando para o o final deste projeto foi como se eu apenas configurá-lo em cerca de sete minutos, ele disse você sabe e agora joe é como um profissional em configurando isso porque ele tem feito um monte deles, mas um aqui eu acho que o trabalho completo foi você sabe meio que explicar o que era realmente acontecendo assim que você ficar bom neste momento você descobrirá isso, uma vez que tiver feito algumas vezes você realmente pode tipo de voar através dessas instalações, então sim esse é o e também é claro se você já quer esses campos esses campos visíveis, então você já tem eles lá para que também torna muito menos trabalhoso porque isso era tipo despojado de uma forma sim exatamente e você sabe o que vamos realmente vá e esconda estes o design original do marcel certo não tem estes então vamos ter certeza de respeitar isso e vou colocar todos esses div blocos dentro de um Mostrar nenhum embrulho então agora vamos pegar o do marcel original design sem marcas visíveis que não vamos ver isso na parte inferior da página e a filtragem funcionará conforme o esperado e joe mais uma pergunta rápida sobre estilizando lá nesses três divs você pode querer nomeá-los apenas para saber o que eles são vontade que afetam qualquer coisa como aqueles três divs que você acabou de esconder onde esses elementos são se eu apenas quisesse escreva um nome de classe lá para ter isso quero dizer, obviamente, você está adicionando algo extra aulas, mas talvez para apenas posteridade daqui a um ano, quando eu voltar para este site e eu fico tipo o que é este vazio div aqui alguém pode querer apenas exclua um div vazio como você faria recomendo nomear como foi a melhor maneira de resolver isso você pode ter certeza se quiser para deixar mais claro para o próximo pessoa entrando que é uma boa ideia nomear com uma classe uh eu nunca fiz isso só porque Eu sei que não preciso disso, não é necessário, mas sim, eu acho que é absolutamente não é um problema dar a isso um aula apenas para ficar mais claro certo então agora vemos oculto e você pode ver tudo ainda está funcionando legais excelente bom, sim, então o estilo desses aninhados listas só importam se você estiver tentando mostrar essas coisas um você só precisa dizer aos atributos o que o que é o quê e fornecer os elementos para que você pode saber, obviamente, usar aqueles como referências para filtrar assim bom sim super bom tudo bem uh nós temos essa pergunta aqui da melissa ela está dizendo que tentei aninhar recentemente e percebi que alguns dos meus itens de cms foram duplicados na página do modelo e esse problema vai embora assim que eu remover os códigos do ninho é um problema de cms hum segue duplicado na página principal não é a página do modelo, desculpe então vamos ler isso em contexto com isso correção eu tentei aninhar recentemente i percebi que alguns dos meus itens de cms eram duplicado na página principal e esse problema vai embora assim que eu remover o código ninho é um problema de cms eu teria que ver um somente leitura e um publicou a página para realmente olhar para que eu Na verdade, não consigo visualizar esse problema sim assim melissa go se você entrar no doce js folga canal uh vá em frente e poste uma postagem somente leitura um publique o link e daremos uma olhada em isto ok uh marcel alguma dúvida não é claro, eu acho que é uh tem sido incrível o que vocês são fazendo pela comunidade e uh para empurrar esses produtos e torná-los disponíveis para todos e, em seguida, até mesmo percorrer os comprimentos de colocando no youtube e como implementar tudo é apenas é brilhante então obrigado por todo o trabalho duro que você está fazendo e tornando-o disponível bom sim obrigado marcel realmente aprecio isso bom ótimo ok então sim, nós vamos continue fazendo isso, você sabe, sim para cair lá, a menos que haja qualquer outra coisa, então vamos em frente e obrigado novamente marcel nós apreciamos você pendurado com a gente uh joe mencionado suitejs.io então eu coloquei isso a placa lá, se você tiver alguma questions melissa um sim é isso que é onde você deveria dar uma olhada eu acabei de colocar o link lá em cima tão doce js.io uh trazê-lo para o canal de folga, você pode fazer perguntas lá Eu não vejo aquele link no chat, então eu apenas entrei e editei sim, não é no chat eu coloquei na tela ah sim ok coloquei na tela por anos hum ok qualquer outra pergunta do multidão de público aqui, estamos mais ou menos uma hora aqui que é tudo bem comigo se nós uh se nós não uh mas se houver alguma outra pergunta, pensamentos você sabe o que nós temos joe aqui ou qualquer outra coisa tudo bem joe quaisquer outros pensamentos que você gosto de compartilhar vamos ver Nós vamos eu acho que essa terça-feira sim, nesta próxima terça, temos um realmente bom stream, temos um ano revisão de tudo o que fizemos em finsweep em 2021 e se ultrapassarmos uma certa quantidade de pessoas, vamos anunciar o quantidade de pessoas se for mais de um certo valor, estamos teremos um grande lançamento para cliente primeiro nós temos um super suculento atualizar isso vai realmente te dá muito mais poder em cliente primeiro assim faça na terça e vamos lançar algo sim sim eu acho uh com certeza as pessoas deveriam vir até o ano no episódio de revisão vai ser incrível nós passamos por este resumo de como tudo o que publicamos no último ano e é meio selvagem honestamente pensar que tudo o que saiu ao longo do ano e isso nos deixa muito animados com o que pode estar chegando no próximo ano um assim Sim, junte-se a nós na terça, será um legal fluxo de recapitulação de tudo o que temos lançado e concluído nos últimos uh 12 meses e provavelmente vamos até provocar um pouco um pouco sobre o que está acontecendo no futuro um e como Joe disse, vamos ter se nós pausa você sabe, digamos 100 simultâneos visualizadores, eu não sei se isso é um limite 100 parece um pouco talvez um um pouco baixo, mas veremos que subiremos com isso temos 90. tivemos 90 últimos semana eu sei que vamos ter que ter para empurrar, talvez tenhamos que gostar 150 ou algo assim sim, então vamos pensar nisso e uh sim se quebrarmos alguns números lá nós vamos liberar uh que fez você diz o que foi o lançamento ii quase mencionei isso, mas eu não queria eu não sei devemos mencionar isso [Risada] devemos mantê-los esperando, devemos sim, talvez pudéssemos dizer a eles por saindo com a gente, é sim, talvez diga eles vamos começar a fazer as pessoas zumbirem sobre isso ok uh bem nós temos um realmente bom atualização responsiva para o cliente primeiro muito de pessoas expressaram interesse em capacidade de resposta a fluidos na primeira convenção de nomenclatura do cliente em nosso primeiro sistema de cliente, então se você é um cliente primeiro usuário que vamos lançar algo que vai virar o seu site em fluido responsivo em minutos na verdade em segundos é assim rápido essa coisa é tão nós temos tudo pronto para ir e nós apenas necessidade 150 pessoas 120 pessoas Eu não sei precisamos de muitas pessoas em nosso fluxo terça-feira e vamos lançá-lo que é certo, então venha sair com a gente terça-feira tenho certeza que muitas pessoas estão conosco neste momento, um é terça pessoal regular, mas vamos espalhar a palavra sim se vamos pegar isso lá fora para que possamos um sim, exagere, exagere e talvez consiga que uh libere então ok uh além disso, eu acho que deixe-me veja se algo está chegando no comentários aqui [Música] joe descobriu o poder do provoque e ele está dizendo eu tenho eu tenho que você conhece o twitter publicar realmente me deixou animado, então agora talvez seja assim que fazemos fina, doce lançamentos sim sim com certeza um melissa chen fazendo meu presente de aniversário lá vamos nós, sim, se pudermos obter a participação uh com certeza vocês estão os melhores sons de um centavo incrível acertar isso como botão pessoal com certeza agradecemos a todos pendurados conosco de novo foi um ótimo episódio de aprender ao vivo uh vamos fazer isso de novo provavelmente não por uma semana ou duas porque obviamente próximo semana estamos indo direto para o feriados uma semana depois que as pessoas que você conhece estão fazendo coisas de ano novo e tudo mais falei sobre talvez apertar um como uma sessão de definição de metas, mas eu acho isso pode ser você sabe o primeiro do ano meio que coisa que talvez goste primeiro ou segunda semana de janeiro hum, então na próxima semana será o nosso último eu acho oficial transmissão ao vivo para o ano provavelmente hum então uh de qualquer maneira eu sei que todos vocês sentem nossa falta eu sei que sentiremos sua falta, tem sido muito divertido sair uh eu não posso acreditar que nós feito 70 este é um total de 77 fluxos este ano e eu posso ver esse número subindo consideravelmente no próximo ano, então uh de qualquer maneira isso é tudo uh há um cliente para uma vitrine ainda não, ainda não ainda não está em andamento um vá em frente joe sim Nós vamos nós temos pronto estamos esperando para empurrar publicar nós temos a parte pronta onde temos o itens exibidos prontos para empurrar mas ainda estamos trabalhando na habilidade para auto-submeta-se para que Justin seja capaz para enviar sua própria postagem, ele viria para nós o aprovaríamos e seria publicado mas sim uh está muito perto está em nosso está em nosso funcionamento ativo legais ótimo uh vamos ver sempre divertido assistir joe faça isso, aprenda que vive gabe para claro, é bom ver você mesmo, eu acho isto é Olá [Risada] michael rose obrigado uh ok a todos uh grite, tenha um bom fim de semana nós vamos Pego vocês logo uh até terça feira [Música] Ei

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments