Personaliza la página de resultados de búsqueda de tu sitio con Divi

Publicado el 19/01/2021 | 17 comentarios

Es muy fácil personalizar la página de resultados de búsqueda en tu sitio Divi. De hecho, este tutorial sólo le llevará 5 minutos, pero le ayudará a ofrecer un sitio más "profesional".

Si no sabe lo que es la página de resultados de búsqueda, es muy sencillo: son los resultados que se presentan cuando un usuario utiliza el icono de la "lupa " para buscar en su sitio. La página que se visualiza muestra entonces los resultados de su búsqueda para una determinada consulta. Se trata, por tanto, de una página dinámica cuyos resultados variarán en función del usuario.

Para hacer una prueba sobre esto Blog de consejos de DiviSi quieres buscar una palabra clave, no dudes en introducirla usando la lupa del menú principal (arriba a la derecha)... Verás que mi página de búsqueda está personalizada y no se parece a la página básica que propone el tema Divi, como puedes ver en la siguiente imagen :

Page de resultats de recherche Divi - basique
Página de resultados de búsqueda Divi Basic vs. Custom

En la imagen anterior, se puede ver que la página de resultados de búsqueda básica (arriba) es mucho menos bonita y está mucho menos optimizada que la página de resultados de búsqueda personalizada (abajo).

En este tutorial, te explico cómo hacerlo pero también te doy otros 2 consejos... ¡No te arrepentirás de pasarte por él 😉 !

1 - ¿Por qué personalizar la página de resultados de búsqueda de su sitio?

Si miras la imagen de abajo, puedes ver que un poco más del 1% de los visitantes del blog Divi Tips están buscando a través del icono de la lupa...

Site Search Google Analytics
Estadísticas de búsqueda en el sitio con Google Analytics

En los últimos 30 días, 348 personas han buscado en mi blog respuestas a sus preguntas...

El 1% de las visitas es muy poco, pero si no hubiera personalizado esta página de los resultados de búsqueda, 348 personas habrían visitado una página no optimizada y sin marca. Esto no refleja la imagen que me gustaría que diera mi blog.

Esta es una buena razón para personalizar esta página de los resultados de búsqueda: coincidirá con su imagen de marca y no destacará entre las demás páginas....

Lea también: Cómo añadir una búsqueda Ajax en tiempo real a su sitio Divi

2 - Composición del diseño de la página de resultados de búsqueda

Si miras mi página de resultados de búsqueda, está compuesta por 5 elementos:

Composition d'une page de résultats de recherche Divi
Composición de una página de resultados de búsqueda Divi
  • A - El título dinámico de la página
  • B - Los resultados de la búsqueda del internauta en forma de miniaturas
  • C - Una nueva sección con un título
  • D - Posibilidad de reiniciar la búsqueda si la primera no tuvo éxito
  • E - Otros elementos o llamadas a la acción, es decir, contenido que le gustaría poner en esta página...

Y si miramos este diseño en versión de rejilla, estos elementos podrían ser configurados usando estos módulos:

Layout Page de Recherche en version Grille
Diseño de una página de búsqueda en versión de cuadrícula
  • A - El título dinámico de la página = Módulo de texto
  • B - Los resultados de la búsqueda del usuario en forma de miniaturas = Módulo del blog
  • C - Una nueva sección con un título = Módulo de texto (de nuevo)
  • D - Posibilidad de reiniciar la búsqueda si la primera no tuvo éxito = Módulo de búsqueda
  • E - Otros elementos o llamadas a la acción, es decir, contenidos que le gustaría poner en esta página... = ¡todos los módulos que quiera!

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

3 - Creación de la plantilla de la página de búsqueda con el Theme Builder

Para personalizar esta página dinámica, sólo hay una manera: utilizar el constructor de temas Divi ! Así es como se hace:

