(↑Pinterestでシェアお願いします!)

Elementor Proのカスタムアイコンの使い方

執筆者 | 更新日 2020年06月18日 | Elementor Proの使い方 | コメント0件

Elementorにはアイコンウィジェットやアイコンボックスウィジェットなど、アイコンを使用できるウィジェットが用意されています。しかも、Elementorが無料で用意してくれているので、簡単にアイコンを使用できるようになっていますが、ジャンルによっては使用したいアイコンがなかったりします。

そんな時は、Elementor Proに備わっているカスタムアイコンという機能を使って、使用したいアイコンを追加して使うことができます。この記事で、その手順をご紹介していきますので、もしアイコンを追加したいと思っている方は参考にしてみてください。

チェック!Elementor Proは有料のプラグインです。こちらから、契約をしてから記事の続きをご覧ください。

Step1. 画像を用意する

まずは、画像を用意しましょう。これは、どんな画像でもOKです。JPEG形式でもPNG形式でもどちらでも大丈夫ですので、アイコンとして使用したい画像を用意しましょう。

Step2. 画像をSVG形式に変換する

次に、JPEG形式・PNG形式の画像をSVGという形式に変換していきます。

JPEG形式・PNG形式の画像をSVG形式に変換する

こちらのサイトで、「Drop files here」という緑の箇所に画像をアップロードし、無事にアップロードできたら、「Start conversion」ボタンをクリックして、変換を開始します。

JPEG形式・PNG形式の画像のSVG形式への変換が完了

変換が終わると、上の画像のような画面に遷移します。このページでは、特に何もする必要はありません。自動的にSVG形式の画像がダウンロードされます。

Step3. ElementorにSVG形式の画像(アイコン)をアップロードする方法

画像がダウンロードできたら、Elementorに画像をアップロードしていきます。

ElementorのCustom Icons

Elementorのタブにカーソルをおくと、「Custom Icons(カスタムアイコン)」の副項目が表示されますが、ここではzipファイルをアップロードしないといけないので、今回は使用しません。

一旦、投稿ページか固定ページでElementorの編集画面をを開いて、そちらから画像をアップロードしていきます。

ElementorのアイコンウィジェットからSVG形式の画像をアップする

アイコン関係のウィジェットを追加して、「アイコン」の「SVGをアップロード」をクリックします。

ドラッグドロップでWordPressにSVG形式の画像をアップする

すると、ポップアップで画像をアップロードする画面が表示されますので、ドラッグ&ドロップで画像を追加してみてください。

ElementorでアップしたSVG形式のアイコンが使用できるか確認する

あとは、実際にそのアイコンが使用できるのかを確認してみてください。

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?