WordPressテーマ「Divi」では、非常に簡単に高さが画面いっぱいのァーストビューをつくることができます。

なので今回はその方法をご紹介するとともに、個人的には高さが画面いっぱいのファーストビューよりも画面7割くらいの高さのファーストビューが好きなので、それもつくっていきたいと思います。

「Divi」でフルハイトのファーストビューをつくる

DIviビルダーを使います。

最初から構築を選択します。

編集画面が開いたら、最初の行挿入メニューは閉じます。

新しいセクションの追加でフルワイドを追加します。

モジュールはフルワイドヘッダーを選択します。

フルワイドヘッダーが挿入されました。

デフォルトで挿入されていたセクションは削除します。

フルワイドヘッダーモジュールの設定を行います。

デザインタブを開きレイアウトセクションの「全画面表示にする」を「はい」にします。

設定は以上です。

「Divi」で7割くらいの高さのファーストビューをつくる

高さが画面7割くらいのファーストビューをつくるときは、フルワイドセクションではなく通常のセクションを使います。

行を挿入します。

モジュールにはスライダーを挿入します。

スライダーモジュールにはデフォルトで2つのスライダーが設定されています。

今回は1つあればいいので、削除しておきます。

スライダーの設定を行います。

デザインタブの「最小の高さ」に70vhを設定します。

%指定だと効きません。

デザインタブの「余白」で「マージン」に0pxを設定します。

次に行の設定です。

デザインタブの「最大幅」に100%を設定します。

デザインタブの「余白」で「マージン」と「パディング」に0pxを設定します。

次にセクション設定です。

デザインタブの「余白」で「マージン」と「パディング」に0pxを設定します。

以上の設定で、高さが画面7割くらいのファーストビューのレイアウトができたかと思います。

残りはテキストや画像の修正をして完成です。

最後に冒頭でご紹介した高さが画面7割くらいのファーストビューのテキストや画像の設定内容をご紹介します。

スライドの「タイトル」「ボタン」「ボディ」を入力しています。

スライドの「ボディ」は、paragraphやheaderに関わらずテキストが一括でしかできません。

そのため、h2としている「カナメグローバルホールディングス」のフォントサイズをstyle属性で指定しています。

画像はスライドの背景から設定しています。

スライド背景にはオーバーレイを設定しています。

スライド幅を70%に設定しています。

スライド「タイトル」のフォントサイズを23pxに設定しています。