Crear una sección de contacto flotante con Div Scroll

Cada sitio web necesita una sección de contacto, pero eso no significa que tenga que elegir un diseño estándar. Con los efectos de la división, puede crear una sección de contacto flotante que se destaque. Mejore la interacción con el usuario con un aspecto vertical de la sección de contacto que invita 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 con un ancho completo que pueda agregar a cualquier página. Incluso puede agregarlo a la parte superior de un sótano a nivel de sitio con el temas Builder Div.
A continuación, encontrará una carpeta de descarga gratuita con el JSON Buscando la carga en su propia biblioteca de la Divica. También incluimos una plantilla de PSD para ayudarlo a recrear el fondo del mapa, además de un SVG del mapa, para que pueda personalizarla con sus propios colores. ¡Vamos a eso! Vista previa antes de comenzar a construir la apariencia del formulario de contacto, eche un vistazo al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la sección de contacto flotante gratuita para poner su mano en la sección de contacto flotante de aspecto gratuito, 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 el fondo del mapa para la sección de contacto flotante Abra Google Maps El primer paso hacia este tutorial es crear el fondo del mapa en blanco y negro. Para crear el suyo, siga los pasos a continuación:
Primero, abra Google Maps y busque su dirección.
Cuando esté cargado, reduzca, para que pueda ver una gran parte de la ciudad o las calles alrededor de la dirección.
Luego coloque el mapa para que su ubicación esté en el dial superior derecho del mapa.

Luego retire el pino de ubicación.
Finalmente, capture el mapa evitando las pestañas en las esquinas.
Personalice el pino en los archivos descargables anteriores, incluimos un archivo SVG que utilicé en el diseño. Puede usarlo y cambiar los colores con su editor de gráficos vectoriales. También incluimos un PNG transparente si desea cambiar de color en Photoshop.

Siga estos pasos para el pino SVG:
Primero, descargue los archivos gratuitos al comienzo de este tutorial y no me guste la carpeta.
En segundo lugar, abra el gráfico SVG PIN 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 armar todo. Primero, abra el mapa en su editor de gráficos favorito a Desat Color. En segundo lugar, agregue el pino. Si tiene Photoshop, puede usar el archivo PSD que incluí y simplemente agregar la pantalla del mapa al objeto inteligente en la segunda capa.
Para usar el objeto inteligente, siga estos pasos

Abra el archivo PSD.
Capa de doble clic con color naranja. Una nueva ventana se abrirá.
Reemplace nuestro mapa con su
No olvides hacer clic en Guardar.
Regrese a la ventana de edición principal y haga clic en el rescate allí.
Exportar para Web CA .jpg.
Si no tiene Photoshop, siga estos pasos:
Primero, cree un nuevo proyecto en 1920 PX x 700 PX.

En segundo lugar, coloque la captura de la 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.
Tercero, el uso de ajustes de imagen transforma la imagen en blanco y negro.
También agregue un poco de contraste.
Brillo: -25
Contraste: -50
Luego haga clic en la capa de imagen y agregue transparencia a aproximadamente 55%.
Si crea este diseño en una página web que tiene un fondo que no es blanco, agregue una capa blanca debajo de la imagen para mantener el color blanco, independientemente del color de fondo.
Continúe colocando la pila en su ubicación aumenta aproximadamente 90 px de altura. Déjalo en la capa más alta. Finalmente, descargue como .jpg.
2. Cree la estructura del elemento Agregar una nueva sección de 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 Contenido, agregue el fondo del mapa que creó en Photoshop.
Imagen de fondo: su mapa editado
Espacio entonces, personalice la configuración de separación de la sección en la pestaña de diseño.

Margen superior e inferior: 50 VH
Revestimiento inferior: 0 VW

Visibilidad Entonces, ajuste los derrames a visibles.
Superación horizontal y vertical: Visible
Finalmente, establezca el índice z de la sección en 10.

