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

公開: 2017-06-21

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

シリーズ第2弾になりました！そして、私はこれらのレイアウトを構築することを本当に楽しんでいると言わなければなりません。今日は、商品ページやランディングページの機能セクションに似た動画のグリッドレイアウトを作成する方法を紹介します。このレイアウトは、1/2 1/2列の行のシーケンスで構成されており、各行には2つの列のそれぞれにビデオとそれに対応する説明が含まれています。次に、次のセクションでは、ビデオと説明の順序を左から右に、次に右から左に交互に切り替えます。各行はページの全幅に広がり、各列は同じ垂直方向の高さを維持するため、レイアウトはすべての画面サイズで見事に見えます。

ビデオモジュールを使用してビデオを追加し、宣伝文モジュールを使用してビデオに隣接するタイトルと説明のセクションとして機能させます。このシリーズのすべてのレイアウトと同様に、これもDiviを使用して驚くほど簡単に実装できます。

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

ビデオグリッド

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

この概念は決して新しいものではありません。ユーザーに馴染みがあるので、実際にこのレイアウトを作成するように促されました。多くのWebサイトは、製品やサービスの機能を紹介するために同様のレイアウトを使用しています。これにより、より大きなコンテンツ領域が可能になり、テキスト用の大きなネガティブスペースとビデオ用の印象的な画像が作成されると思います。

これは、ビデオを使用して製品の機能を宣伝しているが、他にも多くの用途がある企業に最適です。このデザインを次のプロジェクトに活用していただければ幸いです。

始めましょう。

Diviを使用した設計の実装

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

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

ビデオグリッド

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

ビデオグリッド

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

コンテンツオプション

ビデオMP4 / URL：[ビデオのURLを入力]
画像オーバーレイURL：[動画のカスタム画像をアップロードするか、動画から自動的に生成します]

ビデオグリッド

デザインオプション

再生アイコンの色：rgba（255,255,255,0.87）

ビデオグリッド

設定を保存する

次に、作成したビデオモジュールのすぐ隣の右側の列に宣伝文句モジュールを追加します。

ビデオグリッド

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

コンテンツオプション：

タイトル：[ビデオのタイトルを入力してください]
内容：[動画の説明を入力]
リンク：[必要に応じて、別のページへのリンクURLを入力できます]
アイコンを使用：はい
アイコン：[アイコンを選択]

ビデオグリッド

デザインオプション：

アイコンの色：＃666666
テキストの色：明るい
テキストの向き：中央
ヘッダーフォント：Roboto
ヘッダーフォントサイズ：52px
ヘッダー文字の間隔：1px
ボディフォント：Open Sans
本文のフォントサイズ：20px
本文の色：#dddddd
デスクトップのカスタムパディング：5％上位（説明に含まれるテキストの量に応じて、これを調整する必要がある場合があります）
タブレットとスマートフォンのカスタムパディング：上20px、下20px

ビデオグリッド

高度なオプション

画像/アイコンアニメーション：右から左（このアニメーションを矢印アイコンと組み合わせると、左側のビデオにさらに注意を引くことができます。

ビデオグリッド

設定を保存する

続行する前に、背景画像をセクションに追加してください。セクション設定（青い領域）に移動し、以下を更新します。

コンテンツオプション：

背景画像：[背景画像を入力してください（私のものは2000 x 2200です）]

視差効果を使用する：はい
視差法：真の視差

ビデオグリッド

デザインオプション：

カスタムパディング：0px上、0px下

ビデオグリッド

設定を保存する
次に、次の更新を使用して行設定を編集します。

コンテンツオプション

列2の背景色：rgba（0,0,0,0.69）

デザインオプション

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
カスタムパディング：0px上、0px下
カスタムマージ：0px上、0px下
列1のカスタムパディング：0px上、0px下
列2のカスタムパディング：0px上、0px下

物事は今、適切になり始めています。背景画像があり、最初の行を作成しました。これで、その行を複製する準備が整いました。ビジュアルビルダー内の行メニューバーにある複製アイコンをクリックします。

ビデオグリッド

複製したばかりの新しい行で、ビデオモジュールを右側の列にドラッグし、宣伝文モジュールを左側の列にドラッグします。

ここで、ビデオモジュールのコンテンツを更新して、新しいビデオURLと新しいカバー画像を含める必要があります。宣伝文モジュールの場合、ビデオに対応するヘッダーとコンテンツを更新する必要があります。また、宣伝文句アイコンを右向きの矢印に調整し（私が行ったのと同じアイコンを使用した場合）、画像/アイコンアニメーションを「左から右」に切り替える必要があります。

ビデオグリッド