Como criar uma página de resultados de pesquisa personalizada no Elementor

Uma página de resultados de pesquisa bem projetada desempenha um papel crucial na melhoria da experiência do usuário. Ele permite que os visitantes naveguem rapidamente até o conteúdo relevante que procuram. Isso não apenas economiza tempo na navegação pelo conteúdo, mas também os incentiva a explorar mais.

Elementor é um construtor de páginas para milhões de sites WordPress. Ele fornece um construtor de temas e widgets úteis pelos quais você pode criar facilmente uma página de resultados de pesquisa. Nesta postagem do tutorial, explicaremos como criar uma página de resultados de pesquisa personalizada no Elementor.

Lembre-se de que a caixa de pesquisa é o elemento principal de qualquer página de resultados de pesquisa. É onde as pessoas digitam suas palavras-chave para encontrar postagens e produtos relevantes. Então, primeiro criaremos uma caixa de pesquisa dinâmica usando Elementor. Em seguida, finalizaremos a página adicionando um widget de arquivo, tornando-a uma página de arquivo do blog.

O que é uma página de resultados de pesquisa personalizada no Elementor?

Uma página de resultados de pesquisa é uma página da web dedicada que permite que usuários e visitantes naveguem rapidamente para tipos específicos de conteúdo, como postagens de blog, produtos de comércio eletrônico e itens de portfólio. Essas páginas são obrigatórias para sites baseados em conteúdo pesado.

Uma página de resultados de pesquisa personalizada permite incorporar vários elementos, como imagens em destaque, títulos personalizados, filtros, etc., conforme desejado para que a página tenha uma boa aparência. Isso não apenas melhora a experiência do usuário, mas também ajuda a aumentar as conversões.

Casos de uso de páginas de resultados de pesquisa personalizadas no WordPress

Antes de entrar no tutorial, vamos dar uma olhada em alguns casos de uso das páginas de resultados de pesquisa personalizadas no WordPress. Percorra a lista abaixo.

• Sites de comércio eletrônico

Exiba a página de resultados de pesquisa de produtos com filtros. Os visitantes podem usar a barra de pesquisa para encontrar o produto exato ou filtros para classificá-los por preços, classificações e categorias.

• Sites de blog

Postagens e artigos de blog são exibidos com base em tags e categorias. Os usuários podem classificá-los por autor, data e outras consultas.

• Página da base de conhecimento

As páginas da base de conhecimento geralmente cobrem guias de documentação DIY e recursos úteis. O recurso de pesquisa é obrigatório nessas páginas para explorar rapidamente o conteúdo útil.

• Negócios baseados em serviços

Os usuários podem classificar os serviços desejados com base em classificações, faixas de preços, ofertas e outros detalhes relevantes antes de reservar ou preencher um formulário de contato.

• Sites educacionais

As opções avançadas de pesquisa e filtragem permitem pesquisar cursos, aulas e materiais de estudo para que alunos e alunos possam encontrar facilmente o conteúdo de que precisam.

Como criar uma página de resultados de pesquisa personalizada no Elementor

A parte teórica acabou. Nesta seção, cobriremos agora a parte do tutorial sobre como criar uma página de resultados de pesquisa personalizada no Elementor. Certifique-se de ter os seguintes plug-ins disponíveis em seu site.

• Elementor
• Elementor Pro

Depois de tê-los em seu site, siga o tutorial explicado abaixo.

Etapa 01: Vá para o Elementor Theme Builder

Faça login no painel do WordPress. Em seguida, navegue até Modelos > Theme Builder .

Selecione a opção Resultados da pesquisa em Partes do site. Em seguida, clique no botão + Adicionar novo .

Isso abrirá a tela do Elementor, onde você poderá adicionar qualquer widget que desejar para criar a página de resultados de pesquisa personalizada.

Etapa 02: Crie uma nova seção para adicionar o widget de pesquisa

Clique no ícone de adição (+) na tela. Em seguida, selecione a estrutura de coluna desejada.

Você deve escrever um título para a seção. Isso é útil para SEO.

Então, arraste e solte o widget Título na seção. Isso permitirá que você escreva um título para a seção.

Vá para a guia Estilos . Você terá opções para alterar a cor, tipografia, tamanho da fonte, alinhamento e muito mais do texto do título. Faça você mesmo.

Da mesma forma, arraste e solte o widget Editor de texto na seção abaixo do texto do título. Em seguida, escreva o texto desejado e personalize-o conforme mostrado acima.

Etapa 03: Adicione o widget de pesquisa na seção

Encontre o widget Pesquisar . Arraste e solte-o na seção sob o widget Editor de texto da mesma forma mostrada acima.

Etapa 04: personalize o widget de pesquisa

Por padrão, o widget de pesquisa será exibido em toda a largura da tela. Vá para a guia Avançado para reduzir sua largura.

Você verá a seção Margem . Coloque os valores desejados nas caixas de seção à direita e à esquerda. Você verá que a largura do widget de pesquisa foi reduzida.

Em seguida, vá para a guia Estilo . Você terá opções para alterar a tipografia do texto do espaço reservado, a cor de fundo da caixa de pesquisa, o tipo de borda e muito mais. Faça você mesmo de acordo com os requisitos do design do seu site.

O que fizemos aqui foi adicionar um valor de raio à caixa de pesquisa. Colocamos o valor nas caixas Superior e Esquerda sob o Raio da Borda.

Da mesma forma, adicionamos um raio ao botão de pesquisa. Para fazer isso, expanda a seção Botão Enviar na guia Estilo. Coloque os valores nas caixas Direita e Inferior em Raio.

Você verá as mudanças instantaneamente. Se você deseja adicionar um efeito de foco, cor de fundo, sombra de caixa, etc., explore as opções lá.

Explore como criar um modelo de postagem de blog com Elementor.

Passo 05: Configurar a opção de resultados

Esperamos que você tenha uma ideia sobre o recurso de pesquisa do Ajax. Sempre que um usuário começa a digitar algo nele, vários resultados são exibidos instantaneamente logo abaixo da caixa de pesquisa.

A opção Resultados do widget de pesquisa permite ativar esse recurso e configurar o número total de resultados instantâneos que você deseja exibir na caixa de pesquisa.

Vá para a guia Conteúdo . Em seguida, expanda a seção Resultados .

Ative a opção Resultados ao vivo . O recurso agora está habilitado.

Etapa 06: Crie um modelo para resultados ao vivo

Elementor permite criar um modelo de resultados ao vivo por meio do qual você pode especificar como o conteúdo será exibido sempre que o usuário digitar na caixa de pesquisa.

Clique no botão Criar modelo na seção Resultados.

Isso o levará a uma nova tela. Aqui, você deve criar um layout para os resultados da pesquisa ao vivo e salvá-lo como modelo.

Selecione uma estrutura de coluna conforme desejado. Selecionamos a Linha Direcional . Ele continuará a aparecer no lado direito conforme você adiciona itens a esta seção.

Queremos usar esta caixa de pesquisa para mostrar as postagens do blog. Assim, sempre que alguém digita um tópico de blog, a caixa de pesquisa deve mostrar uma lista de postagens relevantes. Para fazer isso, temos que adicionar widgets de postagem recomendados.

Arraste e solte o widget Imagem em destaque na seção.

Por padrão, a imagem em destaque será grande. Primeiro, na opção Resolução da imagem , selecione o Tamanho médio .

Então, vá para a guia Estilo . Use opções como alinhamento, largura e raio, você pode reduzir ainda mais o tamanho da imagem em destaque, como pode ser visto na captura de tela anexada abaixo.

Da mesma forma, coloque o widget Post Title próximo à imagem em destaque.

Você pode ver que reduzimos o tamanho da fonte e alteramos sua cor.

Nota: Nesta fase, salve o modelo . Você pode adicionar mais elementos, se desejar.

Aprenda como criar um site de currículo com Elementor.

Passo 07: Adicione o Template ao Resultado

Venha para a página principal do que estávamos projetando. Ao clicar no ícone suspenso na seção Resultados, escolha um modelo que você criou há pouco.

Depois que um modelo for selecionado, várias novas opções aparecerão abaixo dele. Usando-os, você pode configurar o número total de itens que serão exibidos na caixa de pesquisa.

Etapa 08: estilizar o layout dos resultados ao vivo

Vá para a guia Estilo novamente e expanda a seção Resultados. Você pode estilizar o tipo de plano de fundo, tipo de borda, raio, preenchimento, distância do campo de pesquisa, altura da coluna, largura e espaço entre linhas e colunas.

Visualizar resultados ao vivo

Agora, digite algo na caixa de pesquisa. Você verá uma lista de três itens relevantes para o tópico digitado que aparecerá abaixo.

Isso garante que o widget de pesquisa esteja funcionando perfeitamente.

Nota: Seu widget de pesquisa está pronto e totalmente funcional. Você pode criar caixas de pesquisa em qualquer lugar do seu site, como no cabeçalho, rodapé e páginas da mesma maneira. Essas caixas de pesquisa geralmente são colocadas no cabeçalho e nas páginas de postagem de arquivo.

Etapa 09: adicionar o widget de arquivamento de postagens

