Cómo añadir una búsqueda AJAX con JetSearch

Por Lionel Valentin Caderon

Diseñador de Páginas Web, Artista Comercial, Caricaturista y Escritor pepiniano nacido en Añasco, Puerto Rico.

También hemos Publicado

Tutorial de Esta Semana

Cómo añadir una búsqueda AJAX con JetSearch

Jet Search

Síguenos en Facebook

Jet Search
Play Video

El Formulario de búsqueda AJAX es un formulario de búsqueda que muestra los resultados mientras aún estás escribiendo, lo que hace que el proceso de búsqueda de información sea lo más rápido posible. JetSearch es una aplicación excelente para Elementor ya que permite agregar un formulario de búsqueda AJAX a las páginas del sitio web para que el usuario pueda encontrar fácilmente el contenido necesario. Uno de los lugares más comunes donde se puede añadir un formulario de búsqueda es en el Encabezado o Cabecera. Este tutorial describe todo el proceso de agregar una búsqueda AJAX al Encabezado del sitio web con la ayuda de JetSearch.

Comercio Local
Anunciate Ahora 360
Colon Pratts 360
On Stage
Laboratorio San Sebastian
La Casa del Bordado
Funeraria Rios Caldas
Tomassini Dental Laboratory
Cómo agregar una búsqueda AJAX al encabezado del sitio web
  1. Para agregar un formulario de búsqueda AJAX, abra el Panel de WordPress y vaya al directorio CrocoBlock> Mi biblioteca en caso de que esté usando CrocoBlock. También puede agregar un formulario de búsqueda al encabezado de su sitio web usando Elementor> Bloque Mis plantillas, donde también puede acceder a las plantillas de encabezado.
  2. Seleccione la plantilla de encabezado y haga clic en la opción Editar con Elementor.
  3. Cuando el editor abre encuentra el widget de búsqueda Ajax. Arrástrelo y suéltelo en la sección necesaria dentro de la plantilla del encabezado.
  4. No dude en utilizar todas las configuraciones de personalización disponibles en los bloques de Contenido, Estilo y Avanzado para crear un formulario de búsqueda llamativo.
  5. Una vez hecho todo, haga clic en el botón Actualizar para guardar el progreso.

¡Ahora, puede agregar un formulario de búsqueda AJAX a cualquier parte de su sitio web! Puede hacer que aparezca en el encabezado, o en cualquier lugar que necesite, agregando un widget de búsqueda Ajax a las secciones.

Cómo ordenar los resultados de búsqueda por relevancia utilizando el complemento JetSearch para Elementor

Dependiendo del contenido de las publicaciones, es posible que desees organizarlos en cierto orden, de modo que el contenido más importante se muestre por encima de los menos importantes, y la publicación menos importante se muestre la última. Puedes abordar esta tarea fácilmente mediante JetSearch, que permite clasificar los resultados de búsqueda por relevancia o importancia.

En este tutorial, aprenderás a administrar los resultados de búsqueda para que las publicaciones se muestren por relevancia.

Clasificación de los resultados de búsqueda por relevancia con la ayuda de JetSearch

  1. Asegurémonos de que las publicaciones que deseas mostrar primero contengan las palabras clave necesarias. Debes establecer el orden de las publicaciones que se mostrarán en los resultados de búsqueda, utilizando la densidad de las palabras clave, es decir el número de veces que la palabra clave aparece en la entrada. Esto es necesario para preservar las lógicas de relevancia.

    Para mostrar el resultado como el primero, y por lo tanto más relevante e importante, debes asegurarte de que tenga la palabra clave necesaria en su título, contenido y extracto.

    Para mostrar el resultado como segundo más cercano al más relevante, debes establecer la palabra clave en su contenido: extracto y extracto.

    Los resultados menos importantes deben contener las palabras clave también. La importancia de los resultados disminuye a medida que las palabras clave se establecen sólo en el contenido, en el extracto o sólo en el título.

  2. Finalmente, es hora de configurar el widget de búsqueda para mostrar los resultados de búsqueda por relevancia. Para lograr esto, abre la página en la que deseas agregar el formulario de búsqueda con Elementor page builder. Después de eso, encuentra el widget Ajax y suéltalo en la página.
  3. Continúa con el bloque de Contenido y selecciona la opción Relevancia en el menú desplegable Ordenar resultados por.
  4. Puedes filtrar los resultados de la búsqueda ya sea por orden descendente o ascendente en los resultados de Filtrar por.
  5. El último paso es hacer clic en el botón Actualizar.
    ¡Eso es todo! ¡Ordena tu publicación como desees ahora!
Cómo personalizar la apariencia de los resultados de búsqueda utilizando JetSearch

Este tutorial te muestra todas las configuraciones de estilización del widget de Búsqueda Ajax. Después de leerlo, aprenderá a personalizar cada elemento de este poderoso widget. Para comenzar a estilizar el estilo de Búsqueda de Ajax, comienza a editar el formulario de búsqueda y navega hasta el bloque de Estilo para acceder a la configuración de estilización. Aquí verá 10 bloques de estilización dedicados a cada opción del widget de Búsqueda de Ajax.

Personalizando el formulario de búsqueda

En este bloque, puedes establecer el color de fondo y la sombra del cuadro en los modos Normal y Enfoque. Además, tienes la oportunidad de establecer los valores del relleno y de radio del borde.

En el bloque Formulario de búsqueda, establece el color de fondo y los valores de sombra de cuadro que coincidan con la combinación de colores de tu sitio. No te olvides de configurarlo para que el Focus personalice también la apariencia del elemento en este modo.

Ajusta el color de la sombra si es necesario. Establece el relleno y el radio del borde para que el formulario se vea bien.

Campo de entrada

Aquí puedes personalizar la tipografía de la entrada, los colores -ambos están disponibles en dos modos: Normal y Enfoque-, los rellenos y los márgenes del campo de entrada, y también establecer el borde.

Has clic en el icono de Tipografía y selecciona una Familia para la Fuente y Tamaño deseado para el texto. Además, puedes jugar con el peso, el estilo, la transformación y la decoración del elemento de texto.

A continuación, configura los valores de relleno y margen, ancho de borde y radio. Se recomienda establecer el mismo radio de borde que en el bloque anterior para sincronizar los bordes y hacer que el estilo sea más elegante.

Botón de Enviar

La configuración de estilo del botón Enviar es prácticamente la misma. Sin embargo, si has agregado el texto del botón, puedes personalizar su tamaño, tipografía, etc. Ya conoces otras configuraciones de los bloques anteriores: el color de fondo, la sombra de la caja, el margen y los valores de relleno, el tipo de borde y radio del borde.

Área de resultados

Este bloque está dedicado a la aparición del área de resultados. Como es un bloque separado con el encabezado y el pie de página, hay algunas configuraciones adicionales. Para ver los cambios en Elementor, escribe la palabra de búsqueda y haga clic en el botón Enviar. Cuando aparece el bloque de resultados de búsqueda, puedes ajustar la configuración y ver los cambios inmediatamente.

Primero, puedes establecer el espacio adecuado entre el campo de búsqueda y el área de resultados. A continuación, elige el color de fondo, la sombra del cuadro y el radio del borde.

En la sección Encabezado de resultados establece el relleno. En caso de que necesites establecer el tipo de borde específico, puedes personalizar su ancho y elegir el color del borde también.

Luego pasa a la configuración de la lista de resultados. Selecciona Sí en la opción Habilitar desplazamiento para ayudar a los visitantes a ver cómodamente la lista de resultados. Aquí también puedes establecer la altura de la lista de desplazamiento, configurar los colores de la barra de desplazamiento y su imagen de miniatura.

El bloque de pie de página de resultados es el último. Aquí debes configurar el relleno (normalmente es el mismo que el relleno del encabezado) y personalizar el tipo de borde si es necesario.

Resultados de los artículos

Aquí puedes diseñar el contenido del área de resultados: Imagen de miniaturas, títulos, descripciones, etc. Primero, configura los colores de fondo, título y contenido en 2 modos: Normal y Enfoque. A continuación, elige el relleno y la alineación.

También puedes habilitar un divisor y diseñarlo de la forma que prefieras. Establecer el ancho de la miniatura y el espacio. Además, puedes ajustar el radio del borde de la miniatura.

Por último, personaliza la tipografía del título y el contenido y establece los valores de margen adecuados.

Contador de resultados

Además, puedes personalizar completamente el contador de resultados. Todos los ajustes te deben ser familiares por los bloques anteriores. Hay la tipografía y los colores disponibles en dos modos: Normal y Enfoque. Además, hay valores de relleno, tipo de borde y radio que se pueden cambiar fácilmente.

Botón de resultados completos

La personalización del botón de resultados completos y el contador de resultados son muy similares. Para que la vista general sea agradable a la vista, intenta que la apariencia de estos 2 campos sea más o menos idéntica.

Dependiendo del tipo de navegación que haya elegido en el bloque de Contenido, ya sea viñeta, número o flechas, el título de este bloque cambia y aparecen las configuraciones específicas.

Sin embargo, algunos de los ajustes tienen mucho en común. Puedes configurar los colores en tres modos: Normal, Enfoque y Activo. En caso de que estés usando la paginación numérica, también puedes personalizar la tipografía y el estilo de los caracteres.

Notificaciones

Las notificaciones que aparecen en caso de que los resultados de la búsqueda sean negativos también son totalmente personalizables. Ajusta la tipografía, el color del texto, su alineación y los valores de relleno.

Cargador

En el último bloque, puedes elegir el color para la ruleta o Cargador. Espero que este tutorial sea de ayuda. ¡Mejora tu forma de búsqueda con facilidad!

Cómo cambiar las notificaciones predeterminadas en JetSearch que se muestran cuando no se encuentra nada

Con el complemento JetSearch puedes personalizar cada elemento de la funcionalidad de búsqueda, definir cómo se muestran los resultados. Pero, ¿qué pasa si el visitante ha solicitado el contenido que no existe?

