Início
Início
Entrar
  1. Formação em Vibe Coding
  3. Framer
Projeto completo do zero - Página CMS (Blog)

Botões Filtro Blog

Crie botões de filtro dinâmicos para seu blog, personalizando estilo e funcionalidade, e aprenda a implementar um sistema de filtragem eficiente em seus projetos.

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ódulo3 min
O que é Framer?7 min
Por que usar o Framer?5 min
Planos e preços do Framer6 min
Criando uma conta no Framer1 min
Instalando o Framer (opcional)1 min
Conhecendo o Dashboard5 min
Novo projeto e conhecendo a interface - Page4 min
Layers2 min
Assets2 min
Menu3 min
Canvas Pages1 min
Insert - Pages4 min
Insert - Sections3 min
Insert - Navigation2 min
Insert - Menus1 min
Insert - CMS1 min
Insert - Elements Criative3 min
Insert - Elements Media2 min
Insert - Elements Forms1 min
Insert - Elements Icons3 min
Insert - Elements Interactive8 min
Insert - Elements Social1 min
Insert - Elements Utility1 min
Layout3 min
Text2 min
Actions1 min
Renomear projeto1 min
Ver quem está no projeto1 min
Localization1 min
Settings2 min
Preview1 min
Invite1 min
Publish2 min
Barra Ferramentas inferior2 min
IA do Framer8 min
Graphic4 min
Position6 min
Stack Layout9 min
Size4 min
Entendendo o processo Layout Stack13 min
Layout Grid8 min
Componentes7 min
Variantes5 min
Variáveis7 min
Estilizando elementos8 min
Sticky4 min
Styles5 min
Entendendo a estrutura de uma Landing Page8 min
Construindo uma landpage com os componentes do Framer9 min
Estilizando Navbar6 min
Estilizando NavBar - Botão CTA4 min
Estilizando Cabeçalho8 min
Responsividade11 min
Publicando - projeto3 min
Introdução ao Projeto completo do zero5 min
Criando página de Estilo3 min
Estilizando cores7 min
Estilizando Tipografia10 min
Instalando plugin Figma HTML Framer7 min
Criando a Navbar - Logo componente5 min
Criando a Navbar - Menu links9 min
Criando a Navbar - Botão CTA6 min
Criando a Navbar - Hover e pressed2 min
Criando a Hero Section Titulo - importando elementos do Figma9 min
Criando a Hero Section Titulo - criando direto no Framer10 min
Criando a Hero Section Titulo Estilizando8 min
Criando a Hero Section Elementos VIsuais10 min
Ajustes e Travando a NavBar5 min
Seção de logos empresas com scroll horizontal9 min
Primeira seção de Beneficios10 min
Mudando o cursor do mouse na seção3 min
Segunda seção de Beneficios - animação scroll duplo8 min
Terceira seção de benefícios - elementos com posição absolute10 min
Terceira seção de benefícios - estilizando5 min
Seção de Benefícios - gestão de equipe9 min
Seção de Depoimentos6 min
Seção de Planos10 min
Seção de Planos - transição de seções por navegação12 min
8ª Seção de CMS - Blog Editando e criando um post5 min
Página Blog- Criando Card10 min
Puxando os dados do CMS3 min
Botões Filtro Blog6 min
Variantes filtro Tag blog10 min
Ajustes2 min
Página do destino post5 min
Direcionando outra página destino post4 min
Seção Perguntas Frequentes (efeito accordion)12 min
Seção Rodapé12 min
Link no Botão7 min
Menu Mobile10 min
Responsividade Tablet - Hero Section4 min
Responsividade Tablet - primeira seção beneficios1 min
Responsividade Tablet - Segunda seção de Beneficios1 min
Responsividade Tablet - Terceira seção de benefícios8 min
Responsividade Tablet - Quarta Seção de Benefícios2 min
Responsividade Tablet - Seção de Depoimentos1 min
Responsividade Tablet - Seção de Planos4 min
Responsividade Tablet - Seção do Blog9 min
Responsividade Tablet - Seção Perguntas Frequentes4 min
Responsividade Tablet - Seção Rodapé5 min
Responsividade Mobile - Hero Section7 min
Responsividade Mobile - Logo Empresas1 min
Responsividade Mobile - primeira seção beneficios5 min
Responsividade Mobile - Segunda seção de Beneficios3 min
Responsividade Mobile - Terceira seção de benefícios8 min
Responsividade Mobile - Quarta Seção de Benefícios4 min
Responsividade Mobile - Seção de Depoimentos2 min
Responsividade Mobile - Seção de Planos2 min
Responsividade Mobile - Seção do Blog5 min
Responsividade Mobile - Seção Perguntas Frequentes3 min
Responsividade Mobile - Seção Rodapé6 min
Responsividade Mobile - Ajustes finais de responsividade para tela menor12 min
Drag (efeito arrasta e solta)9 min
Scroll Variant para efeito "modo leitura"9 min
Scroll Horizontal (efeito Scroll transform)11 min
Efeito stick (empilhar cards no scroll)3 min
Textos Animados5 min
Smooth scroll (rolagem suave da página)3 min
Animar elementos no carregamento8 min
Animar elementos no scroll3 min
Slideshow6 min
Carousel3 min
Search4 min
Extensão Chrome HTML to Framer9 min
Senha no Site7 min
SEO do site6 min
Traduzir seu Site7 min
Analytics2 min
Domínio personalizado (Custom Domain)6 min
Tipos de Inputs8 min
Opções de customização do formulário11 min
Conectando Email5 min
Conectando Planilha do Google3 min
Webhook5 min
Redirecionar para página de obrigado2 min
Framer Marketplace5 min
Framer Community3 min
Final do Módulo2 min
Avaliação do Módulo