Diviプラグインのハイライト：Diviアップロードアイコン

公開: 2019-04-28

Divi Upload Iconsは、Divi Builderにアイコンを簡単に追加できるようにする、Diviのサードパーティプラグインです。 FontAwesomeアイコンとMaterialアイコンのみを統合する他のアイコンプラグインとは異なり、これを使用すると、必要なアイコンのセットを追加できます。互換性のあるファイルタイプである必要があり、たまたま最も一般的な5つのファイルタイプを使用します。

プラグインは、アイコンファイルをドラッグアンドドロップするWordPressインストールにアップローダーを追加します。次に、アイコンは、アイコンを表示するDiviモジュールに追加されます。標準のDiviアイコンと同様に、アップロードするアイコンセットはDiviBuilderでスタイルを設定できます。このDiviプラグインのハイライトでは、Diviアップロードアイコンを見て、その使いやすさを確認します。

Diviアップロードアイコンのインストールとアクティブ化

通常どおりプラグインをアップロードしてアクティブ化し、ダッシュボードメニューの[設定] > [ Diviアップロードアイコン]に移動して、アクティブ化キーを入力します。

Diviアップロードアイコンを使用したアイコンのアップロード

また、設定画面にはアップロード機能があります。ここでは、アイコンをアップロードします。アイコンは、.eot、.svg、.ttf、.woff、.woff2、および.cssの形式である必要があります。これらの形式でCSSファイルが含まれている限り、任意のソースからアイコンをダウンロードして、Diviアップロードアイコンで使用できます。アイコンをインストールするには、アイコンをアップロードウィンドウにドラッグアンドドロップします。手順はアップロード領域にあり、使用方法を示す短いビデオがあります。

アイコンには複数の形式が含まれる場合があります。アイコンと一緒にCSSファイルをアップロードする必要があり、アイコンはサポートされているファイルである必要があります。この例では、いくつかのセットをアップロードしています。それらには、いくつかのファイルタイプとCSSファイルが含まれています。上の画像でオレンジ色のアイコンが付いているものには、ファイルがありません。

この例のファイルは正しいです。サポートされているファイルタイプとそのCSSファイルをアップロードしました。現在、2500を超える新しいアイコンがあります。 iconfont、Dripicons、Foundation Icon Fonts、MapIconsからダウンロードしました。開発者は、テスト済みのアイコンのリストを管理しており、Divi UploadIconsで使用できます。もちろん、使用できるアイコンは他にもたくさんあります。

比較のために、新しいアイコンをアップロードする前のDivi宣伝文モジュールを次に示します。 Diviには360個のアイコンが含まれています。ウィンドウ内のバーの長さを見ると、その数がわかります。

この画像には、アップロードした2500個のアイコンがすべて含まれています。選択できるアイコンが増え、ウィンドウのバーがはるかに小さくなりました。 Visual Builderでアイコンを確認できますが、新しいフィルターと検索ツールは含まれていません。

Diviアップロードアイコンフィルターと検索

従来のビルダーを使用する場合は、新しいフィルターツールが追加されます。フィルタを開いたり閉じたりできます。この例では閉じています。

[アイコンのフィルター]をクリックして、インストールしたアイコンファミリーと検索機能を表示します。アイコンファミリのいずれかをクリックして、そのファミリだけを表示します。すべてのファミリを表示したり、フィルタと検索オプションを閉じたりすることもできます。フィルタは高速に動作します。アイコンファミリをクリックするか、アイコンを検索すると、2500個のアイコンを使用していても、ほぼ瞬時にアイコンが表示されます。インストールしたアイコンの数に部分的に依存していると思いますので、あなたの経験は異なるかもしれません。

この例では、アップロードしたマップアイコンを選択しました。このアイコンファミリには約200のアイコンがあります。

これがFoundationアイコンです。また、200近くのアイコンがあります。

これがIcofontsです。このアイコンファミリは、2000を超えるアイコンを追加します。

キーワードまたはアイコンファミリ名で検索できます。結果には、アップロードしたすべてのアイコンファミリのアイコンと、Diviですでに利用可能なアイコンが含まれます。

アイコンファミリーごとに結果を表示するために、検索後にフィルターが機能するかどうかは興味深いでしょう。各アイコンにカーソルを合わせると、アイコンファミリの名前が表示されます。上の画像では、右から2番目のアイコンにカーソルを合わせています。これは十分に役立つので、検索フィルターは実際には優先度が高くありません。

Diviアップロードアイコンの例

もちろん、アイコンを使用する利点の1つは、Divi Builderを使用して、サイズ、色を調整したり、円や境界線を追加したりできることです。プラグインとアイコンはVisualBuilderで機能しますが、ライブビューにアイコンは表示されません。この例は、モジュールのアイコン選択のアイコンを示していますが、ライブプレビューが機能していません。

アイコンは、公開されたページまたは投稿に問題なく表示されます。 Visual Builderを使用してサイズと色をカスタマイズすることはできますが、ライブプレビューには表示されません。色とサイズをカスタマイズするときはVisualBuilderが好きですが、残りの例ではClassicBuilderを使用します。これは、住宅ローンのレイアウトパックのランディングページです。

アイコンは見栄えがよく、標準のDiviアイコンと同じようにカスタマイズできます。検索機能を使用して、これらのアイコンをすべて見つけました。これがデフォルト設定です。

レイアウトに使用した元の画像と同じように、レイアウトに合わせて色を変更しました。

これについては、アイコンのフォントサイズを使用することを選択し、32pxに調整しました。元のデザインに似たものになり始めていますが、私のアイコンが付いています。

これでは、各アイコンに円を追加しました。円とアイコンの色を変更し、左から2番目と4番目に境界線を追加しました。私はそれらがどのように見えるかを示すためだけに異なる色を選びました。

テキストの左側に配置されたアイコンは次のようになります。

これでは、ゴルフコースレイアウトの画像をアイコンに置き換えました。レイアウトの色を使用して、48pxのサイズにしました。

この例では、アイコンのフォントサイズの調整を無効にしました。これはデフォルトのサイズで、96pxです。それらはレイアウトのデザインとうまく調和します。

サークルアイコンの設定を使用すると、見栄えも良くなります。アイコンの色を白に変更し、レイアウトの日焼けを円の色として使用しました。アイコンはまだ48pxのままです。

これには、レイアウトの緑の色合いの1つを使用しました。 DiviBuilderのカスタマイズには多くの可能性があります。

Diviアップロードアイコン価格

Divi UploadIconsは$ 24.97です。無制限の使用法と更新があります。マーケットプレイスでDiviアップロードアイコンを購入できます。

終わりの考え

Divi Upload Iconsを使用すると、任意のフォントライブラリから必要なアイコンを簡単にアップロードできます。プラグインの背後にある考え方は、不要な何千ものアイコンをインストールする代わりに、DiviWebサイトで使用する正確なアイコンとアイコンファミリーをインストールできることです。

アイコンをDiviBuilderにアップロードしているので、アイコンはサーバーに保存されます。 2500を超えるアイコンをアップロードしましたが、DiviBuilderまたは私のWebサイトで速度の問題はありませんでした。

フォントファイルとCSSファイルを含むフォントが必要であることに注意してください。フォントを間違ってアップロードするのは簡単です（私が知っている方法を推測します）。指示に正確に従うようにしてください。従わない場合、フォントは空の正方形になります。また、Font Awesome 5では機能しませんが、4.7ではうまく機能します。

Diviアップロードアイコンを使用するのが好きでした。 Visual Builderで使用したいのですが、従来のBuilderでうまく機能します。適切なファイルがあることを確認するために余分な努力が必要でしたが、インターネット上にアイコンファミリがいくつあるかを考えると、適切なファイルを持つアイコンを見つけるのに時間をかける価値があります。アイコンを見つけるのは難しくありません。開発者は、すでにテスト済みのアイコンへのリンクをたくさん提供しています。

独自のアイコンをDiviBuilderに追加することに興味がある場合は、Divi UploadIconsを一見の価値があります。

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

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