Área de membros estilo Netflix - Introdução #01

Fala galera, tudo bem com vocês?

Enfim, nós chegamos a 500

inscritos, como eu tinha prometido, não

é? No vídeo da Netflix se você não viu,

né? Eu vou deixar o cardin aqui para

você? Naquele vídeo da Netflix, eu fiz um

desafio com vocês, se a gente alcançar as

500 inscritos aqui no canal, eu IA

ensinar para vocês como vocês poderiam

replicar aquele projeto aí na conta de

vocês? Então a gente chegou aqui dos

inscritos e agora chegou a hora de eu

cumprir a minha parte do desafio, vamos

lá.

Bom, vamos lá, já estou com meu projeto

aberto aqui está e vocês já podem notar

que eu fiz esse projeto e a gente vai

seguir com esse projeto dentro do editor.

É witz estúdio que é o novo editor da

wix. Então vamos lá já meio que pré

configurei e olha, fica super

tranquilo porque todo o material que a

gente utilizar aqui, em cada aula eu vou

deixar na descrição justamente para que

vocês consigam repicar esse projeto.

Depois você personalize

customize. Ou retire coisas legais do que

a gente vai fazer aqui e coloque no seu

projeto. Beleza? Eu já coloquei um código

CSS aqui, código CSS,

tá? Então eu já coloquei alguns códigos

aqui que a gente vai utilizar durante o

processo do projeto, né? A criação do

projeto e também já deixei aqui um código

já para acertar todo o background da

nossa página em preto tá, pra eu não ter

que calar configurando todas essas

páginas, tá? Já deixei para ele fazer

isso automático e como eu falei, o

código vai estar aí na descrição fica

tranquilo. Aquela página dos perfis, eu

não tenho um menu, tá? Eu não tenho menu,

então vou tirar essa sessão aqui

superior, já de cima. Essa sessão

master aqui, né? Que seria global, no

mix clássico. Está. Vou

adicionar aqui um contêiner.

Nesse contêiner aqui, eu eu estou

desativando basicamente todas as vezes é

que tem esse dimensionar propriedades,

tá? Porque ele tá me atrapalhando um

pouquinho. Em algumas ocasiões é,

então vocês vão ver se sempre aí eu vou

estar desativando ele aí tá me incomoda

um pouquinho, é aqui no ixe Studio.

A gente também tem essas opções de

configurar os tamanhos dos dos elementos,

tá? Eu não curti muito esse

comportamento, comportamento responsivo

aqui, tá, então. Ele me confunde um

pouco, né? Eu gostava mais de como era Oo

edil XE. Eles habilitaram

uma opção que faz com que fique como

estava no editor x. Tá, e para isso eu só

vim aqui, ó, nesse no lobo aqui do

Studio, vim aqui em

visualização. Preferências de

dimensionamento e sempre mostrar

avançado. E aí, beleza? Ele vai ficar

igualzinho x aqui ó. E aí, tá

tranquilo, tá? Então aqui eu vou deixar

100% na largura e vou deixar aqui

11 largura máxima, né? Limitando aqui

em 980 , pixelstá? Ele vai ficar

dessa forma, a sessão,

que é a única sessão que a gente vai ter

nessa página. Eu vou deixar aqui o

mínimo dela em 100. VH,

tá, que esse 100 VH aqui ele vai

ficar sempre do tamanho da tela que a

gente está visualizando, não importa se é

o mobile ou se é desktop. Ele vai sempre

se adaptar ao tamanho da tela exato, tá?

E é o tamanho mínimo, né? Então,

tranquilo, nesse contêiner eu vou deixar

ele centralizado no meio, tá? Então

clicando nessas 2 opções aqui ele já

deixa centralizadinho no meio. Vou tirar

esse background que a gente não vai usar

e vou colocar uma altura aqui somente

temporário, tá de 500 pixels pra gente

ter mais espaço para trabalhar aqui no

meio. Como eu posso até acessar aqui

