DiviでETのクリックビデオチュートリアルを再現する方法

あなたのウェブサイトでビデオプレビューを共有することは、双方向性を高め、訪問者があなたの製品やサービスをより良くそしてより速く理解するのを助けることができます。 現在、Elegant Themes Webサイトでは、このアプローチを独自に採用し、最も人気のある機能のいくつかをナビゲートできる簡単なクリックビデオウォークスルーデザインを作成しました。 このデザインをDivi内で再作成しました。本日は、最初から再作成する方法を紹介します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

Click Video WalkthroughLayoutを無料でダウンロード

フリークリックビデオウォークスルーレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

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

再作成を始めましょう！

新しい通常のセクションを追加する

作業中のページに新しい通常のセクションを追加することから始めます。

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、次のサイズ設定を適用します。

• カスタムガター幅を使用：はい
• 側溝幅：2
• 幅：85vw（デスクトップ）、90％（タブレットと電話）
• 最大幅：100％

列1の設定

次に列1の設定を開きます。

間隔

間隔の設定に移動し、デスクトップに上部のパディングを追加します。

• トップパディング：5vw（デスクトップ）、0vw（タブレットと電話）

CSSクラス

[詳細設定]タブに移動し、CSSクラスを追加します。 投稿の後半では、このCSSクラスを使用して、タブレットとモバイルでグリッド効果を作成します。

• CSSクラス：item-sensitive-grid

列1に宣伝文モジュールを追加する

表題を加える

モジュールの追加を始めましょう！ クリック可能なアイテムごとに、宣伝文モジュールを使用します。 最初のものから始めて、残りのクリックアイテムに再利用します。 新しい宣伝文モジュールを列1に追加し、選択したタイトルを入力します。

アイコンを選択

次にアイコンを選択します。

デフォルトのアイコン設定

デザインに移動し、それに応じてアイコン設定を変更します。

• アイコンの色：＃e8e9ea
• アイコンの配置：左
• アイコンのフォントサイズを使用：はい
• アイコンのフォントサイズ：2vw（デスクトップ）、4.5vw（タブレット）、7vw（電話）

ホバーアイコンの設定

ホバー時にアイコンの色を変更します。

• アイコンの色：＃b0c8ff

タイトルテキスト設定

タイトルテキストの設定に移動し、そこでもいくつか変更を加えます。

• タイトルフォント：ラト
• タイトルフォントの太さ：太字
• タイトルフォントスタイル：大文字
• タイトルテキストサイズ：0.8vw（デスクトップ）、1.7vw（タブレット）、2.5vw（電話）
• タイトルラインの高さ：2vw（デスクトップ）、4.5vw（タブレット）、7vw（電話）

デフォルトの間隔

さまざまな画面サイズにわたっていくつかのカスタムパディング値を使用して、宣伝文句モジュールを形成します。

• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• ボトムパディング：0.5vw（デスクトップ）、1.5vw（タブレットと電話）
• 左パディング：1.2vw（デスクトップとタブレット）、5vw（電話）
• 右パディング：1.2vw（デスクトップとタブレット）、5vw（電話）

ホバー間隔

ホバーマージン値を変更して、ハイライトホバー効果を作成します。

• 左マージン：-0.5vw
• 右マージン：-0.5vw

国境

いくつかの丸い角も追加します。

デフォルトのボックスシャドウ

微妙なボックスシャドウと一緒に。

• ボックスシャドウの垂直位置：10px
• ボックスシャドウブラー強度：70px
• 影の色：rgba（0,0,0,0.11）

ホバーボックスシャドウ

ホバー時にボックスの影の色を変更します。

• 影の色：rgba（103,151,255,0.22）

CSSIDとクラス

最後になりましたが、Blurb Moduleの[Advanced]タブに移動し、CSSIDとクラスを追加します。

• CSS ID：video-walkthrough-item-1
• CSSクラス：video-item-cursor

宣伝文句モジュールを3回クローンする

最初の宣伝文句モジュールを完了したら、それを3回複製できます。

コンテンツの変更

重複する各宣伝文モジュールの内容を変更します。

重複する宣伝文モジュールのCSSIDをすべて変更する

CSSIDとともに。

• 1）視覚的に構築する：video-walkthrough-item-1
• 2）効果：ビデオ-ウォークスルー-アイテム-2
• 3）シェイプディバイダー：ビデオ-ウォークスルー-アイテム-3
• 4）一括編集：video-walkthrough-item-4

列1を再利用する

