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

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

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

Elementorのアイコンボックスウィジェットとは?

Elementor アイコンボックスウィジェット

Elementorのアイコンウィジェットでは、アイコンとその下に見出し・説明文をつけることができます。

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

コンテンツのアイコンボックス設定

Elementor Pro アイコンボックス コンテンツ アイコンボックス

まずは、「コンテンツ」にある「アイコンボックス」の設定をしていきましょう。

アイコン

Elementorに用意されているアイコンを使いたいのであれば、「Icon Library」からアイコンを選択します。SVG形式ファイルを持っていて、それを使用したいのであれば、「Upload SVG」からアイコンをアップロードします。。

表示

「デフォルト」、「重ねる」、「フレームつき」の3つから選択できます。

形状

「表示」で「重ねる」か「フレームつき」を選択した場合に、この項目が表示されます。アイコンの形を「円」か「四角」から選択します。

タイトル・説明

上にタイトル、下に説明文を入力します。

リンク

Elementor Pro アイコンボックス コンテンツ アイコンボックス リンク

アイコンとタイトルにリンクを追加したいのであれば、この欄にリンクを入力します。

新しいウィンドウで開く

歯車アイコンの「リンク設定」をクリックすると、「新規ウィンドウで開く」と「Nofollowを追加」が表示されます。「新規ウィンドウで開く」にチェックを入れると、入力したリンク先のページが新規ウィンドウで開かれます。

Nofollowを追加

この項目にチェックを入れれば、リンクがクローラーに追跡されなくなります。

アイコンの位置

テキストの配置を「左」、「中央」、「右」から選びます。

タイトル HTML タグ

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • div
  • span
  • p

タイトルのHタグを設定します。上記の9つ用意されているので、記事の構成などを考えて、適切なものを選択しましょう。

スタイルのアイコン設定

Elementor Pro アイコンボックス スタイル アイコン 1

「普通」と「ホバー」というのがありますが、「普通」というのは通常時のアイコンウィジェットで、「ホバー」というのはマウスカーソルを置いた時のアイコンウィジェットのことです。ほとんど設定項目が同じですが、「ホバー」の方にだけ、「ホバー時のアニメーション」があります。

メインカラー

アイコンの色を設定します。「デフォルト」だと中心のアイコン、「重ねる」だと中心のアイコンの外、「フレームつき」だと中心のアイコンと外枠がメインカラーになります。

サブカラー

「アイコン」の「表示」で「重ねる」か「フレームつき」を選択した場合に表示されます。「重ねる」の場合は中心のアイコンの色、「フレームつき」だと、中心のアイコンと外枠の空いたのスペースの色になります。

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

「ホバー」の方で設定できる項目です。

スペース

アイコンとタイトル・説明のスペースを調節します。

サイズ

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

パディング

「アイコン」の「表示」で「重ねる」か「フレームつき」を選んだ場合に表示されます。中心のアイコンと外枠とのスペースを調整します。

ローテーション

アイコンを回転させることができます。

ボーダー丸み

「アイコン」の「表示」で「重ねる」か「フレームつき」を選んだ場合に表示され、ボーダーの丸みを調節します。

スタイルのコンテンツ設定

Elementor Pro アイコンボックス スタイル コンテンツ

配置

タイトルと説明文の配置を

列の整列

「アイコンの位置」で「右」か「左」を選択している場合、縦の配置を設定できます。

スペース

タイトルと説明文のスペースを調節します。

タイトルの色

タイトルの色を設定します。

タイトルの書体

Elementor Pro コールトゥーアクション 書体

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

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

説明の色

タイトル同様、説明文の色を設定します。

説明の書体

ここもタイトルと同じように、書体を設定します。

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

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

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

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

・テンプレートの使い方

 

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

0コメント

コメントを提出

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

Elementorの使い方

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

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

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

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

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