Você gostaria de aprender como construir uma página de resultados de pesquisa com Elementor?

Quer você tenha um blog pessoal, um site de comércio eletrônico ou um grande site com vários usuários, adicionar um recurso de pesquisa é crucial o suficiente. Torna mais fácil para os visitantes encontrarem o conteúdo que procuram, em vez de clicar aqui e ali no menu de navegação.

No WordPress, a aparência (layout) da página de resultados da pesquisa é controlada por um modelo no tema que você está usando (o arquivo search.php na maioria dos casos). Se o layout padrão não for adequado para você, você pode criar um modelo personalizado para substituí-lo.

Se você não tem habilidades em PHP, pode usar Elementor (ou outros plug-ins de construtor de página que têm funcionalidade de construtor de tema como Divi Builder et WPBakery) para criar um modelo de página de resultados de pesquisa personalizado no WordPress.

Para poder criar um modelo de página de resultados de pesquisa usando o Elementor, você deve usar a versão pro do Elementor, pois o recurso Theme Builder está disponível apenas no Elementor Pro.

Como criar uma página de resultados de pesquisa com Elementor

Ao criar uma página de resultados de pesquisa personalizada usando o Elementor, você pode adicionar qualquer elemento que desejar ao criar uma página. Existem mais de 90 itens (chamados de widgets) que você pode adicionar.

Leia também: Como gerenciar os envios de formulários no Elementor

O próprio Elementor oferece modelos de páginas de resultados de pesquisa pré-construídos para agilizar seu fluxo de trabalho. Ou, se você tiver seu próprio conceito de design, também poderá criar você mesmo a página de resultados da pesquisa.

Neste artigo, mostraremos como criar um modelo de página de resultados de pesquisa do zero. Aqui está a captura de tela da página de resultados da pesquisa que queremos criar.

Usaremos duas seções para criar a página de resultados de pesquisa acima:

  • Seção 1: Para colocar o cabeçalho (a descrição dos resultados da pesquisa)
  • Seção 2: Para colocar o formulário de pesquisa e os resultados da pesquisa

Antes de começar, certifique-se de ter atualizado sua versão do Elementor para a versão profissional, caso não tenha atualizado. Quando estiver pronto, vá para Modelos -> Criador de temas no seu painel do WordPress.

Veja também: Como usar o Elementor: o guia completo

Clique no botão adicionar para criar um novo modelo (ou você pode clicar no botão Tente agora para experimentar o Construtor de Temas do Elementor).

Defina o tipo de modelo para Resultados da pesquisa, dê um nome ao seu modelo e clique no botão CRIE UM MODELO para começar a criar o último.

Como queremos criar a página de resultados da pesquisa do zero, você pode simplesmente fechar a janela da biblioteca de modelos que aparece.

Leia também: Como adicionar efeito de ponto a uma coluna no Elementor

Antes de começar a adicionar um widget, você pode primeiro definir o layout da página. Para fazer isso, clique no ícone de engrenagem na parte inferior do painel de configurações (painel do lado esquerdo). Você pode definir o layout em a opção Layout da página do bloco configurações gerais sob a guia Definições.

Seção 1

Conforme mostrado acima, usaremos esta seção para colocar o cabeçalho para exibir a descrição da página de resultados da pesquisa. Basta clicar no botão de adição na caixa de edição do Elementor para adicionar uma nova seção. Você pode selecionar a estrutura de coluna única. Depois que a seção for adicionada, arraste o widget Título para ela.

Vá para o painel esquerdo. No bloco Título sob a guia Contente, clique no ícone do banco de dados no campo Título e selecione Título do arquivo.

criar uma página de resultados de pesquisa

Você pode acessar a guia Estilo para personalizar o cabeçalho. Você pode definir coisas como cor do texto, tipografia (família da fonte, tamanho da fonte, estilo da fonte, etc.). Você também pode aplicar o modo de mesclagem e sombra de texto, se desejar.

Como criar uma página de resultados de pesquisa com Elementor

Se quiser definir o plano de fundo da seção, adicionar um separador ou definir a margem, você pode clicar na alça da seção para alternar para o modo de edição.

criar uma página de resultados de pesquisa

Seção 2

Clique no botão adição para adicionar uma nova seção como você fez na seção 1 acima. Você também pode selecionar a estrutura de coluna única. Assim que a seção for adicionada, arraste o widget Formulário de Pesquisa.

Você pode então acessar o painel de configurações para fazer as configurações. No bloco Formulário de pesquisa em a guia Conteúdo, você pode definir o tema, o espaço reservado, o ícone, o tamanho do ícone, etc ...

Para personalizar o formulário, você pode abrir a guia Estilo. Existem dois blocos de parâmetros que você pode abrir: Entrada et Botão. Do bloco Entrada, você pode definir a tipografia, cor do texto, cor de fundo, cor da borda, tamanho da borda e raio da borda.

Do bloco Botão, você pode definir a cor do texto do botão, cor de fundo, tipografia, tamanho do ícone e largura do botão.

Depois que o estilo do widget Formulário de pesquisa estiver definido, você pode adicionar o widget Postagens de arquivos. Você pode colocá-lo diretamente no widget Formulário de Pesquisa.

