Como criar um modelo de página de resultados de pesquisa na Divi
Publicados: 2019-11-13Todos nós nos acostumamos a usar formulários de pesquisa para encontrar o que precisamos em um site. Portanto, ao criar um site em Divi, realmente precisamos considerar o design do modelo de resultados da página que irá direcionar a aparência desses resultados de pesquisa.
Neste tutorial, vamos cobrir como construir um modelo de página de resultados de pesquisa simples e elegante usando o Divi Theme Builder. Mostraremos como incluir os elementos cruciais de um modelo de página de resultados de pesquisa, incluindo um título de resultados de página dinâmico e o conteúdo de pesquisa relevante gerado por um módulo de blog.
Vamos começar.
Espiada
Aqui está uma olhada rápida no modelo de página de resultados de pesquisa que iremos criar.
Baixe o (s) modelo (s) GRATUITAMENTE
Para colocar suas mãos no modelo de página de resultados de pesquisa deste tutorial, primeiro você precisará baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já faz parte da lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e adicione um dos arquivos json no Divi Theme Builder usando a opção Theme Builder Portability.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará instalar e ativar o Divi Theme. Certifique-se de que possui a versão mais recente do Divi.
Você também precisará de algumas postagens / páginas criadas para fins de teste para que a página de resultados da pesquisa realmente mostre os resultados.
Depois disso, você está pronto para ir.
Sobre a página de resultados de pesquisa
No Divi, a página de resultados da pesquisa é a página para a qual um usuário é redirecionado assim que ele insere uma consulta de pesquisa em um dos formulários de pesquisa do Divi. As possíveis consultas de pesquisa que levam à página de resultados da pesquisa incluem o formulário de pesquisa no cabeçalho Divi padrão, a pesquisa gerada a partir do Módulo de Pesquisa no Divi Builder e o widget de pesquisa embutido no WordPress.
Por padrão, a página de resultados da pesquisa simplesmente exibirá páginas ou postagens pesquisadas em um feed de maneira muito semelhante a uma página de blog típica. Mas com Divi, você pode projetar o modelo como quiser usando o Divi Theme Builder.
Como criar um modelo de página de resultados de pesquisa na Divi
Criar novo modelo
Para começar, vá para o painel do WordPress e navegue até Divi> Theme Builder. Em seguida, clique na área “Adicionar novo modelo”.
Nas configurações do modelo, atribua os resultados da pesquisa do modelo.
Em seguida, clique na área Adicionar corpo personalizado do novo modelo e selecione “Construir corpo personalizado”.
Selecione para construir o layout do zero.
Projetando o modelo de página de resultados de pesquisa usando o Editor de layout de modelo
A seção de título para o modelo de resultados da página
Dentro do editor de layout de modelo, inicie o design do modelo adicionando uma linha de uma coluna à seção padrão. É aqui que construiremos o título da nossa página para o modelo.
Destaque do projeto do módulo divisor
Em seguida, insira um Módulo Divisor. Isso servirá como um destaque de design para o título da nossa página.
Atualize o estilo do divisor da seguinte forma:
- Cor da linha: # 3a405a
- Posição da linha: inferior
- Peso do divisor: 5px
- Índice Z: -1
Módulo de Texto com Título
No Módulo divisor, adicione um novo módulo de texto com o seguinte conteúdo:
<h1>Search Results</h1>
A atualização do design do texto da seguinte forma:
- Cor de fundo: #ffffff
- Alinhamento de texto: centro
- Fonte do título: Muli
- Peso da fonte do cabeçalho: Pesado
- Cor do texto do título: # 3a405a
- Tamanho do texto do título: 70 px (desktop), 40 px (tablet), 22 px (telefone)
- Altura da linha de título: 80px
- Largura máxima: 60%
- Alinhamento do Módulo: Centro
- Altura mínima: 80px
Agora podemos mover o módulo de texto para cima para sobrepor o divisor, adicionando uma margem personalizada.
- Margem: -75px
Módulo de Pesquisa
No módulo de texto com o título, adicione um módulo de pesquisa. Isso será útil para usuários que desejam continuar pesquisando seu blog / site assim que chegarem à página de resultados da pesquisa.
Adicione texto de espaço reservado de entrada para o formulário.
Você também tem a opção de excluir certas páginas, postagens e / ou categorias dos resultados da pesquisa, selecionando opções no grupo de opções de exceções. Por exemplo, se você estiver criando um formulário de pesquisa principalmente para o seu blog, pode excluir as páginas dos resultados da pesquisa para que apenas as postagens do blog sejam exibidas.
Em seguida, atualize as configurações de pesquisa da seguinte maneira:
- Cor do marcador de posição: # 3a405a
- Cor de fundo do campo: #ffffff
- Fonte do campo: Montserrat
- Tamanho do texto do campo: 20px
- Botão e cor da borda: # 3a405a
- Fonte do botão: Muli
- Peso da fonte do botão: negrito
- Cor do texto do botão: #ffffff
- Tamanho do texto do botão: 18 px
- Largura: 100%
- Largura máxima: 300px
- Alinhamento do Módulo: Centro
- Cantos arredondados: 8px
Isso cuida da nossa seção de título na maior parte.
Preenchimento de linha
Antes de iniciarmos a próxima seção, vamos retirar o preenchimento inferior da linha.
- Preenchimento: 0px inferior
Criação da seção do corpo do modelo de resultados de pesquisa
Agora estamos prontos para adicionar nossa segunda seção do modelo que conterá o título do arquivo dos resultados da pesquisa e o conteúdo dos resultados da pesquisa.
Criando a Nova Seção e Linha
Na seção superior, adicione uma nova seção regular ao layout.
Em seguida, adicione uma linha de uma coluna à seção.
Adicionar a postagem / título do arquivo como conteúdo dinâmico
A página de resultados da pesquisa se beneficiará de um título que exibe a consulta de pesquisa inserida pelo usuário. Podemos adicionar isso à página usando um módulo de texto e puxando o elemento de conteúdo dinâmico post / archive title.
Primeiro, adicione um módulo de texto.
Exclua o texto fictício dentro da caixa de conteúdo do corpo e selecione o ícone Conteúdo Dinâmico que aparece ao passar o mouse sobre a caixa de conteúdo do corpo. Em seguida, selecione o Post / Archive Title na lista.
O elemento Post / Archive Title começa com a frase “Results for” seguida pelo conteúdo / consulta da pesquisa entre parênteses. Abaixo está um exemplo do que seria mostrado se um usuário pesquisasse o termo “empresa”.
Em seguida, atualize as configurações de design para o módulo de texto da seguinte forma:
- Fonte do Texto: Muli
- Peso da fonte do texto: pesado
- Cor do texto do texto: # d30c7b
- Tamanho do texto do texto: 22px
- Alinhamento de Texto: Centro
- Estilo de animação: slide
- Direção da animação: para baixo
- Intensidade de animação: 250%
A animação adicionada revelará o título do resultado da pesquisa sob o estilo de divisor “nuvem” (adicionaremos isso um pouco mais tarde). Portanto, sempre que um usuário inserir uma nova consulta de pesquisa, o título aparecerá para um efeito legal.
Adicionar nova linha
No módulo Texto que contém o elemento de título de postagem / arquivo, crie uma nova linha de uma coluna.
Adicione um módulo de blog à linha. Isso exibirá as postagens / conteúdo reais da página de resultados da pesquisa.
Atualize as configurações de conteúdo para o módulo de blog da seguinte maneira:
- Postagens para a página atual: SIM
- Postagem: 9
- Comprimento do trecho: 120
- Mostrar Autor: NÃO
A opção mais importante aqui são as postagens para a página atual. Deve estar ativo para que a página de resultados da pesquisa exiba o conteúdo dinâmico da pesquisa.
Em seguida, atualize o design do módulo de blog da seguinte maneira:
- Layout: Grade
- Fonte do título: Muli
- Peso da fonte do título: Ultra negrito
- Cor do texto do título: # 3a405a
- Tamanho do texto do título: 24px
- Altura da linha do título: 1,3em
- Fonte do corpo: Montserrat
- Cor do corpo do texto: # 3a405a
- Layout de grade com cantos arredondados: 10 px
- Largura da borda do layout da grade: 0 px
- Sombra da caixa: mostrar captura de tela
- Posição vertical da sombra da caixa: 0 px
- Força do borrão da sombra da caixa 15px
- Força de propagação da sombra da caixa: -5px
Em seguida, atualize o estilo de paginação da seguinte maneira:
Plano de fundo e divisor da seção
Como um toque final no design, atualize as configurações da seção da seguinte forma:
- Cor de fundo: #eeeeee
- Estilo do divisor superior: veja a captura de tela
- Cor do divisor: #ffffff
- Divider Flip: vertical
- Disposição do divisor: no topo do conteúdo da seção
- Preenchimento: 100px superior
Resultado final
Aqui está o resultado final do modelo de página ao pesquisar o termo “negócios” no site ao vivo.
Aqui está o design no tablet e no telefone.
E aqui está um exemplo da animação do título do resultado da pesquisa ao usar o formulário de pesquisa para consultas adicionais na página de resultados da pesquisa.
Pensamentos finais
Uma página de resultados de pesquisa pode ser uma ferramenta útil para os usuários, por isso é uma ótima ideia dar a ela a atenção que ela merece. Com Divi, você pode criar um modelo de resultados de pesquisa com todos os elementos dinâmicos necessários usando o Divi Visual Builder ao projetar o modelo. Nenhum conhecimento de código necessário. Espero que isso lhe dê um pouco de inspiração para criar um modelo de página de resultados de pesquisa personalizado para seu próprio blog ou site.
Estou ansioso para ouvir de você nos comentários.
Saúde!