/elementor-basics
Elementorエディタ画面の構成
1
左パネル
ウィジェット一覧・設定
ウィジェット一覧・設定
2
中央エリア
リアルタイムプレビュー
リアルタイムプレビュー
3
下部バー
公開・設定・デバイス切替
公開・設定・デバイス切替
各パネルの役割
1
左パネル（コントロール）
- ウィジェット検索・選択
- 選択要素の設定変更
- スタイル・詳細設定
2
中央エリア（プレビュー）
- 実際のページ表示
- ドラッグ&ドロップ操作
- 要素の直接編集
3
下部バー（アクション）
- 保存・下書き・公開
- デバイス表示切替
- 履歴・設定
🏗️ 構造の基本：セクション → カラム → ウィジェット
セクション
ページの大きな区切り（ヘッダー、コンテンツ、フッター等）
カラム
セクション内の横並び（1列、2列、3列等）
実例：トップページのヒーローセクション
セクション（背景: グラデーション）
カラム1（左側・60%幅）
カラム2（右側・40%幅）
🎯 実践: 最初のセクションを作ろう
💡 ゴール: 見出しと画像を並べたシンプルなセクションを作成します
1
新しいページを作成
固定ページ → 新規追加 → 「Elementorで編集」をクリック
2
セクションを追加
「+」ボタン（中央の青いボタン）→ 構造を選択（2カラム：50%-50%）
✅ ポイント: セクションの背景色も同時に設定できます
3
左カラムに見出しを配置
左パネルで「見出し」を検索 → 左カラムにドラッグ&ドロップ
- テキストをダブルクリックで直接編集可能
- 左パネルでスタイル・サイズも変更できる
4
右カラムに画像を配置
「画像」ウィジェットを右カラムにドラッグ → 「画像を選択」で画像をアップロード
⚠️ 注意: 画像サイズは1200px以下に最適化しておきましょう
5
スタイルを調整
セクションをクリック → 左パネルで背景色・余白を設定
6
保存と公開
左下「更新」ボタン（緑）→ 「ページを表示」で確認
🎉 完成! 最初のElementorページが作れました！
📹 基本操作の実演動画
📱 レスポンシブ編集（PC/タブレット/スマホ）
Elementorでは、デバイスごとに表示を最適化できます。特にスマホ対応は必須です！
デバイス切替の方法
エディタ下部のアイコンでデバイス表示を切り替え
デスクトップ
1024px以上
メイン編集はここで
タブレット
768px〜1023px
必要に応じて調整
モバイル
767px以下
必ず確認・調整
📋 スマホ対応チェックリスト
✓ フォントサイズ
見出し: 24px以下
本文: 14-16px
✓ 余白調整
上下余白を小さく
（PCの50-70%程度）
✓ カラム崩し
2列以上は1列に
自動で崩れるか確認
✓ 画像サイズ
横幅100%に設定
縦長すぎないか確認
✓ ボタンサイズ
タップしやすいサイズ
（最小44×44px）
✓ テキスト幅
1行の文字数
30-40字以内が理想
🧩 よく使うウィジェット TOP 10
Q. ウィジェットが配置できません
まずセクションを追加してください。ウィジェットは必ずカラム内に配置する必要があります。
Q. スマホで見ると崩れています
エディタ下部のスマホアイコンで表示を切り替え、カラム幅・フォントサイズ・余白を調整してください。
Q. 保存ボタンが見つかりません
左下の「更新」（緑ボタン）が保存ボタンです。変更後は必ずクリックしてください。