Los módulos de mapas facilitan la integración de Google Maps personalizados en cualquier lugar de su página. Incluso puede agregar pines ilimitados al mapa y establecer una ubicación de inicio personalizada. Los módulos de tarjeta también vienen en un formato de ancho completo, ¡así que asegúrese de comprobarlo también!

mapa divi apercu.png

Clave de API de Google Maps

Una clave API es requisitos para utilizar el módulo Mapa. Para obtener una clave API, inicie sesión en Consola de desarrolladores de Google, que lo guiará a través del proceso y activará automáticamente la API de JavaScript de Google Maps y todos los servicios relacionados. Lo primero que se le pedirá es crear un nuevo proyecto.

registrar una API Google.jpg

A continuación, se le pedirá que nombre su proyecto. Puedes nombrar el proyecto como quieras. En este ejemplo, simplemente lo llamé "Mapas". También puede ingresar al nombre de dominio de su sitio web (agregue un * delante si permite el acceso desde www.dominio.com y dominio.com) para asegurarse de que su clave API esté autorizada.

para nombrar un proyecto Google API.jpg

Una vez que haya creado un proyecto con nombre, verá una clave de API que puede usar.

crear una aplicación de mapas de Google credentials.jpg

Después de obtener una clave API, debe copiarla / pegarla en el panel de opciones del tema yendo a: Divi >> Opciones de tema >> Configuración general >> Clave de API de Google Maps

Cómo agregar un módulo de mapa a tu página

Antes de que pueda agregar un módulo de mapa a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

constructor divi

Una vez que haya ingresado a Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.

Localice el módulo de mapa en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "mapa" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo de mapa. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

Ejemplo de caso de uso: agregar un módulo de mapa a una página de contacto

Un módulo de mapa es una excelente manera de mostrar la ubicación de su empresa en su página de contacto. Y la capacidad de agregar múltiples pines a su mapa para resaltar diferentes ubicaciones e información comercial es una característica útil y atractiva.

Para este ejemplo, agregaré un módulo de mapa para mostrar la ubicación y la información comercial agregando un pin personalizado al mapa.

mapa de presentación google map company.jpg

Importante: : Asegúrese de haber ingresado una clave de API de Google válida en el panel Opciones de la Tema divi. El módulo de mapas no funcionará sin él.

Usando Visual Builder, agregue una sección estándar en la parte inferior de la página de contacto. Luego inserte el módulo Mapa en su nueva sección. En la pestaña Contenido de la configuración de la tarjeta, ingrese la dirección de su empresa en la opción Dirección del centro de tarjetas. La dirección del centro del mapa es el punto central del mapa.

agregar un mapa de opciones divi.jpg

Luego haga clic + Agregar un nuevo elemento para crear tu primer pin. Actualice lo siguiente:

Título: [ingrese el título de su ubicación]
Contenido: [ingrese el contenido de su PIN (dirección y número de teléfono)]
Dirección del mapa: [ingrese la dirección para esta ubicación específica]

ingrese una dirección para un lugar precis.jpg

Guardar configuración

Es todo. Ahora tiene un módulo de mapa dinámico en la parte inferior de la página de contacto con un pin en el que se puede hacer clic que muestra información de la empresa.

pin divi module card.jpg

Opciones de contenido del módulo de mapas

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

opción contenido módulo map.png

+ Agregar un nuevo artículo

Aquí es donde agrega nuevos pines (o ranuras) a su módulo de placa. Al hacer clic en "agregar nuevo elemento" se abrirá una lista completamente nueva de configuraciones de diseño (que incluyen contenido, diseño, avanzado) para su nuevo pin. Consulte a continuación la configuración de los pines individuales.

Después de haber agregado su primer pin, verá aparecer una barra gris con el título de su pin como una etiqueta. La barra gris también tiene tres botones que le permiten editar, duplicar o eliminar la chincheta.

Clave de API de Google

El módulo de Maps utiliza la API de Google Maps y requiere una clave API de Google válida para funcionar. Antes de usar el módulo Mapa, asegúrese de haber agregado su clave API en el panel Opciones del Tema divi.

Dirección de Map Center

Ingrese una dirección para el punto central del mapa, y la dirección será geocodificada y mostrada en el mapa a continuación. Esto es útil si tiene varios pines y desea que el mapa se amplíe en una ubicación específica y más precisa. Simplemente puede escribir una dirección en un formato estándar, como "1235 Sunny Road, Some City, State, 88343".

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulo de la interfaz Divi Builder.

Opciones de diseño del módulo de mapas

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que utilizará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para cambiar lo que quiera.

módulo map ongle design.png

Rueda del mouse Zoom

Aquí puede elegir si el nivel de zoom será controlado por la rueda del mouse o no. A menudo, es mejor desactivar esta opción para que los visitantes no se vean molestados mientras se desplazan hacia abajo en la página y colocan la rueda del mouse en el iframe del mapa. Esto es especialmente cierto para los módulos de tarjetas de ancho completo.

Zoom arrastrable

Puede elegir aquí si la tarjeta se puede mover en dispositivos móviles.

Usa el filtro de escala de grises

Al habilitar esta opción, el mapa se convertirá en una imagen en escala de grises.

Opciones de mapa avanzadas

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

tab advance module divi.png

ID de CSS

Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agrega a su página o sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.

Opciones de pin de tarjeta individual

opción de cerrar divi.png

Título

Al crear un nuevo pin, puede asignar un título. Este título aparecerá en el cuadro al pasar el cursor sobre el marcador en el mapa.

Contenido

Al crear un nuevo pin, puede asignar un bloque de texto de contenido. Este texto aparecerá en el cuadro al pasar el cursor sobre el marcador en el mapa.

Dirección del mapa

Este es el lugar exacto en el mapa donde aparecerá su nuevo pin. Puede ingresar la dirección en un formato estándar.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi