Aprende con este tutorial a colocar un icono de búsqueda en Infinity Pro que, al hacer clic, abra un campo de búsqueda que ocupe todo el ancho de página.
Contar con icono de búsqueda en la parte superior de la web mejora la experiencia de usuario (UX), ya que permite a los lectores ir directos al grano.
Aunque esta funcionalidad se puede implementar de distintas maneras, una de las más visuales e intuitivas es la que utiliza el tema Monochrome Pro:
Tiene un icono en forma de lupa y cuando lo clicas se abre un formulario de búsqueda que utiliza todo el alto y ancho de la cabecera. De esta forma, genera un espacio amplio para que el visitante puede introducir fácilmente el término que desea encontrar.
¿Quieres conseguir este mismo efecto en el child theme Infinity Pro de Génesis?
A continuación te explico cómo.
Pasos para insertar el buscador de Monochrome Pro en Infinity Pro mediante código
1. Crea un fichero header-search.js
Introduce este snippet en un nuevo archivo header-searh.js:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Este script es el encargado de gestionar los efectos derivados de la interacción con el icono de búsqueda.
Coloca este archivo en el la carpeta /js/ del child theme.
2. Modifica el fichero functions.php
Ahora añade al final del archivo functions.php el siguiente código:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Con estas líneas consigues:
- Insertar el script encargado del comportamiento del icono de búsqueda (header-search.js).
- Añadir el icono de búsqueda en el header.
- Agregar el formulario de búsqueda a la cabecera.
3. Modifica el archivo style.css
Por último, introduce el siguiente código al final del fichero style.css:
Para ver este código y los otros 1869 snippets de esta web,
identifícate o suscríbete aquí.
Con este último paso, consigues aplicar los estilos para que todo se vea correctamente.
3.1. Alternativa
Si lo prefieres, puedes colocar la primera parte del código (hasta las media queries) en el apartado de Site Header y el resto después de las media queries.
¿Qué ventaja tiene insertarlo todo al final?
Si el child theme recibe una actualización te resultará más sencillo copiar el snippet y volver a pegarlo en la nueva versión.
Así, dependiendo del proyecto (propio o para un cliente), te interesará aplicar estos cambios de una u otra forma. Tú eliges. 😉
Conclusiones
Ofrecer la opción de búsqueda en la parte superior de la página favorece una buena experiencia de usuario.
Y esto es aún más determinante para las conversiones de la web si estamos hablando de un ecommerce o una página con mucho contenido.
Si tú o tu cliente os habéis enamorado de la elegancia y funcionalidad del tema Infinity Pro, ¿por qué no ponerle el broche de oro con un icono de búsqueda que ocupe toda la cabecera, tal y como aparece en Monochrome Pro?
Si tienes alguna pregunta o quieres darme una sugerencia para próximos snippets, cuéntamela en los comentarios (opción exclusiva para suscriptores).
