Personalizar la barra de búsqueda de tu sitio
5 min de lectura
Permite que tus visitantes busquen cualquier cosa en tu sitio usando la barra de búsqueda en Wix Site Search. Los resultados de la búsqueda se muestran en una lista, para que los visitantes puedan encontrar fácilmente lo que están buscando. Puedes cambiar el estilo y el diseño de la barra de búsqueda para que coincida con el diseño de tu sitio.
En este artículo, obtén más información sobre lo siguiente:
Personalizar los ajustes de la barra de búsqueda
Personaliza el texto del marcador de posición de la barra de búsqueda y las sugerencias de resultados.
Para personalizar los ajustes de la barra de búsqueda:
- Haz clic en la barra de búsqueda en el Editor.
- Haz clic en Ajustes.
- Personaliza las opciones de ajustes:
- Texto del marcador de posición: agrega un texto corto que se muestra cuando la barra de búsqueda está vacía.
Nota: Este texto desaparece cuando el visitante comience a escribir en la barra de búsqueda. - Mostrar sugerencias cuando empiezan a escribir: habilita o deshabilita las sugerencias de resultados que se muestran cuando un usuario comienza a escribir.
- Mostrar tendencias antes de que empiecen a escribir: habilita o deshabilita la palanca para mostrar ítems que son tendencia antes de que el usuario comience a escribir.
Nota: Para habilitar la función Mostrar tendencias antes de que empiecen a escribir, la palanca Mostrar sugerencias cuando empiezan a escribir debe estar habilitada.
- Texto del marcador de posición: agrega un texto corto que se muestra cuando la barra de búsqueda está vacía.
Cambiar el estilo de la barra de búsqueda
Establece el estilo, la alineación y el espaciado en tu barra de búsqueda desde el panel de Estilos.
Para cambiar el estilo de tu barra de búsqueda:
- Haz clic en la barra de búsqueda en el Editor.
- Haz clic en el icono Estilo
. - Personaliza las opciones de estilo:
- Elige un estilo: elige un estilo para tu barra de búsqueda.
- Alineación del icono: selecciona la posición del icono de búsqueda.
- Alineación del texto: selecciona la posición del texto.
- Relleno del texto: establece el espacio entre el borde de la barra de búsqueda y el texto.
- Relleno del icono: establece el tamaño del área del icono.
Nota:
Las opciones disponibles dependen del estilo que elijas.
Personalizar el diseño de la barra de búsqueda
Personaliza el diseño de tu barra de búsqueda para los diferentes estados:
- Normal: cuando la barra no está en uso.
- Efecto cursor: cuando los visitantes pasan el cursor por encima de la barra.
- Foco: cuando los visitantes han hecho clic en la barra.
Para personalizar el diseño de tu barra de búsqueda:
- Haz clic en la barra de búsqueda en el Editor.
- Haz clic en el icono Diseño
. - Selecciona un diseño preestablecido.
- Haz clic en Personalizar para personalizar el diseño más detalladamente.
- Haz clic en una pestaña para elegir el estado que deseas personalizar: Normal, Efecto cursor o Foco.
- Personaliza el estado con estas opciones:
- Color y opacidad del relleno: cambia el color del fondo de la barra y del ícono:
- Color del fondo de los campos: haz clic en el cuadro de color para seleccionar el color de fondo del campo de entrada y arrastra el control deslizante para aumentar o disminuir la opacidad.
- Fondo del botón: haz clic en el cuadro de color para seleccionar el color de fondo del ícono de búsqueda y arrastra el control deslizante para aumentar o disminuir la opacidad.
- Ícono del botón: haz clic en el cuadro de color para seleccionar el color del ícono de búsqueda y arrastra el control deslizante para aumentar o disminuir la opacidad.
- Borde: agrega y personaliza un borde para tu barra:
- Opacidad y color: haz clic en el cuadro de color para seleccionar el color del borde y arrastra el control deslizante para aumentar o disminuir la opacidad.
- Estilo del borde: selecciona el estilo del borde y en qué lados aparece.
- Ancho: arrastra el control deslizante para hacer el borde más grueso o más fino.
- Esquinas: haz las esquinas de tu barra más curvas:
- Ingresa un valor en una esquina o haz clic en el ícono de candado y cambia todos los valores juntos.
- Sombreado: agrega una sombra a la barra:
- Haz clic en la palanca Activar sombra para agregar una sombra.
- Personaliza la sombra con estas opciones:
- Ángulo: selecciona el ángulo de la sombra.
- Distancia: arrastra el control deslizante para aumentar o disminuir la distancia de la sombra.
- Tamaño: arrastra el control deslizante para aumentar o disminuir el tamaño de la sombra.
- Efecto borroso: arrastra el control deslizante para aumentar o disminuir el desenfoque de la sombra.
- Opacidad y color: haz clic en el cuadro de color y selecciona el color de sombra y arrastra el control deslizante para aumentar o disminuir la opacidad de la sombra.
- Texto: cambia el formato del texto de la barra:
- Color del marcador de posición: haz clic en el cuadro de color para seleccionar el color del texto del marcador de posición y arrastra el control deslizante para aumentar o disminuir la opacidad.
- Color: haz clic en el cuadro de color para seleccionar el color del texto de entrada.
- Tema: haz clic en el menú desplegable y selecciona el tema de texto.
- Fuente: haz clic en el menú desplegable y selecciona la fuente del texto.
- Tamaño de la fuente: arrastra el control deslizante para establecer el tamaño del texto.
- Negrita/cursiva: haz clic en las opciones para dar formato al texto.
- Color y opacidad del relleno: cambia el color del fondo de la barra y del ícono:
Cambiar la posición de la barra de búsqueda:
Para cambiar la posición de la barra de búsqueda, haz clic en ella y arrástrala al encabezado o al pie de página de tu sitio.
¿Te ha sido útil?
|