Diviのビデオモジュールを使用して見事なグリッドレイアウトを作成する方法（パート3）
公開: 2017-06-22ミニシリーズ「Diviのビデオモジュールで見事なグリッドレイアウトを作成する方法」の5つのうち3つを投稿することを歓迎します。 このシリーズでは、Divi VisualBuilderを使用してすばらしいグリッドレイアウトを最初から作成する方法について説明します。 そして、これが複雑すぎるのではないかと心配している場合は、もう一度考えてみてください。 これらのレイアウトはすべて、追加のコードなしでVisualBuilderを使用して作成およびスタイル設定できます。
シリーズのパート3へようこそ！ これは少し驚かれる気がします。 今日は、半透明の背景色とグラデーションを使用して、複数の境界線の色のバリエーションを作成する方法を紹介します。 最後に、数回クリックするだけで配色を完全に変更する方法を紹介します。 このレイアウトは、2つの1/4 1/21/4列構造行と1/41/4 1/41/4列構造行の組み合わせで構成されています。
ビデオモジュールを使用してビデオを追加し、宣伝文モジュールをグリッドの中央のタイトルと説明のセクションとして機能させます。 このシリーズのすべてのレイアウトと同様に、これもDiviを使用して簡単に実装できます。
最終結果は次のようになります
コンセプトとインスピレーション
実際、元のレイアウトのアイデアは、人気のあるサイトgiphy.comから、小さなgifで囲まれた中央の列に大きな注目のgifを表示する方法から生まれました。 このアイデアは、ビデオグリッドのレイアウトに適していると思いました。これにより、周囲の他のビデオと一緒に、より大きなビデオをフィーチャーできるようになるからです。 ただし、周囲のギフィー画像の石積みスタイルは気にしなかったため、この投稿では、すべてをより対称的にするために偶数列アプローチを使用しました。
レイアウトに加えて、Diviの半透明の背景機能をもう少し調べて、ユニークなものを作成したいと思いました。
始めましょう。
Diviを使用した設計の実装
まず、1/4 1/2 1/4（2列）構造の通常のセクションを追加します。 
次に、最初の列にビデオモジュールを追加します。
次のようにビデオ設定を更新します。
コンテンツオプション
ビデオMP4 / URL：[ビデオのURLを入力]
画像オーバーレイURL：[動画のカスタム画像をアップロードするか、動画から自動的に生成します]
設定を保存する
次に、ビデオモジュールのすぐ下にディバイダーモジュールを追加します。
除算器の設定で、
これからたくさんのビデオを追加するので、作成したばかりのビデオモジュールを複製して、適切な場所にドラッグする方が簡単だと思います。 その後、戻ってビデオのURLを変更し、後で画像をカバーすることができます。
まず、作成したビデオモジュールを複製して、最初の列の仕切りモジュールの下にドラッグします。
その後、最初の列要素（ビデオ、仕切り、およびビデオ）を複製し続け、それらを右端の列にドラッグできます。 次に、ビデオモジュールの1つを複製して、中央の列にドラッグします。 すべてのビデオコンテンツを更新すると、次のようなものになります…
続行する前に、セクションと行の列に背景色を追加してください。 セクション設定（青い領域）に移動し、以下を更新します。
コンテンツオプション
背景色：＃333333
デザインオプション：
カスタムパディング：0px上、0px下
設定を保存する
次に、次の更新を使用して行設定を編集します。
コンテンツオプション：
背景のグラデーションの色：rgba（255,255,255,0.58）および＃b684e8
グラデーション方向：360度
列1の背景色：rgba（0,0,0,0.69）
列2の背景色：rgba（255,255,255,0.45）
列1の背景色：rgba（0,0,0,0.85）
デザインオプション
この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
カスタムパディング：0px上、0px下
カスタムマージ：0px上、0px下
列1のカスタムパディング：上20px、右20px、下20px、左20px
列2のカスタムパディング：上20px、右20px、下20px、左20px
列3のカスタムパディング：上20px、右20px、下20px、左20px
設定を保存する
次に、2番目の行を追加します。 先に進み、最初の行の下に別の1/4 1/2 1/4（3列）構造行を追加します。
行設定のオプションの設定をすぐに開始するには、右クリック機能を使用して最初の行のスタイルをコピーし、2番目の行に貼り付けます。
これで、行設定について、更新する必要があるのは次のようなコンテンツオプションだけです。
背景グラデーション：なし（コピーされたものを消去します）
列1の背景色：rgba（0,0,0,0.69）
列2の背景色：rgba（0,0,0,0.0）–これはnoneまたはtransparentと同じです
列3の背景色：rgba（0,0,0,0.35）
行の設定が完了したので、先に進み、ビデオモジュールを複製して、最初の行（左端）と3番目の行（右端）にドラッグ（またはコピーアンドペースト）します。 次に、ビデオコンテンツを更新します。
真ん中の列には、宣伝文句モジュールを追加し、次のように設定を更新します。
コンテンツオプション
タイトル：[ページまたはビデオのタイトルを入力してください]
コンテンツ：[ビデオまたはページのコンテンツまたは説明を入力してください]
デザインオプション
テキストの色：明るい
テキストの向き：中央
ヘッダーフォント：PT Sans
ヘッダーフォントサイズ：52px
ヘッダー文字の間隔：1px
ボディフォント：PT Sans
本文のフォントサイズ：20px
いよいよ最後の列です。 もちろん、必要に応じてさらに追加することもできます。
先に進み、前の行の下に1/4 1/4 1/4 1/4（4列）構造行を追加します。
以前と同じように、前の行のデザインをコピーして現在の行に貼り付けると、デザインを少し先に進めることができます。
次に、次のように行設定を更新します。
コンテンツオプション
列1の背景色：rgba（0,0,0,0.34）
列2の背景色：rgba（0,0,0,0.69）
列3の背景色：rgba（0,0,0,0.34）
列4の背景色：rgba（0,0,0,0.69）
デザインオプション
列4カスタムパディング：20px 20px 20px 20px
設定を保存する
次に、ビデオモジュールを4つの列のそれぞれに複製またはコピーします。 すべてのビデオコンテンツを更新したら、完了です。
新しいグリッドレイアウトを確認してください…
ライトバージョンの作成
以前のダークビデオグリッドデザインをライトバージョンに変更するには、いくつかのデザインオプションを更新するだけです。
セクション設定を次のように更新します。
コンテンツオプション：
背景色：rgba（0,0,0,0.12）
次のようにすべての行設定を更新します。
基本的に、3つの行設定のそれぞれに戻り、使用されている背景色が表示されている場合は、白色パレットオプションをクリックするだけです。 これにより、すべての暗い半透明の暗い背景が半透明の明るい背景に変わります。
宣伝文モジュールの設定を次のように更新します。
デザインオプション
テキストの色：暗い
それはそれをします！ ライトバージョンをチェックしてください。
セクションの背景オプションでデザインを簡単に変更
グリッドは半透明の背景で構築されているため、セクションの背景色、グラデーション、または画像を簡単に変更して、サイトに完全に一致する新鮮なルックアンドフィールをサイトに与えることができます。
セクション設定に背景画像を追加することで生じる違いを見てください。
サイトを一致させるもう1つの方法は、最初の行に追加した背景のグラデーションの色を一致させることです。
来る…
このシリーズの次の投稿は、まったく異なる感じになるでしょう。 これはすべて、物事を清潔でシンプルに保つことです。 そして、いくつかの背景グラデーションのトリック。
それまでは、コメントでお返事をお待ちしております。
楽しみ！