Framer: aprenda a fazer sites bonitos em minutos usando IA | Yeti Learn | Skillshare
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Framer: aprenda a fazer sites bonitos em minutos usando IA

teacher avatar Yeti Learn, Design | Code | Animate

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      1:17

    • 2.

      História do design de UX de UI

      1:57

    • 3.

      Por que Framer?

      2:14

    • 4.

      Preços de framers

      4:28

    • 5.

      Primeiros passos

      10:48

    • 6.

      Pratique: crie uma conta

      0:32

    • 7.

      Visão geral do capítulo

      2:01

    • 8.

      Introdução de capítulo (seu primeiro site)

      0:55

    • 9.

      Escrevendo seu primeiro prompt

      2:33

    • 10.

      Após o prompt

      1:43

    • 11.

      Personalizando seu primeiro site

      2:22

    • 12.

      Seletor de paleta de cores

      8:10

    • 13.

      Prática: crie seu primeiro site

      4:10

    • 14.

      Resumo de capítulo (seu primeiro site)

      1:32

    • 15.

      Introdução de capítulo (CMS)

      1:17

    • 16.

      Crie um site de blog

      6:14

    • 17.

      Escrita de conteúdo fácil

      7:52

    • 18.

      Preenchendo seu blog

      6:02

    • 19.

      Prática: crie seu próprio blog

      7:39

    • 20.

      Visão geral de capítulo (CMS)

      1:36

    • 21.

      Introdução de capítulo (corte)

      0:45

    • 22.

      Por que a personalização é importante

      1:17

    • 23.

      Seções

      6:09

    • 24.

      Navegação

      4:32

    • 25.

      Páginas

      4:51

    • 26.

      Mídia

      4:30

    • 27.

      Formulários

      1:27

    • 28.

      Ícones

      4:28

    • 29.

      Interativos

      6:31

    • 30.

      Social

      2:38

    • 31.

      Serviços de gás, luz e telefone

      5:35

    • 32.

      Como juntar tudo

      5:25

    • 33.

      Prática: use qualquer elemento

      4:41

    • 34.

      Visão geral de capítulo (recortes avançados)

      2:20

    • 35.

      Introdução de capítulo (Nitty Gritty)

      0:59

    • 36.

      Explore as configurações de página e site

      5:46

    • 37.

      Usando ações

      2:51

    • 38.

      Plugin de Figma

      4:43

    • 39.

      Venda modelos de enquadramento parte 1

      11:42

    • 40.

      Venda modelos de enquadramento parte 2

      8:31

    • 41.

      Visão geral do capítulo (Nitty Gritty)

      0:46

    • 42.

      Projeto do curso

      2:13

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

573

Estudantes

1

Projetos

Sobre este curso

Bem-vindo ao guia final sobre como alavancar todo o poder do Framer, o construtor web de ponta alimentado por IA que está transformando o cenário do web design. Se você é um desenvolvedor web experiente ou alguém que nunca escreveu uma linha de código, este programa é feito sob medida para capacitar você com as habilidades para criar sites requintados com o mínimo de esforço.

Por que escolher este campo?

  1. Aprendizagem simplificada: Mergulhe profundamente no Framer com módulos abrangentes que detalham o essencial, garantindo uma compreensão fácil mesmo para iniciantes.
  2. Prática prática: Envolva-se em projetos e representações do mundo real que não só ensinam os instruções, mas também o porquê do web design.
  3. Habilidades prontas para o futuro: Com a IA moldando o futuro do desenvolvimento web, posicione-se à frente no jogo e aprenda a aproveitar a eficiência inigualável de Framer.

Destaques do campo:

  • Entenda os elementos fundamentais do Framer e seus mecanismos de design orientados por IA.
  • Comece a trabalhar criando sites responsivos que parecem incríveis em todos os dispositivos.
  • Explore a arte da animação, criando interações fluidas e envolventes com os usuários.
  • Incorpore princípios de design de world-class em seus projetos, aprimorando a experiência do usuário.
  • Obtenha insights sobre como otimizar sites para velocidade, SEO e desempenho geral.
  • Junte-se a uma comunidade cada vez maior de aprendizes com a mesma mentalidade, recebendo apoio e feedback constantes sobre sua jornada.

Comece uma jornada transformadora de uma tela em branco para um site visualmente atraente e animado. Com Framer, o futuro do web design está na ponta dos seus dedos, e este é o seu plano de ação. Vamos dar vida a esses sites dos sonhos!

Conheça seu professor

Teacher Profile Image

Yeti Learn

Design | Code | Animate

Professor

Get a professional service from beginning to advanced level.

Team Yeti are working for preparing courses that makes you an expert in a specific area. While doing this, we are trying to build the most intensive courses for not wasting your time. For that reason, our contents are simple, compact and intense.

Whether you want to learn a new skill, or you want to improve yourself on some area, we can guarantee that our courses will serve you the quality that you are looking for. Because during the process, you will be given a professional education by Yeti Learn team.

All courses can be reachable from anywhere and anytime you want. Besides, we are answering your questions 24/7.

Visualizar o perfil completo

Habilidades relacionadas

Design Design de UI/UX
Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

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.