Netflix, né? Eu tenho só quem?

Tindo uma lista aqui com as

imagens dos perfis e o botão gerenciar

perfis aqui na parte de baixo. Então vou

repetir isso, tá? Vou trazer aqui tudo

que eu preciso já para criar aquela

página, vou trazer o título, colocar ele

aqui em branco. Vou trazer um repetidor

que vai construir aquela lista com os

perfis. Vou trazer aqui um

botão. A parte

de baixo, vou trazer um botão já com um

ícone, tá mesmo que aquele botão não

tenha ícone, vou trazer um já com um

ícone, porque se eu configuro o layout

desse botão com o ícone, eu posso tirar o

somente o ícone dele depois e aproveitar

o layout por pra criar outros botões

depois, né? Então, fica muito mais fácil

no repetidor. Tem que dimensionar

propriedades, então vou tirar aqui tanto

do repetidor quanto do item. Vou fazer

um, vou selecionar os 3 segurando o shift

e vou empilhar, tá?

Empilhar, ele vai meio que agrupar esses

3 itens aqui, vou centralizar eles aqui

no meio, ó, e vou colocar

100% de largura.

Aqui embaixo, quando eu faço o

empilhamento, ele me dá essas opções aqui

de layout, né? E umas opções de

de alinhar os itens que está dentro do

empilhamento. Tá? Então fica mais fácil

pra gente é organizar algumas coisas

usando o empelhamento tá? Vou clicar aqui

em centralizar que ele já vai centralizar

tudo, né? Todos os textos e tudo mais,

porém aqui no texto, né? Ele não tá com a

largura, 100%. Eu sempre gosto de deixar

100%, tá? Então vou deixar aqui ó

100%, tá o botão?

Eu posso deixar aqui uns 240

pixelstamanho 56,

táque eu acho que vai ficar

um pouquinho parecido com o que tá lá no

botão que tá lá a gente tem um texto em

cinza. Né? Clarinho com uma

borda. Então vou colocar aqui uma borda

de um Pixel, um cinzinho aqui.

Ele não tem bordas arredondadas, então

vou tirar aqui as bordas arredondadas.

No texto, eu vou deixar a fonte

Montserrat mesmo a Netflix tem uma

própria fonte dela, mas não dá para a

gente copiar, né? Então vou deixar essa

Montserrat, pode ser que fique um

pouquinho diferente, vou desabilitar o

ícone.

E deixa eu mudar o texto desse botão aqui

para gerenciar?

Perfis.

Oh, a fonte é bem maior, o

lugar que é uma fonte 18.

Um pouquinho mais grossa, também.

Beleza, vou colocar aqui também o mesmo

cinza da borda e

show, tá? Tá bem legalzinho aqui. Bem

parecido. Oh, quando eu passo o mouse em

cima, ele fica branco, então é bem

simples da gente fazer isso, tá?

Selecionar o botão vou vir aqui em estado

do botão interativo,

primeiramente vou deixar normal só para

apagar os outros estados que tem no botão

já pré configurado, né? Pela wix, eu vou

selecionar os 2 aqui, ó, clicando nessa

setinha aqui selecionar nos 2. E

remover tá? E ele vai apagar tudo que tem

lá, ele vai copiar o que estava no

normal, clicando interativo. Eu só vou

vim aqui mudar a cor do botão pra branco

do do texto, né? Pra branco?

E das bordas pra branco

também aqui ó, quem está assistindo? Vou

mudar aqui. O texto aqui de cima fechou,

tá no item, eu não tenho um background,

tá? Não tenho background e no item aqui

eu vou ter a imagem e o nome da

pessoa, tá? Então vou vim aqui, vou

arrastar uma imagem e vou arrastar um

texto também. Um parágrafo para criar

aquele nome da pessoa ali, nome da pessoa

também é um pouquinho bem, é bem grande

até, né? Bem parecido que com um texto do

botão, então vou copiar a mesma

