Como Criar Conteúdos e Páginas DINÂMICAS com o WIX STUDIO

Ô Mia deixa eu te fazer uma pergunta para criar sites por exemplo com páginas dinâmicas e avançadas PR os meus clientes como acontece por exemplo em sites tipo de blog site de concessionária site de Imobiliária diretório de produto também não preciso saber programação não não preciso não tá mas mesmo eu não precisando saber programação eu preciso por acaso saber alguma ferramenta Ultra mega riper Cabulosa aí com 300.000 botões e que querendo ou não meio que vai me render meses de aprendizado pela frente também não hoje mesmo inclusive nesse vídeo aqui eu vou te mostrar uma

forma super simples rápida e fácil de você construir páginas e funcionalidades super dinâmicas nos sites dos seus clientes e que com certeza poderá ajudar bastante aí no seu dia a dia de trabalho como Web Designer através do wix Studio e para você que ainda não conhece o wix Studio É justamente uma plataforma de criação web Projetada para designers web designers desenvolvedores e a que precisam aí né de mais flexibilidade possibilidades de personalização também além de funcionalidades de mais alto nível no sites que cria e só para você ter uma ideia o x Studio oferece ferramentas

avançadas de design Como por exemplo o controle total de CSS e JavaScript pra galera aí que sabe programar né e recursos também como o Cms que é o sistema de gerenciamento de conteúdo para criar sites dinâmicos e que inclusive é justamente o que os senhores senhoras senhoritos e senhoritas verão aqui hoje junto comigo além ó de várias outras coisas também como automações integrações de apis uso de inteligências artificiais e ó muito mais Só que ó que fique uma coisa bem clara aqui para você não sair confuso desse vídeo é importante a gente ressaltar que o

XX Studio é diferente do XX beleza ó Aqui nós temos o wix e Aqui nós temos o wix Studio edição é uma coisa mágica né o wix Studio é mais voltado pro uso profissional com funções bem mais avançadas enquanto o X é mais voltado pro público que na grande maioria das vezes ali não entende muito sobre esse mundo de criação de sites mas quer tentar criar alguma coisa ali por conta própria mesmo algo mais simples mais rapidinho então já fique aí ligado né você que trabalha ou então quer Trabalhar com criação e venda de sites

que o Wi Studio também pode ser uma excelente alternativa para você belezinha Por que eu F também porque às vezes vocês podem ficar naquela tipo ah Bia Mas e a ferramenta x e a y gente a gente tem que tá aberto né com a mente aberta várias ferramentas legais que a gente tem no mercado Como por exemplo o x Studio você não precisa necessariamente escolher um caminho e seguir apenas naquilo se você enxergar Alguma alternativa que pode te ajudar de verdade e PR uma solução melhor pro seu cliente com melhor custo benefício e mais facilidade

de desenvolvimento também por que não utilizar né então a gente tem que estar com a mente aberta e né aproveitar de todos os benefícios que as ferramentas que existem no mercado tem para nos ajudar Beleza não é a gente que trabalha PR as ferramentas as ferramentas que trabalham pra gente então a gente tem que aproveitar o que Tem de bom no mercado inclusive já adianto também que se você tiver interesse em saber mais sobre essa ferramenta inclusive testar por conta própria você pode até testar as coisas que eu vou mostrar aqui hoje nesse vídeo também

é só você clicar no link da descrição aqui e acessar a plataforma do Studio você pode fazer o seu login gratuito testar lá sem compromisso e se você achar que faz sentido aí pro seu dia a dia de trabalho você pode dar uma Verificada nos planos disponíveis dessa plataforma também beleza link aqui na descrição se você quiser saber mais só que agora eu sei que uma dúvida que pode estar aí na sua cabeça é Bia tá eu vou aprender sobre página dinâmica mas o que que é isso aqui né que que que que isso faz

na minha vida Deixa eu te explicar aqui rapidinho ó olha aqui o exemplo desse site que inclusive spoiler aqui né né é justamente o site que a gente vai utilizar como base aqui para poder Desenvolver esse conteúdo dinâmico aqui no site juntos na prática beleza ó então é um site de adoção de pets de cães e gatos aí que estão disponíveis para serem adotados E aí olha só aqui nós temos uma página inicial né com sobre aqui com como ajudar nesse projeto feirinhas de adoção aqui e tudo mais e aqui embaixo a gente tem uma

parte aqui ó sobre pets disponíveis para adoção Olha que legal e aí a gente pode clicar aqui para ver todos os pets a a gente Vai ter toda uma lista aqui desses petzinho e a gente também pode clicar aqui para saber mais e ter acesso a uma página dinâmica aqui ó com algumas informações desse Pat todas essas páginas parecem cada uma né individualmente Tecnicamente simples de serem desenvolvidas Mas pensa só na manutenção desse site aqui vamos supor por exemplo que isso aqui é para uma empresa mesmo né que tá constantemente tendo ali rotatividade desses Pets

eles Estão sendo adotados chegam mais Pets para serem adotados também E aí a pessoa que cuida desse estabelecimento precisa estar sempre vindo aqui no site para o quê né no caso seu cliente ele precisa estar sempre vindo aqui no site para o quê para deixar indisponível alguns Pets que já foram adotados para adicionar novos Pets também E aí Imagine só a situação de toda vez que essa pessoa tiver que fazer isso ela ir lá na plataforma do wix Studio e ter que Excluir aquela página ali daquele Pet quando ele for adotado e depois é criar

uma nova página né Por exemplo ó a Nina acabou de chegar aqui então eu vou vir aqui no wix Studio e vou literalmente criar uma nova página aqui para ela colocando aqui o nominho dela a idade dela aqui o temperamento vou vir aqui embaixo vou colocar todas essas coisas aqui manualmente cada vez que um pet novo chegar nesse local seria uma trabalheira danada né e com certeza se Você como Web Designer entregasse uma entre aspas solução assim pro seu cliente com certeza não seria algo que ajudaria tanto ele assim no dia a dia OK então

o que que a gente pode fazer a gente pode desenvolver um site que cria dinamicamente essas páginas Ou seja você faz uma vez só uma página por exemplo de lista de pets aqui ó e aí cada vez que a pessoa por exemplo através de um sisteminha ali que parece uma tabelinha no Excel sabe bem fácil de mexer quiser Adicionar um novo Pet a ela vai lá adiciona e assim que ela adicionar esse Pet já vai cair nesse Grid aqui automaticamente beleza e da mesma forma que ele cai aqui ele também vai já ser criado uma

pagin fazinha específica para ele já com essas informações todas formatadas aqui ó de acordo com o que a pessoa adicionou então assim é uma necessidade constante do mercado que você tem ali né um sisteminha de páginas dinâmicas até porque boa parte das Empresas tem essa necess ade de est movimentando informações e tudo e disponibilizando ou deixando de disponibilizar determinadas informações aqui pros usuários isso aqui pode acontecer tanto para esse tipo de site como vários outros também Como por exemplo o blog que você vai ali criando artigos e Se toda vez que você for criar um

novo artigo você ter que criar uma nova página vai ser uma trabalheira do caramba né você adiciona uma nova página Aí vai lá na lista dos artigos das notícias novas do site você vai lá e adiciona um novo Card com aquela notícia maió trabalheira é muito mais ideal você já fazer páginas dinâmicas para que isso já caia né já se atualize no site de forma automática sites de concessionária também né quando você vai adicionar novos veículos site de Imobiliária para adicionar páginas personalizadas ali por exemplo PR os imóveis que você quer oferecer ou que o

seu cliente quer Oferecer né então assim é uma coisa muito legal de você saber é inclusive é uma função de mais autonível também aqui dentro do XX Studio beleza e é justamente o que a gente vai ver aqui hoje lembrando que hoje eu não vou focar no desenvolvimento de todas as páginas aqui a gente não vai fazer esse site Completão porque eu quero focar esse conteúdo Justamente na funcionalidade de páginas e conteúdos dinâmicos para você entender o conceito de como funciona e Depois você poder aplicar no que você quiser por aí também então eu não

vou ficar me prendendo muito aqui a questão de design layout essas coisas assim mas se você tiver interesse em um vídeo especificamente disso tipo Bia cria aqui um site do zero quero saber como criar qualquer tipo de layout aqui dentro do X Studio comenta aqui embaixo Aqui tá eu ia falar comenta nos comentários mas é um pouco redundante né enfim comenta nos comentários aqui embaixo os tipos de Vídeo que vocês gostariam de ver aqui tá me dá sugestões eu vou preparar um material bem legal aí para vocês também beleza mas agora bora lá pra parte

né das páginas dinâmicas Beleza então ó só para vocês se ambientar aqui Tá eu já tô no site Inicial aqui do wix Stúdio E aí se por acaso para você tiver aparecendo inglês por exemplo tiver meio difícil de entender você pode vir aqui nesse Globinho e colocar português que ele fica tudo bonitinho aqui para nós BR E Aí para você fazer um login né ou se registrar é bem tranquilo você vai clicar aqui em login ou então começar E aí você pode fazer né o seu registro ou seu login tanto com as informações aqui digitadas

