Diviプラグインのハイライト：WPおよびDiviアイコン

公開: 2018-10-18

WPとDiviIconsは、WordPressのサードパーティプラグインであり、任意のWordPressテーマで動作し、DiviBuilderに統合されます。 Diviで使用するために、プロジェクトで使用できる排他的なレイアウトが含まれています。アイコンは、WordPressエディターおよびアイコンを選択できるDiviモジュールで使用できます。この記事では、WPアイコンとDiviアイコンを見て、群衆から離れている理由を確認します。

WPとDiviIconsは、WordPressに2500を超えるアイコンを追加します。 Font Awesomeアイコン、マテリアルアイコン、および48のマルチカラーアイコンを含む450のカスタムデザインアイコンが含まれています。無料版とプロ版の両方で利用できます。私はプロ版をテストしています。

WPおよびDiviアイコンのインストール

通常どおりプラグインをアップロードしてアクティブ化します。私はバージョン1.1.0とDiviバージョン3.17およびWordPress4.9.8を使用しています。

次に、ライセンスをアクティブ化する必要があります。アクティベーション画面に移動するか、画面の上部に表示されるメッセージをクリックできます。ただし、ライセンスキーを入力するとこのページがオプション画面になるため、そこに移動する方法を知っておくと役立ちます。

使用しているテーマに関係なく画面にアクセスするには、プラグインリストのプラグインの説明にある[手順]リンクをクリックします。 Diviを使用している場合は、ダッシュボードのDiviメニューにWPおよびDiviアイコンと呼ばれる新しいメニュー項目が追加されます。これをクリックして、ライセンスキーを入力します。

マルチカラーアイコンのカスタマイズ

ライセンスキーを入力すると、画面が開き、手順、48のマルチカラーアイコンのリスト、およびそれらのアイコンの独自の配色を作成するためのツールが表示されます。

あなたは3色をコントロールできます。カラーコントロールを調整し、数秒待って結果を確認します。 [削除]をクリックすると、配色が削除されます。色は少し陰影効果を追加します。これにより、各色の暗いバージョンが作成され、見栄えが良くなります。

[配色の追加]をクリックすると、調整可能なマルチカラーアイコンの新しいセットが作成されます。

必要な数の配色を追加します。これにより、アイコンでできることが大幅に拡張されます。コントロールは直感的です。結局のところ、これは少し中毒性があることがわかりました。

任意のテーマでWordPressのWPとDiviアイコンを使用する

任意のテーマでアイコンを使用するには、WordPressエディターに追加された新しいアイコンを選択します。

これにより、アイコンを選択したり、カラーフィールドに入力するかカラーピッカーを使用して色を編集したり、ピクセル単位で数値を入力したりスライダーを使用してサイズを変更したり、タイトルを追加したり、クラスを追加したりできるエディターが開きます。アイコンを検索することもできます。

行った変更はすべてライブで表示されます。この例では、必要な色を入力し、サイズを106ピクセルに変更し、名前をGreenLeafに変更しました。

[ OK ]をクリックすると、アイコンがコンテンツに追加されます。

アイコンをダブルクリックしてエディターを開き、変更を加えます。

[ OK]をクリックすると、変更がコンテンツ内のアイコンに反映されます。

このエディタは、マルチカラーアイコンを編集しません。上で示したメイン設定画面でそれらを編集する必要があります。このエディタからそれらを選択し、サイズを変更し、タイトルを追加し、クラスを追加し、ここからコンテンツに挿入することができます。

アイコンはコンテンツ内で見栄えがします。

DiviBuilderでWPおよびDiviアイコンを使用する

多くの新しいアイコンがDiviBuilderに追加され、アイコンを選択できる任意のモジュールからアクセスできます。新しい検索機能が追加され、アイコンがはるかに大きくなり、見やすくなりました（これは、このプラグインがおそらく私のような老人によって設計されたことを示しています。私はこの機能に関連し、感謝することができます）。

Font Awesome、Material、またはカスタムアイコンから選択できるように、フィルターを追加してほしい。このようにして、カスタムアイコンを簡単に確認し、他の人とは異なるものが必要な場合はFont AwesomeアイコンとMaterialアイコンを無視したり、FontAwesomeアイコンまたはMaterialアイコンだけでビルドしたり、アイコンを選択的にブレンドしたりできます。

単色と多色の両方のアイコンが含まれています。

アイコンの検索と変更はフロントエンドからライブで行われます。

他のDiviアイコンと同じように調整できます。

フロントエンドビルダーからマルチカラーのアイコンを追加することもできます。ここではアイコンの色を調整することはできませんが（マルチカラーアイコンエディターで行います）、モジュールの設定から円を追加したり、境界線を追加したり、色を調整したり、アイコンのサイズを調整したりできます。

この例では、境界線のある円を追加しました。

フロントエンドとバックエンドの両方から使用できます。

WordPressアイコンエディタは、Diviテキストモジュールでも利用できます。このエディターは、他のWordPressテーマとまったく同じように機能します。

WPとDiviアイコンのレイアウト

プラグインはどのテーマでも機能しますが、Divi専用の特別な機能があります。 Diviで使用する最大の利点の1つは、独自のカスタムレイアウトです。それらはWPとDiviアイコンを使用してカスタム設計されており、ダウンロードリンクはプラグイン内でのみ利用できます。プラグインを持っている人なら誰でもダウンロードでき、どのプロジェクトでも使用できます。それらは、多くのスタイル付きモジュールを備えた完全なレイアウトです。

すでにいくつか利用可能であり、さらにいくつかが進行中です。アイコンの使用方法に焦点を当てて、それぞれを見てみましょう。それらは開発者のデモページで見ることができます。

eコマースのレイアウト

このレイアウトには、会社が使用している支払いゲートウェイと配送パートナーのタイプを示すバブル付きのスタイル付きヘッダーが含まれています。マルチカラーのアイコンは、提供されるサービスを示します。それがどのように機能するかはタブに示されています。また、価格表、証言、FAQのニュースレターのサインアップ、およびフッターも含まれています。

クリエイティブエージェンシーのレイアウト

これには、スタイル付きヘッダー、提供するサービスの種類に関する領域、ポートフォリオ、作業方法と手順をカバーするスライダー、証言、賞、チーム、連絡先、およびフッターが含まれます。それは多くの角度の付いたコーナーと深い影の効果を使用します。マルチカラーのアイコンはサービスを示しています。

ビジネスレイアウトダーク

これには2列のヘッダーがあり、片側に画像、反対側にテキストがあります。提供するサービスを示すセクションでは、マルチカラーアイコンを使用し、ページの下に画像とテキストを交互に表示します。他のセクションでは、大きな背景テキストを使用して、会社の履歴、オーバーレイ、連絡先フォーム、連絡先情報、およびフッターにマルチカラーのアイコンが表示されたチームメンバーを表示します。

ビジネスレイアウトライト

これは、ビジネスレイアウトダークと同じレイアウトですが、明るい色です。

非営利のレイアウト

これは、右側に垂直メニューを備えたフルスクリーンの画像スライダーを表示し、ソーシャルフォローボタンのアイコンを使用します。この下の細いセクションは、寄付CTAを示しています。また、aboutセクション、サポートする原因、イベントセクション、プロジェクト、アイコン付きの宣伝文、スポンサー、およびフッターも含まれています。

ライセンスとドキュメント

価格は、限定版の場合は無料、単一サイトの場合は39ドル、3サイトの場合は59ドル、無制限サイトの場合は79ドルです。プラグインは開発者のWebサイトで購入できます。

プレミアムサポートと3年間のアップデートが含まれます。ドキュメントは開発者のWebサイトで提供されています。

終わりの考え

WPとDiviアイコンは使いやすいです。 Diviモジュールでアイコンをクリックすると、アイコンの読み込みに数秒余分にかかります。これは主に、私の「田舎暮らしへようこそ」インターネット接続が遅いことが原因だと確信しています。 Diviモジュールにフィルターを追加してほしい。検索機能は、キーワードに基づいてアイコンを見つけるのに役立ちます。

FontAwesomeアイコンとMaterialアイコンが追加されるのが好きですが、私のお気に入りはカスタムアイコン、特にマルチカラーアイコンです。エディターは簡単に使用できます。 Diviがなくても素晴らしいプラグインだと思いますが、レイアウトが無料なので、Diviを使用するとさらに優れています。

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

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