Cómo cambiar la altura del Mapa en Divi

Mapa_divi_wordpress_altura_diferente

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:

Código CSS para cambiar la altura del mapa en Divi

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í:

Ajustes de página en Divi

Código CSS para cambiar la altura del mapa en Divi

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.

Clase CSS en el módulo Mapa de Divi

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.

Código CSS para cambiar la altura del mapa de Divi

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 🙂

2 comentarios

  1. Juan Bosch el 06/01/2019 a las 14:12

    Gracias Gerard por tu generoso post. No daba con la tecla y me lo has aclarado en un momento.
    Uno de los problemas es dónde poner el código adecuado, y cuando lo averiguas va y se te olvida… no hay nada como preguntar…
    Un saludo

    • Gerard el 06/01/2019 a las 16:33

      Me alegro que te haya servido, Juan 🙂
      Un saludo.

Deja un comentario


He leído y acepto la política de privacidad