• Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.
• Módulo Código. Este módulo nos resulta necesario para colocar el código de inserción del mapa dentro de la página.

En este video vemos cómo insertar un mapa de Google en una página que estamos creando con Divi. Esto es algo muy útil cuando estamos creando, por ejemplo, una página de contacto y queremos mostrar de forma gráfica nuestra ubicación.

¿Cómo insertar un mapa con Divi?

Lo primero que hay que hacer para insertar un mapa con Divi es agregar una fila nueva en el lugar donde queremos insertarlo. En este caso va a ser una fila de ancho completo. Luego dentro de la fila vamos a insertar el modulo que contendrá el mapa.

Divi dentro de todos sus módulos tiene uno que es precisamente el módulo de mapa. Es el que permite insertar mapas en la página que estamos diseñando.

El problema es que el módulo de mapa de Divi para funcionar necesita una clave API de Google, pero las claves API de Google no son totalmente gratuitas.

Entonces Google en el momento de activar tu clave te va a pedir que ingreses los datos de una tarjeta de crédito para, eventualmente cobrarte si se superan determinados límites de uso con la API.

¿Qué pasa si no tenemos una tarjeta de crédito, o si simplemente no queremos cargar los datos?

La solución es descartar el módulo de mapa de Divi e insertar el mapa de la misma forma que se insertan los mapas de Google Maps en cualquier sitio web, que es con el código de inserción que ofrece el propio Google.

Para eso vamos a ir a Google Maps y lo primero que tenemos que hacer es buscar la dirección de la empresa, ya que así logramos que Google nos ponga el marcador en el mapa.

Una vez que tenemos el marcador ubicado ajustamos el zoom como más nos guste y vamos a la opción que dice Compartir o insertar el mapa en el menú.

Damos clic y se va abrir una ventanita donde vamos a elegir la pestaña Insertar un mapa, en la que tenemos una pre-visualización del mapa donde podemos elegir distintos tamaños (mediano, grande, pequeño y personalizado).

Nosotros en este caso vamos a usar el tamaño personalizado porque queremos encajar el mapa en una medida que ya vamos a tener definida por la página.

☀ Si no sabes cuales son las medidas en píxeles que debe tener tu mapa hay que ir probando hasta dar con la indicada, no tiene sentido complicarse más con eso.

Yo le voy a poner una medida de 1.300 x 500 píxeles y luego simplemente copio el código de inserción haciendo clic en la opción Copiar.

Ahora dentro de la fila que ya había insertado vamos a crear un módulo (no el módulo de mapa), vamos a usar el módulo de código de Divi y ahí pegamos el código de inserción de Google Maps.

Ya en la pre-visualización aparece el mapa que habíamos creado. Podemos ir al formato de la fila para darle un borde y asignarle un color, así como ajustar el margen interno y el de abajo también. No pasa nada si aparece el código del mapa cuando estamos en el editor, ya que se restaura solo al salir.

También podemos ir a los ajustes del módulo de código opción Diseño y, en Filtros, podemos jugar con la tonalidad del mapa o con la saturación. Esto es útil si por ejemplo lo queremos poner en blanco y negro para que sea monocromático y quizás quede mejor con el diseño de la página.

Por último salimos del constructor visual, guardando los cambios, para comprobar que la página haya quedado correctamente configurada con el mapa que insertamos recién.

Ahí está el mapa, podemos moverlo y hacer zoom como cualquier mapa de Google.

Te puede interesar: Los bloques para incrustar de Gutenberg

¿Te sirvió esta guía para insertar un mapa en Divi? ? Entonces dame una mano para ayudar a más gente compartiéndola en las redes sociales. ¡Gracias!