Construire la template Page de Résultats
Construir la plantilla de la página de resultados con el Constructor Divi
  1. Ir a la Divi > Constructor de temas
  2. Haga clic en "Añadir un nuevo modelo
  3. Asignar la plantilla "Plantilla "Resultados de la búsqueda
  4. Validar haciendo clic en "Crear un modelo
  5. Haga clic en "Construir una carrocería a medida".

3.1 - Construir el diseño de la página de resultados de la búsqueda

Una vez creada la plantilla, sólo hay que diseñar la página sin olvidar los módulos esenciales:

Ajouter un titre dynamique
Añadir un título dinámico dentro de la plantilla de la página de resultados
  1. Dentro del diseño, inserte una nueva línea (también llamada "fila")
  2. A continuación, inserte un módulo de texto
  3. En la pestaña Contenido del módulo Texto, haga clic en el icono de la base de datos para utilizar contenidos dinámicos propuesto por Divi
  4. Elija " Título de la publicación/archivo
Titre Dynamique - suite
Añadir el título dinámico - continuación
  1. Este título dinámico mostrará : "El título de su publicación dinámica aparecerá aquí". No intente cambiar su texto.
  2. Sin embargo, puede cambiar su apariencia desde la pestaña Estilo. Siéntase libre de cambiar su tamaño, color, tipo de letra, etc. para adaptarlo a su gusto.

3.2 - Mostrando los resultados de la búsqueda

Cuando el usuario introduzca una palabra clave mediante la lupa, el sistema nativo de WordPress encontrará resultados para él. A continuación se explica cómo hacer que aparezcan en su página de resultados de búsqueda:

Ajouter un module Blog
Añadir un módulo Blog para mostrar los resultados de la búsqueda
  1. Añadir una nueva fila
  2. Añade el Módulo del blog
  3. En los parámetros de este módulo, en la pestaña Contenidoseleccione SI para la opción "Mensaje para la página actual.
  4. En la pestaña Contenido > Artículosse puede definir lo que se quiere mostrar.
  5. Entonces, en el Estilo > Plantillapuede elegir el plantilla Grid que es mucho más bonito que el Modelo de pantalla completa
  6. Por último, todavía de la pestaña Estilo, puede utilizar todas las opciones a su disposición para diseñar la apariencia de este módulo (color, tamaño, sombra, animación, etc.).

3.3 - Proponer la renovación de la investigación (opcional)

Imagina que tu lector no ha encontrado lo que buscaba en su primera búsqueda, puedes mejorar su experiencia ofreciéndole repetir esta acción sin tener que volver a pasar por el icono de la lupa. Esta parte es opcional, pero si lo deseas, aquí tienes cómo hacerlo:

Ajouter un nouveau Titre
Añadir un nuevo título
  1. Añadir una nueva sección
  2. Insertar un Módulo de texto para explicar al usuario que puede renovar su búsqueda.
  3. Por ejemplo, "Iniciar una nueva búsqueda".
Ajouter le module Chercher
Añadir el módulo de búsqueda a la plantilla
  1. Debajo, añada un módulo de búsqueda
  2. En los parámetros de este módulo, desde el Contenidopodrá introducir el texto del marcador de posición (es decir, el texto presente por defecto en la barra de búsqueda). Por ejemplo: ¿Qué busca?
  3. Desde la pestaña Contenido > Excepcioneseste módulo permite excluir determinados contenidos de los resultados, por ejemplo, páginas, artículos o determinadas categorías de artículos. Desafortunadamente, no se pueden excluir URLs específicas, veremos más adelante en este artículo cómo hacerlo...
  4. Entonces, en la pestaña Estilopuede definir el aspecto de la barra de búsqueda (color, etc.)
  5. Ahora su barra de búsqueda está lista.

3.4 - Añadir llamadas a la acción (opcional)

Su página de resultados de búsqueda ya es funcional, pero nada le impide añadir varias llamadas a la acción para animar a los usuarios a visitar otras páginas o a descubrir los principales productos de su tienda.

Al fin y al cabo, esta página te pertenece y puedes hacer lo que quieras con ella.

Visuel de la Page de Recherche personnalisée
Visual de la página de búsqueda personalizada
  1. Añade, por ejemplo, una fila con botones, o tus últimos 3 posts del blog, o un formulario de contacto...
  2. Guarda tu modelo.
  3. Salga de la plantilla y asegúrese de guardar de nuevo en el tema del constructor...

4 - Configurar la "Búsqueda en el sitio" de Google Analytics

Al principio del artículo, os decía que 348 personas visitaron mi página de resultados de búsqueda el mes pasado... Si conozco esta cifra es porque he activado una pequeña opción en mi cuenta Google Analytics.

Si también quieres recoger este tipo de estadísticas, debes activarlo...

Además de conocer el número de visitantes que utilizan su motor de búsqueda interno, también conocerá las palabras clave que se han introducido en esta barra de búsqueda... Se trata, por tanto, de una información importante que puede indicarle las necesidades de sus visitantes.

A continuación se explica cómo activar esta función:

Activer le suivi Site Search de Google Analytics
Habilitar el seguimiento de Google Analytics Site Search
  1. Ir a la Administración de su cuenta de Google Analytics
  2. Seleccione su cuenta
  3. Seleccione su propiedad
  4. Haga clic en Ver configuración
  5. En la parte inferior de la página, active el botón Seguimiento de la búsqueda en el sitio
  6. En el Parámetro campo de consulta, introduzca "s". Este es el parámetro utilizado en la URL por los sitios de WordPress cuando los usuarios hacen una búsqueda.
  7. Guárdalo.

Eso es todo, a partir de ahora, su cuenta de Google Analytics registrará las visitas y consultas a esta página (consulte la documentación oficial para configurar la búsqueda de sitios).

5 - Excluir ciertas páginas de la búsqueda

Por último, para perfeccionar esta página, puede excluir determinados resultados de búsqueda en función de cada caso. Por ejemplo, si su sitio tiene páginas privadas o páginas que no son de interés para el usuario (página del carrito de la compra, página de mi cuenta, etc.) podría decidir excluirlas de los resultados.

Para ello, puede utilizar la extensión gratuita Buscar Excluir.

Exclure certains résultats
Excluir ciertos resultados de la búsqueda

Esta extensión es muy fácil de usar:

  • Sólo tienes que instalarlo y activarlo...
  • Ir a la lista de sus páginas o artículos
  • Haga clic en Edición rápida
  • Marque la opción "Excluir de los resultados de la búsqueda si no quiere que esta publicación aparezca en la página de resultados de búsqueda de su sitio.
Search Exclude Option

Si quiere excluir algunas páginas sin usar un plugin, sólo tiene que añadir algunas líneas de código, leer este artículo.

6 - En conclusión...

Ahora eres el orgulloso propietario de una gran página de resultados de búsqueda y sólo te ha llevado unos minutos.

También puede descargar una plantilla gratuita preconstruida para crear su página de resultados de búsqueda más rápidamente (disponible en el blog oficial).

¿Ya lo has personalizado? ¿Tiene alguna otra idea para mejorar esta página? Díganoslo en los comentarios.

Page Result Divi Pin
Page De Recherche Pin

¿Quieres personalizar Divi como un profesional? Consulta todos los tutoriales.

Result Page Divi

1.688 palabras

7

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

