Transcrições
1. Introdução: Bem-vindo a uma jornada
extraordinária
rumo ao futuro do design. Bem-vindo ao Framer hoje. Estou aqui para revelar a inovação
que diferencia
a Framer E tudo se resume a um
recurso revolucionário, o poder da IA Ei, eu sou Ellis e trabalho em web design há mais de dois anos e sou formado em mídia digital Eu usei muitas plataformas
diferentes, desde esteiras e
espaço quadrado até fluxo na web E o Framer
realmente se destaca, uma plataforma que entende sua visão com um simples Em instantes, você tem
um site totalmente funcional e personalizado
ao seu Essa é a magia da IA do
criador. Mas não vamos parar. Deixe-me levá-lo em uma rápida
jornada pelo que você está prestes a aprender ao criar sites
personalizados, aproveitando facilmente o poder da IA no gerenciamento de
conteúdo para dominar
a gerenciamento de
conteúdo Este é o seu roteiro para
se tornar um guru do design.
Abordaremos tudo, desde a
criação de blocos com a ajuda do
chat GPT até a personalização perfeita dos elementos do
seu site Para um toque verdadeiramente único, você mergulhará fundo na ambição de design,
aprimorando
a navegação,
aperfeiçoando seções e até mesmo dominando a integração de aperfeiçoando seções e até mesmo dominando até a personalização perfeita dos elementos do
seu site.
Para um toque verdadeiramente único,
você mergulhará fundo na ambição de design,
aprimorando
a navegação,
aperfeiçoando seções e até mesmo dominando a integração de mídia. Então, você está pronto para aproveitar
o poder do Framer e a
onda da inovação de design baseada em
IA Essa jornada está prestes a
remodelar a maneira como você
cria sites para sempre. É hora de liberar
sua criatividade.
2. História do design de UX de UI: Então, neste vídeo, vamos
fazer uma viagem pela estrada
da memória, onde vamos
mergulhar na história interessante de como o design
de UI UX
evoluiu ao longo do tempo. É uma jornada desde os
primórdios da tecnologia até as
interfaces elegantes e fáceis de usar que usamos hoje. Essa é a história da interface do usuário e do design da
experiência do usuário. Tudo bem, vamos
começar. Na década de 1960, naquela época, pessoas como Douglas
Engelbart estavam preparando bases para
o que se tornaria nossas pessoas como Douglas
Engelbart estavam preparando as bases para
o que se tornaria nossas interfaces modernas. Foi a era das
máquinas desajeitadas e dos gráficos básicos. Muito longe do que
estamos acostumados agora. Nos anos 80, as
maçãs estavam sendo desperdiçadas
com o Foi quando esses ícones
clicáveis e o Windows começaram a
se tornar uma coisa De repente, a computação ficou
muito mais visual à medida que entramos nos 2000
telefones celulares no centro das atenções. Lembre-se de que
todos os bons telefones Nokia, eles foram os pioneiros
da interface de usuário móvel Os tempos das mensagens de texto no estilo Nine. Um pouco peculiar, mas tão
nostálgico. Mas espere, estamos em
2007 e a Apple lança
o iPhone, bombardeia as telas sensíveis ao toque e aperte para ampliar
se tornam a moda É como se tivéssemos pulado
para o futuro, certo? Os dispositivos móveis começam a mudar todo
o jogo da interface do usuário.
E adivinha? Aqui estamos hoje com mídias sociais e os
gadgets da
Abscalore que falam conosco Os designers de UX estão
trabalhando duro para tornar nossa vida digital
tranquila e agradável É tudo uma questão de
fazer com que o aplicativo pareça perfeito quando
você toca na tela. Olhando para o futuro, temos algumas coisas
selvagens vindo em nossa direção. realidade aumentada
e a realidade virtual estão chegando em breve Não se tratará apenas de
tocar e deslizar. Você pode estar acenando seus gadgets para
fazer as coisas acontecerem Com tudo
isso, são os designers que foram os verdadeiros MVPs,
eles criaram a
forma como interagimos com a tecnologia, garantindo que ela não seja apenas
funcional, mas também tenha uma boa aparência Então aí
está. A história da interface do
usuário e do design da
experiência do usuário. Espero que você se
divirta percorrendo a linha do tempo da tecnologia comigo e
nos vemos no próximo vídeo
3. Por que Framer?: Neste vídeo, estamos mergulhando
profundamente no mundo da criação de
sites. Exploraremos
opções populares, como Quick Square,
Space , Webflow e um novato
com um enquadrador de inteligência artificial. Ao final deste vídeo, você terá uma ideia
mais clara do que
cada plataforma oferece e por que o Framer pode se destacar Então, vamos direto ao assunto. Quando se trata de
criar sites, você tem muitas opções Wick e square space são opções
fáceis de usar, perfeitas para quem não tem
grandes habilidades de codificação Eles oferecem interfaces Dragon
Drop, modelos
predefinidos
e
ferramentas fáceis de usar para colocar seu site
em funcionamento rapidamente Depois, há o Webflow,
uma ferramenta poderosa para quem quer mais controle Com o Webflow, você trabalha
em uma interface
visual tem acesso à personalização em nível de
código É como uma ponte entre
design e desenvolvimento, oferecendo flexibilidade
e liberdade criativa. É aqui que as coisas
ficam interessantes. Framer, tradicionalmente conhecido
por sua habilidade em prototipagem, agitou as coisas . Imagine digitar um simples
prompt e pronto, e a IA gera um site totalmente
editável É um conceito que está
mudando o jogo. Por que você pode escolher o
Framer em vez dos outros? Bem, imagine as possibilidades
com a IA do Framer, você não está apenas
escolhendo modelos Você está gerando
layouts personalizados com base em suas ideias. Você não está preso
aos estilos predefinidos. Você tem um ponto de partida
que é exclusivamente seu. Embora Wicks, Square space e Webflow tenham
seus pontos fortes, abordagem
baseada em IA da
Framer Você pode começar com layouts gerados por
IA e depois
ajustá-los até a perfeição É como ter um assistente
pessoal de design sempre pronto para
experimentar e iterar. Mas há mais: o enquadrador
não se limita apenas ao design. Ele preenche a lacuna
entre design e desenvolvimento com a capacidade de
publicar sites reais É como ter um balcão único para criar e lançar. A conveniência é
inegável no final das contas. A plataforma que você escolher
depende de suas necessidades. Se você está procurando
configurações rápidas e simplicidade, mechas e espaços quadrados
podem ser seus amigos Webflow é o caminho para quem busca
controle e enquadramento avançados Bem, é a escolha de
vanguarda para
quem quer a magia de um site
editável e alimentado por IA Então, ao embarcar em sua jornada de criação de
sites, considere o que se adequa ao
seu estilo e objetivos Obrigado por se juntar a
mim nessa exploração de criadores de sites e
eu vou ver no próximo vídeo
4. Preço de Framer: Então, quanto custa
realmente começar a usar o Framer? Bem, eu tenho boas notícias. Você pode publicar seu próprio
site gratuitamente. Então, o próximo plano
é de apenas $5 por mês. Ele adiciona uma página inicial e 44
modelos de página e um domínio personalizado. Em seguida, temos o plano básico
, recomendado
para sites pessoais. Você pode criar uma quantidade
ilimitada de páginas. Você também pode proteger
seu site com senha e ter um limite maior de visitantes de
$30 por mês. Você
obtém o plano profissional. É recomendado
para sites maiores e oferece análises detalhadas do site e oferece dez coleções de
sistemas de gerenciamento de conteúdo. Você também tem um limite de pesquisa de 300
páginas
e um limite de visitantes muito alto. Se você descer abaixo, na verdade, temos
os preços da equipe de $20 por mês Você pode ter até
cinco editores em seu site e um histórico de versões de
sete dias Você também pode
colaborar ao vivo com todos da
sua equipe ao mesmo
tempo por $40 por mês Você obtém tudo o
que está incluído
no plano básico da equipe por $20 e pode gerenciar as permissões
do projeto E você também pode ter dez
editores e um armazenamento de arquivos muito, muito maior Há também um histórico de versões de 30
dias, o que é muito útil
para um grande projeto. Se você realmente quer
dar um passo atrás, aqui vai uma pequena dica. Todos esses preços são,
na verdade, os preços que você recebe por mês se pagar
tudo a granel por um ano. Então, se você quiser alterar
e ver os preços, os preços mensais sem
quaisquer restrições, se quiser cancelar
depois de um mês, aqui estão os preços
que você realmente paga Então, eles são um pouco
mais caros. Para o Team Basic, é
cerca de $5 mais caro. E para o Team Pro, custa $50
, então é $10 mais caro. E aqui também, você pode
ligá-lo e desligá-lo novamente e ver que o Mini custa apenas $5. O básico também custa
cinco e o profissional dez E o grátis continua
gratuito, felizmente. E aqui também está outra dica que eu realmente
recomendo dar uma olhada. Então, na verdade, se você rolar para baixo, poderá ter a
descrição de cada plano na descrição detalhada do que tudo
oferece de uma forma
muito, muito fácil de usar, você pode ver uma
representação visual dos
tipos de serviços
oferecidos em cada pacote. Então, na verdade, aqui está o
que você quer observar. Por exemplo,
no plano básico está escrito uma coleção de
sistemas de gerenciamento de conteúdo, certo? Então, se você está apenas
nesta página vendo isso e ainda não
rolou para baixo, você pensaria
: ah, outros planos como o já
contêm isso, tipo, então eu preciso
comprar o Basic E você clica em
e obtém o plano? Mas, na verdade, se você prioriza
ter uma coleção de CMS, você pode rolar para baixo e
ver que, na verdade, a gratuita e a mini já
contêm essa coleção de CMS E você pode pagar muito menos, ou até mesmo não precisa pagar nada para ter
essa coleção. Então,
isso é meio enganador, um pouco, um pouco de
desinformação na minha opinião E então você pode ver uma descrição detalhada
dos itens do CMS e ver a descrição
detalhada de todos os serviços
oferecidos para as empresas Honestamente, eu realmente não
acho que você precisaria disso, mas você sabe, você nunca sabe E é sempre bom
conhecer suas opções. Então, sim, cuidado com
isso, com certeza. E se você rolar um pouco mais para
baixo, há uma seção de perguntas frequentes sobre
finanças e preços. E isso pode realmente
responder a algumas de suas perguntas.
Então, definitivamente, dê uma
olhada nisso também antes de tomar qualquer
decisão importante sobre o plano. Então, sim, o gratuito
é ótimo para experimentar o serviço e ver
o que ele tem a oferecer. E então, se você realmente
quiser publicar seu próprio site ou seu
site para uma empresa, você pode optar pelo mini, na minha opinião, apenas para
ter esse domínio personalizado. Mas, é claro, explore
suas opções e explore suas necessidades, como escrever
os recursos que você deseja, quais são suas necessidades, e depois compare-os
nesta tabela detalhada. E basta combinar isso e
escolher a opção mais barata. Acho que essa também seria
a maneira mais conveniente de economizar dinheiro. Então, sim, obrigado por assistir este vídeo e nos
vemos no próximo.
5. Primeiros passos: Para
começar a criar seu próprio site no Framer, primeiro
você precisa saber
onde encontrar coisas no Framer e se familiarizar com
a interface Vamos começar com o site
em si e o que ele tem a oferecer aqui na página principal. Na verdade, você pode começar
imediatamente com o prompt, mas precisará
entrar em detalhes e realmente conhecer a interface
para personalizar o prompt de IA e
o que ele produziu. Vamos ver o que está abaixo aqui. Aqui estão algumas promoções, mas não
é nisso que
eu queria me concentrar. Aqui temos o prompt de
IA novamente, mas se você realmente rolar para baixo, poderá explorar também poderá explorar
os modelos com os quais pode começar. Vamos dar uma olhada nos novos
e nos gratuitos aqui. Você pode ter muitos modelos que foram criados usando o Framer Alguns deles podem ter
sido auxiliados pela IA, alguns deles são totalmente produzidos por
designers. Você tem os pagos e também tem
muitas opções gratuitas. Aqui na guia gratuita, você só tem as três
opções para explorar. Agora que isso acabou,
eu também gostaria de mostrar a vocês
os modelos de sites de IA, e aqui podemos ver
alguns dos exemplos. Também há escolhas
e recomendações da equipe apenas de designers De qualquer forma, para seus recursos. Além desse
curso, é claro, há muitos recursos
para você aprender. Se você tiver alguma
dúvida, entre em detalhes sobre algum tópico que
lhe interessa para realmente
começar e conhecer a
interface na qual queremos acessar. Depois
de entrar na sua conta, você é criado com o
painel no centro. Você precisa usar os botões e começar com um I, começar a criar seu
próprio site em um instante. Você também pode colar seu
design do Figma
ou assistir a
outros tutoriais além deste
tutorial, ou assistir a
outros tutoriais é claro, e aprender Framer com Framer Abaixo disso, você tem seu
próprio projeto recente. Eu já tenho algumas que são uma tela em branco e algo
que acabei de experimentar. Você também pode ver a
última vez em que foi visualizado e a última vez em que foi editado. Você também pode listá-lo, ou eu tenho os ícones
e tenho a prévia. Você também tem a barra de pesquisa para pesquisar seu próprio projeto. Você pode classificá-lo pela última vez que eu
visualizei, pela última vez editada e em ordem alfabética para criar seu próprio projeto.
Você também pode fazer isso. Aqui na parte esquerda, temos nossa conta pessoal e nosso recesso pessoal
e arquivados Se você clicar aqui,
terá as configurações da conta, o modo
noturno e diurno, entre os quais
você pode alternar Você tem o aplicativo para desktop
que pode ser baixado. Você também pode iniciar o aplicativo para importar do Figma e
desenhar seus próprios Você também pode ocultar
essa
seção de introdução clicando aqui. Você também pode acessar a página inicial e solicitar a comunidade de suporte, e é
aqui que você também se inscreve. Se você for para o arquivamento, poderá ver seus projetos de
arquivamento que não estão mais em uso. Aqui. Você também tem
a guia Minha equipe. Se você clicar nos três pontos, terá as configurações da equipe Você pode convidar
membros, copiar, convidar, vincular e criar uma nova
pasta para se manter organizado. Se você for para todos, na verdade
temos
o mesmo painel porque estou sozinho aqui. Infelizmente, não estou
trabalhando com mais ninguém. Podemos acessar os modelos, você pode ver seus modelos aqui ou criar seus
próprios modelos que
podem ser compartilhados com os membros da
sua equipe. Se entrarmos em arquivado, teremos o
projeto de arquivamento da equipe Vamos descansar
e vamos para uma tela vazia
aqui, vamos deletar isso Na verdade, temos
muito a explorar. Vamos um por um. No canto superior esquerdo, temos o logotipo do emoldurador e
temos a opção de
acessar o painel Temos as ações rápidas. Também temos várias
opções diferentes. Onde você pode criar um novo arquivo e todas as
opções com o arquivo. Você também pode editar, como copiar, colar, selecionar. Todos eles têm
seus próprios atalhos,
que são atalhos de
teclado convencionais Em qualquer laptop, não
vou entrar em detalhes. Então você tem a vista. Podemos mudar os modos aqui. Novamente, podemos ampliar, diminuir o zoom Você também pode fazer isso
com o mouse pad, o mouse, o que quiser. Você pode estilizar seu texto aqui, o que também é possível
no lado direito Mais conveniente, vou te
mostrar isso mais tarde. Depois, temos os grupos. Grupos. Podemos inverter coisas, criar componentes e criar
componentes a partir do código Podemos visualizar, também podemos
criar componentes de código. Aqui temos algumas preferências
para as configurações do site. Temos configurações mais avançadas
do site como domínios personalizados,
redirecionamentos e análises, seus planos
e a
versão do histórico do
seu site para qualquer dúvida que
você possa encaminhar para Você também pode voltar à sua
conta. Agora que exploramos isso no topo, temos o nome
do projeto e o plano em
que o site está. À direita, temos
o logotipo da conta. Temos configurações do site. Também temos o botão de visualização
ao vivo, que mostra a versão
do site quando
ele é publicado. Você também pode convidar
colaboradores aqui. Você pode publicar e colocar
seu site no ar aqui. Se formos para a esquerda, você
tem suas páginas, suas camadas e seus ativos, que
são
basicamente como uma árvore, do
largo ao mais estreito. Primeiro, você tem suas páginas. Agora temos apenas uma
página, nossa página inicial Você também teria
seu CMS aqui, e você pode criar uma tela quando quiser
criar um protótipo Vamos deletar isso. Quando você estiver realmente criando
seu site, estará trabalhando
com camadas aqui. Na verdade, temos alguns
textos dos quais não precisamos. Você pode ver que
pode começar com a IA. E criaremos
várias camadas diferentes que abordaremos
nos vídeos posteriores. Aqui, todos os seus
ativos, como imagens códigos
e diferentes
estilizações, serão incluídos Na parte superior, você pode
inserir seus elementos. Você pode começar com IA, inserir seções, cabeçalhos. Você cria seu CMS aqui e
importa todos os seus elementos,
como formulários de mídia e ícones aqui Em seguida, temos o layout. Você pode personalizar o
layout da página da web. Você também pode criar um texto
que altera o curso. Você pode digitar o que quiser. Na verdade, à
esquerda, aparece a janela que podemos ver aqui Essas são todas as opções de
alinhamento aqui. Você também pode criar um link para algo. Você também pode personalizar a posição do
texto dessa forma. Ou você também pode clicar
e arrastá-lo aqui, e
alteraremos automaticamente os números aqui. Você também tem o tipo de posicionamento que
é avançado e depende basicamente de
como o texto está sendo posicionado de acordo com
o conteúdo do site Também temos o
tamanho do texto. Podemos adicionar efeitos ao passar o mouse, pressionar. Você pode fazer um loop. Pode ter estilos diferentes, podemos escondê-lo,
alterar a capacidade. Em seguida, temos a
cor da fonte, a fonte real. Você pode alterá-lo para qualquer coisa. Você também pode alterar
o tamanho da fonte, o alinhamento da fonte e algumas opções de acessibilidade Aqui na parte inferior, você tem as opções do cursor. Este está apenas se arrastando
pela tela. Este é apenas
o cursor normal para selecionar e arrastar coisas. Isso é para comentar. Aqui você também pode alterar
o modo. No topo, depois do texto
vem o CMS, por exemplo. Você pode adicionar seu próprio blog ou importar
seu próprio CSV para importar sua própria coleção de CMS Você também pode ter suas
próprias ações aqui, que são apenas atalhos para
algumas ações no site Por exemplo, crie com
IA ou inicie uma página da web, crie um componente etc Esta foi uma introdução
à sua interface apenas para você se familiarizar
com seu espaço de trabalho E nos vemos
no próximo vídeo.
6. Prática: crie uma conta: Portanto, sua primeira
tarefa de criador é criar
uma conta e chegar ao ponto em que você possa criar Então, na página principal, você clica em Inscrever-se. Você escolhe seu método de login, clica na sua opção, inscreve-se no Google
ou se inscreve com e-mail. E depois de confirmar e ativar por meio do e-mail
que você recebe e de sua caixa de entrada, você está pronto para começar E se você quiser praticar, pode fazer isso sozinho ou
pode acompanhar este vídeo e
fazer junto comigo. Então, nos vemos
no próximo vídeo.
7. Visão geral do capítulo: Então, neste capítulo,
começamos a explorar o framer, a história da interface do usuário
e do design da experiência do usuário O que é, por que é
tão importante
ter designers de UI UX
onde tudo começou. Onde tudo começou,
o que estamos fazendo
agora e o que o futuro reserva para nós em termos de design de UI e UX. Também exploramos a
interface do Framer,
onde estão as coisas, o que você pode fazer, uma pequena personalização Exploramos um pouco
o cenário de Framer. Também analisamos os modelos. Framer pode ser a
escolha certa para você, por que você gostaria de usar um criador de sites com
inteligência artificial Por que você não
usaria, por exemplo, espaço quadrado Wicks ou o Webflow, que estão todos no
topo do jogo Mas o Framer é tão
novato e está criando tantas inovações
ao mesmo tempo que sinceramente, não acho por que
você não daria uma chance, pelo
menos de qualquer forma, conforme
o resumo do capítulo, analisamos essas coisas, também aprendemos como criar sua própria conta e No próximo capítulo, na verdade,
criaremos seu
próprio site. E não será
apenas um site qualquer, mas será
um site alimentado por IA. O que significa
que você aprenderá
a escrever seu próprio prompt. E como ser o mais
detalhado possível. Quais são algumas dicas para obter o melhor resultado
possível com a IA. Também aprenderemos como
personalizar coisas, como alterar sua fonte, como brincar com as cores e o
layout da página. Também exploraremos
algumas ferramentas externas sobre as quais
falarei
no próximo capítulo.
Te vejo lá.
8. Introdução de capítulo (seu primeiro site): Bem-vindo ao próximo capítulo. Eu já te dei uma
pequena prévia. No vídeo resumido
do último capítulo, eu também dei uma pista sobre o que mais vamos
usar com o framer Na verdade, é um seletor de cores e um assistente de paleta para ajudá-lo a tomar
as melhores decisões cor
para seu site Se você não estiver satisfeito com
os gerados pela IA, você também pode usar
isso como um guia. Como mencionei anteriormente
neste capítulo, vamos mergulhar em sua primeira solicitação
para criar um site. Vamos praticar isso fazendo uma tarefa juntos
mais tarde Também fornecerei algumas dicas e detalhes sobre como
escrever uma solicitação detalhada para obter
os melhores resultados com a IA. Nos vemos no próximo vídeo.
9. Escrevendo seu primeiro prompt: Na verdade, vamos
aprender como usar a IA e produzir os resultados mais eficazes para seu próprio site personalizado. Portanto, algumas dicas para escrever
uma solicitação detalhada para seu site são as
primeiras específicas. Forneça instruções claras sobre o tipo de site que
você pretende criar Inclua detalhes
sobre a finalidade, público-alvo e quaisquer recursos
específicos que você desejar. Em seguida, estão os elementos de design. Descreva os
elementos visuais que você tem em mente. Mencione a cor, a paleta, tipografia, as preferências
e quaisquer Em seguida, vem a experiência do usuário. Explique a experiência do usuário que
você está buscando. Você está procurando um design limpo
e minimalista ou algo mais
vibrante e dinâmico Então, tendo isso em mente, vamos escrever um exemplo de prompt. Então, vamos escrever, estou procurando criar um site de
portfólio. Aqui estamos, indicando o que realmente queremos
criar e quais são
nossos desejos para o meu negócio de
fotografia. Novamente, é bom
ser o mais detalhado
possível sobre o tipo de negócio que estou planejando
criar, meu site. É uma dica muito boa Mostrar que tipo de
negócio é e para que serve
é muito bom para a IA
entender você Em seguida, vamos escrever: quero um design limpo e que reflita
meu estilo criativo. Aqui vamos
entrar na estilização. Mencionamos que queremos um design
limpo e moderno também
quero refletir
meu estilo criativo. E descreveremos nosso estilo criativo
nas próximas frases. Vamos escrever, a paleta de
cores deve ser uma mistura de tons pastéis suaves. Aqui, já estamos descrevendo
nossas preferências pessoais, nossos estilos criativos,
conforme mencionado anteriormente. E também estamos dando a ele uma paleta de
cores para trabalhar. E essa descrição deve ser boa para começarmos. E aqui podemos ver a
barra que foi preenchida descrevendo o quão detalhada é
sua descrição. E se for bom o suficiente para que a IA seja
capaz de executá-lo bem. Então, se clicarmos em Iniciar, ele realmente começará a
criar seu site. É para isso que serve o
próximo vídeo. Então, eu não quero que você deixe
você com um penhasco, mas eu vou te ver
no próximo vídeo
10. Após o prompt: O vídeo anterior.
Deixamos isso aqui escrevendo uma
descrição bem detalhada e oito pontos Então, vamos realmente clicar em Iniciar e ver o que ele gera. Você pode ver o progresso
da criação, certo? À medida que ele é criado, você pode ver
que ele cria imediatamente as versões otimizadas
do site para
tablet e telefone Aqui, você será solicitado a escolher seu domínio gratuito com
a extremidade do ponto do quadro, e clicaremos Agora, o incrível é que a IA também gera texto para você
e para todos os cabeçalhos. Portanto, mesmo que você não tenha certeza do que vai escrever em
seu site de fotografia, ele já mostrou sugestão de
Judas sobre o que
você pode se aprofundar Então, aqui temos algumas fotos
reservadas, algumas descrições das fotos E usou elementos
diferentes para tornar o site mais agradável
visualmente E você tem as avaliações
na parte inferior, como qualquer site clássico baseado em
serviços. Na parte inferior, temos um pequeno rodapé com os
ícones de mídia social e direitos autorais Então, eu meio que gosto dessa e acho que
vamos continuar com ela. E você pode ver que
as versões otimizadas estão muito bem otimizadas e não há
realmente nada que você queira fazer. Se estiver satisfeito com o design, você pode imediatamente inserir suas imagens
em vez
dos espaços reservados e talvez alterar um pouco o texto E seria
muito bom
anexar os
links aqui, obviamente. Então, sim, isso é
realmente incrível, e eu vou
ver
no próximo vídeo, como podemos personalizar
todos esses elementos.
11. Personalizando seu primeiro site: Então, agora que você
tem seu próprio site
pronto, gerado pela IA, ele está
tentando adaptá-lo ainda mais e fazer com que tudo esteja
exatamente certo Então, para personalizar seu site, basta clicar no
elemento que deseja editar. E você pode
usar a IA para mudar isso ou ir para a
direita e mudar. Por exemplo, vamos mudar
a cor da textura,
vermelha, indo para a direita. E você pode clicar aqui, Cor, Você pode mudar
a cor aqui. Você também pode arrastar
ao redor do elemento para alterar a posição
dos elementos. Por exemplo, eu quero estar
aqui e isso
parece uma
capa de jornal e é,
eu acho, perfeito para um site de fotografia
aqui, por exemplo. Eu também posso escrever outra coisa, por exemplo, espaço e explorar
agora poderiam ficar assim. E podemos atualizar
essa data se quisermos. No entanto, atualmente está
atualizado. Então, para este, mudamos
a posição da imagem. E se cairmos, você pode realmente mudar
tudo aqui em cima. Você pode alterar
novamente a posição do parágrafo
no cabeçalho aqui. Por exemplo, se
você clicar duas
vezes, você será direcionado para a imagem haverá um efeito
aplicado a ela. Então, por exemplo, você pode selecionar
diferentes modos de mesclagem. momento, está na
luminosidade e na escala de cinza, é por isso que é assim Mas quando você clica duas vezes nela, a imagem fica realmente assim. Se você voltar ao normal e
reduzir a escala de cinza, teremos a imagem normal. E você também pode selecionar diferentes preenchimentos
em vez de uma imagem E você pode substituir e escolher sua própria imagem clicando aqui. Você também pode alterar
a resolução, o tamanho e adicionar
texto alternativo para acessibilidade Além disso, armazene fotos e imagens que você pode usar e
pode usar Pesquisar aqui. Você também pode cortar a imagem, se quiser.
Então, vamos seguir em frente. Desça e é
praticamente o mesmo. Temos mais alguns elementos
que podemos mover. E aqui podemos mudar
o texto, os ícones. Tudo isso é personalizável e
você sempre pode alterá-lo. E aqui você também pode ver
o tema criado para nós. E podemos embaralhá-lo
e selecionar os
elementos que queremos embaralhar, e ele será embaralhado e ele será embaralhado Então é isso para este vídeo, e
nos vemos no próximo.
12. Seletor de paleta de cores: Nesta lição, eu
queria mostrar uma ferramenta externa
que eu uso quando estou criando meus próprios sites
e quando preciso escolher cores e
uma paleta de cores, especialmente quando preciso fazer isso
de acordo com a acessibilidade Em geral, é uma ferramenta muito
boa para ajudá-lo a tomar
as decisões de cores certas
e ainda personalizá-las para você e para
o que você realmente deseja. No início, isso pode parecer complicado para
um simples seletor de cores,
mas, na verdade, há
toda uma teoria de cores por trás da
escolha das cores certas para seu site
ou para qualquer coisa, qualquer design gráfico que você faça Vamos começar examinando
a página principal. Só para ficar claro,
esse é o Adobe Color, uma ferramenta externa que eu
uso para escolher minhas cores. Eu usei apenas minha
conta da Adobe para usar essa ferramenta. Aqui encontramos um
exemplo de paleta de cores, só para você começar Aqui você pode ver que
temos a roda de cores. Temos ferramentas de extração, tema, extração, gradiente e
acessibilidade Vamos começar com
a roda de cores. Você provavelmente está
familiarizado com isso. É uma roda de cores. E olha o que acontece quando eu pego um desses nós
e simplesmente o contorno, ele muda as cores associadas a
essa paleta de cores A razão pela qual isso está acontecendo, essa mudança está acontecendo, está na verdade à esquerda,
as regras de harmonia. Há muitas regras de
harmonia diferentes, e você pode ver a
explicação aqui. As regras de cores garantem
um equilíbrio harmônico de cores com base na cor
que você definiu como cor base Por exemplo, agora, essa é a nossa cor base. Podemos escolher a cor base
apenas clicando nela, e ela baseará sua
decisão em torno dessa cor. Existem regras diferentes. Por exemplo,
monocromático é escolher as mesmas cores
na mesma faixa, apenas pastéis
diferentes E você também pode adicionar
nós aqui. Você pode ter uma tríade, você pode ter
cores complementares, certo? Isso é muito bom. Divisão complementar,
divisão dupla, complementar. E tudo isso age de
maneiras diferentes. Tudo está pronto para que você possa compor
automaticamente. Então, sim, existem
diferentes tipos de regras e você também pode definir
suas próprias regras personalizadas, apenas adicionando nós
e brincando. E isso não é realmente
baseado em nenhuma regra, então você pode querer ter
cuidado com isso. Eu recomendaria primeiro
ficar com esses,
com os predefinidos
, por exemplo,
eu gosto deste, e posso salvar minha biblioteca essa paleta de
cores Também posso chamá-lo, por exemplo, de meu verde. E também posso adicionar algumas tags
para facilitar a localização. Posso salvá-lo e
também publicá-lo para que as pessoas vejam e
verifiquem minha paleta de cores No centro, você pode ver as sombras e
escolher a principal. Você também pode escolher o modo
em que está, aqui mesmo. E você também pode alterar
os valores aqui, o que também mudará totalmente
a paleta de cores Você pode brincar
com os
valores de Argu com o brilho Basicamente, tudo
é personalizável. Você também tem uma ferramenta
de seleção de cores. Você pode criar uma paleta de
acordo com isso. Aqui você pode extrair um tema de uma foto
fornecida por você. Ele pode fornecer uma paleta de
cores aqui. Você pode fazer o mesmo e
obter um gradiente aqui. Na verdade, você pode verificar o contraste e a acessibilidade,
sua paleta de cores Lembre-se da minha paleta de cores
que ficou um pouco confusa. Você pode, na verdade, escolher a paleta de cores de
acordo com essas regras Veja, por exemplo, C e
D estão em conflito. Esses dois movem as amostras na roda de
cores para tornar as cores distintas e seguras para daltônicos Uma
pessoa daltônica pode não ser capaz de diferenciar
essas duas cores Precisamos mudar isso,
nenhum conflito é encontrado. Quando mudamos para isso, temos o simulador
daltônico e podemos realmente ver essas cores seriam como
essas cores seriam do ponto de vista de uma
pessoa daltônica Temos o cofre para daltônicos e o verificador de
contraste Você pode verificar se você tem os diferentes níveis
de acessibilidade. É mais fácil se qualificar para Aa
do que para AAA. Vamos com AA. E podemos escolher a cor aqui e torná-la mais
escura e mais clara E podemos ver que essa relação de
contraste está boa. Mas se retirarmos isso
e o tornarmos mais escuro, tudo falhará e a taxa de
contraste não se aplicará. Você pode ver aqui, você pode
mudar isso talvez dessa forma. Mas não, mesmo que você
torne isso mais claro, não
funcionará aqui Por exemplo, na fonte
menor, ela falha, mas nas
fontes mais altas, está tudo bem. Aqui, você pode realmente ter sugestões de
contraste
que mudarão. Por exemplo, podemos
definir uma taxa de contraste. Isso nos fornecerá sugestões. Por exemplo, um contraste ruim também lhe dará isso. Podemos salvá-lo em bibliotecas. Além disso, temos
mais algumas coisas divertidas para dar uma olhada. Pode ter a página Explorar, na
qual você pode explorar paletas de cores de
diferentes pessoas e ver onde elas foram usadas e
onde foram Em seguida, temos as tendências. Dessa forma, você pode
olhar ao redor e ver as tendências de cores
do mundo na moda, na ilustração e no design gráfico. Dessa forma, você pode se manter
atualizado com a paleta de cores popular Em seguida, temos bibliotecas nas
quais você tem sua própria paleta de cores
que você criou Em seguida, você tem o alternador de
temas. Você também pode ter um
pequeno jogo de cores e precisa se lembrar da
sequência em que ele foi reproduzido, por exemplo, aqui, aqui. E você também tem um cronômetro. É muito divertido
brincar, explorar, talvez ver algumas
cores novas de que você goste e anotar isso. Está ficando cada
vez mais difícil. Vamos fazer esse último. Oh, eu não sei se
eu me lembro dessa. E fim de jogo. Veja, você também
pode twittar sua pontuação mais alta. Aqui você tem apenas
mais alguns botões auxiliares, como feedback do fórum de ajuda, sua própria conta, diferentes aplicativos da
Adobe e Adobe Cloud Isso é tudo que eu queria
mostrar para o seletor de cores. Espero que tenham gostado e nos
vemos no próximo vídeo.
13. Prática: crie seu primeiro site: Nessa prática,
vamos criar nosso primeiro
site do zero. Se você quiser,
pode experimentar sozinho
ou, se
quiser, pode me seguir. E podemos fazer isso juntos. Vou clicar em Iniciar. Com IA. Para começar, escreverei
uma solicitação para nós. No meu caso,
vamos criar um site para o Yeti Mas pode ser
o que você quiser para seu site pessoal ou
pode ser um site de portfólio. Pode ser o que você quiser. Vou começar a escrever meu prompt, um site para o Yet learn. Uma plataforma de aprendizado
que oferece cursos que estão disponíveis
em diferentes ensinamentos, em diferentes plataformas de cursos. Os cursos são sobre
Creative Coding,
Spline, Unity,
Unity, Do Firefly,
Adores Express e Journey Vamos tentar esse prompt. Você pode ver, colocar o título, nosso nome bem no centro. Há preços
em uma página de perguntas frequentes. Na verdade, escrevi um texto sobre você aprendido
em nossos cursos. Eu quero mencionar essas cores. A paleta de cores é, vamos especificar que essa
é a cor primária Vamos ver o que isso
gera miseravelmente. Podemos ver o que isso
gerou para nós. Podemos ver que apenas sua
unidade interior tem algum texto aqui. Cursos de ponta para
vários níveis de habilidade. Aqui temos alguns cursos
como o Sublime Course,
o curso Firefly
e o Unity Achamos que os preços removerão esta seção porque na verdade,
não vendemos
cursos neste site Isso é apenas informativo. Eu não gosto disso, por exemplo. Eu posso regenerar isso. Na verdade, não
gosto de nenhum desses, então podemos digitar FAQ. Temos algumas perguntas que
as pessoas podem estar fazendo. Agora que temos o layout
básico aqui. Também devemos remover
os preços daqui. Os cursos aconteceriam aqui, FAQ poderia nos levar até lá. E acho que estou muito
feliz com as cores. E agora podemos
realmente usar isso como nosso ponto de partida para
personalizar completamente nosso site Por exemplo, cursos aqui. Sim, na verdade estou muito
feliz com esta página. Vamos nos aprofundar na personalização, na adição
e remoção de seções
, na navegação e na criação várias páginas nos vídeos que serão lançados
no próximo capítulo
14. Resumo do capítulo (seu primeiro site): Então, neste capítulo, criamos seu
primeiro site. Começamos escrevendo uma solicitação, como escrever uma solicitação e algumas dicas e
truques sobre como escrever
a solicitação mais detalhada
e quais
são alguns tipos de limitações da IA dos criadores No entanto, acho
muito bom que ainda seja
IA e, na verdade, crie um site funcional para
você a partir de um único prompt Também mostrei uma ferramenta de seleção de cores
que ajuda você a escolher as cores do seu site para praticamente qualquer coisa que você
quiser no mundo digital Você pode usá-lo em design
gráfico. Você pode usá-lo em web design. E eu só queria mostrar a você uma ferramenta realmente útil que espero, tornará seu fluxo de trabalho
um pouco mais fácil Depois, mostrei algumas
personalizações de fontes, como alterar
as cores dos elementos e como alterar uma imagem Como alterar o texto. Como realmente se
regenerar com IA. Se você não está satisfeito
com o resultado, mas realmente
quer tentar novamente. Sim, na verdade, criamos seu primeiro site que também é
totalmente funcional. No próximo capítulo, analisaremos
o CMS, um sistema de gerenciamento de conteúdo Vou entrar em detalhes sobre o que é na próxima aula de introdução, mas espero ver
você no próximo vídeo
15. Introdução de capítulo (CMS): Portanto, este capítulo
é sobre CMS. Você vai me perguntar, o que é CMS? Bem, significa Sistema de Gerenciamento de
Conteúdo, que é basicamente um sistema que ajuda você a gerenciar sua criação de
conteúdo, como blogs,
anúncios de emprego e páginas de marketing. Tudo isso é gerenciado por sistemas de gerenciamento de
conteúdo. No CMS e no Framer, existem coleções
que permitem mostrar conteúdo e gerenciar conteúdo
em seu site com facilidade Uma coleção no Framer funciona como um banco de dados simples em que você usa um conjunto de campos
diferentes, cada um com um tipo específico, para coletar uma lista
de itens que podem ser armazenados e referenciados
em todo Isso permite
maior flexibilidade e controle do conteúdo do seu
site. Facilite o acompanhamento de informações
atualizadas e relevantes sem mexer no design do
seu site As páginas do CMS permitem que você exiba
conteúdo como postagens de blog, artigos de
ajuda, atualizações de
ofertas de emprego com base em itens do CMS Então, entraremos em detalhes
sobre todos os recursos do CMS. Então, entraremos em detalhes sobre o sistema de gerenciamento de
conteúdo
neste capítulo e você
aprenderá mais à medida que avançarmos. Eu prometo
que não é tão complicado, é apenas mais fácil fazer isso do que explicar e
aprender Então, vamos direto assunto e
nos vemos
no próximo vídeo.
16. Crie um site de blog: Neste vídeo,
veremos como criar seu próprio CMS. Isso significa criar seu
próprio primeiro blog, que será armazenado em um sistema de gerenciamento de conteúdo. Vamos voltar ao nosso site que criamos
no capítulo anterior, apenas como um exemplo que usamos. Aqui está nosso site e
queremos clicar no CMS. Podemos importar um
arquivo CSV para ter uma coleção CMS ou adicionar um blog Aqui, temos tópicos
diferentes. Como exemplo, temos
cinco blogs diferentes aqui. Aqui à esquerda,
temos as coleções em si sobre as quais eu estava
falando no vídeo anterior. Na introdução, podemos
adicionar mais coleções de CMS. Se você tiver um
plano superior, poderá adicionar mais. Você também pode ter, por exemplo, anúncios de
emprego, etc Você pode usar o CMS em todos os diferentes
tipos de situações Vamos continuar com
o blog que queremos. No topo, temos o indicador de que
este é realmente um CMS. Em seguida, podemos adicionar um novo
item ao blog. Podemos editar os campos
ou importar. Vamos tentar adicionar um novo item. Aqui você insere seu título, por exemplo, exploração espacial. Ele
gera automaticamente um slug para você que, é claro, você pode
alterar se quiser Por exemplo, eu
mudei para apenas espaço. Então, podemos datar, por exemplo, o dia
31 de agosto de hoje Podemos escolher uma imagem para
representar nossa postagem no blog. Podemos definir a
resolução e adicionar um texto alternativo para
acessibilidade e SEO. Ou podemos escolher uma das imagens
de estoque. Por exemplo, eu
quero pesquisar espaço, podemos escolher, por exemplo, este. Aqui vamos nós. Agora é importado para o blog. Em seguida, você quer realmente
escrever o blog ou colá-lo. Se você o escreveu
em outro lugar, pode estilizá-lo Por exemplo, vou dar a ele um
título de exploração espacial. Eu posso alterar o tamanho do título como um markdown normal Vamos escolher isso aqui, sua postagem de bloqueio real seria exibida. Você também pode vincular
algo ao texto. Você pode colocar em negrito, em itálico. Você também pode transformá-lo em um
trecho de código e adicionar uma lista de
marcadores. Você pode numerá-lo. Você pode adicionar imagens, você pode adicionar vídeo. Você também pode incorporar o código HTML. Por exemplo, se você quiser
incorporar um vídeo do Youtube, você pode fazer isso aqui. Sim. Depois de terminar,
você clica em Seguro na postagem
do seu blog , aqui, por exemplo. Talvez queiramos entrar aqui e ver quais
exemplos eles têm. Agora que você também pode
editar os campos, você pode alterar o título, você pode ter uma área de texto
reservada Você também pode alterar
o nome da data. Aqui está o que estamos modificando. Por exemplo, eu não
quero que isso seja um encontro. Eu quero que isso seja um
encontro, por exemplo. Ou como a data de publicação,
algo parecido. Tudo depende de você.
O conteúdo pode ser alterado. Por exemplo, postagens de blog agora que você
realmente tem o CMS. E vamos deixar esses
exemplos aqui por enquanto. Queremos voltar e temos uma
página separada chamada blog, e todas as
postagens do nosso blog estão aqui. Aqui está até mesmo o que criamos, embora seja
controlado pelo CMS. Você pode clicar duas vezes em qualquer um deles e alterar as propriedades. Isso o levará direto para lá. Você pode até estilizá-lo aqui. Alterar um dos elementos
no CMS mudará todos eles. Na postagem do blog que temos em casa, temos um blog, por exemplo. Eu quero vincular isso, por exemplo. Eu quero escrever uma postagem no blog. Vou deixar
assim por enquanto. Mas, na verdade, nós o modificaríamos. Então eu quero
vincular isso ao blog. Quando eu visualizo isso,
eu rolo para baixo. Eu clico aqui e isso nos
levará aos blogs. Vamos carregar as imagens. Você pode clicar em
qualquer um deles e ver o conteúdo que nos
devolveu totalmente. Só queria voltar. Você pode clicar e ler sua postagem de
bloqueio, aqui mesmo. Sim, é assim que você cria sua primeira coleção de
CMS Há muitas, muitas possibilidades do que
você pode fazer com ele. Tenha um plano mais alto, mas
tudo é praticamente o mesmo. É a mesma ideia de você criar um blog ou,
por exemplo, um anúncio de emprego. E você simplesmente coloca seus valores e escreve o conteúdo aqui. Vou ver no próximo vídeo.
17. Escrita de conteúdo fácil: Agora que sabemos como realmente
criar sua própria coleção de blogs, queremos preenchê-la
com, você sabe, não escritos pré-fabricados, mas algo original e
algo que pertence a nós Certo? Então, vamos
escrever, clicar e excluir todos
esses modelos e postagens de blog
pré-criadas. Tudo bem, vamos
para o Chat PT. Vou te dar
dicas sobre como escrever seus próprios blogs com
a ajuda do Chat PT. Você deseja se inscrever se ainda
não tiver uma conta ou quiser fazer login como
eu farei no meu caso, você deseja fazer login e
pode usar seu endereço de e-mail. Você pode continuar com o Google, sua
conta da Microsoft ou com a Apple. Vou continuar
com o Google. Vamos ver o que
realmente é um GPT. É um grande
modelo de linguagem baseado no Chappot, desenvolvido pela Open II e
lançado em 30 de novembro de 2022 Praticamente
dá a resposta para qualquer coisa, qualquer coisa que você peça. Obviamente, ele tem alguns filtros e insetos e pode
atrasar e ter alucinações IA aberta, por si
só, diz que é importante observar que nem sempre
é factualmente correta porque
é um conhecimento cortado Vamos dar uma olhada juntos em
setembro de 2021. Pode estar desatualizado
, nem sequer sabe. Ele conhece o Framer como uma ferramenta de
prototipagem como o Figma, mas não Eu, nós vamos ajudá-lo e
vamos deixar que ele nos ajude. Eu tenho um blog, cinco postagens de registro,
sobre exploração espacial. Um deles deve ser chamado
de exploração espacial. Precisamos ser o mais específicos
possível ao
descrever ao Chad
GPT o que queremos Porque no vídeo anterior, criamos a exploração espacial. Eu só queria
preenchê-lo também, o único nome de exploração espacial. O texto vai entrar aqui. Vamos ver o que isso nos dá. Ele digita muito rápido, então
não precisamos realmente
esperar tanto tempo. Vamos ver. Na verdade, não tem um que se
chame apenas de exploração espacial. Acho que apenas especifica mais detalhadamente sobre o que
vai falar,
por exemplo, desvendar
o Eles são curtos, mas eu quero torná-los um pouco
mais longos, para que sejam leituras de três a quatro
minutos, em vez de um parágrafo. O blog publica três a
quatro minutos de leitura, basta digitar mais. Podemos ver que,
na verdade, ele não seguiu
as instruções e está
reescrevendo o que escreveu Porque eu realmente não tenho certeza se esta seção seria
uma leitura de três minutos. Vamos colocar isso de uma maneira diferente. Eu quis dizer fazer cada postagem no blog. Aqui vamos nós. Podemos ver que
é mais longo, mais específico. Na verdade, gosto do
tamanho deles, mas agora só escrevia sobre uma postagem de bloco, se
você quiser que eu veja, na verdade perguntando se
queremos continuar com o resto da
postagem do bloco, digamos Sim, eu tenho. Às vezes, pode
congelar um pouco. Deixe pensar um
pouco e vamos começar. Podemos ver isso por mais dois. E eu quero dizer
que está me perguntando novamente. Vou deixar
claro que, sim, estenda cada uma das postagens do blog. Na verdade, podemos ver que
cada uma das postagens do blog
agora tem 400.500 palavras. Talvez este seja um
pouco mais longo, apenas 400 palavras. Agora que temos isso, vamos realmente dar uma
olhada no conteúdo sobre o qual ele escreveu aqui. Trata-se de desvendar
o cosmos além. Na verdade, em vez de
examinar cada um, podemos pedir um resumo. Forneça um resumo rápido
de cada postagem do blog. Vamos dar uma olhada nas resenhas
da postagem do blog. primeira é sobre o profundo impacto
da exploração espacial, traçando sua história e
destacando sua importância Sim, eu gosto disso, e
vou continuar com isso. Temos ícones da engenhosidade
humana, celebrando os
visionários que uniram
a jornada da celebrando os
visionários que uniram
a jornada da humanidade ao espaço. Este post presta homenagem a
figuras como Udi Ga Guiden, Neil Armstrong. Eu gosto disso. Depois, temos o tópico da
busca por mundos habitáveis, da compreensão do universo e do potencial de vida
extraterrestre
e descoberta O próximo é, na verdade, um
pouco controverso. Ou não controverso, fala-se
muito no momento, viagens e missões
espaciais de colonização a Marte Na verdade, está falando sobre projetos ambiciosos de sexos
espaciais Mas, como está desatualizado, não
acho que realmente
sirva exemplos recentes, mas talvez aqueles que
aconteceram antes de 2021. A última é a exploração
espacial versus considerações éticas Atingindo um equilíbrio delicado que é falar sobre proteção
planetária e preservação cultural, mantendo a integridade
dos ambientes celestes Gosto muito de todas
essas postagens do blog. Agora que temos todo o conteúdo que precisamos para o nosso blog, podemos realmente
começar a publicá-lo. Isso é o que vamos
fazer no próximo vídeo.
18. Preenchendo seu blog: Agora que realmente temos nossas postagens
no blog e nosso conteúdo, é hora de
colocá-los em nosso site, aquele chamado exploração
espacial. Vamos dar uma olhada na
primeira postagem do blog. Vamos garantir que estamos
pegando a versão correta,
que é a versão estendida Vamos pegar isso, colocar isso aqui,
vamos copiar isso. Coloque isso aqui. Temos nosso cabeçalho.
Na verdade, talvez queiramos, por exemplo, conversar com PT,
digamos, para uma postagem no blog. Como é muito longo
dividido em seções, eu só quero mostrar
algumas formatações que você poderia fazer com o chat
PT e o framer Espere e pense um
pouco. Aqui vamos nós. temos nossas seções do blog Agora temos nossas seções do blog que seriam
mais fáceis de digerir Acho que mesmo no clima atual com
o
Tiktok e tudo mais, acabei de colar o
nome da seção Vou selecioná-lo
e escolher Indo para,
por exemplo, a jornada
cósmica começa Na verdade, vamos
deletar isso. Temos tudo limpo
e sem repetições. Selecionaremos o título
para colar isso. Você simplesmente entra e dá um tapinha, bem, na verdade você pode fazer
isso ainda mais fácil e rápido Então, já temos duas seções. Vamos colar os outros. Excluiremos a parte da seção. Recebi uma carta extra. Estamos apenas selecionando cada uma
das palavras da seção, certifique-se de que não haja espaços. E então eu poderia colocar em
negrito usando o comando de atalho no
Mac ou o controle no Windows, ou simplesmente entraria
e selecionaria o título dois para cada um. Aqui vamos nós. Temos nossa primeira postagem no blog. Já temos nossas fotos. Temos a data publicada. Vamos mudar o slug para
ser um pouco mais específico. Não queríamos fazer isso. Vamos colar isso aqui. Mas faremos a
exploração espacial aqui. A lesma está mais curta, já
está salva. Isso é tudo que precisamos
fazer. Agora, se você entrar, aí está sua postagem no blog. Você quer fazer isso para cada postagem de blog que
criamos e que você criou. E vamos realmente fazer isso. Então, adicione um novo item. Vamos pedir ao Chachi Pet que divida, divida cada uma das postagens do blog em seções, como
você fez neste caso Não precisa me pedir para continuar. Eu quero isso para cada postagem de
blog que temos. Por isso, tento ser o mais específico
possível para que não pare e não
espere que eu responda Mas tudo de uma só vez? Na verdade, eu não
entendi e
escrevi apenas para nossa segunda postagem no blog, dividida em seções, postagem
do blog número 345 Vamos esperar que ele produza
os resultados, espero que sejam os que queremos Então, vamos ver se isso realmente
aconteceu em cada postagem do blog. E sim, podemos ver 543
e temos dois aqui. Já colocamos o primeiro. O que queremos fazer é
clicar em Criar novo item. Copie o título. Data de publicação. Vamos fazer o mesmo.
Vamos mudar a foto. Algo relacionado ao espaço. Vamos copiar esse blog aqui. Excluir. Exclua a opção Não deixar nada para trás que não esteja selecionando pelo
motivo indicado. Aqui, vá lá. Vamos destacar a última seção deste blog e queremos
ver as mudanças. E temos mais um blog que você deseja fazer isso para cada blog que
você criou. Para manter o vídeo curto, estou fazendo isso apenas para dois, mas espero que agora você
tenha uma ideia de como fazer isso e, com sorte, tenha
implementado E
nos vemos no próximo vídeo.
19. Prática: crie seu próprio blog: Bem-vindo a um novo vídeo prático. Na verdade, queremos reunir tudo o que você
aprendeu neste capítulo, o site que desenvolvemos
no capítulo anterior,
que começamos. Deixe-me te mostrar
rapidamente, aprenda. Quero ter um blog que descreva os
cursos que temos. Vou pedir ajuda ao
Chad GPT. Quando estivermos no GPT do Chade, queremos pedir ajuda Temos um Unity, um curso de programação criativa e um curso de Applying sobre o qual
quero escrever No blog que quero escrever, estou criando um blog nos cursos
oferecidos pela nossa empresa. Somos chamados de Unity Learned. Oferecemos cursos on-line que são educacionais e têm
tudo a ver com inovação. Então, vamos escrever para
Fate of Coding e Unity, queremos três postagens em bloco Quero três
postagens em bloco sobre os tópicos. São
três postes de quarteirão. É spline, às vezes o mistura com o termo matemático,
spline os três D, spline os três D, software de
animação e modelagem e codificação criativa Essas postagens do bloco serão uma introdução ao curso e descreverão o que as espera. O resultado do aprendizado é especificar, não os torne longos demais e veja o que resulta. Aqui vamos nós. Aqui
estão as postagens do nosso blog. Eles precisarão ser
alterados de acordo com nossos cursos
atuais, mas esse é um bom ponto de
partida. Quero adicionar isso à
nossa coleção de blogs. Vamos excluir este e adicionar, excluiremos os modelos. Vamos adicionar um novo item. Nosso título é Creativity with Unity
Game Development Course. Em seguida, vamos levar isso aqui. Eles já estão em negrito. Foi assim que ele o copiou. Vamos, vamos escolher uma imagem. Então, vamos escolher essa
foto como nossa capa. Agora que temos nossa
primeira postagem no blog, vamos importar o resto delas. Coloque no título Data,
Pesquise uma imagem. Então você quer colar isso. Veja desta vez. Por algum motivo, não
colou os parágrafos. O que é estranho porque
aconteceu neste, certo? Isso foi estranho. Não sei
por que isso aconteceu aqui. E escreveremos em codificação
criativa, talvez apenas digitemos codificação porque ela
não é muito Bem, eu gosto mais desse. Aqui vamos nós. Agora, queremos
adicionar isso à nossa página. Aqui temos o blog. Deixe isso carregar. Eu sei por que isso não foi atualizado. Isso não é o que queremos, então precisamos adicionar isso. A razão pela qual
não está aparecendo aqui que precisamos adicionar uma nova página Desculpe, não estou aqui agora. Ele foi atualizado. Lá vamos nós. Isso é horrendo. Nada
é realmente legível. Então, vamos mudar essa cor para branco para deixar isso um pouco mais bonito, um pouco mais branco. Desculpe. Vamos fazer
isso branco também. Isso é muito melhor. A outra versão era
muito, muito ruim. Vamos continuar com as páginas de bloqueio
que não estamos usando aqui. Também precisamos
mudar, vamos ver. Ok, então temos isso, vamos aqui, vamos
personalizar isso. Mude isso para branco, mude
isso para um pouco mais branco. Na verdade, o texto está lá, mas é muito difícil de ler. Na verdade, eu não percebi isso. É por isso que é importante
escolher boas cores. Eu clico em Clique em Conteúdo, Onde, vamos lá. Eu vou para Body. Eu vou para Editar. Dessa forma, todo
o corpo do texto
nos blogs será alterado sem a
necessidade de entrar em cada página e alterar
a fonte ou a cor. Em vez desses, eu só
quero ter um que diga blog e
faremos nossos cursos. Vamos vincular isso ao blog. O motivo pelo qual eu só
queria verificar novamente é que
esse é o pai deles. Quando vinculamos isso, todos esses elementos dentro
dessa caixa também são vinculados
à página do blog. Agora, se realmente visualizarmos essa rolagem para baixo, clique em Blog. Aqui temos nosso blog,
totalmente responsivo, perfeito para seu tablet e para seu iphone, bem
como para seu computador Aqui vamos nós. Esta foi a criação do
nosso blog. Espero que você tenha que
praticar sozinho. Caso contrário, você seguiu
nosso tutorial prático. E isso também é absolutamente
bom. E
nos vemos no próximo vídeo.
20. Visão geral de capítulo (CMS): Então, neste capítulo,
aprendemos tudo sobre CMS, que significa Sistema de
Gerenciamento de Conteúdo Como tenho certeza de que você
já se lembra, analisamos a criação de blogs, como adicionar um blog e
integrar seu blog ao site que
você criou anteriormente. E também
analisamos a ajuda do ChatchPT
e como podemos criar
blogs com a ajuda do ChatchPT E analisamos como
importá-los de volta para o framer E também praticamos
criando nosso próprio blog, e praticamos um pouco
isso E personalizamos o
texto e as fontes e, na verdade, encontramos alguns problemas que
eram muito confusos Mas, no final,
conseguimos resolvê-los. E espero que você também tenha aprendido com esses pequenos soluços E nos vemos no
próximo capítulo, onde
mergulharemos no avançado,
e no próximo
capítulo, onde mergulharemos na personalização
avançada,
que consiste basicamente em efeitos, seções
diferentes, cabeçalhos, tudo isso,
tudo o que você
estava esperando Tudo o que é
personalizável tem a ver com o Framer Uma vez que você já tenha criado
seu site com IA, essas são as coisas
que realmente vão se
aprimorar e tornar
seu site único Obviamente, isso
não é baseado em IA, mas é bom saber como fazer essas coisas para que você
possa personalizar seu site
sozinho depois criar seu modelo básico pela IA. Então, nos vemos
no próximo capítulo.
21. Introdução de capítulo (reduções avançadas): Bem-vindo ao próximo
capítulo, que
trata de
personalizações avançadas Analisaremos a criação personalização com
seções de efeitos, cabeçalhos, adição de seus próprios formulários e mídias e todas as coisas boas
que
abordaremos neste capítulo Isso realmente ajudará você a criar um site
verdadeiramente exclusivo e realmente adaptá-lo às suas próprias
necessidades e à maneira como você deseja criar seu
site. E também analisaremos
não apenas o uso de
cada elemento separadamente, mas também combinaremos
tudo para criar uma coisa coesa E também
praticaremos isso e o adicionaremos ao nosso site que
desenvolvemos ao longo
do curso.
22. Por que a personalização é importante: Então, quero me
aprofundar um
pouco por que a personalização
realmente importa e por que é importante
ter seu site personalizado e você adaptar seus
elementos para atender às suas adaptação de seções e a personalização de
seções permitem que você exiba as informações
de forma alinhada
às suas metas Se você aprimorar sua navegação, por exemplo, personalize
seu cabeçalho. Isso simplifica o processo de navegação no site
até o visitante, melhorando
assim a experiência do
usuário Em seguida, reflete a marca. Se você tem todos os
seus elementos de forma semelhante e
projetados
de forma semelhante, isso reflete a mensagem da sua marca e reforça a imagem da sua marca formulários de mídia personalizados
e a interatividade realmente o tornam mais
atraente para o visitante Ele também otimiza a funcionalidade, o
que ajuda na usabilidade,
consistência e
profissionalismo, aumenta a confiança dos
usuários e,
finalmente, impulsiona a interação Ícones, padrões e integração
social personalizados incentivam o engajamento. Portanto, esses são apenas alguns dos
motivos pelos quais a personalização
é importante em seu site E espero que você fique
por aqui para assistir ao nosso capítulo e ver como realmente adaptar
seu site às suas Então, nos vemos
no próximo vídeo.
23. Seções: Este vídeo explorará a
primeira personalização que analisaremos, que são as seções Vamos ver nosso site de
exemplo com
o qual já
trabalhamos antes. O que vamos querer
fazer é entrar em Insert. Aqui temos nossa
seção em Fundamentos. Aqui temos várias opções de seção que
podemos escolher. Tudo isso, é claro, também
é clicar e arrastar. Você pode obter isso com
isso ou com isso. Realmente não importa
qual você escolhe. Você também pode
criá-lo do zero. Vamos olhar de cima e
trabalhar até o fundo. No topo,
temos nossa primeira opção. Vamos ver, ele será
inserido na parte inferior. Também podemos mudar a posição dela apenas clicando
e arrastando Por exemplo, eu coloquei aqui, é
tudo clicável
e personalizável Aqui temos dois botões, temos algum texto. Essa é uma das
seções que temos. Este é um exemplo muito simples, podemos seguir em frente. Em seguida, temos a mesma seção, mas apenas para o plano de fundo, você pode realmente adicionar uma imagem. Vamos adicionar algo do
unsplash, por exemplo, neste aqui temos a mesma coisa apenas com
um fundo de imagem Se formos mais longe, temos alguns que são uma imagem à direita
e alguns textos à esquerda, temos o oposto completo. A imagem está à esquerda, o texto está à direita. Mais um que temos
é esse aqui. Temos duas imagens, temos algum texto aqui e temos algum texto aqui aqui. Na verdade, está promovendo
o plug-in Figma, que veremos mais tarde Por exemplo, podemos
pegar isso e na verdade, movê-lo nessa
caixa de texto. Na verdade, você é livre para
fazer o que quiser, mas na verdade é
mais fácil escolher uma seção de sua
preferência aqui. Vamos dar uma olhada em mais alguns. Por exemplo, esta é duas
imagens de forma horizontal. Aqui temos uma
opção para 46 imagens. Desculpe, aqui ele realmente promove
o que temos no Framer. Em seguida, temos algumas formas
irregulares, brinquedos importados com
duplo clique Vamos comandar Z e cancelar. Lá vamos nós. Aqui temos quatro espaços reservados para as
imagens e quatro caixas de texto Você pode clicar nele, expandir as camadas e personalizar
tudo isso. Na verdade, você também pode. A seguir, vamos ver mais. Temos alguns que são
como cartões como este. Também poderíamos usar isso
para, por exemplo, nossos cursos que
promovemos em uma de nossas práticas que podemos revisar, podemos ter muitas avaliações aqui. Podemos personalizar a
largura de cada coluna. Podemos mudar o lugar
disso e daquilo, e podemos
brincar assim. A seguir, temos algumas avaliações. Em seguida, temos uma análise
em uma grande seção. Também temos nosso formulário de contato
, essencial para nossa página de
contato, importado duas vezes. Novamente, aqui você só
tem nome, e-mail
e mensagem, você pode entrar em contato conosco
diretamente, como no site. A seguir, temos alguns preços. Temos uma seção de perguntas frequentes que
você também pode personalizar. Você também pode entrar aqui e personalizar
a seção de perguntas frequentes. Você tem essa mesa. Você pode encontrar a pergunta
e a resposta aqui. Você pode alterar sua pergunta. Em seguida, temos nossa seção
confiável por seção. Você pode simplesmente
substituí-los por um logotipo, empresas que confiam em você
e mostram seu apoio. Finalmente, temos uma inscrição hoje que é muito semelhante à
primeira que vimos, que está aqui. Na verdade, acho que é exatamente o mesmo. Só que sem o texto. Sim, são praticamente todas pequenas personalizações
básicas. Eles são todos parecidos. Todos eles usam e utilizam
os mesmos elementos. Mas é bom ver alguma
variedade e ver que tudo já
está preparado, vou
ver no próximo vídeo
24. Navegação: Examinaremos a navegação, que são basicamente
cabeçalhos e rodapés;
nesse caso, eles os
chamam de barras superiores. Vamos excluir algumas
seções que
sobraram da lição anterior. É um pouco menos
confuso. Aqui vamos nós. Vamos sair do blog.
Vou deixar essa. Gosto da imagem. Vamos para inserir e
entramos na navegação. Selecionamos uma barra superior
que queremos
usar e, na verdade, a
colocamos na parte inferior, então queremos arrastá-la para cima
e colocá-la na parte superior. À esquerda temos o
logotipo e à direita temos a seção sobre contato
e inscrição. Na verdade, é uma prévia disso. Aqui está. Na parte superior, você pode ver esses
botões no logotipo. Obviamente, você pode
personalizá-lo novamente. Você pode clicar e ver que
há várias opções para
diferentes casos de uso nos quais
queremos clicar aqui. Aqui, podemos realmente
mudar tudo sem deixá-lo desatualizado
e ficar atualizado aqui. Em vez de texto,
poderíamos colocar nosso logotipo aqui. Na verdade, podemos vincular essas
coisas a, por exemplo, curtir e entrar em contato, mas não temos
essas páginas no momento. Vamos voltar à navegação. Na verdade, vimos
a versão preta aqui. Também há uma versão branca. Também há uma versão com logotipo. Se você clicar nele
até o final. Vamos levá-lo ao topo.
Exclua o primeiro, clique nele. Aqui vamos nós. Podemos mudar
a imagem aqui. Na verdade, podemos adicionar mais
componentes, quantos quisermos. Na verdade, a
razão pela qual estou dizendo que você pode obter qualquer coisa a partir de qualquer modelo é porque,
se clicarmos na área de trabalho, vamos para a direita. Você sabe como existem duas
versões de preto e branco. Na verdade, você pode entrar aqui
e mudar a cor
daqui e obter o mesmo
resultado do último. Se clicarmos aqui e
combinarmos, vamos lá. Precisaríamos mudar
esse texto aqui, é legível, na verdade até
fazer isso. Vamos clicar aqui. Escolha a cor. Teremos que fazer
isso para cada um. Vou mudar,
selecionar todos eles e mudar completamente a
cor É claro que eu
usaria esse preto se meu logotipo fosse
branco ou colorido. Nesse caso, na verdade
usaríamos um branco ou mais claro que atendesse aos requisitos de
contraste Agora vamos dar uma olhada no rodapé. Vamos clicar aqui. Vamos
ver onde foi importado. Aqui vamos nós. Na verdade, vou
arrastá-lo até aqui. Não, não é isso
que eu quero fazer. É assim. E
clique em Inserir. Aqui vamos nós. Dessa forma, a
versão para desktop será primária e, em seguida,
otimizaremos para o resto delas. Aqui podemos ver todas
as páginas diferentes você gostaria ou poderia criar, e nenhuma delas está
vinculada no momento Mas se você clicar, clique novamente e poderá vincular todas elas aqui. Da mesma forma que com o rodapé branco, a única diferença
é a cor e não a funcionalidade real
do modelo Agora que esclarecemos abaixo os rebatedores
e os rodapés, agora
é hora de
passar para as páginas
25. Páginas: Examinei a navegação. Na verdade, vamos
passar para páginas inteiras. É assim que você pode literalmente criar uma página com apenas um clique. Eu cliquei no
primeiro sem explicar. Eu sei disso. Mas aqui
temos a página de destino. Rápido e fácil, você tem tudo o que precisa
para a maioria dos sites. Temos o
espaço reservado para a imagem no meio. Temos um botão, algum texto. Temos os logotipos confiáveis. Temos algumas
seções que podem direcioná-lo mais
profundamente para o site. Temos nossa seção de perguntas frequentes onde você pode alterar
os elementos. Temos a oportunidade de nos inscrever hoje com nosso rodapé simples O que eu noto aqui é que
não há cabeçalho que seja um sinal negativo, o que eu
recomendaria adicionar um Depois de
explorar as páginas, basta adicionar um cabeçalho a esta Se você decidir usar esta página, tudo
isso será otimizado e
o design será responsivo Vamos dar uma olhada em mais algumas páginas. Há muitas
opções para analisarmos. Não vou entrar em muitos
detalhes sobre cada um deles, porque quero que você também
os explore conta própria e
brinque com eles. E você já sabe que podemos personalizar tudo,
alterar as fontes,
os logotipos, as cores e alterar as imagens com honestidade Isso é praticamente
tudo que você precisa saber. Aqui temos uma página de portfólio onde você pode exibir
seu projeto. Você pode ver que as páginas
que adicionamos estão todas aqui na seção
Páginas. A seguir, vamos dar uma olhada no teaser. É como uma promoção, fique ligado e cadastre-se, você coloca no seu e-mail E aqui está um pequeno teaser. Pode ser um vídeo
ou uma foto. Pode ser qualquer coisa. Você quer um blog. Já estamos
familiarizados com blogs. Você também pode adicionar um aqui. Você pode adicionar um artigo de blog
separado sem a coleção de blogs. Se você quiser, podemos adicionar uma barra lateral que é basicamente
um cabeçalho lateral. Temos diferentes tipos
de projetos aqui, nos
leva a ver mais Depois da barra lateral,
temos nossa página do projeto, que é bem
parecida com as outras que já
vimos Também temos uma página em branco. Vamos ver se ele carrega corretamente. Página em branco apenas para suas
criações. Vamos pré-visualizá-lo. Aqui temos um carrossel
completo qual você pode brincar Também temos um blog de imagens aqui, que é mais ou menos como
um diário de documentário de imagens. Temos um clássico de quatro páginas. Só para ter um link quebrado, se você tiver algum lugar onde
o visitante não queira ser redirecionado, basta inseri-lo A seguir, temos alguns portfólios. Temos uma página de teaser
em breve. Temos, novamente, uma introdução. A maioria deles é para uso
pessoal, para blogs, mas você também pode
sempre transformá-lo algo profissional e ser mais profissional
do que casual aqui. Mas tudo depende de você. Você pode alterar até mesmo suas
páginas da maneira que quiser. Você pode arrastar isso aqui, arrastar isso ao redor e
ver o que acontece. Eu sei que não é tão flexível,
mas, de certa forma, é quando você realmente olha para ele, experimenta,
brinca com as coisas e
vê se gosta dá uma boa chance
porque pode criar resultados muito bons. Eu esperaria um pouco para ver o que
acontece e continuaria usando o Framer enquanto isso porque você nunca
sabe o que vai acontecer e qual
tarefa terá Sim, eram páginas. Sinta-se à vontade para personalizá-lo
e dar uma olhada. Te vejo
no próximo vídeo.
26. Mídia: Agora, analisaremos a mídia aqui. Eu sei que pode ser um
pouco opressor, mas todos eles são
muito parecidos Vamos primeiro examinar essas
subcategorias na mídia. Você pode importar uma imagem, um vídeo em animação ou áudio. Vamos começar com uma imagem simples. Vamos clicar em Iff e
arrastá-lo para nossa seção. E você pode ver que ele se
adicionou
à seção em que queremos
clicar no Surge Gif Depois de importar o
GIF como mídia, você pode clicar nele e você terá um botão Surge aqui Você pode simplesmente
digitar o que quiser. Vai dar uma
olhada de como isso é fofo. Toda vez que você pesquisar
, vai ser diferente. Eu o apaguei. Vou
digitar cat novamente. Vai ser uma imagem
completamente diferente. Desculpe, isso é muito fofo
para não se distrair. Vamos deixar isso aí. Vamos dar uma olhada no
próximo formulário. Temos vídeos. Podemos importar
um vídeo diretamente do nosso laptop ou importar um vídeo usando um quadro do
Youtube ou importar do Vimeo Vamos clicar no Youtube
porque ninguém usa o Vimeo. Aqui temos o jogador. Precisávamos ter um link de
exemplo aqui. Podemos ligar e
desligar a reprodução automática. Por exemplo, eu fiz um loop. Podemos ativar ou desativar o som e decidir a cor
do jogador Também podemos ter algumas fronteiras. Vamos clicar em Publicar. Vamos selecionar todos esses
comandos X eles. Então, corte. Vou postar tudo isso
na página aqui. Só temos um
exemplo que eu colei. E agora podemos pré-visualizá-los. No final da página, você pode ver que o Jeff
está jogando imediatamente. Podemos jogar a integração com a
Mayo. Não tenho certeza do
que aconteceu com o Instagram aqui porque é
um pouco importante. É sempre necessário
verificar se o Wi funciona e se tudo está carregado. A seguir, vamos dar uma
olhada nas animações. Vamos clicar em Lotti. Lotti são basicamente animações
rápidas custo muito baixo Na verdade, não estão usando quase nenhuma otimização
do laptop ou do desktop
e, na verdade, são muito leves. Depois de importarmos o lote, podemos selecionar o link do qual
estamos obtendo o lote. Temos as
instruções de jogo, a fonte. Faça o upload e
você verá que a loteria está jogando muito bem. Nós
temos a direção. A seguir, vamos dar uma olhada no áudio. Aqui você tem várias opções
diferentes para escolher, do Spotify ao Apple
Music, ao podcast
da Apple, ao
Sound Cloud, ao Simple Cast e ao simples P three que você
pode importar do seu laptop Essas são todas as
opções de mídia para isso para o framer, vou ver no próximo vídeo
27. Formulários: Neste vídeo, vamos ver
os formulários como elementos. Primeiro, vamos analisar a entrada. Podemos adicionar uma entrada. Dessa forma, um visitante
do site pode digitar
seu e-mail. Por exemplo, clique em Inscrever-se. Agora que temos suas informações,
podemos clicar duas vezes. Podemos usar um serviço diferente
para inserir loops, formar Spark mail, chimp
e Também podemos redirecionar o visitante depois que ele
clicar em se inscrever Também podemos mudar
a palavra para isso. Vamos dar uma olhada no
resto dos formulários. Todos esses são
os mesmos formulários apenas para serviços diferentes. Por exemplo, vamos ver o formulário de
texto e o calendário. No Calendly, você pode conectar sua conta do Calendly e marcar um compromisso
no formulário tipo Você pode preencher um formulário de texto
diretamente no seu site. Isso é tudo para formulários e nos
vemos no próximo vídeo.
28. Ícones: A seguir, vamos dar uma olhada nos ícones. Aqui temos vários ícones
diferentes que você
pode usar para personalizar seu site e adicionar algumas ilustrações personalizadas para
adicionar um pouco de brilho Por exemplo, vamos
ver os humanos. demorará um pouco importação demorará um pouco e, se clicarmos
duas vezes nela, podemos
personalizá-la aqui, o que é incrível. Você pode mudar a postura, você pode mudar o corpo, é absolutamente ótimo Você pode mudar a
direção aqui, você pode mudar a cor
da pele aqui. Tudo é muito personalizável se você estiver procurando
por um ícone humano rápido Em seguida, vamos entrar no Twinmoi, na verdade, tenha
ícones de emoji em um só lugar Podemos pesquisar um emoji aqui, podemos simplesmente configurá-lo assim Vamos procurá-lo e ele nos
dará o
ícone equivalente em emoji Em seguida, vamos para Mogi. Você tem diferentes,
na verdade, todas
as variantes de Mogi, você pode personalizá-las
completamente E você pode continuar
pesquisando e encontrar exatamente o
que está procurando. Você pode alterar o
raio do círculo. Você pode girar o rosto. Você pode alterar o personagem e a cor
do plano de fundo. Em seguida, vamos entrar em Feather. Neste, se clicarmos nele, temos uma
grande lista de ícones
que podemos usar. Por exemplo,
Wi-Fi e ele muda para Wi-Fi. Você pode espelhá-lo. Nada vai acontecer
porque não é como um ícone espelhado aqui Se realmente
quisermos espelhá-lo, você também pode alterar a
cor do seu ícone. A seguir, vamos dar uma olhada em Hero. Aqui temos apenas
uma lista diferente de muitos ícones diferentes. Aqui temos o ícone do Wi-Fi, novamente, é um
pouco diferente. Você pode escolher
o que quiser, pois eles
se cruzarão e
terão a Por exemplo,
este
também tem uma casa diferente desta. Você realmente só precisa
observar o estilo que deseja e decidir que tipo de ícone realmente deseja
usar no seu site. Vamos dar uma olhada nos dois últimos. Na verdade, não vou mudar isso, então podemos ver a diferença. Aqui temos a lista novamente, apenas estilos diferentes de ícones. O último fósforo, este é um pouco
mais arredondado novamente, temos nossa lista
aqui Essa foi nossa exploração
de muitos ícones diferentes. Na verdade, existem
alguns engraçados, você sabe, engraçados. E você pode
personalizá-lo como quiser. Você pode adicioná-lo ao seu
site apenas arrastando, e ele será adicionado magicamente aqui Você pode clicar,
arrastar e posicioná-lo em
qualquer lugar da página que eu vou
ver no próximo vídeo.
29. Interativos: Para Interactive. Por exemplo, vamos dar uma olhada na barra de pesquisa. Basta clicar e arrastá-lo para
qualquer lugar do site. Para
adicioná-lo aqui, temos
o botão de pesquisa. Na verdade, é pequeno. Vamos levá-lo para algum lugar onde
seja um pouco mais visível. Vamos levá-lo até o topo. Vamos falar aqui primeiro. Vamos inseri-lo,
por exemplo, aqui. E reduza o preenchimento para que fique
um pouco mais integrado. Se rolarmos para baixo,
clique na pesquisa. Você pode pesquisar seu
site dessa forma. Vamos dar uma olhada no ticker. Basta arrastá-lo para qualquer lugar do nosso
site, clicamos nele,
clicamos nele duas vezes e podemos selecionar
nossos filhos aqui. Só vai girar
entre tudo isso. Por exemplo, eu escolhi Material
on Feather and Hero. Vamos realmente ver
o que isso faz, pois você pode ver infinitos loops entre todos esses ícones E é uma almofada muito boa, então parece natural. Vamos voltar e eu vou
te mostrar como personalizar isso. Clicamos duas vezes aqui. Podemos mudar a
velocidade da rotação. Nós podemos mudar a direção. Podemos alinhá-lo ao
centro esquerdo ou à direita. Podemos tornar isso mais amplo aqui
, cobrindo a página inteira. Podemos adicionar uma lacuna maior. Na verdade, mude a
direção aqui, alinhe-a até o centro. Você pode alterar o preenchimento,
o que eu não quero fazer. Podemos selecionar o
tamanho dos objetos. Podemos esticá-lo ou podemos deixá-lo no carro. Também podemos escolher o recorte. Essa é a bela almofada
que está sendo adicionada. E eu quero deixar
assim ao passar o mouse, por exemplo. Eu quero desacelerar. Vamos ver o que isso faz. Como você pode ver no Hover, seus ícones ficam mais lentos. É muito legal mostrar seus logotipos apenas para mostrar
algo que você deseja Ele se repetirá infinitamente. Eu acho que parece muito bom. Vamos seguir em frente. Vamos dar
uma olhada na apresentação de slides aqui. Ele opera da mesma forma. Nós escolhemos o conteúdo. Por exemplo, fósforo humano. Vamos escolher uma
terceira, pena. Vamos ver o que ele faz. Se você clicar aqui,
na verdade, alternaremos entre tudo isso com uma boa animação Deixe-me mostrar como
personalizar isso. Podemos escolher a direção, podemos selecionar a reprodução automática, alterar o intervalo da reprodução automática, com que
frequência ela muda Podemos escolher se a
imagem pode ser arrastada.
Quando é como um Jpeg ou PNG,
às vezes em um site, às vezes em um site, sua imagem se arrasta
e eu acho isso Eu vou dizer não. Você
também pode alterar a capacidade, a escala e a
perspectiva e girá-las Você pode alinhar na parte superior, no centro e na parte inferior Você pode selecionar o número de itens
exibidos ao mesmo tempo. Você pode selecionar a lacuna, por exemplo, se houver
duas, você pode selecionar a lacuna. Você pode adicionar ou remover o preenchimento, alterar o raio, alterar a transição
na qual eles estão fazendo a transição na qual eles estão Você pode personalizar completamente. E você pode pré-visualizar
a animação aqui, o que é incrível
na minha opinião. Você pode ver uma grande diferença. Você pode selecionar a rigidez e o amortecimento e
ver Na verdade, você pode ver
a animação aqui, o que é extremamente
conveniente se você
não estiver nem um pouco familiarizado com
animações Você pode adicionar um atraso, mas não
vamos fazer isso. Vamos ver o que nossa
animação fez. Parece horrível, mas isso foi apenas para fins de
demonstração. A seguir, vamos dar uma olhada em Carol, que é honestamente semelhante. Vamos importá-lo aqui. Isso clicará em Selecionar conteúdo. Aqui vamos nós. Temos certeza de
que isso é um Sol? Não tenho certeza se isso é um Sol. Aqui está, Este é um Sol. Vamos deletar isso.
Vamos pré-visualizar isso. Aqui está o Sol
porque não está cheio. Na verdade, não está fazendo nada para adicionar mais alguns objetos. Assim, podemos ver sua
funcionalidade clicando aqui, podemos ver a animação
e tudo mais. Então, vamos lá. Essas
foram nossas interações. Coisas muito divertidas para
brincar. E se
você sabe o que quer fazer, é muito bom e fácil
conseguir coisas apenas
usando essas ferramentas. E
nos vemos no próximo vídeo.
30. Social: Vamos dar uma olhada nas redes sociais. Aqui temos todos os tipos
de mídias sociais,
Instagram, Facebook,
Twitter, Google Maps, trustpilot e tag and bed Vamos começar com o Instagram. Vamos ver, você pode adicionar um
link para uma postagem do Instagram, e aqui você tem a
postagem do Instagram em seu site. É tão fácil quanto isso. A seguir, vamos dar uma olhada no Facebook. Este funciona
da mesma forma. Infelizmente, o link
aqui não está disponível. Mas aqui você apenas importa o link e ele
exibirá sua postagem no Facebook. seguir, vamos dar uma olhada no Twitter, que
será a mesma coisa. Só vai
exibir o tweet. Embora não seja mais o
Twitter, mas o X, o link ainda funciona. De qualquer forma, vamos passar
para o Google Maps. Na verdade, isso pode ser
mais útil do que os que
examinamos anteriormente. Você pode simplesmente importar
suas coordenadas. Ele exibirá esse local. No momento, está exibindo
algum lugar em Amsterdã. Você pode
aumentá-lo, ele apenas expandirá o mapa
para você o quanto você quiser. No canto superior esquerdo, você
tem as coordenadas. Sim, isso é
incrível na minha opinião. Então seguimos em frente. Vamos para o trustpilot. Você precisa ter uma conta na trustpilot e um
ID comercial para que ele funcione Por último, mas não menos importante, vamos dar uma olhada na etiqueta e na cama. Vamos ver juntos
o que é tag e aposta. Ele permite que você realmente importe
feeds como do Instagram e do Facebook e de todas as diferentes
mídias sociais com muita facilidade Aqui temos todas
as integrações. Nós nem temos o Framer
nesta lista porque o Framer
não é tão Sim, essa foi a etapa social, e vou ver no próximo vídeo.
31. Serviços de gás, luz e telefone: Vamos analisar a utilidade. Aqui temos várias opções diferentes, opções
de utilitários para
adicionar ao nosso site. Vamos começar com espremedores de limão. Importe-o em qualquer lugar em
que tenhamos nosso botão “Até agora”. Na verdade, podemos ter um
link para o espremedor de limão E mudamos o
estilo do botão. Nós podemos, podemos escolher a fonte e podemos escolher
um efeito ao passar o mouse A seguir, vamos dar uma olhada em Gum Road. O Road é um ótimo mercado se você estiver procurando por modelos, se estiver procurando por fontes, efeitos e
sobreposições
diferentes, você pode realmente
vincular seu produto Podemos adicionar um bloco de código
diretamente no seu site. Colocamos o código aqui. Podemos escolher o
idioma para formatá-lo. Podemos escolher se você
deseja estático ou dinâmico, podemos escolher um tema, podemos escolher a fonte novamente, cor da fonte,
as bordas e o preenchimento Também podemos incorporar conteúdo
usando a opção de incorporação. Você pode adicioná-lo aqui usando um Uro, ou você pode adicionar seu código
HTML aqui. Por exemplo, você deseja incorporar
não usando a incorporação de vídeo do Youtube, mas usando e frame. Por exemplo, se você
quiser importar um tubo curto, essa pode ser a melhor
opção para que ele funcione. Essa é a opção que você usa. Em seguida, temos nossa
área de transferência e botões de download. Podemos escrever qual conteúdo é copiado quando você
clica no botão, o
que, honestamente, é muito legal Por exemplo, se você
tem um monte de código que não quer que
as pessoas selecionem, basta
colocá-lo na parte inferior. Você pode colar esse código
nesse botão. Quando você clica
nele, exatamente essa coisa será copiada, o que é incrível A seguir, vamos dar uma olhada
no botão de download. Você pode escolher um arquivo que
será baixado aqui ou inserir um
URL, por exemplo, PDF. Você também pode, em qualquer uma delas, personalizar sua fonte,
ícone e estilo. Vamos passar para a tabela aberta. Eu não tenho uma conta de mesa
aberta, mas você pode fazer
reservas usando isso. Em seguida, temos o Product Hunt, o evento Fork, tudo isso Se você os estiver usando, eles
podem ser muito úteis. Mas porque eu não tenho, eu
realmente não os acho úteis. Mas no produto, você pode selecionar um produto que
será exibido aqui. Vamos dar uma olhada rápida
na bifurcação e no evento. Você pode reservar uma
mesa usando o garfo. Faça com que os clientes reservem uma mesa usando sua conta,
the fork Você também pode comprar ingressos Event Bright se
estiver vendendo ingressos. Vamos finalmente dar uma
olhada no adesivo e no logotipo. Pegajoso. Você pode ter notas
adesivas e logotipo Você pode inserir seu logotipo e
, honestamente, é apenas uma imagem, mas é um logotipo E você pode escolher
o nome da empresa, o raio nas notas adesivas. Quando você vai ao ar, as pessoas podem realmente escrever suas anotações aqui. Não está funcionando
agora, não sei por quê. Talvez se o colocarmos
em uma página real. Vamos ver, agora vamos ao vivo. Hm, não sei por que
isso não está funcionando. Uh, você pode simplesmente, você sabe, adicioná-lo como uma nota adesiva, como uma decoração para o seu
site, não importa Desculpe por quase
te informar mal, peço desculpas. Sim. Todos esses eram utilitários
e agora é hora de experimentarmos todos
esses elementos na personalização
32. Como juntar tudo: É hora de realmente
juntá-los todos. Vamos voltar ao
painel e começar, vamos criar um novo site
rápido. Por exemplo, será
sobre uma empresa de marketing. É design extorial. Na verdade, vamos fazer
uma loja de surf especializada em todos os tipos de esportes de surf,
de ondas a windsurf, citando surf e win foil,
tornando-a colorida e vibrante, mas mantendo um surfista Vamos ver o que acontece. Também é uma boa atualização
para nós Agora que a geração acabou de ser gerada, vamos realmente dar uma olhada A primeira coisa que vejo é uma imagem de fundo
aleatória que, aparentemente, não
acho que
possa gerá-la. É estranho que tenha feito isso. Aqui podemos ver que,
para o kitesurf,
na verdade, coloque kits que não estejam relacionados
ao kitesurf No windsurf, ele coloca o
wakeboard no surf normal Coloca o surf normal provavelmente porque é
mais difundido do que qualquer outra coisa, mas esse não é realmente o ponto Vamos dar uma olhada nos elementos
que podemos adicionar para personalizar a página. Primeiro, quero inserir uma barra
de navegação na parte superior. Acho que quero adicionar este. Vamos apenas arrastá-lo para cima. Vamos clicar nele aqui. Eu quero adicionar home on. Eu vou para Icons, vou para Hero. Aqui temos um pequeno ícone, vamos torná-lo azul, combina com a vibração Vamos torná-lo um pouco menor, vamos colocá-lo à esquerda. Deixe o logotipo, não temos
um logotipo e queremos vincular, acho que não
podemos realmente vincular esse ícone à nossa página
inicial como eu quero. Vamos descartar isso, mas
temos nosso cabeçalho agora, vamos voltar Vamos colocar nosso logotipo,
remover nosso ícone. Vamos voltar à nossa página inicial. Vamos, por exemplo, inserir
um vídeo do Youtube sobre surfe Eu quero
inseri-lo para fazer isso, deixá-lo em toda a página. Vamos ao Youtube. Vamos entrar no Youtube
e pesquisar vídeos. Vamos apenas copiar esse link
e importá-lo aqui. Vamos ativar a reprodução automática. Agora, quando o visualizamos, temos nosso cabeçalho aqui. Temos nosso vídeo
aqui. Vamos voltar. Vamos acrescentar outra coisa. Vamos, por exemplo,
adicionar um formulário de contato. Vamos adicionar um formulário. Quero adicionar um formulário de texto. Bem, agora eu quero
adicionar calendly. Por exemplo, se a loja tem alguns eventos que está hospedando
, ela pode
mostrá-los aqui. Você pode escolher uma
conta do Calendly para se conectar. Mas também vamos às nossas páginas. Vamos às nossas seções. Role para baixo, vamos adicionar o formulário de
contato aqui. O cliente pode ficar
em contato se quiser. Você pode personalizar
isso e escolher todas as cores diferentes
para se adequar à sua paleta de cores Sim, aqui nós apenas misturamos alguns elementos para
apimentar seu site Obviamente, você pode adicionar elementos acordo com suas necessidades e da maneira como
deseja personalizá-los, mas esse foi apenas
um pequeno exemplo para você começar. Te vejo no próximo vídeo.
33. Prática: use qualquer elemento: Nessa prática,
usaremos dois elementos para aprimorar nosso site que criamos
ao longo do curso. Vamos entrar em nosso site. Vamos ver. A principal coisa que falta, com
certeza, é um cabeçalho. Eu continuo chamando de cabeçalho, mas na verdade é
chamado de barra superior aqui. Vou entrar e
importar, por exemplo, este apenas clicando
e arrastando-o Vamos clicar duas vezes para entrar. Vamos digitar Get Learn aqui. E nós realmente não
temos outras páginas. Vou remover isso
ou posso deixar isso. Por exemplo, eu esqueci
que temos um blog, eu acho. Vou simplesmente removê-los
e deixar o blog aqui. Vou vincular isso ao blog. Não vamos torná-lo azul. Já está claro
que é um botão. Aqui está nosso primeiro elemento. Se visualizarmos isso,
podemos clicar em Blog, e nosso blog aparecerá. Então, não estou feliz com o que acontece
quando você clica nele. Clique em Vamos clicar
em Link e em Hover. Poderíamos deixá-lo um pouco cinza, nada menos, sem sublinhado Não quero isso.
Vamos pré-visualizá-lo agora. Você pode ver que fica cinza. Aqui vamos nós. Vamos voltar. Esse é nosso primeiro elemento. O que está acontecendo? Não tenho ideia do que está
acontecendo agora. Volte para casa. Acho que estamos presos. Então, vamos recarregar. Isso salvou nossa barra superior. Quanto ao segundo elemento, vamos ver, eu realmente quero
adicionar nosso vídeo do Youtube. Vamos adicioná-lo aqui. Nós o adicionamos à seção. Vamos cortar isso e
colocar aqui. Na verdade, é um pouco menor. Então podemos, vamos remover isso. Na verdade, eu quero fazer
esse lado. Vamos clicar em. Temos nosso vídeo no Youtube. Na verdade, vamos otimizar
isso para outras plataformas. Isso menor, faça isso
menor, torne isso branco. E faça isso branco também. Ele muda aqui, torna isso
menor, ele se encaixa horizontalmente. E coloque-o
assim. Aqui vamos nós. Eu quero me concentrar principalmente na versão
Dextop agora. Se pré-visualizarmos isso,
temos nosso vídeo aqui. Algumas coisas que eu
quero mudar é que eu quero colocar em nosso vídeo. Vamos digitar, vamos copiar isso, vinculá-lo aqui. Ative a reprodução automática. Perfeito. Isso corta
um pouco aqui. Talvez queiramos ajustar isso, mas você sabe que são detalhes
e pode corrigi-los mais tarde. Mas o ponto principal
era que eu queria adicionar um vídeo e um cabeçalho
à minha página da web, e fizemos isso com sucesso. Essa era a nossa prática. Espero que você
tenha gostado deste capítulo e tenha
experimentado por si mesmo, ou tenha seguido
essa prática E espero que você tenha
aprendido alguma coisa. Nos vemos no próximo vídeo.
34. Visão geral de capítulo (reduções avançadas): Neste capítulo, analisamos a personalização
avançada
e o uso de elementos para, você sabe, personalizar seu
site de acordo com suas necessidades reais Examinamos cabeçalhos, rodapés e analisamos várias integrações
diferentes
com formulários, Google Maps, como adicionar ícones, como adicionar pequenas curvas e pequenas animações ao seu site e analisamos várias integrações
diferentes
com formulários, Google Maps, como adicionar ícones,
como adicionar pequenas curvas e pequenas animações ao seu site
. E eu acho que foi muito divertido e você pode realmente
personalizar seu site. Por exemplo, por exemplo, rolar o
logotipo
é um dos meus favoritos. É muito fácil de fazer, mas quando vejo sites
diferentes, quando estou navegando na web
, vejo isso e fico tipo, como eles fizeram isso?
Mas com o Framer, é realmente muito fácil E pode não ser
tão fácil, você sabe,
com
plataformas diferentes, como o que flui, mechas ou espaço quadrado E fazer animações
como essa é um pouco mais difícil ou como a curva da
animação E o exemplo de animação como exatamente sua animação se
comportará com elementos. E só para dar
uma ideia geral
da animação é
realmente incrível. E eu realmente nunca vi
isso em nenhum outro lugar antes, pelo menos em web designers. E eu acho isso muito, muito útil quando
você está tentando, você sabe, diminuir o tom
dessa animação. Mas você não sabe o que está acontecendo. E você continua tentando mudar os números,
mas não funciona. Dessa forma, ele
fica realmente visível e você pode obter o efeito certo apenas
olhando e ajustando Então, agora era esse capítulo
e, na verdade, adicionamos
alguns elementos ao nosso site que desenvolvemos ao longo do curso. E eu não sei se
você está fazendo o mesmo, se você está desenvolvendo um
site ou se você está, você sabe, criando vários diferentes para
cada prática. Mas espero que tenha sido útil e
divertido para você, que esteja aprendendo
algo novo e,
na verdade, simplificando um pouco o
processo para você Então, nos vemos
no próximo capítulo onde exploraremos os detalhes essenciais do
enquadrador, como as configurações de tom Você sabe, pode ser chato. Como você pode dizer,
tudo é meio chato. Mas você sabe, é o
que realmente precisamos
saber para utilizar o site em todo
o seu potencial. E, você sabe, algumas
configurações são essenciais para saber quando você está
criando seu próprio site. Então, veremos isso
no próximo capítulo.
Te vejo lá.
35. Introdução de capítulo (Nitty Gritty): Então, bem-vindo ao nosso
próximo capítulo, que é a essência do enquadrador, que basicamente
representa, você sabe, detalhes do enquadrador que talvez você
não queira não Porque você fica
tipo, oh, existe IA. Há tipo, você sabe, uma
IA criando meu site que,
você sabe, oh, por que
eu preciso de configurações de página? Mas, na verdade,
é muito importante examiná-los. E vamos detalhar
o que você pode fazer lá, quais são alguns tipos de
funcionalidades e também algumas coisas
diversas usando ações para simplificar e acelerar o processo de desenvolvimento E também veremos o plug-in
Figma para Framer. Na verdade, é muito útil e, como o Framer
costumava ser uma ferramenta de prototipagem, é realmente muito interessante analisar
a integração Então, analisaremos, escolheremos algum
protótipo no Figma
e tentaremos importá-lo no Então, nos vemos
no próximo vídeo.
36. Explore as configurações de página e site: Agora vamos explorar as configurações da
página e do site, que estão aqui. Aqui você pode ver
várias coisas diferentes. À esquerda, temos
primeiro as configurações do site e depois as configurações da página. Vamos começar
com as configurações do site. Em geral podemos alterar
o título do site, definir o idioma do site. Também podemos adicionar uma descrição do site
que ajudará nosso SEO. Podemos desativar as animações de transformação
e layout se o usuário preferir reduzir o
movimento para É aqui que também
podemos cancelar a publicação do
nosso site em todos os domínios Como não
publicamos isso, há nada para cancelar a publicação É aqui que você
também adiciona um Favicon. Essa coisinha se
chama Favicon. Você pode ver que é
Framers One agora. Além disso, quando você compartilha,
por exemplo, um link para o site, essa imagem
aparece, por exemplo, no Discord, como a imagem aparece quando você envia um
link para fora do Assim, você pode configurá-lo
de forma personalizada aqui. Você pode adicionar uma proteção por
senha ao seu site, se quiser, que está em um plano superior. Também temos algumas
configurações avançadas, como Canonical Ural. Você pode conectar seu ID do Google
Analytics para rastrear seu, para acompanhar o desempenho do seu
site. Você também pode adicionar códigos
e scripts personalizados ao seu site. Você pode adicionar uma etiqueta de
início de cabeça. Etiqueta de fim de cabeça antes. No início da etiqueta corporal. No final da etiqueta corporal. Na verdade, se você quiser entrar em
coisas avançadas com o Framer, você pode adicionar seu próprio código A seguir, vamos examinar os domínios. Nosso domínio base no momento seriam os cursos de
codificação criativa Framer, quero dizer, eu
poderia mudá-lo para
como Yeti Learn Framer Ai E poderíamos publicá-lo assim. Vamos realmente fazer
isso. Podemos ver que agora está ao vivo no Yetiarnframi Você pode ver que o site
está publicado e otimizado. Também podemos adicionar um domínio personalizado. Se fizermos o upgrade, podemos
realmente adicionar um domínio personalizado. Também podemos adicionar redirecionamentos. Em vez de criar uma nova página, se você quiser apenas redirecionar, em vez de criar uma
nova página e dizer,
ok, esta é a nova página, você pode redirecionar sua URL
antiga para uma nova URL Também temos encenações
e versões. É assim que você
acompanha os backups. Por exemplo, se você
ativar a preparação, poderá selecionar uma versão para o seu site
que deseja publicar Aqui temos versões diferentes. No momento, só temos um, que é palco e ao vivo. Em seguida, podemos analisar o
site e você pode ver o número de visitantes
únicos total de visualizações da página e a duração. Normalmente, se tivéssemos algum espectador, isso seria como um gráfico de linha
ascendente e descendente. Mas agora, como
acabamos de publicá-lo, não
temos nenhum. Também podemos ver as principais fontes
de visitantes do Google,
Twitter, Facebook,
Linton ou Framer Eles serão atualizados
dependendo de onde os visitantes
estão vindo. Também podemos ver nossas principais páginas
com bom desempenho. Se entrarmos em planos, é
aqui que você pode atualizar seu site e atualizar seu site pessoal
ou torná-lo um plano de equipe. Em seguida, se formos às configurações da
página inicial, você pode alterar o
título da página inicial, o slug, a URL Mas é a página inicial,
então você não a está Você pode adicionar uma descrição da página. Você também pode adicionar uma pesquisa
nos mecanismos de pesquisa. Isso aparecerá se
você pesquisar ou desativá-lo aqui novamente,
você pode adicionar uma imagem de página em vez da
imagem do site e também
adicionar algum código personalizado. As configurações são
praticamente as mesmas para
todas as suas páginas. Sim, essas eram as configurações da
página e do site. Espero que você tenha um pouco de
compreensão clara sobre eles Te vejo no próximo vídeo.
37. Usando ações: Em ações para simplificar
seu processo de criação. Como você pode ver, esses são apenas atalhos para fazer coisas por você Por exemplo, você pode digitar
para navegar nas páginas ou pesquisar. Por exemplo, podemos
criar uma seção. Algumas das ações
que você pode realmente realizar são criar uma página da web, criar com IA,
criar um componente publicar seu site. A partir daqui, você pode
abrir o site, ver a versão do histórico ou convidar colaboradores Ou você pode navegar
na biblioteca da equipe. Quero visitar a página do nosso blog. Se eu colocar uma barra, podemos ver as
páginas do blog, por exemplo Se eu entrar nas páginas do blog, isso me leva a este blog. Se eu colocar, isso me
leva aos blogs. Todos os blogs que
escrevemos anteriormente. Honestamente, não
acho que isso seja muito funcional ou
algo popular Eu só queria
te mostrar porque está lá e pode
ser usado se você quiser. Honestamente, tudo foi
projetado de forma tão
amigável à experiência do usuário que eu nem pensei usá-lo até começar a
criar este curso E como algo sobre o qual
eu deveria falar. Sim, isso está aqui, por
exemplo, histórico de versões. Isso pode ser útil porque não
tenho certeza de onde encontrar isso. Eu posso ver todas
as mudanças que foram feitas
no blog, por exemplo. Há 3 horas, a página do
blog não estava lá, agora está aqui. Mudamos coisas
disso para isso. Você pode realmente
ver as mudanças, o que é incrível. Na verdade, você pode
voltar para essa versão, mas selecionando e copiando camadas e colando-as aqui Sim, este foi um pequeno
vídeo sobre ações. Deixe-me saber, por favor, se você achar isso útil, na verdade, estou curioso
para saber como você pode
encontrar casos de uso para isso. Mas, honestamente, eu
prefiro entrar nas configurações ou inserir e fazer tudo sozinho, porque está literalmente a apenas dois cliques Sim, vou ver
no próximo vídeo.
38. Plugin para Figma: Neste tutorial,
analisaremos integração do
Figma com o Framer Vamos clicar em Obter
o plug-in Figma. Vamos clicar em Experimente. Vamos entrar com o Framer. Vamos clicar em Testar novamente. Vamos encontrar um exemplo de site que talvez queiramos
importar. Vamos ligá-lo. Vamos selecionar uma camada para copiar. Selecionamos uma camada, agora copiamos para a área de transferência Agora, acabamos de criar um novo site de
design. Colamos, aqui
está, tão fácil quanto isso. Você pode ver na parte inferior
que ele está sendo carregado do Figma e você pode ver que
nossa camada está aqui Na verdade, vamos
selecionar outra página. Vamos selecionar a página inicial. Vamos copiar essa
cópia para a prancheta. Agora é só colar. Você pode ver que todos esses elementos são
totalmente personalizáveis Basta importá-lo, um protótipo, para um site totalmente
funcional em apenas 10 segundos. Tudo é clicável. Você
pode escolher uma imagem, alterar seu texto,
personalizar seus elementos. Todos esses elementos
são separados. Assim como o Figma, você
pode mudar as formas. Nenhuma delas é
como imagens, mas na verdade são
elementos que você pode alterar. Sim, isso é incrível. E então você pode
clicar em Publicar. Vamos pré-visualizá-lo. Aqui
você tem uma descrição completa, eu sei por que não consigo rolar. Vamos voltar por um segundo. Podem ser necessários alguns ajustes
para que seja incrível. Por exemplo, isso não é um formulário, então teríamos que
trocá-lo por um formulário real. Entrando em formulários de inserção e
adicionando um dos formulários aqui, adicionando uma seção aqui. Mas sim, isso é realmente
incrível na minha opinião. Vamos acessar o site
e dar uma olhada. A área de trabalho está aqui. Queremos pegar isso e
arrastá-lo até aqui. 1 segundo. Estamos quase lá
para experimentá-lo um pouco mais, apenas para
caber em toda a nossa página. Vamos ver, acho que isso é bom. Agora, se formos ao site, agora precisamos primeiro atualizar
e depois ir para a página. Agora temos nosso design Figma. Eles ficaram um pouco confusos em nosso criador e é um site
totalmente funcional Sim, isso é incrível. Aqui está. Sim. Apenas esticado.
Não é grande coisa. Pode torná-lo menor.
Coloque-o aqui. Aqui vamos nós. É assim que você integra seu
figma ao Framer Te vejo no próximo vídeo.
39. Venda modelos de enquadramento parte 1: Familiarize-se
com o Framer. E como fazer coisas no Framer. Como criar seu próprio site. Como até mesmo importar seu
protótipo da Figma. Como personalizar seu
site de maneiras avançadas. Como realmente adicionar, por exemplo, uma imagem, um vídeo, um carrossel, todas essas coisas Como animar e
adicionar arquivos de lote. Você aprendeu o que é arquivo de lote, como criar seu próprio blog. Todo esse conhecimento
que você tem agora. Sim, você pode estar se
perguntando, o que eu faço com todo
esse conhecimento agora? Como posso aplicá-lo? O design da Web é muito
importante no momento e está ficando cada
vez maior a cada dia. Muitas pessoas
criam modelos. Aqui, quero mostrar primeiro a seção
de modelos. Aqui temos muitos
botões de pesquisa para o modelo ou você pode rolar para baixo e aqui
temos diferentes
categorias de modelos. Há uma agência de inteligência artificial gratuita,
uma agência de
inteligência artificial, um
blog, diretrizes de marca, registro de mudanças de
negócios,
comércio eletrônico, etc Existem muitos diferentes. Vamos dar uma olhada em alguns
dos modelos anteriores ao site. Vamos, por exemplo, abrir
alguns em diferentes gêneros. Então, isso é como a modelagem D do
terceiro jogo. Esse é um estilo muito corporativo. Vamos também abrir um para um portfólio fotográfico.
Vamos rolar para baixo. Aqui estão alguns blocos
e
os veremos um pouco mais tarde. Vamos dar uma olhada no
primeiro, o jogo como um. Vamos ver, é muito moderno. Quase um tablet, talvez. Design amigável. Ou iphone também. Como qualquer telefone, honestamente. Aqui temos diferentes
configurações do site. Vamos, temos apenas
três personagens diferentes do modelo D. Vamos ver, é um site da NFT
Collection. Podemos pré-visualizá-lo. Na verdade,
vamos ao site. Vamos ver, temos um botão de mensagem, um
botão do Twitter. Nós temos o menu, e isso nos leva até aqui. Aqui temos uma
pequena animação agradável. Temos o Instagram deles e temos
benefícios de e-mail para titulares, alguns blocos de texto e
alguns atributos. A seção de perguntas frequentes do roteiro
com uma pequena animação, gosto
muito dessa fonte. Conheça a equipe. Nós
temos o rodapé Isso é muito bem feito. Todos esses links funcionam e nos
levam às diferentes
seções do site. Aqui temos uma pequena
descrição do site. Temos os
recursos reais usados, efeitos de
rolagem, tecidos,
pontos de interrupção e alvos de rolagem Na verdade, você pode aprender sobre
cada um aqui, não
há limites
no quadro da comunidade. Isso está oficialmente confirmado. Se você entrar no modelo, eles literalmente
lhe dirão o que usam. Assim, você pode realmente tentar recriar esse efeito
em seu próprio site Na verdade, você também pode
aprender e não se perguntar
como eles fizeram isso. Você pode até mesmo entrar em contato com o
criador do modelo Eu mudei para um novo, como se estivéssemos
fartos dele Temos a lista de páginas
aqui, novamente, a descrição. Podemos denunciar esse modelo. Podemos ver como os
modelos funcionam. É um começo
iniciante para qualquer pessoa. Na verdade, podemos
vender nosso modelo. É isso que estamos
vendo agora. Vamos dar uma olhada neste. Também podemos pré-visualizá-lo. Só uma pequena inspiração para
o que estou prestes a explicar. Eu sei que não falei muito, mas aqui você pode rolar para baixo. Aqui estão algumas animações.
Isso é muito bom. Podemos clicar aqui, também
há uma pequena
animação. São muito legais. Aqui temos um pouco mais de alguns ícones,
algumas listas de espera. Vamos subir, pode rolar para
baixo até os benefícios. Vamos dar uma olhada no último,
um site de portfólio de
notas de portfólio fotográfico para uma agência ou se você é um indivíduo criativo
ou um profissional. Em vez de ver
as fotos, vamos visualizá-las novamente. Eu posso ver que essas são fotos
muito boas, alguns casos de trabalho muito diferentes mostram a variedade de fotos. Se clicarmos neles, na verdade
vamos até a foto. E uma foto detalhada, uma informação detalhada
da foto quando ela foi tirada. Cronograma, a função que
podemos visitar no site, isso é incrível Podemos ver mais algumas fotos, algumas fotos detalhadas
da foto. Podemos ver aqui, podemos
voltar para a página inicial. Podemos acessar esses links. Isso é muito incrível. Cada um deles, você pode ver, observe o quão detalhado é
esse modelo pois eles escreveram este texto. Mas isso é apenas um modelo. Provavelmente é gerado por IA. Mas ainda é como se
o esforço existisse. Não é como um texto
de lom ipsen. Na verdade, é uma história para o modelo que dá um pouco de vida
ao próprio modelo. Na verdade, estou curioso
sobre esse. Uma empresa de pipoca aqui. Olha isso. Uma bela foto. Por que estou lhe
contando e mostrando todos
esses modelos? Bem, porque você
pode realmente criar seus próprios modelos com o
framer e vendê-los Você também pode
distribuí-los gratuitamente. Na verdade, você
ainda pode ganhar dinheiro criando seus
modelos gratuitamente. Você recebe um link de afiliado e ganha algum
dinheiro com isso Mas você pode ver que os modelos também estão
aqui à venda. E eles variam
de
$40 $20 a $100. Se você quiser
ver o que ele tem a oferecer
por $100 Você pode clicar aqui e isso
nos leva a um blog que sabemos
realmente como criar. Vamos voltar. Vamos ver,
há alguma documentação. Não nos leva a lugar nenhum, comece, nos
leva aos preços E se clicarmos aqui, há
uma animação muito boa. Você pode ver isso, nós literalmente aprendemos. E isso é literalmente apenas
clicar e arrastar, certo? Você sabe exatamente como criar
isso. Vamos ver o que mais. Estes são alguns menus suspensos.
Isso é muito bom. As animações das setas aparecem
aqui e alguns ícones. Mas isso é muito fácil de adicionar. Você pode ver isso
e dizer, ok,
ok, isso pode ser um pouco desafiador, mas é factível, e isso custa $100. Podemos recriar isso com o que você
aprendeu, com o que você aprendeu E você pode
experimentar, vamos entrar. E você
ainda pode rolar para baixo e ver o que eles
usaram e aprender por si mesmo o que eles usaram e
recriar esse modelo O que estou
tentando dizer é que você pode ganhar dinheiro
criando modelos. Como você realmente
cria um modelo? Assistimos a todo o curso. Você aprende como criar e criar um
site. Agora você entra nos modelos. Você rola para baixo, isso foi um
pouco demais. Oh meu Deus. Existe um criador de
modelos para se tornar. Você pode clicar em Enviar
um modelo aqui. Primeiro, você precisa de um link
de compra da Lemon Squeeze ou da Gum Road. Vamos dar uma olhada primeiro no
suco de limão. Ambas são plataformas nas quais você pode vender
suas coisas. Vamos clicar em
Começar gratuitamente, basta se inscrever aqui. Vamos nos inscrever. Depois de se inscrever, você receberá um e-mail
de confirmação. Depois disso, o link lá dentro o
levará para esta página. Diz: Bem-vindo a
um parceiro do conselho. Agora crie sua loja. Vamos dar um nome à nossa loja. Por exemplo, Artesanato. Quero que nossa loja L
seja Es Crafts. Artesanato. Eu não posso te dizer. Por que não? Vamos selecionar Nosso país, Turquia, e clicar em Criar minha loja. A loja Ul foi roubada. Farei o que todo mundo faz
e acrescentarei outra carta. Agora você está dentro da sua loja. Você precisa concluir algumas etapas para colocar sua
loja em funcionamento. Precisamos adicionar um
logotipo de contato por e-mail
e habilitar
pagamentos em tempo real e todos os recursos. Você pode fazer isso
no seu próprio tempo. Eu só queria te mostrar como se inscrever e realmente fazer login. Você precisa adicionar seu logotipo, mudar algumas coisas, mas não deve
demorar muito.
40. Venda modelos de enquadramento parte 2: Então, agora que exploramos um
pouco de suco de limão, eu realmente quero
mostrar a vocês Gum Eu também amo Com Road. Há muitos, muitos recursos
úteis. E analisamos um pouco o
Gum Road quando
analisamos a personalização interna e
avançada E eu acho que é um
ótimo mercado. Primeiro, clicarei
em Começar a vender. E uma vez que você entra,
você tem sua conta. E eu adoro o web
design da Gum Road. E aqui eu tenho algumas coisas
que eu baixei antes. Vamos ver, eu posso realmente
ter meus próprios produtos. Analisamos o design aqui. A cor é simplesmente ótima. Também tem alguns textos
encorajadores. Eu amo Gum Road Eu prometo que isso não é um anúncio, mas seu primeiro produto
não precisa ser perfeito. Basta colocá-lo lá fora
e ver se gruda. Então, queremos clicar em um novo
produto, que seria um produto digital, porque vamos
vender nosso modelo. Precisamos do nome do produto. Este será o modelo, faça algumas seleções,
preencha algumas caixas e será lançado em minutos. Meu primeiro modelo de produto
digital. Vamos selecionar o preço. É meu primeiro modelo de servidor, então vamos ganhar nove dólares Eu não acho que isso seja tão ruim. Vamos clicar em Avançar. Aqui temos mais algumas
coisas para preencher. O nome ainda é editável. Você pode adicionar uma descrição. Aqui está meu primeiro modelo
Cramer. Veja à direita que
está sendo atualizado ao vivo enquanto eu estou digitando. Aproveite. Podemos escrever, por exemplo, que é nosso modelo para
serviços de produtos digitais, não como o Gum Road,
mas, por exemplo, estamos
vendendo cursos on-line Este modelo é sobre cursos
on-line e
sua introdução. Portanto, eles não estão vendendo
produtos digitais promovendo-os. Este modelo oferecerá exposição e a
atenção da
sua empresa no espaço cibernético. Você pode escrever o que
quiser, são gomas. Reescreva toda essa descrição
com a ajuda do chat. Você também pode torná-lo
picante adicionando uma imagem. Ao inserir um botão, você
pode responder a algum texto, você sabe, olá mundo, você sabe Vamos digitar em YouTube.com
Você pode adicionar um botão. Então aqui você clica em
um botão muito bonito. Isso levará você ao
YouTube.com e aqui podemos personalizar Meu primeiro modelo, esse é
o número da loja, eu acho. Não tenho certeza se
você pode alterá-lo, mas você pode verificar novamente. Você pode trocar a capa. Isso vai entrar aqui.
Essa, por exemplo, será a captura de tela do modelo Você sabe, a
página principal, a página inicial e a página inicial superior. Esse
seria o seu disfarce. Minha recomendação
neste thumb mail. Talvez seja um
logotipo de emoldurador ou o que você quiser, produto. Chamada à ação. Você pode ter diferentes
apelos à ação. Eu o guardaria. Eu
quero esse resumo. Você terá um lugar muito bom aqui. Temos
detalhes adicionais nos quais você pode adicionar atributos e valores. Por exemplo, você sabe, isso pode até ser essa descrição de
coisas que ele usou no Framer Como no modelo, seu efeito de rolagem
era um deles. Você pode adicionar al ah, você
pode ver à direita. Então, à direita, você pode ver o efeito de rolagem e
adicionar qualquer valor a ele, MA, efeito pop-up,
insano e Você sabe, você pode ter
uma forma disso, na minha opinião. Você pode convidar seus
clientes para uma
comunidade circular ou um servidor do Discord Não temos mais uma
comunidade circular, isso não é aplicável, ou
eles podem pagar o que quiserem. Podemos adicionar um valor sugerido e um valor mínimo
que podemos alterar. Na página anterior, podemos oferecer variações
do produto. Se você tiver, por exemplo, um modelo em diferentes esquemas de
cores, talvez você possa fazer isso. Mas eles podem pegá-lo na
moldura e trocá-lo de qualquer maneira. Mas isso realmente depende de
sua imaginação e
podemos mudar a quantidade, mas talvez seja um
produto digital. Não faça isso. E valor
adicional, quanto custa
ter esse complemento ou
uma versão diferente. Aqui temos algumas configurações
para limitar as vendas de produtos, permitir que os clientes
escolham uma quantidade, mostrar o número de
vendas, uma licença exclusiva, chave, produto por venda
como publicação. Para fins que significam política de reembolso com
impostos especificados, se você quiser,
você pode fazer uma boa pausa. Tudo bem aqui, T ali, você pode ver isso aqui. Política cinematográfica. A
política cinematográfica está aí. E você passa o mouse vê esse belo
texto aqui Podemos inserir o conteúdo que
não queremos vender e
podemos fazer
o upload aqui e seguir aqui. Nós podemos mudar isso. dois editores de conteúdo diferentes Também o compartilhamos depois que você publicou seu produto que era chiclete e que era suco de limão Depois de publicar seu produto no Lemon
Squeeze ou Gum Bro, você receberá um link de compartilhamento que você usará
neste tipo de formulário Para enviar seu
modelo ao framer. Você digitaria seu
nome, endereço de e-mail. Você não precisa de um
perfil inicial, se quiser, você pode. Seu URL publicado vai direto aqui e depois
você o envia. Depois, existem alguns requisitos para o modelo e
você pode ser rejeitado. Mas aqui na lista os motivos pelos
quais ele pode ser rejeitado. Se for aceito, o que você obtém, os benefícios estão aqui, ganhe dinheiro com modelos gratuitos,
conforme explicado também. Para que você possa ver informações
detalhadas sobre tudo isso nos criadores, envie uma página de modelo Espero que tenha sido útil
e nos vemos em breve.
41. Visão geral de capítulo (Nitty Gritty): Portanto, neste capítulo,
exploramos todos os
detalhes sobre o Framer, algumas configurações de página e
algumas configurações do site Também exploramos o
incrível plug-in Figma, que permite importar
qualquer design do
Figma para qualquer design do
Figma E na verdade
se torna, você sabe, um site totalmente em camadas, um site
funcional E isso diferencia, você sabe, o texto da imagem aos elementos e você pode realmente
personalizar tudo isso Também analisamos um pouco as ações que eu realmente não uso, não vão sobreviver,
mas como
talvez você possa simplificar o processo
de fazer coisas no Framer E esses são
como atalhos e como pesquisar
páginas usando ações Então é isso para este capítulo
e nos vemos em breve.
42. Projeto do curso: Portanto, nessa prática, nosso objetivo é criar um
site e usar apenas uma das técnicas avançadas de personalização que nos faltam no jogo
Premises Chop Sinta-se à vontade
para experimentá-lo por si mesmo e
alcançá-lo sozinho ou
vir conosco, mas tente, você sabe, mudá-lo um
pouco em qualquer lugar. Então, vamos começar com I, então vamos criar um novo site e
vamos clicar em Kramer E então vamos escrever
nossa Roma aqui. E vamos pensar. Vou escrever isso
para uma marca de cuidados para cães. Nosso produto está
incluído para cuidados. Mostre o produto. Ok, vamos tentar isso. Ok, então depois de gerar
nosso site, vamos ver. Só precisamos adicionar um
elemento, um avançado. Vamos pular o tutorial,
um elemento avançado. E estaremos prontos. Eu gostaria de adicionar o Carrossel. Vamos adicionar os elementos
ao carrossel. Vamos
tirá-los do Canvvast's e ver o
carrossel o
carrossel Aqui vamos nós. Vamos esticar
isso um pouco. Vamos pré-visualizar isso. Aqui vamos nós. Aqui
temos nosso carrossel, que era avançado em
nosso curso Por fim, gostaria de publicá-lo e
nomeá-lo para Po Care, por exemplo. Por que não? Agora nosso site está
publicado e no ar e qualquer pessoa pode
acessá-lo e ver nosso atendimento, basta ver o que a IA gerou
sobre nossa marca. Sim, é isso para este vídeo.