configuração ali do texto do botão, que

no caso era tamanho 18. A

Montserrat?

Regular. Como caçálo aqui

e a cor cinza tá, eu vou

colocar aqui só nome.

Nome da pessoa.

Esse texto claramente lhe é centralizado.

Vou selecionar junto com a imagem aqui.

E vou dar um empilhar.

Vou alinhar aqui à esquerda e no topo

também vou colocar ele

100% de largura para ele pegar toda a

largura do item, e esse espaçamento aqui,

ó, eu vou colocar é 24

, pixelstá aqui no

estúdio, ele tem essas essas dimensões

que ela é escalável, tá? E elas me

incomodam um pouquinho. Vou ser sincero

com vocês, é? Tem alguns

momentos que dá para aproveitar muito bem

elas que elas ajudam.

Mas elas acabam me atrapalhando um pouco

mais do que ajudando, tá? Então, sempre

que tiver esse. Com esse asterisco

aqui é porque ele tá usando essa medida

escalável, ou seja, se ele mudar de

resolução esse 24 pixels

aqui não será +24 pixls, etá? Então,

provavelmente, se eu ir pro mobile, ele

vai diminuir essa distância que eu deixei

desse, desse do nome da pessoa pra

imagem. Eu não quero isso, não é? Eu

quero ter o poder de configurar essa essa

opção ou que fosse mais assertivo. E esse

ajuste automático que ele faz, né? E às

vezes ele diminui muito essa escala

do desktop para o mobile e aí fica só

isso bem pequenininho, tá?Então eu não

quero, não vou usar para isso. É a única

forma que eu encontrei de de tirar

aqui OPX, né? Escalável é

dessa medida da distância, do

empilhamento. Foi vim aqui em layout

mesmo e aqui você está vendo, ó, que ele

está usando porcentagem aqui. Ele está

mostrando para mim em Pixel.

OPA, em Pixel e aqui ele está mostrando

em porcentagem tá? Que é basicamente o

que ele faz, né? Tipo AA medida em Pixel

escalável, ela meio que usa a

porcentagem, né? Então aqui.

Eu não quero a porcentagem, eu quero

pixels mesmo. Então, mudando aqui pra cá

ele já vai mudar, ó pixels, tá vendo que

ele já alterou ali, ó, em vez de 24? ? Tá

Tá 8, né? Tipo, não faz sentido nenhum,

pelo menos pra mim, tá? Então eu vou vim

aqui mudar novamente para 24.

Vou clicar aqui, ó. Nessa opção de

alinhar itens para ele esticar os

os meus, o meu texto e a imagem na

largura total, ó, então os 2 vai ficar

dessa forma aqui? O item meu que ele está

maior que que os elementos que eu tenho

aqui Na Na dentro dele, tá, eu vou

tenho que deixar ele do mesmo tamanho,

é?Eu poderia até ver

aqui, ó, a gente tem uma imagem bem

quadradinha. A gente só tem um espaço

aqui, espaço do texto. Então, primeiro eu

vou deixar a imagem quadradinha. Vou

tirar aqui o dimensionar propriedades da

imagem, tá? Vou tirar também O

o ponto âncora aqui, né? Que eu

chamo de âncora dessa lateral aqui da

imagem Pra Ele liberar pra gente editar

aqui a largura dela e vou deixar 200

pixels de largura e 200 pixels

também de altura.

Tá, então ela vai ficar desta forma aqui

é. Eu vou diminuir

esse item. Eu preciso que o item fique

também com uma largura de 200 pixels, ou

senão vai ficar esse espação feio aqui do

lado, né? E aí o pra. Isso eu preciso

fazer uma configuração que no repetidor

porque, como o repetidor, ele tá setado

aqui com um número, é?

Com definir itens por linha, ele vai ser

tal a largura que precisa pra ficar

somente 3 itens, né? Então vou desativar

isso aqui. Vou colocar aqui um

espaçamento de 24

