Creación de múltiples formularios de contacto dirigidos al pasar el mouse en un diseño con Divi

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de formularios de contacto dirigidos GRATIS

Para poner sus manos en el diseño de formularios de contacto dirigidos gratuitos, 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.

Una vez que haya cargado el diseño en su página, aún tendrá que agregar el código CSS a la página en la que está trabajando. Puede encontrar el código CSS al final de este tutorial.

Suscríbete a nuestro canal de Youtube

¡Empecemos a Recrear!

Añadir Sección #1

Abra una página nueva o existente y agregue una nueva sección regular.

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Agregar módulo de texto

Agregar contenido H2

Agregue un módulo de texto a la columna con algún contenido H2 de su elección.

Configuración de texto H2

Pase a la pestaña de diseño y cambie la configuración de texto H2 en consecuencia:

• Encabezado 2 Peso de fuente: Ultra negrita
• Título 2 Estilo de fuente: Mayúsculas
• Encabezado 2 Alineación de texto: Centro
• Título 2 Color del texto: #000000
• Título 2 Tamaño del texto: 6vw
• Encabezado 2 Espaciado entre letras: -0.4vw
• Encabezado 2 Altura de línea: 0,8 em

Espaciado

Agregue también un margen superior e inferior personalizado.

• Margen superior: 2vw
• Margen inferior: 2vw

Añadir Sección #2

Fondo degradado

Agregue otra sección justo debajo de la anterior y aplique el siguiente fondo degradado (o cualquier fondo degradado de su elección):

• Color 1: #30fff1
• Color 2: #4635ff
• Dirección del gradiente: 110 grados
• Posición final: 85%

Divisor superior

Pase a la pestaña de diseño y agregue un divisor superior.

• Estilo de divisor: Buscar en la lista
• Disposición de los divisores: Debajo del contenido de la sección

Divisor inferior

Agregue un divisor inferior también.

• Estilo de divisor: Buscar en la lista
• Disposición de los divisores: Debajo del contenido de la sección

Dimensionamiento

Cambie la altura en la configuración de tamaño a continuación.

• Altura: 200px

Espaciado

Agregue algunas configuraciones de espaciado personalizadas a continuación.

• Margen inferior: 30vw (escritorio), 45vw (tableta), 200vw (teléfono)
• Acolchado superior: 0vw
• Acolchado inferior: 0vw

Clase CSS

Más adelante en la publicación, agregaremos un código CSS para que el efecto funcione. En preparación para eso, agregaremos una clase CSS a la sección.

• Clase CSS: sección de contacto

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Desbordamiento

Abra la configuración de la fila y oculte los desbordamientos.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Transiciones

Elimina también la duración de la transición.

• Duración de la transición: 0ms

Añadir módulo Blurb

Agregar título al cuadro de contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de Blurb e ingrese un título de su elección que represente uno de sus servicios.

Seleccionar icono

Seleccione un icono a continuación.

Color de fondo predeterminado

Continúe agregando un color de fondo predeterminado.

• Color de fondo: #ffffff

Color de fondo flotante

Cambia el color de fondo al pasar el mouse.

• Color de fondo: #000000

Configuración de iconos predeterminada

Pase a la pestaña de diseño y cambie la configuración del icono en consecuencia:

• Color del icono: #000000
• Usar tamaño de fuente de icono: Sí
• Tamaño de fuente del icono: 2.5vw (escritorio), 5vw (tableta), 7vw (teléfono)

Configuración del icono de desplazamiento

Modifique el color del icono al pasar el mouse.

• Color del icono: #ffffff

Configuración predeterminada del texto del título

Abra la configuración del texto del título a continuación y aplique los siguientes cambios:

• Peso de la fuente del título: ultra negrita
• Estilo de fuente del título: Mayúsculas
• Alineación del texto del título: Centro
• Color del texto del título: #000000
• Tamaño del texto del título: 0.9vw (escritorio), 1.8vw (tableta), 3vw (teléfono)

Configuración del texto del título flotante

Cambie el color del texto del título al pasar el mouse.

• Color del texto del título: #ffffff

Dimensionamiento

Modifique el ancho en diferentes tamaños de pantalla a continuación.

