Cómo agregar un localizador de mapa que se puede buscar en el Handyman Div

Si tiene más ubicaciones de tiendas, agregar un localizador de tiendas en su sitio web puede mejorar drásticamente la experiencia del usuario. Estoy seguro de que los usó antes de visitar el sitio web de una tienda para ayudarlo a encontrar esa tienda más cercana a usted y personalmente aprecio los sitios que tienen un mapa interactivo para mostrar las ubicaciones e información cercanas. Una simple búsqueda en Google para una ubicación de la tienda le dará una idea de cuán útil puede ser esta funcionalidad. Para este tutorial de casos, le mostraré cómo agregar un sitio para localizar la tienda de mapas que se puede buscar en su sitio web con el Handyman Div. El complemento que usaré se llama Locator de la Tienda WP. Este complemento gratuito tiene algunas funciones personalizables fuertes, incluidas las indicaciones de administración generadas automáticamente y los estilos de mapa personalizados. Después de mostrarle cómo agregar tiendas y usar el código corto para mover su localizador de tiendas en la página, le mostraré cómo personalizar el estilo de la tienda con Divi para que coincida con el aspecto de controlador. Incluso mostraré un estilo de mapa de Google personalizado para que se ajuste aún más a la apariencia.
Vamos a eso. Tire del ojo aquí hay una breve mirada a lo que construiremos hoy.

¿Qué necesitas para este tutorial de casos de uso?
El tema de la división (instalado y activo)
Paquete de diseño de Handyman (no todo el paquete, solo la apariencia de la página inicial). Esto será accesible desde el Divi Builder.
El complemento de localización de la tienda WP (instalado y activo)
Configuración del complemento de localización de la tienda WP Para configurar el complemento de localización de la tienda WP, navegue a la configuración del localizador>. Debe asignarlo durante algún tiempo para analizar estas configuraciones para hacer ajustes para su propio sitio, pero por el momento puede desarrollar cosas con lo siguiente: API Google Maps: cree y pegue un servidor y una tecla de navegador para permitir que Google Maps funcione con el complemento. En la sección Mapa, intente localizar automáticamente al usuario: verifique el punto de partida: Houston, TX, EE. UU. (Este será el punto de partida si la ubicación automática falla; puede ingresar su propia ubicación si lo sabe) Estilo del mapa: aquí puede Agregue un estilo de mapa personalizado pegando el código (consulte a continuación para obtener más información) en la Sección de la Sección de Experiencia del Usuario y Radio del ancho de la etiqueta: 115 PX Plantilla Localizador: predeterminado (también puede elegir la opción para mostrar las ubicaciones de la tienda en el mapa)
Marders Start the Ubation anoter: Dark Orange Store Marker: Dark Blue Saves Cambios
Afinar su mapa de Google Si decide querer crear un estilo personalizado para su mapa de Google, hay algunos enlaces útiles en la página de configuración que lo ayudarán a comenzar en el estilo del mapa de la página de configuración.Utilicé MapStylr para generar el siguiente código que puede seguir con el cuadro de inserción de estilo de mapa en la página de configuración (úsela si lo desea): rellenar “,” Stylers “: [{” color “:”#dddddd “}]}, {“FeatureType”: “All”, “ElementType”: “Label.Text”, “Stylers”: [{“Color”: “#1476fb”}]}, {“FeatureType”: “All”, “ElementType”: “Label.text.stroke”, “Style”: [{“Visibility”: “Off”}], {“FeatureType”: “Road”, “ElementType”: “Geometry.Stroke”, “Stylers”: [{” Color “:”#FC551F “}]}, {” FeatureType “:” Water “,” ElementType “:” All “,” Stylers “: [{{” Color “:”#1476FB “}]}, {” FootureType “:” Road “,” ElementType “:” Geometry.fill “,” Stylers “: [{” Visibilidad “:” On “}, {” color “:” #ffffff “}]}]
Agregue nuevas tiendas después de actualizar la configuración, deberá comenzar a agregar las tiendas. Para agregar una nueva tienda, explore el localizador de la tienda> nuevo almacén y actualice lo siguiente: Ingrese su título para su tienda Agregue Descripción / Contenido: este contenido solo se mostrará si selecciona mostrar un enlace de “más información” en las listas de la tienda En la página Configuración. Y esto funciona mejor si también elige la plantilla de localización de revistas que muestra la lista de tiendas en el mapa. Detalles sobre la tienda: aquí puede agregar información sobre la ubicación (la visualización necesaria de la tienda en el mapa), el horario de apertura y cualquier información adicional (tal miniatura en el registro de la tienda. Categoría de almacenamiento: si lo desea, puede agregar una categoría para organizar mejor sus tiendas. Publica tu tienda.

Una vez que haya ingresado a sus nuevas tiendas, está listo para agregar el localizador de la tienda en su página. Cree la página de ubicación de la tienda, no tiene que crear una página completamente nueva para este localizador de tiendas. El complemento utiliza un código corto para mostrar el localizador de la tienda en cualquier lugar de su sitio. Pero para este ejemplo, le mostraré cómo crear una nueva página para el localizador de tiendas utilizando la página de inicio de Handyman.
Use la página de inicio de Handyman en una nueva página Crear una nueva página e implementar el Visual Builder. Luego agregue el aspecto de la página de inicio de Handyman, abriendo el menú Configuración, haciendo clic en el icono de carga en la biblioteca y seleccionando la apariencia en los aspectos prefabricados del cuadro emergente.

Luego pegue el estilo a la sección superior con el contenido del encabezado principal.
Elimine todo lo que no necesita de la apariencia en la sección superior, elimine primero el módulo que contiene el contenido del párrafo falso.

Luego elimine la segunda fila de esa sección que contiene CTA.

Ahora elimine cada sección debajo de la sección superior para que solo quede esa sección de encabezado.

Actualice la configuración de la sección Ahora abra la configuración de la sección y actualice lo siguiente: Elimine el color de fondo del gradiente de fondo: # 0072ff Color derecho del fondo: RGBA (255.255.25.89) Posición inicial: 50 % Posición final: 0 % Coloque el gradiente Sobre la imagen de fondo: sí, agregue una nueva imagen de fondo (alrededor de 1920 px con 1100 px) tamaño de fondo: adecuado la posición del fondo: el centro inferior


En la pestaña Diseño, actualice lo siguiente: Dale a su sección un separador inferior. Divisores: debajo del estilo divisor: ver horizontal horizontal del distrito Cap: 0.5x divisor de flip: horizontal

Margen personalizado: la parte inferior de 60 PX guarda la configuración de actualización para el módulo de texto que contiene el título de la página, use el editor en línea para cambiar el texto para decir “Encuentra un controlador de mantenimiento a tu lado”. Cree una nueva fila y módulo de texto para el localizador de clase corta Cree una nueva fila con una columna en la sección, dale espacio personalizado de la siguiente manera: trenza personalizada (escritorio): 0 px arriba, 0 px izquierda, izquierda, 3% derecha a la derecha Revestimiento personalizado (tableta): 0% de revestimiento derecho crea espacio para el diseño de borde derecho. Luego agregue un borde recto para que coincida con el diseño del borde izquierdo en el título anterior. Seleccione la pestaña Borde derecho. El ancho del borde recto: 10 px de borde recto Color: # FC551F Guardar la configuración.

Luego cree un módulo de texto e ingrese el siguiente código corto en el cuadro de contenido: [wpsl map_type = “ruta mapa” self_locate = “true” start_marker = “dark-orange” store_marker = “dark-blu”]]
También puede usar el generador codificado por complementos cortos dentro del Backbub Builder si lo desea.

Luego dale un fondo al módulo de texto. Color izquierdo del gradiente de fondo: # FC551F Color derecho del gradiente de fondo: #FFFFF Posición inicial: 20% Posición final: 0%
Este gradiente servirá como un diseño personalizado para dar a la barra de búsqueda (generada por el complemento) un fondo naranja. Ahora actualizamos la configuración de diseño para el módulo de texto. Tamaño de texto de texto: 18 PX Lineo personalizado: 2% más, 2% de baja, 3% izquierda, 3% derecho

Box Sombra: Vea la captura de pantalla de la Caja de la Sombra de la Sombra Posición vertical: 14 PX El poder de la sombra de la caja: 40 px El poder de la sombra de la caja: -13pxsalve la configuración. Agregue el botón CSS personalizado para buscar si desea cambiar el estilo predeterminado del botón de búsqueda para que coincida con el diseño de su apariencia, puede agregar el siguiente CSS a la configuración de la página en la pestaña avanzada. Color: #fff; Tamaño de fuente: 16px; Font-Weight: Bold; Relleno: 0.6em 1.6em; }

Si desea que se aplique CSS a todas las páginas en su sitio, puede agregar el código a la sección CSS adicional de la costumbre de la tarea. Resultado final ahora, verifiquemos el resultado final.

Así es como se verá el localizador de la tienda si cambia la plantilla para “mostrar las ubicaciones de la tienda en el mapa” en la configuración del complemento.

Así es como se ve la página móvil.

Si hace clic en el enlace de indicaciones de orientación junto a una lista, verá las indicaciones de orientación.

Y si hace clic en la ubicación de una tienda en el mapa, aparecerá más información.