O próprio widget de Pesquisa do Elementor precisa do Elementor Pro, então a maioria dos sites acaba presa a qualquer caixa de pesquisa que o tema forneça O gratuito Pesquisar widget em Complementos Mestres para Elementor preenche essa lacuna Solte-a em qualquer lugar de uma página ou em um cabeçalho e, em seguida, escolha um formulário de pesquisa clássico ou um pop-up de ícone que expanda com o clique. A entrada e o botão são estilizados no painel Elementor, sem nenhum CSS envolvido.
Veja como ambos os layouts do Widget de pesquisa de elementor trabalhe, configurando por configuração, além do que os visitantes realmente veem na página ao vivo.
O que o widget Pesquisa faz #
O widget gera um formulário de pesquisa do WordPress como um elemento Elementor Os visitantes digitam uma consulta, pressionam Enter ou clicam no controle de envio e pousam na página de resultados de pesquisa padrão do seu site, portanto, os resultados vêm do próprio WordPress e renderizam através do tema Você escolhe como o formulário parece: um campo de entrada completo com um ícone ou botão de texto, ou um ícone de pesquisa solitário que se expande para uma tela de pesquisa pop-up.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo Precisa de ajuda? veja o guia instalação.
- O elemento Pesquisar ativado no painel de complementos mestre se você já tiver desativado os widgets.
Como adicionar o widget Pesquisa Elementor #
Abra o editor Elementor e procure Procurar no painel Elementos, ou role para a seção Complementos Mestres (procure o emblema MA).Arraste o widget para sua página Um formulário de pesquisa de trabalho aparece imediatamente com um ícone de lupa como o controle de envio.
Configure a guia Conteúdo #
O Conteúdo tab detém uma decisão principal mais alguns campos que seguem a partir dele O Tipo o dropdown alterna entre os dois layouts: Formulário e Pop-up de ícones.
Tipo: Formulário #
Formulário é o layout clássico, um campo de entrada com um controle de envio à direita. O Enviar tipo de botão dropdown decide qual é esse controle:
- Ícone: mostra um botão de ícone Escolha o ícone na biblioteca abaixo; a lupa padrão funciona para quase todos os designs.
- Botão: mostra um botão de texto em vez disso. A Texto Botão o campo aparece onde você digita o rótulo, como Pesquisar ou Pressionar Enter.
Tipo: Ícone Popup #
O Popup de Ícones renderiza apenas um ícone de pesquisa Quando um visitante clica nele, uma tela de pesquisa se abre sobre a página com um grande campo de entrada e um botão de fechamento Este é o layout a ser usado em cabeçalhos e barras de navegação onde um campo de pesquisa completo lotaria o menu.
Escolhendo o Icon Popup revela o Configurações pop-up seção com dois campos:
- Texto de entrada: o espaço reservado dentro do campo de pesquisa do popup, “Search ...” por padrão.
- Descrição: uma linha auxiliar sob o campo, como “Hit enter para pesquisar ou clique em X para fechar.”
Estile o widget na guia Estilo #
O Estilo tab tem duas seções: Formulário para a área de entrada e Botão para o controle de envio.
Formulário #
A seção Formulário estiliza o wrapper e o campo de entrada:
- Antecedentes: uma cor por trás do formulário.
- Largura: a largura do formulário em pixels. Handy quando o widget fica em uma coluna larga e você deseja uma caixa de pesquisa mais apertada.
- Margem de formulário e preenchimento de formulário: espaçamento fora e dentro do invólucro.
- Tipo de fronteira e raio de fronteira: a moldura ao redor da forma e quão arredondados são seus cantos.
- Tipografia e Cor: a fonte e a cor do texto da entrada.
- Cor de entrada do formulário: a cor de fundo do próprio campo de entrada.
Botão #
A seção Botão estiliza o controle de envio, seja um ícone ou um botão de texto:
- Cor de fundo: o preenchimento atrás do botão.
- Cor: o ícone ou cor do texto.
- Preenchimento e margem: o espaçamento interno e externo do botão.
- Tipografia: família, tamanho e peso da fonte para o texto do botão.
Uma nota de dimensionamento: a altura do botão segue o formulário, portanto, se o texto do botão parecer apertado após uma mudança no tamanho da fonte, adicione um pequeno preenchimento vertical no lado do Formulário, em vez de lutar apenas contra o preenchimento do botão.
Veja o resultado ao vivo #
Publique a página e tente o formulário Clique no campo, digite uma consulta e pressione Enter ou aperte o botão enviar.
O WordPress assume a partir daí e mostra as postagens e páginas correspondentes no modelo de resultados de pesquisa do seu tema:
Casos de uso comum #
- Pesquisa de cabeçalho: use o Icon Popup ao lado do menu de navegação para que a pesquisa esteja a um clique de distância sem comer espaço no menu.
- Barra lateral do blog ou páginas de arquivo: uma caixa de pesquisa do tipo Formulário ajuda os leitores a vasculhar postagens mais antigas.
- 404 páginas: um formulário de pesquisa é a coisa mais útil que você pode colocar em uma página que diz “not found.”
- Documentação e bases de conhecimento: coloque um formulário de pesquisa amplo na frente e no centro para que os usuários pesquisem antes de rolar.
Dicas para uma melhor barra de pesquisa #
- Combine a cor do botão com a cor de destaque do seu tema. Um botão de pesquisa que se parece com todos os outros botões do site é mais usado.
- Mantenha o espaço reservado curto. “Search ...” vence uma frase completa que é cortada no celular.
- Use o Icon Popup em layouts apertados. Um formulário de pesquisa completo espremido em uma coluna de cabeçalho tende a ser embrulhado desajeitadamente nas larguras dos tablets.
- Teste a página de resultados. O widget entrega a consulta ao WordPress, portanto, verifique se o modelo de resultados de pesquisa do seu tema parece apresentável antes de promover a caixa de pesquisa.
Vídeo Tutorial #
Se você quiser ver o widget Pesquisa em ação, este vídeo percorre a configuração completa, desde o primeiro arrasto até os resultados da pesquisa na página ao vivo:
Perguntas frequentes #
Como adiciono uma barra de pesquisa no Elementor?
Instale Master Addons for Elementor e arraste o widget Pesquisar do painel Elementos para sua página. Ele renderiza imediatamente um formulário de pesquisa WordPress funcional e você pode alternar entre um formulário completo e um pop-up de ícone a partir do menu suspenso Tipo na guia Conteúdo.
Posso fazer a pesquisa aberta em um pop-up?
Sim. Defina Tipo para Popup de Ícones na guia Conteúdo O widget então mostra apenas um ícone de pesquisa e, clicando nele, abre uma tela de pesquisa com um grande campo de entrada, um espaço reservado personalizado e uma linha de descrição que você controla nas Configurações Popup.
Posso alterar o texto do botão de pesquisa?
Sim. Com o Tipo definido como Formulário, altere o Tipo de Botão Enviar para Botão e digite sua etiqueta no campo Texto do Botão. Você também pode manter um ícone saindo do Tipo de Botão Enviar no Ícone e escolhendo qualquer ícone da biblioteca.
De onde vêm os resultados da pesquisa?
O widget é enviado para a pesquisa padrão do WordPress, portanto, os resultados incluem suas postagens e páginas e são exibidos no modelo de resultados de pesquisa do seu tema Nenhuma configuração de página de resultados separada é necessária.
O widget Master Addons Search é gratuito?
Sim. o widget Pesquisar está incluído na versão gratuita de Master Addons e funciona com Elementor gratuito Ele não mostra resultados ao vivo durante a digitação; ele usa a pesquisa padrão do WordPress.
Embrulhando #
Os complementos mestres Procurar widget dá Elementor a barra de pesquisa que está faltando: um formulário ou ícone pop-up que você pode colocar em qualquer lugar e estilo para combinar com o design, com resultados servidos pelo próprio WordPress Ele emparelha bem com o Conteúdo Off-Canvas widget quando você está construindo um cabeçalho personalizado Navegue pela coleção completa de Widgets e extensões Master Addons, ou veja o Pesquisar página widget para demonstrações e uma comparação com o widget Elementor Pro Search.
