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

Elementorのアイコンウィジェットの使い方

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

Elementorのアイコンウィジェットでできること

Elementorのアイコンウィジェットは、アイコンが追加できます。いろんなアイコンが用意されているので、様々な目的に使えますが、例えばあなたが使用しているSNSのアイコンを追加したり、カフェの設備情報(コンセントやWiFiなど)に関するアイコンを追加したり、といった使い方ができます。

【限定】Elementorの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのアイコン設定

アイコン

「アイコン」の項目では、シンプルにアイコンを選びます。カーソルを置くと「Icon Library」と「Upload SVG」が表示されます。Elementorで用意されているアイコンを使う場合は「Icon Library」、アイコンをアップロードする場合は「Upload SVG」を使います。基本的には、「Icon Library」でOKだと思います。

表示

Elementor アイコンウィジェット 表示

「表示」では、設置したアイコンの外観の形を変えることができます。「デフォルト」と「重ねる」、「フレーム」の3種類あります。「重ねる」を選ぶと塗りつぶされた状態になり、「フレーム」だとアイコンの周りに縁が表示されます。「重ねる」か「フレーム」のいずれかにすると、「形状」という項目が追加されます。「円」と「四角」の2種類ありますが、「丸」だとアイコンが丸くなり、「四角」だとアイコンが四角く変形します。

リンク

アイコンには、リンクを追加することができます。リンクを追加する場合は、この項目にURLを入力します。

新しいウィンドウで開く

右側にある「リンク設定」という歯車マークをクリックすると、「新しいウィンドウで開く」と「Nofollowを追加」が表示されます。「新しいウィンドウで開く」では、チェックを入れると、リンク先のページが新規ウィンドウで開かれます。

Nofollowを追加

ここにチェックを入れると、リンクがNofollow設定になるので、Googleのクローラーが追跡しないようになります。

配置

最後は、「配置」です。アイコンの位置を左にするのか、中央にするのか、右にするのか決められます。

スタイルのアイコン設定

Elementor アイコンウィジェット スタイル設定

「スタイル」では、アイコンの色などを設定します。

メインカラー

「普通」と「ホバー」がありますが、「ホバー」はマウスカーソルを置いた時の挙動を設定します。「メインカラー」では、「重ねる」を選んだ場合はアイコンの外側の色が、「フレームつき」を選ぶとフレームと中心のアイコンの色が、「メインカラー」で設定した色になります。

サブカラー

「重ねる」を選んだ場合は中心のアイコンの色が、「フレームつき」を選ぶとフレームと中心のアイコンの間の色が、「サブカラー」で設定した色になります。

ホバー時のアニメーション

「ホバー時アニメーション」ではカーソルを置いた時のアイコンのアニメーションを設定します。アニメーションを付ける場合は、ドロップダウンから好きなアニメーションを選択しましょう。

サイズ

「サイズ」ではアイコンの大きさを設定します。

パディング

「パディング」は、中心のアイコンとフレームのスペースを調節することができます。

ローテーション

「ローテーション」ではアイコンの角度を調節します。

ボーダー幅

「ボーダー幅」は、「フレーム付き」を選んだ場合に表示され、アイコンのボーダーの幅を調節できます。

ボーダー丸み

「ボーダー丸み」は、「重ねる」と「フレーム付き」の両方で表示され、アイコンの外枠の丸みを調節できます。「形状」で「円」を選んでも「四角」を選んでも、四角くしたり、丸くすることができます。

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

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

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

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

・テンプレートの使い方

 

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

0コメント

コメントを提出

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

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

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

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

Elementorの使い方を"無料"で学びませんか?