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 :
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?
- 2 - Composición del diseño de la página de resultados de búsqueda
- 3 - Creación de la plantilla de la página de búsqueda con el Theme Builder
- 4 - Configuración de la "Búsqueda en el sitio" de Google Analytics
- 5 - Excluir ciertas páginas de la búsqueda
- 6 - En conclusión...
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...
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:
- 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:
- 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:
- Ir a la Divi > Constructor de temas
- Haga clic en "Añadir una nueva plantilla
- Asignar la plantilla a la misma " Resultados de la búsqueda
- Validar haciendo clic en Haga clic en "Crear una plantilla".
- 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:
- Dentro del diseño, inserte una nueva línea (también llamada "fila")
- A continuación, inserte un módulo de texto
- 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
- Elija " Puesto / Título del archivo
- Este título dinámico mostrará : "El título de su publicación dinámica se muestra aquí. No intente cambiar su texto.
- 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:
- Añadir una nueva fila
- Añade el Módulo del blog
- En la configuración de este módulo, en la pestaña Contenidoseleccione SI para la opción "Mensaje para la página actual.
- En la pestaña Contenido > Elementosse puede definir lo que se quiere mostrar.
- Entonces, en el Estilo > Modelopuede elegir el modelo Grid que es mucho más bonito que el Plantilla a pantalla completa...
- 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:
- Añadir una nueva sección
- Insertar un Módulo de texto para explicar al usuario que puede renovar su búsqueda.
- Por ejemplo, "Iniciar una nueva búsqueda".
- A continuación, añada un Módulo de búsqueda
- 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?
- 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...
- Entonces, en la pestaña Estilopuede definir el aspecto de la barra de búsqueda (color, etc.)
- 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.
- Añade, por ejemplo, una fila con botones, o tus últimas 3 entradas del blog, o un formulario de contacto...
- Guarda tu modelo.
- 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:
- Ir a la Administración de su cuenta de Google Analytics
- Seleccione su cuenta
- Seleccione su propiedad
- Haga clic en Ver configuración
- En la parte inferior de la página, active el botón Seguimiento de la búsqueda en el sitio
- 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.
- 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.
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.
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.
¿Quieres personalizar Divi como un profesional? Consulta todos los tutoriales.
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
Salut Jess. Il faut regarder au niveau des paramètres du module peut-être ?
Bonjour,
Merci pour le tuto,
Comment afficher le prix de mes produit sur la page de recherche ?
Hum Lucquin c’est une bonne question…
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 🙂
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 !!
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.
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.
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 !
Rebonjour,
Cela fonctionne maintenant, il fallait que je me log une nouvelle fois 😉
Merci pour cette page !
Ah super
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.
Super Lucas, merci du retour !
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 ?
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é.
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
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…
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 !
Ah aucune idée ! Dans les options du module tu as regardé ?
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 🙂
Ah bizarre. Il faut que je regarde…
Bonsoir à vous . Je travaille sur un projet de site web et j ai besoin de votre aide. j’ai crée une rangé avec divi dans laquelle j’ai mis un module texte pour mettre un titre , puis un module recherche. Ensuite j’ai crée trois rangés dans lesquelles j’ai mis des modules bascules avec des fichiers pdf à l’intérieur téléchargeable. Lorsqu’on fait la recherche rien ne s’affiche . Svp comment lier le module recherche au module bascule qui contient les pdf téléchargebles pour qu’il soit affiché et téléchargé par celui qui visite la page . Merci
Je ne sais pas si c’est possible
Hello Lycia, Merci pour ce tuto ! Une question : comment faire apparaitre le résultats de recherche (cf 3.2) quand la recherche s’effectue dans une boutique woocommerce et non dans un blog ? En gros, il faudrait que ça soit des produits qui apparaissent et non des articles de blog. Merci d’avance.
Salut Marie Noëlle. Alors, as-tu essayé avec ce plugin gratuit https://fr.wordpress.org/plugins/search-exclude/ – il permet d’exclure des types de post lors des recherches (à tester) – sinon, il y a ça : https://wpzone.co/wordpress-and-divi-code-snippets/search-woocommerce-products-and-tags-with-divis-search-module/
Merci Lycia, je vais tester. Bonne journée,
MN
Bonjour
sympa mais le seul problème est que le contenu Google Analytics est obsolète, la version UA cessera de traiter des données à compter du 1er juillet 2023 et remplacée par le G4… étant déjà sur G4, je ne sais pas continuer.
Merci
bonjour
lorsque vous appuyez sur l’icone de la, loupe dans le menu, le mot rechercher est en mauve comme le reste de la police du menu, comment avez-vous fait?
merci
Jean, il y a plein d’option, j’ai juste paramétré cela.
Bonjour Lycia et merci pour ce tuto. J’ai pu l’adapter pour renvoyer uniquement mes produits Woocomerce en choisissant ‘woo produits » au lieu de « blog » mais par contre j’ai un souci de taille. Ma recherche à fonctionné la première fois mais ne se réactualise pas. Je me suis déconnectée, j’ai essayé en navigation privée, avec un autre navigateur. Quoi que je saisisse j’obtiens toujours les memes résultats. Si quelqu’un à une idée?? merci!
Ah oui c’est bizarre. Là comme ça je vois pas…