¿Alguna vez has sentido que la barra de búsqueda de tu sitio ocupa mucho espacio y tu navegación se ve desordenada? ¿Pero qué pasaría si pudiera ser un poco más atractiva, un poco más moderna?
A lo largo de los años, hemos cambiado el diseño de nuestro sitio web varias veces y hemos experimentado para hacer que el formulario de búsqueda sea más atractivo. Y según nuestra experiencia, usar un formulario de búsqueda modal puede transformar la experiencia de búsqueda en tu sitio.
Estas pequeñas y prácticas cajas de búsqueda emergentes pueden mejorar seriamente la experiencia de usuario de tu sitio web, y no son tan complicadas de configurar como podrías pensar.
En este artículo, te mostraremos cómo agregar un formulario de búsqueda modal en WordPress sin editar código.
¿Qué es un formulario de búsqueda modal y por qué usarlo?
Un formulario de búsqueda modal es una ventana emergente que se superpone a tu página actual. Cuando un usuario hace clic en un icono de búsqueda en tu sitio de WordPress, aparece una ventana directamente sobre la página, que contiene solo el campo de entrada de búsqueda y el botón de envío. Piénsalo como un foco, que centra la atención en ese contenido específico.
Es diferente de una barra de búsqueda tradicional que podría estar ubicada en tu encabezado o barra lateral, que siempre está visible. Los formularios de búsqueda modal están ocultos por defecto y aparecen solo cuando un usuario desea buscar activamente.
Por ejemplo, en SearchWP, usamos un formulario de búsqueda modal para brindar una experiencia de búsqueda sin distracciones a nuestros usuarios. Así es como se ve en nuestro sitio web:
Un formulario de búsqueda modal mantiene el diseño de tu página limpio y ordenado. No más barras de búsqueda voluminosas que ocupan un valioso espacio. Además, la atención del usuario se dirige inmediatamente a la función de búsqueda cuando aparece. Es difícil de pasar por alto, lo cual es excelente para mejorar la participación.
Además, un formulario de búsqueda modal ofrece flexibilidad de diseño. Ya sea que tu sitio tenga un diseño minimalista o un diseño complejo, puede encajar perfectamente.
Ahora, veamos cómo agregar un formulario de búsqueda modal a tu sitio de WordPress.
Agregar un formulario de búsqueda modal en WordPress
La forma más fácil de mostrar un formulario de búsqueda modal es usando el plugin SearchWP Modal Search Form.
La mejor parte es que el plugin de búsqueda de WordPress es completamente gratuito y se basa en el estilo de tu tema de WordPress activo. No tienes que tocar una sola línea de código para editar su apariencia o estilo.
Para empezar, necesitarás instalar y activar el plugin SearchWP Modal Search Form. Si necesitas ayuda, consulta esta guía sobre cómo instalar un plugin de WordPress.
Tras la activación, puedes ir a la página SearchWP » Modal Form desde el panel de WordPress. Desde aquí, verás que la opción 'Habilitar formulario modal' estará activa.
A continuación, puedes desplazarte hacia abajo y seleccionar qué archivo CSS cargar para tu sitio. Por ejemplo, SearchWP Modal Search Form te permitirá elegir entre posicionamiento y estilo visual, estilo de posicionamiento o sin estilo.
Recomendamos usar la configuración predeterminada de ‘Posicionamiento y estilo visual’. De esta manera, obtendrás más control sobre dónde aparecerá el formulario de búsqueda y cómo se verá.
Además de eso, también hay opciones para habilitar el modo de pantalla completa y deshabilitar el desplazamiento.
El Modo de pantalla completa cubrirá toda la pantalla cuando un usuario abra el formulario, proporcionando una experiencia sin distracciones.
También puedes habilitar la opción Deshabilitar desplazamiento. Esto mejora aún más la experiencia de búsqueda al reducir el movimiento de fondo cuando un usuario se desplaza accidentalmente.
Cuando hayas terminado, simplemente haz clic en el botón ‘Guardar configuración’.
Mostrar el formulario de búsqueda modal en tu sitio web
A continuación, deberás mostrar el formulario de búsqueda modal en cualquier lugar de tu sitio web. SearchWP te permite añadir el formulario al menú de tu sitio, usar un bloque de Gutenberg o un shortcode.
Veamos cada método para mostrar el formulario de búsqueda modal en WordPress.
1. Añadir un formulario de búsqueda modal al menú de WordPress
Dependiendo de tu tema de WordPress, puedes añadir el formulario de búsqueda modal a cualquier menú de tu sitio.
Simplemente ve a Apariencia » Menús desde el panel de WordPress. SearchWP ahora añadirá un nuevo grupo llamado ‘Formularios de búsqueda modal de SearchWP’ debajo de los elementos del menú.
Selecciona el formulario modal y haz clic en el botón ‘Añadir al menú’.
Cuando hayas terminado, no olvides hacer clic en el botón ‘Guardar menú’.
Después de eso, puedes visitar tu sitio para verlo en acción.
2. Mostrar el formulario de búsqueda modal en entradas y páginas del blog
También puedes añadir el formulario de búsqueda modal a cualquier entrada o página de destino utilizando el bloque de Gutenberg o un shortcode. Esto es perfecto si deseas mostrar una opción de búsqueda dentro del contenido de tu sitio.
Primero, deberás visitar la página o entrada donde deseas mostrar el formulario de búsqueda. Una vez que estés en el editor de contenido, simplemente haz clic en el botón ‘+’ y añade el bloque ‘Formulario modal’.
Después de eso, puedes cambiar la configuración del bloque Formulario modal desde el panel de la derecha.
Por ejemplo, hay opciones para cambiar el texto, elegir una plantilla y seleccionar si el formulario será un enlace o un botón.
Cuando hayas terminado, simplemente haz clic en el botón Guardar o Publicar.
Desde aquí, puedes visitar la página o entrada para ver el formulario modal dentro de tu contenido.
Si prefieres usar shortcodes, puedes introducir el siguiente shortcode para mostrar el formulario modal en cualquier lugar de tu sitio.
[searchwp_modal_search_form]
También puedes aplicar personalizaciones que controlan varios atributos del modal en sí. Por ejemplo, el siguiente shortcode mostrará un botón con el texto ‘Abrir búsqueda’:
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]
Puedes editar cada atributo en el shortcode para personalizar el formulario de búsqueda modal. Por ejemplo, simplemente reemplaza el tipo con un enlace si no deseas mostrar un botón y edita el texto.
3. Mostrar el formulario de búsqueda modal en el área de widgets
También puedes añadir un formulario de búsqueda modal al área de widgets de tu tema de WordPress, como la barra lateral o el pie de página.
Para empezar, simplemente ve a Apariencia » Widgets desde el panel de administración de WordPress. Después de eso, puedes hacer clic en el botón ‘+’ y añadir el bloque de widget Formulario modal.
A continuación, verá diferentes opciones para editar la configuración del formulario modal en el panel de la derecha.
Hay opciones para cambiar el texto, elegir una plantilla y cambiarlo de enlace a botón.
Cuando haya terminado, haga clic en el botón ‘Actualizar’.
Desde aquí, puede visitar su sitio y ver el formulario modal en el área de widgets. Por ejemplo, lo hemos añadido a la barra lateral de nuestro sitio de demostración.
Qué sigue...
Ahora que sabe cómo añadir fácilmente un formulario de búsqueda modal a su sitio, puede ir un paso más allá y mejorar la experiencia de búsqueda general de sus visitantes.
La búsqueda predeterminada de WordPress tiene muchas limitaciones y no incluye información como categorías, etiquetas, campos personalizados, detalles del producto y más en el proceso de búsqueda. Sin embargo, puede cambiar esto usando SearchWP y reemplazar la configuración de búsqueda predeterminada.
El plugin le ayudará a crear motores de búsqueda personalizados ilimitados para su sitio web, configurar formularios de búsqueda personalizados e incluir taxonomías, campos personalizados, archivos multimedia y otra información importante al buscar contenido en su sitio.
La mejor parte es que puede usar el plugin SearchWP Modal Search Form con SearchWP y aprovechar todo el potencial de la búsqueda de su sitio web.
Esperamos que este artículo le haya ayudado a aprender cómo añadir un formulario de búsqueda modal en WordPress. También puede consultar nuestra guía sobre cómo crear una plantilla de página de resultados de búsqueda de Divi y cómo configurar los ajustes de búsqueda de WordPress para obtener los mejores resultados.
¿Listo para crear una experiencia de búsqueda de WordPress mejor y más personalizada? ¡Comience hoy mismo con SearchWP!
