Curso rápido de enquadramento: publique o site do seu portfólio

1. Introdução: Ei, bem-vindo ao meu curso de frame of Crash. Meu nome é Jeremy Mia e eu crio marcas e sites há dez anos Quero mostrar como você pode usá-lo para criar seu próprio site de portfólio. E se você é um designer que quer começar a fazer desenvolvimento, esse é um ótimo curso para você, porque vou mostrar todos os conceitos básicos, os fundamentos e mostrar como adicionar animações, e mostrar como adicionar animações, usar estilos de tipografia Basicamente, tudo o que você precisa saber para criar sites não só para você, mas também para clientes. Nesta aula específica, será uma aula curta sobre a criação um site de portfólio que você poderá compartilhar, digamos, com os clientes, onde teremos as peças do seu portfólio. Será uma página de destino simples de uma página e, em seguida, teremos uma página de projeto que criaremos. E eu vou detalhar as etapas inteiras. Vou te dar meus atalhos, meus plug-ins que adoro usar e alguns outros recursos e sites que adoro acessar para me inspirar Vou mostrar como tornar o site responsivo para que funcione em dispositivos móveis Então, sim, se você é um designer ou desenvolvedor que quer aprender a plataforma Framer ou Neo sem conhecer nenhum código , esse será um ótimo caso para Inscreva-se na aula hoje e vamos começar a criar um site incrível 2. Fundamentos do quadro: Então, para a primeira aula, quero compartilhar os conceitos básicos e os fundamentos do Framer e como começar Então eu uso o Framer no meu desktop. Se você estiver no Mac OS, poderá baixá-lo lá ou usá-lo no navegador. Gosto de tê-lo no meu documento, então eu o uso no meu desktop. E aqui está o espaço de trabalho de back-end, eles o chamam. Portanto, ele tem todos os seus projetos neste espaço de trabalho. Pode renomear seu espaço de trabalho. Se você for até o topo, verá que está em meus Assim, você também pode adicionar um espaço de trabalho. Talvez seja um espaço de trabalho separado para talvez clientes ou talvez você tenha um membro da equipe que use um espaço de trabalho separado. Você pode adicionar um espaço de trabalho. Você também pode criar uma pasta. Então, talvez você tenha certos projetos. Por exemplo, eu coloquei clientes 2024 aqui, e eu tenho alguns sites de clientes aqui que eu criei Eu tenho outra pasta para modelos gratuitos que eu baixo de, você sabe, sites ou da loja Framer, e você também tem o arquivo Então, se você excluir algo, ele entrará aqui. No lado esquerdo, você também tem sua conta, então você pode alterar seu perfil. Você tem a sessão de configurações do espaço de trabalho. Se você clicar nas configurações, poderá convidar membros. Você também pode ver seus planos. Como você pode ver, você tem permissões, fontes e pode ver o nome do espaço de trabalho Na verdade, você pode mudar isso ali mesmo, você também pode fazer upload de uma imagem. Então, o que eu vou fazer é ir para o canto superior direito. Clique em Novo projeto. Agora, quando você faz isso, você pode ver na parte superior que você tem guias. Portanto, é muito semelhante ao Figma ou, digamos, ao Illustrator, você tem guias diferentes e pode simplesmente percorrê-las da mesma Agora, esta é sua tela principal ou seu principal, você sabe, bloco de trabalho, espaço de trabalho No lado esquerdo, você tem menus. Então você tem páginas, seções. Você também tem as coleções do CMS. Você também tem outros elementos, como contagens regressivas, adesivos e camas, formulários, ícones e coisas interativas, o que é legal E então, quando você vai para o canto superior esquerdo, você tem o menu que você conhece, ferramenta de visualização de edição de arquivo. Você sabe, passe por isso e confira as coisas. Você também tem o Lay, então você tem quadros, linhas, colunas, grades, imagens, vídeos, você também tem textos, você também tem CMS e tem plug-ins embutidos no No topo, você tem o nome da sua página. Então, eu posso chamar esse portfólio de um e ele mudará o nome e você pode ver que estou no plano gratuito. Se você clicar nisso, eu vou levá-lo para os planos. E então, no lado direito, você tem quem está vendo. Então, obviamente, estou vendo, você pode convidar alguém e dar a essa pessoa apenas acesso a certas coisas, como nas coleções ou apenas no design. Talvez você queira limitar o que o cliente vê, por exemplo, você pode copiar o link do projeto e enviá-lo para um amigo ou cliente, e eles podem copiar o design exato e colocá-lo em seu espaço de trabalho, o que é legal E essa é uma ótima maneira de transferir sites. Isso é o que eu faço quando estou entregando projetos de clientes. Você tem localização lá. Se você clicar nesse ícone mundial, terá mais configurações do site, portanto, mais do tipo de SEO, como você pode ver aqui. E, em geral, você tem os favicons, a proteção por senha e o código personalizado que você pode inserir neste site específico Você também tem a análise ou o canto superior direito. Obviamente, neste site não fizemos nada como análise. Você também tem o botão de visualização, para poder reproduzir coisas, e também o botão publicado quando terminarmos o design. Agora, quando clicamos no design do nosso site principal aqui, na página principal, na página inicial. Temos páginas, camadas e ativos. Se você pressionar Alt um, dois e três, ele girará entre esses menus, como você pode ver Temos páginas, camadas e ativos. Se você quiser criar uma nova página, basta clicar no botão Mais. Você pode criar uma nova página, uma página CMS, que adicionará uma coleção automática para você, assim como um espaço reservado que você pode editar Você também pode adicionar uma pasta e colocar páginas dentro de pastas, o que é um bom recurso. Se você for para camadas, poderá ver todas as suas camadas. Então, suas pilhas, suas formas, seus elementos, tudo o que você tem no design do site , estará no painel Layers Então, em ativos, você tem componentes, estilos e código. Os estilos são semelhantes ao Figma, como você tem tecidos, estilos de cores, etc., da mesma forma que no Adobe Illustrator É como ter amostras ou estilos gráficos. É semelhante. É só que a maior parte são cores, tipografia e coisas assim tipografia e coisas assim . Então você também tem componentes. Assim, você pode criar componentes que são apenas elementos definidos que você cria, por exemplo, se for uma barra de navegação, ela estará em todas as páginas Isso só facilita muito, torna tudo mais simples, porque se você fizer uma alteração, ela afetará onde está todo esse componente Além disso, quando eu clico na página, você terá seu design ou suas ferramentas de estilo no lado direito. Então você tem layout, efeitos, estilo, para que possamos mudar a cor, como você pode ver, temos substituições de código e também exportar, para que você possa exportar PNGs e JPEGs, você possa exportar PNGs e JPEGs Então, também temos os pontos de ruptura. Então, esse é o básico desta lição. Na próxima lição, vamos criar esse design que eu fiz no Illustrator Vou mostrar como criar essa e essa página de destino simples para um portfólio de projetos. 3. Criando estilos: Nesta lição, começaremos a trabalhar na página inicial do portfólio e criar a seção principal de heróis Primeiro, eu tenho meu design no Adobe Illustrator, então isso é o que eu criei, e eu criei um design de 1920 pixels E qualquer texto e coisas que eu possa editar no framer, não preciso ter um design perfeito E o legal do framer é que parece que você está trabalhando em uma ferramenta de design como Figma ou Illustrator porque as ferramentas de design são muito semelhantes e têm apenas uma interface de usuário simples Então, vou clicar nessa barra superior e você pode ver que diz Desktop 1.200 Esse é o ponto de interrupção do desktop. Agora, os pontos de interrupção são basicamente quando o tamanho do navegador atinge uma determinada resolução, o design muda Então, quando você reduz o ponto de interrupção para digamos, 450 pixels para um telefone celular, o design provavelmente se transformará em um design de coluna única Assim, você pode ter vários pontos de interrupção. Você pode ver que pode pressionar o botão de adição e criar um ponto de interrupção para telefone ou tablet, como você pode ver Mas, por enquanto, vou deletar isso porque não preciso disso. Vou clicar nele e ir para o canto superior direito, e podemos acessar a seção de pontos de interrupção Vou mudar o chicote para 19, 20 pixels e, em seguida, a altura, talvez possamos me deixar usar 1080 porque acho que era essa a altura Agora temos esse desktop. Obviamente, você clica e também pode arrastar a altura. Uma das primeiras coisas que farei é criar estilos apenas para economizar tempo. O que estou usando para isso é a figueira, e também tenho alguns ativos. Eu tenho um logotipo e algumas dessas imagens que eu já baixei. E então temos essa cor aqui. Vou copiar a cor, acessar meus ativos e ir para estilos. Agora, dentro dos estilos, você pode adicionar estilos específicos para títulos e parágrafos. Você tem estilos de links, aspas em bloco, cores e CMS. Vou criar um novo estilo de cor e copiar o código hexadecimal do Illustrator, vamos chamar esse B preto ou algo assim e criar, e ele criará automaticamente uma pasta, o que é legal E então vou copiar os códigos hexadecimais daqui e criar essas outras cores Então eu fui em frente e você pode ver que eu criei cada cor individual. Você sempre pode voltar a esses estilos e alterá-los, e isso mudará os estilos globais de tudo. Então, tenho vários designs no meu site com essa cor verde e mudo a cor verde para vermelha. Isso afetará todos os objetos que têm esse estilo aplicado a ele. Vamos fazer o mesmo com o texto. Vou enviar uma mensagem de texto e vou escolher o título um. E para liderar um, eu vou fazer isso. Tão ousada, figueira. Então eu vim aqui e vamos ver a figueira. Eles têm uma vida linda. Então, vou selecionar isso e queremos alterar o peso para negrito. Você pode mudar para itálico. Você tem cor, transforme-a. Normalmente , gosto de capitalizar. Você tem decorações, ferramentas de alinhamento, traçado, equilíbrio e variáveis de tipo aberto Você provavelmente já viu essas ferramentas, como na Figma, então elas devem ser familiares para você Temos o H, e então vou com um parágrafo e com este, figueira meio por corpo e queremos usar médio. Você também pode escrever, clicar nos estilos e duplicá-los ou renomeá-los O mesmo que para as cores. Você também pode fazer isso com as cores , só para economizar tempo. Então, temos o corpo da cópia 23. Então, vamos descer para o tamanho, e queremos mudar isso para, por exemplo, 23. E para o tamanho do título, isso era cerca do dobro disso. Então mude seu tamanho para 80. Oh, eu vou fazer outra cópia corporal. Podemos chamar isso de lista. Então, para essa lista, acho que é do mesmo tamanho. Ok, estamos usando o mesmo. Essa, em negrito 20. Não, para esses ousados. Então, vamos usar subtítulos. Figueira, vamos ficar meio ousados. E você pode até adicionar a cor verde, e desta vez, podemos obter 26, podemos obter 26, e eu posso arrastar e soltar para movê-los para cima para torná-los mais limpos. Então, eu tenho meus estilos lá, então isso deve me poupar algum tempo. A outra coisa que eu gosto de fazer é arrastar todas as minhas imagens das minhas pastas e trazê-las para o Framer Então, no Illustrator, geralmente eu apenas os exporto. Eu pressiono Control Shift OT E, ele o levará aos ativos, como você pode ver, e você pode exportar todos os ativos de uma vez. Posso selecionar o logotipo, botão direito do mouse e clicar em Cc para exportar como um único ativo, e você pode ver que posso trazê-lo para aqui e depois exportar como JP, PNG, PDF ou SVG ou até mesmo um P da web, o que é legal Portanto, o Illustrator tem um bom recurso no Figma. Você pode fazer algo parecido. Você só exporta quando seleciona uma imagem. Clique com o botão esquerdo nas imagens e arraste-as e solte-as assim. Lembre-se de que, como você pode ver, há limites para o upload de 5 megabytes Portanto, você precisará atualizar seu site ou reduzir o tamanho das imagens. Normalmente, uso algo como laboratórios de topázio para reduzir o tamanho Então você pode ver que eu tenho essas imagens. Um plug-in rápido que eu gosto de usar é chamado de tidy. Então você pode ver tudo arrumado. Vou clicar nisso. E se você tiver muitos ícones muitos objetos, formas ou algo assim, você pode arrumá-los Então você pode ver esse plugue aqui. Você pode alterá-la para uma grade horizontal. Você muda de posição, faz a lacuna, talvez eu não tenha 25 ou algo assim, e então clica em arrumar, e você pode ver que isso colocará todas as imagens em uma boa forma horizontal ou, se você não quiser horizontal, você pode fazer uma grade, como você pode ver, e isso mudará facilmente Então, isso só o torna um pouco mais organizado. Esse é um plugin legal que você pode usar, que é 4. Como criar uma página inicial: Bem, então vou começar a criar o design que temos aqui. Clique nele, no design principal, vá até meu estilo de preenchimento e clique nas cores, como você pode ver. Eu vou para o layout. E o que eu quero fazer é criar uma moldura, como você pode ver. Então eu comprimo F e, em seguida, arrasto isso e podemos ver que temos uma moldura E então, no canto superior direito, coloque minha ferramenta de alinhamento para que eu possa centralizá-la para ter certeza de que está centralizada E então você pode realmente arredondar a esquina como você pode ver, tem uma pequena coisa branca. O mesmo é uma Figma ilustrada. Você pode simplesmente arredondá-lo assim. Ou se você for para o lado direito em seus estilos, onde diz raio Você pode ver que eu posso alterá-lo lá, ou eu só posso arredondar alguns cantos se eu quiser. Basta arredondá-lo ou talvez cerca de 30 pixels. E então eu vou mudar a cor para aquela cor ali. Então, temos a base do nosso design aqui. Agora, dentro disso, vou para o meu painel de camadas, você pode ver que você tem a área de trabalho e, em seguida, temos a moldura. O que podemos fazer é adicionar uma pilha. Assim, você pode clicar com o botão direito do mouse ou usar o atalho Control Enter para adicionar uma pilha ou adicionar um quadro Então, uma pilha é basicamente como um flexbox. Você pode manipulá-lo para criar colunas, e é melhor para um ligre É a mesma coisa que layout automático, mas em termos da web, ele usa obviamente HML e Flexbox para fazer isso Então, vou adicionar uma pilha dentro do quadro. Como você pode ver, você também pode arrastar e soltar, molduras e pilhas umas dentro das outras E dentro dessa pilha, vou transformá-la em uma grade Você pode fazer uma grade com duas colunas e apenas uma linha. Então, no lado direito, vá para o lado do layout e você pode simplesmente alternar entre as grades, como você pode ver. E então o que eu vou fazer é arrastar minha imagem principal aqui. Vou arrastá-lo desse jeito para dentro dessa pilha, e ele já o adicionou à coluna, que é o que vamos fazer, vou adicionar o logotipo Vou arrastar o logotipo. Como você pode ver, podemos reduzi-lo arrastando isso desse jeito O principal é que você queira colocar as coisas na pilha para que fique organizado, então vou pressionar Control Enter para adicionar uma Este logotipo está em uma pilha, agora podemos mudar a posição Então, no canto superior direito, podemos ajustar a posição. Qualquer objeto que esteja na pilha, ele vai para dentro da caixa Nesse caso, temos duas colunas. Então, dentro dessa coluna ao lado, ela se moverá dentro dela. Então, vou mover a pilha, como você pode ver, podemos colocá-la no centro ou na lateral, e queremos ter certeza de que está relativa Portanto, está relacionado à grade principal. Então, quaisquer que sejam os ajustes que fizermos na grade externa, ela ajustará o logotipo e as imagens dentro dessa coluna ou da pilha Tenho o logotipo. Agora, o que eu quero fazer é adicionar esse pequeno elemento-chave E. Então, eu vou pressionar T para o tipo completo para adicionar algum texto. Você pressiona T e depois clica com o botão esquerdo e digita, deve adicioná-lo lá. E eu vou deixar o texto branco porque você não pode vê-lo agora. Vou apenas arrastá-lo para dentro da pilha. Certifique-se de que, nas camadas que você vê, esteja dentro da pilha, como podemos ver, e o que você quer fazer é colocar o logotipo do lado esquerdo O que estou disposto a fazer é que também possamos duplicar esse texto, então vamos receber esse texto Vou até o Illustrator e simplesmente copiarei e colarei isso porque todo esse texto está dentro de uma pilha Semelhante ao Figma, que é um layout de pedido, posso literalmente ajustar o preenchimento e ver que posso simplesmente arrastá-lo e ele ajustará esse Faça como no tamanho 80. Vou clicar duas vezes no logotipo para reduzir isso. E o que vou fazer é adicionar um pouco de preenchimento. Então vá para o lado direito, clique no layout e obtemos o preenchimento Vou adicionar preenchimento na parte superior, então quero clicar no que você pode ver ao lado dos dois quadrados Um deles nos permite ajustar apenas o tamanho da parte superior inferior esquerda ou direita. Então, neste caso, vou fazer o top 50 pixels. É um pouco demais. Talvez eu faça 25, o que é ótimo. Então, agora temos essa pilha, que é legal, distribuição de cada texto Então, se você começar, ele vai trazê-lo para a esquerda, se você centralizar ou centralizar, ou podemos fazer um espaço entre ou ao redor ou espaçar uniformemente. A brincadeira de como você quer fazer isso, neste caso, vou deixá-la no centro, e depois vou brincar com essa lacuna como esta. Então você pode ver o espaçamento. Clique duas vezes no texto para editá-lo. Portanto, certifique-se de editar o texto. Tudo bem. E o que vou fazer é abordar os estilos, os tecidos, como você pode ver, e eu tenho meu título salvo Eu tenho o título, subtítulo e o corpo do texto, como você pode ver Então, para isso, vou fazer o corpo e preciso ajustar a dianteira. Então, eu posso realmente ajustar o estilo. Se você for o próximo nos tecidos, coloque o mouse sobre ele e você verá o botão de edição lá Vou clicar nele e o que podemos fazer é ajustar a letra. Então eu vou fazer a letra zero, então não está ajustando o kerning Em seguida, o espaçamento ou entrelinha, se você é designer gráfico, pode ver que podemos ajustar a linha dessa forma Recebi essa mensagem, mas não parece exatamente como queremos. Então eu preciso ir em frente. Vou voltar aos estilos e vou mudar a cor, então estamos na cor certa aqui. E se eu quisesse apenas personalizar esse texto aqui, torná-lo um pouco menor? Então, o que podemos fazer é criar outro estilo rapidamente clicando em novo estilo nos tecidos do lado direito, e podemos dizer parágrafo e dizer corpo pequeno, clicando em Editar e podemos dizer parágrafo e dizer corpo pequeno, clicando em Se você clicar duas vezes, poderá renomeá-lo, como podemos ver Vou chamá-lo de BoliSmall, clicar em Editar e, em seguida, vamos torná-lo menor Talvez 18 e, em vez de médio, usaremos o normal, talvez seja 16 assim. Temos esse texto específico com corpo pequeno e esse texto com corpo. Então, dentro da mesma caixa de texto, temos dois estilos diferentes funcionando. Então, é muito fácil fazer esse boom, como você pode ver. Então, quando tivermos nossa seção principal aqui, adicionarei mais três pilhas Então, na pilha principal aqui, temos o logotipo. Nós temos o projeto e vamos nos conectar. Então, neste, vou até Layers e pressiono Control Enter. Para criar outra pilha, quero fazer o mesmo com os outros dois blocos de texto também Agora, dentro dessa pilha, vou colocar um texto aqui E o que eu quero fazer é colocar essa pilha na direção vertical E eu vou levar isso para o topo, sem mais nem menos. Legal. Agora podemos ver que também podemos contornar a lacuna. Mas primeiro, precisamos mudar essa pilha aqui. Então, para a altura, vou alterá-la para preencher, e ela deve preencher todo esse espaço neste lado da pilha principal Então, agora o que vou fazer também selecionar essa pilha Desculpe, quero alinhar na parte superior e também vou adicionar pouco de preenchimento dos 50 pixels superiores e, da esquerda, usaremos 50 pixels exatamente O que vou fazer agora é se eu adicionar uma lacuna, como você pode ver, estou apenas arrastando a pequena divisória roxa Agora podemos ver que esse texto está sendo publicado e temos essa bela coluna aqui. Vou alinhar à esquerda, então no lado direito do painel de layout, você pode clicar em alinhar à Portanto, esse texto deve ir para a esquerda da caixa ou para a esquerda da pilha Agora vou mudar o estilo desse texto para o subtítulo Uma das coisas legais é que você pode clicar em uma pilha no painel Camadas e também copiar o estilo Você pode copiar o CSS, os efeitos, etc. Assim, você pode copiar tudo e colar em outra pilha Então, se eu colar aqui, você pode ver que está duplicado mesmo efeito que eu já estilizei na outra pilha, e eu farei isso para a outra Então, colar será colado no estilo. Há um controle de atalho OV. E deixe-me ir em frente e colar esse texto lá. E agora você pode ver que temos esse efeito. Você também pode arrastar assim e ver que não precisa fazer isso no painel de camadas, faça isso. Então, legal. Agora temos as três colunas e tudo deve estar alinhado Obviamente, isso tem o logotipo, então o alinhamento ficará um pouco errado Então, o que podemos fazer é criar outra pilha ou outra caixa, e podemos definir e eu vou alinhar isso com a Deveria ser uma linha agora. Então, agora o que eu quero fazer é para os projetos, eu quero que ele tenha um pop-up onde, quando você coloca o mouse sobre ele, ele mostra um pouco do projeto, e quando você clica nele como um link, ele vai te levar para o projeto P. Então eu vou transformar isso em outra pilha aqui Então, controle-o Enter. E você pode ver que o alinhamento o traz para o centro. Basta distribuí-lo e distribuí-lo, alterá-lo para começar, para que ele comece no início da pilha Deixe-me copiar isso. E desculpe, faça com que seja vertical, e então podemos alinhá-la à esquerda E esse texto, eu vou mudá-lo para o estilo normal do corpo. E para este, vou chamá-lo páginas de sensores como um dos meus projetos. Agora, o que eu posso realmente fazer é colocar as camadas, você pode ver, é só um texto. Mas o que podemos fazer agora é transformá-lo em um link. Então, vou até o canto superior direito e clico no link de adição, e podemos colocá-lo em uma página. Porque você não tem essa página, eu vou 5. Interações e efeitos: Neste slide, mostrarei rapidamente como adicionar algumas interações e animações de passar o mouse ao site para que ele tenha uma aparência suave Mas nós temos isso. Agora, o que eu quero fazer é adicionar um efeito de sobreposição Então, vou para as sobreposições e vou clicar em relativo, você pode ver, é um popover. Vou clicar nisso. E o que você pode fazer é nesta sobreposição, eu vou para o lado direito e quero transformá-la em uma imagem Então, vou clicar no botão de preenchimento, em vez do preenchimento, obviamente você pode fazer gradientes. Você pode fazer algumas coisas legais lá, mas eu vou clicar na imagem. E então vou descobrir que a imagem do meu projeto é assim, o que é legal. Temos os cantos arredondados e o que podemos realmente fazer. Agora, se eu testar rapidamente, você pode ver esse texto quando eu colocar o mouse sobre ele, a imagem aparecerá, o que é legal. Além disso, neste texto, o link do texto não tem um estilo, vou clicar no link. Vá até o topo da seção de links, clique em Editar, no estilo do link e podemos mudar isso. Então, eu quero ir, podemos torná-lo verde. Também vou ficar com a cor clara porque essa é a cor do texto que queremos. Não queremos nenhum sublinhado porque acho que parece brega No Hova, porém, podemos torná-lo verde e acho que é isso Se eu pressionar Play, você verá que é o que parece. Legal. O texto é alterado e, em seguida, eu sempre posso voltar e editá-lo e depois fazer a transição, facilitando a entrada e a saída. Vamos voltar. Muito suave. Estrondo. Legal. Também podemos adicionar um efeito Hover Se você acessar o painel Efeitos, clique em Clique com o botão esquerdo do mouse nele. Você verá Hover. Posso clicar em Hover, e o que podemos realmente fazer é alterar a escala, alterar a opacidade Depende realmente de você o que você quer fazer. Você pode girá-lo, você também pode incliná-lo Se você quiser. Então você pode brincar com qualquer um deles. Você pode compensá-lo. Você pode adicionar uma sombra e também alterar a atenuação. Então, em vez da primavera, eu gosto de relaxar, e então você pode brincar com essas barras para torná-las um pouco mais lisas. Você pode alterar o atraso, o que quiser, na verdade. Talvez eu faça uma rotação de, digamos, menos dois. E agora, se eu pressionar o botão de visualização e colocar o mouse aqui, você pode ver que ele faz uma pequena rotação. Ele faz o efeito de brilho Ha e, em seguida, também mostra a imagem aparecendo Então, quando eu clico nisso, ele vai para a página do meu portfólio, como você pode ver. Obviamente, eu ainda não o estilizei, mas é assim que você fará isso E agora tudo o que temos que fazer é duplicar isso, que possamos chamar isso, você sabe, de keystone Então você pode ter alguns outros projetos que eu terei que colocar no CMS. Agora, o legal do Framer é que você pode realmente empilhar efeitos uns sobre os outros, para que eu possa adicionar Você pode adicionar loops, arrastar e pressionar. Você sabe, você pode fazer um monte de coisas. Vou voltar para a sobreposição e quero clicar na sobreposição, e você pode ver que podemos realmente mudar a posição dela Então, eu posso realmente movê-lo e também girar. Se eu colocar um mouse no canto, podemos girar, então talvez você queira que fique assim Se eu for pré-visualizá-lo, agora eu coloco o mouse sobre ele, você pode ver que ele tem uma aparência diferente do que antes. Ele sai pela lateral, enquanto esses simplesmente aparecem abaixo. Então é assim que você personaliza a aparência desse pop in. E então, obviamente, a sobreposição realmente tem um efeito de aparência nela, então você pode ver o efeito na aparência que ela desaparece, ou ela pode ser ampliada, você sabe, podemos alterar a opacidade Quero mudar a mola para atenuação e podemos personalizá-la para entrar e sair ou voltar para Mas eu só entro e saio com facilidade, está bem. L é suave e funciona. Facilidade de entrada e saída. Legal. Então, deixe-me voltar a jogar. Você pode ver. Você pode ver como ele se aproxima um pouco lentamente, como se tivesse esse efeito de escala Parece que é um pouco lento para mim. Então, o que podemos fazer é tornar o tempo zero ponto. Vamos passar 2 segundos e depois farei o mesmo para a saída também. Ok, então esse também é 0,2. Então, vamos voltar. Então, é um pouco mais rápido. Super legal. Adoro isso. Assim, você pode ter um alias diferente de todos eles. Ei, tudo que você precisa fazer é entrar em cada uma dessas sobreposições e mudar a imagem E, mais uma vez, você sempre pode simplesmente copiar o efeito. Então, se eu for copiar efeitos, clique com o botão direito do mouse no outro e depois vou para a outra sobreposição, clique com o botão direito nela e queremos colar os efeitos Então, ele copiará os mesmos efeitos, para que eu não precise fazer a flexibilização novamente. Então, bum, bum e bum. Então você pode ver que está um pouco cheio de bugs. Obviamente, no site publicado, não seria tão cheio de bugs , bum. Esses não têm o mouse Isso Ha tem que acrescentar. Legal. E é assim que você adiciona esse pequeno efeito. Ele apenas adiciona esses pequenos detalhes ao seu site. Adicionar animações e pequenas interações podem fazer uma grande diferença Agora, tudo o que você precisa fazer é copiar esse texto ou essas pilhas para as outras colunas e, em seguida, personalizá-lo da maneira que quiser Então, fizemos algumas pequenas interações. Que tal adicionar algumas animações ao quadro geral? O que realmente podemos fazer é selecionar o quadro principal. E eu vou falar sobre efeitos, e eu quero fazer uma relações públicas. Então, em um P, você pode fazer em um P na rolagem, camada na vista ou seção na visualização. Então, se você estiver navegando e ela aparecer, algo acontecerá e uma ação ou gatilho ocorrerá Queremos que você veja que pode desaparecer. Eu posso deslizar. Vou deslizar de baixo para baixo só para mostrar o efeito E eu quero fazer alguma flexibilização, mas talvez vamos acentuar essa curva um pouco mais E o tempo durará talvez 3 segundos. E então eu vou apertar play. Agora você pode ver que ele carrega, é um pouco rápido, então vamos desacelerar um pouco. Voltaremos à flexibilização e continuaremos 0,5 segundos. Você também pode adicionar um pequeno atraso, então se eu adicionar 1 segundo de atraso. Portanto, o tempo é a duração da animação, por exemplo, o tempo necessário para que a animação seja concluída. E então o atraso é um atraso antes do início da animação ou do efeito. Então, agora, se voltarmos à pré-visualização, você pode ver que é muito mais lento, mas a coisa toda desliza de baixo para cima Um efeito bem simples, mas só o torna muito mais legal. E então podemos seguir em frente e adicionar efeitos a qualquer uma das pilhas Então eu posso selecionar a pilha, entrar em vigor, e podemos fazer um P novamente. E eu vou copiar o efeito do quadro. Então lembre-se, clique com o botão direito do mouse em Copiar e copie efeitos. E então vou adicioná-los às pilhas, que possamos colar efeitos Vou colar efeitos e colar efeitos. Agora, quando jogamos, boom, você pode ver todos eles aparecerem. Mas o que eu quero fazer é adicionar um pouco de atraso nas pilhas e, em seguida , ir um pouco mais devagar Então, eu vou para a transição. Esse pode ter um atraso de dois segundos, este, talvez 3 segundos, como você pode ver, é diferente e este talvez 4 segundos. Vou clicar na presa. E assim, é muito fácil, boom, boom e boom. Legal. Adoro isso. Parece ótimo. Eles estão bem. Assim, também podemos adicionar algo à imagem e personalizaremos tudo isso. Então, vou atualizar todo esse texto e, em seguida, vamos trabalhar na finalização desse portfólio 6. Coleção de CMS: As páginas e clique em mais. E o que queremos fazer é criar uma nova página de CMS. Vou clicar em Adicionar amostra e ele deve começar a criar o CMS. E é aqui que vamos colocar todos os nossos projetos de portfólio. Então, quando acabamos de adicionar os dados ao CMS, preencheremos automaticamente uma página com esse novo projeto Então, vou clicar neste e podemos ver todos os detalhes à direita. Você tem o título, o slug, que faz parte do URL, a data, a imagem, as categorias e o conteúdo Obviamente, podemos editar essa coleção de CMS. Edite os campos indo até o topo. Tem um botão, uma pequena seta. Clique aqui e podemos realmente alterar esses campos, como você pode ver, para torná-los obrigatórios. Você pode alterar o espaço reservado. Você pode transformá-la em uma área de texto. Assim, você pode ajustar todas essas categorias diferentes. Você também pode clicar neste pequeno botão de adição na parte superior e adicionar campos. Portanto, pode ser texto simples, pode ser uma galeria, uma alternância, um número, um Você também pode consultar outros artigos. Mas eu não quero me aprofundar muito. Por enquanto, vou clicar em começar e chamaremos isso de sense pay. Vou clicar nessa imagem aqui e vamos mudar a imagem. Também muda os textos. Vou me livrar desse texto e depois chegar ao site. Então, eu tenho um clique em publicar no lado direito, tudo bem E agora temos um CMS, e vou clicar duas vezes na coleção à esquerda e chamá-la de portfólio Categoria também. Não precisamos nos preocupar com. Eu posso simplesmente ir em frente e deletar isso. Como está sendo usado em algumas dessas coisas, ele não será excluído por enquanto, mas podemos simplesmente deixar isso. Agora, se eu voltar, você pode ver que essa é a aparência real da página do blog do portfólio. Então, podemos chamá-lo de portfólio. Certo? Portanto, esta é uma página do CMS E como você pode ver, ao clicar na página, é isso que ela gostaria. Portanto, precisamos personalizar o design e torná-lo assim. Mas vou voltar para a página inicial. Agora, o que queremos fazer voltar ao link, e podemos colocar o link para o portfólio e o slug Eu vou para o CenSAP Como você pode ver, você clica nesse slug e ele vai para qualquer uma das peças do portfólio que você criou nessa coleção Então eu posso clicar no CenSap, o que é legal. O que eu quero fazer é, bem, você pode ver que o texto está cortado. O que podemos fazer é adicionar uma altura mínima. Então eu vou usar Min Max. Está escrito aqui. Clique nesse botão. Vamos clicar na altura mínima. A altura mínima deve ser de pelo menos 25 pixels. Então, esse é o mínimo que essa caixa de texto pode conter, e é assim que você evita problemas quando as coisas são dimensionadas. Por exemplo, se você usa um celular, garante que ela seja legível para que permaneça nesse tamanho, no tamanho Se você definir o tamanho máximo, haverá um limite para o tamanho que o texto ou a imagem dentro dessa estatística podem ser dimensionados 7. Design de página de portfólio: Nesta lição, criaremos a página inicial do nosso projeto usando os recursos do CMS no Framer Então, temos nossa página inicial, exatamente o que ela parece. Agora, vamos ao portfólio. Então, se você clicar na página principal do portfólio, essa é a coleção CMS Então você pode ver o texto aqui. É apenas um blog normal, mas não estamos tentando criar um blog, queremos apenas páginas de portfólio. Então, vou clicar no portfólio dois. Veja, o ícone será como esse tipo de pilha de moedas. Essa é a coleção CMS. Mas esta página é o pagamento do Sensei, e no canto superior esquerdo, você pode ver na seção da página, no topo, você pode ver que diz CenSep. Se eu clicar neste link e clicar em Keystone, ele mudará para a Então, para acessar o CMS, você quer ir ao menu superior ao lado texto e conectar-se, você quer clicar em CMS E temos duas entradas aqui. Temos o projeto Sensei Pay e depois o Keystone. E podemos adicionar um pouco mais. Fw, vamos manter os dois projetos. Vou voltar e, assim que fizermos uma alteração no design da página no CMS, ela será aplicada ao mesmo design e à mesma camada em todos os outros novos projetos que adicionarmos Eu vou entrar aqui e começar a desenhar. Então, talvez eu precise criar alguns estilos novos. Vou criar um novo estilo. Esse H é escuro, então eu vou usar um H, mas vou chamá-lo de H branco. E então, para este, vou mudar a cor assim. Os outros, podemos usar os outros estilos. Mas precisamos fazer o design assim. Vou para a página inicial e, na verdade, posso copiar a moldura. Então, vou até minhas camadas. Vou copiar essa moldura. Então, vou pegar essa pilha e trazê-la para dentro da moldura Então, temos essa camada de moldura base, como você pode ver. Portanto, se você quiser editar o texto antes de atualizarmos o layout, clique duas vezes e ele o levará à coleção CMS aberta na barra lateral direita, e podemos personalizar o texto aqui Hum, e se você pressionar Inside, você pode ver que ele atualizará isso. Obviamente, o principal é apenas atualizar dentro do CMS em vez de fazê-lo diretamente na página, e isso afetará essas alterações, para que você possa alterar as imagens, etc Vou apenas ajustar essa pilha e arrastá-la usando as caixas, mantendo-a muito simples E agora temos essa imagem atingindo a parte superior do design e não queremos que a parte inferior seja arredondada Então, para esta imagem, vou até o raio e clicarei nas quatro pequenas linhas e quatro pequenas linhas apenas arredondarei o canto superior esquerdo e o canto superior direito Então eu acho que é em torno de 25, eu acho. Então, como já está dentro da moldura, nem precisamos arredondá-la. Você pode ver isso e esse fundo é um pouco plano, o que é ótimo. Agora, o que vou fazer é que nem precisamos desse texto. Eu posso simplesmente deletar isso, como você pode ver. E agora que o início do parágrafo é demais, então vou ter que escolher um novo estilo, corpo médio, e selecionar a cor clara. Vou aumentar o tamanho. Vamos usar 20 letras zero e espaçamento entre linhas. Vamos talvez zero, 1,4. Parágrafo, podemos deixar isso. E agora eu também posso deletar esse portfólio. Eu não quero isso aí. E agora o que queremos fazer é colocar esse conteúdo dentro dessa pilha aqui E então, nesta pilha, queremos selecionar a pilha e a linha à esquerda Também vamos alinhar o texto no título e depois na data Então, descemos o texto e clicamos em uma linha, e isso deve alinhar tudo à esquerda Podemos ver que há uma pilha aqui embaixo , se você quiser, por exemplo, se clicarmos neste botão aqui, levaremos você para o próximo projeto, como você pode ver Então, eles já nos deram isso. Por enquanto, vou para Hum, eu só quero diminuir a opacidade para isso, deixá-la lá por enquanto, ou podemos simplesmente excluí-la Agora, o que eu quero fazer é arrastar essa caixa, e agora temos aquela coisa ao lado. Temos que criar uma nova pilha para o título e a data. E vamos mudar para o espaço entre eles. Então, isso vai criar essa lacuna entre isso e a data. E vamos alinhar esse layout na parte inferior. E agora você pode ver que isso está aqui embaixo, e então queremos mudar o crescimento. Em vez da altura automática, podemos alterá-la para largura automática, e ela está no lado direito da caixa agora ou daquela pilha, desculpe Então, temos a data. Acredito que a data era grande, então ilustre, vejo que o tamanho é 44 Vou simplesmente me livrar dos estilos lá e depois vamos personalizar. Vamos usar 40 e cores claras. Vou passar para a segunda seção da nossa página de portfólio. Agora, o que vou fazer primeiro é selecionar a pilha de heróis, colar Control C e Control Vita Em seguida, vou criar uma nova pilha pressionando Control Shift Control Alt e Enter E vou arrastar essa seção aqui para a pilha também E essa pilha, vamos garantir que seja vertical e, em seguida, a lacuna que podemos fazer é de 25 pixels, então há um espaço entre E, obviamente, você pode ajustar a lacuna para torná-la maior. Vou renomear a segunda pilha para galeria e vou me livrar do texto aqui porque não precisamos que o que eu faça é ir ao meu CMS e ir para Editar Agora, o que fiz aqui foi adicionar duas galerias, para que você possa pressionar o botão de adição e adicionar uma galeria ou apenas imagens simples Agora, a razão pela qual estou adicionando duas galerias é porque quando você adiciona uma galeria, você não pode fazer as duas colunas Você não pode dividir a imagem em duas colunas. É por isso que estou fazendo duas galerias. Tudo o que você vai fazer é enviar suas imagens. Então, basta escolher a imagem e fazer o upload , então eu tenho essas duas aqui, e a Galeria dois estará aqui. Mas se você quiser renomear o campo, basta ir até os campos e renomeá-lo aqui Veja qual galeria duas dizem duas brasas para duas colunas. E então eu vou voltar para nossa pilha aqui. E vou para o canto superior direito e clico em Adicionar conteúdo. Então, em todos os campos que você criou nesse CMS, temos a galeria de imagens uma e a Galeria dois, como você pode ver, e depois as outras seções Então, vou prosseguir e arrastar a galeria até essa pilha E você pode ver que já está exibindo essas imagens do nosso CMS porque já fizemos upload para nossa coleção aqui Então, é só extrair as imagens dessa coleção. Nós temos isso. Agora, no lado direito, você pode ver que são duas colunas. Você pode ver que eu posso alterá-lo para uma coluna ou duas colunas como essa, mas você não pode ter várias linhas. Simplesmente não funciona no momento. Como você pode ver, você pode corrigir automaticamente. Você também pode fazer uma largura fixa para, você sabe, o layout avançado, mas ele simplesmente não oferece essa opção. Então, o que eu geralmente faço é ter as duas colunas para isso. E como nosso design tem duas colunas e, em seguida, uma coluna se estende pelas duas, precisamos ter as duas galerias Mas, no futuro, eles provavelmente o atualizarão. Vou acessar Adicionar conteúdo novamente e arrastar a coluna dois, logo abaixo da outra, como você pode ver, e trazê-la para baixo. Eu só vou colocá-lo dentro. selecionar a pilha superior e torná-la vertical Vou apenas expandir a estrutura principal, como você pode ver, e então temos o design lá. E, obviamente, eu posso ir à galeria, e você pode ver que temos uma coluna. E então eu posso ir até a imagem e alterá-la para caber, esticá-la ou ladrilhá-la. Obviamente, geralmente o preenchimento funciona, e eu só preciso alterar a altura para desbloqueá-la, e queremos ter certeza de que você pode ver que a altura é uma altura personalizada. Então, eu só quero mudar isso, como você pode ver. Eu só queria preencher um pouco mais ou menos lá. Agora, o que podemos fazer se formos ao CMS e dissermos, você sabe, atualizamos outras imagens, como, por exemplo, se você alterar essas imagens, elas serão recarregadas e carregadas aqui, como você pode Também vou diminuir a lacuna aqui para 25 pixels e a lacuna no quadro principal também, então teremos todo o espaço parecido com este, o CMS Agora, se formos para outra página como a Keystone, você também pode ver algo semelhante E se você for para outra página, poderá ver se não tem nada no CMS, ele não carregará corretamente Então, se eu voltar para o CMS, vá para escalável, lembre-se de fazer o upload de suas imagens Agora, por exemplo, se adicionarmos apenas uma imagem à galeria e eu voltar, você pode ver que ela só preencherá aquele espaço, aquela coluna porque não temos as outras imagens. Portanto, certifique-se de que, ao definir um determinado limite, faça o upload da quantidade certa, de forma que ela caiba no espaço para o qual você está projetando. Agora, se eu voltar, agora você pode ver que está preenchendo esse espaço agora E é assim que você cria essa seção da galeria com o CMS. 8. Rodapé: E eu posso literalmente copiar essa pilha, e ela deve ser colada abaixo. Legal. Tenho meu logotipo aqui. Doce. Eu quero adicionar um botão, então vou criar uma nova pilha, e é melhor criar um botão usando uma pilha Você pode usar a seção de botões pré-criada, mas ela não é a melhor quando você deseja personalizar algo. Então, vou chamar esse botão de núcleo do livro no meu painel de camadas. E então podemos preencher e alterá-lo para um gradiente. E então, para isso, vou clicar no ponto e então este pode encontrar a luz. Então vai ser assim. E esse botão, a largura, vamos torná-lo em torno de 200 pixels, e então 100, como esse raio para arredondar os cantos, será Pressione a ferramenta de digitação, agende uma chamada e, se quisermos, podemos usar apenas 25 pixels. Mude para a cor escura e mude figueira e passe para média. Talvez sejamos meio ousados e possamos finalizar, e é assim que parece Opa. Ajuste um botão como esse. Legal. Então eu tenho esse botão, e agora, o que eu quero fazer é mudar a direção para horizontal. Eu quero trazê-lo para dentro desta pilha aqui. Então, essa horizontal. A pilha principal pode ser vertical. Este será horizontal. Livre-se dessa pilha Havia alguns elementos lá dentro que estavam bagunçando tudo. Vou verificar suas camadas porque algumas coisas vão ficar confusas A partir daqui, linha até a parte inferior, coloque talvez 50 pixels na parte inferior, à esquerda, temos 50. E certo, teremos 50. Então, acabamos de adicionar preenchimento dentro dessa pilha. Como você pode ver, eu posso fazer isso talvez um pouco menor. Legal. Então, criamos essa parte aqui. Obviamente, o preenchimento não é exatamente, mas tudo bem. E então podemos simplesmente adicionar I'll stack. Então, vou voltar para a página inicial, e posso simplesmente copiar uma dessas pilhas aqui colá-la dentro da pilha principal desta forma Super legal. E quero ter certeza de que também tenho o mesmo preenchimento Então eu acredito que foi 50. Podemos reduzir isso. Também podemos ajustar a largura que será fixa. Então, vamos falar sobre isso. Então eu vou colocar isso dentro de outra pilha. Essa pilha será horizontal. Depois, podemos colar alguns aros, colar nessas três pilhas e selecionar a pilha principal na qual acabei de colocar essas três pilhas, e queremos mudar a distribuição para o início para trazê-la para a esquerda E agora temos isso. E sim, então temos o rodapé. Agora eu quero apertar play. Eu tenho um pouco do texto preenchido. Tudo bem. Mas agora temos nossa página, e depois o botão, o que queremos fazer é clicar no link na parte superior, e então, você sabe, isso pode ir para o e então, você sabe, link da arara ou para a página inicial ou Assim, ele pode ir para a página inicial, por exemplo. E podemos adicionar animações como fizemos antes. Você pode ver os links adicionados aqui. Este vai para o Instagram, e esse vai para minha vaca quando eu clico nesses pequenos links de texto. Assim, você pode literalmente criar um link a partir de texto, qualquer coisa, na verdade. Depois de concluir o rodapé, mostrarei como criar um componente Um componente é uma maneira rápida de criar objetos, botões e itens recorrentes que você usa mais de uma vez. Assim, você pode modelar coisas. É quando você deve criar um componente. Então, por exemplo, vou selecionar minha pilha de rodapé principal. Você pode clicar com o botão direito do mouse e criar um componente. O atalho também é Control Old K. Mas queremos clicar em Criar componente e queremos apenas chamar o rodapé principal ou algo simples que você possa lembrar E agora temos um componente aqui. Também temos essa variante, que é a variante do telefone, como você pode ver, e uma variante é apenas um componente secundário qual você pode alternar, no caso de, digamos, um exemplo em um telefone, que terá um tamanho diferente. Então, talvez você queira criar uma versão diferente ou talvez queira ter um modo escuro. Então, se eu clicar nesse componente, posso ir até aqui. E eu posso criar um Ha Ha ou uma versão prensada. Então você pode ver no nome que ele dirá Ha, e talvez alguns tenham baixa opacidade ou E também podemos personalizar e criar mais variantes. Então, se você for para a direita, verá que pode criar outra variante. Portanto, essa variante talvez possa ter apenas o logotipo por si só. E podemos chamar essa variante de três ou podemos renomeá-la para outra coisa. Podemos chamá-la de variante três, logotipo. A variante do telefone, isso seria ótimo para um telefone. O que queremos fazer é reduzir a escala. Vamos talvez dizer 450 pixels. É obviamente pequeno, basta ir 550 por enquanto só para mostrar um exemplo. O que queremos fazer é reduzir tudo e talvez tenhamos que mudar a pilha para vertical, alterar o alinhamento e, em seguida, criar o espaçamento, alterar um pouco reduzir tudo e talvez tenhamos que mudar a pilha para vertical, alterar o alinhamento e, em seguida, criar o espaçamento, a lacuna E deveríamos ter algo assim. Também posso mudar o preenchimento. Eu posso diminuir o tamanho. Acho que, na verdade, estamos alinhando o meio assim. E então, para essas, porque são três pilhas separadas, queremos usar o votical e, em seguida, queremos aumentá-las, mas vamos apenas aumentar o tamanho geral Então, vamos fazer isso. Então vamos derrubar isso. E então, se você perceber que as coisas estão quebradas, por exemplo, essa pilha deveria estar alinhada Então, vou me certificar de que essa pilha seja uma linha. Então, vou trocá-lo para preencher. Portanto, o tamanho preencherá o espaço de largura, como você pode ver assim. E também quero ter certeza que vou selecionar uma pilha nessa variante e depois aumentar a lacuna dessa forma Legal. E agora temos essa variante de telefone. Temos uma cópia. Eu só vou deletar isso. Então, vou clicar duas vezes no título e chamá-lo de telefone. Agora temos o desktop primário, temos o telefone e, em seguida, temos esse outro. Então, agora, se eu for para a página do portfólio e vamos para a seção de telefone aqui, você pode ver que esta está usando a variante de desktop. Se você for para o lado direito, verá que um componente será destacado em roxo, e você pode ver que posso ir aqui e selecionar a variante do telefone e ele deve estar usando essa. Então você tem essa variante. Então, por exemplo, se eu for para o desktop e escolher essa variante, ele fará essa com apenas o logotipo, e se eu fizer a do telefone, ela fará a do telefone. E, obviamente, no momento, não está sendo dimensionado adequadamente. Então, eu só preciso ter certeza de que está funcionando corretamente. Assim, sempre posso voltar para editar a variante e garantir que você veja se tudo está configurado como corrigido. Então, vou colocar tudo para caber. Isso deve ser relativo, relativo, relativo e, em seguida, este deve ser preenchido e preenchido também. Ok, legal. Então, agora, se eu voltar, sim, deve estar funcionando corretamente. E eu apenas diminuo o tamanho desse logotipo, e você pode vê-lo atualizado. Em todos os lugares onde esse componente estiver, ele será atualizado. É mais fácil alterar as variantes if, e eu recomendo criar variantes. Então, se você quiser acessá-los, acesse os ativos, então você tem os componentes aqui, como você pode ver, digamos, por exemplo, o rodapé principal, e também há um botão de download aqui que o Freema tem automaticamente, e você simplesmente arrasta e solta assim, você pode colocá-lo em qualquer lugar, mesmo na página inicial ou onde quiser Se você quiser jogá-lo lá em algum lugar, podemos fazer isso também 9. Design responsivo para celular: X. Lição rápida, vou te mostrar como tornar seu site responsivo. Temos nossa página inicial Agora. O que podemos fazer adicionar um ponto de interrupção e vamos fazer o telefone básico 390 Agora, você pode ver que agora não é do jeito que gostaríamos que fosse. O texto está saindo da página. Então, o que temos que fazer é mudar a direção da pilha para vertical, então ela está empilhando uma a uma dessa forma, em vez de empilhar horizontalmente O que vou fazer é ir até as camadas e ter em mente que qualquer alteração que você fizer no ponto de interrupção do telefone ou do tablet não afetará o ponto de interrupção do desktop É por isso que eu sempre começo com o desktop e depois faço o telefone. Porque haverá mudanças diferentes. E, normalmente, quando você faz uma alteração no desktop, ela desce automaticamente para o tablet e o telefone Vou selecionar a pilha principal e vamos mudá-la para vertical Então você pode ver que tudo está invertido. Você também pode mover o telefone. Você pode movê-lo para o lado, para que possamos movê-lo. Você também pode pressionar alt e shift, e ele se duplicará, o que é outro truque legal Vá ajustar a moldura, traga-a para dentro, como você pode ver. Então eu preciso mudar as outras pilhas também. Portanto, essa pilha precisa ficar na vertical. Uh, alguns já estão verticais e este, com formato de texto vertical, e eu vou aumentar o tamanho O quadro geral, eu vou ter que ver esse quadro, vou ter que escalá-lo desta forma. Toda essa imagem se encaixa nessa seção. Se você quiser ajustar o telefone, eu vou talvez 450, torne-o um pouco maior, mude 10. Editoração: Agora, nesta seção, vou mostrar como fazer o SEO e também publicar seu site para que você possa colocá-lo em funcionamento no mundo todo. Então, quando terminar, você pode acessar a página inicial ou a página do portfólio e clicar em Configurações E nas configurações, você pode ver que deseja ajustar isso antes de publicar, o SEO no Google e em qualquer navegador que as pessoas estejam usando, os títulos e detalhes de SEO estejam corretos. Então, podemos dizer o portfólio do Mirror e o URL, podemos deixar isso porque está conectado ao CMS Se quiser mostrar páginas nos mecanismos de pesquisa, vamos marcar isso. Esta é a prévia de como ficará em qualquer mecanismo de pesquisa que as pessoas estejam usando, então você quer uma prévia social. 1.200 por 30 pixels. O que eu normalmente faço é entrar no Illustrator, criar uma prancheta, 1.200 por 630, por exemplo, posso simplesmente verificar O que eu quiser, na verdade. Você pode criar qualquer tipo de imagem. Vou salvar isso para que você possa ver as configurações. Salvando 100% como JPEG. 90% de qualidade é boa. Apenas guarde isso. E aí está. Basta fazer isso em 2 segundos. Então, sempre que você compartilhar esse link nas redes sociais, ele carregará essa imagem Então você sabe como as pessoas obtêm a imagem quando você a carrega. E é basicamente isso. Em seguida, clicarei em Salvar. E depois, certifique-se de fazer isso em todas as páginas. Então, página inicial também. Se você quiser alterar seu OL, uma vez feito isso, o que você pode fazer é que o Framer lhe dê um domínio gratuito Como você pode ver, essa é a URL, o que seria. Obviamente, você pode mudar isso. Aqui, digamos que Jeremy Mirror, desenhe por enquanto e pressione Enter, e então o site será esse Portanto, o domínio personalizado, obviamente, se você quiser atualizar um domínio, precisará comprar um. Eu costumo usar o Go Daddy. Ou diga barato. Então você tem um nome barato. Domínios baratos são provavelmente dois ótimos sites. Então, sim, você tem um nome barato aqui. Tem nomes baratos que você pode pesquisar e Go Daddy, também. Tenho domínios que você pode comprar por cerca de 20 dólares, dependendo do que vou fazer é ir para o canto superior direito, clicar em Publicar e você pode ver que o atualizamos há 23 horas e houve seis alterações. Então, eu posso ver as mudanças aqui. Como você pode ver, vou te dar um resumo, dar tudo isso. O que você pode fazer antes de publicar, se você clicar nas 23 horas, eu o levarei para esta página de preparação Você pode ver antes de publicá-lo ao vivo, basta verificar tudo antes que ele seja totalmente publicado. Assim, você pode ver que ele está lá otimizado. E esta é a versão mais recente. Obviamente, você precisa atualizar para um plano de site pago real antes de fazer isso. Publique ClickUdate e o site será atualizado. Posso clicar em Abrir link e, como você pode ver, aqui está o site que criamos, que é muito legal. Então, vou clicar em Sense pay, ele deve abrir a página do projeto. Legal. E aí está, e é assim que você faz. Obviamente, podemos consertar isso e qualquer outra coisa, mas vamos fazer isso. Então, obviamente, você receberá o selo de criador na parte inferior do site, como você pode ver, é assim que você publica 11. Design com plugins: Se você for para o canto superior esquerdo, verá que há um menu de plug-ins. Você quer clicar nisso. E você já tem alguns recentes que usou aqui. Você tem alguns em destaque aqui, alguns dos mais populares. E você também pode clicar em Bows para acessar o site do Framer, e eu mostrarei todos os Na verdade, eles têm 130, o que é insano. Eles têm ícones. Eles têm, você sabe, coisas de IA, imagens, como muitos plugins diferentes, o que eu acho muito bom. Você pode até mesmo injetar coisas de comércio eletrônico, como frameship. E eu vou usar o plugin e quero pesquisar Lumi . E quando você tiver um plug-in, você ficará como uma janela Você pode movê-lo na tela. E para este, são basicamente imagens gratuitas, mas elas têm um plano profissional. Mas, por exemplo, posso clicar com o botão esquerdo em uma imagem. Então, nas minhas camadas, selecionei essa imagem de cubo e talvez eu queira uma diferente Eu posso clicar no Lumi, e ele deve injetar aquela imagem ali mesmo Obviamente, há uma marca nominativa porque eu não tenho a versão profissional, mas é uma maneira muito simples de adicionar imagens à sua tela Assim mesmo. Então você pode ver minhas imagens, ele injetou essa imagem lá dentro Loom é ótimo porque tem ilustrações. Tem três D, tem um monte de coisas legais. Podemos até selecionar ferramentas e efeitos e ir até Duotone e selecionar nossos próprios duotons de tema de cores, como você pode ver. Talvez queiramos esse azul com esse flamingo ou algo parecido Isso parece muito legal. Então esse é um plug-in que eu adoro usar. Você também tem outros com os quais você pode brincar. Então, eu recomendo, você sabe, uma olhada em alguns dos plug-ins com os quais você deseja jogar. Por exemplo, você tem esse DIA que é muito divertido. Então, talvez eu tenha minha imagem de perfil e queira adicionar o efeito de diferença. Vou clicar em DIA e criar esse tipo único de efeito de padrão, que difere a imagem, para que possamos inserir a imagem. E então nós temos isso. Temos esse efeito de distorção de pixels, de pontilhamento, o que é E obviamente podemos personalizar a pixelização. Então, basicamente, são efeitos de pixel diferentes. Eu posso mudar o brilho. Você pode brincar com quantização e resolução. Vamos aumentar um pouco. Então, esse também é um pequeno plug-in divertido, com o qual eu gosto de brincar se quiser obter, tipo, um efeito estranho O fosfo também é muito bom. Então, se você quiser alguns ícones realmente ótimos, adoro usar fosfeto apenas para inserir alguns ícones rápidos Assim, basta clicar com o botão esquerdo e ele o soltará ou você pode clicar e arrastar e, em seguida, selecioná-lo, ir para o preenchimento e alterar a cor, como você pode ver. Então, talvez você queira, você sabe, cor verde ou qualquer outra coisa. Eles têm montes Eles têm preenchimentos, têm tons duplos, como você pode ver, e depois mudamos a cor Portanto, é totalmente gratuito. Então, é simplesmente incrível, dê algumas ideias rápidas Você também tem uma versão light. E você pode escalá-los e girá-los. Brinque com alguns dos plug-ins. Eu vou te dizer se é gratuito ou se é pago. Portanto, tenha isso em mente. Há muitos plug-ins gratuitos aqui. Experimente e comece a criar coisas divertidas. 12. Conclusão: Muito por assistir às aulas. Eu realmente agradeço isso. Espero que você tenha aprendido tudo o que precisa para começar a criar sites estruturados e espero que lhe dê um pouco mais de confiança para começar a criar coisas exemplo, eu não criei muitos projetos, mas quanto mais você cria, mesmo brincando com modelos, é uma ótima maneira de praticar e se acostumar a criar. Para o projeto da classe, quero que você crie algo semelhante ao que fizemos para o portfólio. Você pode acompanhar exatamente como eu fiz ou criar algo semelhante com sua vibe, torná-la seu próprio estilo pessoal Portanto, o objetivo principal é apenas criar uma landing page de uma página com algumas das peças do seu portfólio. Pode ser apenas trabalho de estudante ou projetos falsos. Isso é totalmente bom. Em seguida, faça o upload para a classe Skillshare e eu lhe darei feedback assim que puder E se você tiver outras peças do portfólio e quiser algum feedback, eu adoraria dar um feedback sobre isso. Basta colocar seu link nas discussões ou no bate-papo. Se você quiser aprender outras coisas, como identidade de marca ou design de logotipo, tenho mais de 30 cursos no Skillshare Eu tenho 30 outras aulas no Skillshare que você pode fazer E se você quiser outros recursos, acesse meu site jeremymor.com ou assista a alguns dos meus tutoriais no YouTube, você pode assista a alguns dos meus tutoriais no YouTube Muito obrigado, e nos vemos na próxima vez.