Destaque do plug-in Divi - Módulo Gravity Divi

Gravity Forms é um dos plug-ins de formulários mais populares para WordPress. É compatível com Divi usando códigos de acesso, mas isso não tira o máximo proveito do que é possível com os módulos Divi. Felizmente, há um plugin de terceiros disponível, chamado Gravity Divi Module, que adiciona Gravity Forms ao Divi Builder.

Gravity Divi Module é um plugin de terceiros da CodeCraters que integra totalmente Gravity Forms, você é seu Divi e layouts extras. Ele permite que você estilize seus formulários usando as personalizações do módulo Divi. Neste destaque do plugin, daremos uma olhada no que o módulo pode fazer. Para as amostras, estou usando modelos fornecidos por Gravity Forms e imagens de Unsplash.com.

Para obter mais informações sobre Gravity Forms, consulte os artigos Elegant Themes:

• Gravity Forms - Uma visão detalhada da edição pessoal
• Como estilizar formas de gravidade para se parecerem com Divi (+ Bonus Looks!)

Instalação e configurações do módulo Gravity Divi

Primeiro, o Gravity Forms deve ser instalado para usar este plugin. Depois de instalar o Gravity Forms, carregue e ative o plugin Gravity Divi Module. Assim que o plugin for ativado, ele adicionará um novo módulo ao Divi Builder chamado Gravity Divi. Não há configuração necessária.

A configuração Conteúdo permite que você escolha seu formulário, mostre o título do formulário, mostre a descrição, habilite AJAX, escolha a cor do texto e ajuste o fundo.

As configurações de design incluem ajustes de texto para o título do formulário, descrição, elementos e o próprio texto. Também está incluído o espaçamento para margens e preenchimento e estilo de botão. Essas configurações fornecem mais controle do que usar um código de acesso do Gravity Forms em um módulo de texto. As configurações avançadas incluem um índice de guias onde você pode especificar a guia inicial para os campos do formulário.

Selecione seus formulários na caixa suspensa. Se você ainda não criou seu formulário ao criar sua página Divi, você pode criar um clicando no link nas configurações de conteúdo em Choose Gravity Form. Depois de criar o formulário, ele aparecerá nesta caixa suspensa.

Fazendo ajustes

Este é o Formulário de contato avançado usando o estilo padrão. Combina com o estilo Divi. Fazer ajustes é fácil.

Aqui está uma olhada em algumas personalizações básicas. Aumentei o tamanho da fonte do texto do cabeçalho, alterei as cores de todas as fontes, adicionei uma imagem de plano de fundo com sobreposição escura e adicionei preenchimento.

Neste exemplo, desativei o título do formulário.

Neste, selecionei um novo formulário na caixa suspensa. Ele mantém as configurações de fontes e fundo porque esses ajustes foram feitos no módulo. Este é um exemplo rápido com uma breve descrição. Eu tenho o título do formulário desabilitado e a descrição habilitada.

Módulo Gravity Divi em exemplos de layouts Divi

A maior vantagem do Gravity Module é o Divi Builder com suas configurações de módulo, o que significa que as configurações de módulo que você está acostumado estão disponíveis para Gravity Forms. Aqui está uma olhada em alguns exemplos de layouts Divi.

Formulário de contato avançado no layout do módulo pessoal

Este é o Formulário de Contato Avançado integrado em um layout simples com uma imagem de fundo. Para ajudar a mistura do formulário com o design da página, alterei o texto para claro, aumentei o tamanho da fonte do título para 40 e alterei o texto dos elementos do formulário para vermelho.

Coloquei a linha do módulo dentro da mesma seção que os módulos Person para que a imagem de fundo se estenda ao módulo Gravity. O formulário se ajusta ao design da página, em vez de parecer que acabei de anexar um formulário na parte inferior da página.

Layout de inscrição

Este exemplo usa alguns dos elementos de layout do layout gratuito da página inicial para universidades e faculdades.

O módulo Gravity é colocado dentro de um layout 2/3, 1/3, com um módulo de texto.

Habilitei o título do formulário e AJAX para que o formulário de várias páginas não recarregue a página quando o usuário clicar em Avançar. A fonte do título do formulário está definida para 30%. Ele se encaixa bem no estilo do layout. Nenhuma outra mudança foi necessária.

RSVP de casamento

Este usa cores suaves e fontes elegantes que combinam com a foto (podem ser difíceis de ver nesta imagem. Eu normalmente usaria um contraste mais alto, mas um contraste mais suave é preferível para um site de casamento). As cores são tiradas da própria foto e escurecidas para ajudar a melhorar a legibilidade.

Este layout é um módulo único com um plano de fundo na seção. Mudei todas as fontes para Tangerina, aumentei o tamanho da fonte e deixei-as em negrito e ajustei as cores para castanho ou vermelho com base nas cores da imagem.

Formulário de pedido de pizza

Este exemplo usa o modelo de formulário Build a Pizza do Gravity Forms.

Este layout usa um layout 1/3, 2/3 com um módulo Gravity e vários módulos de imagem. Eu adicionei um plano de fundo na seção e uma sobreposição na linha com preenchimento para fazer tudo caber no espaço projetado.

Eu configurei o texto para Light, alterei as fontes para Arimo e ajustei o tamanho da fonte para cada um dos elementos do formulário separadamente.

Eu defini o texto e a borda do botão para branco e ajustei o raio da borda do botão para 30.

Tema extra com formulário de contato avançado no layout do módulo pessoal

Módulo de gravidade também é compatível com Extra. Aqui está uma olhada no primeiro exemplo (Formulário de contato avançado no layout de módulo de pessoa) com Extra. Para a página do Extra, estou usando um modelo de página de largura total. É semelhante à página Divi.

A única alteração que fiz foi o estilo dos botões. O botão azul não se misturou tão bem e o texto branco parece ótimo contra o fundo azul.

Licença e Suporte

O plugin vem com uma licença ilimitada, para que você possa instalá-lo em quantos sites quiser para você e seus clientes. Também inclui atualizações vitalícias e suporte de 6 meses.

O Módulo Gravity Divi pode ser adquirido na loja do desenvolvedor.

Pensamentos finais

O Gravity Divi Module oferece uma ótima maneira de integrar seus Gravity Forms aos seus layouts Divi. Ele adiciona mais recursos do que simplesmente usar os códigos de acesso do Gravity Forms. Todas as vantagens do Gravity Forms são aprimoradas pelo Divi Builder e pelas configurações do módulo, que inclui configurações de fundo como imagem, sobreposições e gradientes, configurações de fontes e botões, preenchimento, etc.

Se você estiver interessado em usar Gravity Forms com o Divi Builder, o Gravity Divi Module pode ser a solução de que você precisa.

Agora é sua vez. Você usou o Gravity Divi Module? Deixe-nos saber o que você pensa nos comentários abaixo.

Imagem em destaque via Bloomicon / shutterstock.com