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

Publicado el 19/01/2021 | 21 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 qué 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 probar 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 entonces 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 atractiva 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 pasar 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 poco más del 1% de los visitantes del blog Divi Tips buscan 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 bajo, pero si no hubiera personalizado esta página en 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 tuviera mi blog.

Esta es una buena razón para personalizar esta página en 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 usuario 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, contenidos que le gustaría destacar en esta página...

Y si miras esta disposición en forma de cuadrícula, estos elementos podrían ser implementados 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 haga clic en "PRUEBA GRATUITA

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

Sólo hay una forma de personalizar esta página dinámica: utilizar el constructor de temas Divi ¡! Así es como se hace:

Construire la template Page de Résultats
Construyendo 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 una nueva plantilla
  3. Asignar la plantilla a la misma " Resultados de la búsqueda
  4. Validar haciendo clic en Haga clic en "Crear una plantilla".
  5. Haga clic en "Construir un cuerpo personalizado

3.1 - Construcción del 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 utilizando contenidos dinámicos propuesto por Divi
  4. Elija " Puesto / Título del 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 se muestra 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, fuente, etc. para adaptarlo a su gusto.

3.2 - Mostrando los resultados de la búsqueda

Cuando el usuario introduce una palabra clave utilizando 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 la configuración 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 > Elementosse puede definir lo que se quiere mostrar.
  5. Entonces, en el Estilo > Modelopuede elegir el modelo Grid que es mucho más bonito que el Plantilla a pantalla completa...
  6. Por último, todavía de la pestaña Estilo, puede utilizar todas las opciones a su disposición para diseñar el aspecto 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 la opción de 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. A continuación, añada un Módulo de búsqueda
  2. En la configuración de este módulo, desde el Contenidopodrá introducir el texto del marcador de posición (es decir, el texto por defecto de 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. Lamentablemente, 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 es tuya para que hagas lo que quieras.

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 últimas 3 entradas 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 - Configuración de la "Búsqueda en el sitio" de Google Analytics

Al principio de este artículo, te dije que 348 personas visitaron mi página de resultados de búsqueda el mes pasado... Si conozco este número, es porque activé 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 buscador 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 cuáles son 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. Grábalo.

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:

  • Todo lo que tienes que hacer es instalarlo y activarlo...
  • Ir a la lista de sus páginas o artículos
  • Haga clic en Cambio rápido
  • 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 ciertas páginas sin usar un plugin, sólo tiene que añadir unas 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

Puede que a ti también te guste:

Comment changer une image au survol de la souris ?

¿Cómo cambiar una imagen al pasar el ratón por encima?

Si no estás usando las opciones de hover disponibles en Divi, ¡te estás perdiendo algo! Aquí tienes un ejemplo de cómo utilizarlos que te puede resultar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

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 web? ¿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 al usuario que pasa por su sitio en el mismo. Descubre el tutorial paso a paso + vídeo.

21 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…

  18. PHILIPPE KERZERHO

    Bonjour Lycia,
    Je découvre ton tuto qui m’a drôlement aidé à personnaliser ma page de résultat de recherche.
    Y a-t-il un moyen d’intervenir sur le format de l’image?
    Dans les résultats de recherche les photos sont horizontales alors que sur mon site elles sont toutes verticales…
    Encore merci !

  19. Lycia Diaz

    Ah aucune idée ! Dans les options du module tu as regardé ?

  20. Vincent d'Eaubonne

    Bonjour Lycia, et bravo pour votre travail.

    Pour info, je suis sur votre tuto relatif à la page recherche. Il propose de cliquer sur la loupe de votre site pour ce faire une idée de la configuration, mais voilà, je ne trouve pas votre loupe en haut à droite. Une évolution récente sans doute 🙂

  21. Lycia Diaz

    Ah bizarre. Il faut que je regarde…

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

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