Diviのビデオモジュールを使用して見事なグリッドレイアウトを作成する方法（パート4）

ミニシリーズ「Diviのビデオモジュールで見事なグリッドレイアウトを作成する方法」の投稿4/5へようこそ。 このシリーズでは、Divi VisualBuilderを使用してすばらしいグリッドレイアウトを最初から作成する方法について説明します。 そして、これが複雑すぎるのではないかと心配している場合は、もう一度考えてみてください。 これらのレイアウトはすべて、追加のコードなしでVisualBuilderを使用して作成およびスタイル設定できます。

これまでのグリッドレイアウトを楽しんでいただければ幸いです。 今日のレイアウトはシリーズの4番目であり、私のお気に入りの1つです（そして実装が最も速い）。 Diviを使用して構築するのは簡単（そして楽しい）であるだけでなく、サイトの配色に合わせてカスタマイズすることもできます。 背景のグラデーションオプションは、このデザインの主な機能であり、対角線で区切られた2つのトーンカラーを作成するために使用されています。 間隔は、ビデオを簡単に認識できるようにすることも目的としています。 おそらく、この設計は、私たちが通常「グリッド」と呼ぶものの範囲外になる可能性がありますが、その可能性はわかると思います。

だからここに行きます。 ビデオモジュールといくつかのカスタム背景要素を使用して、このグリッドデザインを構築するのがいかに簡単かをお見せします。

最終結果は次のようになります

コンセプトとインスピレーション

チュートリアルやコースなどに使用するビデオの小さなバッチを整理した、すっきりとしたレイアウトを探していました。 これは、背景のグラデーションをいじりたいという衝動的な熱意と相まって、これを思いついた。 気に入ってくれるといいな。

始めましょう。

Diviを使用した設計の実装

私たちのYoutubeチャンネルを購読する

まず、全幅（1列）構造の通常のセクションを追加します。

次に、テキストモジュールを列に追加します。 これは、ページのセクションのタイトルまたは見出しとして機能します。

次のようにテキスト設定を更新します。

コンテンツオプション
内容：[タイトルのテキストを入力]

デザインオプション

テキストの色：明るい
テキストフォント：Arimo
テキストフォントサイズ：56px
テキスト文字の間隔：1px
テキスト行の高さ：1em

設定を保存する

白い背景に白いテキストがあるため、まだ何も表示されませんが、問題ありません。 先に進んで、セクションの背景グラデーションを追加しましょう。 セクション設定に移動し、コンテンツセクションで次のオプションを更新します。

背景のグラデーションの色：＃121212、＃ffffff
グラデーションタイプ：線形
勾配方向：198度
開始位置：45％
終了位置：45％

次に、追加した行の行設定を次のように更新します。

デザインオプション

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：4
列の高さを等しくする：はい
カスタムパディング：1％上、5％右、5％下、5％左

設定を保存する

次に、作成した行のすぐ下に、⅔⅓（2列）構造の別の行を追加します。

次に、左側の列にビデオモジュールを追加します。

次のようにビデオ設定を更新します。

コンテンツオプション

ビデオMP4 / URL：[ビデオのURLを入力してください]
画像オーバーレイURL：[オーバーレイ画像URLを入力]

設定を保存する

次に、作成したビデオモジュールを2回複製（またはコピー）し、2つの複製ビデオをドラッグ（または貼り付け）して、右側の列にスタックします。

ビデオのコンテンツを更新して、正しいURLとカバー画像を含めます。

先に進み、右側の列の2つのビデオモジュールの下に宣伝文モジュールを追加します。 これは、このグリッド内のビデオの説明として役立ちます。

宣伝文の設定を次のように更新します。

コンテンツオプション

タイトル：[タイトルを入力]
コンテンツ：[コンテンツまたは説明を入力]

デザインオプション

テキストの色：明るい

設定を保存する

次に、作成したばかりのビデオを保持している行の行設定を次のように編集します。

コンテンツオプション

背景のグラデーションの色：＃4999c1、＃121212
グラデーションタイプ：線形
勾配方向：198度
開始位置：45％
終了位置：45％

デザインオプション

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：4
列の高さを等しくする：はい
カスタムパディング：上5％、右5％、下5％、左5％

素晴らしい！ 最初のセクションを終了しました。 ほぼ完了です。 これまでの進捗状況を確認してください。

次のセクションを作成するには、[セクションの複製]ボタンをクリックして、作成したセクション全体を複製します。

次のように新しいセクション設定を更新します。

コンテンツオプション

背景のグラデーションの色：＃ffffff、＃121212（これらの色は最初のセクションとは逆の順序です）

次に、複製されたセクションのテキストモジュール設定を次のように更新します。

デザインオプション

テキストテキストの色：＃333333

設定を保存する

このセクションを完了するには、ビデオを含む行設定を次のように更新します。

コンテンツオプション

背景のグラデーションの色：＃121212、＃4999c1（基本的に、色の順序を切り替えて、最初のセクションとは逆の順序にします）

設定を保存する

次に、2番目のセクションを追加した後の結果を確認しましょう…

まだ気付いていない場合は、これら2つのセクションがすでに作成されているため、セクションを簡単に追加し続けることができます。 念のため、もう1つのセクションを作成しましょう。 セクションの背景色は下部が黒なので、次のセクションは上部が黒の背景色から始めます。 つまり、最初のセクションを上部に複製し、それをページの下部の2番目のセクションの下にドラッグする必要があります。 これにより、ページ全体でデザインの連続性が保たれます。

3番目のセクションが追加された後の外観は次のとおりです。

それでおしまい！ 全部終わった。

レスポンシブ？

このレイアウトは、実際には、変更を加えなくてもモバイルでさらに見栄えが良くなります。 見てみな！

さらなるカスタマイズ

複数のセクションでこのグリッドレイアウトを作成した後、次のプロジェクトのテーマに合わせて色を変更するのがいかに簡単であるかにすでに気付くでしょう。 必要なのは、セクションと行の背景のグラデーションの色を変更することだけです。

デザインをさらに微調整したい場合は、グラデーションカラーに半透明を追加して、背後の背景を露出させることをお勧めします。 または、グラデーションカラーの1つを完全に削除して、どのように表示されるかを確認してください。 1つのグラデーションカラーを変更するだけで何ができるかの例をいくつか示します…

左側の列のグリッドにビデオスライダーモジュールを追加することもできます。

来る…

次に登場するのは、シリーズの最後のビデオグリッドレイアウトです。 これは、微妙なフレーミング要素で物事をきれいに保つか、各ビデオを際立たせるために独自の方法で色を使用するオプションを提供します。

それまでは、コメントでお返事をお待ちしております。

楽しみ！