Elementorの使い方

Elementorのソーシャルアイコンウィジェットの使い方

Elementor ソーシャルアイコンウィジェット

「ソーシャルアイコン」では、SNSのアイコンを表示することができます。

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

コンテンツのソーシャルアイコン設定

ソーシャルアイコンウィジェット コンテンツ設定

アイコン

SNSのアイコンを選択します。「Icon Library」をクリックすればElementorに用意されているアイコンが使用できますし、「Upload SVG」をクリックすればSVG形式のファイルをアップロードして、それをアイコンとして使用できます。例えば、Elementorのアイコンで「Facebook」のアイコンを選択すれば、自動的に「Facebook」の名前が反映されます。

リンク

アイコンのリンクを入力します。

新しいウィンドウで開く

リンクが新しいウィンドウで開かれます。

Nofollowを追加

チェックを入れると、リンクにNofollowを追加され、クローラーに追跡されなくなります。

「公式カラー」と「カスタム」の2種類あります。「カスタム」を選択したら、「メインカラー」と「サブカラー」が表示されます。メインカラーで外枠の色、サブカラーで内側の色が設定できます。

形状

アイコンの形を「丸み」、「四角」、「円」から選択します。

配置

アイコンの位置を設定できます。左・中央・右から選択できます。

新しいソーシャルアイコンを追加したい場合は、「+ 項目を追加」というボタンをクリックします。複製したい場合は、既存のソーシャルアイコンの書類アイコンをクリックします。バツボタンをクリックすると、削除することができます。

スタイルのアイコン設定

Elementor ソーシャルアイコン スタイル アイコン設定

「公式カラー」と「カスタム」があります。「コンテンツ」にある「色」の設定と使い方は同じです。

サイズ

アイコンの大きさを調節します。

パディング

外枠と内部のロゴとのスペースを調節します。

スペース

アイコン同士のスペースを調節します。

ボーダータイプ

  • なし
  • 直線
  • 2本線
  • 点線
  • 破線

ボーダーの種類を上記の6つから選択できます。

「ボーダータイプ」で「なし」以外を選んだ場合に、こちらでボーダーの幅を設定します。

同じく、ボーダーの色を設定します。

ボーダー丸み

外枠の丸みを調節できます。

Elementor ソーシャルアイコン スタイル アイコンマウスオーバー

ボーダー色

ホバー時のボーダーの色を設定します。

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

ホバー時のアイコンのアニメーションを選択します。

マウスオーバーやホバーというのは、アイコンにマウスカーソルを置いた時の動作のことです。この項目を設定して、実際にアイコンにマウスカーソルが置かれると、ボーダーの色やアイコンのアニメーションが動作します。

コメントを残す

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