Lo más destacado del complemento Divi: módulo Gravity Divi

Gravity Forms es uno de los complementos de formularios más populares para WordPress. Es compatible con Divi usando códigos cortos, pero esto no aprovecha al máximo lo que es posible con los módulos Divi . Afortunadamente, hay un complemento de terceros disponible, llamado Gravity Divi Module, que agrega Gravity Forms a Divi Builder .

Gravity Divi Module es un complemento de terceros de CodeCraters que integra completamente Gravity Forms en sus diseños Divi y Extra. Le permite diseñar sus formularios utilizando las personalizaciones del módulo Divi. En este complemento destacado, veremos lo que puede hacer el módulo. Para las muestras estoy usando plantillas proporcionadas por Gravity Forms e imágenes de Unsplash.com.

Para obtener más información sobre Gravity Forms, consulte los artículos de Elegant Themes:

  • Gravity Forms: una mirada detallada a la edición personal
  • Cómo diseñar formas de gravedad para que se vean como Divi (+ ¡Apariencia adicional!)
Instalación y configuración del módulo Gravity Divi

Primero, Gravity Forms debe estar instalado para usar este complemento. Una vez que haya instalado Gravity Forms, cargue y active el complemento Gravity Divi Module. Una vez que se active el complemento, agregará un nuevo módulo a Divi Builder llamado Gravity Divi. No se requiere configuración.

La configuración de Contenido le permite elegir su formulario, mostrar el título del formulario, mostrar la descripción, habilitar AJAX, elegir el color del texto y ajustar el fondo.

La configuración de diseño incluye ajustes de texto para el título del formulario, la descripción, los elementos y el texto mismo. También se incluye el espacio para los márgenes y el relleno, y el estilo de los botones. Esta configuración le brinda más control que usar un código abreviado de Gravity Forms en un módulo de texto. La configuración avanzada incluye un índice de pestañas donde puede especificar la pestaña de inicio para los campos del formulario.

Seleccione sus formularios en el cuadro desplegable. Si aún no ha creado su formulario cuando crea su página Divi, puede crear uno haciendo clic en el enlace en la configuración de contenido en Elegir formulario de gravedad. Una vez que haya creado el formulario, aparecerá en este cuadro desplegable.

Hacer ajustes

Este es el formulario de contacto avanzado con el estilo predeterminado. Combina con el estilo Divi. Hacer ajustes es fácil.

He aquí un vistazo a algunas personalizaciones básicas. Aumenté el tamaño de la fuente del texto del encabezado, cambié los colores de todas las fuentes, agregué una imagen de fondo con una superposición oscura y agregué relleno.

En este ejemplo, he deshabilitado el título del formulario.

En este, seleccioné un nuevo formulario del cuadro desplegable. Mantiene la configuración de fuentes y fondo porque esos ajustes se realizaron en el módulo. Esta es una muestra rápida con una breve descripción. Tengo el título del formulario deshabilitado y la descripción habilitada.

Módulo Gravity Divi en ejemplos de diseños Divi

La mayor ventaja de Gravity Module es Divi Builder con su configuración de módulo, lo que significa que la configuración de módulo a la que está acostumbrado está disponible para Gravity Forms. Aquí hay un vistazo a algunos ejemplos dentro de los diseños de Divi.

Formulario de contacto avanzado en diseño de módulo de persona

Este es el formulario de contacto avanzado integrado en un diseño simple con una imagen de fondo. Para ayudar a que el formulario se combine con el diseño de la página, cambié el texto a claro, aumenté el tamaño de fuente del título a 40 y cambié el texto de los elementos del formulario a rojo.

Coloqué la fila del módulo dentro de la misma sección que los módulos de persona para que la imagen de fondo se extienda al módulo de gravedad. El formulario se ajusta al diseño de la página en lugar de parecer que acabo de adjuntar un formulario al final de la página.

Diseño de registro

Este ejemplo utiliza algunos de los elementos de diseño del diseño de página de inicio gratuito para universidades y colegios .

El módulo Gravity se coloca dentro de un diseño de 2/3, 1/3 con un módulo de texto.

He habilitado el título del formulario y AJAX para que el formulario de varias páginas no vuelva a cargar la página cuando el usuario haga clic en Siguiente. La fuente del título del formulario se establece en 30%. Se adapta bien al estilo del diseño. No se necesitaron otros cambios.

Confirmación de asistencia para bodas

Este usa colores suaves y fuentes elegantes que combinan con la foto (pueden ser difíciles de ver en esta imagen. Normalmente usaría un contraste más alto, pero se prefiere un contraste más suave para un sitio web de bodas). Los colores se toman de la propia foto y luego se oscurecen para ayudar a mejorar la legibilidad.

Este diseño es un solo módulo con un fondo en la sección. Cambié todas las fuentes a Tangerine, aumenté el tamaño de fuente y las puse en negrita, y ajusté los colores a un bronceado o rojo según los colores dentro de la imagen.

Formulario de pedido de pizza

Este ejemplo usa la plantilla de formulario Build a Pizza de Gravity Forms.

Este diseño utiliza un diseño de 1/3, 2/3 con un módulo de gravedad y varios módulos de imagen. Agregué un fondo en la sección y una superposición en la fila con relleno para que todo encaje dentro del espacio diseñado.

Configuré el texto en Light, cambié las fuentes a Arimo y ajusté el tamaño de fuente para cada uno de los elementos del formulario por separado.

Configuré el texto y el borde del botón en blanco y ajusté el radio del borde del botón a 30.

Tema adicional con formulario de contacto avanzado en el diseño del módulo de persona

Gravity Module también es compatible con Extra . He aquí un vistazo al primer ejemplo (Formulario de contacto avanzado en diseño de módulo de persona) con Extra. Para la página en Extra estoy usando una plantilla de página de ancho completo. Se ve igual que la página Divi.

El único cambio que he hecho es el estilo de los botones. El botón azul no se mezcló tan bien y el texto blanco se ve muy bien contra el fondo azul.

Licencia y Soporte

El complemento viene con una licencia ilimitada, por lo que puede instalarlo en tantos sitios web como desee, tanto para usted como para sus clientes. También incluye actualizaciones de por vida y 6 meses de soporte.

El módulo Gravity Divi se puede comprar en la tienda del desarrollador .

Pensamientos finales

El módulo Gravity Divi proporciona una excelente manera de integrar sus Gravity Forms dentro de sus diseños Divi. Agrega más características que simplemente usar los códigos cortos de Gravity Forms. Todas las ventajas de Gravity Forms se mejoran con Divi Builder y la configuración del módulo, que incluye configuraciones de fondo como imagen, superposiciones y degradados, configuración de fuente y botones, relleno, etc.

Si está interesado en usar Gravity Forms con Divi Builder, Gravity Divi Module podría ser la solución que necesita.

Ahora es tu turno. ¿Ha utilizado el módulo Gravity Divi? Háganos saber lo que piensa en los comentarios a continuación.

Imagen destacada a través de Bloomicon / shutterstock.com