Cómo agregar un interruptor de mapa fijo a su página Div

Si ejecuta una tienda física y crea un sitio web para ello, muchas personas pueden visitar su sitio web para obtener información práctica, como su dirección, por supuesto, aquí está su página de contacto, pero esta no es la única forma en que puede compartir fácilmente el Contacta los datos de sus visitantes. Si está buscando una forma creativa de abordar la dirección de su empresa, le gustará este tutorial. Le mostramos cómo agregar un mapa fijo para cambiar dinámicamente en cada página utilizando el constructor de temas de Divin. Comenzaremos creando una nueva plantilla de página. Luego incluiremos el contenido dinámico de la página en el lado del cuerpo de la plantilla y agregaremos un cambio fijo del mapa sobre el contenido dinámico de la página. ¡Podrá descargar la plantilla JSON gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la plantilla de página gratuita para poner su mano en la plantilla de página gratuita, primero deberá descargarla usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree la plantilla de página dentro del generador de Div Div Divi Div Divi Builder Div Divi y agregue una nueva plantilla de página. Comenzaremos este tutorial navegando al constructor de temas y agregando una nueva plantilla de página.
Ingrese el cuerpo de la plantilla luego, luego ingrese al cuerpo de la plantilla seleccionando “construir cuerpo personalizado”.


2. Agregue contenido dinámico de contenido en la configuración del área del cuerpo Una vez que llegue al editor de plantillas, notará una sección. Abra la configuración de la sección y elimine todos los valores predeterminados desde arriba e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Ancho: 100%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue un módulo de contenido para publicar en la columna para permitir que el contenido de cada página aparezca dinámicamente, usaremos el módulo publicar el contenido de esta fila. Cree el diseño fijo del mapa Pine Agregue la fila # 2 a la sección de la columna en la siguiente fila, que utiliza la siguiente estructura de la columna:

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

Ancho: 90%

Ancho máximo:
Escritorio: 600 PX
Tableta y teléfono: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Configuración 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 la siguiente imagen de fondo de su elección. Puede encontrar la imagen de fondo en la carpeta cremallera que puede descargar al comienzo de este tutorial.
El elemento CSS principal también agrega las siguientes líneas de código CSS al elemento principal de la columna: Ancho: 80%! Importante;


Max-Alta: 80VH;

Visibilidad Entonces, pon el derrame vertical en la automática. 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 excede una altura de 80 VH.
Desbordamiento vertical: Auto

Configuración Columna 2 Artículo principal CSS Abra la columna 2 Configuración y aplique la siguiente línea de código CSS al elemento principal:
Ancho: 12%! Importante;

Agregue el 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 código de mapa a su elección.
Dimensión Vaya a la pestaña 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

Espacio eliminar el siguiente margen inferior predeterminado.
Margen inferior: 0 PX
Agregue los módulos de la propaganda a la columna 1 Agregar contenido Agregar un módulo de propaganda en el módulo de mapa en la columna 1. Use un contenido de su elección.


Seleccione el icono Seleccione un icono adicional.
Configuración de imagen / icono Vaya a la pestaña Design y modifique la configuración del icono de la siguiente manera:

Icono de color: #ffffff

Colocación de la imagen / icono: izquierda

Configuración de texto de título Stilet el texto del título más.
Título Fuente de peso: Bold
Color de texto del título: #ffffff

Título Tamaño del texto: 16 PX
Altura de la línea de título: 1.6em
Configuración de texto del cuerpo y luego cambie la configuración de texto de su cuerpo en consecuencia:
Color del texto del cuerpo: #ffffff
El tamaño del texto del cuerpo:

Escritorio: 16 PX
Tableta: 14 PX
Teléfono: 13 PX
La altura de la línea del cuerpo: 1.8em
Espacio Aplicar los siguientes valores de llenado:
Revestimiento superior: 70 PX
Finamiento inferior: 70 PX

ENLIZACIÓN IZQUIERDA: 7%
Revestimiento derecho: 7%
Animación y elimine la animación predeterminada del módulo de la configuración de animación.
Animación de imagen / icono: sin animación
Agregue los módulos de la propaganda a la columna 2 Deje los cuadros de contenido vacíos en la columna 2. Allí, agregaremos un módulo de propaganda sin contenido.

Seleccione el icono Seleccione un icono adicional.
Color de fondo y luego cambia el color de fondo.

Color de fondo: # 0045ff

Configuración de imagen / icono Vaya a la pestaña de diseño y estilice la configuración del icono en consecuencia:

Icono de color: #ffffff
Colocación de la imagen / icono: imagen / icono de sushabilidad: centro

Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 25 PX
La dimensión cambia la configuración de dimensionamiento adicional.
Ancho: 70 PX
Altura: 70 PX
Espacio luego retire el margen inferior predeterminado.

Margen inferior: 0 PX
La sombra de la caja también incluye un tono de caja.
Posición horizontal de la sombra de la caja: 6 px

Box Shadow Posición vertical: 6 PX
Color de la sombra: RGBA (0.0,0,0,3)

Elemento principal y la imagen de la imagen CSS luego navegue por la pestaña avanzada y use las siguientes líneas de código CSS para el elemento principal:
Pantalla: Flex;
Justify-Concursing: Centro;
Alinine-Ritams: Centro; Y agregue esta línea de código CSS al cuadro de imagen de la propaganda: Margen-Bottom: 0;

4. Agregue el interruptor de funcionalidad Agregar clase CSS a la fila 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: almante de los comité de mapas
Agregue la clase CSS a los módulos de blurb en la columna 2 Abra el módulo de la propaganda en la columna 2 y use la siguiente clase CSS:
Clase CSS: Map-Toggle

Agregue un módulo de código en el módulo Blur en la columna 2 y luego, agregue un módulo de código en el módulo Blur en la columna 2.
Agregue las etiquetas de estilo y el script coloque algunas etiquetas de estilo y script en el cuadro de código.

Ingrese el código CSS Usamos el siguiente código CSS en etiquetas de estilo: .map-toggle-row {
-Webkit-transition: .1s Fase-Out;

-Moz-Transition: .1s Fase-in;

-O-transición: .1s Facilifique;

Transición: .1s Facilización;
}
.Revelar mapa {
Izquierda: 0! IMPORTANTE;
}
.map-toogle {
Cursor: puntero;
}
Ingrese el código jquey y el siguiente código jquey de las etiquetas de script: jQuery (function ($) {$ (documento) .Ready (function () {
Var togleicon = $ (‘. Map-toogle’);
Var togglet = $ (‘. Map-toggle-row’);
toggleicon.click (function () {

togglet.
});
});
});
Agregue la posición fija con la brecha horizontal en la fila 2 no menos importante, necesitaremos cambiar la configuración de posición de la segunda fila de acuerdo con:
Posición: fijo
Ubicación: centro izquierdo
Brecha horizontal:
Desktop: -500px

Tableta y teléfono: -72%
IND ÍNDICE: 11
5. Guarde las páginas y los cambios en el constructor de temas una vez que se hayan aplicado todos los cambios, ¡puede guardar todos los cambios de Builder Divic y puede ver el resultado en su sitio web!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En este tutorial, le he mostrado cómo incluir creativamente los detalles de la dirección de su empresa en las páginas. Específicamente, le mostré cómo crear una plantilla de página que incluya un interruptor de mapa fijo para que sus visitantes puedan acceder a la ubicación de su empresa en cualquier momento. También puede descargar el archivo de plantilla JSON 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.