ElegantThemes

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

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.

Vista previa del cuadro de búsqueda Divi

Escritorio

Teléfono celular, teléfono móvil

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

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.

archivo json

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.

Creador de temas para el cuadro de búsqueda Divi

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.

Importar archivos

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.

encabezado global

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.

editor de 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.

Módulo de búsqueda en la tercera columna

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.

Texto de marcador de posición en el campo de búsqueda divi

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.

Opciones de transformación

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.

convertir para celular

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.

Estilo del cuadro 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.

Opciones de línea

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.

Campo de búsqueda

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.

Guarda tus cambios

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.

cuadro de búsqueda divi guardar cambios

Resultados finales

¡Ahora todo lo que tienes que hacer es admirar tu artesanía en tu sitio web!

Escritorio

Version de escritorio

Teléfono celular, teléfono móvil

version móvil

Termina con el cuadro de búsqueda Divi

Los campos de búsqueda son parte fundamental de una buena Experiencia de usuario por tu lado. Si desea brindar el mejor servicio posible a sus visitantes, la capacidad de búsqueda de su contenido debe ser una de sus principales prioridades. ¡Esperamos que pronto pueda utilizar este método rápido y fácil en su sitio Divi!

El cargo Aquí se explica cómo agregar un cuadro de búsqueda al menú secundario de Divi apareció primero Blog temático elegante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *