Como criar e projetar sites interativos com o Webflow

1. Apresentação: Caramba, você está interessado em criar e projetar um site interativo do TreeD usando o Webflow Se a resposta for sim, então o curso pode ser para você. Então, primeiro, vamos obter nosso modelo Tree D da Spline Em seguida, integraremos o modelo Tree D ao site. Em seguida, também vamos animar o modelo da Árvore D. Olha isso, pessoal. Muito legal, né? Então, no primeiro projeto, vamos criar um site de portfólio profissional. Então, veja isso. No segundo projeto, vamos criar uma página de destino do produto. Olha isso. E no terceiro projeto, vamos criar um site para um restaurante. Olha isso. Além disso, também criaremos um formulário de reserva on-line para o site do nosso restaurante usando o Typeform Então, se você clicar neste botão, fazer um pedido, você será redirecionado para o formulário de reserva on-line. OK. Depois de construirmos o site, também conduziremos uma auditoria de SEO usando o SEOptimer e o Zambras e também criaremos um site de perfil de empresa usando o Webflow AI Site Builder usando o Webflow Você só precisa escrever um simples baile de formatura e clicar em Gerar. Em menos de um minuto, a IA gerará um lindo site como este. Olha isso. 2. Encontrando um modelo 3D no Spline: Santo Deus, bem-vindo de volta ao curso. Neste vídeo, vamos criar modelos Tre usando o Spline Ok, então agora, vamos começar. Primeiro, você precisará criar sua conta. Então, vou me inscrever usando minha conta de e-mail, pessoal. Ok, como vocês podem ver agora, seremos redirecionados para o painel Ok, então se você rolar para baixo, há vários vídeos tutoriais. Então, se você tiver tempo livre, eu realmente recomendo que você assista a esses vídeos. Eles são muito úteis. E aqui embaixo, também temos vários projetos interessantes que ambos estamos usando o Spline Então, se você estiver meio curioso, pode clicar em um desses projetos, pessoal. Ok, agora vamos começar. Na verdade, você tem duas opções. Portanto, a primeira opção é criar o modelo de tendência do zero. E a segunda opção é usar um dos modelos Triny nas seções da biblioteca e, em seguida, personalizá-lo como quiser Você pode mudar a cor, você pode mudar o estilo. Você pode alterar o tamanho. Você pode fazer o que quiser, certo? Então, basta clicar em Novo arquivo e você será redirecionado para a página de edição Se você quiser começar do zero, basta clicar nesse ícone e há várias formas com as quais você pode começar. Por exemplo, como retângulo, elipse, triângulo, estrela do Pentágono Pode escolher a forma que você quiser. Mas se você não tem experiência anterior na construção de modelos TreeD, eu realmente recomendo que você use a biblioteca, certo? Então, basta clicar em Biblioteca. Como vocês podem ver, existem muitos modelos de TD disponíveis que vocês podem usar. Ok, agora vamos explorar qual modelo TD queremos usar para nosso projeto, certo? Bem, na verdade, você também pode abrir a biblioteca aqui, então basta clicar em Biblioteca. E eu vou abri-lo na outra aba. Como vocês podem ver, há duas seções principais. Portanto, a primeira seção é pecado e a segunda seção é objeto. Então, vou selecionar o objeto, pessoal, e há muitas categorias diferentes. Por exemplo, como ícones de Trey, costas, garrafas, caixas, edifícios, personagens, limpeza de Natal, roupas, cosméticos, copos, emojis, meio ambiente e muito mais Ok, então, neste exemplo, vou selecionar personagens. E basta rolar para baixo, pessoal. Existem muitos três modelos D, pessoal. Olha isso. Modelos vermelhos muito legais. Ok, então vou selecionar os três modelos. Sinta-se à vontade para selecionar qualquer modelo TD de sua preferência. Ok, basta clicar nesse modelo Tree D e você será redirecionado para a página de edição Tudo bem? O processo pode levar alguns segundos, então espere. Tudo bem, então essa é a página de edição, pessoal. Então, agora vamos reestruturar um pouco esse modelo Tren D. Então, a primeira coisa que você precisa fazer é agrupar todos esses componentes. Como vocês podem ver, esse modelo T D é composto por vários componentes, como sapatos, fones de ouvido, cadeira, computador, perna, corpo, cilindro e aquecimento Então, o que vamos fazer é bloquear todos esses componentes e pressionar Control G se você estiver no Windows. No entanto, se você estiver usando o MacBook, basta pressionar Command G. Ok. Ok Então, o que vamos fazer a seguir é personalizar esse modelo de três D. Portanto, nas seções metropolitanas, existem vários componentes, como peles, canetas e sapatos. Por exemplo, eu quero mudar a cor dos sapatos, então basta clicar em Shouse e clicar em Dev, basta clicar em Color Okay, então digamos que eu queira mudar a cor para azul Ok, então vai ficar assim, pessoal. Ok, então você pode se sentir à vontade para personalizá-lo como quiser. Você pode mudar a cor. E quando terminar, você pode clicar em Exportar e clicar em Âmbito integrado Então, o que vamos fazer é copiar e colar esse código, certo? Então, quando você vai integrar esse modelo de três D ao seu site Webflow, você precisará desse código, certo? Apenas certifique-se de se lembrar disso. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau. 3. Explorando os recursos do Webflow: Santo Deus, bem-vindo de volta ao curso. Neste vídeo, vamos explorar todos os recursos da página de edição do Webflow Então você vai aprender a adicionar o conteúdo, fazer upload de imagens, mudar de cor, mudar de estilo, design, etc. , certo Então você vai aprender muito. Portanto, preste muita atenção a este vídeo. Ok, então a primeira coisa que você precisa fazer é se inscrever, então basta clicar em Começar. Ok, então você tem as opções de se inscrever usando a conta GML Então, vou clicar em Inscrever-se no Google, certo? Então, estou me inscrevendo usando minha conta GML. Ok, vamos lá. Como vocês podem ver agora, seremos redirecionados para o painel OK. Tudo bem, então esse é o seu espaço de trabalho, Como vocês podem ver, eu tenho um projeto aqui. Então, este é um site que eu criei como no ano passado. Ok, então para criar um novo site, você pode clicar em Novo site e será redirecionado para esta página E basta clicar em Marketplace and Templates. Portanto, existem muitos modelos que vocês podem usar. Há muitas opções, pessoal. Alguns deles são gratuitos, outros não são gratuitos. Então, certifique-se de usar como o modelo gratuito, certo? Porque você não quer gastar dinheiro com esse modelo. Então, neste projeto, vamos construir um portfólio profissional. Então, vou digitar um portfólio como este. E só cerdas. Há muitas opções, pessoal. Então, vou selecionar o gratuito. Então, basta digitar gratuitamente assim e encontraremos o modelo gratuito, certo? Ok, então eu estou interessado neste modelo, então vou clicar no modelo. Se você quiser se sentar, como parece, basta clicar em Visualizar no navegador, certo? Ele abrirá esse modelo na outra guia. Ok, então parece muito legal, certo? Olha isso. Ok, agora vou clicar em usar gratuitamente. Ok, então basta clicar no lado Criar. Você pode dar um nome a ele. Vou chamá-lo portfólio profissional assim e clicar em Criar lado. E você será redirecionado para a página de edição, certo? O processo pode levar alguns segundos para nós, então espere. Espero que não demore muito. Ok, vamos lá. Ok, agora vamos explorar todos os grilhões disponíveis nessa dieta em crianças, certo? Você não precisa conhecer cada um deles, porque são muitos e você pode ficar sobrecarregado Então, vou ensinar a vocês os grilhões que usaremos nos projetos, certo? Portanto, preste muita atenção. Ok, então o primeiro é o navegador, certo? Então, como vocês podem ver aqui, vocês têm corpo, têm Navbar, têm controle deslizante Você tem quatro seções. Esta é a primeira, segunda seções, terceira seções e quatro seções, certo? Portanto, isso facilitará a navegação por este site. Por exemplo, se você quiser editar as primeiras seções, basta clicar nas primeiras seções, à direita, e você será redirecionado para esta página Ok, então se você clicar nas primeiras seções, há subcomponentes Por exemplo, contêiner. Se você clicar em Contêiner, esse é o pessoal do contêiner, e dentro do contêiner, temos colunas. Temos duas colunas, como a coluna um e a coluna dois. Dentro da coluna um, temos o título, certo? Então, isso é como o subcomponente da coluna um. E na segunda coluna, temos o gráfico Br e também o grupo de habilidades. Ok, então esse é o grupo de habilidades, pessoal. Então, quando quiser editar uma dessas seções, você pode selecionar Wiport que deseja editar Por exemplo, nesse caso, eu quero editar o parágrafo, então basta clicar em Parágrafo, certo? E basta clicar duas vezes e você pode editar o texto. Ok, agora você vai clicar no elemento. Então, há muitos elementos, pessoal. Por exemplo, como botão de item, tipografia, o que mais mídia? Essa é a parte mais importante, Guy. Se você quiser fazer upload de uma imagem ou talvez de um vídeo ou talvez de um vídeo do YouTube, você pode usar esse filtro. Se você não rolar, existem formulários. O que mais? Entrada. Próxima caixa de seleção da área, captura Você também pode curtir o código de incorporação aqui. Ok, então agora eu vou te ensinar a fazer upload de uma imagem, certo? Então, vá até as seções de mídia, role um pouco para baixo e clique em Imagem. Ok, então aqui, você pode clicar em Apenas imagem. E você tem duas opções. Você pode enviar sua própria imagem, certo? Então, basta clicar nesse ícone. E neste exemplo, vou fazer o upload de uma imagem aleatória, pessoal. Talvez essa imagem, certo? Então, basta clicar em Abrir. Ou a segunda opção é usar a imagem da biblioteca, certo? Então, depende totalmente de você. Ok, como vocês podem ver, nós carregamos a imagem com sucesso. Ok, agora vamos aprender a mudar as cores de fundo. Vamos aprender a mudar o tipo de telefone e também o estilo. Ok, então agora, vamos começar com o tipo de telefone. Como vocês podem ver, o tipo de telefone é Roboto. Se você quiser alterá-lo, basta clicar aqui e há muitas opções. Por exemplo, eu quero mudar isso para impactar. Então, basta clicar em Impacto. Ou talvez você queira mudá-lo para amargo. Então, basta clicar em Bitter, certo? Ok, então esse é o tipo de fonte. Ok, então digamos que você também queira alterar o tamanho da fonte. Como vocês podem ver, no momento, o tamanho da fonte é 14. Então, digamos que eu queira torná-lo um pouco maior, vou mudar para 16, certo? Aqui vamos nós. Parece um pouco maior, certo? Ok, então se você quiser alterar a cor da fonte, basta clicar aqui. Neste exemplo, vou mudar a cor da fonte de cinza para azul escuro, então basta clicar em azul escuro. Ok, vamos lá. Como vocês podem ver, agora mudamos com sucesso a cor do telefone para azul escuro, certo? Ok, então se você também quiser mudar as posições do texto agora, o texto está à esquerda. Se você quiser colocá-lo no centro, sugira clicar aqui. Se você quiser fazer isso à direita, sugira clicar aqui. Ok, então vou colocar o texto à esquerda, pessoal. E aqui embaixo, você também pode personalizar o estilo. Ok, então basta rolar um pouco para baixo. Agora vamos mudar as cores de fundo, certo? Ok, então basta clicar aqui e você tem muitas opções. Então, digamos que eu queira mudar a cor para verde claro, certo? Olha isso. Muito legal, né? Ou talvez eu queira mudar para , tipo, azul claro. Então, vai ficar assim, pessoal. Ok, então se você quiser personalizar a borda, basta clicar em Borda e, em seguida, você pode personalizá-la. Com você também pode personalizar a cor. No momento, está preto. Sinta-se à vontade para alterá-lo se quiser. Ok, então, por fim, você pode personalizar os efeitos. No momento, o efeito é normal, mas você pode fazer experimentos com esses efeitos. Por exemplo, como escurecido, multiplique a cor, queimado, iluminado, esquive a cor queimado, iluminado, esquive Vocês têm muitas opções, pessoal, certo? Vou usar o efeito normal, certo? Você também pode adicionar transições. Portanto, se você estiver interessado em animar o site, poderá usar essas transições. Não se preocupe Vou explicar isso nos próximos vídeos, certo? Ok, então se você quiser publicar esses sites, pessoal, basta clicar em Pablis, momento, o site ainda não foi publicado, mas se você quiser publicá-lo, basta clicar em Publicar no domínio selecionado, certo? Você também pode adicionar um domínio personalizado se tiver seu próprio domínio. Ok, então é assim que você publica o site. Mas, obviamente, neste caso, não vamos publicar esses sites, certo, porque ainda não terminamos de editar este site. Ok, então eu acho que é isso, pessoal. Isso é tudo que você precisa saber. Vou ver gasolina no próximo vídeo, onde vamos começar o projeto real, certo? Então, vamos criar sites de portfólio profissional. Vou ver gasolina lá. 4. Como integrar o modelo 3D ao site de portfólio profissional: Olá, pessoal. Bem-vindo de volta ao curso. No primeiro projeto, vamos criar um site de portfólio profissional, e eu não quero começar do zero, pessoal porque vai consumir muito tempo, certo? Então, vamos escolher apenas um modelo e vamos clonar esse modelo, certo? Então, como vocês podem ver, temos, tipo, muitos modelos diferentes. Então, vou selecionar esse modelo, pessoal. O criador deste modelo é Zack Kendall. Modelo muito legal, pessoal. Portanto, só porque estou usando esse modelo, isso não significa necessariamente que você precise me seguir usando esse modelo. Você tem muitas opções, então fique à vontade para escolher qualquer modelo que quiser, certo? Ok, então clonar esse modelo, é muito fácil. Tudo o que você precisa fazer é clicar em clonar no Webflow. Mas antes de fazer isso, é melhor abrir esses sites na outra guia primeiro, apenas para ter certeza de que realmente gosta desse site, certo? Ok, então vamos lá. Olha esses caras. É muito legal, certo? É um pouco minimalista, mas eu realmente gosto do estilo, para ser honesto com Ok, agora vamos clonar o modelo. Então, basta clicar em clonar no Webflow. Ok, vamos lá. Então, agora. Basta clicar em Criar lado. E não se preocupem, pessoal, isso é totalmente gratuito e vocês precisarão dar um nome a este site. Vou apenas digitar um projeto de portfólio profissional, certo? Então esse vai ser o nome. Então, basta clicar no lado Criar. Ok, então espere o processo pode levar alguns segundos. Espero que não demore muito. Ok. Agora vamos ser redirecionados para a página de edição do Webflow, certo Então, a primeira coisa que vamos fazer aqui é integrar os três modelos D que criamos usando o Spline neste site E não se preocupe. O processo é muito fácil. Ok, então vou clicar em Adicionar elemento e continuar. Ok, então nas seções de mídia, basta clicar em Spline scenes, certo? Então, basta clicar aqui. Como vocês podem ver, acabamos de criar um Spline sind. Ok, agora vamos para sua conta Spline. Se você se lembra, criamos esse modelo de árvore, certo? Então, basta clicar aqui E agora vamos copiar e colar o código, certo? Vamos incorporar o código. Aqui mesmo. Ok, então esperem, pessoal. Ainda está sendo processado. Ok, muito legal. Agora basta clicar em Exportar e copiar e colar. Esse código. Ok, então o que vamos fazer é clicar em Copiar incorporar, e eu vou colar o código aqui, certo? E eu vou copiar e colar essa parte. E vamos voltar para a página de edição do Webflow. E aqui mesmo nas seções de URL, basta digitar esse código. Ok. Agora, basta clicar em Fornecimento e enviar. Como vocês podem ver, integramos com sucesso esses três modelos D ao site. Ok, então o que vamos fazer a seguir é nomear a classe, então basta clicar em Nova classe. O nome será Spline. O modelo D. Você pode chamá-lo do que quiser. Depende totalmente de você. Então eu vou apertar Enter, pessoal. Ok, então criamos essa classe com sucesso. A próxima coisa que vamos fazer é tornar isso um pouco maior. Como vocês podem ver, esse modelo de três D é muito pequeno. Então, vou apenas modificar as alturas. Vou digitar 100 fg, assim. Ok, então, a seguir, vamos direcionar isso para o topo. Ok. E a seguir, vamos mudar a posição. Então, agora é estático, então vou alterá-lo para pegajoso, certo? Integramos com sucesso esses três modelos ao site. Vejo vocês no próximo vídeo em que vamos animar este site e fazer mais modificações Vamos deixar esse site mais bonito. Ok, então eu vejo vocês lá. Tchau. 5. Como animar modelo 3D no site de portfólio profissional: Caramba, bem-vindos de volta ao curso. Neste vídeo, vamos adicionar animações a esse modelo de três D. Mas antes de adicionar as animações, primeiro faremos algumas modificações Como vocês podem ver, esse modelo de três D está muito próximo da borda superior. Então, vamos realocar o modelo de três D para o centro Está bem? Então, basta rolar um pouco para baixo. Nessas seções de posição, basta clicar em Automático e selecionarei 50. Ou talvez 100, certo? Como vocês podem ver, agora, esse modelo de três D está no centro, certo? Ok, então isso é melhor. E vamos clicar nesse botão de argila. Ele vai te dar uma prévia do site. Ok, então ainda está carregando. Como vocês podem ver, esse modelo de três D foi integrado a este site e, se você rolar para baixo, esse modelo de três D permanece em segundo plano, certo? Então, isso é muito legal. O único problema que temos é a cor do texto. É preto, mas o fundo também é preto, então você não pode realmente ler esse texto, certo? Então, vamos corrigir isso no próximo vídeo, pessoal. Não se preocupe Ok, agora vamos voltar para a página de edição. Tudo bem, agora vamos animar esses três modelos D. Então, basta clicar no modelo Spline three D e clicar em Interações. E na Piterzação, basta clicar aqui e clicar A maioria se move na janela de exibição. Ok, então, em seguida, basta clicar em Selecionar ações e clicar em Reproduzir a maioria das animações, certo? Ok, então basta clicar em Adicionar animações. E agora você precisará nomear as animações. Você pode chamá-lo do que quiser. Depende totalmente de você. Nesse caso, vou chamá-lo de três animações do modelo D. Ok, então basta pressionar Enter e agora eu vou clicar aqui e clicar em Spline porque temos esse modelo de três D da Spline, Ok, agora você pode rolar um pouco para baixo. Em seguida, selecionaremos o objeto que queremos animar. Então, neste caso, queremos animar o grupo, então basta clicar em grupo Ok, então eu vou girar esse modelo de três D no eixo branco, certo? Então, vou direcionar isso um pouco para a direita. Vou configurá-lo para 1,5. Ok, agora é só clicar na segunda camada. E nós vamos fazer a mesma coisa. Então, para o objeto, basta clicar em grupo. E vamos fazer o oposto, pessoal. Então, queremos girar esses três modelos para direções opostas, certo? Então, vou direcionar isso para a esquerda. Então, vou definir isso como menos 1,5. Ok, então terminamos. Agora basta clicar em Visualização ao vivo, certo? Então, como vocês podem ver, se eu cavar meu mouse para a direita , esses três modelos D se moverão para a direita. E a mesma coisa, se eu direcionar o máximo para a esquerda, esses três modelos D se moverão para a esquerda, certo? Olha isso. Muito legal, né? Ok, então agora não se esqueça de salvá-lo. Então, basta clicar em Salvar. Ok, então salvamos essas animações com sucesso Ok, então, a seguir, basta clicar no botão de exibição e veremos como a animação se parece no site, certo? Ok, muito legal. Olha isso. Ok, então se você quiser rolar para baixo, vai ficar assim, pessoal. Animações legais gratuitas, certo? Tudo bem, pessoal, acho que é isso para este vídeo. Vejo vocês no próximo vídeo, onde adicionaremos conteúdo ao site. Vamos fazer upload de imagens para o site e torná-lo mais bonito. Ok, então eu vejo vocês lá. Tchau 6. Adicionando conteúdo ao site de portfólio profissional: Caramba, pessoal. Bem-vindo de volta ao curso. Neste vídeo, adicionaremos conteúdo a este site e também enviaremos novas imagens para este site. OK. Primeiro, vamos fazer algumas modificações, então basta clicar em NAP. E vou mudar a cor do contêiner, então basta clicar no contêiner e rolar um pouco. Então eu vou mudar a cor de branco para azul claro, certo? Ok, muito legal. Como vocês podem ver, alteramos com sucesso a cor para azul claro. Ok, então a seguir, vou mudar a cor dessa caixa, certo? Então, basta clicar no botão. E como vocês podem ver, agora, a cor é roxa, então vou mudá-la para preto. Então, basta rolar um pouco e clicar aqui e eu vou selecionar preto, certo? Agora, como vocês podem ver, a cor desses blocos é preta. Ok, então agora vamos voltar. E o que vamos fazer a seguir é adicionar conteúdo a este site, certo? Então, basta clicar em Introdução. Basta clicar em Continuar e em Introdução principal, certo? Então, basta clicar aqui Ok, então se você quiser modificar este texto, basta clicar duas vezes nele. Ok, então, neste exemplo, vou digitar. Bem-vindo ao meu portfólio, certo? Bem, parece que isso é muito grande, então vou torná-lo menor. Então, vou mudar o tamanho da fonte, então basta rolar um pouco para baixo. Ok, então isso é menor. Ok, então agora vamos substituir essa imagem aqui embaixo pela minha própria imagem, certo? Tudo bem, agora basta clicar em Imagem de introdução e vamos substituir essa imagem pela minha própria imagem Então, basta rolar um pouco para baixo. E basta clicar em Remover imagem e clicar em Imagem e clicar em Apenas imagem. Ok, então eu vou usar essa imagem. Eu gerei essa imagem usando o pessoal da IA, clique aqui e clique em Apenas imagem. E basta clicar em Capa. Ok, então agora vamos voltar Ok, parece muito legal, certo? Ok, agora vamos adicionar conteúdo a este site. Em primeiro lugar, adicionaremos conteúdo a esta sessão de introdução. Ok, então eu tenho meu documento aqui. Eu gerei esse parágrafo de introdução usando o Chat GPT. Ok, então eu vou copiar e colar isso. Ok, então vamos voltar para a página de edição. Basta clicar duas vezes e eu vou substituir isso por minhas apresentações. Ok, muito legal. Ok, então, a seguir, vamos editar essas seções. Ok, então primeiro, vou substituir essa imagem pela minha própria imagem. Então, basta clicar aqui e clicar em Remover imagem e clicar em Adicionar imagem e clicar em Escolher imagem. E eu vou fazer o upload da minha própria imagem, pessoal. Ok, então eu vou selecionar essa imagem. Então, basta clicar em Abrir e eu gerei essa imagem usando IA de dois caras. Ok, então esperem, pessoal. Agora ele ainda está carregando a imagem. O processo pode levar alguns segundos. Espero que não demore muito. Ok, então vamos lá. Ok, agora vou clicar em capa. Ok, muito legal. Olha isso, certo? Ok, agora vamos editar o conteúdo. Ok, então nas seções, vou destacar minhas habilidades e conhecimentos, certo? Então, neste exemplo, eu tenho três habilidades principais. O primeiro é o web design. O segundo é o desenvolvimento web e o terceiro é a ciência de dados. Ok, agora vamos editar esse conteúdo. Vou apenas copiar e colar isso, certo? Basta clicar duas vezes aqui, bloquear e copiar e colar. Ok, muito legal. Em seguida, vamos editar a segunda habilidade. Então, basta clicar no segundo pai do projeto. Ok, então primeiro, vou substituir essa imagem pela minha própria imagem. Está bem? Então, vou clicar duas vezes nisso. E vou clicar em Remover imagem, Imagem, clicar em Joe Image e agora vou fazer o upload da imagem. Ok, então desta vez eu vou fazer o upload dessa imagem legal, eu gerei essa imagem usando o pessoal da IA. Para sua informação, a ferramenta que eu uso foi Leonardo AI É muito semelhante ao Mid Journey. Ok, então não esqueça de clicar na capa. Ok, agora vamos editar o conteúdo. Ok, então basta clicar em Texto do projeto. Aqui vamos nós. Ok, então eu vou copiar e colar esses caras, certo? Essa é minha segunda habilidade, desenvolvimento web. Então, basta clicar duas vezes aqui e colar aqui, certo? Ok, agora vamos fazer o mesmo com a terceira habilidade. Então, basta clicar em Project parent, basta clicar em Project Child. Então, vou substituir essa imagem pela minha própria imagem, basta clicar aqui. Tudo bem. E eu vou clicar em Remover imagem e clicar em Adimage Ok, agora basta clicar em Jose Image e eu vou fazer o upload da minha própria imagem. Ok, então desta vez, vou fazer o upload dessa imagem, basta clicar em Abrir. Ok, então agora está fazendo o upload da imagem, pessoal. Então, espere. O processo pode levar alguns segundos. Espero que não demore muito, certo? E não se esqueça de clicar em Capa. Ok, muito legal. Ok, agora vamos editar o conteúdo. Minha terceira habilidade não é fotografar. É ciência de dados. Digite Data Science, certo? Aqui vamos nós. E agora vamos copiar e colar isso e fazer a mesma coisa. Então, basta bloquear isso e colar. Ok, muito legal. Ok, então terminamos. Agora vou clicar em Visualizar. Tudo bem, pessoal, então esse é nosso modelo Tre. Se você rolar para baixo. Temos a sessão de introdução. Sou Chris Raharja, V de profissionais de alto nível com experiência em web design, desenvolvimento web e ciência de dados Além da minha proficiência técnica em minhas habilidades sociais, incluindo atenção aos detalhes, resolução criativa de problemas e comunicações eficazes, garanto que cada projeto supere Vamos colaborar para transformar ideias em soluções digitais impactantes, E aqui, destaco minhas habilidades. O primeiro é o web design. O segundo é o desenvolvimento web e o terceiro é a ciência de dados. Muito legal, né? Ok, agora vamos voltar para a página de edição do Webflow. Ok, pessoal, por fim, vou fixar as posições da imagem Vou deixá-lo mais bonito, então basta clicar em conter, certo? Então, vai ficar assim. Ok, agora vamos clicar no botão de exibição. E se você ver essa imagem, ela parece muito melhor do que a anterior, certo? Olha isso. Muito legal. Akka, então terminamos o primeiro projeto Então, pergunte no próximo vídeo onde vamos começar o segundo projeto Então, no próximo vídeo, vamos criar uma página de destino do produto. Então, vejo vocês lá. Tchau. 7. Como integrar o modelo 3D à landing page do produto: Santo anfitrião, bem-vindo de volta ao curso. Neste vídeo, vamos construir modelo T D usando o Spline e vamos integrar o modelo TD ao site Webflow Para suas informações no segundo projeto, vamos criar uma página de destino do produto para tênis ou S. Ok, então primeiro, basta clicar em Bibliotecas Selecione objetos e clique em roupas. Ok, então, neste caso, estou procurando três modelos D para. Eu vou selecionar este. Se você quiser escolher outros três modelos D, sinta-se à vontade para fazer isso. Ok, agora ele está abrindo esse modelo de três D na página do editor. Então, espere porque o processo pode levar alguns segundos. Espero que não demore muito. Tudo bem, como vocês podem ver, o modelo TriT é vermelho Então, agora vamos personalizar a cor. Ok, então basta clicar neste modelo TriNe, e eu vou mudar a cor Bground de branco para azul claro, Então, basta ir ao Google e digitar código de cores para azul claro. Ok, então basta copiar e colar isso Ok, vamos lá. Muito legal. Agora vamos mudar a parte vermelha para preta. Então, basta digitar a cor da pelagem para preto. Você pode mudar para qualquer cor, pessoal, então depende totalmente de você, certo? Ok, então basta copiar e colar isso Ok, parece assim. Muito legal. E agora o que vamos fazer a seguir é exportar esses três modelos D. Então, basta clicar em Exportar. Basta clicar em FEWR porque precisaremos obter esse código de incorporação Ok, então esperem, pessoal, agora ele ainda está sendo processado, e agora é só clicar em Copiar e incorporar, certo? E eu vou abrir como um Google Docs. Ok, então terminamos. A próxima coisa que faremos é encontrar os modelos certos para a página de destino do produto. Ok, então basta ir ao mercado Webflow e digitar sapatos ou tênis, Você encontrará muitos modelos, alguns deles gratuitos, outros não, portanto, certifique-se de selecionar o gratuito. Ok, então vou selecionar esse modelo. Eu gosto, pessoal. E se você rolar para baixo e clicar em Informações sobre direitos autorais, certifique-se de que esse modelo tenha uma licença criativa de domínio público comum, certo? Isso significa que esse modelo pode ser usado para trabalhos pessoais e comerciais. Ok, então basta clicar. Entendi. Então, se você quiser clonar esse modelo, basta clicar em clonar no Webflow Ok, então basta clicar nisso, pessoal. Ok, agora basta clicar em Criar site e, aqui, você precisará nomear o site. Vou chamá-la de página inicial do produto. Você pode chamá-lo do que quiser. Depende totalmente de vocês. Ok, então basta clicar em Criar site. Agora seremos redirecionados para a página de edição do Webflow, certo? Ok, então a próxima coisa que vamos fazer é integrar os três modelos D a este site. Ok, então se você se lembra, anteriormente, nós já copiamos e colamos o código do amplet do Spline Então, vamos copiar o esporte. Ok, então vamos fazer a mesma coisa que fizemos antes de vocês. Então, basta clicar nesse ícone e rolar um pouco. E nas seções de mídia, vamos clicar em Spline scene, certo? E precisaremos copiar e colar o código. Ok, então basta clicar em Recarregar, cena Spline. Ok, como vocês podem ver, integramos com sucesso os três modelos D ao site. Então, agora eu vou cavar isso até o topo. Vou colocar isso abaixo do NAFBar. Portanto, se você rolar para cima, verá os três modelos D na parte superior. Então, o que vamos fazer a seguir é modificar um pouco esse modelo de três D. Então, role para baixo. E como vocês podem ver agora, a posição é estática, então vamos mudá-la para pegajosa, certo? É exatamente a mesma coisa que fizemos anteriormente. E basta clicar em Auto e eu vou selecionar 5.100. Ok, vamos lá. Ok, então terminamos, pessoal. Integramos com sucesso esses três modelos D ao site. Eu vou ver Gus no próximo vídeo, onde vamos animar esse modelo em três D. Vejo vocês lá. Tchau. 8. Animando modelo 3D na landing page do produto: Caramba, pessoal. Bem-vindo de volta ao curso. Neste vídeo, vamos animar esses três modelos D. Ok, então agora vamos começar. Primeiro, basta clicar na cena Spline. Em seguida, clique em Interações. Nas seções do Bittreer, basta clicar aqui e clicar em Mover com o mouse na Ok, então basta clicar em Selecionar uma ação e clicar em Reproduzir animações do mouse Em seguida, basta clicar em Animações. Ok, então aqui, você precisará nomear as animações. Você pode chamá-lo do que quiser. Depende totalmente de você. Nesse caso, vou chamá-la de house Animations. E basta pressionar Enter. Ok, então a seguir, basta clicar aqui. E vamos selecionar Spline porque obtivemos esses três modelos da Spline Então, basta clicar aqui. Ok, então, a seguir, vamos especificar qual objeto queremos animar. Então, basta clicar em selecionar e eu vou selecionar a tonalidade de execução. Ok, então aqui embaixo, você tem muitas opções Você pode girar esse modelo de três D no eixo X. Você pode girar esse modelo de três D no eixo Y. Você também pode girar esse modelo de três D no eixo Z. Então, depende totalmente de vocês. Ok, então neste caso, eu vou girar esse S no eixo y, certo? Então, vou direcionar isso para a direita. Vou configurá-lo para três. E vamos para a segunda camada. Vamos fazer o mesmo pessoal, então basta selecionar o objeto que você deseja animar. Então, neste caso, serão tons alternados, e as direções da rotação serão opostas, certo? Então, vou direcionar isso para a esquerda e vou configurá-lo para menos três. Ok, agora basta clicar em Life preview. Então, vai ficar assim, pessoal. Muito legal, né? Não se esqueça de salvá-lo, basta clicar em Salvar. Ok, agora vamos testar essas animações. Ok, agora vamos clicar nos botões de exibição. Como vocês podem ver, isso através do modelo foi animado, certo? Olha isso. Veja as rotações. Muito legal, né? Ok, agora vamos rolá-los um pouco. Ok, então no próximo vídeo, adicionaremos mais conteúdo a este site e também substituiremos essas imagens por nossas próprias imagens, certo? E neste projeto, estamos construindo uma landing page. Então, como vocês sabem, landing page é muito simples. Você está exibindo seu produto e também as descrições do produto, e pronto. Então, vamos remover partes desnecessárias deste site, certo? Então é isso que vamos fazer no próximo vídeo. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau. 9. Como adicionar conteúdo à landing page do produto: Santo Deus, bem-vindo de volta ao curso. Neste vídeo, adicionaremos conteúdo à página de revestimento do produto e também substituiremos as imagens do produto por nossas próprias imagens. Ok, então agora, vamos começar. A primeira coisa que faremos aqui é substituir o nome do produto pelo nome do nosso próprio produto. Ok, então neste caso, o nome do meu produto é Comfy Sneaker Então, basta substituí-lo por tênis Comfy. Ok, vamos lá. E eu vou remover isso. Tudo bem, pessoal. Então, o que vamos fazer a seguir é substituir a imagem do produto pela nossa própria imagem. Então, basta clicar em Hero Sections e clicar em Hero Photos, certo? Ok, então basta rolar um pouco e clicar em Remover imagem e clicar em Adicionar imagem e clicar em Os Image. Ok, então vou substituir a imagem do produto pela minha própria imagem. Para sua informação, gerei essa imagem usando o pessoal da IA. Ok, então eu vou selecionar a capa ou talvez o conteúdo, certo? Então, basta clicar em contido. Ok, então, a seguir, vamos mudar o efeito de iluminação desses três modelos D. Então, basta clicar em Spline scene e rolar até o final E para a mistura, vamos mudá-la de normal para cor bom, certo? Ok, agora o que vamos fazer a seguir é editar o conteúdo. Então, para facilitar, vamos primeiro esconder os três modelos D. Ok, então basta clicar em Spline Send e rolar cima e vamos para cima e vamos clicar em Mostrar todas as configurações e clicar em Oculto, certo? Ok, então não se preocupem, pessoal. No final, vamos torná-lo visível novamente, mas agora vamos editar o conteúdo, então apenas esconda isso primeiro, certo? Ok, agora basta clicar nas seções do herói e no conteúdo do herói. Basta clicar no topo do cabeçalho três. Ok, então você pode modificar isso. Eu não vou mudar nada, pessoal, mas vou mudar o nome do produto, certo? Porque nesse caso, o nome da minha marca é Comfy Sneakers, não Nike ou Jordan Então, basta clicar duas vezes nele e eu vou mudá-lo para Comfy Snikers Ok, então você pode ficar à vontade para mudar a cor do telefone. Você pode se sentir à vontade para alterar o tamanho do telefone. Depende totalmente de você. Ok, então aqui embaixo, vamos escrever as descrições dos produtos. Então, gerei uma descrição do produto usando o JA JPT. Então você pode fazer a mesma coisa, então eu vou copiar e colar isso e colocar aqui, certo? Ok, vamos lá. E aqui embaixo, temos botões de coleção C. Então, se você quiser modificar o texto, basta clicar no botão e clicar duas vezes. E vocês podem modificar esse texto, mas eu não vou mudar nada, pessoal. Tudo bem, então terminamos essas seções e agora vamos para as próximas seções Ok, agora vamos clicar em sobre as seções. Basta clicar em Sobre nós. Título da seção. Ok, então eu vou modificar esse texto. Então, obviamente, neste caso, não estamos vendendo Eri Jordan. Estamos vendendo tênis de café, certo? Então, basta substituir isso por coleções de tênis de café. Ok, então você também pode alterar esse texto. Eu só vou digitar, tipo, uma coisa aleatória aqui, pessoal. Cup in sneakers está comprometida em produzir tênis conversíveis e de alta qualidade OK. Talvez você possa adicionar o slogan do seu produto ou algo parecido Ok, então terminamos com cerca de seções. Agora vamos para as próximas seções. Então, basta clicar nas seções horizontais, clicar nas molduras. Como vocês podem ver, existem muitos itens. Portanto, cada item representa o produto que eles estão vendendo. Então, nesse caso, vamos listar apenas dois produtos nesta página de destino, então vamos excluir a maioria desses itens, certo? Então, basta excluir isso. deletar um por um, pessoal. Então, vamos deixar dois itens, certo? Ok, basta clicar aqui e primeira coisa que vamos fazer é substituir a imagem pela imagem do nosso produto. Ok, bom. Então, basta excluir Hover Div Image six e Image eight Ok, então a seguir, basta clicar no elemento e rolar um pouco para baixo. Vamos clicar em Imagem, à direita, e garantir que você coloque a imagem acima da embalagem do conteúdo. Ok, então aqui. E basta clicar duas vezes na imagem e clicar na imagem, e eu vou usar essa imagem do produto, certo? Para sua informação. Eu gerei essa imagem do produto usando IA. Ok, então se você quiser alterar o tamanho dessa imagem, você pode inserir o tamanho aqui. Ok, então terminamos com isso. Agora, vamos substituir a segunda imagem do produto pela nossa própria imagem do produto, certo? Então, vamos fazer a mesma coisa. Então, basta clicar no segundo item e excluiremos o DIF do mouse Vamos excluir a imagem nove e a imagem seis. Ok, então façam a mesma coisa, pessoal. Basta clicar nos elementos e rolá-los um pouco, e vamos clicar na imagem, certo E certifique-se de colocar a imagem acima da captura de conteúdo. Então, basta arrastar isso para o topo. Ok, vamos lá. E basta clicar duas vezes na imagem e clicar na imagem. E agora vou fazer o upload da imagem do meu produto. Então, basta clicar aqui e eu vou fazer o upload dessas imagens, certo? Tênis muito bonitos. Ok, agora ele está fazendo o upload da imagem do tênis. Então, esperem, pessoal. Espero que não demore muito. Ok, vamos lá. Você está quase pronto. Ok, muito legal. Você também pode alterar o tamanho da imagem se quiser, você pode inserir o tamanho aqui. Depende totalmente de vocês. Ok, então, a seguir, vou editar o conteúdo. Vou modificar o nome do produto. Então, neste caso, não é Eric Jordan W. Então eu vou digitar, tipo, um nome aleatório, pessoal. Tênis Lego, certo? Porque o padrão parece ego. E o preço será em dólares americanos. Então esse snicker será vendido por $120, certo? Ok, então eu também vou modificar isso. Então, o nome do produto é tênis quebra-cabeça, um nome aleatório, pessoal E o preço também será em dólares americanos. Portanto, o preço desse tênis quebra-cabeça é $85,99. Ok, agora vou mudar a cor desses planos de fundo, então basta rolar um pouco para baixo. Vou clicar aqui e vou mudar de azul escuro para azul claro, certo? Aqui vamos nós. Ok, muito legal. Ok, então terminamos com esse esporte. O que vamos fazer é remover as seções adesivas e de vídeo porque não precisamos delas, Porque estamos apenas construindo como uma landing page, e eu quero que seja simples. Então, vou deletar isso e também excluir as seções do vídeo, ok? Ok, então não esqueçam, pessoal. Anteriormente, ocultávamos o modelo T D, então agora vamos torná-lo visível novamente. Então, basta clicar na cena Spline. E basta clicar no ícone de configuração e clicar em Mostrar todas as configurações. Como vocês podem ver agora, o modelo T D está oculto, então agora vamos clicar em visível, certo? Vamos torná-lo visível novamente. Ok, então terminamos agora, basta clicar neste botão de reprodução, para ver como é a aparência do site. Então, basta clicar aqui. E vamos rolar até o topo. Ok, como vocês podem ver, esse é o modelo TD. Foi totalmente animado. E se você rolar um pouco, esta é a imagem do nosso produto e também as descrições do produto. Os tênis Cf apresentam um tênis esportivo e estilista que combina perfeitamente desempenho e flexibilidade com seu design elegante, paleta de cores vibrantes e que combina perfeitamente desempenho e flexibilidade com seu design elegante, paleta de cores vibrantes e tecnologia avançada de conforto. Esses tênis são o companheiro perfeito tanto para atividades ativas quanto para passeios casuais modernos E aqui embaixo, temos as seções sobre nós. Como vocês podem ver, esse é o slogan da minha marca. CofinSnker está comprometida em produzir tênis conversíveis e de alta qualidade, muito Nós temos o catálogo de produtos, então esses são dois produtos que estou vendendo tênis Logo e tênis quebra-cabeça O preço é de $120,80 $5,99. Ok, pessoal. Portanto, compramos com sucesso esta página de destino usando o Webflow. Muito legal, né? Ok, então eu acho que é isso, pessoal. Te vejo na próxima. 10. Como integrar e animar um modelo de pizza 3D: Santo Gás, bem-vindo de volta ao curso. Neste vídeo, vamos começar o terceiro projeto. Então, no terceiro projeto, vamos criar um site para um restaurante. Então, vamos fazer a mesma coisa, Gas. Vamos pegar o modelo TD da Spline. Em seguida, vamos integrar o modelo TD ao site e vamos animar o modelo TD Ok, então agora vamos começar. Então, nesse caso, a comida que eu vou vender é pizza, certo? Então, compre primeiro o modelo T D para pizza. Basta clicar em Biblioteca e selecionar Objetos, e eu vou digitar pizza. Ok, vamos lá. Como vocês podem ver, temos três opções. Então, eu vou selecionar este. Pizza Pizza, basta clicar nela e você será redirecionado para a página de edição do Spline Ok, então vamos fazer algumas modificações, depois vamos exportar isso por meio do modelo, certo? Vamos obter o código de incorporação. Ok, então esperem, pessoal, o processo pode levar alguns segundos. Ok, vamos lá. Então essa é a nossa pizza. Então, vou bloquear tudo isso. E se você estiver no Windows, você pode pressionar Control G. Mas se você estiver usando o Macbook Clock me, você pode pressionar Command G, certo? Ok, agora agrupamos todos os componentes. O que vamos fazer a seguir é modificar um pouco a cor, ok? Então, como vocês podem ver, a cor principal é amarela. Talvez haja muito queijo. Eu realmente não estou aqui, pessoal. Ok, então se você quiser modificar a cor, é muito fácil. Basta clicar na pizza e clicar aqui. Basta clicar na cor e você pode modificar a cor. Olha isso. Ok, então eu vou fazer isso ficar amarelo claro porque eu quero que o queijo pareça meio derretido, certo? Parece um pouco com queijo Marella, eu acho. Ok, então o que vamos fazer a seguir é mudar a cor do fundo de cinza escuro para transparente, certo? Então, basta clicar na cor Bkgroen e direcioná-la para a esquerda Ok, então, como vocês podem ver, agora o fundo é transparente. Ok, então, a seguir, basta clicar em Exportar e clicar em Configurações de reprodução, e vamos ocultar o plano de fundo. Então, basta clicar em Ocultar e clicar em Atualizar URL pública, certo? Ok, agora vamos clicar em Visão geral e obteremos o código de incorporação. Ok, então vamos lá. Então, basta clicar em FEWR porque vamos usar esse código para integrar os três modelos D ao site do Webflow, certo Então, basta clicar em Copiar Embit. Ok, então agora terminamos. Basta abrir o Google Docs. Basta colar o código aqui. Ok, então, a seguir, vamos encontrar os modelos completos molhados. Ok, então, como vocês podem ver, existem muitos modelos gratuitos para um restaurante ou café. Então, vou escolher esse modelo. Pessoal, sinta-se à vontade para escolher qualquer modelo que desejar. Esteja ciente de que existem alguns modelos que são gratuitos. Há outros que não são gratuitos. Então, se você não quer gastar dinheiro, certifique-se de selecionar o modelo gratuito, certo? Ok, então vamos usar esse modelo. Se você rolar para baixo e clicar em Informações sobre direitos autorais, como vocês podem ler aqui, podemos usá-las gratuitamente para trabalhos pessoais ou comerciais. Ok, então basta clicar em Entendi. Ok, agora vamos clonar esse modelo. Então, basta clicar em clonar no Webflow. Em seguida, seremos redirecionados para esta página. E o que faremos a seguir é clicar em Site RID e precisaremos nomear o site. Então, neste caso, vou chamá-lo de site Bits, certo? Porque essa é a comida que eu vou vender. Ok, então basta clicar em RED Site. Em seguida, seremos redirecionados para a página de edição do Webflow. Ok, então o que vamos fazer a seguir, pessoal, é integrar os três modelos, certo? O processo será exatamente o mesmo que fizemos anteriormente. Então, vamos obter esse código de incorporação. Então, vou copiar e colar esses caras, certo? Essa é a única parte que precisamos, então basta copiar isso. Ok, então vamos para a página de edição do Webflow e vamos criar uma cena Spline, e vamos criar uma cena Spline, certo? Então, vamos lá. Ok, agora basta clicar em Adicionar elemento e rolar um pouco para baixo. E nas seções de mídia, basta clicar em Spline scene. Aqui vamos nós. Ok, agora vamos copiar e colar o código de incorporação e clicar em Recarregar cena Spline Ok, então terminamos. Como vocês podem ver, integramos com sucesso esses três modelos D ao site. Ok, então o que vamos fazer a seguir é direcionar isso para o topo, certo? Ok, vamos lá. Muito legal. Ok, então o próximo. Vamos modificar esse modelo de três D, então basta rolar um pouco para baixo. Ok, então nas seções de posição, vamos mudá-la de estática para pegajosa, certo? E basta clicar em Auto. Vou selecionar 50 e 60. Ok, vamos lá. Então, agora vamos animar esse modelo de três D. Ok, então basta clicar nessa cena de Spline e clicar em Interações E vamos clicar aqui e clicar em Mouse Move na janela de exibição, certo? E basta clicar em Selecionar ações, clicar em Reproduzir animações do mouse Ok, agora basta clicar em Adicionar animações. E você precisará nomear as animações nesse caso. Vou chamá-la de Pizza Animations, certo? Você pode chamá-lo do que quiser. Depende totalmente de você. E basta pressionar Enter, clicar aqui e selecionar selecionar Spline porque obtivemos esse modelo Trini da Ok, agora é só rolar para baixo. Ok, então precisaremos selecionar o objeto que queremos animar. Então, neste caso, queremos animar esse modelo de árvore de pizza, certo? Então, basta clicar em Selecionar e eu vou selecionar o grupo, certo? Ok, então há muitas opções, pessoal. Você pode girar essa pizza no eixo x. Você pode girá-lo no eixo y. Você também pode girá-lo no eixo Z. Então, depende totalmente de vocês. Nesse caso, vou girar essa pizza no eixo y, certo? Então, vai ser assim. Vou direcionar isso para a direita. Vou configurá-lo para cinco e vamos clicar na segunda camada. Nós vamos fazer os mesmos caras. Então, basta selecionar o objeto que queremos animar. Então, neste caso, isso vai ser um grupo. E para as direções das rotações , será o oposto, certo? Então, vou direcionar isso para a esquerda. E vai ser menos cinco, certo? Ok, legal. Então, agora é só clicar. Pré-visualização ao vivo. Então, vai ficar parecido com esses caras. Muito legal, né? Assim, você poderá virar a pizza. Muito legal. Olha isso. Ok, então vou clicar em Salvar. Agora vamos testar essas animações, certo? Então, basta clicar nos botões Exibir. Ok, como vocês podem ver, essas animações estão funcionando Muito legal. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Como exemplo, no próximo vídeo, em que adicionaremos conteúdo a este site e também enviaremos nossas próprias imagens para este site, certo? Ok, então Asi está lá. Tchau. 11. Como adicionar conteúdo ao site do restaurante.: Caramba, pessoal. Bem-vindo de volta ao curso. Neste vídeo, adicionaremos conteúdo ao site deste restaurante e também substituiremos as imagens por nossas próprias imagens. Ok, agora vamos começar. A primeira coisa que vamos fazer é mudar a cor da barra de encaixe Então, basta clicar duas vezes na Barra de Nath e, como vocês podem ver , a cor é azul, então vamos mudá-la para amarela Ok, então basta clicar aqui e eu vou mudar a cor para amarelo escuro. Ok, agora vamos editar o conteúdo deste site. Então, para facilitar, vamos esconder isso por meio do modelo. Ok, então basta clicar em Spline scenes clicar nos ícones de configuração e clicar em Mostrar todas as configurações Ok, então, por enquanto, vamos esconder isso. Então, basta clicar em Oculto e, no final, vamos torná-lo visível novamente, certo? Ok, então agora vamos começar, pessoal. Ok, então vou clicar duas vezes nessa parte e vou substituí-la pelo slogan do meu restaurante, certo? Então, vai ser uma pizza espacial. Para todos. Ok, esse vai ser meu slogan, certo? E eu vou remover essa imagem. Ok, então eu vou colocar em maiúsculas, pessoal. Ok, então vamos lá. Ok, então terminamos com essas seções. Agora vamos para as próximas seções, pessoal. Então, agora vamos substituir essa imagem pela nossa própria imagem, certo? Ok, então vou remover esse texto porque acho que não precisamos disso. Então, eu vou apenas remover. I. Ok, então o que vamos fazer a seguir é substituir essa imagem pela nossa própria imagem, certo? Então, basta clicar aqui. E vamos clicar em Substituir imagem. E agora vou fazer o upload da minha própria imagem, certo? Então, basta clicar aqui e eu vou abrir minha pasta de projetos. Então, basta clicar no site da Pizza. Para sua informação, gerei essas imagens usando o pessoal da IA. Então, basta clicar em Abrir, certo? Então, agora ele está carregando a imagem. Esperem, pessoal. O processo pode levar alguns segundos. Espero que não demore muito. Ok, vamos lá. Ok, muito legal. Olha isso. Vou te dizer pizza, pessoal. Ok, agora vamos passar para as próximas seções. Ok, então aqui, vou modificar um pouco o texto. Vou mudá-lo para o DLC Spizzo para todos. Ok, então vamos para essas seções. E você pode se sentir à vontade para modificar esse imposto se quiser, mas, neste caso, vou deixá-lo como está. Ok, agora vamos passar para as próximas seções. Bem, eu realmente não acho que precisamos dessas seções, então vou remover essas seções, pessoal. Então, vou clicar em Excluir. E vamos para as próximas seções. Ok, agora vamos fazer o upload das imagens da Pizza, certo? Ok, então eu vou remover essa parte para Gus porque eu não acho que isso seja necessário. A mesma coisa com essa parte. Também vou remover essa placa. Ok, agora vamos modificar um pouco essas seções. Tudo bem, pessoal, então basta clicar aqui. Basta clicar em Petting Global e clicar no menu favorito aqui Ok, e basta clicar nessa imagem, certo? E basta clicar nesse ícone de configuração. E apenas desmarque essa caixa, pessoal. Ok, agora vamos clicar na imagem de Jo. Vou fazer o upload da minha própria imagem. Então, o primeiro menu é uma pizza com cobertura de espinafre. Ok, então basta clicar em Abrir. Então, agora ele está carregando a imagem. Então, esperem, pessoal. O processo pode levar alguns segundos. Espero que não demore muito, certo? Então, vamos exibir cerca de quatro menus aqui. Ok, muito legal. Olha isso. Ok, agora vamos fazer o mesmo com o segundo. Então, basta desmarcar essa caixa e clicar em J Image, e eu vou fazer o upload do segundo menu Então vai ser a pizza. Pizza de queijo com cobertura de frutos do mar. Ok, então basta clicar em Abrir. Agora estamos fazendo o upload da imagem. Esperem, pessoal. Ok, então a segunda imagem foi carregada com sucesso. Agora vamos fazer o mesmo com a terceira imagem. Então, basta clicar aqui e clicar no ícone de configuração, desmarcar essa caixa e clicar apenas na imagem Agora vamos fazer o upload da terceira imagem. Então, o terceiro menu é o Pizza Guys, uma pizza de queijo com cobertura de tomate Então, basta clicar em Upend. Ok, agora estamos fazendo o upload desta imagem Então, esperem, pessoal. O processo pode levar alguns segundos. Espero que não demore muito. Ok, vamos lá. A terceira imagem foi carregada com sucesso e, por fim, faremos a mesma coisa com a quarta imagem Então, basta clicar nesta imagem, clicar neste ícone de configurações e desmarcar essa caixa e clicar nessa imagem, e vamos fazer o upload da imagem Então, o quarto menu é pizza de queijo com cobertura de calabresa Então parece muito delicioso, certo? Então, basta clicar em Abrir, pessoal. Ok, agora estamos fazendo o upload da imagem. Esperem, pessoal. O processo pode levar alguns segundos. Espero que não demore muito. Ok, vamos lá. Como vocês podem ver, enviamos essas imagens com sucesso. Ok, então, a seguir, vamos modificar esses livros didáticos, Então, basta clicar duas vezes nele e vamos mudar o nome para pizza de espinha, certo? E eu também vou modificar o preço, então basta desmarcar essa caixa Ok, então o preço será de $15, certo? E você também pode adicionar, tipo, as descrições da pizza de espinafre Então, basta desmarcar essa caixa e clicar duas vezes nesses livros didáticos Então eu vou digitar, tipo, uma coisa aleatória, pessoal. Essa pizza de espinafre é feita de queijo e espinafre. Ok, então vamos fazer a mesma coisa com o segundo menu, Então, basta clicar aqui. Basta clicar nos ícones de configuração, marcar essa caixa e clicar duas vezes na caixa de texto Ok, então, como vocês podem ver, esta é uma pizza de frutos do mar, então basta digitar pizza de frutos do mar . Assim. Também vou modificar o preço, então desmarque essa caixa. E o preço será em dólares americanos. Então, a pizza de frutos do mar custa $15 ou talvez $20, certo, porque frutos do mar são um pouco mais caros Ok, agora vamos modificar a descrição dos alimentos. Então, basta clicar duas vezes nele e desmarcar essa caixa e vamos editar o texto Então eu vou digitar, tipo, uns dez caras aleatórios, pizza de frutos do mar é feita de queijo, manteiga e frutos Ok, agora vamos modificar o terceiro menu. Então, basta clicar nos ícones de configuração e marcar esta caixa. Clique duas vezes nessa caixa de texto. E como vocês podem ver, isso é pizza de tomate. Ok, agora vamos modificar o preço, clicar nos ícones de configuração e desmarcar esta caixa E o preço será em dólares americanos. A pizza de tomate vai ser um pouco mais barata, então vou vendê-la por $8, certo? Ok, agora vamos modificar as descrições dos alimentos. Então, basta desmarcar essa caixa e clicar duas vezes nos livros didáticos Então eu vou digitar, tipo , um anúncio aleatório. Esta pizza é feita de alho e tomate. Ok, agora vamos modificar o quarto menu, clique duas vezes nele, desmarque esta caixa, clique duas vezes na caixa de texto Como vocês podem ver, isso é pizza de pepperoni. Vou modificar um pouco o preço. Então, basta desmarcar esses livros. E o preço será em dólares americanos, e eu vou vender essa pizza por $12, certo? E, por fim, vou modificar as descrições dos alimentos. Então, basta desmarcar esses livros. Clique duas vezes nesses livros didáticos. Vou digitar coisas aleatórias, pessoal. Então essa pizza é feita de queijo, manteiga e calabresa. OK. Ok, então a última coisa que vamos fazer é tornar o modelo TD visível. Se você se lembra anteriormente, escondemos o modelo TD, certo? Então, vamos clicar na cena Spline, clicar nos ícones de configuração e clicar em Mostrar configurações, e mudaremos a visibilidade de oculta para visível, certo? Ok, então agora vamos clicar neste botão play. Ok, então agora vamos rolar para cima. Ok, muito legal. Olha isso, pessoal. Então, as animações estão funcionando Agora vamos rolar um pouco para baixo. Uma pizza especial para todos, certo? Então essa é uma pizza muito deliciosa, pessoal. Olha isso. Ok, então agora vamos rolar para baixo. Ok, pizza deliciosa para todos. E esse é o nosso cardápio, pessoal. Muito legal. Olha isso. Então, temos pizza de espinafre, pizza frutos do mar, pizza de tomate e pizza de calabresa Muito legal. Ok, então terminamos. Vejo vocês no próximo vídeo. Garoto. Sinto muito, pessoal. Há uma coisa que eu esqueço, pessoal. Então, se os clientes quiserem fazer um pedido, o que você vai fazer é clicar nesse botão, certo? E basta clicar nos ícones de configuração e você tem várias opções, certo? Você pode conectar esse botão ao Formulário Google. Você também pode inserir seu endereço de e-mail. Então, se alguém quiser pedir sua pizza, ele enviará um e-mail para você, ou você também pode adicionar seu número de telefone aqui. Então, se alguém quiser pedir a pizza, ele ou ela pode entrar em contato com você através deste número de telefone. Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Tchau. 12. Como criar formulário de reserva online para o site de restaurante: Olá, pessoal. Bem-vindo de volta ao curso. Neste vídeo, vamos criar um formulário de reserva on-line para o site do nosso restaurante. Ok, então agora vamos começar. Primeiro, basta clicar em Marketplace. Em seguida, clique em Visão geral. Em seguida, clique em Aplicativos. Você será redirecionado para esta página. Basta rolar um pouco para baixo. Em seguida, clique em atendimento ao cliente e Engajamento da comunidade. Em seguida, clique em Formulários e Superfície. Ok, então vamos utilizar o Typeform. Então, basta clicar nele e clicar no site da FE. Ok, então não se preocupem, pessoal. O Typeform é totalmente gratuito. Ok, então basta clicar em Começar. Portanto, você precisa do OptionsCS se inscrever usando sua Você também pode se inscrever usando sua conta da Microsoft. Portanto, depende sutilmente de você. Nesse caso, vou me inscrever usando meu GML.com, certo Então, basta clicar em Inscrever-se com o Google. Ok, vamos lá. Como vocês podem ver, fui redirecionado para o meu painel. Ok, então vou clicar em alguns planos. Como vocês podem ver, o Type Form oferece um plano gratuito. Obviamente, existem algumas limitações. Quando se trata do plano gratuito, por exemplo, você só pode ter até dez respostas, então esse é o seu limite máximo. Pessoal, certifique-se de que estão totalmente cientes dessas limitações. Ok, então agora, vamos voltar ao painel. Ok, agora basta clicar em Criar novo formulário. Você tem três opções. A primeira opção é começar do zero. A segunda opção é importar perguntas. Por exemplo, se você já tem um formulário do Google, pode usá-lo, e a terceira opção é criar o formulário usando IA. Ok, então, neste caso, vou selecionar a terceira opção. Vou criar o formulário usando IA. E não se preocupem, pessoal, o processo é muito simples. Então, primeiro, você precisará escrever o baile descrevendo o tipo de formulário que deseja criar Então, neste caso, eu quero criar um formulário de preservação on-line para pizzaria OK. Então, agora, eu vou continuar. Ok, agora você precisará especificar perguntas ou tópicos que você precisa perguntar em seu formulário. Ok, porque neste caso, estamos criando um formulário de reserva on-line para uma pizzaria, então, obviamente, precisaremos perguntar seu nome, seu endereço de e-mail. Número de telefone, porque precisamos entrar em contato com eles. O que mais? Tipo de pizza. Porque queremos saber que tipo de pizza você quer pedir. Por fim, também queremos saber quando eles chegarão, certo? Ok, agora vou clicar em Gerar quatro. Ok, então basta clicar nisso. O processo pode levar alguns segundos, pessoal. Espero que não demore muito. Então, espere. Ok, agora o Typeform está gerando o formulário para nós. Ok, então esse é o formulário, pessoal. É como a primeira página. Qual é o seu nome? Essa é a segunda página. Qual é o seu endereço de e-mail? Essa é a terceira página. Qual é o seu número de telefone? E esta é a terceira página. Que tipo de pizza você gostaria de reservar, e esta é a quinta página. Quando você chegará ao restaurante? Ok, agora vamos fazer algumas modificações neste formulário. Então, basta clicar aqui. Como vocês podem ver agora, isso ainda é opcional, e eu quero que seja obrigatório Então, basta ativar isso. Ok, então vamos fazer a mesma coisa com o e-mail. Portanto, faça com que seja necessário. E também faremos a mesma coisa com o número de telefone. Também faça com que seja necessário. E para o tipo de pizza, vou alterar o tipo de dados do menu suspenso para múltipla escolha. Ok, então vamos ter umas quatro opções, certo? Se você se lembra, temos cerca de quatro menus, certo? Então, o primeiro é o SinuchPizza. Então, basta digitar Spina pizza, pessoal. A segunda opção é pizza de frutos do mar. Então, basta digitar pizza de frutos do mar. A terceira opção é pizza de tomate, então basta digitar pizza de tomate. E a terceira opção é pizza de pepperoni, certo? Então, basta tocar na pizza de calabresa. Aqui vamos nós. Ok, então se você quiser adicionar mais opções, basta clicar em adicionar opção. Ok, agora é só clicar aqui. E, por fim, vou alterar o tipo de dados de calently para date. Então, basta clicar na data. Então, nesse caso, o cliente vai inserir a data em que chegará ao restaurante, certo? Ok, então acho que terminamos. Agora, basta clicar em Publicar. Ok, como vocês podem ver, publicamos este formulário com sucesso, certo? Então, agora é só clicar aqui. Vocês têm duas opções, pessoal. Portanto, a primeira opção é integrar o código ao seu site Webflow Então, basta clicar em incorporar em uma página da web e clicar em Iniciar incorporação E, nesse caso, estamos construindo o site usando o Webflow, então basta clicar em Webflow Então você pode copiar esse código e depois colá-lo nas seções do código incorporado, certo? Então, basta clicar aqui e rolar um pouco para baixo e clicar em Incorporar código No entanto, esse filtro não está disponível para os usuários do plano gratuito. Então, infelizmente, se vocês estão no plano gratuito, pessoal, não conseguem usar esse filtro, certo? Mas não se preocupem, pessoal. Há outra alternativa, certo? Então essas são as primeiras opções. Você precisará ter um plano básico, certo? E isso vai te custar cerca de $14 por mês. No entanto, se você estiver no plano gratuito, não se preocupe. Há outras opções. Ok, então basta clicar em Compartilhar o link e copiar esse link, pessoal. Tudo bem? Basta copiar este link. E vamos voltar para a página de edição do Webflow. E basta rolar para baixo. E basta clicar nesse botão, pessoal, certo? Basta clicar nesse botão e clicar nesses ícones de configuração. E o que você precisa fazer é copiar e colar o link aqui. Ok, então se o cliente clicar nesse botão, ele ou ela será redirecionado para o formulário, Então, vamos testar isso. Vou publicar este site, então basta clicar em Publicar no domínio selecionado. Ok, então pode levar alguns segundos para publicar este site, pessoal. Então, espere. Ok, como vocês podem ver, este site foi publicado. Então, agora basta clicar aqui. Ok, então esse é o site, pessoal. Ok, então este é o modelo T D. E como vocês podem ver, a animação ainda está funcionando. Ok, muito legal. Então, agora, se você clicar nesse botão, faça um pedido. Então, basta clicar aqui e você será redirecionado para o formulário de reserva on-line Ok, então qual é o seu nome? Vou digitar meu nome, Chris. Qual é o seu endereço de e-mail? Então, vou digitar meu endereço de e-mail. Aqui vamos nós. Qual é o seu número de telefone? Apenas um número de telefone aleatório, pessoal. Ok, então qual tipo de pizza, o que você gostaria de reservar? Ok, então eu quero comer alimentos saudáveis, então vou escolher uma pizza de espinafre Ok, então quando você vai chegar ao restaurante. Ok, então neste mês 25 ou talvez 27 de 2024 este ano Ok, então basta clicar em Enviar. Ok, enquanto vocês lêem, obrigado por preencher este Typeform E recebi as notificações do pessoal do meu e-mail. Muito legal, né? Ok, então é assim que você cria um formulário de reserva on-line, pessoal. Ok, agora, vamos voltar ao painel do Formulário de Tipo e clicar em Resultado. Como vocês podem ver, temos uma resposta aqui. Isso é para mim, certo? Ok, pessoal, acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo, onde vamos otimizar o SEO. Então, vejo vocês lá. Tchau. 13. Como conduzir uma auditoria de SEO com SEOptimer e Semrush: Santo Deus, bem-vindo de volta ao curso. Neste vídeo, vamos realizar uma auditoria de SEO em nosso site. Portanto, as ferramentas que vamos usar são otimizadores de SEO e Você pode estar se perguntando qual é o objetivo de realizar uma auditoria de SEO? Bem, o objetivo é avaliar o desempenho do site e também identificar áreas de melhoria na otimização de mecanismos de pesquisa Esse processo ajuda as empresas a melhorar a visibilidade, experiência do usuário e a presença on-line geral. Ok, não, vamos começar, pessoal. E não se preocupe. O processo é muito simples Tudo o que você precisa fazer é publicar seu site Webflow. Então, basta clicar em Publicar. Nesse caso, eu já publiquei este site, copie e cole o URL, copie e cole o link para este site e coloque-o aqui, certo? E basta clicar nele. Ok, pessoal, o processo pode levar alguns segundos. Espero que não demore muito. Vou pular essa parte e retornarei assim que o processo for concluído Tudo bem, pessoal. Então, aqui está o resultado. A pontuação geral é C. E aqui embaixo, temos o detalhamento. Portanto, para o SEO não pago, a pontuação é C menos para o link A pontuação é uma vantagem para a usabilidade. A pontuação é C para o desempenho, a pontuação é A mais e, para o social, a pontuação é F. Você pode estar se perguntando por quê? Bem, porque não adicionamos contexto de mídia social ao site, pessoal. Essa é a razão pela qual obtivemos F. Ok, então existem 23 recomendações para melhorar o SEO, então basta clicar aqui Como vocês podem ver aqui, temos muitas recomendações. Portanto, a primeira é incluir um texto de descrição do método. Isso é de alta prioridade. E a segunda é implementar um arquivo TXT de robô. Essa é uma prioridade média na tecnologia canônica. Também é de prioridade média. O que mais? Remova o texto H um duplicado, prioridade média. E também temos outras recomendações, por exemplo, adicionar todos os atributos a todas as imagens, mas isso é de baixa prioridade, certo? Crie e vincule sua página do Facebook, crie e vincule seu perfil do Twitter. E esses dois também são de baixa prioridade, pessoal. Ok, agora vamos usar SMRs para fazer auditoria de SEO. Ok, então basta acessar este site, sembrs.com slash Site audit, e nós vamos fazer a mesma coisa Então, basta copiar e colar a URL no seu site, certo? E basta colocar o link aqui e clicar em Iniciar auditoria. E não se preocupe, é totalmente gratuito. Ok, agora basta clicar em Iniciar auditoria do site. Ok, então o processo pode levar alguns minutos, pessoal. Espero que não demore muito, então espere. Tudo bem, pessoal, então aqui está o resultado. A saúde do site é de 89%, o que é muito bom, na minha opinião Não há erros, 24 avisos, 100% de capacidade. Para os anúncios DTPS, é 99%. Ok, então para o desempenho paralelo, é de 98%, o que é muito bom Para a vinculação interna, é 100%. Para as marcações, ela ainda não foi implementada. E a mesma coisa para os principais violinos da web. Também não foi implementado ainda, pessoal. Ok, então esse é o resultado? Acho que é isso, pessoal. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. 14. Como criar um site de perfil da empresa com o construtor de sites de IA do Webflow: Caramba, pessoal. Bem-vindo de volta ao curso. Neste vídeo, vamos criar um site de perfil de empresa usando o AI Site Builder. Este é um dos mais novos alimentadores do Webflow. Ok, vamos começar. Primeiro, você precisará fazer o login e vamos escrever o baile Crie um site de perfil de empresa para o serviço de gerenciamento de Wat. Esta empresa oferece três serviços principais. O primeiro é o Way Set up três vezes por semana. A segunda superfície é reciclagem de resíduos, o descarte de resíduos médicos. Torne o design da interface do usuário moderno, estilista e profissional Ok, então esse é o meu baile de formatura, um baile muito simples E vamos clicar em Gerar OK, agora a IA vai gerar o site. E aqui está a estrutura do seu site. E vamos clicar em Gerar site. Ok, agora a IA está construindo o site. Isso levará alguns minutos, talvez dois ou 3 minutos. Então esperem, pessoal. Espero que não demore muito e estou super animada para ver o resultado Bem, não demorou muito, pessoal. Demorou apenas um minuto ou até menos de um minuto. Ok, então aqui está o site. Ok, olhem isso, pessoal. Então, aqui está a página de edição. Você pode editar o site. Você pode editar o texto. Você pode alterar a imagem. Você pode alterar a cor do Bground. Você pode fazer o que quiser. Depende totalmente de você. E você também pode mudar as equipes, certo? Você pode personalizá-lo como quiser. Ok, agora vamos rolar um pouco para baixo. Então, aqui está o site, gerenciamento de resíduos, garantia de conformidade, coleta profissional, reciclagem e descarte médico para empresas, soluções confiáveis, compatíveis e com foco ecológico, adaptadas às suas operações Ok, muito legal. Portanto, temos dois botões aqui, solicitar orçamento e alguns serviços. Eu gosto muito desse estilo. Olha isso. O gerenciamento moderno de resíduos simplifica. Por isso, destaca todos os serviços essa empresa tem a oferecer. Por exemplo, coleta programada de lixo, serviços avançados de reciclagem, gerenciamento de resíduos hospitalares. Ok, muito legal. E também mostra algumas estatísticas aqui, o que é muito importante. Vamos rolar para baixo. E na parte inferior, também temos as seções Q e oito. Ok, muito legal, pessoal. Eu acho que é isso. Isso é tudo que você precisa saber. Vejo vocês no próximo vídeo. Garoto. 15. Conclusão e resumo: Holi, pessoal, bem-vindos de volta ao curso. Neste vídeo, vou resumir tudo o que aprendemos neste curso e também vou ver nossas dicas e truques V sobre como melhorar a qualidade do seu site Ok, vamos começar com o primeiro tópico, SEO ou otimização de mecanismos de pesquisa Portanto, você precisa implementar práticas amigáveis de SEO, incluindo o uso adequado de metatextos, URLs descritivos e DTML semântico Isso ajuda o mecanismo de pesquisa a entender e indexar o conteúdo de forma eficaz. Portanto, se você quiser aumentar o tráfego para seu site, precisará garantir que seu site seja fácil de descobrir. Uma das formas mais eficazes é otimizar a palavra-chave. Use a palavra-chave certa. Por exemplo, você pode usar ferramentas como eTRF e simplesmente digitar a palavra-chave Por exemplo, gerenciamento de resíduos e basta clicar em Encontrar palavras-chave. E o AdSrf exibirá todas as palavras-chave otimizadas para você exibirá todas as palavras-chave otimizadas para Ok, aqui está a lista de palavras-chave e você pode ver a dificuldade das palavras-chave. Portanto, ele fornece indicações sobre como é difícil se classificar entre os dez melhores resultados de pesquisa orgânica. E você também pode ver o volume. Então, isso é como o volume de pesquisa. Portanto, se você usar a palavra-chave certa, terá maior probabilidade se classificar na Pesquisa do Google. Ok, agora vamos voltar ao mapa mental e falar sobre o segundo tópico Três integrações do modelo D. Você precisa garantir que os três modelos D sejam responsivos e se adaptem bem a diferentes tamanhos de tela Teste o modelo em vários dispositivos para garantir uma apresentação consistente e visualmente atraente Para técnicas de incorporação, você tem duas opções. Você pode usar o código personalizado do Webflow ou pode se integrar com visualizadores terceirizados, especialmente se você adicionar animações ao seu modelo de três D dessa forma, você precisa ter certeza de que a animação está funcionando totalmente E se você estiver usando o Spline para obter seus três modelos D, é muito importante verificar o formato do arquivo pois nem todos os formatos de arquivo são compatíveis com o Webflow Ok, agora vamos para o terceiro tópico. Tipografia, melhores práticas. Ok, você precisa prestar muita atenção às opções de tipografia, incluindo estilo, tamanhos e espaçamento divertidos Texto consistente e legível melhora a legibilidade e contribui para um Além disso, você também precisa garantir o contraste das cores. Por exemplo, se o fundo for preto, não use cores escuras para o texto. Não use marrom ou cinza, pois será difícil para as pessoas lerem seu texto. Certifique-se de usar cores claras como branco, amarelo ou laranja. E você também precisa evitar a sobrecarga decorativa. Não adicione muitas coisas ao seu site pois isso pode confundir as pessoas. Ok, então esse é o fim do curso. Muito obrigado e desejo a você tudo de bom. Tchau