certinhas e-mail sem e tudo mais ou então você pode fazer um login social por exemplo aqui ó pelo Google pelo Facebook e até com o seu perfil aqui da apple beleza fiz um cadastro aqui no Google aí eu vou clicar aqui e vou entrar com o meu e-mail prontinho Fiz aqui o meu login com o Google ele vai me fazer algumas perguntinhas aqui iniciais tipo como você planeja usar a plataforma Vou colocar aqui por exemplo como parte de uma empresa vou colocar como freelancer por exemplo aí que tipo de serviço você oferece Vou colocar aqui

o web design e vou clicar aqui em continuar aí ele já te dá a opção ou de ir pro seu workspace né que é o seu dashboard aqui o seu painel principal de desenvolvimento aqui no x Studio ou Então você já ir diretamente para criar um site eu vou clicar aqui para ir pro work Face só para vocês darem uma olhadinha de como que isso aqui funciona né se você nunca Acessou a plataforma do mix Studio muito prazer é essa tela aqui que você vai ter acesso beleza logo de início você já tem acesso aqui

ó a vários tutoriais inclusive de várias coisas que você pode fazer na ferramenta aqui inclusive aqui em cima ó se não me engano aqui é em Recursos aqui você tem Acesso a esse wix Studio Academy que você consegue ter acesso a vários materiais tanto em artigos como de vídeos também de como utilizar aqui a Plata Plata fora o que é muito legal para quem tá no início ali e quer entender como que isso aqui funciona tá eles têm bastante documentação mas enfim eu não vou entrar aqui em tantos pormenores de todos os botõezinhos que vocês

podem clicar aqui dentro até porque não é o foco desse vídeo mas ó eu Vou vir aqui em sites e aí você pode ver que eu tenho dois sites aqui um que é justamente aquele que eu te mostrei ó que eu posso simplesmente clicar aqui para editar o site vou clicar para abrir uma nova aba aqui segurando control E aí você pode ver aqui ó que já aparece aquela mesma página que eu tinha mostrado para você mas agora no campo de edição aqui do XX Studio inclusive site bem montadinho aqui eu peguei como base um

template que eles têm aqui dentro que Inclusive tem vários templates muito legais aqui dentro do wix Studio porque assim ele tem funcionalidade de alto nível e tal se você quiser criar um negócio completamente do zero e completamente sinistro assim inclusive com efeitos e animações avançadas você consegue mas se você também quiser ali por exemplo ter uma dinamicidade melhor no seu dia a dia trabalho e querer uma coisa um pouco mais fácil para você editar adicionar algumas coisinhas a Mais você também tem aqui uma biblioteca gigantesca de templates para você aproveitar então aqui ó no caso

eu utilizei um template aqui da plataforma mesmo você pode por exemplo ó aproveitar aqui ó quando você vem clica em criar um novo site você vem aqui em template do X Studio você tem acesso aqui a toda uma biblioteca de templates muito legais olha por exemplo esse aqui tem altos efeitos gente que cara é normalmente seria muito difícil de você fazer por Meio de de código mas aqui você consegue fazer tipo bem facinho Inclusive tem vários tutoriais de como você fazer esses efeitos assim aqui também depois vocês dão uma olhadinha nessa biblioteca só para ficar

com os olhinhos brilhando igual eu fiquei eu fiquei parecendo uma criança aqui pensando nossa deixa eu usar esse aqui deixa eu testar esse aqui é m legal mas enfim voltando ao que eu tava falando né aqui eu tô com a página né uma página pré-pronta é tipo efeito Ana Maria Braga né E aí aqui nessa página eu já tenho por exemplo ó esse destaque Zinho aqui na página inicial com alguns animais que estão disponíveis para adoção e o botão aqui de ver todos os pets se eu clicar aqui na minha abinha de páginas eu também

posso ver que eu tenho aqui uma página específica para cada Pat que inclusive é uma página dinâmica que toda vez que eu adiciono um novo Pet na minha coleção já aparece uma página dessa no meu site vou mostrar Isso em mais detalhes e também a minha página aqui de lista dos petzinho que já puxa tudo de forma dinâmica também e aqui do lado eu tenho um outro site que ainda não tem nada disso ó vou clicar aqui para editar esse site E aí é nele que a gente vai mexer para vocês verem como é que

é todo esse passo a passo aí junto comigo também aqui olha só não tenho nada ainda aqui nessa minha página na parte dos Pets para adoção aqui eu coloquei doguinhos para adoção Mas você Vai ter gatos também e aqui também ó quando eu clico aqui nas minhas páginas não tem aquelas outras páginas que eu mostrei também agora bora lá qual que é a primeira coisa que a gente precisa ter para conseguir criar uma página dinâmica né uma página ou um conteúdo dinâmico uma coleção de dados uma coleção de itens que você vai adicionar nesse site

aqui no caso desse site aqui dos Pets para adoção a coleção teria que ser de quê justamente dos Pets que estão Disponíveis ou não né ali para adoção também Ok qual que é a primeira coisa que a gente precisa quando a gente pensa ali em criar páginas dinâmicas do nosso site a gente precisa de uma coleção ali de dados né para que esses dados essas informações se tornem depois uma página um conteúdo dinâmico dentro do site Ok então a gente precisa de uma coleção de informações por exemplo no caso aqui dos doguinhos e gatinhos aqui

para adoção qual que seria essa coleção justamente Dos Pets que estão disponíveis para adoção e deverão ser mostrados no site no caso de um blog são por exemplo os artigos que você quer mostrar no site no caso de um site de Imobiliária seria por exemplo os imóveis que você quer mostrar no site e assim por diante Então como é que a gente consegue criar uma coleção dessas informações aqui aqui dentro da nossa plataforma tá vendo esse botãozinho aqui escrito cms do lado que parece uma tabelinha é aqui que você vai Clicar PR poder adicionar as

suas coleções então aqui ó Nessa aba principal você pode tanto criar pré-definições pras suas coleções criar novas coleções também né enfim outras funcionalidades aqui também se você já tiver coleções cadastradas você vai vir aqui em suas coleções inclusive já tem até uma aqui pré-pronta cadastrada que eu já fiz mas eu vou mostrar para vocês como que é feito esse processo e em cada funcionalidade aqui do X Studio você Também vai encontrar sempre ali um saiba mais um ajuda mais informações Onde você consegue encontrar materiais aqui para você aprender ainda mais a respeito disso então Ó

vou clicar aqui em suas coleções e vou clicar nessa coleção que eu cadastrei aqui só para você ver como que ela fica no final tá vou clicar aqui cara e olha só que legal isso aqui tudo eu já cadastrei mas eu vou mostrar como fazer também Beleza então ó aqui ó eu tenho a visualização padrão e você pode Selecionar tanto no formato de galeria como lista aqui desses pats e o tabela aqui ó também que fica bem legal como eu falei como se fosse uma tabelinha no Excel mesmo onde você pode ir adicionando Campos nessa

sua tabela e adicionando informações aqui em cada célula dessa tabela também então por exemplo aqui pros Pets Quais são os campos né e os atributos que eu coloquei aqui para cada uma delas por exemplo nome do PET foto né onde eu coloquei Aqui uma imagem principal desse Pet coloquei aqui espécie também também por meio dessa modalidade de tag Onde eu consigo por exemplo cadastrar gato e cachorro e posso só clicar em cada uma dessas opções sem ter que ficar digitando toda vez raça também ó tipo sem raça definida ou então a raça específica do cachorro

idade porte sexo se o cachor recast trado ou não aí aqui e eu coloquei um atributo de bulan né tipo é que é aquele negócio de sim ou Não verdadeiro ou falso né Se for castrado É sim se não for castrado É não e assim por diante enfim vacinas temperamento também que foi por meio de tag para poder ficar mais fácil de adicionar história do cachorrinho ou do gatinho também se tá disponível pra adoção isso aqui é um campo importante mesmo que não seja mostrado ao usuário você vai ver isso aqui na prática e o

contato né pra pessoa falar ali a respeito do interesse dela de adoção Daquele Pet Então temos aqui vários Campos se você perceber ó aqui na frente eu posso inclusive adicionar um novo Campo também tipo por exemplo ah além da foto de destaque Eu quero uma galeria Zinha desse Pet também tipo para colocar outras imagenzinha a galeria de mídia também você seleciona essa opção escolher e depois coloca um nome aqui pro seu campo tipo ó galeria mesmo e aqui você pode colocar um texto de ajuda por qu aqui você tá fazendo um Site para o seu

cliente e talvez o seu conhecimento o seu cliente não tenha Então esse texto de ajuda aqui vai ajudar ele a entender o que que ele precisa fazer nesse Campo tipo adicione uma ou mais fotos adicionais do Pet aí ele vai saber que isso aqui é uma galeria Zinha onde ele vai colocar uma ou mais fotos para poder compor além da imagem de destaque beleza ó vou salvar aqui só para vocês verem e olha só que legal já foi adicionado esse campo aqui Se ele passar o mouse nesse izinho já vai ter essa dica aqui que

você colocou para ele também e a mesma coisa acontece por exemplo ó na visualização de galeria se eu clicar por exemplo aqui na caramela eu vou ter todos os os campos aqui bonitinhos para editar ou então adicionar né tipo nome espécie e tudo mais e aqui embaixo eu também vou ter a minha galeria né com aquela diquinha que você colocou aqui embaixo também onde a pessoa pode simplesmente vir aqui e Adicionar uma mídia aqui através da biblioteca do XX Studio isso aqui é muito legal gente muito fácil assim intuitivo Tanto para você como pro seu

cliente também fazer essa manutenção depois se eu não quiser um determinado Campo eu posso vir aqui nas minhas coleções de novo venho aqui por exemplo no formato de tabela E aí eu posso simplesmente vir aqui ó clicar com o botão direito aqui ó nesse Campo aliás eu posso vir nesses três pontinhos aqui Do lado e posso excluir esse campo confirmar aqui né e clicar em excluir que pronto vai voltar ao formato que estava antes mas como é que a gente criaria por exemplo uma coleção do zero porque aqui já tem um monte de coisa cadastrada

e tal mas me mostra aí meio na prática mesmo né Como que eu poderia fazer isso do zero aqui Bia Olha só vou fechar aqui essa tabelinha já criada vou vir aqui nessa aba de principal então eu posso simplesmente vir aqui embaixo Também criar coleção vou clicar aqui embaixo mesmo ele vai dar uma introdução né eu vou colocar aqui para começar já e vai me dar algumas opções olha só que interessante eu posso inclusive criar coleções geradas automaticamente com as ferramentas de Inteligência Artificial auxiliadores que a gente tem aqui na plataforma também olha só que

massa eu vou clicar nessa opção aqui só para vocês verem como é que funciona vou clicar aqui em próximo E aí eu vou Colocar por exemplo Qual é o nome da sua coleção vou colocar pets Pets para adoção Vou colocar aqui e aí eu vou colocar informações sobre essa minha coleção por exemplo petes cachorros e gatos disponíveis para adoção com os campos eu posso especificar já alguns Campos aqui quando eu não coloco ele tenta fazer de acordo com o contexto tá mas se você já tiver os campos facilita também por exemplo nome disponibilidade para adoção

sexo deixa eu ver idade Idade temperamento história do Pet que mais enfim né já deu PR entender mais ou menos vou colocar esses aqui ah vou colocar eu coloquei foto não coloquei foto galeria essas coisas assim Enfim vou clicar aqui em próximo E aí ele vai gerar aqui os campos dessa minha coleção E aí ele já selecionou algumas opções aqui ele colocou em inglês mas tipo já dá para entender qualquer coisa você joga no Google Tradutor aí da vida também Você pode traduzir isso depois Sem problema nenhum mas já colocou aqui ó nome do PET

disponibilidade adoção sexo idade temperamento história do Pet foto galeria e aí eu vou colocar aqui gerar conteúdo ele gera até um conteúdo modelo para você se basear também é muito massa Olha que legal ele já criou aqui ó todos os campos que eu pedi E além disso também já colocou tipo exemplos ó nome buy Luna disponível para adoção esse aqui tá esse aqui não sexo macho fêmea idade dois quatro né tipo Anos aí você poderia colocar também por data de nascimento o que você quisesse aqui temperamento história do Pet aqui também muito legal colocar ele

colocou colou até uma fotinha aqui ó que ele pegou de banco de imagem também olha que massa aqui não não mostra mas deixa eu colocar aqui galeria PR você ver ó já colocou até umas fotinhas aqui enfim a galeria aqui ele colocou alguns exemplos de imagem né enfim tem várias opções que você pode inclusive adicionar aqui mas Só de ter essa ajuda aqui da Inteligência Artificial já é massa PR caramba agora se você não quiser utilizar esse recurso aqui da Inteligência Artificial O que que você pode fazer Ah só um detalhezinho tá se você quiser

por exemplo editar um determinado tipo ah eu quero traduzir isso aqui você pode vir aqui por exemplo ó em temperamento aí você vai clicar aqui em editar E aí você pode colocar aqui ó Temperamento Pronto pode colocar Um textinho de ajuda aqui também e salvar esse conteúdo e aqui já vai est editado a mesma coisa pros Campos Ó você clica aqui como se fosse uma tabela no Excel você clica no campo coloca aqui o jeito que você quiser traduz isso aqui depois clica fora e ele já vai tá salvo e da mesma forma aqui nas

Galerias também ó você pode por exemplo clicar aqui no item você pode editar todos os campos aqui da forma que você quiser salvar e Aí depois isso já vai est dessa maneira também mas aqui ó eu vou fechar essa minha coleção aqui ele já apareceu aqui embaixo Beleza eu vou excluir aqui ó essa coleção porque foi mais para dar um exemplo mesmo vou confirmar aqui a exclusão clicar em excluir e beleza Tô só com a outra de novo vamos criar uma coleção só que agora do zero para vocês verem como é que funciona e é

claro né lembrando também que além dessa opção aqui você também pode simplesmente Importar um arquivo csv que ele já vai fazer essa importação aqui para dentro da plataforma do wix Studio e pegar todos esses campos e células que você adicionou mas bora começar uma aqui do zero também vou clicar aqui em próximo vou adicionar aqui o nome da minha coleção Vou colocar aqui ele de novo tipo Pets para adoção Vou colocar aqui que é uma coleção de vários itens se for um único item você seleciona essa opção aqui vou colocar essa vou clicar para Criar

E aí ó eu vou ter uma tabelinha completamente vazia então o que que eu posso fazer aqui ó de início ele já adiciona um campo de título como padrão então por exemplo eu posso clicar nesse Campo aqui clicar em editar e eu vou colocar por exemplo que esse aqui é um tipo de campo né de texto ok ele obriga que seja de texto esse primeiro campo pelo menos para ter algum tipo de identificação de cada Campo que você for adicionar aqui no nome do campo por Exemplo eu vou colocar nome do PET vou colocar seu

nome e aí aqui no texto de ajuda Por exemplo eu vou colocar pro cliente tipo adicione o nome do Pat Posso colocar mais explicações também tipo orientações tipo ah não pode exceder tanto caracteres né paraa pessoa já ter ideia ali de boas práticas na hora de adicionar essas coisas mas beleza Vou colocar aqui para salvar vou clicar em salvar e já tem o meu primeiro campo vou adicionar mais um campo por Exemplo ó vou vir aqui tem várias opções como por exemplo texto tem o Rich text também que dá mais opções de formatação de texto

como se fosse um mini wordzince Essa paradinha aqui de baixo que você vai entender do que que se trata né links itens com tags também que são aquelas opçõe inhas que eu mostrei para vocês tipo ah temperamento do Pet né Você pode toda vez ir colocando lá brincalhão calmo reservado não sei qu não sei o qu não sei quê ou você pode Colocar esse campo de tag onde cada vez que você adiciona uma nova característica isso vai sendo salvo e depois você pode só selecionar essa opção também tá fica mais fácil de ser adicionado Campo

boleano que é tipo de sim ou não verdadeiro falso Isso aqui é legal principalmente para você filtrar o que que vai aparecer ou não Por exemplo ah eu tô fazendo um site de Imobiliária então eu quero colocar tipo Quais são os imóveis que estão disponíveis Quais são Os que estão disponíveis para lançamento por exemplo aí você coloca um campo boleano e lá quando você for dispor essa lista né dos imóveis você coloca eu vou mostrar isso para vocês na prática Mas você coloca por exemplo mostrar apenas as que o campo de lançamento for verdadeiro aí

né você vai mostrar filtrado dessa forma a mesma coisa aqui por exemplo vou adicionar um campo boleano vou escolher e vou colocar disponibilidade por exemplo Disponibilidade e nossa esqueci como é que se escreve disponibilidade de adoção por exemplo aí eu posso colocar aqui desmarcar se o Pet já estiver adotado tá assim salvar e aí pronto já tem um campo aqui se a pessoa marcar aqui ele tá disponível se ela desmarcar ele não tá disponível para adoção então fica muito mais fácil por exemplo exemplo seu cliente chegar aqui né em vez del ele ter que ficar

excluindo páginas de pets e tudo mais Tipo ah o bury aqui já foi adotado vou desmarcar aqui essa opção Pronto já não vai mais aparecer na lista do site vou clicar aqui para adicionar mais um campo dessa vez por exemplo de imagem aqui ó deixa eu achar imagem imagem ó então eu vou colocar aqui imagem vou deixar imagem mesmo colocar a foto de destaque do Pet Lembrando que a gente tem imagem e tem Galeria de Imagens Imagem vai ser uma imagem só tá galeria você pode colocar mais de uma então vou clicar Aqui em salvar

já vai ter um campinho aqui e posso ir fazer nesse mesmo processo também ó tipo por exemplo tags né vou adicionar esse aqui colocar aqui para escolher vou colocar sexo eu posso escrever aqui inclusive tipo Escreva aí eu posso colocar especificamente o que a pessoa precisa escrever tipo macho ou fia para não ficar um monte de coisa tipo ah um sem acento outro com f minúsculo não sei que não sei que a pessoa já vai ter essa orientação salvar E aí ó vou já que a gente adicionou alguns Campos aqui acho que vocês já entenderam

a lógica por trás isso eu vou por exemplo vir aqui ó e vou colocar o nome de um pet Por exemplo Maria Vitória colocar aqui ah vou colocar tipo só mais um campo aqui também por exemplo um campo de texto aqui normal ó de texto vou colocar tipo espécie para dizer se é gato ou cachor vou colocar aqui espécie aí Enfim vou vou deixar sem texto de ajuda mesmo vou salvar vou colocar esse Campo de espécie para cá tá mas para poder ficar mais intuitivo na hora de preencher não que isso vá influenciar diretamente na

