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

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.

Você pode acessar a guia Style 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.

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.

Seção 2

Clique no botão MAIS 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 Style 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.

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 cabeçalho personalizado, rodapé personalizado, página 404 personalizada e outras partes do seu tema WordPress.

Obtenha o Elementor Pro agora!

1. Autoresponder de WooCommerce

O Autoresponder WooCommerce é um WordPress Plugin que permite que você inscreva seus clientes no seu autoresponder. este WordPress Plugin também exibe uma caixa de assinatura de boletim informativo para integrar facilmente WooCommerce para a resposta automática.

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 | Demo | hospedagem na web

• 9 WordPress plugins para enviar e-mails via SMTP
• 7 WordPress plugins para incorporar um Google Maps no seu site
• Como configurar uma rede multisite no WordPress
• Como adicionar metassessões em postagens e páginas

Conclusão