当サイトのトップページ「Elementor-Top」は、LPイメージの縦長1カラムのLPもどきのページで、Elementorを使用したページ作成で実装しています。全体で5ページ相当のLP仕様で、そのトップのヘッダー部に5枚の静止画で作成されたスライドショーがあり、そのスライドショー直下にWordPressの3PRが設置されています。

そして、その続きとして、5ページ分相当のコンテンツが続いております。
5ページ分の各ページは、全て同じ作りで作成されています。
即ち、各コンテンツは、最初にページタイトルを表すカバー画像があり、その次にページの具体的なコンテンツを表すコンテンツ内容が1セットとなって、合計5ページ相当の縦長LP仕様で作成されています。

1)ヘッダー部のスライダー設定

ダッシュボードの外観~カスタマイズ~Lightningトップページスライドショーで、5枚の大型静止画によるスライドショーを作成しています。詳細は、トップページの最上段にある実際のスライドショーを参照して下さい。

2)カスタム3PRの設定

WordPressの良くあるキャッチコピーの一つに3PRという部品があります。
Lightningテーマにも標準で用意されていますが、今回は、その3PRに似たイメージでカスタマイズした3PRを作成してみました。
フォーム的には3カラムにアイコンボックスを3つ設定した感じになっています。これもトップページのスライドショーの直下に作成されていますので実際に参照してみて下さい。

3)1P目の背景固定化画像の設定

縦に長いLP仕様を5ページ相当のイメージにしてLP仕様を設定しています。
各ページのLP仕様は、先ず前半部に背景固定化されてカバー画像的な大型画像を設定しています。大型画像の真ん中にページ見出しに相当するタイトル文字を設定します。
具体的な設定内容は、後述にある「11)背景固定化画像の設定」を参照して下さい。

4)1P目のコンテンツ内容

LP仕様の後半部に、コンテンツ内容や画像を2カラムで設定します。
画像が右カラムに来る場合、又は画像が左カラムに来る場合の2パターンありますが、内容的には全て同じ仕様と考えて下さい。

5)2P目の背景固定化画像の設定

背景固定画像が違うだけで他の設定は、前記3)と同じです。

6)2P目のコンテンツ内容

2カラムに設定するコンテンツ内容と画像が異なるだけで、他の設定は、前記4)と同じです。

・・・・・・・・・・・・

設定7)~8)は前記と同じで省略します。

9)5P目の背景固定化画像の設定

背景固定画像が違うだけで他の設定は、前記3)と同じです。

10)5P目のコンテンツ内容

2カラムに設定するコンテンツ内容と画像が異なるだけで、他の設定は、前記4)と同じです。

11)背景固定化画像の設定

①レイアウト設定

背景固定化画像のカバー画像としての見出しタイトルを、セクション編集のレイアウト設定で設定します。

最小の高さを400に設定してカバー画像の高さを400として、その真ん中に見出しタイトルを表示するようにしています。

伸縮セクションを「はい」に設定することをお忘れなく!

②カバー画像上の見出しタイトルの設定

タイトルタグで具体的な見出しタイトルを設定します。

③背景画像の設定

背景画像は、セクションの背景に挿入して、添付は固定、Display Sizeはカバーを選択します。

 

④背景オーバーレイの設定

背景オーバーレイで黒色を選択し、不透明度0.5として、背景固定画像を黒色にオーバーレイすることを忘れないように設定して下さい。
これにより、白色の見出しテキストが見やすくなります。