Cómo expandir su módulo de mapa en desplazamiento con los efectos de desplazamiento de Divi

Agregar un mapa a su sitio web es una excelente manera de mostrar a sus visitantes dónde se encuentra usted o su empresa. Con la configuración integrada de Divi, tienes control creativo total sobre el diseño de tu módulo de mapa y cualquier elemento de diseño circundante. Lleva tus diseños a otro nivel aplicando efectos de desplazamiento a tu módulo. Con varios tipos diferentes de efectos para elegir y configuraciones para ajustar el efecto hasta que logre exactamente lo que desea, el uso de efectos de desplazamiento puede ayudarlo a agregar un movimiento llamativo a los módulos de su sitio web. En esta publicación, le mostraremos cómo ampliar su módulo de mapa al desplazarse con los efectos de desplazamiento de Divi.

¡Empecemos!

Vistazo

Aquí hay una vista previa de lo que diseñaremos.

Diseño 1

Diseño 2

Lo que necesitas para empezar

Antes de comenzar, instale y active el tema Divi y asegúrese de tener la última versión de Divi en su sitio web.

Ahora, ¡estás listo para comenzar!

Cómo agrandar su módulo de mapa en desplazamiento con los efectos de desplazamiento de Divi

Diseño 1

Crear una nueva página con un diseño prefabricado

Comencemos usando un diseño prefabricado de la biblioteca Divi. Para este diseño, utilizaremos la página de inicio de Acai Bowl del Paquete de diseño de Acai Bowl.

Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.

Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.

Busque y seleccione la página de inicio de Acai Bowl.

Seleccione Usar este diseño para agregar el diseño a su página.

Ahora estamos listos para construir nuestro diseño.

Agregar el módulo de mapa

Vamos a agregar el módulo de mapa a la sección "Ven a visitarnos" en la página de destino. Comience agregando una nueva fila con una sola columna.

Agregue el módulo de mapa a la nueva fila.

Agregue su clave API de Google para habilitar el mapa si aún no lo ha hecho. Luego, agregue una dirección central al mapa. Para este tutorial, la dirección será San Francisco, California.

A continuación, agregue un nuevo pin.

Establezca la dirección del pin del mapa. Una vez más, estableceremos esto en San Francisco, California para este tutorial.

Configuración de diseño

Vaya a la pestaña Diseño y abra la configuración de tamaño. Establezca la Altura.

• Altura: 300px

A continuación, abra la configuración del borde y agregue esquinas redondeadas al mapa.

• Esquinas redondeadas: 22px

Agregar los efectos de desplazamiento

Ahora el diseño de nuestro módulo de mapas está completo para que podamos agregar los efectos de desplazamiento. Vaya a la pestaña Avanzado, luego navegue a Efectos de desplazamiento. En Efectos de transformación de desplazamiento, seleccione la pestaña de escalado hacia arriba y hacia abajo.

Habilite escalar hacia arriba y hacia abajo. Esto permitirá que nuestro módulo de mapas aumente de tamaño a medida que se desplaza hacia abajo en la página.

Vamos a ajustar la configuración de escala. Ajuste la escala inicial, media y final. Puede lograr un efecto de escala más sutil manteniendo los números relativamente juntos. Si hay una gran diferencia entre los números, logrará un efecto de escala más drástico.

• Escala inicial: 80%
• Escala media: 90%
• Escala final: 100%

Finalmente, configure el efecto de movimiento para que se dispare en el medio del elemento.

• Disparador de efecto de movimiento: medio del elemento

Diseño final

Aquí está el diseño final para nuestro primer diseño.

Diseño 2

Crear una nueva página con un diseño prefabricado

Para el segundo diseño, utilizaremos el diseño de la página de contacto del mismo paquete de diseño de Acai Bowl. Empecemos.

Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.

Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.

Busque y seleccione la página de contacto de Acai Bowl.

Seleccione Usar este diseño para agregar el diseño a su página.

Ahora estamos listos para construir nuestro diseño.

Modificar configuración de fila

Primero, mueva la fila que contiene el módulo de mapa a la sección de arriba, debajo de las direcciones.

Luego, modifique el diseño de la fila a dos columnas.

Abra la configuración de la fila, luego abra la configuración de la columna 1.

Agrega un color de fondo.

• Fondo: #442854

Finalmente, navegue a la pestaña de diseño y abra la configuración del borde. Agregue esquinas redondeadas a las esquinas inferiores izquierda y derecha.

• Esquinas redondeadas - abajo a la izquierda: 300px
• Esquinas redondeadas - abajo a la derecha: 300px

Modificar la configuración de la sección

Abra la configuración de la sección para la sección que contiene el módulo de mapa. Navegue a la configuración de fondo, luego agregue una máscara de fondo.

• Máscara de fondo: Mancha de esquina
• Color de la máscara: #FFFFFF
• Transformación de máscara: vertical e invertir

Añadir imagen

Primero, agregue un módulo de imagen a la columna al lado del módulo de mapa.

Luego, agregue la imagen transparente del tazón de acai al módulo. Debería tener esto en su biblioteca de medios etiquetado como acai-bowl-34.png si usó el diseño de la página de destino de Acai Bowl para el Diseño 1.

Queremos que la imagen del cuenco de acai gire a medida que se desplaza hacia abajo en la página. Vaya a la pestaña Avanzado, luego abra la sección Efectos de desplazamiento. Seleccione la pestaña Rotación y habilite la rotación.

A continuación, establezca la rotación.

• Rotación inicial: 180
• Rotación media: 90
• Rotación final: 0

Diseño de mapas

Ahora pase a la configuración del módulo de mapa. En la pestaña de diseño, abra la configuración del mapa. Habilite el filtro de escala de grises.

• Usar filtro de escala de grises: Sí
• Cantidad de filtro de escala de grises (%): 100

A continuación, modifique la altura en la pestaña Tamaño.

• Altura: 600px

En la configuración de Espaciado, agregue algunos márgenes.

• Margen superior: 5px
• Margen inferior: 5px
• Margen-Izquierdo: 5px
• Margen derecho: 5px

Luego agregue esquinas redondeadas a las esquinas inferiores izquierda y derecha.

• Esquinas redondeadas - Abajo a la izquierda: 300px
• Esquinas redondeadas - Abajo a la derecha: 300px

Agregar efectos de desplazamiento

Ahora finalmente podemos agregar los efectos de desplazamiento al mapa para que se agrande al desplazarse. Abra la sección Efectos de desplazamiento en la pestaña Avanzado. Luego, seleccione la pestaña de escalado hacia arriba y hacia abajo y habilite el escalado hacia arriba y hacia abajo.

Por último, personaliza las escalas.

• Escala inicial: 90%
• Escala media: 95%
• Escala final: 100%

Diseño final

Aquí está el diseño final para el diseño 2.

Resultado final

Ahora echemos un vistazo a nuestros dos diseños en acción.

Diseño 1

Diseño 2

Pensamientos finales

Al aplicar los efectos de desplazamiento de Divi al módulo del mapa, puede lograr un efecto único a medida que se desplaza hacia abajo en la página y ayudar a que su mapa se destaque para los visitantes del sitio web. ¡Estos efectos también se pueden aplicar a cualquier otro módulo en su sitio web, por lo que no hay límite para lo que puede lograr con un poco de creatividad! Si está interesado en más tutoriales relacionados con el módulo de mapas, consulte este artículo sobre cómo agregar un conmutador de mapa fijo a su plantilla de página Divi. Y si desea obtener más ideas de diseño con efectos de desplazamiento, consulte este tutorial sobre cómo agregar iconos animados de desplazamiento a los fondos de su sección. ¿Cómo ha aplicado los efectos de desplazamiento de Divi a su sitio web? ¡Cuéntanos en los comentarios!