• Ancho: 10vw (escritorio), 17vw (tableta), 30vw (teléfono)
• Alineación del módulo: Centro

Espaciado

Y agregue algunos márgenes personalizados y valores de relleno a la configuración de espaciado.

• Margen superior: 4vw
• Margen inferior: 4vw
• Acolchado superior: 2vw (escritorio), 3vw (tableta), 6vw (teléfono)
• Acolchado inferior: 2vw (escritorio), 3vw (tableta), 6vw (teléfono)

Borde

También estamos convirtiendo el módulo en un círculo agregando ’50vw’ a cada una de las esquinas en la configuración del borde.

Sombra de la caja

Agregue una sombra de cuadro también.

Escala de transformación predeterminada

Pase a la configuración de transformación y asegúrese de que los valores de escala de transformación predeterminados permanezcan en ‘100%’.

Escala de transformación de desplazamiento

Cambie estos valores al pasar el mouse.

• Fondo: 120%
• Derecha: 120%

Añadir formulario de contacto

Hacer campos de nombre y correo electrónico de ancho completo

El segundo módulo que necesitamos en esta fila es un módulo de formulario de contacto. Una vez que haya agregado el formulario de contacto, abra los campos de nombre y correo electrónico y hágalos de ancho completo.

• Hacer ancho completo: Sí

Eliminar campo de mensaje e insertar tres campos de entrada para preguntas específicas del servicio

A continuación, agregue tres preguntas que se apliquen a ese servicio específico.

Deshabilitar Captcha

Deshabilite la opción de captcha también.

• Mostrar Captcha: No

Configuración de campos

Pase a la pestaña de diseño y cambie la configuración de los campos en consecuencia:

• Relleno superior de campos: 0.6vw (escritorio), 0.9vw (tableta), 1.5vw (teléfono)
• Relleno inferior de campos: 0.6vw (escritorio), 0.9vw (tableta), 1.5vw (teléfono)
• Tamaño del texto de los campos: 0.8vw (escritorio), 1.6vw (tableta), 2.3vw (teléfono)

Configuración de botones

Cambia la apariencia del botón siguiente.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color del texto del botón: #ffffff
• Color de fondo del botón: #000000
• Ancho del borde del botón: 0px
• Peso de la fuente del botón: ultra negrita
• Estilo de fuente del botón: Mayúsculas

Espaciado

Agregue algunos valores de relleno también.

• Acolchado superior: 2vw
• Acolchado inferior: 2vw
• Acolchado izquierdo: 2vw
• Acolchado derecho: 2vw

Configuración de borde

Por último, pero no menos importante, vaya a la configuración del borde y agregue ’10px’ a cada una de las esquinas.

Clonar fila tres veces

Una vez que haya completado la primera fila, puede continuar y clonarla tres veces.

Cambiar el contenido y el icono de Blurb para cada fila duplicada

Asegúrese de cambiar el título y el ícono de la propaganda para cada duplicado.

Cambiar preguntas específicas del servicio para cada fila duplicada

Modifique también las preguntas específicas del formulario de contacto.

Configuración de fila adicional

Altura predeterminada

Abra la configuración de la primera fila una vez más, vaya a la configuración de tamaño y cambie la altura en diferentes tamaños de pantalla.

• Altura: 18vw (escritorio), 27vw (tableta), 38vw (teléfono)

Altura de desplazamiento

Devuelve la altura a automático al pasar el mouse.

• Altura: automático

Ampliar la configuración de tamaño de fila a todas las filas de la sección

Una vez que haya modificado la configuración de tamaño de la primera fila, puede extender la configuración a todas las filas de la sección.

Coloque filas una al lado de la otra en el escritorio y la tableta

Configuración de la página abierta

Por último, pero no menos importante, vamos a colocar las cuatro filas una al lado de la otra en la tableta y el escritorio. Para hacer eso, abra la configuración de la página.

Insertar CSS personalizado

Pase al cuadro CSS personalizado y agregue las siguientes líneas de código CSS:

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear múltiples formularios de contacto específicos en un diseño. Esta es una excelente manera de obtener más información sobre sus visitantes y qué servicio en particular les interesa. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.