ここでは、以下のようなサンプルページを作成してみます。
WordPressで 固定ページを新規作成します。
①固定ページ＞固定ページ一覧 を開き、「固定ページを追加」をクリックします。
②「タイトルを追加」にタイトルを入力後、「下書き保存」をクリックします。タイトルは「サンプルページ」など適当なもので大丈夫です。
③「Elementorで編集」をクリックします。
④ Elementorの編集画面が開けたら、歯車マークをクリックします。
⑤固定ページレイアウト：デフォルトを「Elementor Canvas」に変更します。
⑥右上の「公開」をクリックして保存します。
ここからは、Elementorでの編集を行っていきます。
①右端の「＋」をクリックして、Flex Box を選択します。
②Flex Box の左側が小さい2枠の構成をクリックします。
③以下のような Flex Box のコンテナにします。
④コンテナの幅を編集します。左のコンテナを30％、右のコンテナを70％にします。
⑤左のコンテナに画像を追加します。
⑥画像を準備します。「FLAT ICON DSINGN」さん（http://flat-icon-design.com ）からコーヒーカップの画像を使わせていただきます。
⑦サイトからサイズ：128×128、ファイル形式：PNG などでダウンロードします。
8. Choose Image の画像部分をクリックし、ダウンロードした画像を挿入します。
※画像サイズは、ダウンロードした後でも、OS標準搭載の機能で変更できます。
⑨続いて、右のコンテナを編集します。
・レイアウト > コンテナ > アイテム方向で「↓」を選択します。
⑩コンテナ内の「＋」ボタンをクリックして、コンテナを縦に２つ配置します。
⑪ 縦に２つ配置したコンテナの幅をどちらも70%に設定します。
⑫縦に配置した２つのうち、上のコンテナに「見出し」を設置します。
⑬「見出し」を以下のように調整します。
・コンテンツ > タイトル：「HogeHoge Cafe」
・コンテンツ > HTMLタグ：H1
・スタイル > 見出し > フォント：Verdana
・スタイル > 見出し > タイポグラフィ>サイズ：32px
・スタイル > 見出し > 太さ:600(Semi Bold)
・高度な設定 > レイアウト > 幅：カスタム、カスタム幅：80％
・スタイル > 見出し > 配置：中央
⑭「見出し」の設置されたコンテナを選択し、レイアウト>アイテム>方向 を 「→」にします。
⑮「見出し」の「HogeHoge Cafe」の右横に「画像」を追加します
⑯ 画像を準備します。「時短だ」さん（https://jitanda.com）からコーヒー豆のフリー画像を使わせていただきました
⑰サイトから横：100(最小サイズ)、ファイル形式：PNG などでダウンロードします。
⑱ Choose Image でダウンロードした「コーヒー豆」の画像を挿入します。
⑲画像が大きいので小さくします。スタイル > 画像 > 幅：50％ にします。
⑳「見出し」のコンテナを選択し、以下で設定します。
㉑「見出し」の下のコンテナを編集します。テキストエディターを 追加します
㉒コンテンツ>テキストエディター で入力後、位置を微調整します。スタイル > テキストエディター > 配置：中
㉓ここまでで以下のようなタイトルセクションになります。右上の「公開」をクリックして保存することも忘れないように注意してください。
①コンテナ上部中央のピンク色のタブの「＋」をクリックしてコンテナを追加します。
②Flex Box を選択し、縦３列のstructureを選択します。
③左右のコンテナの幅をそれぞれ10％、中央のコンテナは80％にします。
④中央のコンテナを選択して、レイアウト > コンテナ > アイテム > 方向 で「↓」にします。
⑤中央のコンテナの中にコンテナを設置します。設置したコンテナを「複製」して、縦に２つコンテナが並ぶようにします。
⑥中央の上のコンテナに「タイトル」を設置して、以下のように設定します。
⑦「Info.」のタイトルのコンテナを選択して以下のように設定します。
⑧中央の下のコンテナの中にコンテナを挿入します。
⑨挿入したコンテナを以下のように設定します。
⑩テキストエディターを２つ追加します。コンテンツ>テキストエディター で内容を以下のように編集します。
スタイル > テキストエディター > 配置 でどちらも中央揃えにします。
⑪テキストを追加したコンテナを複製し、以下のように４つにします。
⑫それぞれのコンテナのテキストを以下のように書き換えます。
⑬右端のコンテナは、「営業時間」のテキストは削除し、代わりにコンテナを追加します。追加したコンテナのアイテムの方向を「→」にして、画像を２つドラッグ＆ドロップします。
⑭猫の画像を準備します。「ICOOON MONO」さん（https://icooon-mono.com）からフリー画像を使わせていただきました。
⑮サイズ：48px、ファイル形式：PNG でダウンロードして、35pxに縮小して使用します。
⑯猫の画像のコンテナを選択し、中央揃えにします。
⑰「猫、たまにいます」のテキストのレイアウトを以下のように調整をします。
・高度な調整 > マージン > 上：10
⑱左端のコンテナに「ボタン」を追加し、以下のように設定します。
⑲「ボタン」の設定でカーソルをかざすと色が変わるように設定します。
・スタイル > ボタン > 普通 > 文字色：#046BD2 / 色：#D1D5DB
・スタイル > ボタン > マウスオーバー > 文字色：#F7F7F7 / 色：#046BD2
⑳ここまでで以下のような「Info.」セクションになります。
①続いて、「Menu」セクションを作成します。先ほど作成した「Info.」セクションの「六点マーク」を右クリックして「複製」します
②セクションタイトルを「Menu」に書き換えます
③「営業時間」などの情報の横４つに並んだコンテナは削除し、以下のような構成にします。
④中央の下のコンテナを以下のように設定します。
・レイアウト > コンテナ > アイテム>方向 ：「↓」
・レイアウト > コンテナ > 幅：95%
高度な設定 > レイアウト > Align Self：中央
・スタイル > 枠線 > 枠線の種類：ダブル
⑤中央のコンテナの中にコンテナを「追加」、「複製」して、縦に２つコンテナが並ぶように配置します。
⑥上のコンテナにテキストエディターを追加して、以下のように設定します。
⑦中央の下のコンテナは、アイテム方向 を「→」にして、コンテナを追加します。
⑧追加したコンテナを以下のように設定します。
・レイアウト > コンテナ > アイテム>方向 ：「↓」
・レイアウト > コンテナ > 幅：25％
⑨「テキストエディター」と「画像」を設置します。
⑩テキストは「カフェラテ」にして、以下のように設定します。
⑪画像を準備します。「時短だ」さん（https://jitanda.com）からコーヒーとケーキのフリー画像を使わせていただきます。
⑫サイトから横：100(最小サイズ)、ファイル形式：PNG などでダウンロードします。
⑬ダウンロードした「コーヒー」の画像を挿入します。
⑭画像を小さくします。
・スタイル > 画像 > 幅：35％
⑮「カフェラテ」のテキストとコーヒー画像の位置が離れているので、近づけます。テキストを選択し、高度な選定 > レイアウト > マージン > 下：-25
⑯「Coffee」のテキストと「カフェラテ」の文字/画像も離れているので、「Coffee」のテキストのコンテナの位置を調整します。
⑯ここまでで以下のようになります。
⑱次にコンテナの横スクロール表示を設定します。
⑲カフェラテのコンテナを選択し、以下の設定をします。
⑳上記コンテナを５つ「複製」します。
㉑複製したカフェラテの６つのコンテナが入っている親コンテナ選択し、以下を設定します。
㉒横スクロールができるようなりますので、コーヒーのテキストと画像を書き換えます。
㉓コーヒーのメニューができました。
㉔ケーキのメニューも追加します。
㉕「Coffee」のテキストのコンテナとコーヒー画像が収められているコンテナをそれぞれ「複製」して以下のように配置します。
㉖コーヒーのメニューをケーキに書き換えます。
㉗以下のようになれば、Menuセクションはできあがりです。
㉘「公開」して、ページ全体を「固定ページを表示」で確認します。
㉙ページが上に詰まった感じがするため、ページ最上部に空のコンテナを追加します。
㉚「公開」して、確認します。
デスクトップPC以外のタブレット、スマートフォンでの表示を確認します。
①ページ上部のタブレットマークを選択します。
②「Info.」と「Menu」のセクションをタブレットでは、両サイドに余白は設けず、画面いっぱいに表示するようにします。コンテナを選択し、レイアウト > コンテナ > 幅 で変更します。
・両脇のコンテナは幅：10％→0％
・中央のコンテナは幅：80％→100％
※タブレットのマークがついているのでタブレットの画面のみ、レイアウトが調整されます。
③「HogeHoge Cafe」のタイトルの修正をします。
・スタイル > コンテナ > 幅：70%→85
④「HogeHoge Cafe」の下のテキストも同様に修正します。
・スタイル > コンテナ > 幅：70%→85％
⑤タブレットのレイアウトが以下のようになります。
⑥「Info.」セクションの各コンテナも以下の項目を使って調整します。
⑦続いてモバイル画面の設定を行います。画面上部でモバイルを選択します。
⑧「Info.」と「Menu」のコンテナの両脇のコンテナが縦に表示されて、上下に余計な空白のスペースができてしまうため、表示しないように設定します。モバイルの場合のみ非表示にするには、以下から設定します。
⑨モバイル画面のタイトルのセクションを編集します。
⑩「HogeHoge Cafe」のロゴを選択し、以下のように設定します。
⑪コーヒー豆の画像を選択し、以下のように設定します。
⑫テキストで以下に値が入っていたらを削除します。
⑬タイトルとテキストが入っているコンテナの下に、コンテナを追加し、Flexbox単体を選択します。
⑭そのコンテナにテキストをコピー＆ペーストします。
⑮ここまでで、以下のようにコンテナが３つに分かれている構成になります。
⑯タイトルセクション上部の６点マークをクリックして以下のように設定します。
⑰コーヒーカップのロゴの入ったコンテナの幅を30％にします。
⑱以下の設定を行います。
⑲上のテキストのコンテナを選択し、モバイルで非表示にします。
⑳下に追加したテキストのコンテナは逆の設定をします。
㉑以下のようになれはタイトルセクションは編集完了です。薄い表示になっている非表示部分は実サイトでは表示されません。
㉒「Info.」セクションの各コンテナは、タブレットと同様に以下の項目を使って各項目ごとに修正します。
※ボタンのサイズは、スタイル > ボタン > パディング で調整できます。
㉓「Menu」セクションは、モバイルでは以下のように表示されます。
㉔複数のコーヒー画像が収められているコンテナに以下の設定を行います。
㉕コーヒーの画像が横並びでスクロールできるようになるので、個別のコーヒー画像のコンテナの幅を60％にします。
左右のスペースが広いのでマージンで調整します。
㉖各画像を個別に設定してもいいですが、１個設定した後は、コンテナをコピーして、「スタイル貼り付け」で他のコンテナに書式のみ貼り付けることができます。
㉗ケーキも同様に設定し、以下のようになれば、Menuセクションも完成です。
㉘レスポンシブ対応含めて全体完成ですので、「公開」して確認します。
