【第8章】サービスページ～ボディ～
ボディページは、フェイシャルページのデザインをベースに作成していきます。Elementorは、同じドメイン上であれば固定ページに作ったデザイン(ウィジェット)をコピー＆ペーストで他の固定ページに貼り付けることが可能です。この機能を使ってボディページにフェイシャルページのデザインを上から順にコピーして貼り付け、テキストや画像などを変更してページを完成させます。このやり方を習得できれば、サイトの作成時間を大幅に短縮することができます。
・各種ウィジェットの設定方法は今までと同じなので、もしわからなければ、過去の章に添付されている画像をご覧ください。
・まずはダッシュボードの左サイドバーから固定ページ一覧に入ります。入ったらGoogleのタブバー(デスクトップの一番上の今開いているページが出ているところ)を見てください。今開いているページ(固定ページ < LILAS公式ホームページーWordPress)のタブを右クリックしてコンテキストメニューから『タブを複製』を選択しましょう。すると右側にもう一つ同じページのタブが複製できます。
・複製したタブは一旦置いておいて、最初に開いていたページのタブ(左側のタブ)をクリックし、固定ページ一覧から『ボディ』の固定ページを選択します。『ボディ』の設定ページの上部にある『Elementorで編集』をクリックして固定ページの編集画面に入ります。
・編集画面に入ったら、左パネルの『⚙️(歯車マーク)』の設定ボタンをクリックしましょう。『固定ページレイアウト』を『Elementor Full Width』にしましょう。設定できたら『更新』しておきましょう。動画内では頻繁にクリックしていませんが、操作に慣れないうちは定期的にクリックして編集内容を更新しておくことを推奨します。
・ここまでできたら次は、先程複製したタブ(右側のタブ)をクリックします。こちらは、固定ページ一覧からフェイシャルの固定ページを開きます。固定ページ一覧でフェイシャルのタイトルにカーソルをもっていくと、下に『編集』『クイック編集』『ゴミ箱へ移動』『表示』『Elementorで編集』という文字が出てくるので、その中から『Elementorで編集』をクリックしましょう。フェイシャルの固定ページに入ることができます。そのままフェイシャルのページを開いて作業していきます。
TOP画像の設定
・フェイシャルのページのTOPが入ったセクションをピンクタブを右クリックしてコピーします。コピーできたら、タブバーの左タブで開いている『ボディページ』に戻ります。『ウィジェットをここにドラッグ』の文字が入った枠線内で右クリックして貼り付けを選択すると、フェイシャルページのTOPのデザインがペーストされます。コピー＆ペーストしたセクションは再度ボディページで設定し直す必要はないので、『フェイシャル』と入った『見出し』を『ボディ』にタイトルを変更するだけでTOPは完成です。
コンテンツエリア～ボディ～
・フェイシャルページからTOPの下にあるスペーサーが入ったセクションをコピーしてきてボディページのTOPの下に貼り付けます。貼り付ける時は先程のように『ウィジェットをここにドラッグ』の文字が入った枠線内で右クリックして貼り付けを選択しましょう。
・フェイシャルページから『フェイシャルエステ』の見出しが入ったコンテンツエリア①のセクションをコピーしてボディページに貼り付けます。まずは、見出しをクリックして選択し、『コンテンツ』を開いてタイトルを『フェイシャルエステ』から『ボディケア』に変更します。
・『天然由来のオーガニック～・・・』の文章が入ったテキストエディターをクリックして選択します。『コンテンツ』からテキストエディターに入っている文章を消して以下の文章に入れ替えます。
天然オイルの香りに包まれながら、リンパの流れや筋肉のこわばりをやさしく解きほぐす、オールハンドのボディトリートメント。体の巡りを整え、老廃物の排出を促すことで、むくみや冷え、慢性的な疲れをスッキリとケアします。完全個室のプライベート空間で、周囲を気にせず自分だけの癒し時間を。心と身体のバランスを整え、内側からすっきりとした軽さと温かさを感じていただける施術です。ナチュラル思考の方や、忙しい毎日の中で深いリラクゼーションを求める方におすすめです。
・画像ウィジェットをクリックして、画像を変更します。『コンテンツ』から『画像の選択』をクリックしてメディアライブラリを開き、使用したい画像をアップロードして選択しましょう。
コンテンツエリア～サービスメニュー～
・フェイシャルページから『メニュー』の見出しが入ったセクションをコピーしてボディページに貼り付けます。
・次に、『オーガニック肌活フェイシャル』の説明が入ったセクションをコピーしてボディページに貼り付けます。貼り付けられたら以下のように内容を変更していきます。
【見出し】
『オーガニック肌活フェイシャル』→『体質改善デトックスボディ』
【テキストエディター】
『天然由来のオーガニック～・・・』
→巡りを整え、体内にたまった老廃物の排出を促す全身トリートメント。リンパに沿ったオールハンドの施術で、むくみ・冷え・疲労感にしっかりアプローチします。オーガニックオイルの香りに包まれながら、心と身体の深い浄化を体感してください。
・見出しとテキストエディターが編集できたら、右カラムの画像も変更します。
・フェイシャルページから『オーガニック肌活フェイシャル』のセクションの下にあるスペーサーが入ったセクションをコピーしてボディページに貼り付けます。
・フェイシャルページから『リフトアップ筋膜フェイシャル』のセクションをコピーしてボディページに貼り付けます。貼り付けたら、『見出し』『テキストエディター』、左カラムの『画像』をそれぞれ変更していきます。『見出し』と『テキストエディター』の変更内容は以下の通りです。
【見出し】
『リフトアップ筋膜フェイシャル』→『深眠アロマリリース』
【テキストエディター】
『表情筋や筋膜にアプローチ～・・・』
→心地よい圧とリズムで自律神経を整える、癒し特化のアロマボディケア。ストレスや不眠、心身の緊張が気になる方におすすめです。完全個室の静かな空間で、深い眠りのようなリラクゼーションを。ナチュラル思考の方にも好評のメニューです。
・フェイシャルページから『リフトアップ筋膜フェイシャル』のセクションの下にあるスペーサーが入ったセクションをコピーしてボディページに貼り付けます。またフェイシャルページに戻って背景色が設定されたセクションをコピーしてボディページに貼り付けます。
※セクションのコピー＆ペーストは1つずつしかできないので注意！１つセクションをコピー＆ペーストしたらフェイシャルページに戻り、次のセクションをコピーしてボディページに貼り付けるという作業を繰り返す必要があります。この作業を少ない回数で行うには、デザインする時にできるだけ同じセクション内にウィジェットをまとめるのが良いです。デザイン上、同じセクション内にまとめるのが難しい事も多々あるので無理のない範囲で大丈夫です。
コンテンツエリア～料金～
・フェイシャルページに戻り、『料金』の見出しが入ったセクションとその下の『オーガニック肌活フェイシャル』の料金が入ったセクションをそれぞれ順番にコピー、そしてボディページに貼り付けをしましょう。
・『オーガニック肌活フェイシャル(60分)』と『￥6,000』の見出しを以下のように変更します。
『オーガニック肌活フェイシャル(60分)』
→体質改善デトックスボディ (60分)
『￥6,000』
→￥9,000
・フェイシャルページから『オーガニック肌活フェイシャル(60分)』のセクションの下にあるスペーサーが入ったセクションと『リフトアップ筋膜フェイシャル (60分)』の料金が入ったセクションをそれぞれ１つずつ順番にコピー、そしてボディページに貼り付けをしましょう。
『リフトアップ筋膜フェイシャル (60分)』
→深眠アロマリリース (60分)
『￥8,000』
→￥10,000
・フェイシャルページから『リフトアップ筋膜フェイシャル (60分)』のセクションの下にある背景色が入ったセクションとその下のスペーサーが入ったセクションをそれぞれコピーしてボディページに貼り付けます。
コンテンツエリア～よくあるご質問～
・『よくあるご質問』の見出しが入ったセクションと『切り替えウィジェット』が入ったセクションをそれぞれフェイシャルページからボディページにコピー＆ペーストします。
・『切り替えウィジェット』をクリックして選択し、『コンテンツ』から内容を『変更』しましょう。変更内容は以下の通りです。
・切り替え 1
『タイトル』→どんな服装で行けばいいですか？
『コンテンツ』→特別な服装のご用意は必要ありません。施術前に専用のガウンへお着替えいただきますので、普段通りの服装でお気軽にお越しください。
・切り替え 2
『タイトル』→ボディエステは痛みがありますか？
『コンテンツ』→当サロンの施術はお客様の体調やお好みに合わせて圧の強さを調整いたしますのでご安心ください。力加減のご希望があれば、遠慮なくお申しつけください。
・切り替え 3
『タイトル』→どれくらいの頻度で通えばいいですか？
『コンテンツ』→体質改善やむくみケアなどを目的とする場合は、最初の1〜2ヶ月は週1回のペースが理想的です。その後は月2回〜月1回のメンテナンスをおすすめしています。
・フェイシャルページから一番下にあるスペーサーが入ったセクションをコピーしてボディページに貼り付けたらデスクトップ版のデザインは終了です。
左パネルの『更新』をクリックしてデザインを保存しましょう。『更新』できたら、左パネルの『<』のタブをクリックしてパネルを非表示にし、デザインをフルスクリーンで確認しましょう。別のページからデザインをコピーして貼り付けたまま内容の変更ができていなかったというミスが起こりやすいので要確認です。
レスポンシブ設定～タブレット～
・パネルの一番下にアイコンが５つ並んでいる黒いバーがあるので、その中から左から4番目の『レスポンシブモード』というボタンをクリックしましょう。すると画面の一番上に黒いバーが表示されます。『デスクトップ』『タブレット』『スマートフォン』のアイコンがあるので真ん中の『タブレット』のアイコンをクリックしてタブレット版の編集画面に移ります。
・タブレット版の編集と言っても、今までのような設定やデザインの変更は必要ありません。レスポンシブ設定の内容もフェイシャルページから引き継がれているので、デザインのバランスや内容の修正点がないか再確認くらいで大丈夫です。
レスポンシブ設定～スマートフォン～
・画面上の黒いバーから『スマートフォン』のアイコンをクリックしましょう。画面が縦長になります。スマホ版もタブレット版と同じく、設定変更は必要ありません。
・『更新』ボタンがピンクではなく黒になっていることを確認し、パネルの左上にある『ハンバーガーメニュー(横棒が縦に3つ並んでいるアイコン)』をクリックしてその中から『終了』をクリックします。Elementorの編集画面が終了し、固定ページの編集画面が出てきます。一番左上の『サイトアイコン』をクリックすると、『固定ページ一覧』の画面に戻ることができます。タブバーの右のタブ(フェイシャルページを開いているタブ)は削除してください。