página de dinâmica que você for colocar lá no site Mas enfim vou colocar aqui gato aí perceba que é um tipo de texto né eu posso escrever o que eu quiser disponibilidade ele tá disponível para adoção Sim vou marcar imagem vou vir aqui por exemplo nas imagens e tem uma coisa muito legal aqui também ó tipo mídias do X onde você já Tem acesso a um banco de imagens gratuito violento aqui onde você pode simplesmente explorar tipo Vou colocar aqui Cat ou gato mesmo também aparece tanto em inglês como em português mas enfim ó vou

colocar por exemplo a foto desse gatinho aqui adicionar ao item E aí eu já tenho acesso diretamente essa imagem ó não sei se vocês viram mas também tem imagem do shutter Stock aqui que é um banco de imagens pago mas por exemplo se você gostar de alguma imagem Você já pode comprar diretamente por aqui também ou One Splash que é um banco de imagens na sua grande maioria gratuita onde Você pode adicionar por aqui também do mesmo jeito Isso facilita bastante o nosso dia a dia e aí eu vou colocar aqui sexo por exemplo vou

colocar fêmea e aí quando eu clicar para adicionar perceba que eu já tenho essa opção ó e aí nas próximas próximas vezes que eu for adicionar um sexo tipo já vai ser mais fácil de eu simplesmente Adicionar fêmea num Novo Campo de uma nova célula beleza a mesma coisa vai acontecer quando eu adicionar um macho aqui como tag também E aí eu não fico tendo esse retrabalho e assim por diante Ok se eu mudar aqui ó por exemplo pra galeria Olha só perceba que eu já tenho esse meu petzinho aqui e eu posso adicionar por

meio de card Aqui também tá que fica bem legal inclusive bem intuitivo pro seu cliente que às vezes a tabela pode ficar um pouco confuso fica Parecendo muito com o negócio do Excel e algumas pessoas não têm tanta usabilidade assim né dentro de planilhas aqui ela simplesmente coloca tipo caramelo aí coloca aqui espécie cachorro poderia colocar raça também SRD disponibilidade para adoção tipo não caramelo já foi adotado aí eu vim aqui em imagem Vou colocar aqui por exemplo um caramelinho aqui ó adicionar ao item aí sexo também ó vou adicionar uma tag Tá vendo como

já aparece fême aqui mas Agora eu vou colocar macho então eu vou adicionar uma nova tag eu vou colocar aqui em maxo E aí da próxima vez já vai aparecer essa tag também como opção posso clicar diretamente aqui para adicionar um novo Campo lembrando que quando você adiciona um novo campo em Um item esse campo também vai ser adicionado em todos os outros itens da tabela então talvez se você já tiver vários itens adicionados depois você vai ter que ir preenchendo esse campo nas Outras também vou clicar aqui para salvar e pronto ó já tenho

mais um item aqui na minha coleção e aqui na tabela aparece aqui do mesmo jeito também bem fácil da gente criar coleções aqui você pode colocar o campo que você quiser tipo ah pra propriedade se eu quero colocar a data de lançamento quero colocar os metros quadrados Quero colocar o valor enfim você pode colocar a quantidade de quarto você pode colocar o que você quiser dentro dessa Possibilidade de Campus aqui que inclusive dá para você fazer coisa para caramba tá inclusive ó até com umas paradinhas JavaScript aqui ó de objeto Array também pra galera que

sabe programar aí dá para fazer muita coisa fbia já entendi aí a base de como como é que é que funciona as coleções mas e todo o resto o que que eu faço né como é que eu mexo na minha página de item dos animais na minha página de lista como é que eu adiciona aquele frufru lá na Página inicial com alguns bichinhos já aparecendo o que que eu faço nessa minha vida calma tá eu vou falar agora enfim vou fechar aqui essa coleção que a gente fez de teste mesmo só para vocês entenderem como

é que funciona vou excluir Inclusive essa coleção aqui vou ficar só com aquela que eu já tinha pré adicionado ali beleza que lá já tem mais Campos e tal dá pra gente brincar mais vou excluir aqui essa coleção vou confirmar aqui exclusão excluir pi pi P Pó e tá temos aqui a nossa coleção de gatos e cachorros só que né que que a gente faz será que a gente vai vir aqui ó em páginas e a gente é só Adiciona uma nova página e vai colocando essas informações Tecnicamente sim mas tem um detalhe Ó você

vai clicar aqui em adicionar uma nova página e você vai adicionar uma nova página dinâmica ok Porque você tem as páginas normais como por exemplo essa Inicial aqui ou então essas páginas dinâmicas eu vou clicar Aqui para adicionar E aí você você pode tanto adicionar uma página de item né inclusive já tem até uns modelinhos aqui ó eu utilizei desses modelinhos também para facilitar um pouco a criação Mas você pode criar uma página completamente em branco e adicionando os itens personalizados da maneira que você quiser também não precisa seguir esses modelos aqui e você também

tem um padrãozinho aqui de página de lista bem bacaninha Onde você já tem o Grid ali Dos itens que você tem dentro da sua coleção eu vou começar adicionando uma página do item beleza Lembrando que aqui eu tô utilizando esse template lzinho que eles já disponibilizam mas você pode fazer o layout que você quiser nessa página de item também sem problema nenhum só você clicar aqui em Página em Branco e aí depois que você vê como que eu adiciono algumas coisas aqui você já vai entender mais ou menos como é que funciona a questão de

criação de layout Aqui dentro do X também aqui não é o foco desse vídeo mas se você quiser um conteúdo mais a fundo sobre isso tipo Bia me ensina a fazer layouts aqui eu quero criar um site inteiro e entender como é que funciona a criação de um layout dentro do wix beleza eu trago aqui para vocês no PR próximo vídeo mas para eu saber que você quer Eu quero que você coloque aqui nos comentários para mim também beleza para eu poder saber né pelo menos para ter uma base vou clicar Aqui em página de

item vou clicar para adicionar ao site ele vai criar essa página aqui para mim bonitinho tururu e voa lá olha só que bonitinho já tenho aqui uma mini pagin Zinha pronta inclusive ele já entendeu que é para fazer de acordo com essa minha coleção que eu tenho OK e ele já colocou aqui tipo uma imagem destacada aqui do meu bichinho colocou a história dele aqui embaixo também colocou o nome dele a idade aqui e tal e eu posso ir Adicionando outras coisas da forma que eu quiser tipo ah eu quero colocar aqui no meio que

o porte dele é pequeno então o porte desse cachorro né se é pequeno médio ou grande eu quero colocar aqui do lado se o temperamento dele é brincalhão bi b b b você vai adicionando esses campos por conta própria e ele também dá uma opção de pré-visualização de todos os itens que você tem cadastrados lá na sua coleção por exemplo vou colocar aqui a caramela E aí a caramelinho já Apareceu aqui para mim ó e eu posso tipo por modificar o visual desse site da forma que eu quiser por exemplo eu vou vir nessa célula

aqui em cima como a identidade desse site é branca azul e laranja vou vir aqui nesse background Vou colocar aqui um laranjinha que eu já adicionei É só você clicar aqui em adicionar e colocar o hexadecimal da cor que você quer Beleza vou clicar aqui esse laranjinha vou vir aqui também ó Nessa celulinha aqui embaixo também vou Fazer a mesma coisa e se você quiser ter acesso a todos os itens que tem aqui dentro da sua página você pode clicar aqui ó Nessa opção de de camadas e ele vai te mostrar como se fosse um

figm Zinho da vida sabe um figma photoshop enfim qualquer ferramenta que você já utilizou por aí o canva que tem esse negocinho assim de tipo um item embaixo do outro alguns itens podem estar agrupados e tal ó por exemplo aqui eu tenho o meu header né que é esse meu Menu aqui dentro dele eu tenho essa pilha aqui eu tenho um menu horizontal que não tá aparecendo porque eu não cadastrei enfim aqui eu tenho minha grade de seleção aqui embaixo também ó onde eu tenho uma célula com esses itens aqui e assim por diante beleza

eu tenho acesso a todas as camadinhas aqui dos meus itens no site e às vezes fica mais fácil de você conseguir movimentar ou então adicionar um novo item por aqui também e aí eu posso ir fazendo aqui a Modificação que eu quiser por exemplo á aqui na minha mídia aqui ele Já puxou diretamente né Essa minha imagem eu vou mostrar aqui como que você faz essa conexão também mas enfim eu posso vir aqui na minha outra abinha aqui né de edição eu posso vir por exemplo aqui em design e aí eu quero por exemplo Deixar

os cantos mais arredondados aí eu venho aqui por exemplo ó e coloco 20 pixels aqui de arredondamento nos campos se eu clicar aqui em outro lugar você pode Perceber que minha imagem já ficou mais arredondada e fazer a edição que eu quiser tipo ah eu quero que ele fique no formato um pouquinho diferente por exemplo eu quero mudar aqui o tamanho dessa imagem acho que eu tava clicando em outra coisa ó vou clicar aqui na minha imagem e aí eu vou adicionar por exemplo vou mudar aqui a altura dela quero colocar por exemplo uma altura

