アイコンボックスのカスタマイズ | That's Elementor！エレメンターとは何か？

Elementorのウジェットの一つ「アイコンボックス」（下図の左）をカスタマイズして、下図の右側のような背景ブラックのアイコンボックスを作成してみました。その作成過程を明らかにして、如何に簡単にアイコンボックスができるかを体現してみて下さい。

これは見出しです

このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

これは見出しです

Step-1：初期設定

ウジェットとして「アイコンボックス」を、左側段組み内に初期設定したイメージです。

これは見出しです

Step-2：Iconboxの設定

先ず、初期設定の星印のアイコンをWordPressのアイコンに変更してみました。そのアイコンに円形のフレームをつけてみました。

・アイコン＝WordPress
・表示＝フレーム付き
・形状＝円

これは見出しです

Step-3：ボックスの設定

次に、段組の枠線を２本線で囲みボックスにしてみました。同時にブックスの角を丸くしてみました。

・カラムを編集：スタイル
・ボーダータイプ＝２本線
・ボーダーの丸み＝20

これは見出しです

Step-4：背景色を設定

段組の背景色を、一旦、白色から黄色に変更しました。これは、アイコンや見出し文字やテキスト文を白抜き文字にする前の暫定処理です。

・カラムを編集：スタイル
・背景
・背景タイプ＝クラッシク
・色＝黄色

これは見出しです

Step-5：文字色を白色に

ここで最後の文字色の変更です。同時にアイコンの色も白色に変更します。

・カラムを編集：スタイル
・書体
・見出し色＝白色
・文字色＝白色

これは見出しです

Step-6：背景色を黒色に

最後の処理です。背景色をブラックに変更して終了です。

・カラムを編集：スタイル
・背景
・背景タイプ＝クラシック
・色＝黒色