Los módulos de mapas de pantalla completa en Divi facilitan la integración de Google Maps personalizados en todas partes de su página. Incluso puede agregar pines ilimitados al mapa y establecer una ubicación de inicio personalizada. Los mapas de módulos también están en formato de ancho normal, ¡así que asegúrese de comprobarlo también!
Clave de API de Google Maps
Una clave API es requisitos para utilizar el módulo Mapas. 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.
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 está autorizado para su clave API.
Una vez que haya creado un proyecto con nombre, verá una clave de API que puede usar.
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 el módulo Divi Full Screen Card
Antes de que pueda agregar un módulo de mapa de pantalla completa 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 Habilitar Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.
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 de ancho completo solo se pueden agregar dentro de las secciones de ancho completo.
Si está iniciando una nueva página, no olvide agregar primero una sección de ancho completo a su página.
Busque el módulo de mapa de ancho completo en la lista de módulos y haga clic en él para agregarlo a su página. La lista de modificaciones se puede buscar, lo que significa que también puede escribir la palabra "mapa de pantalla completa" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo de mapa de ancho completo. 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 de ancho completo a una página de contacto
Un módulo de mapa de ancho completo 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 de ancho completo para mostrar la ubicación y la información comercial agregando un pin personalizado al mapa.
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 de Ancho completo en la parte inferior de la página de contacto. Luego inserte el módulo Mapa de ancho completo en su nueva sección. En la pestaña Contenido de la configuración del mapa de ancho completo, ingrese la dirección de su empresa en la opción Dirección del centro de mapas. La dirección del centro del mapa es el punto central del mapa.
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]
Guardar configuración
Es todo. Ahora tiene un módulo de mapa dinámico de ancho completo en la parte inferior de la página de contacto con un pin en el que se puede hacer clic que muestra la información de la empresa.
Opciones de contenido de módulo de mapa de ancho completo
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.
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 administración
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 de mapa de ancho completo
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 usará 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 cualquier cosa.
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 avanzadas de mapa de ancho completo
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.
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 contenido de mapa de ancho completo
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
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin
