Aquí se explica cómo agregar un cuadro de búsqueda al menú secundario de Divi

septiembre 3, 2021

0 208 4 minutos de lectura

How to Add a Search Field to Divi’s Secondary Menu

Sin un cuadro de búsqueda, la navegación de su sitio web se verá afectada. Puede tener la experiencia de navegación más estable en la web, pero si sus usuarios no pueden buscar para encontrar exactamente lo que están buscando, puede (y perderá) negocios. Este tutorial lo guiará para agregar un cuadro de búsqueda al menú secundario de Divi para que sus usuarios siempre estén a solo unos clics de todo lo que necesitan.

Tabla de Contenidos

Vista previa del cuadro de búsqueda Divi

Escritorio

Teléfono celular, teléfono móvil

Cargar y / o editar encabezado global

Para este artículo usaremos el encabezado / pie de página libre esto encaja con nuestro paquete de diseño de entrega de comestibles. Puedes descargarlo .Código Postal Archivar y descomprimir los archivos requeridos. .json Archivar en su computadora.

Después de eso, vaya a su panel de WordPress y navegue hasta Divi – creador de temas. A partir de ahí tienes que hacer clic Icono de flechas hacia arriba y hacia abajo para abrir las opciones de portabilidad.

En el nuevo modal, haga clic en el Importar Tab y busque el .json archivo descargado. Cuando termines, elige Importar plantillas de Divi Theme Builder para comenzar a cargar.

En este punto estás listo para eso Encabezado global Sección de la Plantilla de sitio web estándar. Importar el .json El archivo debe tener el obsequio aplicado automáticamente como encabezado global del sitio.

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

Si está utilizando Divi Visual Builder, debería ver algo similar a su encabezado global.

Primero, queremos crear un espacio para el cuadro de búsqueda. Queremos asegurarnos de que el cuadro de búsqueda sea de fácil acceso para todos los visitantes, por lo que lo agregaremos al menú secundario (arriba del Inicio / Contacto Línea).

Para empezar, vamos a agregar el cuadro de búsqueda con el Módulo de búsqueda Divi en la tercera columna de la primera línea.

El texto del marcador de posición es importante para los campos de búsqueda. Entonces, si su módulo está allí, vaya a ajustes y pon tu marcador de posición Texto sobre algo que le recuerde al usuario lo que debe buscar. Proporcionamos ¡Encuentra artículo! como marcador de posición para que el usuario sepa qué buscar mientras usamos el paquete de diseño de entrega de comestibles.

El cuadro de búsqueda de la tercera columna no se ve bien. Entonces queremos ir a eso Módulo de búsqueda Configuración y vaya a la borrador Tab. Busque el Transformar Opciones, luego navegue hasta el Traducir Tab (el segundo). Luego puede arrastrar el módulo de búsqueda a su lugar y Divi hará todo el CSS y el espaciado.

También usamos% para este valor para que permanezca relativo independientemente del área de visualización en el escritorio. Utilizando px puede deformarlo en varias resoluciones diferentes.

Divis Transformar Traducir Las opciones también deben adaptarse para dispositivos móviles. Si no te aseguras de entrar en eso sensibilidad Configuración y especifique la ubicación del módulo de búsqueda en las opciones del menú secundario. Acabamos de ajustar la posición vertical para dispositivos móviles porque cuando se coloca en la tercera columna de la fila aparecerá automáticamente en la parte inferior de los elementos de la fila.

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

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

Para encontrar las opciones de color, desplácese hasta zona Menú en borrador Tab. Después de la expansión, tiene la opción de cambiar el color del texto del marcador de posición, el color de fondo del campo y el color del texto del campo (es decir, el texto ingresado por el usuario). Además, el atención Las variantes son cuando el usuario interactúa específicamente con el campo de búsqueda.

Cuando haya terminado de la manera que desee, haga clic en el botón Guardar.

Verifique la configuración de visibilidad

Algunos de nuestros paquetes de diseño y encabezados gratuitos vienen con diferentes opciones de visualización para dispositivos móviles y de escritorio. Si ve módulos ocultos / atenuados en Visual Builder, significa que el módulo está deshabilitado en algunos dispositivos.

Para el encabezado de entrega de comestibles, las dos últimas columnas están deshabilitadas en dispositivos móviles. Queremos ir a eso Configuración de línea y haga clic en la configuración de las columnas que desea mostrar en el teléfono. En este caso es el tercero.

Entonces ve al Progresivo pestaña y navega hasta el Visibilidad Opciones. Aquí, asegúrese de que todas las opciones de Desactivar están desenfrenado para la columna que contiene su campo de búsqueda. Haga clic en el botón Guardar (marca de verificación verde) y los módulos deben aparecer a todo color y ya no estar descoloridos.

Una vez que te hayas asegurado de que todo sea visible, ¡puedes empezar a usarlo!

Asegure su trabajo

Asegúrate de hacer clic botón de memoria verde en la parte inferior derecha de la pantalla.

Ahora puede cerrar Visual Builder con la X en la esquina superior derecha. En la siguiente pantalla, desea asegurarse de que Divi Theme Builder haya guardado todas sus opciones. Si se llama guardar cambios, presione el botón. Si se llama Todos los cambios guardados, entonces su campo de búsqueda ya está activo en su menú secundario Divi.