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

Si tiene una tienda física y crea un sitio web para ella, es posible que muchas personas visiten 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 acercarse a 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 utilizando el Generador de temas de Divi. Comenzaremos creando una nueva plantilla de página. Luego, incluiremos el contenido de la página dinámica en el lado del cuerpo de la plantilla y agregaremos una alternancia de mapa fija en la parte superior del contenido de la página dinámica. ¡También podrá descargar el archivo JSON de 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 la 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

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

Comenzaremos este tutorial navegando hasta 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. Agregue contenido de página dinámica al área del cuerpo

Configuración de la sección

Espaciado

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

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

Agregar fila n. ° 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

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado 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

Agregar fila n. ° 2 a la sección

Estructura de la columna

A 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

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado 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

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

CSS del elemento principal

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

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

CSS del elemento principal

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

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

Vaya 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

A continuación, elimine el margen inferior predeterminado.

• Margen inferior: 0px

Agregar módulo Blurb a la columna 1

Agregar contenido

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

Seleccionar icono

Seleccione un icono a continuación.

Configuración de imagen / icono

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

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

Configuración del texto del título

A continuación, aplique estilo al texto del título.

• 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.6em

Configuración del texto del cuerpo

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

• Color del texto del cuerpo: #ffffff
• Tamaño del texto del cuerpo:
  • Escritorio: 16px
  • Tableta: 14px
  • Teléfono: 13px
• Altura de la línea del cuerpo: 1.8em

Espaciado

Aplique también los siguientes valores de relleno:

• Acolchado superior: 70px
• Acolchado inferior: 70px
• Acolchado izquierdo: 7%
• Acolchado 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

Agregar módulo Blurb a la columna 2

Dejar los cuadros de contenido vacíos

Continúe en la columna 2. Allí, agregaremos un módulo Blurb sin contenido.

Seleccionar icono

Seleccione un icono a continuación.

Color de fondo

Luego, cambie el color de fondo.

• Color de fondo: # 0045ff

Configuración de imagen / icono

Vaya a la pestaña de diseño y aplique el estilo de la configuración del icono en consecuencia:

• Color del icono: #ffffff
• Ubicación de la imagen / icono: parte superior
• Alineación de imagen / icono: centro
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 25px

Dimensionamiento

A continuación, modifique la configuración de tamaño.

• Ancho: 70px
• Alto: 70px

Espaciado

Luego, elimine el margen inferior predeterminado.

• Margen inferior: 0px

Sombra de la caja

Incluya 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 e imagen publicitaria CSS

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

display: flex;
justify-content: center;
align-items: center;

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

margin-bottom: 0;

4. Agregar funcionalidad de alternancia

Agregar 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

Agregar 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: map-toggle

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

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

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, necesitaremos 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 conmutador de mapa fijo, para que sus visitantes puedan acceder a la ubicación de su empresa en todo momento. También pudo descargar el archivo JSON de 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.