当サイトのトップページ「Elementor-Top」は、LPイメージの縦長１カラムのLPもどきのページで、Elementorを使用したページ作成で実装しています。全体で５ページ相当のLP仕様で、そのトップのヘッダー部に５枚の静止画で作成されたスライドショーがあり、そのスライドショー直下にWordPressの３PRが設置されています。
そして、その続きとして、５ページ分相当のコンテンツが続いております。
５ページ分の各ページは、全て同じ作りで作成されています。
即ち、各コンテンツは、最初にページタイトルを表すカバー画像があり、その次にページの具体的なコンテンツを表すコンテンツ内容が１セットとなって、合計５ページ相当の縦長LP仕様で作成されています。
１）ヘッダー部のスライダー設定
ダッシュボードの外観～カスタマイズ～Lightningトップページスライドショーで、５枚の大型静止画によるスライドショーを作成しています。詳細は、トップページの最上段にある実際のスライドショーを参照して下さい。
２）カスタム３PRの設定
WordPressの良くあるキャッチコピーの一つに３PRという部品があります。
Lightningテーマにも標準で用意されていますが、今回は、その３PRに似たイメージでカスタマイズした３PRを作成してみました。
フォーム的には３カラムにアイコンボックスを３つ設定した感じになっています。これもトップページのスライドショーの直下に作成されていますので実際に参照してみて下さい。
３）１P目の背景固定化画像の設定
縦に長いLP仕様を５ページ相当のイメージにしてLP仕様を設定しています。
各ページのLP仕様は、先ず前半部に背景固定化されてカバー画像的な大型画像を設定しています。大型画像の真ん中にページ見出しに相当するタイトル文字を設定します。
具体的な設定内容は、後述にある「11）背景固定化画像の設定」を参照して下さい。
４）１P目のコンテンツ内容
LP仕様の後半部に、コンテンツ内容や画像を２カラムで設定します。
画像が右カラムに来る場合、又は画像が左カラムに来る場合の２パターンありますが、内容的には全て同じ仕様と考えて下さい。
５）２P目の背景固定化画像の設定
背景固定画像が違うだけで他の設定は、前記３）と同じです。
６）２P目のコンテンツ内容
２カラムに設定するコンテンツ内容と画像が異なるだけで、他の設定は、前記４）と同じです。
・・・・・・・・・・・・
設定７）～８）は前記と同じで省略します。
９）５P目の背景固定化画像の設定
背景固定画像が違うだけで他の設定は、前記３）と同じです。
10）５P目のコンテンツ内容
２カラムに設定するコンテンツ内容と画像が異なるだけで、他の設定は、前記４）と同じです。
11）背景固定化画像の設定
①レイアウト設定
背景固定化画像のカバー画像としての見出しタイトルを、セクション編集のレイアウト設定で設定します。
最小の高さを400に設定してカバー画像の高さを400として、その真ん中に見出しタイトルを表示するようにしています。
伸縮セクションを「はい」に設定することをお忘れなく！
②カバー画像上の見出しタイトルの設定
タイトルタグで具体的な見出しタイトルを設定します。
③背景画像の設定
背景画像は、セクションの背景に挿入して、添付は固定、Display Sizeはカバーを選択します。
④背景オーバーレイの設定
背景オーバーレイで黒色を選択し、不透明度0.５として、背景固定画像を黒色にオーバーレイすることを忘れないように設定して下さい。
これにより、白色の見出しテキストが見やすくなります。