tambéme aqui também, ó.

Estou percebe que eu estou mudando tudo

para Pixel justamente para ele não usar

aquela medida escalável, tá? Então

coloquei 24 e 24, vou d

eixar aqui

também no início, tá? E

agora? Se eu selecionar o item, ele está

me deixando alterar a largura do item,

que é o que eu queria. Se eu vim aqui em

cima, ó, lá ele já deixou liberado ali

pra mim, a gente tá, vou vim aqui 200

pixels. De largura,

beleza. E deixa eu

deletar esses outros itens aqui que você

não vai ficar esse texto bem feio aqui,

vai atrapalhar um pouquinho a gente.

E na verdade, uma coisa que eu percebi o

os perfis, eles começam ser gerados pelo

meio, né? Então eu não vou deixar aqui

nessa parte aqui do repetidor. No início,

vai ser no centro mesmo, como estava, tá

o texto, ó, a gente vê que tem um

bugzinho aqui, ó, está aí 160%, vou

voltar para 100% e aqui o tamanho da

altura do meu item é só eu jogar aqui ó,

mais para cima. E aí ele

já vai se adaptar. Percebam tá uma coisa

bem, é interessante aqui, ó. Percebam que

eu arrasto e eu posso vim com um

tamanho do item um pouco pra cima do

texto, tá? Ele já vai entender que eu

quero que ele fique o mais próximo

possível do conteúdo, então ele não vai

ficar, ele não vai cortar o texto, tá?

Ele já vai se auto ajustar, ó, perceba,

ele vai se autojustar, então é isso que

eu quero, tá? Justamente por isso que eu

não coloquei nenhuma altura, nenhuma

altura mínima e nenhuma altura máxima

aqui no tamanho desse item, tá? Então ele

vai se ajustar ao tamanho desse texto, ou

seja, se o nome da pessoa que aumentar,

né, o. Colocar assim, ó. Pá o

item também se ajusta. Beleza, é

exatamente isso que eu quero, fechou é

percebi aqui também que o nosso fundo não

é exatamente preto, tá? Então eu vou vim

aqui, ó, dar um inspecionar na página da

Netflix. E vou copiar a cor aqui

de fundo.

Oh, é 141414 essa cor aqui,

então só vou vir aqui no meu código CSS.

Vou jogar aqui, ó. Ele já vai

jogar em todas as páginas que eu criar

essa cor aqui de fundo, tá? O nosso botão

também. Ele não, não precisa ter um

background, então eu vou tirar aqui, ó.

Beleza aqui na nossa

imagem a gente vê aqui que tem uma

bordinha bem de leve, tá uma borda

redondinha. Então eu vim aqui encantos.

Vou locar aqui 4 que mais que a gente

pode notar aqui que a gente quando passa

o mouse, o texto aqui do nome fica

branco, né? E também

apresenta aqui essa borda branca aqui na

imagem tá? Então vamos lá, é

para fazer essa interação ao passar o

mouse com o item do repetidor né?

Diferente do botão que já vem aquela

opção de estados do botão, a gente é

seleciona o item do repetidor e vem aqui

nesse raiozinho tá? Isso já tinha lá no

editor x, que era as as interações over.

E aqui no estúdio, ela veio já com uma

potencializada aqui dentro dessa dessa

opção, tá? Eles colocaram também, além de

as opções de interagir com o

clique, passar do mouse colocaram também

é interações com o rolar da página em

loop e ao entrar na página também que era

essa aquela das nomeações que a gente já

tinha normalmente configurava que, pelo

menu que aparecia, tá, mas tá bem

legal essas opções aqui, porém, não é o

foco desse vídeo. Ainda não vou mostrar

isso para vocês. O que importa para a

gente agora é a opção de interação ao

passar o mouse, então vou clicar aqui em

passar o mouse, vou adicionar ela, ela

apresenta aqui já alguns pré-sets aqui

pra gente utilizar o que é muito

interessante e mas a gente vai dar uma

personalizada né? Como a gente não vai

ver que a gente precisa aqui nessas

opções, a gente vai vim aqui em

personalizada criar animação

personalizada e aí, beleza, ele vai

aparecer aquele mesmo menu que a gente já

tinha visto no editor x vou selecionar.

Vou selecionar o texto e aqui na cor do

texto vou colocar branco.

E a imagem tá, eu vou vir aqui em

borda, vou colocar aqui 3 pixels de

borda, eu vou colocar aqui uma

borda branca e a gente vai ver como é

que vai ficar esse resultado. Vou colocar

aqui a alpacidade de 100%, tá?

Vou dar um OK?

Vou visualizar aqui agora. Ó, perceba

que a minha sessão ela ficou exatamente

do tamanho da página, tá? Ela não cobriu

ela, não ficou, não ficou daquele jeito

que estava, né? Que aquela está curtinha,

é só questão do editor mesmo, tá? Vou

dar um visualizar aqui, beleza, vou

passar o mouse, ó OPA,

legal, Hein?Ele deu uma menidinha ali

na imagem, não é exatamente o que a gente

tem aqui, ó que ele não diminui a imagem,

mas é algo que, né, tipo super

simples ali, né? Não vai ser

totalmente diferente por causa disso, tá?

Então achei bem interessante, ó, tanto a

imagem que o nosso item do repetidor

quanto o botão gerenciar perfis estão

agindo como o que está Na Na Netflix

também, tá? Eu só vejo que aqui tem uma

distância bem maior entre os 2, então

vamos deixar aqui igualzinho. Vou colocar

aqui, ó, clico aqui na opção 2

passamentos de empilhar. Aliás, eu vou

ajustar essa opção aqui também. Ó, aqui

eu esqueci de deixar ela em Pixel, vou

colocar ela em 24, massó só

nessa daqui eu vou mudar, vou mudar ela

aqui pra é 56.

Então, acho que pode ser um pouquinho

maior, 72. Beleza

e vou visualizar, ó OK,

bem bonitinho mesmo. Está interagindo

como a gente precisava e agora, né?

É muito simples, tá? A gente ainda não

vai chegar na opção de colocar realmente

esses esses perfis, né? Mas nós

precisamos ver se esses elementos que a

gente colocou aqui vai interagir, vai

ficar com um visual exatamente como a

gente precisa que fique lá no final, tá?

Então eu vou adicionar aqui uma imagem

igual tá aqui, né? No meu perfil. Bom,

então deixa eu colocar aqui essa imagem,

né? Vou alterar a imagem aqui.

Vou colocar essa daqui primeiro, tá?

Vem aqui o nome.

Daiane Daiane

vou adicionar o novo item aqui no

repetidor. Vou adicionar vários, né? Por

isso que é bom a gente fazer a

experimentação, tá?Já vi

aqui que ele não ficou.

Como a gente precisava que ficasse lá,

igualzinho. O layout da Netflix está

então aquele quebrou, então o que a gente

vai precisar fazer aqui? A gente vai

precisar aumentar. AA gente vai precisar

aumentar a largura máxima da página, tá?

Então vou colocar aqui em vez de 980, vou

pular para 1280. E

aí, né? Aqui também, a

empilhahamento precisa ficar em 100%.

E aí, beleza? Oh, agora, assim ele

tá ali, vou dar um visualizar.

Oh.

É isso. É a nossa primeira aula aqui,

ensinando a como você pode criar

uma Netflix aí na sua conta. Eu

espero que você tenha gostado dessa aula

e é claro, né? Dá um gostei aqui

pra eu saber de verdade como está

sendo aí a sua percepção sobre esse

conteúdo que eu estou construindo para

você? De acordo com o desafio que a gente

propôs e se inscreve no canal ativa, o

sininho justamente para você não perder

todos os vídeos que virá a seguir, fechou?

Muito obrigado e até o próximo vídeo.