Neste artigo, vamos dar-lhe uma visão geral detalhada de como pode utilizar o plugin Elementor para converter oÍcone de pesquisa adicionado ao menu do sítio.

O que é o ícone de pesquisa do Elementor?

O ícone de pesquisa do Elementor é, na verdade, um ficheiro fornecido pelo plugin Elementor chamado "Formulário de pesquisa". Com este widget, é possível adicionar um novo widget em qualquer sítio do site (como oCabeçalho, rodapé ou barra lateral) Crie uma barra de pesquisa. Colocando-a no cabeçalho ou no rodapé do site, os utilizadores podem aceder a esta funcionalidade a partir de qualquer página do site, facilitando muito a navegação e a pesquisa.

O widget é altamente flexível e pode ser personalizado com o seu texto de marcador de posição, ícones, sombras de caixa, limites, posições de ícones, definições de tipografia e muito mais. Além disso, pode ser personalizado para diferentes tamanhos de ecrã (Computadores de secretária, tablets e telemóveis) são configurados de forma óptima para garantir que em todos os dispositivosbom indicador.

Como adicionar o ícone de pesquisa do Elementor ao menu do seu sítio Web

Este tutorial utilizará a versão gratuita do Elementor e oEdição Profissionalwidgetse demonstrado através de uma página pré-concebida.

Passo 1: Adicione o widget do formulário de pesquisa Elementor

Em primeiro lugar, certifique-se de que ainda não tem quaisquer opções de pesquisa no menu do seu sítio Web. Colocaremos o ícone de pesquisa adicionando uma nova coluna à área do menu.

1. Abra o editor do ElementorNo painel de widgets à esquerda, localize "Formulário de pesquisa"Widgets.

2. Arraste e largue widgetsArraste e largue o widget do formulário de pesquisa na coluna direita do menu de navegação.

Desta forma, foi adicionado com êxito um formulário de pesquisa ao menu.

Passo 2: Defina o tema de pesquisa

O Elementor pode escolher entre três skins diferentes para desenhar o aspeto do formulário de pesquisa:

1. escriturasEste é o design mais básico e aplica-se normalmente a layouts limpos.
2. mínimoEsta skin realça a simplicidade e a sofisticação, sendo perfeita para sítios Web modernos.
3. ecrã inteiroEsta skin permite que a caixa de pesquisa se expanda para um ecrã completo quando o utilizador clica nela, o que é perfeito para sites com muito conteúdo.

Dependendo do estilo do seu sítio Web, escolha a skin adequada e adicione texto de marcador de posição à secção de conteúdo.

Passo 3: Gerir o conteúdo do botão de pesquisa

Na área de conteúdo, pode optar por definir o botão de pesquisa como um ícone ou como texto. Neste exemplo, definimos o botão como um ícone, com a possibilidade de personalizar o tamanho e a posição do ícone.

1. Selecione o tipo de íconeNa secção de conteúdo dos botões, os ícones foram escolhidos como a principal forma de apresentação dos botões.
2. Redimensionar íconesCom base no design do menu, os ícones são redimensionados para se harmonizarem com outros itens do menu.

Passo 4: Personalize o estilo dos campos de entrada do formulário

Para embelezar ainda mais o formulário de pesquisa, aceda a "tipo" para ajustar o estilo do campo de entrada.

1. rever a apresentaçãoAltere a fonte, o tamanho da fonte e a cor do texto dos campos de entrada para corresponder ao design geral do sítio Web.
2. Definir o fundo e o contornoPode personalizar a cor de fundo, a cor do contorno, a sombra da caixa, etc. do campo de entrada.
3. Adicione o raio da margemDefinindo o raio da margem, pode tornar os cantos da caixa de pesquisa mais arredondados para melhorar o efeito visual.

Passo 5: Botões de estilo

O estilo do botão de pesquisa também pode ser personalizado na secção "Estilo".

1. Alterar a cor do botãoDefina a cor do texto e a cor de fundo do botão para o fazer sobressair na página.
2. Ajuste a posição do íconeAjuste a posição dos ícones dos botões conforme necessário para os harmonizar com o design geral do formulário.

Passo 6: Adicione margens à área de apresentação

Nas definições avançadas, pode ajustar a disposição do widget, como adicionar margens ou margens interiores, para garantir que o formulário de pesquisa está alinhado com outros itens de menu.

• Adicionar margensAdicione uma margem adequada na parte superior do widget para que o formulário de pesquisa possa ser melhor alinhado com o resto do conteúdo do menu.

Passo 7: Torne o ícone de pesquisa do Elementor sensível a dispositivos móveis

Para garantir que o seu formulário de pesquisa se comporta de forma consistente em todos os dispositivos, pode utilizar a função "modo de resposta"Opções.

1. Mudar o tamanho do ecrãNo topo do painel Elementor, alterne entre diferentes tamanhos de ecrã para otimizar a disposição do formulário de pesquisa individualmente.
2. Redimensione e reposicione widgetsAjuste o tamanho e a posição dos widgets de acordo com o tamanho do ecrã para garantir uma boa visualização em telemóveis, tablets e computadores de secretária.

Nota: Não elimine qualquer widget, uma vez que este desaparecerá em todos os tamanhos de ecrã após a eliminação. Em vez de eliminar um widget, pode optar por ocultá-lo para um tamanho de ecrã específico.

Passo 8: Pré-visualize a barra de pesquisa

Pré-visualize o menu de navegação recentemente concebido depois de todas as definições terem sido concluídas. Certifique-se de que o formulário de pesquisa tem o aspeto e funciona como esperado em todos os dispositivos.

Perguntas mais frequentes

1. O widget de formulário de pesquisa do Elementor é gratuito?
   • Não. O widget Formulário de pesquisa é um widget avançado no Elementor que só está disponível na secçãoEdição ProfissionalOfereça.
2. Como personalizar a barra de pesquisa no WordPress?
   • É possível adicionar e personalizar a barra de pesquisa no seu sítio Web WordPress através do Elementor ou de outros plug-ins. Consulte os tutoriais relacionados para obter passos pormenorizados.
3. Como é que posso criar e editar páginas de resultados de pesquisa no Elementor?
   • As páginas de resultados de pesquisa podem ser facilmente criadas e editadas utilizando a funcionalidade de criação de temas do Elementor. Aceda aModelos -> Theme Builder -> PesquisarComo resultado, escolha apenas o modelo pronto a usar.

chegar a um veredito

A funcionalidade de pesquisa é uma ferramenta importante para melhorar a experiência do utilizador de um sítio Web. Ao adicionar um ícone de pesquisa ao menu do seu sítio, os utilizadores podem encontrar mais facilmente o que procuram, melhorando a facilidade de utilização e as taxas de conversão. O Elementor oferece um poderoso widget de formulário de pesquisa que pode ser personalizado de acordo com necessidades específicas, garantindo que o formulário de pesquisa é consistente com o estilo geral do sítio.