Necesita combinar campos en línea y módulos de campos de ancho completo Formulario De Contacto de Divi ?
Le formulario de contacto es un elemento importante para incluir en su sitio web si desea capturar correos electrónicos y convertir a sus visitantes en clientes.
El modulo Formulario De Contacto de Divi se puede personalizar fácilmente para crear formas Tarjetas de contacto atractivas y cautivadoras para todo tipo de sitios web. Este módulo viene con dos opciones de visualización que se pueden aplicar a cada campo de formulario: en linea. ou anchura completa.
En este tutorial, presentaremos cuatro posibilidades de diseño únicas para su formulario de contacto Divi usando campos en línea y de ancho completo.
Vamos a empezar!
vista
Aquí hay una vista previa de lo que estaremos diseñando.
primer diseño
Segundo diseño
tercer diseño
Cuarto diseño
Lo que necesitas para empezar
Antes de comenzar, instalar y activar el tema Divi y asegúrate de tener la última versión de Divi en tu sitio web.
¡Ahora estás listo para comenzar!
4 diseños de muestra para el módulo Formulario de contacto de Divi usando campos en línea y de ancho completo
Seleccione el diseño predefinido
Cada una de las 4 plantillas se modifica del diseño de la página de contacto de reparación de calzado de Paquete de diseño de reparación de calzado, que puedes encontrar en la Biblioteca Divi.
Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción Utilice Divi Builder.
Usaremos un diseño prefabricado de la Biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.
Busque y seleccione el diseño de la página de contacto de reparación de calzado.
seleccionar Usar este diseño para agregar el diseño a su página.
Ahora estamos listos para diseñar nuestros ejemplos.
primer diseño
Primero, mueva la línea que contiene el módulo. Formulario De Contacto a la sección anterior, justo debajo de la línea con módulos de Blurb. Luego puede eliminar la sección vacía restante.
Abra la configuración de línea y agregue relleno izquierdo y derecho,
- Relleno (izquierdo y derecho): 15%
Seleccione opciones receptivas y configure el relleno para dispositivos móviles.
- Relleno (izquierdo y derecho): 5%
Se modificó el diseño del formulario de contacto con campos en línea y de ancho completo
Para este diseño, crearemos dos campos separados para nombre y apellido.
Abra la configuración del módulo Formulario de contacto y cambie el campo ID y Título del campo Apellido a Nombre.
Agregue un nuevo campo debajo del campo Nombre. Establezca el campo ID y Título en Nombre.
En la configuración del campo de nombre, abra la configuración de diseño y configure Hacer ancho completo en No.
- Hacer ancho completo: NO
Luego, bajo la configuración del formulario de contacto, cambie el orden del asunto y del teléfono para que el teléfono aparezca antes del asunto.
Abra la configuración de diseño del campo Asunto y configure el campo en ancho completo.
- Hacer ancho completo: SÍ
Personalización del diseño del formulario de contacto
Ahora cambiemos algunas configuraciones para completar el diseño. Vaya a la pestaña Diseño de la configuración del módulo Formulario de contacto.
Primero, cambie el color de fondo del botón.
- Fondo del botón: #DBC2B3
Agregue un margen superior al botón.
- Margen del botón (superior): 10 px
Finalmente, vaya a la configuración de bordes y agregue esquinas redondeadas a los campos.
- Entradas Esquinas redondeadas: 30px
Ver también: Divi: cómo agregar un logotipo receptivo al módulo "Menú de ancho completo"
Resultado final del ejemplo 1
Aquí está el resultado final en escritorio y móvil.
Segundo ejemplo
Para nuestro segundo ejemplo, moveremos los módulos de Blurb al lado izquierdo de la página y colocaremos el formulario de contacto en el lado derecho de la página. Mueva los módulos de Blurb a una columna.
Cambiar el diseño de la fila.
Abra la configuración de diseño de línea y apague Usar ancho de canalón personalizado.
- Usar ancho de canalón personalizado: NO
Agregue código al CSS personalizado del elemento principal para alinear verticalmente los módulos Blurb y Formulario de contacto.
align-items:center;
Ahora necesitamos eliminar el borde delgado entre las columnas. Abra la configuración de fila, luego abra la configuración de columna 1. En la pestaña Diseño, vaya a la configuración de borde y elimine el borde.
- Ancho del borde derecho: 0px
A continuación, abra la configuración de la columna 2 y repita los pasos para eliminar el borde.
- Ancho del borde derecho: 0px
Configure el texto "Contáctenos" para que esté centrado.
Mueve el formulario de contacto a la columna de la derecha. Elimine la sección vacía restante.
Se modificó el diseño del formulario de contacto con campos en línea y de ancho completo
Este diseño también tendrá dos campos separados para nombre y apellido. Abra la configuración del módulo Formulario de contacto y cambie el campo ID y Título del campo Apellido a Nombre.
Agregue un nuevo campo debajo del campo Nombre. Establezca el campo ID y Título en Nombre.
En la configuración del campo de nombre, abra la configuración de diseño y configure Hacer ancho completo en No.
- Hacer ancho completo: NO
Cambie el orden de los campos de teléfono y asunto para que el teléfono vaya antes del asunto.
Abra la configuración de campo para Correo electrónico, Teléfono y Asunto, y establezca el diseño en ancho completo.
- Hacer ancho completo: SÍ
Personalización del diseño del formulario de contacto
Abra la configuración de fila, luego abra la configuración de columna 2. Establezca el color de fondo.
- Antecedentes: #DBC2B3
En la configuración de la columna 2, vaya a la pestaña Diseño y agregue relleno.
- Relleno (Superior, Inferior, Izquierda y Derecha: 50px
Seleccione el icono del móvil para cambiar la configuración receptiva. Establecer relleno para móvil.
- Relleno (Superior, Inferior, Izquierda y Derecha): 30px
Luego agregue una sombra de cuadro a la columna.
Finalmente, abra la configuración del módulo Formulario de contacto y cambie el color del texto del campo.
- Color del texto de los campos: #000000
Resultado final del ejemplo 2
Aquí está el resultado final del segundo diseño.
Tercer ejemplo
Para el tercer diseño, tendremos el formulario de contacto a la izquierda y los módulos de Blurb a la derecha. Comencemos por cambiar la estructura de columnas de la fila que contiene los módulos de Blurb.
Mueva el módulo de direcciones a la columna de la derecha.
A continuación, mueva el módulo de texto "Contáctenos" a la columna izquierda, luego elimine la línea vacía restante.
Mueva el módulo de formulario de contacto a la columna de la izquierda, debajo del módulo de texto "Contáctenos". Elimine la sección en blanco restante.
Abra la configuración de línea, en la pestaña Diseño y apague Usar ancho de canalón personalizado
- Usar ancho de canalón personalizado: NO
Agregue código al CSS personalizado del elemento principal para alinear verticalmente los módulos Blurb y Formulario de contacto.
align-items:center;
Abra la configuración de fila, luego abra la configuración de columna 1. En la pestaña Diseño, vaya a la configuración de borde y elimine el borde. Repita los pasos para eliminar el borde de la columna 2.
- Ancho del borde derecho: 0px
Cambiar el diseño del formulario de contacto
Dejaremos los anchos de campo como están para el tercer diseño, sin embargo, abra la configuración del formulario de contacto y cambie el orden del número de teléfono y el campo de asunto para que el teléfono aparezca primero.
Resultado final del ejemplo 3
Aquí está el resultado final del tercer diseño.
Lea también: Divi: cómo mostrar el módulo de encabezado de ancho completo en pantalla completa
Cuarto ejemplo
Para el cuarto y último diseño, el módulo Formulario de contacto estará a la izquierda y los módulos de Blurb a la derecha. Nuevamente, comenzaremos cambiando la estructura de columnas de la fila que contiene los módulos de Blurb.
Mueva el módulo de direcciones a la columna de la derecha.
A continuación, mueva el módulo Formulario de contacto a la columna de la izquierda. Elimine la sección en blanco restante.
Abra la configuración de línea, en la pestaña Diseño y desactive Usar ancho de canalón personalizado.
- Usar ancho de canalón personalizado: NO
Agregue código al CSS personalizado del elemento principal para alinear verticalmente los módulos Blurb y Formulario de contacto.
align-items:center;
Abra la configuración de fila, luego abra la configuración de columna 1. En la pestaña Diseño, vaya a la configuración de borde y elimine el borde.
- Ancho del borde derecho: 0px
A continuación, abra la configuración de la columna 2 y repita los pasos para eliminar el borde.
- Ancho del borde derecho: 0px
Abra la configuración del módulo de texto para el texto "Contáctenos" y centre el texto.
- Alineación de texto: centrado
Se modificó el diseño del formulario de contacto con campos en línea y de ancho completo
Para este diseño, todos nuestros campos serán de ancho completo. Abra la configuración del módulo Formulario de contacto, luego abra la configuración para cada campo. En la pestaña Diseño, seleccione Disposición y definir Hacer ancho completo en Si.
Una vez que haya creado cada campo de ancho completo, el formulario debería tener este aspecto.
Ahora cambie el campo ID y Título para el campo Apellido a Nombre.
Agregue un nuevo campo debajo del campo Nombre. Establezca el campo ID y Título en Nombre.
Cambie el orden de los campos de teléfono y asunto para que el teléfono vaya antes del asunto.
Personalización del diseño del módulo Formulario de contacto
En la configuración del módulo, en la pestaña Diseño, establezca el color del texto del campo en negro.
- Color del texto de los campos: #000000
Abra la configuración de la sección y agregue un color de fondo.
- Antecedentes: #DBC2B3
Finalmente, agregue una máscara de fondo.
- Máscara de fondo: Arco
- Transformación de máscara: horizontal
Para que la máscara de fondo funcione mejor en dispositivos móviles, usemos la configuración receptiva.
- Transformación de máscara (teléfono): horizontal y rotación
Resultado final
Aquí está el resultado final del cuarto diseño.
Resultados finales
Echemos un vistazo a todos nuestros ejemplos una vez más.
primer ejemplo
Segundo ejemplo
Tercer ejemplo
Cuarto ejemplo
Descarga DIVI ahora!!!
Conclusión
Tener un formulario de contacto atractivo puede aumentar tus conversiones y permitir que tus visitantes se conecten directamente contigo.
Como hemos demostrado en este artículo, puede usar las opciones de campo en línea y de ancho completo para crear diferentes apariencias y diseños para su formulario, y las opciones de diseño integradas de Divi le permiten crear diseños únicos y atractivos para ayudar a que el formulario se destaque.
Con suerte, esta técnica agregará otra habilidad de diseño útil para proyectos futuros.
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.
...
