Elementor：練習用ページを1枚作ってみよう

1．練習用の下書きを作る

1. WordPressの「固定ページ」→「固定ページを追加」を開きます。
2. タイトルを「練習用・サービス案内」にし、「Elementorで編集」を押します。
3. コンテナを1つ追加し、方向を縦、部品の間隔を20px、内側の余白を24px程度にします。

ページの作成・編集 ／ コンテナの設定

2．見出しと文章を入れる

123

画像を大きく見る（赤い番号付き）

123

1. ①「要素を追加」から「基本」の見出しをコンテナ内へドラッグし、「サービスのご案内」と入力します。
2. 同じコンテナ内へテキストエディターを追加します。②の入力欄に「ホームページの更新や、日々のお困りごとをお手伝いします。」と入力します。
3. ③「構造」で見出し→文章の順になっていることを確認します。撮影例では操作練習で作った複数のコンテナが表示されています。

3．画像とボタンを入れる

1. 「画像」を文章の下へドラッグします。左の画像枠を押し、使ってよい練習用画像をメディアライブラリから選びます。画像の内容を説明する代替テキストも設定します。
2. 「ボタン」を画像の下へドラッグし、テキストを「詳しく見る」にします。
3. リンク欄へ、自分のサイトの実在するページURLを入れます。「#」のままにしないようにします。

画像の詳しい操作 ／ ボタンの詳しい操作

4．スマホ表示を整える

1. 上部のスマートフォン形アイコンを押します。
2. 見出しを24px程度から調整し、画像がはみ出さないこと、ボタンが押しやすいことを確認します。
3. コンテナの左右パディングを16px程度から調整します。端末マークを確認してから変更します。
4. パソコン表示へ戻り、そちらの見た目も確認します。

スマホ表示の詳しい調整

5．下書き保存してプレビューする

1. 右上の保存メニューの矢印から「下書き保存」を選びます。練習用ページは公開しません。
2. 「変更をプレビュー」でページを開き、文章・画像・ボタンを確認します。
3. ボタンを押して意図したページへ移動するか確かめ、編集画面へ戻ります。

次は完成したまとまりをテンプレートとして保存してみましょう。