68. Inserindo uma busca interna no site

Descrição

Comentários

Eu, Henrique, mostro como usar a busca nativa do Framer dentro de um projeto com CMS e como deixá-la visualmente mais atraente sem código. Ensino a inserir o componente Search, escolher o alcance (scope) para limitar a busca a páginas ou CMS específicos e testar os três modos nativos: sidebar, top (barra fixa) e quick menu (modal central). Explico também que a busca só funciona após publicar o site, que ela é rápida e prática, mas tem a limitação de só conseguir apontar para um CMS por vez se estiver sem escopo definido. Em seguida eu ensino um bisu: criar uma barra de busca fake que funciona como "gatilho" visual. A técnica consiste em duplicar o ícone/lupa, transformar o botão em componente, ajustar para absolute com offsets zero, setar z-index e travar camadas para que qualquer clique abra a busca nativa. Personalizo placeholder, cores e hover para ficar mais bonito e mostro como testar no navegador. Finalizo avisando que essa solução é válida e funcional para blogs e sites com CMS, e que na próxima aula vamos avançar usando o plugin Superfields para uma busca mais profissional. Termos técnicos (explicação rápida): - CMS: sistema para gerenciar conteúdo do site (posts, páginas, produtos). - Scope: alcance da busca — onde o Framer vai procurar (páginas ou coleções específicas). - Modal/quick menu: janela central que aparece sobre a página para buscar. - Sidebar: painel lateral que abre para mostrar resultados. - Widget/container: bloco que contém os resultados visuais. - Placeholder: texto guia dentro do campo de busca que some quando você digita. - Overlay: camada visual que fica por cima de outros elementos (efeitos de hover/estado). - Relative/Absolute: posicionamento de camadas; absolute posiciona elemento em relação ao pai com offsets. - z-index (index): valor que define a sobreposição das camadas. - Plugin Superfields: complemento pago para Framer que amplia capacidades de CMS e busca.

Comentários

Descrição

Comentários

Eu, Henrique, mostro como usar a busca nativa do Framer dentro de um projeto com CMS e como deixá-la visualmente mais atraente sem código. Ensino a inserir o componente Search, escolher o alcance (scope) para limitar a busca a páginas ou CMS específicos e testar os três modos nativos: sidebar, top (barra fixa) e quick menu (modal central). Explico também que a busca só funciona após publicar o site, que ela é rápida e prática, mas tem a limitação de só conseguir apontar para um CMS por vez se estiver sem escopo definido. Em seguida eu ensino um bisu: criar uma barra de busca fake que funciona como "gatilho" visual. A técnica consiste em duplicar o ícone/lupa, transformar o botão em componente, ajustar para absolute com offsets zero, setar z-index e travar camadas para que qualquer clique abra a busca nativa. Personalizo placeholder, cores e hover para ficar mais bonito e mostro como testar no navegador. Finalizo avisando que essa solução é válida e funcional para blogs e sites com CMS, e que na próxima aula vamos avançar usando o plugin Superfields para uma busca mais profissional. Termos técnicos (explicação rápida): - CMS: sistema para gerenciar conteúdo do site (posts, páginas, produtos). - Scope: alcance da busca — onde o Framer vai procurar (páginas ou coleções específicas). - Modal/quick menu: janela central que aparece sobre a página para buscar. - Sidebar: painel lateral que abre para mostrar resultados. - Widget/container: bloco que contém os resultados visuais. - Placeholder: texto guia dentro do campo de busca que some quando você digita. - Overlay: camada visual que fica por cima de outros elementos (efeitos de hover/estado). - Relative/Absolute: posicionamento de camadas; absolute posiciona elemento em relação ao pai com offsets. - z-index (index): valor que define a sobreposição das camadas. - Plugin Superfields: complemento pago para Framer que amplia capacidades de CMS e busca.

Comentários

Descrição

Comentários

Eu, Henrique, mostro como usar a busca nativa do Framer dentro de um projeto com CMS e como deixá-la visualmente mais atraente sem código. Ensino a inserir o componente Search, escolher o alcance (scope) para limitar a busca a páginas ou CMS específicos e testar os três modos nativos: sidebar, top (barra fixa) e quick menu (modal central). Explico também que a busca só funciona após publicar o site, que ela é rápida e prática, mas tem a limitação de só conseguir apontar para um CMS por vez se estiver sem escopo definido. Em seguida eu ensino um bisu: criar uma barra de busca fake que funciona como "gatilho" visual. A técnica consiste em duplicar o ícone/lupa, transformar o botão em componente, ajustar para absolute com offsets zero, setar z-index e travar camadas para que qualquer clique abra a busca nativa. Personalizo placeholder, cores e hover para ficar mais bonito e mostro como testar no navegador. Finalizo avisando que essa solução é válida e funcional para blogs e sites com CMS, e que na próxima aula vamos avançar usando o plugin Superfields para uma busca mais profissional. Termos técnicos (explicação rápida): - CMS: sistema para gerenciar conteúdo do site (posts, páginas, produtos). - Scope: alcance da busca — onde o Framer vai procurar (páginas ou coleções específicas). - Modal/quick menu: janela central que aparece sobre a página para buscar. - Sidebar: painel lateral que abre para mostrar resultados. - Widget/container: bloco que contém os resultados visuais. - Placeholder: texto guia dentro do campo de busca que some quando você digita. - Overlay: camada visual que fica por cima de outros elementos (efeitos de hover/estado). - Relative/Absolute: posicionamento de camadas; absolute posiciona elemento em relação ao pai com offsets. - z-index (index): valor que define a sobreposição das camadas. - Plugin Superfields: complemento pago para Framer que amplia capacidades de CMS e busca.

Comentários
Inserindo uma busca interna no site
Framer
0:00-0:00
Especialista

Henrique Sabino

Wama e Elogiou

Olá 👋,

aluno(a)

Aqui é o Will, em que posso ajudar?

Sugestões & Feedbacks