InícioSuporte
InícioSuporteLinks
Entrar
  1. Formação em Vibe Coding
  3. Framer
Nossa primeira landing page

Construindo uma landpage com os componentes do Framer

Acesso Restrito

Faça login para acessar o conteúdo desta aula.

Fazer loginVoltar para o curso
AnteriorPróxima

Copyright ©2026 - Todos os direitos reservados
Feito com ☕ e alguns bilhões de tokens de IA

Framer
Progresso do Módulo
0 de 140 aulas concluídas
Introdução ao módulo
O que é Framer?
Por que usar o Framer?
Planos e preços do Framer
Criando uma conta no Framer
Instalando o Framer (opcional)
Conhecendo o Dashboard
Novo projeto e conhecendo a interface - Page
Layers
Assets
Menu
Canvas Pages
Insert - Pages
Insert - Sections
Insert - Navigation
Insert - Menus
Insert - CMS
Insert - Elements Criative
Insert - Elements Media
Insert - Elements Forms
Insert - Elements Icons
Insert - Elements Interactive
Insert - Elements Social
Insert - Elements Utility
Layout
Text
Actions
Renomear projeto
Ver quem está no projeto
Localization
Settings
Preview
Invite
Publish
Barra Ferramentas inferior
IA do Framer
Graphic
Position
Stack Layout
Size
Entendendo o processo Layout Stack
Layout Grid
Componentes
Variantes
Variáveis
Estilizando elementos
Sticky
Styles
Entendendo a estrutura de uma Landing Page
Construindo uma landpage com os componentes do Framer
Estilizando Navbar
Estilizando NavBar - Botão CTA
Estilizando Cabeçalho
Responsividade
Publicando - projeto
Introdução ao Projeto completo do zero
Criando página de Estilo
Estilizando cores
Estilizando Tipografia
Instalando plugin Figma HTML Framer
Criando a Navbar - Logo componente
Criando a Navbar - Menu links
Criando a Navbar - Botão CTA
Criando a Navbar - Hover e pressed
Criando a Hero Section Titulo - importando elementos do Figma
Criando a Hero Section Titulo - criando direto no Framer
Criando a Hero Section Titulo Estilizando
Criando a Hero Section Elementos VIsuais
Ajustes e Travando a NavBar
Seção de logos empresas com scroll horizontal
Primeira seção de Beneficios
Mudando o cursor do mouse na seção
Segunda seção de Beneficios - animação scroll duplo
Terceira seção de benefícios - elementos com posição absolute
Terceira seção de benefícios - estilizando
Seção de Benefícios - gestão de equipe
Seção de Depoimentos
Seção de Planos
Seção de Planos - transição de seções por navegação
8ª Seção de CMS - Blog Editando e criando um post
Página Blog- Criando Card
Puxando os dados do CMS
Botões Filtro Blog
Variantes filtro Tag blog
Ajustes
Página do destino post
Direcionando outra página destino post
Seção Perguntas Frequentes (efeito accordion)
Seção Rodapé
Link no Botão
Menu Mobile
Responsividade Tablet - Hero Section
Responsividade Tablet - primeira seção beneficios
Responsividade Tablet - Segunda seção de Beneficios
Responsividade Tablet - Terceira seção de benefícios
Responsividade Tablet - Quarta Seção de Benefícios
Responsividade Tablet - Seção de Depoimentos
Responsividade Tablet - Seção de Planos
Responsividade Tablet - Seção do Blog
Responsividade Tablet - Seção Perguntas Frequentes
Responsividade Tablet - Seção Rodapé
Responsividade Mobile - Hero Section
Responsividade Mobile - Logo Empresas
Responsividade Mobile - primeira seção beneficios
Responsividade Mobile - Segunda seção de Beneficios
Responsividade Mobile - Terceira seção de benefícios
Responsividade Mobile - Quarta Seção de Benefícios
Responsividade Mobile - Seção de Depoimentos
Responsividade Mobile - Seção de Planos
Responsividade Mobile - Seção do Blog
Responsividade Mobile - Seção Perguntas Frequentes
Responsividade Mobile - Seção Rodapé
Responsividade Mobile - Ajustes finais de responsividade para tela menor
Drag (efeito arrasta e solta)
Scroll Variant para efeito "modo leitura"
Scroll Horizontal (efeito Scroll transform)
Efeito stick (empilhar cards no scroll)
Textos Animados
Smooth scroll (rolagem suave da página)
Animar elementos no carregamento
Animar elementos no scroll
Slideshow
Carousel
Search
Extensão Chrome HTML to Framer
Senha no Site
SEO do site
Traduzir seu Site
Analytics
Domínio personalizado (Custom Domain)
Tipos de Inputs
Opções de customização do formulário
Conectando Email
Conectando Planilha do Google
Webhook
Redirecionar para página de obrigado
Framer Marketplace
Framer Community
Final do Módulo
Avaliação do Módulo