de 800 porque a minha imagem é mais quadradinha aí tá Inclusive eu poderia Até ter colocado umas imagens com a qualidade um pouquinho melhor tá gente aqui eu tinha colocado uma imagem pequenininha mas enfim é só para fins de explicação mesmo assim é só exemplificação e aí aqui embaixo por exemplo ó então aqui em cima onde eu quiser na verdade eu posso ir adicionando detalhes a respeito desse Pat e ir estilizando a minha página do jeito que eu quiser também aí então né como é que eu faço para adicionar os Elementos aqui mesmo dentro da

minha página tipo além da história eu quero também ter outras informações como o sexo do do Pet temperamento não sei o que eu quero colocar todas as informações que eu adicionei lá na minha coleção PR as pessoas saberem disso por exemplo ó eu vou aumentar aqui um pouquinho esse meu contêiner Ok para poder adicionar alguns outros elementos aqui vou puxar um pouquinho mais e aí depois eu posso regular isso aqui de Forma automática de acordo com a quantidade de itens que eu fou adicionando é só a título de exemplificação mesmo vou pegar aqui ó no

maizinho eu vou pegar um título aqui vou arrastar para cá E aí eu posso colocar aonde eu quiser aqui nessa minha página beleza ó vou colocar aqui embaixo e eu vou colocar por exemplo vou colocar só sexo aqui dois pontos vou diminuir um pouquinho aqui esse texto vou vir aqui em design e aí Vou colocar aqui uma tag HTML H3 como título de terceiro nível vou diminuir um pouco aqui ó vou colocar tipo uns 20 acho que assim tá bom e agora eu vou clicar aqui no mais vou clicar aqui nessa opção de texto e

vou por exemplo adicionar um paragrafo aqui ó vou arrastar esse parágrafo para cá e eu posso aumentar aqui também ó vou colocar por exemplo até aqui e aí eu posso colocar o texto aqui din icamente beleza faz sentido eu vir aqui e colocar tipo fêmea vou vir aqui e vou digitar Fêmea não porque se eu fizer isso eu vou est colocando que todos os pets são fêmea Eu quero puxar essa informação o quê dinamicamente dentro da minha página então o que que na verdade eu vou fazer eu vou vir aqui ó Nessa cobrinha aqui né

de conexão vou colocar conectar ao cms ele vai vir para essa aba aqui do lado Ok você pode também clicar nessa opção aqui e aí eu vou colocar a conexão desse texto ó vou colocar que esse texto se conecta ao qu aí eu já vou acesso aos Campos da Minha coleção Beleza eu vou vir aqui ó em Cadê ver aqui procurar vou colocar aqui sexo e aí ele já vai puxar aqui automaticamente esse texto para mim ok ele já vai estar conectado a esse campo ficou fêmea porque eu já tinha digitado fêmea mas eu vou

dar outros exemplos aqui que você vai ver isso puxando automaticamente inclusive ó vou clicar aqui vou selecionar esses dois Campos aqui segurando shift vou dar um cont CRL C vou colar aqui embaixo para Já ter esses dois campinhos aqui do meu lado beleza depois a gente empil isso melhor mas aqui ó vou colocar por exemplo agora ó vou colocar temperamento colocar temperamento do bichinho aqui aí eu posso vir aqui novamente venho aqui no meu campo de conexão e agora eu coloco com o outro campo de temperamento ó e ele já vai puxar do jeito aqui

que eu quero beleza vou fazer a mesma coisa pros Campos que eu quiser beleza ó vou vou vir aqui vou aumentar inclusive aqui Um pouquinho essa minha sessão para adicionar mais coisas vou vir aqui eu posso fazer isso em camadas também tá gente se para vocês forem melhor ó vou vir por exemplo nesses dois Campos aqui vou dar um control v e aí ele vai puxar aqui para mim vou puxar aqui para baixo ó vou vou vir aqui vou puxar aqui um pouquinho para baixo Vou colocar aqui a setinha para baixo e aí eu posso

simplesmente puxar aqui depois e trazer para cá aí eu vou colocar aqui outra Outra coisa por exemplo até lemb até esqueci dos Campos que tem ou não por exemplo vou colocar vacinas Vou colocar aqui é vacinado é vacinado Mouse ah pronto pronto é vacinado Beleza vou colocar aqui né mais uma vez conexão do texto Vou colocar aqui o campo de vacinas vacinas completas já apareceu aqui para mim bonitinho AB eu quero adicionar em outra parte da página Beleza você pode ir no campo que você quer inclusive é rapidinho eu vou Selecionar todos esses campos aqui

que eu fui adicionando ó vou colocar esse esse todos esses campos aqui tá segurando o shift vou vir aqui com o botão direito e vou colocar em empilhar vou colocar empilhar verticalmente ele vai vai criar uma pilh fazinha aqui para mim onde eu posso simplesmente ó Inclusive eu vou colocar esse cada um desses aqui dentro de uma pilha também vou colocar empilhar cada um deles eu vou colocar empilhar verticalmente do Mesmo jeito esses campinhos aqui também ó o temperamento por quê Porque aí eu consigo mexer noos espaçamentos de uma forma mais organizada vou empilhar aqui

esses aqui verticalmente também esses aqui também verticalmente empilhar Ok E aí ó eu posso simplesmente vir aqui dentro dessa minha pilha principal e adicionar aqui um espaçamento entre itens por exemplo eu posso mudar aqui a unidade de medida para pixels eu vou colocar aqui 20 pixels ele já vai deixar Isso aqui bonitinho para mim também ok isso aí facilita um pouquinho e aí mais uma vez eu posso adicionar esses campos dinâmicos na parte da página que eu quiser por exemplo eu posso vir aqui nessa partezinha aqui do header onde tem o nome a idade eu

posso clicar aqui por exemplo nesse texto aqui clicar com o botão direito vou duplicar esse item E aí por exemplo ó eu vou editar esse texto aqui eu vou colocar aliás acho que eu nem nem vou colocar nada vou deixar Só a espécie mesmo por exemplo para saber a idade e a espécie aqui desse cachorro vou trocar aqui ó vou colocar espécie Cadê espécie na verdade é para dizer que é cachorro ou gato né mas isso aí já é meio Óbvio Então vou colocar na verdade a raça do cachorro a caramelinho aqui é o SRD

bem bonitinho como isso aqui tá dentro de uma pilha eu posso inclusive diminuir por exemplo eu vou vir vou adicionar esses dois aqui na verdade numa pilha vou empilhar aqui Verticalmente E aí eu vou mudar aqui ó a unidade de medida vou colocar pixels vou colocar por exemplo acho que um espaçamento de 15 pixels deixa eu ver como é que fica acho que um pouquinho Menor Vou colocar cinco pixels E aí ó Prontinho tá vendo já fica mais próximo eu posso colocar aqui posso colocar em outro canto da minha página posso colocar em cima dessa

imagem posso adicionar uma nova sessão também colocar essas informações através de cards enfim Você pode utilizar aqui do jeitinho que você quiser é só para te explicar como é que funciona esse lance da conexão dos itens que a gente tem dentro da nossa coleção mas Então já temos aqui né um exemplo da nossa página de cada item que seria cada PET disponível aqui paraa adoção né Por exemplo se eu clicar aqui em qualquer Pet vocês vão ver aqui um exemplo dessa mesma página já pré formatada Mas eu também preciso da minha página de lista desses

Pets para que as Pessoas consigam ver um gridz lá com todos os pets disponíveis E aí como é que eu faço isso adicionando aqui ó na abinha de páginas uma nova página dinâmica aqui nesse site E aí é só eu novamente né clicar aqui em adicionar uma nova página né clicar aqui em página dinâmica Ok eu vou adicionar essa página de lista aqui ó pro mapa do meu site vamos clicar aqui olha só que bonitinho já tá criando aqui para mim uma nova página de lista dessa vez ele já Puxa Aqui uns cardz inhos bonitinhos

e já puxa automaticamente também essa minha mesma coleção novamente você não precisa seguir Exatamente esse mesmo modelo Aqui você pode utilizar da forma que você quiser aqui dentro do painel de edição do X a gente tem um monte de opções tanto de recurso que você pode utilizar e cada um desses recursos também ó como por exemplo aqui vou colocar um Vou colocar aqui ó um parágrafo um colocar aqui um texto estilo de texto aliás vou Colocar um título aqui clique nesse título tem um monte de opções ó tanto de edição aqui desse lado como também

se eu quiser efeitos de animação também que eu posso colocar tem várias funcionalidades aqui Inclusive a de conexão que vocês já viram aqui também não vou entrar nesse lance aqui de personalização de layout Mas sabe que você pode brincar aqui da forma que você quiser também mas bora lá né Vamos começar a editar aqui algumas coisinhas nessa página por exemplo aqui Ele puxou o nome da minha coleção mas eu vou clicar aqui em adicionar textos e vou colocar um outro nominho aqui para isso vou colocar editar aqui vou clicar duas vezes e vou colocar por

exemplo Pets lindos disponíveis disponíveis para adoção ele colocou aqui para duas linhas né mas eu vou aumentar aqui isso aqui um pouquinho deixar numa linha só vou vir aqui por exemplo vou Editar o texto desse meu título e legal já ficou bonitinho aqui agora eu posso editar Esse meu Grid aqui também então ó o que que é esse Grid na verdade esse Grid nada mais é ó vindo aqui na minha camada é o widget aqui dentro do XX Studio que se chama repetidor beleza dentro desse repetidor nós temos vários itens aqui que são justamente esses

petzinho que a gente tem aqui do lado beleza esse repetidor a gente ainda vai ver isso aqui melhor na página inicial mas basicamente é um editing em que você em cada item cada elemento que você coloca Dentro de cada um desses itens aqui ó se por exemplo eu vou vir aqui e vou arrastar um texto para um desses itens ó vou vir aqui em mais vou vir aqui em texto vou adicionar aqui um parágrafo para um desses itens aqui por exemplo percebe que ele já repete esse mesmo elemento em todos os outros itens dentro desse

repetidor Ok então isso aqui é uma forma muito fácil da gente adicionar elementos e não tem que ficar fazendo isso em cada um deles tá vou dar um cont Crol Z aqui só para tirar esse parágrafo mas basicamente é isso E aí ó dentro de cada um desses itens aqui por exemplo Vou colocar até uma coisinha aqui a mais ó cada um desses itens tem uma pilha eu vou duplicar aqui esse parágrafo por exemplo e vou colocar a raça do cachorro ou do gato né O que seja vamos vir aqui ó Vamos conectar aqui a

raça dele e aí pronto ó já vai aparecer aqui também AB Eu quero mudar o espaçamento Entre esses dois aqui beleza ó faz uma nova pilha Entre esses dois vou clicar aqui com o botão direito empilhar vou empilhar aqui ver aumente mesmo e aí aqui eu vou diminuir esse espaçamento por exemplo eu vou colocar de 1% e ver se fica melhor ó tá vendo ele já ficou mais arrumadinho aqui né do jeito que eu queria vou fazer o seguinte também ó vamos dar uma estilizada aqui nesse negócio vamos vir aqui nesse botão Vamos alterar o

texto dele ó vou colocar saber mais vamos adicionar aqui e aí cada um desses Elementos Você pode adicionar a conexão que você quiser por exemplo aqui no botão ó se eu vir aqui nesse meu iten Zinho aqui de conexão com cms eu posso adicionar tanto um link de conexão com meu clique por exemplo aqui não tá conectado mas eu quero que cada um desses botões aqui no momento que a pessoa clicar ela vá pra página de item daquele Pet especificamente então eu vou colocar aqui ó que eu quero que ele Conecte ao item desse elemento

aqui né Desse item da coleção então toda vez que a pessoa clicar ela vai pra página do Pet Eu posso estilizar aqui também do jeito que quiser por exemplo vou vir aqui nesse botãozinho aqui vou clicar aqui na camada do botão vou vir aqui na AB de design Vamos colocar aqui um background diferente para esse botão Vamos colocar Azul Ok E aí ao passar o mouse eu quero que ele fique laranja não mostra aqui na pré-visualização mas eu já mostro para vocês aqui ó nesse item Do olhinho eu quero vir aqui na parte de canto

também que é na parte aqui de borda deixa eu ver não borda é para colocar realmente uma bordinha aqui acho que eu preciso voltar aqui na aba de Normal beleza agora tenho acesso ao canto aqui quero colocar por exemplo um cantinho aqui nem que seja de cinco Pixel já arredondamento eu vou colocar um pouquinho maior para vocês conseguirem ver ó vou colocar 10 pixels aqui perceba que todos os outros botões Já arredondar também isso aqui é uma mão na roda quando a gente vai estilizar aqui ou fazer qualquer coisa dentro dessa página vou fazer a

mesma coisa com essa imagem aqui também ó por exemplo vou vir aqui vou vir aqui em Cantos vou colocar um arredondamento aqui de 20 pixels só para deixar mais arredondados mesmo posso vir aqui por exemplo nessa página e mudar o estilo dela ó por exemplo eu quero vir aqui nessa minha parte da grade de seleção vou mudar aqui A cor do meu background para essa corzinha aqui ó que é um cinza mais clarinho e ao mesmo tempo também nessa parte aqui do repetidor em si nessa célula aqui onde tá o repetidor eu quero colocar aqui

ó um background Branco pegando todos esses itens aqui vou colocar um pading nessa paradinha aqui ó vou colocar um bed por exemplo de vamos ver 10% para ver como é que fica não 10% é muito vou colocar CCO ó já deu uma melhoradinha aqui vamos clicar aqui fora Para ver como é que tá acho que eu vou colocar até um pouco menos vou vir aqui na célula de novo eu falei que eu não ia mexer no design Mas acabo futricando com isso né Eu nunca me aguento colocar aqui três para todos esses lados aqui acho

que vai ficar um pouquinho melhor aqui Opa 53 não colocar três nesse último aqui também e beleza ó já deu uma melhora aqui vou colocar nos cantos também um arredondamento de 20 pixels E aí quando eu deixa eu visualizar aqui ó No olhinho para ver como é que tá ficando Olha só passando o mouse fica laranjinha eu criei tipo como se fosse um papelzinho aqui com todos os grids sabe para poder deixar um pouco mais bonitinho vou clicar aqui para editar o site de novo e beleza já tenho aqui o meu Grid bem legal inclusive

na visualização Olha só vou clicar aqui para visualizar E aí eu quero clicar aqui por exemplo no Charlie vou saber mais sobre ele e aí já tenho aqui ó Charlie 5 meses SRD tem aqui a historinha dele macho ah temperamento Tá macho aqui ó tem que editar isso aqui é vacinado vacinas incompletas eu posso ir adicionando os campos que eu quiser vou clicar inclusive aqui para editar site E aí editando em qual bichinho que seja eu posso simplesmente vir aqui nesse Campo vou clicar aqui na parte de conexão e vou colocar aqui ó já tá

para temperamento Na verdade acho que foi um bugzinho aqui ó vou colocar para outro Vou voltar aqui para temperamento para ver se ele puxa Ok a que já fez aqui o salvamento automático vou clicar aqui para visualizar de novo e vamos ver aqui ó ah agora Já puxou aqui temperamento amigável brincalhão e carinhoso às vezes pode dar uns bugzin assim como qualquer ferramenta beleza mas aí qualquer coisa você clica em outra opção clica de novo que ele volta aqui na segmentação direitinho então ó já temos basicamente né aqui quando a gente vem aqui nas Nossas

páginas já tenho aqui a nossa página de lista dos Pets Ok onde puxa essas informações aqui se eu quiser colocar mais coisas eu coloco também e eu já tenho aqui a minha página de item de cada PET né onde já Puxa aqui dinamicamente que mais que a gente pode fazer a gente pode colocar um link para isso por exemplo lá na nossa página inicial a gente pode colocar aqui os bichinhos que estão disponíveis pra adoção nessa sessão aqui que eu já Deixei separada para isso então ó primeiro de tudo vou mudar aqui esse título vou

colocar Pets em vez de doguinhos vou trocar aqui para Pets disponíveis para adoção beleza Já puxou aqui e aí embaixo disso aqui ó vou puxar aqui a camada já tenho aqui uma célula eu vou colocar logo aqui embaixo um repetidor que é aquele mesmo recurso que a gente utilizou lá naquela página de lista dos itens também Ok eu vou usar esse mesmo recurso só que aqui agora Como é que eu faço para adicionar esse repetidor eu venho aqui nesse mais aqui dos elementos ele já fica aqui em ações rápidas repetidor ou então eu posso simplesmente

vir aqui na minha abinha de busca e procurar aqui por repetidor que ele também aparece aqui tá bom então Ó vou clicar aqui em repetidor mesmo vou arrastar Aqui para baixo nessa minha sessão pronto ó já tenho aqui um iten Zinho de repetidor dessa vez completamente vazio né eu posso Adicionar os elementos que eu quiser aqui dentro e aqui nessa aqui do lado também ó eu tenho várias opções de design assim como eu já mostrei aqui outras vezes antes da gente mexer no design Bora colocar aqui alguns elementos dentro desse repetidor vou vir aqui em

mais vou colocar por exemplo uma imagem e por que que eu tô repetindo essas coisas para vocês reforçarem bem Como é que é que faz esse negócio aqui dentro então Ó vou vir aqui por exemplo Imagem vou modificar aqui o tamanho um pouquinho vou centralizar posso vir aqui novamente em Cantos Vou colocar aqui um arredondamento de 10 pixels e aqui vou colocar um pouquinho mais por causa dos negócios redondinho Vou colocar aqui 15 pixels E aí né estando aqui com a minha imagem clicada eu posso clicar aqui em conexões conectar ao cms ou então eu

posso vir direto aqui vou clicar aqui em adicionar conjunto de dados Vou colocar aqui a coleção no qual eu quero Adicionar ó vou colocar aqui cachorros e gatos vou adicionar o nome desse meu conjunto de dados vou deixar desse jeito mesmo cachorros e gatos dataset ou então vou colocar aqui banco Vou colocar aqui conjunto de dados é opcional vou clicar aqui para criar E aí agora sim ó Eu posso colocar aqui no a fonte no qual isso aqui esse repetidor vai se conectar vou clicar aqui novamente na parte de imagens Vou colocar aqui a fonte

da imagem se conecta a foto mesmo do Bichinho a foto imagem e aí agora ele vai mais facilmente adicionar os elementos conforme a minha disponibilidade da coleção Bia Mas pelo amor de Deus na página inicial Na verdade eu quero só alguns bichinhos como é que eu faço isso Calma tá que eu ainda vou mostrar vou voltar aqui rapidinho no meu repetidor só para ficar mais fácil da gente visualizar ó vou voltar aqui na minha camadinha do repetidor E aí eu vou clicar nesse iten Zinho de se esticar aqui para ele se esticar a toda a