列3を削除します

最初の列が完成したら、行の設定を開いて3番目の列を削除できます。

列1のクローンを作成し、下部に配置します

最初の列（宣伝文モジュールを含む）のクローンを作成し、複製した列を下部に配置します。

列構造を元に戻す

列の構造を、このチュートリアルの最初に選択したものに戻します。

すべての列3の宣伝文モジュールの内容を変更する

列3の各複製の宣伝文句のタイトルを変更します。

すべての列3の宣伝文句モジュールのCSSIDを変更する

CSSIDとともに。

• 5）レイアウトライブラリ：video-walkthrough-item-5
• 6）変換：video-walkthrough-item-6
• 7）ホバー状態：ビデオ-ウォークスルー-アイテム-7
• 8）検索と置換：video-walkthrough-item-8

列2にテキストモジュールを追加します

コンテンツボックスを空のままにします

さまざまなビデオプレビューの追加を開始する時が来ました！ それにアプローチする2つの方法があります。 ビデオモジュールまたはテキストモジュールを使用します。 ビデオモジュールでは、訪問者は再生を押す必要があります。 ビデオの背景とテキストモジュールを使用し、一方で、自動的なく、音なしでビデオを再生。 このチュートリアルでは、テキストモジュールを使用しますが、代わりにビデオモジュールを自由に使用してください。 テキストモジュールのコンテンツボックスが空のままであることを確認してください。

ビデオの背景

背景設定に移動し、選択したビデオをアップロードします。

• 表示されていないときにビデオを一時停止する：はい

サイジング

デザインタブに移動し、幅に「100％」を追加します。

• 幅：100％

間隔

次に、さまざまな画面サイズにカスタムの上部と下部のパディング値を追加して、ビデオの背景が透けて見えるようにします。 注：追加する値は、動画のサイズセットに合わせて調整する必要があります。

• トップパディング：15vw（デスクトップ）、24vw（タブレット）、26vw（電話）
• 下部のパディング：15vw（デスクトップ）、24vw（タブレット）、26vw（電話）

国境

続けて、各コーナーに「10px」を追加します。

ボックスシャドウ

微妙なボックスシャドウと一緒に。

• ボックスシャドウブラー強度：30px
• ボックスシャドウスプレッド強度：-5px
• 影の色：rgba（0,0,0,0.11）

CSS ID

最後になりましたが、CSSIDを追加します。

• CSS ID：ビデオウォークスルー-1

テキストモジュールを7回複製する

テキストモジュールが完成したら、7回（宣伝文モジュールごとに1回）クローンを作成できます。

重複するテキストモジュールのビデオの背景をすべて変更する

複製ごとに異なるビデオ背景をアップロードします。

すべての重複テキストモジュールのCSSIDを変更し、CSSクラスをすべての重複テキストモジュールに追加します

CSSIDも変更します。 CSS IDの末尾に同じ番号を使用して、各テキストモジュールを正しい宣伝文モジュールに接続していることを確認してください。 また、CSSクラスを使用して、元のテキストモジュールに加えて各テキストモジュールを非表示にします。

• テキストモジュール1：ビデオチュートリアル-1
• テキストモジュール2：ビデオチュートリアル-2
• テキストモジュール3：ビデオチュートリアル-3
• テキストモジュール4：ビデオチュートリアル-4
• テキストモジュール5：ビデオチュートリアル-5
• テキストモジュール6：ビデオチュートリアル-6
• テキストモジュール7：ビデオチュートリアル-7
• テキストモジュール8：ビデオチュートリアル-8
• CSSクラス：video-not-first

コードモジュール＃1を列1に追加します

2行目が完了したら、コードの追加を開始します。 クリック機能を機能させるために、CSSとJQueryのコードを使用します。 コードを2つの別々のコードモジュールに配置します。 最初のコードモジュールを列1に追加することから始めます。

ページCSSコードを挿入

次のCSSコード行を追加します。

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

コードモジュール＃2を列3に追加します

3番目の列に別のコードモジュールを追加して続行します。

クリック関数JQueryコードを挿入します

JQueryコードの次の行を入力します。

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

この手順を完了すると、ページを保存してVisualBuilderを終了できます。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviを使用してエレガントなテーマのクリックビデオウォークスルーを再現する方法を紹介しました。 JSONダウンロードも無料で提供しています！ このデザインは、作成するあらゆる種類のWebサイトに自由に使用できます。 これは、ビデオを紹介し、訪問者の注意を引くのに最適な方法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。