Assim que este widget estiver no lugar, navegue até o painel esquerdo. Sob o bloco Layout, aba Contente, você pode definir o tema, o número de colunas, a posição da imagem, o comprimento do extrato, os metadados, etc ...

No bloco Paging, você pode definir o tipo de paginação, limite de página e alinhamento.

No bloco Avançado, você pode definir a mensagem para ser exibida quando o WordPress não conseguir encontrar a consulta de pesquisa fornecida.

Uma vez que as configurações básicas da guia Conteúdo concluído, você pode alternar para a guia Estilo para personalizar a aparência do widget Archive Posts. Existem 6 blocos que você pode abrir nesta guia.

  • traçado

Você pode abrir este bloco para definir o alinhamento do conteúdo textual das postagens (título da postagem e meta). Você também pode definir o intervalo entre colunas e linhas.

  • Imagem

Você pode abrir este bloco para definir o raio da borda das miniaturas das postagens. Você também pode definir o espaçamento e aplicar filtros CSS.

  • Conteúdo

Você pode abrir este bloco para definir a tipografia, a cor do texto e o espaçamento do conteúdo do texto para as postagens.

  • Paginação

Se você habilitar a paginação, poderá abrir este bloco para personalizar a paginação. Você pode definir coisas como tipografia, cor do texto e espaço entre os números.

  • Mensagem Nada Encontrado

Você pode abrir este bloco para personalizar a mensagem de erro quando o WordPress não conseguir encontrar o conteúdo com base na consulta de pesquisa fornecida. Você pode definir a tipografia e a cor do texto neste bloco.

Você pode adicionar mais widgets se precisar. Quando terminar de editar a página, você pode clicar no botão PUBLICAR OU ATUALIZAR na parte inferior do painel de configurações.

Se você for solicitado a adicionar uma condição de exibição, basta adicionar um clicando no botão ADICIONE UMA CONDIÇÃO. Já que você está criando uma página de resultados de pesquisa, defina a condição de exibição para Procurar resultados. Clique no botão SALVAR FECHAR para aplicar a mudança.

criar uma página de resultados de pesquisa

E aí está!

Cada site baseado em WordPress tem uma página de resultados de pesquisa exclusiva, dependendo do tema usado pelo site. Se o layout da página de resultados da pesquisa oferecido pelo tema que você está usando não parecer atraente para você, você pode personalizá-lo.

A menos que você tenha habilidades em PHP, você pode usar o Elementor para criar uma página de resultados de pesquisa personalizada em seu site WordPress. Tudo é arrastar e soltar. Não há necessidade de manipular o código PHP.

Além disso, você também pode usar o Elementor para criar um cabeçalho personalizado, rodapé personalizado, página 404 personalizada e outras partes do seu tema WordPress.

Obtenha o Elementor Pro agora!

Descubra também alguns plugins premium do WordPress  

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Autoresponder de WooCommerce

WooCommerce Autoresponder é um plugin para WordPress que permite que você inscreva seus clientes em sua resposta automática. Este plugin do WordPress também exibe uma caixa de assinatura de boletim informativo para integrar facilmente WooCommerce para a resposta automática.

Autoresponder Woocommerce

Como recursos, você encontrará entre outros: integração total com WooCommerce, suporte para 9 respostas automáticas, nenhum conhecimento de codificação necessário, fácil de instalar e muito mais.

Leia também: MailChimp tutorial em francês: o guia completo para criar um boletim informativo

Descarregar | Demohospedagem na web

2. Plugin de Avaliação de Comentários do WordPress

É sobre um sistema de avaliação de comentários. Ele permite que você deixe que os usuários avaliem comentários diferentes. Eles terão apenas que clicar no botão de visualização e rolar para baixo até a seção de comentários para ver o plugin premium do WordPress em ação.Como WordPress Plugin Avaliação

Em suas características encontramos principalmente: facilidade de uso, suporte para cferramentas de ícones personalizados, classificação de comentários de acordo com as notas, a personalização do tvão ícones, suporte CSS personalizado, cCriptografia IP (para usuários europeus), a possibilidade de traduzir este plugin e mais.

Descarregar | Demo | hospedagem na web

3. Progress Mapa

O Mapa de progresso é um plugin do WordPress projetado para geolocalização. O objetivo é ajudar os usuários com sites sobre listagens de hotéis, anúncios imobiliários, listas de restaurantes, ofertas de trabalho, anúncios da loja e muito mais ... para organizar suas localizações em Google Map e navegue facilmente pelo mapa usando um carrossel.

Mapa de progresso wordpress plugin wordpress

Em outras palavras, com este plugin, seus locais serão publicados tanto no Google Map (marcadores) e em um carrossel. O carrossel está conectado ao mapa, o que significa que o item selecionado no carrossel terá como alvo sua localização no mapa e vice-versa.

Dê uma olhada Como exibir a localização de um membro da sua comunidade WP em um mapa do Google

Para adicionar suas localizações, o Mapa de Progresso fornece um espaço de formulário na página "Adicionar Novo Item" permitindo que você adicione facilmente suas coordenadas de localização.

DescarregarDemo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

Aqui está ! É isso neste tutorial. Esperamos que ele mostre como criar uma página de resultados de pesquisa com o Elementor. Gostaríamos de ouvir sua opinião sobre o assunto em a seção de comentários.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais

... 

0 ações
ação
chilrear
Enregistrer