Diviプラグインのハイライト：DiviおよびExtra用のCalderaフォームスタイルカスタマイザー

公開: 2017-10-29

Caldera Formsは、Webサイトのスタイリングに溶け込む素晴らしい仕事をします。 DiviおよびExtraTheme Customizerの使い慣れたスタイリングツールを使用してスタイリングしたい場合はどうなりますか？これは、DiviおよびExtra用のCaldera Forms StyleCustomizerと呼ばれるサードパーティのプラグインを使用して行うことができます。

Caldera Formsは、標準のTheme Customizerオプションを使用してスタイルを設定できますが、これらのオプションはテーマのスタイルを設定します。つまり、フォームのテキストのスタイルを変更すると、Webサイトの本文のスタイルも変更されます。フォームをコンテンツとは別にスタイル設定したい場合は、通常、CSSを使用して手動でスタイル設定する必要があります。 DiviおよびExtra用のCalderaForms Style Customizerは、テーマカスタマイザーにスタイリング機能を追加することでこの問題を解決します。

このプラグインのハイライトでは、DiviおよびExtraプラグイン用のCaldera Forms Style Customizerを見て、その使いやすさを確認します。このサードパーティのプラグインは、CalderaFormsから購入できます。名前が示すように、DiviとExtraの両方で動作します。

インストールとアクティベーション

通常どおりプラグインをアップロードしてアクティブ化します。調整する設定はありません。機能はすぐに使用できます。

フォームのカスタマイズ

デフォルトの連絡フォームを、すべてのデフォルトのスタイルでページに挿入しました。このフォームのすべての調整を一度に1つずつ行います。次に、1つか2つの例を示します。

新しいスタイリング機能がテーマカスタマイザーに追加されました。 テーマカスタマイザー（またはモジュールカスタマイザー–どちらも機能します）を開き、 Caldera Forms StyleCustomizerをクリックします。

これにより、テキスト、ボタン、フィールド、トグルスイッチ、日付ピッカー、ブレッドクラムなど、フォームのあらゆる側面をカスタマイズするための20の新しいカスタマイズタブが追加されます。各設定を見てみましょう。

テキストフィールド

テキストフィールドは、テキストの色、プレースホルダー、境界線、およびフィールドの境界線の幅、境界線の半径、1行の高さを変更します。

テキストフィールドにカーソルを合わせる

テキストフィールドホバーは、テキスト、フィールド、および境界線の色を変更します。

テキストフィールドフォーカス

テキストフィールドフォーカスは、フォーカスのあるフィールドのテキスト、背景、および境界線の色を変更します。この例では、中央のフィールドにホバーがありますが、背景が暗いフィールドにフォーカスがあります。

ドロップダウン選択

ドロップダウン選択は、背景、テキスト、矢印、および境界線の色をカスタマイズします。境界線の幅と半径を調整することもできます。

ドロップダウン選択ホバー

ドロップダウン選択ホバーは、ホバーの背景、テキスト、矢印、および境界線の色を制御します。

チェックボックスとラジオボタン

チェックボックスとラジオボタンは、チェックボックスとラジオボタンの選択された項目の色を調整します。

トグルスイッチ

トグルスイッチは、選択されていないスイッチと選択されているスイッチの両方の背景、フォント、境界線の色を個別に調整します。両方のスイッチの境界線の幅と半径を一緒に調整することもできます。

トグルスイッチホバー

トグルスイッチホバーは、選択されたスイッチと選択されていないスイッチの背景、フォント、境界線の色を個別に調整します。これは選択されていないスイッチです。

青いスイッチが選択されたスイッチです。

送信ボタン

[送信]ボタンは、背景、フォント、境界線の色、境界線の半径、ボタンの幅、およびその位置を制御します。フォントサイズと文字間隔を調整することもできます。テキスト変換機能は、テキストの大文字と小文字を変更します。小文字、大文字、大文字、イニシャル、または継承を選択します。

ボタンホバーを送信

[送信]ボタンホバーは、背景、フォント、および境界線のホバーの色を制御します。

リセットボタン

リセットボタンは、背景、フォント、および境界線の色を制御します。フォントのサイズと文字の間隔、ボタンの幅、ボタンの位置、境界線の幅、境界線の半径を調整することもできます。これもテキスト変換があります。

リセットボタンホバー

[ボタンホバーのリセット]は、背景、テキスト、および境界線のボタンの色を調整します。

その他のボタン

Calderaには他にもいくつかの種類のボタンがあります。その他のボタンは、送信とリセットを除くすべてを制御します。フォント、境界線、背景の色を調整し、境界線の幅と半径を調整します。この例では、[前へ]ボタンと[次へ]ボタンを作成しました。

その他のボタンホバー

その他のボタンホバーは、フォント、境界線、および背景のホバーの色を制御します。

日付ピッカー

日付ピッカーには、同じタブ内に通常の色とホバー色が含まれています。フォントと背景の色を調整します。この例では、10にカーソルを合わせると、12が選択されます。

ファイルリストのアップロード

アップロードファイルリストは、アップロードされるファイルのリスト内の背景とテキストの色を制御します。

セクションブレイク

セクション区切りは、セクション区切りの色、境界線の幅、および上下の余白を制御します。

パン粉

ブレッドクラムを使用すると、アクティブなページと他のリンクの両方のフォントの色、セパレータ、背景、および境界線を選択できます。境界線の幅と半径を調整します。

成功アラート

Success Alertは、フォント、背景、境界線の色、および境界線の半径と幅を調整します。また、ボックスの高さを調整します。

その他

その他では、必要なアイコンの色、エラーのあるフィールド、説明テキスト、クレジットカードの色、およびクレジットカードのアイコンの位置を制御できます。説明テキストには、フォントサイズ、文字間隔、およびテキスト変換オプションが含まれます。大文字を選択しました。

例

履歴書アップロードフォームを作成し（実際にはこれはCaldera Formsに組み込まれていますが、ボタンをクリックして選択しました）、モーダルとして設定しました。まず、DiviBuilderでページのスタイルを設定します。

背景画像を追加し、背景とブレンドするのではなく、コントラストのある色を選択しました。

これは、異なる背景で同じ設定を使用します。今回はモーダルでフォームを使用しませんでした。背景が白ではなく、フォームフィールドが画像の真上に配置されます。

インポート・エクスポート

カスタマイザーで作成したCalderaFormsスタイルを簡単にインポートまたはエクスポートできます。ダッシュボードで、 Caldera Forms 、 Styles – Import / Exportに移動します。これにより、スタイルがJSONファイルとしてインポートおよびエクスポートされ、このプラグインを使用する任意のWebサイトでCalderaフォームスタイルを簡単に使用できるようになります。すべてのスタイリングは、インポートされたファイルのスタイリングで上書きされます。

ライセンスとサポート

プラグインは1年間のライセンスとして購入できます（年次定期）。このライセンスでは、プラグインを1つ、5つ、または15のWebサイト（選択した層に応じて）で使用でき、1年間のサポートと更新が含まれます。

最終的な考え

このプラグインは使いやすいことがわかりました。カスタマイザーの設定は直感的です。それらは適切にラベル付けされ、意味のある方法で配置されています。必要な設定を見つけるのに問題はありませんでした。一度にデフォルト設定に戻す方法や、グローバルな調整（すべての色の全体的な暗さを増減するなど）を行う簡単な方法を知りたいです。それはおそらく現実的ではありませんが、面白そうです。

カスタマイザー設定で個々のフォームのスタイルを設定することはできません。すべてのフォームは、グローバル設定と同じスタイリングを使用し、Calderaのスタイリング機能を使用して個別にスタイリングする必要があります。これがテーマカスタマイザの性質です。 Caldera Formsをグローバルにスタイリングすることに興味がある場合は、DiviおよびExtra用のCaldera Forms StyleCustomizerを使用するよりも簡単な方法はありません。

我々はあなたから聞きたい。 Caldera Forms Style Customizer for Divi and Extraプラグインを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

Irina Strelnikova /shutterstock.comによる注目の画像