Início

Botões Filtro Blog | Formação em Vibe Coding | ibe.IA

Formação em Vibe Coding
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 login Voltar para o curso

Anterior Pró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

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

Renomear projeto1 min

Ver quem está no projeto1 min

Localization1 min

Barra Ferramentas inferior2 min

IA do Framer8 min

Stack Layout9 min

Entendendo o processo Layout Stack13 min

Layout Grid8 min

Componentes7 min

Variáveis7 min

Estilizando elementos8 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

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

Extensão Chrome HTML to Framer9 min

Senha no Site7 min

SEO do site6 min

Traduzir seu Site7 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

Redirecionar para página de obrigado2 min

Framer Marketplace5 min

Framer Community3 min

Final do Módulo2 min

Avaliação do Módulo