Cómo agregar un conmutador de mapa fijo a su plantilla de página Divi

Si tiene una tienda física y está creando un sitio web para ella, muchas personas pueden visitar su sitio web para obtener información práctica, como su dirección. Por supuesto, ahí es donde su página de contacto es útil, pero esa no es la única forma en que puede compartir sin problemas los detalles de contacto con sus visitantes. Si está buscando una forma creativa de compartir la dirección de su empresa, le gustará este tutorial. Le mostramos cómo agregar un mapa fijo para alternar dinámicamente a cada página usando Divi y su Theme Builder. Comenzaremos creando una nueva plantilla de página. Luego, incluiremos el contenido de la página dinámica dentro del cuerpo de la plantilla y agregaremos un conmutador de mapa fijo encima del contenido de la página dinámica. ¡También podrá descargar el archivo JSON de la plantilla de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de página GRATIS

Para poner sus manos en la plantilla de página gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Crear plantilla de página dentro de Divi Theme Builder

Vaya al Divi Theme Builder y agregue una nueva plantilla de página

Comenzaremos este tutorial navegando al Divi Theme Builder y agregando una nueva plantilla de página.

Ingrese el área del cuerpo de la plantilla

Luego, ingrese el cuerpo de la plantilla seleccionando «Crear cuerpo personalizado».

2. Agregar contenido de página dinámico al área del cuerpo

Ajustes de sección

Espaciado

Una vez dentro del editor de plantillas, verás una sección. Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.

  • Relleno superior: 0px
  • Relleno inferior: 0px

Añadir Fila #1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

Agregar módulo de contenido de publicación a la columna

Para permitir que el contenido de cada página se muestre dinámicamente, usaremos el Módulo de contenido de publicación dentro de esta fila.

3. Crear diseño de pin de mapa fijo

Agregue la fila n.º 2 a la sección

Estructura de la columna

En la siguiente fila, que utiliza la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila, vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

  • Ancho: 90%
  • Anchura máxima:

    • Escritorio: 600px
    • Tableta y teléfono: 100%

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

Configuración de la columna 1

Color de fondo

Luego, abra la configuración de la columna 1 y use un color de fondo negro.

  • Color de fondo: #000000

Imagen de fondo

Cargue una imagen de fondo de su elección a continuación. Puede encontrar la imagen de fondo en la carpeta comprimida que puede descargar al comienzo de este tutorial.

Elemento principal CSS

Agregue las siguientes líneas de código CSS al elemento principal de la columna también:

01
02
width: 80% !important;
max-height: 80vh;

Visibilidad

Luego, ponga el desbordamiento vertical en automático. Esto, en combinación con la altura máxima en el paso anterior, asegura que aparezca una barra de desplazamiento tan pronto como la columna exceda una altura de 80vh.

  • Desbordamiento vertical: automático

Configuración de la columna 2

Elemento principal CSS

Abra la configuración de la columna 2 a continuación y aplique la siguiente línea de código CSS al elemento principal:

01
width: 12% !important;

Agregar módulo de mapa a la columna 1

Es hora de agregar módulos, comenzando con un módulo de mapa en la columna 1. Agregue un pin de mapa de su elección.

Dimensionamiento

Pase a la pestaña de diseño del módulo y cambie la configuración de tamaño de la siguiente manera:

  • Ancho: 88%
  • Alineación del módulo: Centro

Espaciado

Elimine el margen inferior predeterminado a continuación.

  • Margen inferior: 0px

Agregue el módulo Blurb a la columna 1

Agregar contenido

Agregue un módulo de Blurb debajo del módulo de mapa en la columna 1. Use algún contenido de su elección.

Seleccionar icono

Seleccione un icono a continuación.

Configuración de imagen/icono

Pase a la pestaña de diseño y cambie la configuración del icono de la siguiente manera:

  • Color del icono: #ffffff
  • Colocación de imagen/icono: Izquierda

Configuración del texto del título

Aplique estilo al texto del título a continuación.

  • Peso de la fuente del título: Negrita
  • Color del texto del título: #ffffff
  • Tamaño del texto del título: 16px
  • Altura de la línea de título: 1,6 em

Configuración del texto del cuerpo

Luego, modifique la configuración del texto del cuerpo en consecuencia:

  • Color del cuerpo del texto: #ffffff
  • Tamaño del cuerpo del texto:

    • Escritorio: 16px
    • Tableta: 14px
    • Teléfono: 13px
  • Altura de la línea del cuerpo: 1,8 em

Espaciado

Aplique también los siguientes valores de relleno:

  • Relleno superior: 70px
  • Relleno inferior: 70px
  • Relleno izquierdo: 7%
  • Relleno derecho: 7%

Animación

Y elimine la animación del módulo predeterminado en la configuración de animación.

  • Animación de imagen/icono: sin animación

Agregue el módulo Blurb a la columna 2

Deje las cajas de contenido vacías

En la columna 2. Allí, agregaremos un módulo de Blurb sin contenido.

Seleccionar icono

Seleccione un icono a continuación.

Color de fondo

Luego, cambia el color de fondo.

  • Color de fondo: #0045ff

Configuración de imagen/icono

Pase a la pestaña de diseño y diseñe la configuración del icono en consecuencia:

  • Color del icono: #ffffff
  • Colocación de imagen/icono: Arriba
  • Alineación de imagen/icono: Centro
  • Usar tamaño de fuente de icono: Sí
  • Tamaño de fuente del icono: 25 px

Dimensionamiento

Modifique la configuración de tamaño a continuación.

  • Ancho: 70px
  • Altura: 70px

Espaciado

Luego, elimine el margen inferior predeterminado.

  • Margen inferior: 0px

Sombra de la caja

Incluye también una sombra de caja.

  • Posición horizontal de la sombra del cuadro: 6px
  • Posición vertical de la sombra del cuadro: 6px
  • Color de sombra: rgba(0,0,0,0.3)

Elemento principal y CSS de imagen de Blurb

Luego, navegue a la pestaña avanzada y use las siguientes líneas de código CSS para el elemento principal:

01
02
03
display: flex;
justify-content: center;
align-items: center;

Y agrega esta línea de código CSS dentro del cuadro Imagen de Blurb:

01
margin-bottom: 0;

4. Agregar funcionalidad de alternar

Agregue la clase CSS a la fila n. ° 2

Ahora que tenemos todos los elementos en su lugar, es hora de centrarse en la funcionalidad. Comience abriendo la segunda fila y aplicando la siguiente clase CSS:

  • Clase CSS: map-toggle-row

Agregue la clase CSS al módulo Blurb en la columna 2

Abra el Módulo Blurb en la columna 2 a continuación y use la siguiente clase CSS:

  • Clase CSS: cambio de mapa

Agregue el módulo de código debajo del módulo Blurb en la columna 2

Luego, agregue un módulo de código debajo del módulo Blurb en la columna 2.

Agregar etiquetas de estilo y secuencia de comandos

Coloque algunas etiquetas de estilo y script dentro del cuadro de código.

Insertar código CSS

Estamos usando el siguiente código CSS dentro de las etiquetas de estilo:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
 
.reveal-map{
left: 0 !important;
}
 
.map-toggle {
cursor: pointer;
}

Insertar código JQuery

Y el siguiente código JQuery dentro de las etiquetas del script:

01
02
03
04
05
06
07
08
09
10
11
12
jQuery(function($){
$(document).ready(function(){
 
var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');
 
toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});
 
});
});

Agregar posición fija con desplazamiento horizontal a la fila n.º 2

Por último, pero no menos importante, tendremos que modificar la configuración de posición de la segunda fila en consecuencia:

  • Posición: Fija
  • Ubicación: Centro Izquierdo
  • Desplazamiento horizontal:

    • Escritorio: -500px
    • Tableta y teléfono: -72%
  • Índice Z: 11

5. Guardar cambios en el generador de páginas y temas

Una vez que se hayan aplicado todos los cambios, puede guardar todos los cambios de Divi Theme Builder y ver el resultado en su sitio web.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En este tutorial, le mostramos cómo incluir de manera creativa los detalles de la dirección de su empresa en los diseños de su página. Más específicamente, le mostramos cómo crear una plantilla de página que incluye un mapa fijo para alternar, ¡para que sus visitantes puedan acceder a la ubicación de su empresa en todo momento! También pudo descargar el archivo JSON de la plantilla de forma gratuita. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.

Publicaciones relacionadas:

  1. Cómo crear un conmutador de comentarios para su plantilla de publicación de blog Divi
  2. Cómo agregar un módulo de aviso de Woo a la plantilla de página de su producto Divi
  3. Cómo agregar una llamada a la acción deslizante que se puede cerrar en cualquier esquina de la plantilla de su página en Divi
  4. Cómo agregar múltiples pines a su mapa Divi