案内用のHTMLや、外部サービスから提供された埋め込みコードを配置できます。
このページでできること
HTMLコードを埋め込む
HTMLコードを埋め込む
スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。
① 「HTML」を追加する
- 編集したいページを「Elementorで編集」で開きます。
- 左上の「＋」（要素を追加）を押し、「HTML」で検索します。
- 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
ログイン情報やAPIキーをHTMLへ入れないでください。ページのソースから閲覧できる場合があります。
② HTMLコードを入力する
赤い番号は手順の番号に対応しています。
- 「HTML コード」の入力欄をクリックします。
- 下の入力例など、表示したいHTMLを貼り付けます。
- 右側の表示を確認し、タグの閉じ忘れや不要な文字がないか見直します。
- 外部サービスの埋め込みは、提供元の案内に従ってコードを貼り付け、プレビューでも表示を確認します。
ここを確認：HTMLのタグではなく、意図した文章や部品が表示される。
③ 見た目と表示を確認する
- このウィジェットには通常の「スタイル」タブがありません。
- 前後の余白は「高度な設定」や親コンテナで調整します。
- 文字やリンクだけなら、テキストエディターやボタンの方が編集しやすい場合があります。
入力・使い方の例
<p>営業時間は <strong>9:00〜18:00</strong> です。</p>④ スマホで確認して保存する
上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。
完了チェック
- HTMLのタグではなく、意図した文章や部品が表示される。
- 外部の埋め込みは公開前のプレビューでも動く。
うまくいかないとき
コードが表示されない・崩れる
貼り付けたコードの不足、タグの閉じ忘れ、埋め込み元の条件を確認します。管理担当者へコードの確認を依頼してください。
画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。