IND ÍNDICE: 10
Agregue una nueva línea a la estructura de la columna ahora es el momento de agregar algunos elementos. Primero, agregue una fila con 2 columnas.

Dimensión 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 luego ajuste los derrames.
Superación horizontal y vertical: Visible
Posición Complete la configuración de la fila cambiando la configuración de posición.

Posición: pariente
Origen del desplazamiento: superior izquierda

Brecha vertical
Escritorio: -8VW
Configuración de la columna 1 Antecedentes Antes de agregar módulos, necesitaremos estilizar las columnas individuales. Agregue un color de fondo a la columna 1.
Color sólido: # 25274d
Extienda y luego ajuste la configuración de espaciado.

Revestimiento superior e inferior
Escritorio y tableta: 7VW

Forro izquierdo y derecho
Escritorio: 3VW
Tableta y teléfono: 6VWfrontier Luego, agregue algunas esquinas redondeadas a la configuración del borde.
Esquinas redondeadas: 10 px las cuatro esquinas
Por último, pero no menos importante, use un movimiento vertical en la configuración de los efectos de configuración. Esto nos ayudará a crear un efecto flotante.
Efectos de transformación de la defilación: movimiento vertical

Establecer movimiento vertical / escritorio
Comenzando el desplazamiento: 4

GAPACIÓN PROMEDIA: 0 (al 50%)
Grado final: -4
Establecer movimiento vertical / tableta y teléfono
Comenzando el desplazamiento: 4
GABE ADRIO: 0 (al 40% y 60%)
Grado final: -3
El desencadenante del efecto de movimiento: el medio del elemento
Configuración Columna 2 Posición Ahora, pase a la configuración de la segunda columna. Ajuste la configuración de posición en consecuencia.
Posición: pariente
Origen del desplazamiento: superior izquierda
Brecha vertical


Escritorio: 25VW
Los efectos se agregan un movimiento vertical a esta columna.
Efectos de transformación de la defilación: movimiento vertical
Establecer movimiento vertical / escritorio
Compensación de inicio: 2

GAPACIÓN PROMEDIA: 0 (al 50%)
Grado final: -2
Establecer movimiento vertical / tableta y teléfono
Compensación de inicio: 0
GAPACIÓN PROMEDIA: 0 (al 50%)
Grado final: -2
Disparador del efecto de movimiento: la parte superior del artículo
Agregue un módulo de texto en la columna 1 El contenido es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Agregue un contenido H2.
Mostrar texto en la pestaña Diseño y estilizar el texto H2 de la siguiente manera.
Nivel de título: H2
Fuente: palanquín oscuro

Peso de fuente: en negrita

Estilo de fuente: TT
Color: amarillo # ffd868
Talla
Escritorio: 5VW
Tableta: 10 VW
Teléfono: 12VW
Espacio de letras: 4 PX
Agregue el módulo de formulario de contacto al contenido de la columna 1 en el módulo de texto, agregue un formulario de contacto. Estos son los campos que usamos: nombre
Correo electrónico
Tema
Mensaje

Protección de spam antes de nombrar el módulo de formulario de contacto. Habilite la protección de spam y conecte su cuenta Recaptcha.
Use un servicio de protección de spam: sí
Proveedor de servicios: Recaptcha
Selecciona tu cuenta
Los campos van a la pestaña de diseño y estilizan los campos de la siguiente manera.

Color de fondo: azul oscuro # 25274d
Color de texto: gris pálido # d1d1d1
Color de fondo de enfoque: azul oscuro # 25274d
Color de texto de enfoque: gris pálido # d1d1d1

Fuente: palanquín
Estilo: TT
El tamaño del texto
Escritorio: 0.9VW
Tableta: 2VW
Teléfono: 3VW
Espacio de letras: 1 PX
Botón luego estilizar el botón.
Estilos personalizados: sí
Tamaño de texto: 20 PX
Color de texto: azul oscuro # 25274d
Color de fondo: Amarillo # FFD868

