写真・見出し・説明をひとまとまりにして、サービスや商品の特徴を紹介できます。
このページでできること
画像・見出し・説明をまとめる
画像・見出し・説明をまとめる
スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。
① 「画像ボックス」を追加する
- 編集したいページを「Elementorで編集」で開きます。
- 左上の「＋」（要素を追加）を押し、「画像ボックス」で検索します。
- 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
② 写真・タイトル・説明を入れる
赤い番号は手順の番号に対応しています。
- 「画像の選択」を押し、使いたい写真を選択します。
- 「タイトル」にサービス名、「説明」に短い紹介文を入力します。
- 詳しいページへ移動させる場合は「リンク」にURLを入力します。
- 「タイトル HTML タグ」はページの見出し構成に合わせます。文字を大きくするためだけにH1へ変えないようにします。
ここを確認：写真とタイトルが紹介内容に合っている。
③ 見た目と表示を確認する
赤い番号は手順の番号に対応しています。
- 「スタイル」→「ボックス」で画像の位置と配置を選びます。
- 「画像間隔」と「コンテンツスペース」で余白を整えます。
- 「画像」「コンテンツ」を開き、画像の大きさや文字色を調整します。
入力・使い方の例
店舗写真 ＋「店内でゆっくり相談」＋「ご希望を伺いながらご案内します。」
④ スマホで確認して保存する
上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。
完了チェック
- 写真とタイトルが紹介内容に合っている。
- 設定したリンクが正しいページへ移動する。
うまくいかないとき
写真がぼやける
元画像の大きさと「画像の解像度」を確認します。小さい画像を大きく引き伸ばさないようにします。
画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。