[Ad_1]

Sin un campo de búsqueda, la navegación de su sitio se verá afectada. Es posible que tenga la experiencia de navegación más sólida en Internet, pero si sus usuarios no pueden buscar exactamente lo que están buscando, corre el riesgo (y probablemente lo hará) perder negocios. Este tutorial lo guiará para agregar un cuadro de búsqueda al menú secundario de Divi para que, sea cual sea el caso, sus usuarios siempre estarán a unos pocos clics de todo lo que necesitan.

Descripción general del cuadro de búsqueda Divi

oficina

versión de escritorio del cuadro de búsqueda divi

Móvil

versión móvil del cuadro de búsqueda de divi

Descargar y / o modificar el encabezado global

Para este artículo, usaremos el encabezado / pie de página gratuito que viene con nuestro paquete de diseño de entrega de comestibles. Simplemente puede descargar el .Zip *: francés archivar y extraer lo necesario json archivo en su computadora.

archivo json

Después de eso, vaya a su panel de WordPress y navegue hasta Divi - Generador de temas. Desde allí tienes que hacer clic en el icono de flechas arriba y abajo para abrir las opciones de portabilidad.

generador de temas para el cuadro de búsqueda divi

En el nuevo modal, haga clic en el Importación pestaña y encontrar el json archivo que descargó. Cuando esté listo, seleccione Importar modelos de generadores desde Tema divi para iniciar la descarga.

importar archivos

En este punto, está listo para ingresar al Encabezado global parte de plantilla de sitio web por defecto. Importar de json El archivo debería haber aplicado automáticamente el obsequio como el encabezado general del sitio.

encabezado global

Agregar un campo de búsqueda a la barra de menú secundaria

Al usar Divi Visual Builder, debería ver algo similar a esto como el encabezado global.

editor de encabezado global

Lo primero que queremos hacer es crear espacio para el campo de búsqueda. Queremos asegurarnos de que el campo de búsqueda sea fácilmente accesible para todos. visitantes, por lo que lo agregaremos al menú secundario (encima del Inicio / Contacto línea).

Para comenzar, agregaremos el cuadro de búsqueda usando el Módulo de búsqueda Divi en la tercera columna de la primera fila.

módulo de búsqueda en la tercera columna

El texto del marcador de posición es importante para los campos de búsqueda, así que cuando su módulo esté en su lugar, vaya a Parámetros y configura tu Zona reservada enviar un mensaje de texto a algo que le recuerde al usuario lo que debe buscar. ponemos ¡Encuentra artículos! como marcador de posición para que el usuario sepa que esto es lo que puede buscar, ya que estamos utilizando el paquete de diseño de entrega de comestibles.

texto de marcador de posición dentro del cuadro de búsqueda divi

El cuadro de búsqueda que está en la tercera columna no es bueno. Entonces queremos entrar al Módulo de investigación configuración y vaya a la Diseño lengua. Encuéntralo transformador opciones, luego vaya a traducir pestaña (la segunda). A continuación, puede arrastrar el módulo de búsqueda a su lugar y Divi se encargará de todo el CSS y el espaciado.

También usamos% para este valor para que permanezca relativo independientemente de la ventana gráfica del escritorio. En ayuda de píxeles puede distorsionar algunas resoluciones diferentes.

opciones de transformación

Divi Transformador Traducir las opciones también deben ajustarse para el móvil. Si no lo hace, es lo mismo. Así que asegúrese de ir al Reactividad configuración y establezca la ubicación del módulo de búsqueda en las opciones del menú secundario. Acabamos de ajustar la ubicación vertical del móvil porque al colocarlo en la tercera columna de la fila, automáticamente se muestra en la parte inferior de los elementos de la fila.

transform para móvil

Diseñando el módulo de búsqueda Divi

Si bien no tiene muchas opciones de estilo para un cuadro de búsqueda, tiene algunas. Es decir, el color del texto y del propio campo, tanto cuando está inactivo como cuando un usuario ha hecho clic en él. (Y el espaciado y el tamaño y otras opciones de diseño estándar de Divi, por supuesto).

Para encontrar las opciones de color, vaya a la Champ menú en el Diseño lengua. Une fois développé, vous avez la possibilité de modifier la couleur du texte de l'espace réservé, la couleur d'arrière-plan du champ et la couleur du texte du champ (texte saisi par l'utilisateur, c'est-à- decir). Además, el Concentrarse las variaciones son cuando el usuario interactúa específicamente con el cuadro de búsqueda.

estilo de cuadro de búsqueda

Cuando tenga el estilo que desee, haga clic en el botón Guardar.

Verifique la configuración de visibilidad

Algunos de nuestros paquetes de diseño y encabezado gratuitos vienen con diferentes opciones de visualización para dispositivos móviles y de escritorio. Si ve mods atenuados / atenuados en el generador visual, indica que el mod está deshabilitado en algunos dispositivos.

Para el encabezado de entrega de comestibles, las dos últimas columnas están deshabilitadas en dispositivos móviles. Queremos entrar al Configuraciones de línea y haga clic en la configuración de las columnas que desea mostrar en el móvil. En este caso, es el tercero.

opciones de línea

Entonces ve al progreso lengua y navegar a visibilidad opción. Aquí, asegúrese de que todas las opciones de desactivar somos desenfrenado para la columna que contiene su campo de búsqueda. Haga clic en el botón Guardar (garrapata verde), y los módulos deben aparecer en color y ya no estar decolorados.

Champ de recherche

Una vez que se haya asegurado de que todo esté visible, ¡estará listo para poner esto en línea!

Guarda tu trabajo

Asegúrese de hacer clic en el botón verde de guardar en la parte inferior derecha de la pantalla.

guarda tus cambios

Ahora está listo para cerrar el generador visual usando la X en la esquina superior derecha. En la siguiente pantalla, querrá asegurarse de que Divi Theme Builder haya guardado todas sus opciones. Si el dice Guardar cambios, Haga clic en el botón. Si el dice Todos los cambios guardados, entonces su campo de búsqueda ya está activo en su menú secundario de Divi.

cuadro de búsqueda divi guardar cambios

Resultados finales

¡Todo lo que queda por hacer es admirar su trabajo en su sitio!

oficina

version de escritorio

Móvil

version móvil

Conclusión con el campo de búsqueda Divi

Los cuadros de búsqueda son una parte fundamental de una buena experiencia de usuario para su sitio. Si quieres dar el mejor servicio posible a tu visitantes, asegurarse de que su contenido se pueda buscar debe ser una de sus principales prioridades. ¡Espero que puedas usar este método rápido y fácil y aplicarlo a tu sitio Divi pronto!



[Ad_2]

Link Fuente