17 Commentaires

  1. Jess

    Bonjour,

    Merci pour ce tutos ma page recherche est bien plus belle ! Par contre je rencontre un soucis avec le module « chercher », mon site est un site de vente en ligne, j’ai configurer le bouton recherche dans le menu pour avoir uniquement la liste de mes produits avec les termes rechercher mais quand j’utilise le module « chercher » cela ne me retourne aucun résultat. Y aurait-il quelque chose que j’ai oublié de faire ?

    Merci d’avance

  2. Lycia Diaz

    Salut Jess. Il faut regarder au niveau des paramètres du module peut-être ?

  3. lucquin

    Bonjour,

    Merci pour le tuto,

    Comment afficher le prix de mes produit sur la page de recherche ?

  4. Lycia Diaz

    Hum Lucquin c’est une bonne question…

  5. Lucas

    Bonjour,

    Merci pour ce tuto ! Cependant après avoir suivi les étapes du tutoriel, je me rends compte que lorsque j’effectue une recherche sur mon blog divi, l’apparence n’a pas changé. C’est-à-dire que l’apparence de la recherche de mon blog se décrit de la façon suivante : une colonne à droite et une colonne à gauche contenant les articles de ma recherche les un à la suite des autres. Il s’agit de la recherche de base de divi. Or, en suivant votre tuto, j’ai bien créé un module de recherche avec un modèle de blog en grille mais ce dernier ne figure pas comme vous.

    Y-a-t-il un moyen d’éviter d’obtenir la colonne à droite et avoir le même affichage que vous ? J’imagine qu’il y a une configuration à effectuer pour modifier l’apparence de la recherche en amont.

    Je ne sais pas si vous voyez ce dont je parle. En espérant que vous puissiez m’aider 🙂

  6. Bk

    Bonjour, je souhaite n’afficher les résultats de recherche que d’une seule page.
    J’ai listé des documents PDF à télécharger et je souhaite que les internautes puissent rechercher rapidement le document sur cette même page. Comment faire ? Merci !!

  7. Lycia Diaz

    Salut BK, je ne sais pas. Si tu utilises le plugin d’exclusion ça devrait marcher mais du coup, ça va marcher pour tout ton site et non que pour la page que tu désires.

  8. Lycia Diaz

    Salut Lucas, heu tu as peut-être mal paramétré ton modèle dans le Thème Builder. Il faut l’attribuer à la bonne page et tu dois aussi sauvegarder 2 fois pour que ça fonctionne.

  9. Romano

    Hello, j’ai le même problème que Lucas, et j’ai vérifié le paramétrage qui pointe sur la pages « Résultats de recherche ». Donc ok, enregistré deux fois, mais rien à faire : la recherche tombe toujours sur la page WordPress…
    Merci de ton retour !

  10. Romano

    Rebonjour,
    Cela fonctionne maintenant, il fallait que je me log une nouvelle fois 😉
    Merci pour cette page !

  11. Lycia Diaz

    Ah super

  12. Lucas

    Bonjour,

    Je ne parviens pas à vous écrire un email alors j’écris ici.

    Je souhaite intervenir sur mon précédent commentaire. L’affichage de la recherche s’est finalement mise à jour.
    Il a fallu que je me déconnecte de WordPress, je ne sais pas pourquoi mais en tout cas je confirme que votre tuto a bien fonctionné.

    Veuillez m’excuser pour ce double commentaire.

    Cordialement.

  13. Lycia Diaz

    Super Lucas, merci du retour !

  14. cindy

    Bonjour Licia, j’ai un souci j’ai bien la barre de recherche sur mon site mais lorsque je fais une recherche il n’y a aucun résultat. Je ne comprends pas pkoi. Pouvez vous m’aider ?

  15. Lycia Diaz

    Salut Cindy. As-tu essayé plusieurs requêtes pour voir si rien ne marche, car ça me parait bizarre, le moteur de recherche natif de WordPress a toujours bien fonctionné.

  16. Mike

    Hi, helpful blog, thanks. How do I edit the existing search results page? I can’t see the page in the Pages section of WordPress. And do I need to create a new page for ‘no results’? Currently, if there are no results, my users get a blank page. Cheers

  17. Lycia Diaz

    Hello Mike ! No, you just have to create a Search Result Page like that… if there is no result, you might have a page with « no result found »… you should don’t have a blank page, it seems to be wrong, I think…

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto