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

Cada sitio web necesita una sección de contacto, pero eso no significa que deba optar por un diseño estándar. Con los efectos de desplazamiento de Divi, puede crear una sección de contacto flotante que se destacará. Mejore la interacción del usuario con un diseño de sección de contacto de desplazamiento vertical que invitará a los visitantes a interactuar con su formulario de contacto. En esta publicación, le mostraremos cómo crear una sección de contacto flotante de ancho completo que puede agregar a cualquier página. Incluso puede agregarlo en la parte superior de un pie de página de todo el sitio con Divi Theme Builder.

A continuación, encontrará una carpeta descargable gratuita con el diseño JSON para cargar en su propia biblioteca Divi. También hemos incluido una plantilla PSD para ayudarlo a recrear el fondo del mapa, además de un SVG del pin del mapa para que pueda personalizarlo con sus propios colores.

¡Hagámoslo!

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

Descargue 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 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. Cree un fondo de mapa para la sección de contacto flotante

Abrir Google Maps

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, abra Google Maps y busque su dirección.
• Cuando se cargue, aleje el zoom para que pueda ver una gran parte de la ciudad o calles alrededor de su 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 pin de ubicación.
• Finalmente, captura de pantalla el 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. Le invitamos a 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.
• En tercer lugar, cambie el color para que coincida con su marca o sitio web.
• Finalmente, guárdelo como 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 alfiler.

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, siga estos pasos

• Abra el archivo PSD.
• Haga doble clic en la capa con el color naranja. Una nueva ventana se abrirá.
• Reemplaza nuestro mapa con el tuyo.
• No olvide hacer clic en guardar.
• Vuelva a la ventana de edición principal y haga clic en guardar allí también.
• Exportar para web como .jpg.

Si no tiene Photoshop, siga estos pasos:

• Primero, cree un nuevo proyecto a 1920 x 700 px.
• En segundo lugar, coloque la captura de pantalla del mapa en el lienzo. Asegúrese de mantener su 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 algo de contraste.
  1. Brillo: -25
  2. Contraste: -50
• Luego, haga clic en la capa de la imagen y agregue transparencia aproximadamente al 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 alfiler en su ubicación. Tamaño de aproximadamente 90 px de alto. Déjelo 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 es 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: su mapa editado

Espaciado

Luego, personalice 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 visible.

• 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 la fila modificando la configuración de la posición.

• Posición: relativo
• Origen de desplazamiento: 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

A continuación, ajuste la configuración de espaciado.

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

Frontera

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

• Esquinas redondeadas: 10 px en las cuatro esquinas

Efectos de desplazamiento

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

• Efectos de transformación de desplazamiento: movimiento vertical
• Establecer movimiento vertical / escritorio
  • Desplazamiento inicial: 4
  • Desplazamiento medio: 0 (al 50%)
  • Desplazamiento final: -4
• Establecer movimiento vertical / tableta y teléfono
  • Desplazamiento inicial: 4
  • Desplazamiento medio: 0 (al 40% y 60%)
  • Desplazamiento 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.

• Posición: relativo
• Origen de desplazamiento: 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
  • Desplazamiento inicial: 2
  • Desplazamiento medio: 0 (al 50%)
  • Desplazamiento final: -2
• Establecer movimiento vertical / tableta y teléfono
  • Desplazamiento inicial: 0
  • Desplazamiento medio: 0 (al 50%)
  • Desplazamiento 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 algún contenido H2 de su elección.

Texto de encabezado

Vaya a la pestaña de diseño y aplique el estilo del texto H2 de la siguiente manera.

• Nivel de encabezado: 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

Agregar 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
• Tema
• Mensaje

Protección contra el spam

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

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

Los campos

Vaya a la pestaña de diseño y aplique el estilo a los campos de la siguiente manera.

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

Botón

Luego, estiliza el botón.

• Estilos personalizados: sí
• Tamaño del texto: 20px
• Color del texto: azul oscuro # 25274d
• Color de fondo: amarillo # ffd868
• Radio de 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 algo de relleno en la parte superior también.

• Acolchado superior: 4vw

Frontera

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

• Entradas esquinas redondeadas: 6px en las cuatro esquinas
• Estilos de borde de entrada: los cuatro lados
• Ancho de 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

Vaya a la columna 2 y agregue un módulo de redes sociales. Utilice todas las redes sociales que necesite.

• Facebook
• Gorjeo
• Linkedin

Enlace

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

Fondo del artículo

Ahora, abra la primera red social y cambie el color de fondo.

• Color: Azul oscuro # 25274d

Ícono de artículo

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 el resto de las redes sociales, vuelva 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 también todo el relleno predeterminado.

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

Frontera

Finalmente, agregue algunas esquinas redondeadas en la configuración del borde. Esto ajustará los bordes de todos los iconos 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. Agregamos 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: 1587 Sukhumvit Soi 21, Bangkok, Tailandia.
• UBICACIÓN MINORISTA : Emporium Mall, 2nd Floor
• TELÉFONO: (321) 564 2398
• CORREO ELECTRÓNICO: [correo electrónico protegido]

Fondo

Modifique el color de fondo del módulo.

• Color: Azul oscuro # 25274d

Texto

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

• Fuente: Palanquin
• 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

Frontera

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

• Esquinas redondeadas: 10px superior derecha, inferior izquierda e inferior 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

¡Ha terminado de recrear el diseño de la sección de contacto flotante!

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