Diviでのログインステータスに基づいてビデオスライダーを表示/非表示にする方法
公開: 2022-03-05ビデオスライダーは、コース、レシピページ、またはチュートリアルのビデオのコレクションを紹介するのに最適です。 また、サイトのメンバーやサブスクライバー向けにプレミアムコンテンツを紹介するのにも適しています。 たとえば、訪問者がレシピページにアクセスして、テキスト形式の説明のみを表示する場合があります。 ただし、登録ユーザーになると、プレミアムコンテンツと同じページにビデオスライダーが表示されます。 このチュートリアルでは、Diviでのログイン状態に基づいて、ビデオスライダーを簡単に表示/非表示にする方法を紹介します。 これにより、ログインしたユーザーにプレミアム機能としてビデオコンテンツを提供できます。
飛び込みましょう！
スニークピーク
このチュートリアルで作成するデザインを簡単に見てみましょう。 ユーザーがログインフォームを使用してログインするまで、ビデオスライダーがユーザーから非表示になっていることに注目してください。
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」されたり、追加の電子メールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。
[インポート]ボタンをクリックします。
移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。
次に、インポートボタンをクリックします。
完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。
チュートリアルに取り掛かりましょう。
Diviでのログインステータスに基づいたビデオスライダーの表示/非表示
既成のレイアウトで新しいページを作成する
新しいページを立ち上げて、事前に作成されたレイアウトの1つで実行することにより、チュートリアルを開始しましょう。
方法は次のとおりです。
- 新しいページを作成してタイトルを付けます
- クリックしてDiviBuilderを使用します（フロントエンド）
- 既成のレイアウトを使用する場合に選択します
- 栄養士のレシピページのレイアウトを検索して選択します。
- レイアウトをページにロードするには、「このレイアウトを使用」ボタンをクリックするだけです。
レイアウトがページに読み込まれると、スティッキービデオスライダーをページに追加する準備が整います。
ページへのビデオスライダーの追加
レシピページでは、材料と手順が記載された全幅のビデオが行のすぐ下に表示されます。 ビデオをビデオスライダーモジュールに置き換えます。 これを行うには、ビデオモジュールを削除します。
次に、その場所に新しいビデオスライダーモジュールを追加します。
スライダーへのビデオの追加
スライダーにビデオを追加するには、ビデオスライダーの設定を開きます。 [コンテンツ]タブの下に、すでに配置されている模擬ビデオが表示されます。 既存のビデオの設定を開きます。
次に、デフォルトのビデオを削除し、[ビデオの追加]アイコンをクリックして、スライダーに新しいビデオを追加します。
この例では、セルフホストビデオを追加しています。 ビデオファイルのMP4およびWebmバージョンをアップロードすることは常に良い考えです。
次に、ビデオに画像オーバーレイを追加できます。
完了したら、変更を保存します。
追加のビデオを作成するには、ビデオスライダーの設定に戻り、既存のビデオを3回複製して、合計4つのビデオを取得します。 次に、[オーバーレイ]オプションで、[はい]を切り替えて、メインビデオに画像オーバーレイを表示します。
条件付き表示オプションの追加
このチュートリアルでは、ログインしているユーザーにのみこのビデオスライダーを表示します。これを行うには、[詳細設定]タブに移動し、[条件]オプショングループの下に新しい条件を追加するためにクリックします。
表示条件のドロップダウンメニューで、リストから[ログインステータス]を選択します。 ユーザーがログインしている場合にのみ表示するように選択してください。 次に、変更を保存します。
ボーナスのヒント：ログインしていないユーザーのCTAまたはログインフォームを作成する
新規訪問者の場合は、登録するための何らかのCTAまたはログインフォームを作成して、メンバーがログインしてビデオを簡単に表示できるようにすることをお勧めします。 これを行うには、下のスクリーンショットのように、左側の列にビデオのように見える画像と右側の列にログインフォームを含む新しい2列の行を作成できます。
次に、行設定を開き、ログイン状態に基づいて表示条件を追加します。 今回のみ、ユーザーがログアウトしている場合にのみ表示するように選択します。 これにより、ユーザーがログアウトしている場合にのみコンテンツが表示されます。
ログインフォームを追加するときは、現在のページにリダイレクトするようにリダイレクトオプションを更新してください。 これにより、ログインして同じページでビデオを表示したいユーザーのUXが向上します。
ログアウトしたユーザーのCTAセクションを最初から作成する方法については、Diviの条件オプションを使用してメンバー専用のブログ投稿を作成する方法に関する投稿をご覧ください。
最終結果
これが私たちの最終的なビデオスライダーの外観です。 ログインフォームを使用してログインするまで、ユーザーから非表示になっていることに注意してください。
メインビデオの画像オーバーレイを使用したYouTubeビデオ/埋め込みの問題
YouTubeのURLを使用してビデオスライダーに複数のビデオを埋め込む場合は、「メインビデオに画像オーバーレイを表示する」というDiviの組み込みオプションを使用しないことをお勧めします。 これにより、ビデオオーディオがスティッキーな状態で最初から自動再生され、異なる間隔で重複したオーディオが再生されます。
これは、mp4またはwebmファイル形式のセルフホストビデオには当てはまりません。 セルフホストビデオのメインビデオに画像オーバーレイを表示できます。 したがって、Diviのオーバーレイ画像と再生アイコンをDiviビデオモジュールで使用する場合は、代わりにMP4およびWebmビデオファイル/URLを追加する必要があります。
それでも、ビデオスライダーでYoutubeビデオにカスタム画像オーバーレイを追加することができます。 それらは、メインビデオの下のサムネイルコントロールに引き続き表示されます。
最終的な考え
ログインステータスに基づいてビデオスライダーを表示/非表示にする機能があると、メンバーまたはサブスクライバーにプレミアムコンテンツを提供する場合に便利です。
詳細については、Diviの条件オプションを使用してメンバー専用のブログ投稿を作成する方法に関する同様の投稿を確認してください。
コメントでお返事をお待ちしております。
乾杯！