¿Te gustaría crear un formulario de contacto a tu web gracias al módulo Formulario De Contacto de divi? Aquí hay 3 ideas de personalización...
En las formas Los datos de contacto son una parte esencial de muchos sitios web. Su objetivo principal es ser intuitivo y ayudar a los visitantes a ponerse en contacto fácilmente.
Pero eso no significa que todos formas los contactos deben tener una apariencia precisa y predefinida. Puede combinar fácilmente una experiencia intuitiva con un hermoso diseño. Esto es exactamente lo que vamos a hacer en este tutorial.
Compartiremos 3 diseños únicos del módulo. Formulario De Contacto de Divi que puedes crear usando solo las opciones integradas de Divi.
¡Vamos!
Descripción general de los diseños del módulo Divi Contact Form
Versiones de escritorio
Empecemos echando un vistazo a la versión de escritorio de los diferentes diseños del módulo. Formulario De Contacto que diseñaremos en este tutorial.
Versiones móviles
Y así es como se ven en tamaños de pantalla más pequeños:
Descarga DIVI ahora!!!
Cómo personalizar el módulo Divi Contact Form: 3 ejemplos
Lea también: Divi: Cómo crear una sección de miembros del equipo como un carrusel
Creación del formulario de contacto #1
Añadir una nueva sección
Fondo degradado
¡Comencemos con el primer ejemplo! Agregue una nueva sección, vaya a la configuración de fondo y agregue un fondo degradado.
- Paradas de gradiente
- 34%: #4c00ff
- 34%: #ffd400
- Tipo: Redondo
- Dirección del degradado: abajo a la izquierda
espaciamiento
A continuación, vaya a la opción Espaciado en la pestaña Diseño y cambie la configuración de la siguiente manera.
- Relleno (superior e inferior): 200 px
Añadir una nueva linea
Estructura de la columna
Agregue una nueva fila usando la siguiente estructura de columna:
Columna 1: color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila, luego la configuración de la columna 1 y agregue el color de fondo a continuación
- Fondo: rgba(255,255,255,0.55)
Columna 1: imagen de fondo
También agregue una imagen de fondo a la primera columna.
- Repetición de la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: pantalla
Columna 2: imagen de fondo
Y un color de fondo blanco a la segunda columna.
- Fondo: #ffffff
apresto
Luego modifique los parámetros de tamaño.
- Igualar alturas de columna: SÍ
espaciamiento
También elimine todos los rellenos personalizados predeterminados.
- Relleno (superior e inferior): 0 px
Radio del borde de la columna
Agregue un radio de borde a ambas columnas en la pestaña avanzada.
border-radius: 10px;
Agregue un módulo de texto a la columna 1
Agregar contenido
¡Es hora de comenzar a agregar los diferentes módulos! Agregue un módulo de texto a la primera columna con el contenido de su elección.
Configuraciones de texto
A continuación, vaya a la pestaña Diseño del módulo Texto y realice algunos cambios.
- Texto:
- Fuente: satisfacer
- Color del texto: #333333
- Tamaño: 100px
- Altura de la línea: 1 cm
- Alineación: Centro
espaciamiento
También agregue valores de relleno personalizados.
- Relleno (superior): 600 px
- Relleno (inferior): 100px
Caja de sombra
Para agregar profundidad al diseño, use una sombra de cuadro sutil.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -16px
- Color de sombra: rgba (0,0,0,0.3)
Agregue un módulo de imagen a la columna 2
Sube una imagen
Continúe agregando un módulo Imagen a la segunda columna. Sube una imagen de tu elección.
apresto
Cambie la configuración de tamaño para este módulo.
- Ancho: 25 % (escritorio), 50 % (tableta), 60 % (teléfono)
- Alineación del módulo: Centro
espaciamiento
Cree una superposición utilizando un margen superior negativo.
- Margen (Superior): -60%
frontera
Modifique los bordes de la imagen de la siguiente manera:
- Esquinas redondeadas: 100px (Todas las esquinas)
Agregue el módulo Text #1 a la columna 2
Agregar contenido
Justo debajo del módulo Imagen, agregue un módulo Texto con contenido.
Configuraciones de texto
Edite la configuración de texto para este módulo.
- Texto:
- Fuente: satisfacer
- Color del texto: #333333
- Tamaño del texto: 44px
- Orientación: Centro
Agregue el módulo Text #2 a la columna 2
Agregar contenido
Luego agregue otro módulo de texto.
Configuraciones de texto
También cambie la configuración de texto para este módulo.
- Texto:
- Fuente: Arial
- Color del texto: #ffd400
- Color del texto: 18px
- Espaciado entre letras: 2px
- Orientación: Centro
espaciamiento
Luego agregue un margen inferior.
- Margen (inferior): 100 px
Agregue el módulo Formulario de contacto a la columna 2
Active la opción "Hacer ancho completo" en el campo Nombre y correo electrónico
El último módulo necesario es el módulo Formulario de contacto. Antes de hacer cualquier otra cosa, abra los campos de nombre y correo electrónico y cambie el diseño.
- Hacer ancho completo: sí
Añadir un campo de asunto
Para crear este diseño, agregamos otro campo para el tema.
Protección Anti-Spam
Luego deshabilite la opción captcha.
- Usar Captcha Básico: NO
Configuración de texto de campo de formulario
Realice algunos cambios en la configuración de texto del campo de formulario de este módulo de formulario de contacto
- Los campos :
- Color de fondo: rgba(255,255,255,0)
- Fuente: Arial
- Peso de fuente: ligero
- Tamaño del texto: 16px
- Espaciado entre letras: 2px
Configuraciones de botones
También estamos cambiando la apariencia de los botones.
- Usar tamaño personalizado para el botón: SÍ
- Botón:
- Color del texto: #ffd400
- Ancho del borde: 0 píxeles
- Espaciado entre letras: 2px
- Fuente: Arial
- Estilo de fuente: U
- color de subrayado: #4c00ff
espaciamiento
Luego agregue algunos valores de relleno personalizados.
- Relleno (inferior): 100 px
- Relleno (izquierdo y derecho): 50px
Frontera
Y agregue un borde inferior sutil a cada uno de los campos.
- Ingresa el ancho del borde inferior: 2px
- Ingresa el color del borde inferior: #efefef
Espaciado de campos individuales
Finalmente, agregue un margen inferior a cada uno de los campos individuales excepto el campo de mensaje.
- Margen (inferior): 20 px
Creación del formulario de contacto #2
Añadir una nueva sección
Fondo degradado
¡Pasemos al siguiente ejemplo! Agregue una nueva sección con un fondo degradado.
- Paradas de gradiente:
- 50%: #562fef
- 50%: #ffffff
- Tipo de gradiente: lineal
espaciamiento
Agregue valores de relleno personalizados a la configuración de espaciado en esta sección.
- Relleno (superior e inferior): 200 px
Añadir una nueva linea
Estructura de la columna
Agregue una nueva fila usando la siguiente estructura de columna:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo a la fila.
- Color de fondo: #ffffff
fondo degradado de 2 columnas
Agregue un fondo degradado a la segunda columna de la fila.
- Paradas de gradiente:
- 0%: #9932ff
- 100%: #562fef
- Tipo: Lineal
- Dirección: 160 grados
apresto
Modifique también los parámetros de tamaño de línea.
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Igualar alturas de columna: SÍ
espaciamiento
A continuación, agregue valores de espaciado personalizados.
- Línea :
- Relleno (superior e inferior): 0 px
- Columna 1:
- Relleno: 100 px (superior), 50 px (inferior)
- Relleno (izquierdo y derecho): 50px
- Columna 2:
- Relleno (superior e inferior): 100 px
- Relleno (izquierdo y derecho): 50px
Frontera
Agregue '20px' a cada uno de los bordes de línea.
Caja de sombra
Finalmente, agregue una sombra de cuadro sutil a la línea.
- Fuerza de desenfoque de sombra de cuadro: 45px
- Fuerza de propagación de la sombra del cuadro: -11px
- Color de la ventana: rgba (0,0,0,0.3)
Agregue un módulo de texto a la columna 1
Agregar contenido
¡Es hora de comenzar a agregar los módulos! Comience con un módulo de texto en la primera columna.
Configuraciones de texto
Edite la configuración de texto para este módulo.
- Texto:
- Peso de fuente: ultra negrita
- Estilo de fuente: TT
- Color: #562fef
- Tamaño: 100 px (escritorio), 80 px (tableta), 60 px (teléfono)
- Espaciado entre letras: -10px
- Altura de la línea: 1 cm
espaciamiento
También agregue un margen inferior.
- Margen (inferior): 50px
Agregue el módulo Formulario de contacto a la columna 1
Elementos
El segundo módulo que necesitaremos en la primera columna es un módulo de formulario de contacto. Una vez que haya agregado el módulo, desactive la opción 'Usar captcha básico'.
- Usar Captcha Básico: NO
Configuración de texto de campo de formulario
Luego cambie el color de fondo de los campos del formulario.
- Color de fondo de los campos: #ffffff
Configuraciones de botones
También juegue con la configuración de los botones para crear un botón de icono en lugar de un botón de texto.
- Usar estilos personalizados para el botón: SÍ
- Botón:
- Tamaño del texto: 73px
- Color del texto: rgba(0,0,0,0) (predeterminado),
- Color de fondo: rgba(255,255,255,0) (Pasar el cursor)
- Ancho del borde: 0px
- Color del icono: #9932ff
- Mostrar solo el icono al pasar el mouse sobre el botón: NO
Caja de sombra
Finalmente, agregue una sombra de cuadro sutil a cada uno de los campos.
- Fuerza de desenfoque de sombra de cuadro: 36px
- Fuerza de propagación de la sombra del cuadro: -14px
- Color de sombra: rgba (0,0,0,0.3)
Agregue un módulo de texto a la columna 2
Agregar contenido
El primer módulo que necesitaremos en la segunda columna es otro módulo de texto.
Configuraciones de texto
Una vez que haya agregado el contenido, edite la configuración de texto para este módulo.
- Texto:
- Peso de fuente: ultra negrita
- Estilo de fuente: TT
- Color: #ffffff
- Tamaño: 23px
- Espaciado entre letras: -1px
Agregue el Módulo de Blurb #1 a la Columna 2
Agregar contenido
El segundo módulo que necesitaremos es un módulo de Blurb. Continúe e ingrese alguna información de contacto.
Seleccione el icono
Luego elija un icono correspondiente.
Configuración de iconos
Cambie la configuración de este icono.
- Color del icono: #ffffff
- Colocación de imagen/icono: Derecha
Configuración del texto del título
Continúe haciendo algunos cambios en la configuración del texto del título a continuación.
- Tamaño del texto del título: 15px
- Espaciado entre letras del título: -0,5 píxeles
espaciamiento
Y agregue un margen superior.
- Margen (Superior): 120px
Clonar módulo Blurb dos veces
Una vez que haya terminado de editar el primer módulo de Blurb, puede continuar y clonar el módulo dos veces.
Modificar el contenido y el icono de los dos duplicados
Edite el contenido y los íconos de los dos duplicados para compartir diferentes tipos de información de contacto con los visitantes.
Cambiar el espaciado de los dos duplicados
También se debe cambiar el margen superior de los dos duplicados.
- Margen (Superior): 30px
Creación del formulario de contacto #3
Añadir una nueva sección
Color de fondo
¡Pasemos al tercer ejemplo! Agregue una nueva sección con el siguiente color de fondo:
- Color de fondo: #3491CE
espaciamiento
Continúe agregando valores de relleno personalizados en la configuración de espaciado.
- Relleno (superior e inferior): 200px
Agregar línea #1
Estructura de la columna
A continuación, agregue una nueva fila utilizando la siguiente estructura de columnas:
Agregar un módulo de texto
Agregar contenido
¡Es hora de comenzar a agregar módulos! El primer módulo que necesitaremos agregar a la primera columna es un módulo de texto. Introduzca un contenido de su elección.
Configuraciones de texto
A continuación, cambie la configuración de texto.
- Texto:
- Peso de fuente: ultra negrita
- Color del texto: rgba(255,255,255,0.24)
- Tamaño del texto: 100 px (escritorio), 70 px (tableta), 36 px (teléfono)
- Altura de la línea: 1 cm
- Orientación: Centro
espaciamiento
También agregue un margen inferior negativo.
- Margen (Inferior): -100px
Añadir línea 2
Estructura de la columna
La segunda fila que necesitamos para completar este ejemplo contiene la siguiente estructura de columnas:
Fondo degradado
Sin agregar ningún módulo todavía, abra la configuración de línea y agregue un fondo degradado.
- Paradas de gradiente:
- 50%: #11CE84
- 50%: #10C77F
- Tipo de gradiente: lineal
- Dirección: 160 grados
apresto
También cambie los parámetros de tamaño.
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Igualar alturas de columna: SÍ
espaciamiento
Luego agregue algunos valores de relleno.
- Relleno: 150 px (superior), 100 px (inferior)
- Relleno: 50px (izquierda y derecha)
Frontera
Luego vaya a la configuración de borde y agregue '20px' a cada una de las esquinas. También use un borde inferior.
- Esquinas redondeadas: 20px
- Ancho del borde inferior: 10px
- Color del borde inferior: #1ba35a
Caja de sombra
Complete la configuración de la línea agregando una sutil sombra de cuadro.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -24px
- Color de sombra: rgba (0,0,0,0.3)
Agregue el módulo Formulario de contacto a la columna 1
Active la opción "Hacer ancho completo" en el campo Nombre y correo electrónico
El primer módulo que necesitamos en la primera columna de la fila es un módulo de formulario de contacto. Abra el campo de nombre y correo electrónico y cambie la configuración de diseño.
- Hacer ancho completo: SÍ
Elementos
Luego deshabilite el captcha.
- Usar Captcha Básico: NO
Configuraciones de botones
Y cambia la configuración de los botones.
- Usar estilos personalizados para el botón: SÍ
- Color del texto del botón: #ffffff
- Paradas de gradiente:
- 50%: #3AA0E3
- 50%: #3491CE
- Tipo de gradiente: lineal
- Dirección del gradiente: 155 grados -
- Ancho del borde del botón: 0 píxeles
- Radio del borde del botón: 10px
- Fuerza de propagación de la sombra del cuadro: -2px
- Color de sombra: #0a60af
Ver también: Divi: Cómo personalizar la cesta y los iconos de búsqueda del módulo "Menú de ancho completo"
Frontera
También agregamos '5px' de esquinas redondeadas a cada uno de los campos.
Agregue un módulo de texto a la columna 2
Agregar contenido
En la segunda columna, el primer módulo que necesitaremos es un módulo de texto. Continúe e ingrese algo de contenido.
Color de fondo
Luego cambia el color de fondo.
- Fondo: rgba(255,255,255,0.13)
Configuraciones de texto
También edite con la configuración de texto.
- Texto:
- Peso de fuente: ligero
- Color del texto: #ffffff
- Tamaño del texto: 15px
- Espaciado entre letras: -0,5px
espaciamiento
Y agregue relleno personalizado para darle al módulo espacio para respirar.
- Relleno (superior e inferior): 12px
- Relleno (izquierdo y derecho): 10px
Frontera
También agregamos '20px' en las esquinas superior izquierda e inferior izquierda. Además de eso, agregaremos un borde izquierdo.
- Esquinas redondeadas: 20px (superior izquierda e inferior izquierda)
- Ancho del borde izquierdo: 34px
- Color del borde izquierdo: #edf000
visibilidad
Para que este diseño coincida con diferentes tamaños de pantalla, deshabilitaremos el módulo Texto en el teléfono y la tableta.
Clonar módulo de texto dos veces
Una vez que haya terminado de editar el primer módulo de texto, continúe y clone el módulo dos veces.
Modificar el contenido de los dos duplicados.
Cambie el contenido de los dos duplicados a otra cosa.
Cambiar el espaciado de los dos duplicados
Y agregue un margen superior para crear espacio entre cada uno de los módulos.
- Margen (Superior): 20px
Modificar el borde de los dos duplicados.
Finalmente, cambie el color del borde izquierdo de cada uno de los duplicados individualmente.
- Color 1: #00ff
- Color 2: #00f76f
Vea también nuestro artículo sobre Cómo crear un control deslizante de acordeón receptivo
vista
Version de escritorio
Ahora que hemos seguido todos los pasos, echemos un vistazo final a los diseños del módulo Divi Contact Form en el escritorio.
Móvil
Y esto es lo que puede esperar de los diseños del módulo Formulario de contacto de Divi en pantallas de menor tamaño:
Descarga DIVI ahora!!!
Conclusión
En esta publicación, compartimos 3 increíbles diseños de módulos de formulario de contacto Divi que puede usar y modificar fácilmente para cualquier sitio web que cree.
En las formas Los contactos son una parte esencial de muchos sitios web, por lo que es importante asegurarse de que su diseño convenza a sus visitantes de ponerse en contacto.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
