Diviプラグインのハイライト– GravityDiviモジュール

公開: 2017-08-18

Gravity Formsは、WordPressで最も人気のあるフォームプラグインの1つです。ショートコードを使用してDiviと互換性がありますが、これはDiviモジュールで可能なことを十分に活用していません。幸い、GravityフォームをDiviBuilderに追加するGravityDiviModuleと呼ばれるサードパーティのプラグインが利用可能です。

Gravity Divi Moduleは、CodeCratersのサードパーティプラグインであり、DiviおよびExtraレイアウトであるGravityFormsを完全に統合します。これにより、Diviモジュールのカスタマイズを使用してフォームのスタイルを設定できます。このプラグインのハイライトでは、モジュールで何ができるかを見ていきます。サンプルには、GravityFormsが提供するテンプレートとUnsplash.comの画像を使用しています。

重力フォームの詳細については、エレガントなテーマの記事を参照してください。

重力フォーム–パーソナルエディションの詳細
重力フォームをDiviのようにスタイル設定する方法（+ボーナスルック！）

GravityDiviモジュールのインストールと設定

まず、このプラグインを使用するには、GravityFormsをインストールする必要があります。 Gravity Formsをインストールしたら、Gravity DiviModuleプラグインをアップロードしてアクティブ化します。プラグインがアクティブ化されると、GravityDiviと呼ばれる新しいモジュールがDiviBuilderに追加されます。セットアップは必要ありません。

コンテンツ設定では、フォームの選択、フォームのタイトルの表示、説明の表示、AJAXの有効化、テキストの色の選択、および背景の調整を行うことができます。

デザイン設定には、フォームのタイトル、説明、要素、およびテキスト自体のテキスト調整が含まれます。余白とパディングの間隔、およびボタンのスタイリングも含まれています。これらの設定により、テキストモジュールでGravityFormsショートコードを使用するよりも詳細に制御できます。詳細設定には、フォームのフィールドの開始タブを指定できるタブインデックスが含まれています。

ドロップダウンボックスからフォームを選択します。 Diviページを作成するときにフォームをまだ作成していない場合は、[重力フォームの選択]の下のコンテンツ設定のリンクをクリックしてフォームを作成できます。フォームを作成すると、このドロップダウンボックスに表示されます。

調整を行う

これは、デフォルトのスタイルを使用した高度な連絡フォームです。それはDiviのスタイリングと一致します。調整は簡単です。

ここでは、いくつかの基本的なカスタマイズについて説明します。ヘッダーテキストのフォントサイズを大きくし、すべてのフォントの色を変更し、暗いオーバーレイのある背景画像を追加し、パディングを追加しました。

この例では、フォームのタイトルを無効にしました。

これでは、ドロップダウンボックスから新しいフォームを選択しました。これらの調整はモジュールで行われたため、フォントと背景の設定は保持されます。これは簡単な説明付きの簡単なサンプルです。フォームのタイトルを無効にし、説明を有効にしました。

Diviレイアウトの例の重力Diviモジュール

Gravity Moduleの最大の利点は、モジュール設定を備えたDivi Builderです。これは、以前使用していたモジュール設定をGravityFormsで使用できることを意味します。 Diviレイアウト内のいくつかの例を見てみましょう。

個人モジュールレイアウトの高度な連絡フォーム

これは、背景画像を含むシンプルなレイアウトに統合された高度な連絡フォームです。フォームをページデザインと調和させるために、テキストを明るい色に変更し、タイトルのフォントサイズを40に増やし、フォーム要素のテキストを赤に変更しました。

モジュールの行をPersonモジュールと同じセクション内に配置して、背景画像がGravityモジュールまで拡張されるようにしました。フォームは、ページの下部にフォームを添付したように見えるのではなく、ページのデザインに収まります。

サインアップレイアウト

この例では、大学や大学向けの無料のホームページレイアウトのレイアウト要素の一部を使用しています。

Gravityモジュールは、テキストモジュールを使用して2 / 3、1 / 3のレイアウト内に配置されます。

フォームのタイトルとAJAXを有効にして、ユーザーが[次へ]をクリックしたときに複数ページのフォームがページを再読み込みしないようにしました。フォームのタイトルフォントは30％に設定されています。レイアウトのスタイリングにうまく適合します。他の変更は必要ありませんでした。

結婚式の出欠確認

これは、写真に溶け込む柔らかな色とエレガントなフォントを使用しています（この画像では見づらいかもしれません。通常はより高いコントラストを使用しますが、結婚式のWebサイトではより柔らかいコントラストを使用することをお勧めします）。色は写真自体から取得され、読みやすさを向上させるために暗くされます。

このレイアウトは、セクションに背景がある単一のモジュールです。すべてのフォントをタンジェリンに変更し、フォントサイズを大きくして太字にし、画像内の色に基づいて色を黄褐色または赤に調整しました。

ピザ注文フォーム

この例では、GravityFormsからBuildaPizzaフォームテンプレートを使用します。

このレイアウトは、Gravityモジュールといくつかの画像モジュールを備えた1 / 3、2 / 3レイアウトを使用します。セクションに背景を追加し、行にパディング付きのオーバーレイを追加して、すべてが設計されたスペースに収まるようにしました。

テキストをLightに設定し、フォントをArimoに変更し、フォームの各要素のフォントサイズを個別に調整しました。

ボタンのテキストと境界線を白に設定し、ボタンの境界線の半径を30に調整しました。

個人モジュールレイアウトの高度な連絡フォームを使用した追加のテーマ

GravityModuleはExtraとも互換性があります。 Extraを使用した最初の例（Person Module Layoutの高度な連絡フォーム）を見てみましょう。 Extraのページには、全幅のページテンプレートを使用しています。 Diviページと同じように見えます。

私が行った唯一の変更は、ボタンのスタイルです。青いボタンもブレンドされず、白いテキストは青い背景に対して見栄えがします。

ライセンスとサポート

プラグインには無制限のライセンスが付属しているため、自分とクライアントの両方に必要な数のWebサイトにプラグインをインストールできます。また、ライフタイムアップデートと6か月のサポートも含まれています。

Gravity Divi Moduleは、開発者のショップから購入できます。

最終的な考え

Gravity Diviモジュールは、GravityフォームをDiviレイアウトに統合するための優れた方法を提供します。単にGravityFormsショートコードを使用するよりも多くの機能を追加します。 Gravity Formsのすべての利点は、Divi Builderと、画像、オーバーレイ、グラデーションなどの背景設定、フォントとボタンの設定、パディングなどのモジュールの設定によって強化されます。

DiviBuilderでGravityFormsを使用することに興味がある場合は、Gravity DiviModuleが必要なソリューションになる可能性があります。

今ではあなたの番です。 Gravity Divi Moduleを使用したことがありますか？ 以下のコメントであなたの考えを教えてください。

Bloomicon /shutterstock.com経由の注目の画像