Cómo cambiar la altura del Mapa en Divi

Hablaba el otro día de los fallos que tiene Divi aunque sea un tema magnífico, y precisamente hoy he tenido que «solucionar» uno de ellos: cambiar la altura del mapa en Divi.

Divi tiene un módulo llamado Mapa, el cual se puede ajustar en anchura pero no en altura, a menos que sepas CSS.

Vamos a ver cómo solucionarlo dependiendo de nuestras necesidades.

1) Todos los mapas en el sitio con la misma altura

Si tienes varias páginas en tu sitio que contienen un mapa y quieres que todos tengan exactamente la misma altura, tendremos que colocar el siguiente código en las opciones de Divi, concretamente en Divi > Opciones del tema > CSS personalizado:

.et_pb_map { height: 400px !important; }

Simplemente sustituímos el número 400 por la altura que queramos en píxeles. Por ejemplo:

2) Uno o más mapas en una misma página con la misma altura.

Si queremos que el o los mapas de una página (no de un sitio, solo de una página) tengan la misma altura, podemos aplicar el código anterior a nivel de página en vez de a nivel global para todo el sitio.
Por tanto, deberíamos ir a los ajustes de la página en cuestión y escribir el código en la casilla CSS personalizado, tal y como vemos aquí:

3) Un mapa en específico con la altura deseada

Este es por si necesitamos que un mapa concreto en una página concreta de tu sitio tenga una altura específica y diferente del resto de mapas.
El procedimiento aquí será crear una clase CSS para el mapa en cuestión.

Editamos el mapa y nos vamos a Avanzado. En Clase CSS escribimos algo para identificar a ese mapa, por ejemplo mi-precioso-mapa.

Guardamos y en los ajustes de Divi escribimos el siguiente código:

.mi-precioso-mapa .et_pb_map { height: 400px !important; }

Acordémonos de sustituir el 400 por la altura en píxeles, y el nombre mi-precioso-mapa por el nombre que hayamos escogido.

Si tenemos otro mapa con la misma altura en otro lugar de nuestra web, podemos reutilizar este mismo código añadiéndole la clase mi-precioso-mapa a ese otro mapa.

4) Varios mapas con varias alturas

Por último, si tenemos varios mapas en nuestro sitio con diferentes alturas, nos tocará aplicar el anterior código pero con una clase diferente para cada mapa.
Por ejemplo, supongamos que tenemos dos mapas, uno con 300 píxeles de altura y otro con 400. Al mapa 1 le añadimos la clase el-mapa-primero y al mapa 2 la clase el-mapa-segundo:

Entonces, en los ajustes de Divi escribimos el siguiente código:

.el-mapa-primero .et_pb_map { height: 300px !important; }
.el-mapa-segundo .et_pb_map { height: 400px !important; }

¿Y si sólo tengo un mapa?

Si solo tenemos un solo mapa en el sitio entero, podemos escoger el método que más os guste de los anteriores; funcionará igual.

Esperemos que se implemente la opción de cambiar la altura del mapa en Divi próximamente 🙂