En este tutorial, explicaremos cómo personalizar las notificaciones que aparecen en caso de que el sistema no pueda encontrar resultados para la solicitud del visitante.

Cambio de notificaciones

  1. Lo primero que debes hacer es abrir tu página donde se agrega el widget de búsqueda Ajax con Elementor. Has clic en el widget para comenzar a editarlo.
  2. Has clic en el bloque de Notificaciones. Aquí puedes ver el texto de notificación predeterminado para los casos en que no se encuentra nada.
  3. Escribe tu propio mensaje y has clic en el botón Actualizar.
  4. Para personalizar esta notificación, ve a Estilo> Notificaciones en el editor de Elementor. Aquí puedes seleccionar la tipografía de la notificación, establecer el color, la alineación y los rellenos.

¡Eso es todo! Ahora puedes consultar el nuevo mensaje de notificación y su estilo en el front-end. Para hacerlo, simplemente escribe una solicitud incorrecta en el campo de búsqueda y verás el contenido que has configurado. Como puedes ver, JetSearch es tan fácil de usar como respirar.

Cómo personalizar el contenido que se muestra en los resultados de búsqueda utilizando JetSearch

Con JetSearch para Elementor, puedes personalizar el contenido de los resultados de la búsqueda sin necesidad de conocimientos de codificación. Este tutorial te muestra los pasos que debes seguir para personalizar el contenido que se muestra en los resultados de búsqueda. ¡Sigue leyendo para aprender más sobre cómo hacerlo!

Personalización de resultados de búsqueda.

  1. Primero, abre la página en Elementor y localiza el widget de Búsqueda Ajax. Haz clic en él para comenzar a editar la forma en que muestra los resultados de búsqueda.
  2. En el bloque de contenido, debes abrir la pestaña Área de Resultados. Aquí puedes ver diferentes opciones de personalización.

    En caso de que las publicaciones tengan imágenes, cambia a Sí la opción Mostrar Miniatura de publicación. Además, selecciona el tamaño de miniatura para definirlo.

    Establece la longitud del extracto de la Entrada. Un pequeño consejo: antes de comenzar a establecer valores, intenta pensar e imaginar el diseño preferible del contenido. De esta forma, puedes hacer fácilmente toda la personalización en unos pocos clics sin ninguna duda.
  3. El siguiente paso es cambiar a Sí el contador Mostrar Resultados y el botón Mostrar Resultados Completos si es necesario. También puedes cambiar el texto de este botón.

Personalización de navegación de resultados

En este subbloque, puedes elegir la ubicación de los diferentes tipos de navegación. Puedes seleccionar mostrar los elementos de navegación en el encabezado, en el pie de página o en ambos. Si no necesitas configurar uno de los tipos de navegación, déjalo oculto. En caso de que prefieras flechas de navegación, debes seleccionar el tipo de flechas.

Personalización de navegación de resultados

La apariencia del área de resultados de búsqueda es totalmente personalizable. Puede configurar el color de fondo del contenedor de resultados, habilitar el desplazamiento para la lista de resultados y ajustar los rellenos para el encabezado y el pie de página del área de Resultados de Búsqueda.

Cuando el contenido esté configurado, has clic en el botón Actualizar y obtén una vista previa de los resultados de tu búsqueda.

Cómo personalizar el texto del Marcador de Posición que se muestra en el campo Buscar en JetSearch para Elementor

Con la ayuda de JetSearch para Elementor, puedes agregar un formulario de búsqueda al sitio web y personalizar su apariencia para que se ajuste a tu contenido y estilo. A partir de este tutorial en particular, descubrirás cómo personalizar el texto del marcador de posición en la barra de búsqueda usando JetSearch.

Personalización del texto del marcador de posición

  1. En primer lugar, encontrar el widget de búsqueda Ajax. Arrástralo y suéltalo en una nueva sección.
  2. Hay bloques de Contenido, Estilo y Avanzado donde puedes ajustar las configuraciones necesarias que definen el contenido de la Barra de Búsqueda. En nuestro caso, debemos proceder al bloque de Contenido.
  3. Abre el bloque Formulario de Búsqueda donde puedes ingresar el texto que se mostrará en la barra de búsqueda, o simplemente puedes dejarlo vacío y no se mostrará ningún texto.
  4. Después de eso, ve al directorio Estilo> Campo de entrada.
  5. Has clic en la pestaña Tipografía. Aquí encontrarás diferentes configuraciones de personalización del texto del marcador de posición. No dudes en cambiar el tamaño, el peso, el estilo, la transformación y la decoración del texto. También puedes configurar el espacio entre las letras usando la tecla de espaciado entre letras.
  6. El último paso es hacer clic en el botón Actualizar para confirmar los cambios.

¡Eso es todo! Ahora ya sabes cómo crear y mostrar la barra de Búsqueda Ajax en una forma más atractiva.

Compartenos en tus redes sociales

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Share on print

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit