Cree una sección de contacto flotante con efectos de movimiento Divi Scroll

Avance

Antes de comenzar a crear el diseño del formulario de contacto, observe el resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga la Sección de Contacto Flotante GRATIS

Para poner sus manos en el diseño de la sección de contacto flotante libre, primero deberá descargarlo 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.

1. Crear un fondo de mapa para la sección de contacto flotante

Abrir mapas de Google

El primer paso de este tutorial es crear el fondo del mapa en blanco y negro. Para crear uno propio, siga los pasos a continuación:

• Primero, abre Google Maps y busca tu dirección.
• Cuando se cargue, aleja la imagen para que puedas ver una gran parte de la ciudad o las calles alrededor de tu dirección.

• A continuación, coloque el mapa de modo que su ubicación esté en el cuadrante superior derecho del mapa.
• Luego, retire el pasador de ubicación.
• Finalmente, haz una captura de pantalla del mapa evitando las pestañas en las esquinas.

Personaliza el Pin

En los archivos descargables anteriores, hemos incluido un archivo SVG del pin que usamos en el diseño. Puede usarlo y cambiar los colores con su editor de gráficos vectoriales. También hemos incluido un PNG transparente si desea cambiar el color en Photoshop.

Siga estos pasos para el pin SVG:

• Primero, descargue los archivos gratuitos al comienzo de este tutorial y descomprima la carpeta.
• En segundo lugar, abra el gráfico de pin SVG con Illustrator, Inkscape o su editor de vectores favorito.
• Tercero, cambie el color para que coincida con su marca o sitio web.
• Finalmente, guarde como un PNG transparente.

Editar en Photoshop

Ahora es el momento de ponerlo todo junto. Primero, abra el mapa en su editor de gráficos favorito para desaturar el color. En segundo lugar, agregue el pin.

Si tiene Photoshop, puede usar el archivo PSD que incluimos y simplemente agregar la captura de pantalla de su mapa al objeto inteligente en la segunda capa.

Para usar el objeto inteligente, sigue estos pasos

• Abre el archivo PSD.
• Haga doble clic en la capa con el color naranja. Una nueva ventana se abrirá.
• Reemplace nuestro mapa con el suyo.
• No olvides hacer clic en guardar.
• Regrese a la ventana de edición principal y haga clic en Guardar allí también.
• Exportar para web como .jpg.

Si no tienes Photoshop, sigue estos pasos:

• Primero, crea un nuevo proyecto de 1920 px x 700 px.
• En segundo lugar, coloque la captura de pantalla del mapa en el lienzo. Asegúrate de mantener tu ubicación en el cuadrante superior derecho, un poco más alto que el centro.
• En tercer lugar, el uso de ajustes de imagen convierte la imagen en blanco y negro.
• Además, agregue un poco de contraste.
  
  1. Brillo: -25
  2. Contraste: -50
• Luego, haz clic en la capa de la imagen y agrega una transparencia de alrededor del 55 %.
• Si va a crear este diseño en una página web que no tiene un fondo blanco, agregue una capa blanca debajo de la imagen para mantener el color base blanco sin importar el color de fondo que tenga el sitio web.
• Continúe colocando el pin en su ubicación. Tamaño de alrededor de 90px de alto. Déjalo en la capa superior.
• Finalmente, descárguelo como .jpg.

2. Crear estructura de elementos

Agregar nueva sección

Fondo

¡Ahora es el momento de comenzar a construir la sección de contacto flotante con Divi Builder! Lo primero que haremos será abrir una página nueva o existente y agregar una nueva sección.

En la pestaña de contenido, agregue el fondo del mapa que ha creado en Photoshop.

• Imagen de fondo: tu mapa editado

Espaciado

Luego, personaliza la configuración de espaciado de la sección en la pestaña de diseño.

• Margen superior e inferior: 50vh
• Acolchado inferior: 0vw

Visibilidad

A continuación, ajuste los desbordamientos a visibles.

• Desbordamiento horizontal y vertical: visible

Posición

Finalmente, establezca el índice Z de la sección en 10.

• Índice Z: 10

Agregar nueva fila

Estructura de la columna

Ahora es el momento de agregar algunos elementos. Primero, agregue una fila con 2 columnas.

Dimensionamiento

Abra la configuración de la fila y ajuste el tamaño de la siguiente manera.

• Ancho
  
  • Escritorio: 90%
  • Tableta y teléfono: 80%
• Ancho máximo: 90%

Visibilidad

Haga clic en la pestaña avanzada y ajuste los desbordamientos a continuación.

• Desbordamiento horizontal y vertical: visible

Posición

Complete la configuración de fila modificando la configuración de posición.

• Cargo: Relativo
• Origen compensado: arriba a la izquierda
• Desplazamiento vertical
  
  • Escritorio: -8vw

Configuración de la columna 1

Fondo

Antes de agregar módulos, necesitaremos diseñar las columnas individuales. Agregue un color de fondo a la columna 1.

• Color sólido: #25274d

Espaciado

Ajuste la configuración de espaciado a continuación.

• Acolchado superior e inferior
  
  • Escritorio y tableta: 7vw
• Relleno izquierdo y derecho
  
  • Escritorio: 3vw
  • Tableta y teléfono: 6vw

Borde

Luego, agregue algunas esquinas redondeadas a la configuración del borde.

• Esquinas redondeadas: 10px las cuatro esquinas

Efectos de desplazamiento

Por último, pero no menos importante, use algo de movimiento vertical en la configuración de los efectos de desplazamiento. Esto nos ayudará a crear un efecto flotante.

• Efectos de transformación de desplazamiento: movimiento vertical
• Establecer movimiento vertical/escritorio
  
  • Compensación inicial: 4
  • Compensación media: 0 (al 50 %)
  • Compensación final: -4
• Establecer movimiento vertical / tableta y teléfono
  
  • Compensación inicial: 4
  • Compensación media: 0 (al 40% y 60%)
  • Compensación final: -3
• Disparador de efecto de movimiento: medio del elemento

Configuración de la columna 2

Posición

Ahora, pasemos a la configuración de la segunda columna. Ajuste la configuración de posición en consecuencia.

• Cargo: Relativo
• Origen compensado: arriba a la izquierda
• Desplazamiento vertical
  
  • Escritorio: 25vw

Efectos de desplazamiento

También estamos agregando algo de movimiento vertical a esta columna.

• Efectos de transformación de desplazamiento: movimiento vertical
• Establecer movimiento vertical/escritorio
  
  • Compensación inicial: 2
  • Compensación media: 0 (al 50 %)
  • Compensación final: -2
• Establecer movimiento vertical / tableta y teléfono
  
  • Compensación inicial: 0
  • Compensación media: 0 (al 50 %)
  • Compensación final: -2
• Disparador de efecto de movimiento: Parte superior del elemento

Agregar módulo de texto a la columna 1

Contenido

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

Texto de encabezado

Pase a la pestaña de diseño y diseñe el texto H2 de la siguiente manera.

• Nivel de título: H2
• Fuente: Palanquin Dark
• Peso de fuente: Negrita
• Estilo de fuente: TT
• Color: Amarillo #ffd868
• Tamaño
  
  • Escritorio: 5vw
  • tableta: 10vw
  • Teléfono: 12vw
• Espaciado entre letras: 4px

Agregue el módulo de formulario de contacto a la columna 1

Contenido

Debajo del módulo de texto, agregue un formulario de contacto. Estos son los campos que estamos usando:

• Nombre
• Correo electrónico
• Sujeto
• Mensaje

Protección contra el spam

Antes de diseñar el módulo de formulario de contacto. active la protección contra correo no deseado y conecte su cuenta ReCaptcha.

• Utilice un servicio de protección contra correo no deseado: Sí
• Proveedor de servicios: ReCaptcha
• Seleccionar cuenta

Campos

Pase a la pestaña de diseño y diseñe los campos de la siguiente manera.

• Color de fondo: Azul oscuro #25274d
• Color del texto: Gris pálido #d1d1d1
• Color de fondo del foco: Azul oscuro #25274d
• Color del texto de enfoque: gris pálido #d1d1d1
• Fuente: Palanquín
• Estilo: TT
• Tamano del texto
  
  • Escritorio: 0.9vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Espaciado entre letras: 1px

Botón

Luego, diseñe el botón.

• Estilos personalizados: Sí
• Tamaño del texto: 20px
• Color del texto: Azul oscuro #25274d
• Color de fondo: amarillo #ffd868
• Radio del borde: 7px
• Color del icono: Azul oscuro #25274d
• Margen superior: 5px

Dimensionamiento

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

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

Espaciado

Agregaremos un poco de relleno superior también.

• Acolchado superior: 4vw

Borde

Complete la configuración del módulo personalizando la configuración del borde.

• Entradas esquinas redondeadas: 6px las cuatro esquinas
• Estilos de borde de entrada: Los cuatro lados
• Ancho del borde de entrada: 2px
• Color del borde de las entradas: amarillo #ffd868

Agregue el módulo de seguimiento de redes sociales a la columna 2

Contenido

Pase a la columna 2 y agregue un módulo de redes sociales. Utiliza todas las redes sociales que necesites.

• Facebook
• Gorjeo
• LinkedIn

Enlace

Antes de diseñar, agregue enlaces a las redes correspondientes.

Fondo del elemento

Ahora, abre la primera red social y cambia el color de fondo.

• Color: Azul oscuro#25274d

Icono de elemento

En la pestaña de diseño del mismo elemento, cambie la configuración del icono de la siguiente manera.

• Color: Amarillo #ffd868
• Tamaño de fuente del icono
  
  • Escritorio y tableta: 31px
  • Teléfono: 26px

Espaciado de elementos

Luego, agregue un pequeño margen para separar los íconos entre sí.

• Margen derecho: 1vw

Copiar y pegar estilos de elementos

Para diseñar las redes sociales restantes, regrese a la ventana de contenido principal y copie los estilos de elementos del primer icono. Luego, pegue los estilos de elementos en las redes sociales restantes.

Alineación

Pase a la pestaña de diseño principal y asegúrese de que el módulo esté alineado a la izquierda.

• Alineación del módulo: Izquierda

Dimensionamiento

Luego, ajuste el tamaño del módulo.

• Ancho: 100%

Espaciado

Borre todo el relleno predeterminado también.

• Relleno superior, inferior, izquierdo y derecho: 0vw

Borde

Finalmente, agregue algunas esquinas redondeadas en la configuración del borde. Esto ajustará los bordes de todos los íconos a la vez.

• Esquinas redondeadas
  
  • Superior izquierda y derecha: 7px
  • Inferior izquierda y derecha: 0px

Agregar módulo de texto a la columna 2

Contenido

Debajo del módulo de redes sociales, agregue otro módulo de texto. Agregue algún contenido de su elección. Hemos agregado dos direcciones, un número de teléfono y un correo electrónico. Use negrita en el título de cada artículo en mayúsculas.

• SEDE CENTRAL: 1587 Sukhumvit Soi 21, Bangkok, Tailandia.
• UBICACIÓN DE VENTA : Emporium Mall, 2do piso
• TELÉFONO : (321) 564 2398
• CORREO ELECTRÓNICO: ShopsBKK@gmail.com

Fondo

Modifica el color de fondo del módulo.

• Color: Azul oscuro #25274d

Texto

Pase a la pestaña de diseño y aplique estilo al texto.

• Fuente: Palanquín
• Color: Amarillo #ffd868
• Tamaño: 18px

Espaciado

Agregue también algunos valores de espaciado personalizados.

• Margen superior
  
  • Escritorio: -60px
  • Tableta y teléfono: -50px
• Relleno superior, inferior, izquierdo y derecho
  
  • Escritorio: 3vw
  • tableta: 6vw
  • Teléfono: 8vw

Borde

Y complete el módulo agregando esquinas redondeadas en la configuración del borde. ¡Eso es todo!

• Esquinas redondeadas: 10px arriba a la derecha, abajo a la izquierda y abajo a la derecha.

Avance

Ahora que hemos terminado de recrear la sección de contacto flotante, eche un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Ya terminó de recrear el diseño de la sección de contactos flotantes!

El uso de los nuevos efectos de desplazamiento Divi ayuda a convertir cualquier diseño estándar en un diseño excelente. Al crear su propio fondo de mapa, tiene más control sobre cómo se ve el diseño terminado. Si tiene alguna pregunta o sugerencia, deje un comentario en la sección de comentarios a continuación.