Crie uma nova seção na seção da caixa de pesquisa. Em seguida, arraste e solte o widget Arquivar postagens na nova seção.

Isso mostrará todas as postagens do blog no formato de grade que você publicou em seu site.

Etapa 10: definir as configurações do widget de arquivamento de postagens

Agora é a hora de personalizar o widget Arquivar postagens e fazer o layout que você deseja. O widget possui inúmeras opções de personalização. Primeiro, defina as configurações básicas. Vá para a guia Conteúdo e expanda a seção Layout .

Escolha o número de colunas, a posição da imagem e a resolução da imagem . Selecionamos 2 colunas, definimos a posição da imagem no topo e a resolução total.

Depois disso, ative as opções Título, Trecho, Metadados e Leia mais . Mas se você não quiser nenhuma opção, mantenha-a desativada.

Para definir o comprimento do trecho, defina o número de caracteres próximo a ele. Além disso, especifique o tipo de metadados que deseja exibir. Selecionamos opções de metadados Dados e Comentários para o widget.

A paginação divide suas postagens em várias páginas. Expandir a seção de paginação permite configurar o tipo de paginação, alinhamento, limite de página e encurtamento de arquivos .

Aprenda como criar um formulário de contato com Elementor.

Etapa 11: estilizar o widget de postagens de arquivo

Vá para a guia Estilos . Aqui você encontrará diversas opções. Primeiro, expanda a seção Layout .

Você pode personalizar a lacuna de colunas, a lacuna de linhas e o alinhamento .

Expandir a seção Imagem permitirá definir o raio da borda e o espaçamento entre as imagens e outros elementos.

Da mesma forma, ao expandir a seção Conteúdo , você pode estilizar a tipografia, a cor e o espaçamento dos textos Título, Meta, Trecho e Leia mais.

Finalmente, expanda a seção Paginação . Isso permitirá que você personalize a tipografia, as cores, os efeitos de foco e os espaços dos itens de paginação.

Nota: Na verdade, existem muito mais opções para cada widget Elementor, incluindo o widget Arquivar Postagens. No tutorial acima, tentamos dar uma ideia básica das personalizações que você pode fazer no widget Arquivar postagens. Espero que você possa explorar e usar outras opções além dessas.

Etapa 12: salve e visualize a página de resultados da pesquisa

Agora, vá para o modo de visualização da página. Digite algo na caixa e clique no botão Pesquisar . Você verá as postagens de blog relacionadas aparecendo abaixo no formato de grade.

Algum erro? A página de resultados da pesquisa parece quebrada!

Depois de clicar no botão de pesquisa, você pode ficar assustado se vir postagens de blog relacionadas aparecendo como na imagem abaixo. Você pode sentir que a página está quebrada.

Não se preocupe! É muito fácil resolver o problema.

Você só precisa criar uma página Arquivo no construtor de temas Elementor. A maneira como você projeta a página de arquivo afetará a forma como as postagens do blog relacionadas serão exibidas após clicar no botão Pesquisar.

Se você quiser que criemos uma postagem tutorial separada sobre como criar uma página de arquivo com Elementor, informe-nos através da seção de comentários. Consideraremos a criação de tal página com base em suas expectativas.

Então, este é o fim da parte tutorial do post. Assim, você pode criar uma página de resultados de pesquisa usando Elementor no WordPress.

Ponto de bônus: use HappyAddons para obter mais widgets para Elementor

HappyAddons é um complemento importante com uma grande coleção de widgets poderosos para Elementor. Se você acha que os widgets Elementor disponíveis não são suficientes e está em busca de mais, você pode experimentar o plugin HappyAddons.

HappyAddons vem com mais de 120 widgets e dezenas de recursos que podem levar seu site Elementor a um novo nível. O plugin possui uma versão gratuita e uma versão premium. Você pode tentar primeiro com a versão gratuita. Se estiver satisfeito, você pode atualizar para a versão premium a qualquer momento e fazer algo incrível.

Obtenha o plugin clicando nos botões anexados abaixo.

Conclusão

Criar uma página de resultados de pesquisa não é um luxo hoje, mas é obrigatório para melhorar a experiência do usuário. Ajuda você a manter o apelo e o valor da marca do seu site. Se o seu site é principalmente para produtos de comércio eletrônico, marketing de afiliados e blogs, nunca será suficiente sem uma página de resultados de pesquisa.

Esperançosamente, seguindo o tutorial explicado acima, você pode criar páginas de resultados de pesquisa impressionantes em seu site Elementor. Porém, não se esqueça de otimizar o widget de busca para tablets e dispositivos móveis para que todos os tipos de pessoas possam utilizar este elemento.