página eu posso inclusive já vir aqui ó nessas imagenzinha de cada item posso vir aqui na parte do Design posso colocar uma largura específica ó por exemplo eu quero colocar uma altura de 250 pixels aqui para essa imagem aí ó já fica encaixado um pouquinho mhor e eu posso ir adicionando itens aqui dentro desses meus cards também para já aliviar essa agonia de estar todos os bichos aqui na Verdade acho que é melhor a gente colocar só uns três ou quatro nessa página inicial e a pessoa clicar para ver mais ó eu vou vir aqui

nessa conexão aqui também vou clicar aqui em configurações do conjunto de dados e eu vou colocar ó tipo máximo de itens exibidos por exemplo vou colocar aqui quatro ele vai aparecer desse jeito aqui e agora aqui na parte de design do meu repetidor olha aqui ó na parte de design vou vir aqui em embaixo eu vou colocar Quatro itens por linha pronto ó já deu uma melhorada aí né já dá um pouco mais de agonia menos de agonia aliás e depois esses cards aqui eu vou colocar um botão também pra pessoa clicar e ela ser

levada pra lista de todos os pezinhos Tá mas antes vamos terminar aqui esse lance do repetidor ó vou voltar aqui nas minhas camadinhas então vamos vir aqui em cada item por exemplo desse repetidor eu já vou dar uma estilizado aqui ó vou colocar 20 pixels de arredondamento aí Né eu posso inclusive aumentar aqui ó o tamanho de esse meu Card ele já aumenta dos outros também posso vir aqui ó em mais vou adicionar um texto aqui vamos vir aqui em texto Vamos colocar um título Zinho aqui ó vou colocar um Na verdade acho que seria

melhor um R TR mas tá tudo bem também isso aí é detalhezinho vamos só adicionando aqui os itens ó vou colocar o textinho aqui Vamos diminuir o tamanho desse título para ele não ficar se sobrepondo ó vou Colocar até o final da imagem Vamos colocar um tamanho aqui de 20 e aí aqui no conector né eu vou colocar aqui esse texto aqui se conecta a Vou colocar aqui o nome do bichinho nome dele já aparece aqui para mim vou clicar aqui em camadas né vou ver se tá tudo certinho beleza vou vir aqui em texto

agora novamente e vou colocar aqui um parágrafo aqui embaixo desse item vamos arrastar aqui direitinho vou diminuir novamente esse item aqui até o tamanho final da Imagem E aí vou vir aqui em conexão vou colocar por exemplo aqui idade Ele já vai aparecer aqui desse jeito bonitinho vou clicar aqui na novamente para duplicar agora esse item vamos clicar aqui para duplicar E aí eu vou colocar aqui alinhado bonitinho e vou colocar outro elemento por exemplo espécie né alguma coisa que faça sentido de acordo com o Card que você tá montando colocar aqui raça na verdade

e ele já vai dar uma carregada aqui às vezes ele pode Desalinhar um pouquinho mas aí não tem problema também você pode vir aqui ó selecionar o item na camada vou vir aqui esse aqui vou puxar um pouquinho com a seta para cima só para conseguir puxar e aí agora vou pegar e vou arrastar isso aqui pro lado beleza posso colocar um botãozinho aqui de ver o bichinho também ó colocar aqui e em mais vou vir aqui em ações rápidas vou adicionar um botão aqui embaixo ó poss colocar esse botãozinho aqui vou alterar o texto

dele Tipo saber mais por exemplo aí eu posso estilizar aqui também da forma que eu quiser tá vou vir aqui no design Vamos colocar aqui uma corzinha para ele vamos colocar aqui deixa eu ver um um cantinho arredondado também vamos colocar uns 15 aqui muito vou colar uns 10 e assim por diante beleza gente só para vocês entenderem ó posso vir aqui também nesses meus iten zinhos aqui ó vamos pegar todos esses itens aqui vamos colocar eles em pilha vou empilhar vou Regular o espaçamento a partir do momento que eles estiverem dentro de uma pilha

Então vou colocar aqui por exemplo um espaçamento na parte que de design né Vou colocar aqui um espaçamento em pixels de Vamos ver acho que 30 pixels é muito vamos colocar uns 15 pixels para ver como é que fica é muito ainda vamos colocar ficar um cinco ó já ficou mais pertinho aqui Tá bonitinho acho que é esse aqui eu vou aumentar um pouquinho mais ó eu posso vir aqui diretamente Arrastar um pouquinho mais vou deixar um pouquinho mais separado e beleza ó já temos um cardz inho básico aqui para poder deixar no nosso site

OK posso vir aqui também no meu repetidor Então vou vir aqui no repetidor vou vir aqui na parte de design eu posso colocar um espaçamento Entre esses itens também então Ó vou colocar um intervalo aqui de 30 aqui aqui ó de um card para outro acho que talvez um pouquinho menos colocar 20 aqui e já fica um pouquinho Melhor agora já tendo aqui né uma listinha de cards eu vou tentar adicionar um botãozinho aqui pra gente ter acesso a a lista completa dos Pets né então vou vir aqui nesse maizinho vou adicionar um botão aqui

ó eu pensei em colocar aqui embaixo mas acho que na verdade eu vou colocar aqui em cima só para ficar com layout um pouco mais diferentinho Então vou arrastar um botão para cá vou alinhar ele aqui nessa parte final Vamos aumentar um pouquinho o Tamanho desse botão para ficar pegando aqui vou pegar essa parte do título aqui vou deixar desse lado alinhada aqui e tá tem um layout aqui um pouquinho diferente agora vamos vir aqui nos cantos por exemplo colar aqui ó 15 pi de cantinho colar um background azul aqui para esse botão Vamos alterar

o texto desse botão também por exemplo ver todos PS toos os PS desse jeito aqui vamos estilizar um pouquinho esse texto aqui também né vamos vir aqui no botão Estilizado vamos vir aqui nessa parte de texto vou deixar branquinho mesmo e vou aumentar um pouquinho o tamanho dessa fonte um pixel não né pelo amor Deus vou colocar aqui 16 vou aumentar aqui o tamanho nesse botão também deixar ele um pouquinho maior e legal já temos um botão aqui que inclusive eu vou vir aqui na parte das conexões e vou conectar esse botão aqui ó a

essa parte aqui de deixa eu colocar aqui esse título aqui se conecta a Página né Vamos colocar esse botão aqui conectado às páginas dinâmicas e eu vou colocar aqui a opção de lista esse botão aqui eu conectei né se eu não me engano vou vir aqui nas camadinhas vou selecionar esse botão aqui às vezes é melhor conectar aqui pela camada Então vou vir aqui no botãozinho vai dechin tá não conectado aqui ó vamos vir aqui então Vamos colocar o item de cada Doguinho aqui também né às vezes ele dá essa esse bug no carregamento mas

tá Tudo bem vou clicar aqui no item novamente pilha vamos vir aqui ó e vamos colocar tá conectada aqui deixa eu ver o que que aconteceu acho que provavelmente deve ter sido só um bugzinho aqui no carregamento vou clicar aqui para visualizar é foi realmente só um bugzinho ali na edição vou clicar aqui para editar de novo e Ok já estamos aqui todos conectados e lembrando aqui também ó que eu acabei não mostrando para você mas nessa parte aqui do botão a gente Tem tanta conecção do próprio botão em si né que eu coloco a

página no qual eu quero que esse botão esteja conectado Eu posso colocar aqui para abrir tanto na janela atual como em uma nova janela o que dentro de da navegação de um mesmo site não é uma boa prática muito legal legal assim no quesito de usabilidade normalmente a gente usa esse recurso para quando a gente quer fazer um carregamento externo né para um outro site um link externo e eu também posso Conectar o Label por exemplo posso colocar aqui espécie aí vai aparecer a espécie do cachorro aqui nesse botão o que nesse caso não faz

muito sentido Então vou colocar aqui não conectado E vou deixar esse texto personalizado aqui que eu coloquei que é o saber mais e eu sei que você pode estar se perguntando táia mas eu lembro que tem vários bichinhos lá na sua coleção né Ó vou vir aqui em coleção duas coleções vou abrir aqui tem vários bichinhos que já não Estão mais disponíveis pra adoção Olha só se a gente vir aqui para essa parte da tabela tem vários aqui que estão desmarcados eles não deveriam aparecer nessa lista né então o que que eu faço para isso

acontecer né para filtrar só pelos bichinhos que estão realmente disponíveis a gente vai fazer o seguinte ó eu vou vir aqui nas minhas camadas vou vir aqui em repetidor E aqui nessa parte aqui de conexão eu vou clicar aqui em configuração do conjunto de dados E aí Eu vou vir aqui em adicionar um filtro para esse meu carregamento vou clicar aqui ó e vou colocar Qual que é o campo que eu quero fazer essa validação E aí Isso aqui é sempre bom você colocar por exemplo um campo boleano né fica mais fácil do sistema que

identificar se aquilo é verdadeiro ou falso e ele vai puxar essa informação para você por exemplo vou vir aqui no meu campo de disponível para adoção que é um campo buano eu vou colocar essa condição aqui É verdadeira né ou seja está marcado lá na tabela dela então vai aparecer então vou clicar aqui para adicionar filtro e aí dessa forma aqui não vai fazer diferença porque tá aparecendo só quatro bichinhos e coincidentemente esses quatro bichinhos aqui estavam pra adoção Mas se por exemplo eu vir aqui ó tá vendo que tá aparecendo rufos aqui eu vou

