Diviプラグインのハイライト：Divi Icons Pro

公開: 2019-04-05

Divi Icons Proは、2500を超えるアイコンといくつかの関連機能をDiviBuilderに追加するサードパーティのプラグインです。いくつかの購入オプションが付属しており、300を超えるカスタムアイコンを備えた無料オプションも含まれています。このDiviプラグインのハイライトでは、プラグインのプロ版を見て、何ができるかを見ていきます。

Divi IconsProについて

Divi Icons Proは、次のような多くの新しいアイコン機能をDiviに追加します。

2500以上の新しいアイコン
360カスタムラインスタイルアイコン
それぞれ74のカテゴリーと4つのスタイルの1295フォント素晴らしいアイコン
16のカテゴリとそれぞれ5つのスタイルの900のマテリアルデザインアイコン
DiviBuilderの統合
Diviモジュールのアイコン検索機能
ファミリで選択するか、アイコンの名前を入力するDiviモジュールのアイコンフィルタ

アイコンはDiviビルダーに統合され、Diviのネイティブアイコンと同じように機能するため、アイコンを使用する任意のDiviモジュールでスタイルを設定できます。 Divi Builderの他のアイコンと同様に、色とサイズをカスタマイズしたり、モジュールコントロールで表示する場所を設定したり、円や境界線を追加したりできます。

Divi IconsProのインストール

ダウンロードファイルを解凍します。中には、プラグインと手順があります。通常どおりプラグインをアップロードしてアクティブ化します。

ダッシュボードメニューの[設定] > [ Divi Icons PROアクティベーション]に移動して、APIキーをアクティブにします。これで、プラグインのプロバージョンを使用できます。アイコンはDiviBuilderに自動的に統合されるため、テーマオプションのデフォルト設定をカスタマイズする場合を除いて、他に何もする必要はありません。

Divi Icons ProDiviテーマオプション

アイコンはデフォルトで有効になっていますが、必要なアイコンファミリを有効または無効にしたり、Webサイトへのロード方法を選択したりできます。新しいDiviIconsProタブがDiviテーマオプションに追加されました。ここでは、使用するアイコンファミリを選択できます。 CDNからFontAwesomeフォントとGoogleMaterial IconFontsをロードすることもできます。

ディビアイコンプロアイコン

アイコン、フィルター、および検索機能は、アイコンを使用するDiviモジュールに自動的に追加されます。これは、Line Style Icons、Font Awesome、およびMaterial DesignIconsのアイコンを表示する3つの宣伝文句モジュールです。

ディビアイコンプロ検索

検索機能を使用すると、直感的な単語を使用してアイコンを見つけることができます。アイコンの名前を知る必要はありません。検索したいキーワードを入力するだけで、アイコン選択エリアにアイコンが表示されます。フィルタでブランドを選択することで、必要に応じてブランドで検索を絞り込むことができます。一部のアイコンが検索結果に表示されなかったため、検索は完全ではありませんが、十分に機能しました。 FontAwesomeおよびMaterialIconsの一部のアイコンは、適切な名前が付けられていない可能性があります。

ディビアイコンプロフィルター

アイコンをフィルタリングすることも、すべてを表示することもできます。フィルタには、その特定のブランドまたはファミリのアイコンが表示されます。特定のブランドを表示するには、表示したいブランドのラベルが付いたボタンをクリックするだけです。他のすべてのアイコンを除外します。この例は、エレガントなテーマアイコンの小さなサンプルを示しています。

これがラインスタイルアイコンのサンプルです。それらは他のアイコンよりも薄いので、それ自体でうまく機能する傾向があります。私は他の人と一緒にそれらを試しました、そしてそれらはいくつかのケースで一緒に働きます。何があなたのために働くかを見るのは価値があります。アイコンはうまくデザインされており、ブランド間の私のお気に入りの一部です。

これがFontAwesomeアイコンの小さなサンプルです。

これは、マテリアルデザインアイコンの小さなサンプルです。

Divi IconsProの例

この例では、リゾートレイアウトの画像をラインスタイルアイコンに置き換えました。それらを青に設定し、サイズを48ピクセルに変更しました。アイコンはレイアウトで見栄えがします。

これでは、アイコンの位置を上から左に変更しました。また、サイズを30pxに変更し、各宣伝文を中央に配置するために50pxのパディングを追加しました。

この例では、フッターのソーシャルメディアモジュールを宣伝文に置き換えて、独自のアイコンを選択してスタイルを設定できるようにしました。これらはすべてFontAwesomeからのものです。ネットワークのブランドに合わせて色を設定し、サイズを52ピクセルに変更し、中央に配置するために右側に30ピクセルのパディングを追加しました。

今回はアイコンを白に変更し、背景をブランドカラーにしました。アイコンを中央に配置するために、ボックスシャドウを追加し、パディングを追加しました。また、オレンジ色のボタンにパディングを追加して、ソーシャルアイコンの幅に一致するようにボタンを広げました。アイコンはレイアウトのデザインとうまく調和しています。

これは、ホームセンターレイアウトを使用しています。画像を、さまざまなフォントファミリを使用した宣伝文とアイコンの組み合わせに置き換えました。宣伝文の左側に表示するように設定されています。アイコンは50pxです。この例では、FontAwesomeアイコンで「ペイント」を検索したことがわかります。

これらはすでにアイコン付きの宣伝文句だったので、それらを選択し、同じトピックを検索して、異なるアイコンを選択しました。

これはアイコンに円を追加します。レイアウトの背景に合わせて円を白にし、アイコンに合わせて円の色を変更しました。

アイコンはボタンと連動しますが、ビジュアルビルダーには表示されません。それらは実際のウェブサイトでうまく機能します。

これがレイアウト内のボタンのアイコンです。それはうまく機能します。

これが拡大図で、ボタンでどのように表示されるかを確認できます。

この例では、パラリーガルレイアウト内の画像を宣伝文に置き換えました。トピックに一致するアイコンを検索し、お金のアイコンを除いて、元のグラフィックの色を使用しました。

この例では、ブッチャーレイアウトの画像をアイコンに置き換えました。タイトルテキストの赤を使用し、アイコンのフォントサイズを84pxに設定しました。

それぞれの宣伝文に背景色とボックスシャドウを追加しました。レイアウト内で見栄えがします。中央の宣伝文にカーソルを合わせて、ホバー効果を示しています。それは他のものよりも高くなり、アイコンを含むコンテンツは右にシフトします。

ディビアイコンプロ価格

プラグインで使用するサイトの数に基づいて、いくつかの購入オプションがあります。これには、6か月のサポートとライフタイムアップデートが含まれます。 Divi Icon Proは、開発者のWebサイトから購入できます。

通常ライセンス（1サイト）–€25.00
拡張ライセンス（無制限サイト）–€65.00

360ラインスタイルのアイコンを含む無料バージョンもあります。サポートやアップデートは含まれていません。

Divi IconProドキュメント

ドキュメントはダウンロードファイルに含まれていますが、オンラインでアクセスすることもできます。ドキュメントは詳細であり、プラグインをインストールし、アイコンと機能を使用する手順を説明します。また、FAQとサポートを受けるためのリンクも含まれています。リンクには、ソーシャルメディア上のDiviコミュニティと、サポートチケットを作成するためのリンクを含むアカウントが含まれます。

終わりの考え

アイコンプラグインは、Divi Builderに新しいアイコンを追加する最も簡単な方法であり、Divi IconsProは簡単に入手できます。たくさんのアイコンが含まれており、特定のブランドのアイコンを有効または無効にして、モジュールに表示される内容をより細かく制御できます。私はフィルターと検索機能が好きです。作業したすべてのトピックのアイコンを見つけることができました。

私が抱えていた唯一の問題は、Visual Builderを使用しているときにアイコンがボタンに表示されたくないということでしたが、Classic Builderではうまく機能し、Webサイトでは問題なく表示されます。一部のアイコンは検索結果に表示されませんでしたが、それはアイコン開発者によるアイコンの命名方法の問題だと思います。これらの問題は軽微であり、プラグインの使用や推奨を妨げることはありません。

Divi Icons Proは使いやすく、ほとんど手間をかけずにたくさんの新しいアイコンを追加できます。 Divi Builderにアイコンを追加することに興味がある場合は、Divi IconsProが最適です。

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

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