Elementorのアイコンリストの使い方

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

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

Elementor アイコンリストの使い方

Elementorのアイコンリストウィジェットでは、アイコンとともに、ブレッドのようにテキストをリストアップすることができます。

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

コンテンツのアイコンリスト設定

Elementor アイコンリスト コンテンツ アイコンリストの設定

まずは、「コンテンツ」にある「アイコンリスト」の設定を確認していきましょう。

レイアウト

Elementor アイコンリストの使い方

「レイアウト」の項目では、アイコンリストの並び方を選択します。「デフォルト」だと縦にリストアップされます。

Elementor アイコンウィジェット インライン

「インライン」にすると、横並びになります。

テキスト

各リストアイテムを開くと、テキストやアイコンの変更、リンクを追加することができます。「テキスト」では、リストの文章を入力します。

アイコン

ここで、アイコンを設定します。カーソルを置くと、「Icon Library」と「Upload SVG」というボタンが表示されますが、Elementorに用意されているアイコンを使用したい場合は、「Icon Library」からアイコンを選択します。もし、自分でSVG形式のアイコンを持っているのであれば、「Upload SVG」から追加しましょう。

リンク

リストにリンクを追加したいのであれば、この欄に入力します。

新しいウィンドウで開く

リストをクリックした時に、「リンク」に追加したリンク先のページが新しいウィンドウで開かれます。

Nofollowを追加

ここにチェックを入れると、追加したリンクがクローラーに追跡されないようになります。

その他、書類のアイコンをクリックすると、リストアイテムを複製することができ、バツボタンで削除できます。リストアイテムを新規追加する場合は、「+ 項目を追加」ボタンをクリックします。

スタイルの一覧設定

ELementor アイコンリスト スタイル 一覧

スペースの間隔

各リストのスペースを調節します。

配置

アイコンリストの配置を「左」、「中央」、「右」から選択します。

区切り線

それぞれのリストを区切るための線を追加したいのであれば、この項目を「オン」に切り替えましょう。

スタイル

  • 直線
  • 二重線
  • 点線
  • 破線

ここからは、「区切り線」をオンに切り替えた場合に表示される項目になります。上記の4タイプがありますので、好きなものを選択しましょう。

太さ

ボーダーの太さを調節できます。

ボーダーの横幅を調節します。

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

スタイルのアイコン設定

Elementor アイコンリスト スタイル アイコン

ここからは、「スタイル」の「アイコン」の設定を確認していきましょう。

アイコンの色を設定します。

ホバー

マウスカーソルを置いた時のアイコンの色を設定します。

サイズ

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

配置

  • 中央

アイコンの位置を上記の3つから選択します。

スタイルのテキスト設定

Elementor アイコンリスト スタイル テキスト

文字色

テキストカラーが設定できます。

ホバー

マウスカーソルを置いた時の文字の色を設定します。

テキストインデント

アイコンとテキストのスペースを調節できます。

書体

テキストエディター 書体

  • フォント
  • サイズ
  • 太さ
  • 変換
  • スタイル
  • 装飾
  • 行の高さ
  • 字間

「書体」では、上記の項目を設定できます。

根本 耕輔

根本 耕輔

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

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

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

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

0コメント

コメントを提出

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

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

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

Elementorの使い方

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

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

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