Resultado Divi Thumb

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

Actualizado en 19/01/21

1728 palabras

6 minutos de lectura
33 comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

Es tan simple Personalizar la página de resultados de búsqueda de su sitio Divi ¡Oye! De hecho, este tutorial sólo le llevará 5 minutos pero le permitirá proponer un sitio más "pro".

Si no sabes lo que es búsqueda resultados página, es muy simple : se trata de los resultados presentados cuando un usuario de Internet utiliza "Lock" icono para buscar su sitio. La página mostrada presenta entonces resultados de investigación para solicitud. Por lo tanto, es cuestión de página dinámica cuyos resultados variarán dependiendo del usuario.

Para hacer una prueba sobre esto Consejos del blog Divi, no dude en introducir una palabra clave usando la lupa en el menú principal (a la derecha)... Entonces verás que mi página de búsqueda es personalizada y no parece la página básica propuesta por el tema Divi, como se puede ver en la siguiente imagen:

Resultados de búsqueda página Divi - basic
Resultados de búsqueda página Basic divi vs. custom

En la imagen anterior, se puede ver que Página de resultados de búsqueda básica (top) es mucho menos bonito y mucho menos optimizado que el 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 estar ahí!

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

Si usted mira la imagen de abajo, usted puede ver que un poco más del 1% de los visitantes a Divi Tips blog hacer una búsqueda a través del icono de la lupa...

Búsqueda de Sitio Google Analytics
Estadísticas de búsqueda in situ con Google Analytics

Durante los últimos 30 días, 348 personas han estado buscando mi blog para encontrar respuestas a sus preguntas...

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

Esta es una buena razón para personalizar esta página de resultados de búsqueda: que coincidirá con su imagen de marca y no mostrará otras páginas....

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

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

Si miras mi búsqueda resultados páginaConsta de 5 elementos:

Composition of a search results page Divi
Composition of a search results page Divi
  • A – El título dinámico de la página
  • B – Los resultados de la búsqueda de Internet en forma de miniaturas
  • C – Una nueva sección con un título
  • D – Una posibilidad de repetir la búsqueda si el primero no tuvo éxito
  • E – Otros artículos o llamadas a la acción, que es contenido que desea destacar en esta página...

Y si usted mira este diseño (distribución de página) en una versión de red, estos elementos podrían ser implementados usando estos módulos:

Sugerencia página de búsqueda en versión Grid
Diseño de una página de búsqueda en versión Grid
  • A – Título dinámico de la página = Módulo de texto
  • B – Resultados de búsqueda para el usuario de Internet en forma de miniaturas = Módulo de Blog
  • C – Una nueva sección con un título = Módulo de texto (de nuevo)
  • D – Una posibilidad de repetir la búsqueda si el primero no tuvo éxito = Módulo de búsqueda
  • E – Otros elementos o llamadas a la acción, es decir, el contenido que desea destacar en esta página... = Cualquier módulo que quieras!

¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"

3 – Creando la plantilla de la página de búsqueda con el Tema del Constructor

Para personalizar esta página dinámica, sólo hay una manera: utilizar el Divi Theme Builder ¡Oye! Así es como:

Construir Plantilla Resultados Página
Construir la plantilla de la página de resultados con el Editor Divi
  1. Vaya a la pestaña Divi Theme Builder
  2. Haga clic "Añadir un nuevo modelo"
  3. Asignarle el modelo « Resultados de búsqueda »
  4. Validar haciendo clic "Crear un modelo"
  5. Haga clic "Construyendo un Cuerpo Personalizado"

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

Una vez creado el modelo, sólo tiene que hacer el diseño de esta página sin olvidar los módulos necesarios:

Agregar título dinámico
Añadir un título dinámico dentro de la plantilla de página de resultado
  1. Dentro del diseño, inserte una nueva línea (también llamada "row")
  2. Luego inserte un Módulo de texto
  3. En la pestaña Índice de la Módulo de texto, haga clic en el icono de base para uso de contenidos dinámicos propuesto por Divi
  4. Elija « Poster / Título del archivo »
Título Dinámica - continuó
Título dinámico añadido – continuado
  1. Este título dinámico mostrará: « Su título de publicación dinámica aparecerá aquí ». No intentes modificar su texto.
  2. Sin embargo, puede cambiar su apariencia desde la pestaña Estilo. No dude en cambiar su tamaño, color, fuente, etc. para que sea por tu gusto.

3.2 – Resultados de búsqueda de visualización

Cuando el usuario de Internet toma una palabra clave usando la lupa, el sistema nativo de WordPress le encontrará resultados. Así es como hacer que aparezcan en su página de resultados de búsqueda:

Agregar módulo de Blog
Añadir módulo Blog para ver los resultados de búsqueda
  1. Añadir una nueva fila
  2. Añadirlo Módulo de Blog
  3. En la configuración de este módulo, en la pestaña Índice, seleccione Sí. para la opción « Mensaje para la página actual ».
  4. En la pestaña Contenido > ElementosPuedes definir lo que quieras mostrar.
  5. Entonces en la pestaña Estilo Modelo, puedes elegir el Modelo de rejilla que es mucho más agradable que el Modelo de pantalla completa
  6. Quiero decir, desde entonces Tapa 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 renovar la investigación (opcional)

Imagínese que su lector no encontró su felicidad en su primera búsqueda, usted puede mejorar su experiencia ofreciéndole a renovar esta acción sin tener que pasar de nuevo a través del icono de la lupa. Esta parte es opcional pero si lo desea, aquí está cómo hacerlo:

Añadir un nuevo título
Añadir nuevo título
  1. Añadir una nueva sección
  2. Insertar un Módulo de texto para explicar al usuario de Internet que puede renovar su investigación.
  3. Por ejemplo "Recomendar una nueva búsqueda".
Agregar módulo de búsqueda
Añadir el módulo de búsqueda dentro de la plantilla
  1. A continuación, añadir un Módulo de búsqueda
  2. En la configuración de este módulo, desde la pestaña Índice, puede introducir el texto del Titular (es decir, el texto predeterminado en la barra de búsqueda). Por ejemplo: ¿Qué estás buscando?
  3. Desde Índices de Excepciones, este módulo le permite excluir ciertos contenidos de los resultados, por ejemplo páginas, artículos o ciertas categorías de artículos. Desafortunadamente, no podemos excluir ciertas URL específicas, veremos más adelante en este artículo cómo lograr este...
  4. Entonces, entra. Ficha de estilo, usted puede fijar la mirada de la barra de búsqueda (color, etc.)
  5. Ahí, tu barra de búsqueda está lista.

3.4 - Agregar llamadas a la acción (opcional)

Su página de resultados de búsqueda es ahora funcional, pero nada le impide agregar varias llamadas a la acción para animar a los usuarios a visitar otras páginas o descubrir los productos emblemáticos de su tienda!

Después de todo, esta página te pertenece y puedes hacer lo que quieras.

Página de búsqueda personalizada Visual
Página de búsqueda personalizada Visual
  1. Añadir por ejemplo una fila con botones, o tus últimas 3 entradas de blog, o un formulario de contacto...
  2. Guarda tu modelo.
  3. Deja el modelo y asegúrate de guardar de nuevo dentro del tema del constructor...

4 – Configure Google Analytics Site Search

Al principio del artículo, le dije que 348 personas visitaron mi búsqueda resultados página El mes pasado... Si conozco ese número, es porque he activado una pequeña opción en mi cuenta río arriba. Google Analytics.

Si usted también quiere recoger este tipo de estadísticas, usted necesita activar...

Además de conocer el número de visitantes que usan su motor de búsqueda interna, usted también conocerá las palabras clave que se han introducido en esta barra de búsqueda ... Esta es una información importante que puede decirle las necesidades de sus visitantes.

Aquí está cómo activar esta característica:

Permitir Google Analytics Site Search tracking
Permitir Google Analytics Site Search tracking
  1. Nos vemos en la pestaña Administración su cuenta de Google Analytics
  2. Seleccione su cuenta
  3. Seleccione su propiedad
  4. Haga clic Ver Configuraciones
  5. En la parte inferior de la página, active la opción Búsqueda del sitio
  6. En el campo Parámetro solicitud, escriba "s". Este es el parámetro utilizado en la URL por sitios de WordPress cuando los usuarios buscan.
  7. Grabar.

Aquí, a partir de ahora, su cuenta de Google Analytics registra visitas y solicitudes de esta página (ver la documentación oficial para Configuración Búsqueda del sitio).

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

Finalmente, para completar esta página, puede excluir ciertos resultados de búsqueda por caso. Por ejemplo, si su sitio tiene páginas o páginas privadas que no tienen interés en Internet (carrito de página, página mi cuenta, etc.) puede decidir excluirlas de los resultados.

Para ello puede utilizar la extensión gratuita Exclusión de búsqueda.

Excluir algunos resultados
Excluir algunos resultados de investigación

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

  • Simplemente instale y luego active...
  • Ver la lista de sus páginas o artículos
  • Haga clic Cambio rápido
  • Opción de verificación "Exclude from Search Results" si desea que esta publicación no aparezca en la página de resultados de búsqueda de su sitio.
Búsqueda Exclusión de opción

Si desea excluir ciertas páginas sin usar plugins, sólo añadiendo algunas líneas de código, Lea este artículo.

6 - En conclusión...

Ahora eres el feliz dueño de una hermosa búsqueda resultados página ¡Y solo te llevó unos minutos!

También puede descargar un modelo preconstruido gratis crear su página de resultados de búsqueda más rápido (disponible en el blog oficial).

¿Alguna vez has personalizado? ¿Tiene alguna otra idea para mejorar esta página? Dilo en comentario.

Resultado Divi Pin
Página

Quieres personalizar ¿Divi como profesional? Descubre todos los tutoriales!

Obtener Divi

Entrenamiento Divi

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

icono 256x256

Proudly translated by wpLingua, la extensión de traducción para WordPress ¡Que me desarrolle! SEO-Friendly / Automático / Editable

33

  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…

  22. juan puyol

    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

  23. Lycia Diaz

    Je ne sais pas si c’est possible

  24. Marie-Noëlle

    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.

  25. Marie-Noëlle

    Merci Lycia, je vais tester. Bonne journée,
    MN

  26. Graines de référenceur

    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

  27. Jean

    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

  28. Lycia Diaz

    Jean, il y a plein d’option, j’ai juste paramétré cela.

  29. Solène

    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!

  30. Lycia Diaz

    Ah oui c’est bizarre. Là comme ça je vois pas…

  31. Elise

    Merci Lycia,
    Pour ceux que ça intéresse, pour faire la même chose avec woocommerce et afficher des produits dans les résultats de recherche, on remplace le module ‘blog’ par ‘produits woo paramètres’ ; attention à bien cocher la case ‘utiliser la page actuelle’.

  32. Lycia Diaz

    Super ! Merci pour l’astuce Elise !

Presentar un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *

Este sitio utiliza Akismet para reducir indeseables. Más información sobre cómo se utilizan sus datos de retroalimentación.