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

アイコンボックスウィジェットは、アイコンウィジェット・見出しウィジェット・テキストエディターウィジェットが三位一体となったハイブリッド型ウィジェットです。
この記事では、アイコンボックスウィジェットの使い方を説明していきます。

この記事は『Elementorの使い方』のコースを元に作っています。
動画でみたい方は是非このコースをチェックしてみてください。
TOFUラボに参加することによって無料で見ることもできます。

アイコンボックスウィジェットの挿入

アイコンボックスウィジェットをカラムに挿入

アイコンボックスウィジェットをドラッグ&ドロップでカラムに挿入します。

アイコンボックスウィジェット挿入後の表示画面

アイコンボックスウィジェットを挿入すると、この様な表示画面になります。

『コンテンツ』の編集

アイコンボックス・コンテンツの説明

コンテンツでできることを説明していきます。

アイコンボックス

コンテンツのアイコンボックスの説明

アイコン

コンテンツのアイコンの説明

アイコンでは、アイコンの選択が可能です。
アイコンの変更の仕方については『基本ウィジェット・アイコン』の記事の
アイコンライブラリー・SVGのアップロードにて詳しく説明しています。

表示 / 形状

コンテンツの表示と形状の説明

表示と形状では、アイコンを囲む図形などを追加できます。
詳しくは、『基本ウィジェット・アイコン』の記事のアイコンの表示と形状で詳しく紹介していますのでそちらを参考にしてください。

タイトル ・説明

コンテンツのタイトルと説明(テキスト)について

タイトル(見出し)と説明(テキスト)の文章を変更することができます。

リンク / カスタム属性

コンテンツのリンクとカスタム属性の説明

詳しくは『基本ウィジェット・アイコン』の記事のリンクの設定と、カスタム属性の説明をご覧ください。

アイコンの位置

コンテンツのアイコンの位置について

アイコンの位置をカラム内の

  • 中央

に配置することができます。
さらに詳しい説明は『画像ボックスウィジェットの説明』の記事のアイコンの位置で紹介しています。

タイトルHTMLタグ

コンテンツのタイトルHTMLタグの設定

基本的にはどのタグを使ってもいいです。
ですがスタイルを他のタグで変えていたりする場合、もしかしたらデフォルトのH3タグから別のタグに変更した時に、表示が変わったりすることもありますので気をつけてください。

コンテンツの編集の表示 / 形状〜タイトルHTMLタグの編集の仕方は、
画像ボックスウィジェットの説明』の記事のコンテンツの編集の編集の表示 / 形状〜タイトルHTMLタグの編集の仕方と同じです。

『スタイル』の編集

アイコンボックス・スタイルの編集

スタイルでできることを説明します。

アイコン

スタイルのアイコンの編集

メインカラー / サブカラー

スタイルのメインカラーとサブカラーの説明

メインカラーでアイコンを囲むものの色、サブカラーでアイコンの色(アイコンの表示で囲むを選択した場合は枠線もアイコンの色と同様)を変えることができます。


メインカラー・サブカラーの更に詳しい説明は『基本ウィジェット・アイコン』記事にて、またマウスオーバー時の色の設定、説明についてもこちらの記事を参考にしてください。
また、グローバルカラーズについての詳しい説明は『Global ColorsとGlobal Fontsの使い方』の記事にて紹介しています。

間隔

スタイルの間隔の説明

間隔では、アイコンとタイトル(見出し)の間の間隔が調整できます。
詳しくは『画像ボックスウィジェット』の記事にて紹介しています。

サイズ

スタイルのアイコンのサイズ変更の仕方

サイズでは、アイコン全体のサイズが変更できます。
カーソルを横にスライドすることで大小サイズを調節することができます。

パディング

スタイルのパディングの説明

パディングでは、カーソルを横にスライドでアイコンと外枠の間のスペースを変更することができます。

※この時に、アイコンの大きさは変更しません。

回転

スタイルの回転の説明

回転では、カーソルを横にスライドでアイコンを360度回転させることが可能です。

枠線の丸み

アイコンボックス・スタイル/枠線の丸みについて

枠線の丸みでは、上下左右の値を変えることで枠線の角を丸くすることができます。
こちらはアイコンの形状で四角を選択した時のみ有効です。

また、こちらでは紹介をしていませんが、アイコンの表示で『フレーム付き』を選択した場合、『枠線の幅』も変更が可能です。

サイズ・パディング・回転・枠線の丸み・枠線の幅については、
基本ウィジェット・アイコン』の記事で更に詳しく説明していますのでそちらを参考にしてください。

コンテンツ

こちらのスタイルタブのコンテンツに関しましては、
画像ボックスウィジェット』のスタイルタブ・コンテンンツの内容と全く同じなのでそちらを参考にしてください。


Elementorの基本ウィジェットのアイコンウィジェット・見出しウィジェット・テキストエディターウィジェットで、アイコンボックスウィジェットと同じことはできますが、少々面倒になります。
上記の3つ要素が合わさった『アイコンボックスウィジェット』は、ウェブ制作において良く使われるものですので、知っておいて損はないウィジェットでははないでしょうか。
より良いウェブ制作にぜひ活用してみてください!

目次

コメントを残す

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

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。