Sin un campo de búsqueda, la navegación de su sitio se verá afectada. Puede tener la experiencia de navegación más sólida en Internet, pero si sus usuarios no pueden buscar para encontrar exactamente lo que están buscando, es posible que pierda (y probablemente perderá) negocios. Este tutorial lo guiará para agregar un campo de búsqueda a Divi y su menú secundario para que, pase lo que pase, sus usuarios siempre estarán a solo unos clics de distancia de todo lo que necesitan.
Escritorio
Móvil
Cargar y/o editar encabezado global
Para este artículo, vamos a utilizar el encabezado/pie de página gratuito que acompaña a nuestro paquete de diseño de Entrega de comestibles. Simplemente puede descargar el archivo .zip y extraer el archivo .json necesario en su computadora.
Después de eso, vaya a su panel de control de WordPress y navegue hasta Divi – Theme Builder . Desde allí, debe hacer clic en el icono de flechas hacia arriba y hacia abajo para abrir las opciones de portabilidad.
En el nuevo modal, haga clic en la pestaña Importar y busque el archivo .json que descargó. Cuando esté listo, seleccione Importar plantillas de Divi Theme Builder para comenzar la carga.
En este punto, está listo para ingresar a la sección Encabezado global de la Plantilla de sitio web predeterminada . Importar el archivo .json debería haber aplicado automáticamente el obsequio como encabezado global del sitio.
Usando Divi Visual Builder, debería ver algo similar a esto como su encabezado global.
Lo primero que queremos hacer es hacer un espacio para el campo de búsqueda. Queremos asegurarnos de que el campo de búsqueda esté fácilmente disponible para todos los visitantes, por lo que lo agregaremos al menú secundario (arriba de la fila Inicio/Contacto ).
Para comenzar, vamos a agregar el campo de búsqueda usando el módulo de búsqueda Divi a la tercera columna de la primera fila.
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 Configuración y configure el texto del marcador de posición en algo que le recuerde al usuario lo que puede buscar. Estamos poniendo Find Items! como marcador de posición para que el usuario sepa que eso es lo que puede buscar, ya que estamos usando el paquete de diseño de entrega de comestibles.
El campo de búsqueda en la tercera columna no se ve bien. Así que queremos ir a la configuración del módulo de búsqueda e ir a la pestaña Diseño . Busque las opciones de Transformar y luego navegue a la pestaña Traducir (la segunda). Luego puede arrastrar el módulo de búsqueda a su lugar, y Divi se encargará de todo el CSS y el espacio para él.
También estamos usando % para este valor para que permanezca relativo independientemente de la ventana gráfica en el escritorio. El uso de px puede hacer que se sesgue en algunas resoluciones diferentes.
Las opciones de traducción de transformación de Divi también deben ajustarse para dispositivos móviles. Si no lo hace, lo mismo. Así que asegúrese de ir a la configuración de Capacidad de respuesta y establezca la ubicación del módulo de búsqueda en las opciones del menú secundario. Acabamos de ajustar la ubicación vertical para dispositivos móviles porque al colocarla en la tercera columna de la fila, se muestra automáticamente en la parte inferior de los elementos de la fila.
Dale estilo al módulo de búsqueda Divi
Si bien no tiene muchas opciones de estilo para un campo de búsqueda, tiene algunas. A saber, el color del texto y el campo en sí, 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 al menú Campo en la pestaña Diseño . Una vez expandido, 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, las variantes de enfoque son cuando el usuario interactúa específicamente con el campo de búsqueda.
Cuando esté diseñado a su gusto, 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 escritorio y dispositivos móviles. Si ve módulos atenuados o atenuados en el generador visual, eso indica que el módulo está deshabilitado en algunos dispositivos.
Para el encabezado de entrega de comestibles, las dos columnas finales están deshabilitadas en dispositivos móviles. Queremos ir a la configuración de Fila y hacer clic en la configuración de las columnas que desea mostrar en el dispositivo móvil. En este caso, es el tercero.
Luego, vaya a la pestaña Avanzado y navegue a las opciones de Visibilidad . Aquí, asegúrese de que todas las opciones en Deshabilitar estén desmarcadas para la columna que contiene su cuadro de búsqueda. Haga clic en el botón Guardar ( marca de verificación verde ) y los módulos deberían aparecer a todo color y ya no estar descoloridos.
Una vez que te hayas asegurado de que todo esté visible, ¡estarás listo para ponerlo en marcha!
Guarda tu trabajo
Asegúrese de hacer clic en el botón verde Guardar en la esquina inferior derecha de la pantalla.
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 dice Guardar cambios , haga clic en el botón. Si dice Todos los cambios guardados , entonces su campo de búsqueda ya está activo en su menú secundario de Divi.
Resultados finales
¡Lo único que queda ahora es admirar su trabajo manual en su sitio!
Escritorio
Móvil
Terminando con el campo de búsqueda Divi
Los campos de búsqueda son una parte fundamental para tener una buena experiencia de usuario en tu sitio. Si desea brindar el mejor servicio posible a sus visitantes, asegurarse de que su contenido se pueda buscar debe ser una de sus principales prioridades. ¡Con suerte, puede tomar este método rápido y fácil y aplicarlo a su sitio Divi pronto!