記号・見出し・説明をまとめ、サービスの特徴を短く伝えられます。
このページでできること
マーク付きで特徴を紹介する
マーク付きで特徴を紹介する
スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。
① 「アイコンボックス」を追加する
- 編集したいページを「Elementorで編集」で開きます。
- 左上の「＋」（要素を追加）を押し、「アイコンボックス」で検索します。
- 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
② マークと説明を設定する
赤い番号は手順の番号に対応しています。
- アイコンの枠から「アイコンライブラリー」を開き、内容に合う記号を選びます。
- 「タイトル」に特徴、「説明」に補足を入力します。
- 「表示」はまず「デフォルト」を選び、必要ならフレームなどを付けます。
- 移動先があるときだけ「リンク」にURLを入れます。
ここを確認：アイコンだけでなく文字でも意味が伝わる。
③ 見た目と表示を確認する
赤い番号は手順の番号に対応しています。
- 「スタイル」→「ボックス」でアイコンの位置を選びます。
- 「アイコン間隔」と「コンテンツスペース」で文字との距離を整えます。
- 「アイコン」と「コンテンツ」の設定で色や文字の大きさを調整します。
入力・使い方の例
チェックマーク ＋「初めてでも安心」＋「担当者が操作をサポートします。」
④ スマホで確認して保存する
上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。
完了チェック
- アイコンだけでなく文字でも意味が伝わる。
- 見出し・本文・アイコンの間隔が揃っている。
うまくいかないとき
欲しいアイコンが見つからない
phone、check、envelopeなど英語でも検索します。
画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。