Diviプラグインのハイライト：Divi Supreme

Divi Supremeは、Diviのサードパーティプラグインであり、Divi Builderに新しい機能を追加するための多くの設定と、多くの新しいモジュールを追加します。 この記事では、Divi Supremeで何ができるかを確認し、Diviツールボックスで必要なプラグインかどうかを判断するのに役立ちます。

インストール

インストールはシンプルで簡単です。

1. Diviマーケットプレイスからプラグインを購入してダウンロードします
2. プラグイン>新規追加>プラグインのアップロードに移動します
3. [ファイルの選択]をクリックします
4. コンピューターでプラグインのzipファイルを見つけて選択します
5. [今すぐインストール]をクリックします
6. [アクティブ化]をクリックします
7. WordPressダッシュボードでDiviSupreme Pro > Licenseに移動し、ライセンスキーを入力します

一般設定

Divi Supremeは、いくつかのタブを備えたメニュー画面を追加して、設定を希望どおりにカスタマイズします。 [一般設定]タブには、スケジュールされた要素を有効にするための切り替え、ポップアップ、ライブラリウィジェット、続きを読むコンテンツリンク、ライブラリショートコード、およびレスポンシブビューアが含まれています。 それらのいくつかを見てみましょう。

スケジュールされた要素

スケジュールされた要素は正確な時刻をカレンダーに提供するため、それらの時刻にカレンダーを表示または非表示にするようにスケジュールできます。 適用するユーザーを選択することもできます。 これは、すべてのセクション、行、列、およびモジュールに追加されます。

現れる

ポップアップ機能がモジュールに追加されます。 ポップアップタイプの選択、ライブラリからのレイアウトの選択、開閉トリガーの選択、自動クローズ、インとアウトのアニメーション、位置、幅、オーバーレイ、閉じるボタン、アイコン、色などを選択できます。

続きを読む

続きを読む特定のモジュールへのリンクを追加して、クリックするとコンテンツが表示されます。 モバイルでのリンク、折りたたまれた高さ、テキスト、フォント、色、影、カスタムCSSなどを表示することを選択します。

ライブラリウィジェット

ライブラリウィジェットを使用すると、Diviライブラリの任意のレイアウトをサイドバー、フッター、またはウィジェットを使用するその他の場所に配置できます。

この例は、サイドバーのデモレイアウトを示しています。 私が使用しているレイアウトはこのスペース用に設計されていませんが、Diviレイアウトを使用してサイドバーを作成できるのは興味深いことです。

レスポンシブビューア

レスポンシブビューアは、より多くの表示オプションを提供する新しいツールをビルダーツールバーに追加します。 タブレットモードまたは電話モードを表示するように選択すると、新しい画面サイズがツールバーに追加されます。 また、カスタムサイズを入力できるフィールドも追加されます。

簡単なテーマビルダー

Easy Theme Builderを使用すると、ヘッダーを構成したり、スクロール時にヘッダー要素の色を変更したり、縮小要素をカスタマイズしたりできます。

固定ヘッダー

デフォルトでは、テーマビルダーで作成されたヘッダーはサイトとともにスクロールします。 上記の例では、ページを下にスクロールし、ヘッダーをスクロールして外しました。

ヘッダーが修正されたので、スクロールしてもヘッダーはそのまま残ります。

スクロール

スクロールするために、両方のセクションの背景色を変更しました。 スクロールに表示されるボックスシャドウも追加しました。

スクロールする前のテーマビルダーのヘッダーは次のとおりです。 修正済みに設定し、コンテンツをプッシュダウンしました。 このヘッダーには2つのセクションがあります。

スクロール後のヘッダーは次のとおりです。 2つのセクションは、私の設定に従って背景色を変更しました。

縮む

縮小すると、スクロール時にメニューのサイズを指定したり、ロゴを新しい画像に変更したりできます。 セクション、行、モジュールにパディングを追加し、縮小する画像のパーセンテージを指定します。

これが、デフォルト設定と新しいロゴが付いたテーマビルダーヘッダーです。

違いがわかりやすいようにサイズを大きく設定しました。 8pxのパディングを追加し、画像を80％に設定しました。 ロゴが新しい画像に変更されました。

ソーシャルメディアの設定

ソーシャルメディア設定では、FacebookアプリIDを入力し、言語を変更して、モジュールがWebサイトと同じ言語を使用するようにすることができます。

その他

その他の設定により、アンインストール時にプラグインのデータを削除したり、JSONファイルのアップロード、SVGのアップロードを許可したり、DiviSupremeのメニュー名とアイコンを変更したりできます。

Diviモジュール

Divi Supremeは、42の新しいモジュールをDiviBuilderに追加します。 それらは、画像、テキスト、ボタン、お問い合わせフォーム、ソーシャルメディアネットワークなどに多くの新機能を追加します。それらのいくつかを見てみましょう。

最高の営業時間

Supreme Business Hoursには、曜日ごとのサブモジュールが含まれており、個別に名前を付けたり、さまざまな時間を表示したり、スタイルを設定したりできます。 ここで行ったように、一緒にスタイルを設定することもできます。 それはあなたに曜日と時間のフォントを独立して制御することを可能にします。 フィールドに任意のテキストを入力することもできます。

最高のボタン

Supreme Buttonには、一緒にまたは個別にスタイルを設定できる2つのボタンがあります。 また、区切りテキスト、各ボタンのライトボックス、およびツールチップを追加します。 各要素には、独自のスタイリングオプションがあります。 必要な機能を正確に使用できるため、両方のボタンや区切りテキストなどを使用する必要はありません。

スプリームカード

Supreme Cardは、ブログ投稿のようなカードを作成します。 画像、タイトル、説明、ボタン、バッジを追加します。 各要素は個別にスタイルを設定できます。 画像を追加し、タイトルのフォントの太さを増やし、バッジの色とフォントサイズを変更し、ボタンの色を変更し、ボタンを丸くし、ボタンにボックスシャドウを追加しました。 これはスタックビューです。

インラインで作成し、幅、順序の配置、および水平方向のコンテンツの配置（画像の垂直方向の位置を調整する）を選択することもできます。 これは、順序の配置の場合は左、水平方向の配置の場合は中央を示しています。 配置オプションは、交互のレイアウトでCTAを作成するのに最適です。

これは正しい配置です。 また、角の丸み、赤い境界線、ボックスの影を追加するなど、画像にいくつかの調整を加えました。 画像にオーバーレイを追加することもできます。

SupremeCardカルーセル

Supreme Card Carouselは、Supreme Cardと同じ機能を提供しますが、スライダーに複数のカードを追加します。 それはあなたにスタイリングオプションを与えるので、あなたはカードを独立してスタイリングすることができます。 また、矢印やドットナビゲーションなど、カルーセルのスタイリングオプション、および標準のスライダー機能も追加されます。 これは、私が追加した画像のデフォルト設定を示しています。 これがスタックアライメントです。

これがインラインアライメントです。 各サブモジュールに背景色を追加して、目立たないようにしました。 矢印のサイズと色、およびドットナビゲーションの色も変更しました。 矢印の調整により、位置、前のアイコン、次のアイコンを制御することもできます。

Supreme Dual Heading

Supreme Dual Headingテキストには、前、中、後の3つのセクションがあります。 中央のテキストはデフォルトで異なる色になっています。 3つすべてが同じ設定を使用しますが、個別にスタイルを設定できます。 インラインまたはスタックとして、任意の組み合わせで表示することもできます。 インラインがデフォルト設定です。 前のテキストと中央のテキストのフォントサイズを大きくし、後のテキストを小さくして、中央のテキストを太字にしました。

Supreme Embedded Google Map

埋め込まれたGoogleマップでは、固定するアドレスを追加して、ズームレベルを選択できます。 他の設定は必要ありません。 ctrl +を使用してズームするため、ユーザーはページを停止せずにスクロールして地図をズームできます。

どのマップ要素にもカスタム設定はありませんが、すべての標準デザインオプションがあります。 この例では、ボックスシャドウを追加し、フィルターを調整しました。

Supreme EmbeddedTwitterタイムライン

埋め込まれたTwitterタイムラインでは、Twitterユーザー名を指定して、そのユーザーのTwitter投稿をレイアウトに埋め込むことができます。 ツイートの数を制限し、ヘッダー、フッター、境界線、スクロールバーを表示し、背景色を削除します。 標準の設計設定が含まれています。 明るいテーマと暗いテーマも含まれています。

最高のFacebookコメント

FacebookコメントはFacebookページのコメントを埋め込み、ユーザーがFacebookアカウントを使用してコメントできるようにします。 表示するコメントの数を選択し、明るいスキームまたは暗いスキームを選択し、コメントの順序を選択します。 ユーザーはFacebookでその人にいいね、返信、フォローすることができます。 標準の設計設定が含まれています。

最高のアイコンリスト

Supreme Icon Listには、コンテンツを追加して各アイテムのアイコンを選択できるサブモジュールが含まれています。 テキストとアイコンを個別にスタイル設定できます。 各アイテムの背後に、色、グラデーション、画像、ビデオなどの背景を追加することもできます。

最高の形

Supreme Shapesを使用すると、ドロップダウンリストから形状を選択し、そのサイズを設定できます。 17種類の形からお選びいただけます。

デザインオプションを使用すると、色を変更したり、境界線を使用したり、影を追加したりできます。 また、標準の設計設定も含まれています。 上記の例では、色を変更して影を追加しました。

購入

Divi Supremeは、DiviMarketplaceで79ドルで購入できます。 価格には、無制限のWebサイトの使用と、1年間のサポートと更新が含まれています。

終わりの考え

Divi Supreme Proは、Diviの興味深いプラグインです。 それはたくさんの新しい機能とモジュールを追加しますが、使いやすいままです。 すべての機能が便利です。 エフェクトを追加するものもあれば、Diviを大幅に拡張する機能を追加するものもあります。 大量のプラグインを必要とせずにDiviサイトまたはツールボックスを拡張したい場合は、Divi SupremeProを一見の価値があります。

我々はあなたから聞きたい。 Divi Supreme Proを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

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