La funcionalidad de búsqueda de Webflow es un recurso fantástico para ayudar a los usuarios a encontrar el contenido que realmente quieren ver. En este tutorial, veremos cómo añadir un botón de búsqueda, un formulario de búsqueda e interacciones.
Pero primero, hablemos brevemente sobre algunas mejores prácticas para el diseño de búsquedas en sitios web, como cuándo y dónde usar formularios de búsqueda. Porque, como ocurre con todo en el diseño web, el hecho de que puedas añadir algo no significa que debas hacerlo.
Cuándo añadir un formulario de búsqueda
Al decidir si usar o no la búsqueda en tu sitio (o cualquier otra función, en realidad), es útil ponerse en el lugar de los visitantes. Pregúntate: ¿por qué vienen a tu sitio web y qué contenido están buscando?
Si tienes un sitio sencillo de cinco páginas, estas son las que esperas: inicio, servicios, portafolio, quiénes somos y contacto. Dado que la navegación principal puede guiar fácilmente a los visitantes, es poco probable que necesiten una búsqueda.
Pero si tienes un blog con decenas, o incluso cientos, de publicaciones y el usuario tiene que desplazarse por cientos de elementos solo para encontrar lo que busca, ¡la función de búsqueda de Webflow es tu mejor aliada!
Dónde añadir un formulario de búsqueda
La búsqueda suele tener dos ubicaciones habituales en una página web: en la navegación principal o en un lugar destacado en la página de inicio o en la sección principal (hero).
La ubicación depende realmente del objetivo de tu visitante. Supongamos que tienes un sitio web de recetas donde el objetivo principal es encontrar un ingrediente o un plato específico. Tiene sentido hacer que la búsqueda sea prominente en la sección principal. Si tienes un blog, bastará con tener un botón de búsqueda visible en la navegación principal, ya que la búsqueda es una función añadida y no la llamada a la acción principal.
Cómo añadir un formulario de búsqueda
Que algo sea funcional no significa que no deba ser atractivo y sacar una sonrisa a tu usuario. Si has leído alguna de mis publicaciones en el blog, sabrás que me encanta usar las increíbles interacciones de Webflow; los elementos del formulario de búsqueda no son una excepción.
Así que, para este tutorial, crearemos un formulario de búsqueda interactivo como este:
Echa un vistazo al resultado real en el sitio de demostración, y/o clónalo para hacerlo tuyo.
Paso 1: Añadir un botón de búsqueda
Voy a usar el componente de navegación de Webflow y luego añadiré un div, que actuará como mi botón de búsqueda interactivo.
Asigna al div la clase “Search Form Button” con estos ajustes:
- Display: inline block
- Relleno: superior, izquierdo, inferior: 20px / derecho: 80px
- Posición: relativa
Estoy usando la tipografía Montserrat, así que he ajustado el grosor y la alineación del texto. Puede que tú no necesites hacerlo.
- Borde izquierdo: sólido, 1px, #c9c9c9
- Cursor: puntero
A continuación, añadiremos un icono de búsqueda de Flaticon. Junto al icono, incluiremos dos elementos de texto. Cambia el texto de ambos a Buscar y Cerrar, respectivamente.
Asigna al icono la clase “Search Icon” y un ancho de 15px.
Después, añade la clase “Search Button Text” al primer elemento de texto con los siguientes ajustes:
- Visualización: bloque en línea
- Margen izquierdo: 5px
- Posición: absoluta
Ahora añade la clase “Search Button Text Close” al segundo elemento de texto con los siguientes ajustes:
- Visualización: bloque en línea
- Margen izquierdo: 5px
- Posición: absoluta
Paso 2: Añadir un formulario de búsqueda
Añade un div en la parte superior de la estructura de tu sitio y asígnale la clase “Search Wrapper”.
Aplica los siguientes ajustes:
Ajustes del degradado de fondo:
- Tipo: degradado lineal
- Ángulo: 45 grados
- Color: #1d1d1d
- Color: #424242
Ajustes de sombra de caja (box shadow):
- Tipo: interior
- Color: rgba(0, 0, 0, 0.65)
- Ángulo: 0 grados
- Distancia: 17px
- Desenfoque: 40px
- Tamaño: -25px
A continuación, coloca el componente de búsqueda en el contenedor de búsqueda y asígnale la clase “Search Form Wrapper” con estos ajustes:
- Display: flex
- Diseño flexible: justificar al centro, alinear al centro
- Margen inferior: 0px
- Desbordamiento: oculto
Selecciona el campo de entrada de búsqueda y asígnale la clase “Search Input” con los siguientes ajustes:
- Relleno izquierdo y derecho: 25px
- Margen inferior: 0px
- Altura: 70px
- Grosor de fuente: extra ligero
- Color de fuente: #ffffff
- Tamaño de fuente: 40px
- Altura de línea: 45px
- Color de fondo: transparente
- Borde: ninguno
Selecciona el botón de búsqueda y añade la clase “Search Button” con estos ajustes:
- Relleno izquierdo y derecho: 35px
- Altura: 70px
- Tamaño de fuente: 20px
- Color de fondo: transparente
- Borde: izquierdo, sólido, 1px, gris
- Transiciones: color de fondo, 200ms, suavizado
- Transiciones: altura, 200ms, suavizado
Ahora vamos a añadir un estado de "hover" al botón de búsqueda. Selecciona "Hover" en el menú desplegable "States" que aparece sobre el campo de entrada del selector de clase.
Ajusta la siguiente configuración:
- Color de fondo: rgba(0, 0, 0, 0.43)
- Altura: 95px
Listo. Vamos a añadir las interacciones.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Paso 3: Añadir interacciones
Para añadir interacciones, selecciona el botón de búsqueda en la navegación principal y abre el panel de interacciones.
Haz clic en el icono de más junto al texto del activador del elemento. Selecciona "Mouse Click (Tap)" en la lista desplegable.
En la sección "On 1st Click", selecciona "Start an Animation" en el menú que aparece junto al texto "Action".
Haz clic en el icono de más en la sección "Timed Animations".
Ponle a tu interacción el nombre "Search Form Click In".
A continuación, selecciona el "Search Form Wrapper" en el panel del navegador, vuelve al panel de interacciones y haz clic en el icono de más junto al texto de acciones temporizadas. En el menú desplegable, elige "Size".
Aplica la siguiente configuración a la interacción:
- Afectar a: clase, todos los elementos con esta clase
- Tiempo: establecer como estado inicial
- Altura: 0px
Haz clic derecho en la interacción de tamaño del Search Form Wrapper y selecciona “Duplicar” en el menú desplegable.
Usa los siguientes ajustes:
- Afectar a: clase, todos los elementos con esta clase
- Comenzar después de la acción anterior
- Suavizado: In out quart
- Duración: 0.6s
- Altura: 95px
Selecciona el elemento Search Button Text Close y crea una nueva interacción de estado inicial de opacidad haciendo clic en el icono de más.
Aplica los siguientes ajustes:
- Afectar a: clase, todos los elementos con esta clase
- Temporización: Establecer como estado inicial
- Opacidad: 0%
Duplica esta interacción haciendo clic derecho sobre ella y seleccionando la opción de duplicar en el menú desplegable.
Aplica estos ajustes a la nueva interacción:
- Afectar a: clase, todos los elementos con esta clase
- Suavizado: ease in out
- Duración: 0.4
- Opacidad: 100%
Ahora selecciona Search Button Text: haz clic en el icono de más y, en el menú desplegable, elige la interacción de opacidad.
Usa los siguientes ajustes:
- Afectar a: clase, todos los elementos con esta clase
- Suavizado: ease in out
- Duración: 0.4s
- Opacidad: 0%
Con el Search Form Wrapper seleccionado, haz clic en el icono de más junto a las interacciones de Search Button Text y elige tamaño en el menú desplegable.
Aplica estos ajustes a la interacción:
- Suavizado: in out quart
- Duración: 0.8s
- Altura: 95px
Ahora vuelve al panel de interacciones y haz clic en el menú desplegable de la sección “On 2nd Click”.
Elige iniciar una animación.
Haz clic en los tres puntos junto a Search Form Click In y elige duplicar en el menú desplegable.
Cambia el nombre de esta interacción a “Search Form Click Out”.
Resalta las dos acciones de estado inicial, haz clic derecho y selecciona eliminar en el menú desplegable.
Selecciona la interacción Search Button Text Close y cambia la opacidad al 0%.
Ahora selecciona la interacción Search Form Wrapper y cambia el ajuste a 0px.
Selecciona la interacción Search Button Text y cambia la opacidad al 100%.
¡Listo! Previsualiza o publica tu sitio para echarle un vistazo. Ah, y si usas el componente de navegación de Webflow, esto funcionará de forma adaptativa por defecto.
Enséñanos tus formularios de búsqueda (favoritos)
Espero que esto te inspire a mostrar tus funciones de búsqueda de formas nuevas. Cuéntame sobre tus interacciones de búsqueda en los comentarios de abajo, ¡nos encantaría saber de ti!