Border Ray: 7 PX
Icono de color: azul oscuro # 25274d
Margen superior: 5 PX
Dimensión a continuación Cambiamos la configuración del tamaño.
Ancho: 100%
Ancho máximo: 100%
Agregaremos algunos rellenos superiores.
Revestimiento superior: 4VW


El borde completa la configuración del módulo personalizando la configuración de borde.
Entradas de esquina redondeadas: 6 px las cuatro esquinas
Entradas de los estilos de borde: los cuatro lados

Entradas Ancho de ancho: 2 PX
Entradas en bordes de color: amarillo # ffd868

Agregue el módulo de seguimiento de las redes sociales al contenido de la columna 2, pase a la columna 2 y agregue un módulo social. Use todas las redes sociales que necesita.
Facebook
Gorjeo
LinkedIn
Enlace antes de la estilización, agregue enlaces a las redes apropiadas. El elemento de fondo ahora, abra la primera red social y cambie el color de fondo.

Color: azul oscuro # 25274d
Icono del elemento En la pestaña de diseño del mismo elemento, cambie la configuración del icono de la siguiente manera.
Color: amarillo # ffd868
Icono de tamaño de fuente

Escritorio y tableta: 31 PX

Teléfono: 26 PX
Espacio de artículos Luego, agregue un pequeño margen para separar los iconos entre sí.

Margen derecho: 1 VW
Copie y pegue los estilos de elementos para enfatizar 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 Vaya a la pestaña de diseño principal y asegúrese de que el módulo esté a la izquierda.
Alineación del módulo: izquierda
Dimensión y luego ajuste el tamaño del módulo.

Ancho: 100%
Spacing Eliminar y todo el revestimiento predeterminado.

Alineado hacia arriba, hacia abajo, izquierda y derecha: 0VW


Finalmente, el borde agregue algunas esquinas redondeadas a la configuración del borde. Esto ajustará los bordes para todos los iconos simultáneamente.
Esquinas redondeadas

Arriba a la izquierda y a la derecha: 7 PX
Hacia abajo y hacia la derecha: 0 PX

Agregue un módulo de texto al contenido de la columna 2 en el módulo de redes sociales, agregue otro módulo de texto. Agregue un contenido a su elección. Hemos agregado dos direcciones, un número de teléfono y un correo electrónico. Use caracteres en negrita en el título de cada elemento de todos los mayúsculas.
Sede: 1587 Sukhumvit Soi 21, Bangkok, Tailandia.

Ubicación con Retalia: Emporium Mall, segundo piso
Teléfono: (321) 564 2398
Correo electrónico: [Correo electrónico protegido] Fondo Cambiar el color de fondo del módulo. Caler: azul oscuro # 25274d

Interruptor de texto a la pestaña de diseño y estilice el texto.
Fuente: palanquín
Color: amarillo # ffd868
Tamaño: 18 PX
Sparto agregue algunos valores de espaciado personalizados.

Margen superior
Escritorio: -60px

Tableta y teléfono: -50px
Alineado hacia arriba, hacia abajo, hacia la izquierda y la derecha
Escritorio: 3VW
Tableta: 6VW

Teléfono: 8VW
Borde y complete el módulo agregando esquinas redondeadas a la configuración del borde. ¡Eso es todo!
Esquinas redondeadas: 10 PX hacia arriba, hacia abajo y hacia abajo.
Vista previa Ahora que he terminado la recreación de la sección de contacto flotante, eche un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
¡Terminado para recrear la apariencia de la sección de contacto flotante! El uso de la nueva división de efectos de desfile ayuda a transformar cualquier aspecto estándar en un diseño excelente. Al crear sus propios antecedentes del mapa, tiene más control sobre la apariencia del diseño terminado. Si tiene alguna pregunta o sugerencia, deje un comentario en la sección de comentarios a continuación.