【第9章】ご利用の流れページ作成
ページ設定
今回も『ボディページ』を作成した時と同じように、できるところはタブを複製し、別の固定ページからデザインをコピー＆ペーストして『ご利用の流れ』のページを作成していきます。
・ダッシュボードの左サイドバーから固定ページ一覧に入ります。入ったらGoogleのタブバー(デスクトップの一番上の今開いているページが出ているところ)を見てください。『ボディページ』を作成した時と同じようにタブを複製し、別の固定ページからデザインをコピー＆ペーストで『ご利用の流れ』のページを作成していきます。今開いているページ(固定ページ < LILAS公式ホームページーWordPress)のタブを右クリックしてコンテキストメニューから『タブを複製』を選択しましょう。すると右側にもう一つ同じページのタブが出現します。
・複製したページで、固定ページ一覧から『LILASについて』のタイトルにカーソルをもっていき、『Elementorで編集』をクリックしましょう。『LILASについて』の固定ページに入ることができます。
・最初に開いていたページのタブをクリックします。こちらのタブ(左側のタブ)は固定ページ一覧から『ご利用の流れ』の固定ページを選択します。今までと同様に『ご利用の流れ』の設定ページの上部にある『Elementorで編集』をクリックして固定ページの編集画面に入ります。
・編集画面に入ったら、左パネルの一番下の『⚙️(歯車マーク)』の設定ボタンをクリックして『固定ページレイアウト』を『Elementor Full Width』にしましょう。設定できたら『更新』ボタンをクリックしておきましょう。
※動画内では頻繁にクリックしていませんが、操作に慣れないうちは定期的にクリックして編集内容を更新しておくことを推奨します。
TOPの設定
・LILASについてのページからTOPのセクションをコピーしてご利用の流れのページ
に貼り付けます。貼り付けたら、セクションの背景を変更します。ピンクタブをクリックしてセクションを選択し、スタイルを開きます。『画像』の『画像の選択』から背景画像を変更します。
・背景が変えられたら見出しを変更します。『LILASについて』から『ご利用の流れ』に変更します。
・LILASについてのページからTOPの下にあるスペーサーが入ったセクションをコピーしてご利用の流れのページに貼り付けます。
ご利用の流れエリア
・ご利用の流れのページは、『01』『02』『03』『04』とセクションを分けて作成していきます。作成の流れとしては、『01セクション』のデザインを作ったらそれをベースにセクションを複製しながら作成します。
・まずは、01セクションを作成するので新しいセクションを追加します。カラムが２つに分かれているレイアウトを選択してください。セクションが入ったら、左カラムから編集していきます。まずは、左カラムに『画像ウィジェット』を入れます。『コンテンツ』を開いて『画像の選択』から画像を挿入しましょう。画像の『スタイル』設定は以下の通りです。
【スタイル】
配置：中央
幅：70
・次は右カラムを編集します。右カラムに『見出し』を入れ、スタイルを開いて以下のようにタイポグラフィの設定をしましょう。
※見出し設定内容はこちら↓
【スタイル】
配置：中央
【タイポグラフィ】
フォント：Noto Serif JP
サイズ：16
太さ：800 (Extra Bold)
Line Height：1.7
文字色：3da7b3
・スタイルの設定ができたら、コンテンツからタイトルに『01』と入れます。HTMLタグは『span』に設定してください。
・新しいセクションを追加してウィジェット一覧を開き、『01』の下にもう一つ『見出しウィジェット』を入れます。見出しウィジェットのスタイル設定は以下の通りです。
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：25
太さ：600 (Semi Bold)
Line Height：1.7
文字色：747474
・設定ができたらコンテンツを開き、タイトルに『ご予約』と入れましょう。
・見出しの下にテキストエディターを入れます。テキストエディターのスタイル設定は以下の通りです。
【スタイル】
配置：中央
『タイポグラフィ』
フォント：Noto Serif JP
サイズ：16
太さ：500 (Medium)
Line Height：2
段落間隔：6
文字色：747474
・スタイルが設定できたら、『高度な設定』から『マージン』を設定します。一番右の『🔗』をクリックして、リンクを解除してから『右：15 左：15』に設定しましょう。
・マージンの設定ができたらテキストエディターに以下の文章を入れます。
『LINEまたはお電話にて、ご希望の日時・メニューをご予約ください。』
・テキストエディターの下にスペーサー(スペース：30)を入れたら『01セクション』のデザインが完成です。
・今までと違って、ここで一旦レスポンシブ設定を行います。理由としては、『01セクション』のデザインを複製してページを構成していくので、先にしておいた方が後々の作業量を減らすことができるからです。
・左パネルの一番下のレスポンシブモードからタブレット版の編集画面に切り替えます。
・画面が切り替わったら左パネルの画像をクリックしたら、スタイルから以下の設定を行います。
【スタイル】
配置：中央
幅：100
高さ：280
Object Fit:：カバー
・設定ができたら、次は画面上の黒いバーから『スマートフォン』のアイコンをクリックしてスマートフォン版の編集をします。
・ピンクタブをクリックしてセクションを選択し、『高度な設定』を開きます。『レスポンシブ』をクリックして『カラムを逆にする(モバイル縦向き)』の項目を『はい』にします。
・カラムが上下逆になったら『01』をクリックして『スタイル』からタイポグラフィの設定を変更します。『サイズ：30』にします。
・下の『ご予約』の見出しもタイポグラフィの設定を変更します。『サイズ：22』にします。
・『ご予約』の見出しの下のテキストエディターはタイポグラフィから『サイズ：15』に変更します。
・テキストエディターの下のスペーサーは、『スペース：10』に値を変更します。
・下のカラムの画像設定を変更します。スタイルから『高さ：195』にします。
・デザインを確認し、問題なければ画面上の黒いバーのPCアイコンからデスクトップ版のデザイン編集画面に戻ります。
・デスクトップ版に戻ったら、新しいセクションを追加して『01セクション』の下にスペーサー(スペース：50)を入れます。
・次は、『01セクション』を複製してスペーサーの入ったセクションの下に移動させます。
移動できたら、左カラムの画像を変更と右カラムの見出しのタイトルとテキストエディター文章の編集を行い、『02セクション』の仕様にしていきます。右カラムの編集内容は以下の通りです。
【見出し】
『01』→02
『ご予約』→ご来店・カウンセリング
【テキストエディター】
『LINEまたは～・・・』→静かな完全個室で、お悩みやご希望を丁寧にヒアリング。体調や肌状態に合わせた最適な施術をご提案します。
・『02セクション』の上にあるスペーサーが入ったセクションを複製して『02セクション』の下に移動します。次に『02セクション』を複製してスペーサーの下に移動させます。
・複製したセクションを『03セクション』仕様に編集していきます。左カラムの画像を変更と右カラムの見出しのタイトルとテキストエディター文章の編集を行います。右カラムの編集内容は以下の通りです。
右カラムの編集内容は以下の通りです。
【見出し】
『02』→03
『ご来店・カウンセリング』→施術開始
【テキストエディター】
『静かな個室で～・・・』→ナチュラル素材やオーガニック製品を使用し、心地よく、やさしく施術。完全プライベート空間でゆったりとお過ごしください。
・『04セクション』を作成していきます。先程と同じように、スペーサーが入ったセクションの複製と移動、『03セクション』の複製と移動を行います。他と同じデザイン構成にできたら、『04セクション』仕様に編集していきます。
・左カラムの画像を変更と右カラムの見出しのタイトルとテキストエディター文章の編集を行います
右カラムの編集内容は以下の通りです。
【見出し】
『03』→04
『施術開始』→アフターカウンセリング
【テキストエディター】
『ナチュラル素材や～・・・』→施術後のお肌やお身体の変化をご確認いただきながら、日々のケアやおすすめメニューもご案内いたします。
・『04セクション』の上にあるスペーサーが入ったセクションを複製し、『04セクション』の下に移動させます。移動させたセクション内のスペーサーを『スペース：100』に設定しましょう。
・左パネルの『更新』をクリックしてデザインを保存しましょう。『更新』できたら、左パネルの『<』のタブをクリックしてパネルを非表示にし、デザインをフルスクリーンで確認しましょう。
レスポンシブ設定：タブレット
・修正箇所がないか確認できたら、タブレット版の編集画面に移ります。スペーサーのスペースの値を変更していきます。
01セクションの下→スペース：30
02セクションの下→スペース：30
03セクションの下→スペース：30
04セクションの下→スペース：80
レスポンシブ設定：スマートフォン
・タブレット版のスペーサーの調整ができたら、スマホ版もスペーサーの調整をします。
スマホ版は、『04セクション』下のスペーサーを『スペース：50』にしたらデザインが完了です。
・画面上の黒いバーからデスクトップ版の編集画面に戻ります。プレビューで最終確認をしましょう。確認が終わったら今開いているタブを消して、TOPページの編集画面に戻ります。『更新』ボタンがピンクではなく黒になっていることを確認し、パネルの左上にある『ハンバーガーメニュー(横棒が縦に3つ並んでいるアイコン)』をクリックしてその中から『終了』をクリックします。Elementorの編集画面が終了し、固定ページの編集画面が出てきます。一番左上の『サイトアイコン』をクリックすると、『固定ページ一覧』の画面に戻ることができます。
※タブバーの『LILASについて』を開いているタブは、消さずにそのまま置いておいてください。
