El bloque de Formulario de Búsqueda te permite añadir un cuadro de búsqueda totalmente funcional a cualquier página de SeedProd, ofreciendo a los visitantes una forma instantánea de encontrar el contenido que buscan. Ya sea que estés creando un blog, una página de destino o un sitio web completo, añadir un formulario de búsqueda ayuda a reducir la fricción y mantiene a los usuarios comprometidos al mostrarles contenido relevante rápidamente.
El bloque ofrece una configuración flexible: elige entre un botón de icono o un botón de texto, establece un texto de marcador de posición personalizado, controla la altura y el ancho del formulario, y ajusta los colores tanto para la entrada de búsqueda como para el botón. Puedes alinear el formulario en cualquier posición y ajustar el espaciado para un diseño limpio y coherente en todos los tamaños de pantalla.
Añadir el Bloque de Formulario de Búsqueda a tus Páginas
Sigue estos pasos para añadir un bloque de Formulario de Búsqueda a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Formulario de Búsqueda en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Formulario de Búsqueda para abrir su configuración. En la pestaña Contenido, la sección Configuración del Formulario de Búsqueda te permite configurar el texto del marcador de posición, el estilo del botón, el tamaño del formulario y la alineación.
- Marcador de posición: Introduce el texto de ayuda que se muestra dentro del campo de entrada de búsqueda antes de que un visitante empiece a escribir (por ejemplo, "Buscar..." o "¿Qué buscas?"). Esto guía a los usuarios sobre qué pueden buscar.
- Tipo de Botón: Elige cómo aparece el botón de envío de la búsqueda: Icono muestra un botón de icono compacto (elige entre una lupa o una flecha), mientras que Texto muestra un botón con etiqueta de texto completa. Cuando se selecciona Texto, aparece un campo Texto para que puedas establecer la etiqueta del botón (por ejemplo, "Buscar" o "Ir").
- Icono: (Visible cuando el Tipo de Botón está configurado como Icono.) Selecciona qué estilo de icono usar para el botón de búsqueda: un icono de lupa circular o un icono de flecha.
- Tamaño: Establece la altura total del formulario de búsqueda usando el control deslizante (30–80px). Esto controla qué tan alto aparecen el campo de entrada y el botón en la página.
- Alineación: Establece la alineación horizontal del formulario de búsqueda: Izquierda, Centro o Derecha.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes ajustar los colores y las dimensiones del formulario de búsqueda, y luego controlar el espaciado y la visibilidad en diferentes dispositivos.
Colores y Ancho:
- Fondo de Búsqueda: Establece el color de fondo del campo de entrada de búsqueda.
- Color de Texto de Búsqueda: Establece el color del texto escrito en el campo de entrada de búsqueda, así como el color del texto del marcador de posición.
- Fondo del Botón: Establece el color de fondo del botón de envío de la búsqueda.
- Color del Botón: Establece el color del icono o texto del botón de envío de la búsqueda.
- Ancho: Establece el ancho general del formulario de búsqueda como un porcentaje de su contenedor (10–100%). Usa un valor más bajo para hacer el formulario más estrecho, o establécelo al 100% para una barra de búsqueda de ancho completo.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Formulario de Búsqueda (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el formulario y los elementos circundantes en la página.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de Formulario de Búsqueda (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el formulario de búsqueda y los bordes del bloque.
Atributos:
- ID CSS: Muestra el identificador único autogenerado para tu bloque de Formulario de Búsqueda. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agrega cualquier atributo HTML al elemento contenedor del bloque. Ingresa cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-search|enabled).
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculta el bloque de Formulario de Búsqueda en pantallas de escritorio.
- Ocultar en Tableta: Oculta el bloque de Formulario de Búsqueda en dispositivos tableta.
- Ocultar en Móvil: Oculta el bloque de Formulario de Búsqueda en dispositivos móviles.
Efectos de Animación:
- Animación de Entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de Formulario de Búsqueda entra en la vista. Las opciones incluyen Rebote, Fundido de Entrada, Zoom de Entrada, Girar de Entrada y muchas más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Formulario de Búsqueda y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has agregado con éxito un bloque de Formulario de Búsqueda a tu página! Un formulario de búsqueda bien ubicado mejora la navegación y mantiene a los visitantes interesados al ayudarles a encontrar exactamente lo que necesitan sin salir de tu sitio. Experimenta con los estilos de los botones, los colores de entrada y la configuración de ancho para crear una experiencia de búsqueda que se integre perfectamente en el diseño de tu página.