La Módulo de Mapa Divi
Cómo añadir, configurar y personalizar el módulo de mapa Divi.
¿Qué es el Divi Map Module?
El Divi Map Module es una forma sencilla de mostrar un mapa interactivo de Google en tu web. Puedes agregar múltiples pines para mostrar distintas ubicaciones, ideal para páginas de contacto o “Sobre nosotros”.
Cómo añadir el módulo de mapa Divi a tu página
-
Crear o editar una página.
-
Por defecto, WordPress carga el editor Gutenberg.
-
Haz clic en el botón púrpura bajo el título de la página para usar El Constructor Divi (Divi Builder).
-
La página recargará con el Constructor Visual Divi.
Elige entre:
-
Construir desde cero (página en blanco)
-
Elegir un diseño predefinido
-
Construir con IA (usar Divi AI para crear el diseño)
-
En el Constructor Visual, Divi añade automáticamente una sección.
-
Haz clic en el icono verde + para añadir una fila.
-
Dentro de la fila, haz clic en el icono gris + para abrir la biblioteca de módulos.
-
Busca y selecciona el módulo Mapa.
Construir desde cero
Esta opción carga el Divi Builder con un diseño de página en blanco. Elige esta opción si deseas comenzar el diseño de tu página desde cero.
Elegir un diseño predefinido
Esta opción te permite elegir de nuestra gran biblioteca de diseños Divi pre-diseñados. Puedes elegir entre diseños predefinidos de Divi, diseños que hayas creado y guardado en tu Biblioteca Divi, y páginas existentes en tu sitio web que puedes clonar.
Construir con IA
Esta opción te permite crear un diseño completo de página usando Divi AI. Usando tu indicación de texto e información sobre tu sitio web, puedes crear el esquema perfecto de la página, luego construirlo y llenarlo con contenido e imágenes, dando vida a todo en muy poco tiempo.
Agregar el Módulo de Inicio de Sesión Divi
Cuando cargas el Constructor Visual, Divi añade automáticamente una Sección.
Haz clic en el icono verde + para insertar una Fila.
Haz clic en el icono gris + dentro de la Fila para abrir la Biblioteca de Módulos Divi, que contiene todos los módulos incluidos con el tema Divi.
Busca el módulo Mapa y haz clic en él para cargar el módulo.
La biblioteca de módulos también es buscable. Escribe el nombre del módulo que deseas en la barra de búsqueda en la parte superior.
Generar una clave API de Google Maps
Antes de que puedas empezar a usar toda la funcionalidad del módulo de mapas, necesitarás una clave API de Google.
Una clave API de Google autentica tu conexión con los servicios de ubicación de Google y permite que el módulo de mapa funcione.
Para generar una clave API, necesitarás una cuenta de Google, un proyecto vinculado a una cuenta de facturación, y tener habilitada la API de Geocodificación.
Cómo crear un proyecto y habilitar la facturación
Cómo crear una clave API de Google Maps
Consejo profesional: Si ya creaste tu clave API de Google y la pegaste en el módulo de mapa, y aún no funciona, probablemente necesitas añadir un método de facturación a tu cuenta de Google.
¿Por qué necesito añadir mi tarjeta de crédito o cuenta bancaria si Google Maps es gratis? Porque Google lo requiere. Sin embargo, no te preocupes: probablemente nunca se te cobrará si tu sitio web genera menos de 15,000 visitantes al mes.
Opciones del módulo Divi Map
Todas las opciones del módulo de mapa Divi explicadas
Cuando añades el módulo de mapa a tu página, las configuraciones del módulo aparecerán automáticamente. Aquí puedes configurar el contenido y los estilos de diseño del módulo.
Las configuraciones están categorizadas en tres pestañas, accesibles a través de las pestañas en la parte superior del módulo: Contenido, Diseño y Avanzado.
Pestaña Contenido
Agregar un nuevo pin
La primera sección en las configuraciones de Contenido es donde puedes agregar y eliminar pines en el mapa. Agregar un pin al mapa resaltará una ubicación específica en el mapa. Puedes agregar múltiples pines, lo cual puede ser útil, por ejemplo, si estás creando un mapa de un recorrido por tu vecindario con tus lugares favoritos.
Claro, aquí tienes la traducción al español respetando el formato:
A continuación, un ejemplo de la apariencia del mapa con y sin un pin añadido.
Cómo agregar un pin al módulo de mapa Divi
Para agregar un pin al módulo de mapa, haz clic en Agregar un Pin. Una vez hecho clic, se cargarán las configuraciones de contenido del pin individual.
Dentro de las configuraciones de contenido del pin, hay grupos de ajustes para agregar un título, texto descriptivo y la dirección del mapa.
Texto
Aquí puedes añadir el contenido de texto para el pin, como un título y un texto descriptivo. Cuando se haga clic en el pin, este texto se mostrará en una ventana emergente. Deja estos campos en blanco si no quieres que se muestre ninguna información en la ventana emergente.
Título – Escribe aquí el título del pin.
Cuerpo – Aquí puedes escribir el texto que quieres que se muestre cuando se haga clic en el pin. Por ejemplo, puedes poner una descripción de esta ubicación, información de contacto de este lugar, etc.
Mapa
Aquí es donde pegas la dirección a la que quieres que apunte el pin.
Dirección del pin del mapa – Pega la dirección aquí y haz clic en Buscar para orientar el pin a esa dirección.
Configuraciones del pin del módulo de mapa Divi
Ahora que hemos terminado de personalizar las configuraciones individuales del pin, volvamos a las configuraciones principales del módulo haciendo clic en la flecha blanca de regreso en la parte superior izquierda del módulo.
Mapa
Aquí es donde agregas tu clave API de Google y eliges la dirección del punto focal para centrar el mapa.
Clave API de Google – Para agregar tu clave API de Google, haz clic en el botón Cambiar clave API, lo que abrirá una pestaña en las Opciones del tema Divi, donde podrás pegar la clave API en el campo de Clave API de Google.
Dirección del centro del mapa – Coloca aquí la dirección que quieres que sea el punto focal central del mapa y luego haz clic en Buscar para orientar el mapa a esa dirección.
Mapa – Esta es una vista previa del mapa.
Enlace
Si deseas aplicar un enlace clickeable a todo el módulo, puedes hacerlo aquí.
URL del enlace del módulo – Pega la URL del enlace que quieres aplicar a este módulo aquí. Esto hará que todo el módulo sea clickeable, y al hacer clic, dirigirá a los visitantes a la URL pegada aquí.
Destino del enlace del módulo – Definir el destino del enlace determina si el enlace, al hacer clic, se abre en una nueva pestaña o en la misma ventana.
Fondo
En el grupo de opciones de Fondo, se pueden configurar las siguientes opciones:
-
Color de fondo
-
Degradado de fondo
-
Imagen de fondo
-
Video de fondo
-
Patrón de fondo
-
Máscara de fondo
Cómo agregar un color de fondo
- Haz clic en la primera pestaña, el ícono del balde de pintura.
- Haz clic en Agregar color de fondo y elige un color de la paleta de colores de tu sitio, o usa el ícono del cuentagotas para seleccionar un nuevo color.
- Haz clic en la segunda pestaña, el ícono de degradado.
- Haz clic en Agregar degradado de fondo.
Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para elegir un nuevo color. Los puntos del degradado permiten agregar más colores al degradado. Haz clic en cualquier parte del control deslizante para agregar un nuevo punto.
Opciones de degradado de fondo
-
Tipo de degradado – Puedes cambiar el tipo de degradado haciendo clic en el menú desplegable y seleccionando el tipo deseado.
-
Dirección del degradado – Puedes cambiar la dirección del degradado arrastrando el control deslizante o escribiendo un valor numérico.
-
Repetir degradado – Activa esta opción en sí si quieres que el degradado se repita.
-
Unidad de degradado – La unidad del degradado cambia cómo se calculan los puntos de parada del degradado. Selecciona el menú desplegable para cambiar la unidad.
-
Colocar degradado sobre la imagen de fondo – Si se aplica una imagen de fondo, puedes colocar el degradado encima de la imagen de fondo activando esta opción en sí.
Cómo agregar una imagen de fondo
Haz clic en la tercera pestaña, el ícono de Imagen.
Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una foto ya subida en tu biblioteca o subir una nueva.
Opciones de imagen de fondo
Usar efecto parallax – Para aplicar un efecto parallax a la imagen (donde la imagen se desplaza más rápido que el contenido en primer plano, dando la ilusión de un efecto 3D), activa esta opción. Por defecto, esta opción está desactivada.
Tamaño de la imagen de fondo – Elige el tamaño de tu imagen de fondo seleccionando una opción del menú desplegable.
Posición de la imagen de fondo – Elige la posición de la imagen de fondo desde el menú desplegable.
Repetición de la imagen de fondo – Elige si y cómo se repite la imagen de fondo mediante una opción del menú desplegable.
Mezcla de imagen de fondo – Elige cómo se mezcla la imagen de fondo con otras capas en el módulo, seleccionando una opción del menú desplegable.
Cómo agregar un video de fondo
- Haz clic en la cuarta pestaña, el ícono de Video.
- Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar un video ya subido o subir uno nuevo.
Opciones de video de fondo
Mp4 vs WebM – Recomendamos subir ambas versiones, mp4 y webm, porque no todos los navegadores soportan el formato WebM. Subir ambos tipos asegura que tu video se reproduzca en todos los dispositivos y navegadores.
Ancho del video de fondo – Define el ancho del video escribiendo un valor numérico.
Alto del video de fondo – Define el alto del video escribiendo un valor numérico.
Pausar video cuando otro video se reproduzca – Si quieres que el video de fondo se pause cuando otro video esté en reproducción, activa esta opción. Por defecto, el video se pausa cuando no está visible. Si quieres que continúe, desactiva esta opción.
Cómo agregar un fondo
Cómo agregar un patrón de fondo
- Haz clic en la quinta pestaña, el ícono de Patrón.
- Haz clic en Agregar patrón de fondo.
Elige el tipo de patrón que deseas en el menú desplegable.
Opciones de patrón de fondo
Color del patrón – Selecciona el color del patrón desde la paleta de colores de tu sitio o usa el icono cuentagotas para elegir un color nuevo.
Transformar patrón – Aquí puedes transformar el patrón horizontal o verticalmente, rotarlo o invertirlo.
Tamaño del patrón – Aquí puedes seleccionar el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán opciones para ancho y alto del patrón. Usa el deslizador o escribe un valor numérico para definirlos.
Origen de repetición del patrón – Aquí puedes seleccionar el origen desde donde se repite el patrón.
Desplazamiento horizontal y vertical del patrón – También puedes ajustar los desplazamientos horizontal y vertical del patrón.
Repetición del patrón – Aquí puedes elegir cómo se repite el patrón (horizontal, vertical, etc.).
Modo de mezcla del patrón – Define cómo la capa del patrón interactúa con las capas debajo. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.
Configuraciones de video de fondo del módulo Divi Map
Cómo agregar una máscara de fondo
- Haz clic en la sexta pestaña, el ícono de Máscara.
- Haz clic en Agregar máscara de fondo.
Selecciona el tipo de máscara que deseas en el menú desplegable.
Opciones de máscara de fondo
Color de la máscara – Elige el color de la máscara desde la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.
Transformar máscara – Aquí puedes transformar la máscara horizontal o verticalmente, rotarla o invertirla.
Relación de aspecto de la máscara – Aquí puedes establecer la relación de aspecto de la máscara. La relación de aspecto es la proporción entre el ancho y el alto de una imagen.
Tamaño de la máscara – Puedes seleccionar el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán opciones para ancho y alto de la máscara. Usa el deslizador o escribe un valor numérico para definirlos.
Modo de mezcla de la máscara – Define cómo la capa de la máscara interactúa con las capas debajo. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.
Etiqueta administrativa
Pestaña Diseño
En esta pestaña encontrarás todos los ajustes de estilo del módulo de mapa.
Controles
Mapa
Filtros para personalizar visualmente el mapa:
Tamaño
Espaciado
-
Márgenes: Espacio exterior al módulo.
-
Relleno (padding): Espacio interno.
-
Puedes vincular valores con el ícono de cadena para mantener proporciones.
-
Valores predeterminados: 0 para ambos.
Borde
Sombra de la caja
Aplica una sombra al módulo completo.
Opciones configurables:
Filtros
Ajusta filtros visuales del módulo:
-
Tono (Hue)
-
Saturación
-
Brillo
-
Contraste
-
Invertir
-
Sepia
-
Opacidad
-
Desenfoque
-
Modo de mezcla
Opciones para transformar el módulo:
-
Escalar
-
Mover (Translate)
-
Rotar
-
Sesgar (Skew)
-
Puntos de origen
Puedes bloquear valores usando el ícono de cadena.
Animación
Aplica animaciones al módulo. Opciones:
Pestaña Avanzado
Dentro de la pestaña Avanzado, encontrarás opciones que los diseñadores web más experimentados pueden encontrar útiles, como el uso de CSS personalizado.
Aquí puedes aplicar CSS personalizado al módulo. También puedes asignar clases e IDs CSS personalizados, que sirven para aplicar estilos avanzados con propiedades CSS o para usar código CSS personalizado usando la clase del módulo.
IDs y Clases CSS
Asigna un ID o una clase CSS específica a este módulo. Esto es útil para aplicar estilos personalizados al módulo usando la hoja de estilos de tu tema hijo.
CSS Personalizado
-
CSS libre: Escribe código CSS libremente utilizando el selector selector.
Ejemplo: selector h1 {color: red;}
-
Elementos del módulo: También puedes aplicar CSS personalizado a partes específicas del módulo desde esta pestaña. Al hacer clic, verás secciones individuales donde puedes añadir propiedades CSS.
Condiciones
Esta pestaña te permite elegir cuándo mostrar el módulo según ciertas condiciones, como:
-
Si el usuario ha visitado antes
-
Si ha comprado algo previamente
-
Qué navegador está usando
-
Qué sistema operativo usa
-
Y más
Puedes agregar una o múltiples condiciones.
Visibilidad
-
Deshabilitar en: Define la visibilidad del módulo según el dispositivo (móvil, tablet, escritorio) marcando la casilla correspondiente.
Desbordamiento horizontal:
-
Visible: Muestra el contenido si sobrepasa el ancho del módulo.
-
Scroll: Añade una barra de desplazamiento horizontal.
-
Oculto: Oculta lo que sobrepasa el ancho.
-
Auto: El navegador decide si muestra la barra.
Desbordamiento vertical:
-
Visible: Muestra el contenido si sobrepasa la altura.
-
Scroll: Añade una barra de desplazamiento vertical.
-
Oculto: Oculta lo que sobrepasa la altura.
-
Auto: El navegador decide.
Transiciones
Controla la duración, retardo y curva de velocidad de la animación al pasar el ratón (hover):
-
Duración de la transición: En milisegundos.
-
Retardo de la transición: Tiempo antes de iniciar la animación (en ms).
-
Curva de velocidad de la transición: Define el ritmo de la animación (lineal, acelerada, suave, etc.).
Posición
Define cómo se posiciona el módulo:
-
Relativa (por defecto): Se posiciona según el flujo normal del documento, desplazándose en función del desplazamiento vertical y horizontal.
-
Absoluta: Se elimina del flujo normal y se posiciona respecto al contenedor más cercano o al contenedor inicial.
-
Fija: Se posiciona respecto a la ventana del navegador (útil para módulos fijos o “sticky”).
Opciones:
-
Desplazamiento vertical: Ajusta la posición vertical.
-
Desplazamiento horizontal: Ajusta la posición horizontal.
-
Z-index: Determina el orden en el que se superponen los módulos (mayor valor = se muestra encima).
Efectos de Desplazamiento
Define cómo se comporta el módulo al hacer scroll en la página.
-
Puedes hacer que el módulo sea “sticky” (fijo en la parte superior, inferior o ambas).
-
Puedes activar el movimiento vertical, lo que permite ajustar la velocidad de desplazamiento del módulo.
-
Disparador del efecto de movimiento: Decide cuándo se activa el efecto (cuando el inicio, el centro o el final del módulo esté visible).
Guarda tu diseño
Una vez que hayas terminado de configurar y diseñar el módulo, haz clic en la flecha verde en la parte inferior derecha del módulo para guardar tu diseño.
Si cierras el módulo sin guardar, perderás tus cambios.
Guarda el diseño de la página
-
En Mac: presiona CMD + S
-
En Windows: presiona CTRL + S
-
También puedes hacer clic en el botón morado con tres puntos (⋯) para expandir la barra de herramientas de Divi, y luego en el botón verde “Guardar” en la esquina inferior derecha.
Sal del Constructor Visual
Una vez que todo esté guardado, haz clic en “Salir del Constructor Visual” desde la barra de administración superior.
Recursos del Módulo de Mapa de Divi
