Todo sitio web necesita una sección de contacto, pero eso no significa que tengas que optar por un diseño estándar. Con los efectos de desplazamiento de Divi, puede crear una sección de contacto flotante que se destaque. Mejore su interacción con el 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 este artículo, 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á un archivo descargable gratuito con el diseño JSON para cargarlo en su propia biblioteca Divi. También hemos incluido una plantilla PSD para ayudarlo a recrear el fondo del mapa, así como un pin SVG de mapa para que pueda personalizarlo con sus propios colores.
Crea una estructura de elementos
En este diseño, vamos a utilizar una imagen de fondo que es una representación en Google Map de la ubicación que desea mostrar. Puedes hacer esto con Photoshop o cualquier otro editor de imágenes.
Añadir una nueva sección
¡Ahora es el momento de comenzar a crear 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 creó en Photoshop.
- Imagen de fondo: su mapa modificado
espaciamiento
A continuación, personalice la configuración de espaciado de las secciones en la pestaña de diseño.
- Margen superior e inferior: 50vh
- Relleno inferior: 0vw
visibilidad
Luego configure los desbordamientos en visible.
- Desbordamiento horizontal y vertical: visible
Puesto de trabajo
Finalmente, establezca el índice Z de la sección en 10.
- Índice Z: 10
Añadir una nueva linea
Estructura de la columna
Ahora es el momento de agregar algunas cosas. Primero, agregue una fila con 2 columnas.
apresto
Abra los parámetros de línea y ajuste el tamaño de la siguiente manera.
- Manga
- Oficina: 90%
- Tableta y teléfono: 80%
- Ancho máximo: 90%
visibilidad
Haga clic en la pestaña avanzada y luego ajuste los desbordamientos.
- Desbordamiento horizontal y vertical: visible
Puesto de trabajo
Complete la configuración de la fila modificando la configuración de posición.
- Posición: relativa
- Origen compensado: arriba a la izquierda
- Desplazamiento vertical
- Escritorio: -8vw
Configuración de columna 1
Antecedentes
Antes de agregar módulos, necesitaremos diseñar las columnas individuales. Agregue un color de fondo a la columna 1.
- Color sólido: # 25274d
Distanciamiento
Ajuste la configuración de espacio a continuación.
- 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 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
- Movimiento vertical / juego de escritorio
- Compensación de inicio: 4
- Desfase medio: 0 (al 50%)
- Compensación de finalización: -4
- Movimiento vertical / tableta y teléfono
- Compensación de inicio: 4
- Desfase medio: 0 (a 40% y 60%)
- Desplazamiento final: -3
- Efecto de movimiento de disparo: medio del elemento
Configuración de columna 2
Puesto de trabajo
Pasemos ahora a los parámetros de la segunda columna. Ajuste la configuración de posición en consecuencia.
- Posición: relativa
- Origen del desplazamiento: arriba a la izquierda
- Desplazamiento vertical
- Oficina: 25vw
Efectos de desplazamiento
También agregamos un movimiento vertical a esta columna.
- Efectos de transformación de desplazamiento: movimiento vertical
- Definir movimiento vertical / escritorio
- Inicio de desplazamiento: 2
- Compensación media: 0 (al 50%)
- Desplazamiento final: -2
- Definir movimiento vertical / tableta y teléfono
- Inicio de desplazamiento: 0
- Compensación media: 0 (al 50%)
- Desplazamiento final: -2
- Disparador de efectos de movimiento: Elemento superior
Agregue un 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 cualquier contenido H2 que desee.
Texto del título
Vaya a la pestaña de diseño y aplique el estilo del texto H2 de la siguiente manera.
- Nivel de título: H2
- Fuente: Palanquin Dark
- Peso de fuente: negrita
- Estilo de letra: TT
- Color: amarillo # ffd868
- Tamaño español
- Oficina: 5vw
- Tableta: 10vw
- Teléfono: 12vw
- Espaciado entre letras: 4px
Agregue un 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 utilizamos:
- Nombre
- Correo electrónico
- material
- Mensaje
Protección Anti-Spam
Antes de diseñar el módulo de formulario de contacto. habilite la protección contra spam y conecte su cuenta ReCaptcha.
- Utilice un servicio de protección contra spam: sí
- Proveedor de servicios: ReCaptcha
- Selecciona una cuenta
Campos
Cambie a la pestaña de diseño y aplique estilo a los campos de la siguiente manera.
- Color de fondo: Azul oscuro # 25274d
- Color del texto: gris claro # d1d1d1
- Color de fondo de enfoque: azul oscuro # 25274d
- Color del texto de enfoque: gris claro # d1d1d1
- Fuente: Palanquin
- Estilo: TT
- Tamaño del texto
- Oficina: 0.9vw
- Tableta: 2vw
- Teléfono: 3vw
- Espaciado entre letras: 1px
Bouton
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
apresto
Luego modificamos los parámetros de tamaño.
- Ancho: 100%
- Ancho máximo: 100%
espaciamiento
También agregaremos relleno superior.
- Acolchado superior: 4vw
Frontera
Complete los parámetros del módulo personalizando los parámetros de borde.
- Entradas con esquinas redondeadas: 6px en las cuatro esquinas
- Entradas Estilos de borde: los cuatro lados
- Ancho del borde de entrada: 2px
- Color del borde de 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.
gravamen
Antes de diseñar, agregue enlaces a las redes correspondientes.
Contexto del artículo
Ahora abra la primera red social y cambie 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: 31 px
- Teléfono: 26 px
Espaciado de artículos
Luego agregue un pequeño margen para separar los iconos entre sí.
- Margen derecho: 1vw
Copiar y pegar estilos de elementos
Para diseñar el resto de las redes sociales, 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
Cambie 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.
apresto
Luego ajuste el tamaño del módulo.
- Ancho: 100%
espaciamiento
También borre todo el relleno predeterminado.
- Relleno superior, inferior, izquierdo y derecho: 0vw
Frontera
Finalmente, agregue esquinas redondeadas en la configuración del borde. Esto ajustará los bordes de todos los iconos a la vez.
- esquinas redondeadas
- Arriba a la izquierda y a la derecha: 7 píxeles
- Inferior izquierda y derecha: 0px
Agregue un módulo de texto a la columna 2
Contenido
Debajo del módulo de redes sociales, agregue otro módulo de texto. Agregue el 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 elemento en mayúsculas.
- Cuartel general : 1587 Sukhumvit Soi 21, Bangkok, Tailandia.
- Punto de venta : Emporium Mall, segundo piso
- teléfono: (321) 564 2398
- Correo electrónico: [email protected]
contexto
Cambia el color de fondo del módulo.
- Color: azul oscuro # 25274d
textos
Cambie a la pestaña de diseño y aplique estilo al texto.
- Fuente: Palanquin
- Color: amarillo # ffd868
- Tamaño: 18px
espaciamiento
También agregue valores de espaciado personalizados.
- Margen superior
- Oficina: -60px
- Tableta y teléfono: -50 píxeles
- Acolchado superior, inferior, izquierdo y derecho
- Oficina: 3vw
- Tableta: 6vw
- Teléfono: 8vw
Frontera
Y complete el módulo agregando esquinas redondeadas en la configuración del borde. ¡Eso es!
- Esquinas redondeadas: 10 píxeles en la parte superior derecha, inferior izquierda e inferior derecha.
vista
Ahora que hemos terminado de recrear la sección de contactos flotantes, eche un vistazo final al resultado en diferentes tamaños de pantalla.
Recursos Adicionales
C'est Recursos puede ser complementario a lo que acaba de leer. Pueden ser utilizados además o por aquellos que no tienen la Tema divi.
- Cómo agregar un formulario de contacto emergente en WordPress
- Cómo agregar un formulario desplegable en el encabezado global en Divi
- 5 complementos para crear formularios de contacto
Para finalizar
El uso de los nuevos efectos de desplazamiento de Divi convierte cualquier diseño estándar en un diseño agradable. Al crear su propio fondo, 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.
