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

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

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

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

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

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

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

アイコン

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

リンク

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

新しいウィンドウで開く

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

Nofollowを追加

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

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

形状

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

配置

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

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

スタイルのアイコン設定

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

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

サイズ

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

パディング

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

スペース

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

ボーダータイプ

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

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

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

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

ボーダー丸み

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

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

ボーダー色

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

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

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

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

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

Elementorの使い方を学びませんか?

Elementorの各ウィジェットの使い方からページの作り方まで網羅的にカバーしたコースが無料で受講できます。(通常¥980)

0コメント

コメントを提出

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

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

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementorの使い方

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

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

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