vir aqui na minha coleção suas coleções vou clicar aqui vou procurar o rufus aqui na minha tabelinha rufus Rufus tá aqui ó o bichinho já no segundo lugar e aí eu vou vir aqui no campo da disponibilidade e vou desmarcar pro rufus V vir aqui já salva automaticamente Vou atualizar essa parta na verdade Nem precisou atualizar Olha só o rufus já sumiu daqui porque a condição de disponibilidade dele é falsa ou seja está desmarcada e por conta daquele filtro que a gente adicionou ele não vai aparecer aqui mais Bia eu deveria fazer isso inclusive lá

na nossa Listinha também né na nossa página de itens sim com certeza você vai ver aqui novamente nas suas páginas a gente vai vir aqui em lista vamos clicar aqui no Edit aqui de repetidor beleza que é a mesma coisa que a gente fez na home Então já fica até mais fácil de depois caso tipo você queira estilizar aí da forma que você quiser tipo ah eu não quero usar esse negócio aqui eu quero fazer o repetidor da forma que eu quiser é só você utilizar esse mesmo recurso Vou vir aqui em repetidor novamente vou

vir aqui nos campos de conexão vou clicar aqui na configuração de conjunto de dados novamente vou adicionar um filtro e aí eu vou colocar aquela questão lá ó da disponibilidade paraa adoção vamos vir aqui cadê cadê cadê disponibilidade não tô achando aqui disponível para adoção vou colocar se a condição for verdadeira né se o campo estiver marcado Eu quero que você mostre isso para mim Vou adicionar isso ao filtro e aí ele automaticamente já vai puxar aqui ó só os bichinhos que estiverem disponíveis para adoção E aí quando o seu cliente tiver que mexer vai

ser muito mais fácil porque ele pode simplesmente vir aqui na coleção e não precisa ser nem necessariamente na página ele pode vir por exemplo aqui ó no dashboard mesmo lá onde ele vai ter acesso vou clicar aqui no painel de controle vou clicar aqui nessa parte do cms E aí Você pode montar tudo isso de uma forma bem intuitiva pro seu cliente também ele vai vir aqui ó na coleção de cachorros e gatos que foi criada e aqui tá vendo ó Ele pode simplesmente vir aqui na tabelinha tipo ah as dinger aqui ela foi adotada

né então o que que eu posso fazer eu posso vir aqui na parte de disponível inclusive aqui ela já já tava desmarcada vou pegar outro aqui tipo Snow aqui foi adotado o que que eu posso fazer posso vir aqui ó e desmarcar a Disponibilidade dele a partir do momento que fizer isso lá no site já não vai mais aparecer o snow Ah eu quero adicionar um outro bichinho o que que eu posso fazer você pode por exemplo ó vir aqui em adicionar item né tanto na opção de tabela como também aqui na de galeria Beleza

você pode ou clicar aqui para adicionar um item então vir aqui e adicionar um novo item aí você vai colocar o que você quiser tipo por exemplo Ah eu quero um novo Bichinho vou Adicionar um novo bichinho que chegou aqui pra gente o banana Você vai clicar aqui na foto vai adicionar uma foto aqui eu já adicionei alguns p na coleção aí inclusive você pode vir aqui ó clicar em upload fazer um upload aqui do seu computador então arrastar esse item para cá mas aqui eu vou pegar o deixa eu ver aqui ah na verdade

eu tinha colocado o nome dele como Jack mas banana é mais legal né Vamos deixar assim então vou clicar aqui vou adicionar esse item Beleza já tem a fotinha aqui vamos colocar a espécie a tag do cachorro que eu já tinha adicionado a raça também ele é um SRD bem bonitinho Vamos colocar a idade aqui do bananinha Vamos colocar sei lá 5 anos aqui para ele vamos colocar o porte para ele também ó vou colocar um porte médio sexo vou colocar que ele é machinho castrado vou colocar que ele é castrado vacina vou falar vacinas

completas e aqui em temperamento por exemplo vou colocar que ele é tipo Vou colocar que ele é agitado que ele é brincalhão que ele deixa eu ver protetor enfim né eu posso colocar se dar bem com crianças e eu posso inclusive adicionar outras coisas aqui também colocar uma historiazinha fictícia aqui tipo banana é muito fofinho e foi encontrado em uma praça com seus olhinhos vindos diretamente mente da coitado holândia quem adotar vai amar sei lá aluma coisa assim vamos deixar assim vamos colocar que ele tá Disponível para adoção Vou colocar aqui um contato qualquer tipo

contato @pa felizes felizes.com.br vou colocar um mail to aqui para quando a pessoa clicar já ser direcionado pro e-mail e tá vamos deixar desse jeito aqui e vou clicar para sal salvar para adicionar esse item aqui na nossa coleção já temos esse item e ele vai aparecer aqui automaticamente na nossa tabelinha também então o snow é para deixar de aparecer porque a gente Colocou que ele não tá mais disponível pra adoção ah inclusive não acho que não puxou aquela hora vou colocar aqui ó vou editar né falando que ele não tá disponível para adoção agora

ó vamos vir aqui na nossa pagin Zinha vou voltar aqui em wix Studio vamos ver se vai aparecer assim mesmo né Vamos clicar aqui ó na nossa página que a gente estava fazendo que é esse modelo aqui de site de adoção vamos clicar aqui para editar E aí ó agora aqui na nossa página De lista por exemplo como a gente pode ver ó o banana já apareceu aqui pra gente né o novo bichinho adicionado e ao mesmo tempo ó se a gente procurar aqui na nossa lista a gente não vai ver o snow que a

gente já tinha colocado como não disponível mais pra adoção inclusive é um detalhezinho aqui que acho que eu esqueci de configurar ó vou vir aqui no nosso repetidor Ok vou vir aqui na camadinha do repetidor vamos vir aqui na parte das conexões configuração com Conjunto de bar de dados né eu vou colocar por exemplo aqui ó o máximo de itens exibidos como 50 porque vamos supor que a minha onga aqui ela tem capacidade para 50 bichinhos Então pode ter até 50 animais para aparecer todos né eu vou deixar aqui em vez de 12 porque aí

mas como você pode ver o snow realmente não apareceu porque a gente desmarcou lá essa opção então massa ó vou clicar aqui para publicar né já tenho aqui a opção inclusive de utilizar Um domínio gratuito pelo Wix Studio eu posso colocar por exemplo Patinhas traço felizes aqui e eu vou ter acesso a essa página Eu posso também ter um domínio personalizado desde que eu Assine um dos planos aqui da plataforma também tá gente inclusive mais uma vez se vocês quiserem ter acesso a mais informações sobre como que funciona o X Studio inclusive quiser praticar aqui

por conta própria também nessa opção gratuita da forma que eu tô mostrando aqui para Vocês É só vocês clicarem no link que vai est aqui na descrição e conhecer mais sobre a ferramenta ele acabou sumindo aqui ó vou colocar a patinha felizes Ok vamos salvar aqui e continuar e Prontinho ó agora já temos o nosso site publicado vou clicar aqui para ver o site aí olha só nós já temos aqui o nosso site bem bonitinho aqui ó com todos aqueles itens a gente tem aqui o cardinho com os bichinhos né onde a gente pode por

Exemplo ccar aqui para ver todos os pets aí quando a gente vem aqui no nosso repetidor por exemplo a gente pode selecionar um pet que está disponível para adoção por exemplo aqui o rock clicar em saber mais e a gente tem acesso aqui à nossa página dinâmica da forma que a gente colocou bom gente assim eu sei que pode parecer muita coisa mas na prática mesmo quando você vai mexendo lá nos botõezinhos e testando por conta própria você vai ver O quão simples é eu espero que tenha ficado Tudo Claro nesse vídeo também mais uma

vez se você tiver sugestões de novos temas né coisas que você gostaria de ver por exemplo aqui na plataforma do wix Studio deixa aqui nos comentários para mim pra gente ter uma ideia do que que é que vocês querem ver né e trazer aí novos materiais completinhos para você também por hoje eu vou ficando por aqui mais uma vez se quiser saber mais sobre essa ferramenta que é inclusive Incrível gente eu tô boc aberta assim com as coisas que eu já testei aqui dentro com altas animações efeitos e coisas mirabolantes que a gente pode fazer

aqui dentro de uma forma bem fácil de alto nível mais fácil para quem trabalha nessa área né O que é o melhor dos dois mundos então se você quiser saber mais sobre essa ferramenta clica no link que a gente vai deixar na descrição aqui embaixo e vai testando mesmo sem compromisso aí de forma Gratuita E caso faça sentido para você você dá uma olhadinha nos planos que a ferramenta oferece também para que você consiga criar sites profissionais diretamente aí pros seus clientes de uma forma fácil rápida que você tem bastante flexibilidade bastante possibilidade de personalização

e também de deixar tudo ali ó bonitinho pro seu próprio cliente conseguir ter a autonomia de gerenciar isso depois também por hoje eu vou ficando por aqui agradeço muito quem Ficou até o final e te vejo no próximo vídeo até lá tchau tchau