Divi 5を使用してカスタムフルスクリーンスライダーを構築する方法（無料ダウンロード）

Divi 5の最新リリースの1つは、WordPressサイトにカスタムで魅力的なスライダーとカルーセルを作成するための機能であるグループCarouselモジュールを紹介しています。ポートフォリオ、製品、没入型ヒーロー、またはフルスクリーンスライダーを簡単に紹介し、サイトのデザインを新たな高みに引き上げることができます。

この投稿では、グループCarouselモジュールを使用してフルスクリーンスライダーを作成するための段階的なガイドを提供します。飛び込みましょう！

グループカルーセルモジュールの理解

グループカルーセルモジュールは、Divi 5に多用の追加であり、動的なスライダーとカルーセルを作成できるようにします。

従来のモジュールとは異なり、シンプルな画像カルーセルから複雑な郵便ベースのスライダーまで、ループビルダーを搭載した幅広いレイアウトをサポートしています。この柔軟性により、ポートフォリオ、証言、製品ギャラリーなどのコンテンツを魅力的な方法で紹介するのに最適です。

グループカルーセルモジュールの主要な機能

グループCarouselモジュールは、堅牢な機能で輝いています。動的なコンテンツループをサポートしているため、ループビルダーを使用して、投稿、ページ、またはカスタム投稿タイプをスライダーに直接引き込むことができます。

このモジュールでは、任意のDiviモジュールを使用して、ネストされた行とモジュールグループを使用して、美しく魅力的なスライダーを構築することもできます。矢印とページネーションドットを使用してナビゲーションをカスタマイズして、サイトに合わせて位置、色、その他のスタイルをカスタマイズできます。

オートプレイオプション、調整可能な速度、およびホバーの一時停止機能は、訪問者に目を引く体験を提供し、サイトに長く留まるようにします。さらに、モジュールは完全にカスタマイズ可能であるため、フルスクリーンとフル幅のレイアウトを作成でき、Webサイトのヒーロー、サービス、または機能セクションに最適です。

Divi 5のグループCarouselモジュールでフルスクリーンスライダーを構築する方法

このチュートリアルでは、グループCarouselモジュールを使用して、今後のDivi 5 Webサイト用のフルスクリーンスライダーを構築する方法を紹介します。最後に、訪問者が行動することを奨励するために、魅惑的なスライダーを構築するスキルがあります。

ステップ1：新しいページの設定

新しいページを作成し、タイトルを追加し、 [Diviビルダーを使用して[開始]をクリックします。

Visual Builderが開いたら、ページオプションの作成の下でゼロからビルドを選択します。

新しいページのセクションにホバリングして、設定アイコンを表示します。それをクリックして、セクションの設定を表示します。

[デザイン]タブに移動します。 [レイアウト]ドロップダウンメニューをクリックします。 Justify Contentの下で、センターを選択します。 Alignアイテムフィールドで、センターを選択します。これにより、セクションのコンテンツを水平および垂直に中央に配置することができます。

次に、セクションの間隔設定を調整します。間隔ドロップダウンメニューを展開します。マージンを0px 、上、下部に設定します。パディングの下で​​、上部と下部を0pxに設定します。

セクションの設定を所定の位置に配置すると、グリーン +アイコンをクリックして新しい行を追加します。

等しい列の下の単一列の行を選択します。

次に、グループCarouselモジュールを行に追加します。

コンテンツを追加する前に、FlexBoxと間隔コントロールを備えた行とグループCarouselモジュールをセットアップする必要があります。

ステップ2：行の設定を構成します

フルスクリーンスライダーを作成するには、行とグループCarouselモジュールを100％幅に設定する必要があります。レイヤーアイコンをクリックして、セクションを簡単に調整します。これは、特にパディングとマージンが0に設定されている場合、フル幅のセクションと行を操作する場合に重要です。ページのレイアウト構造を簡単に確認できるようになります。

レイヤービューでは、クリックして、グループカルーセルモジュールを収容する単一列の行を選択します。設計設定に移動します。レイアウトドロップダウンメニューで、水平ギャップを0に調整します。

また、項目を並べるアイテムを列の中心に設定します。

サイジングタブの幅と最大幅を100％に設定します。

[間隔]タブで、上部と下のマージンとパディングを0pxに設定します。

ステップ3：グループカルーセルの設定を構成します

次に、グループCarouselの設定を構成します。 [コンテンツ]タブでCarousel設定ドロップダウンメニューを展開します。自動回転をオンに切り替え、 2000msのデフォルト設定で自動回転速度を選択し、ホバーで一時停止できるようにすることができます。

[Elements]タブで、 Dot Navigationを表示し、 show Arrowsを有効にしたままにします。左右の矢印のカスタムアイコンを選択することもできます。

[[デザイン]タブの[矢印]タブをクリックして展開します。 ＃ffffffを矢印の色に割り当て、矢印のサイズをデフォルトの48pxのままにして、矢印の位置を内側に置いたままにします。

[背景]タブを展開し、 ＃000000を背景色に割り当てます。

ステップ4：最初のグループをスタイルします

セクション、行、およびグループカルーセルの設定を配置して、最初のスライドにコンテンツを追加できます。グループCarouselモジュールの[コンテンツ]タブをクリックし、[グループの設定アイコン]をクリックします。

背景ドロップダウンメニューを展開し、 [勾配]タブを選択します。

最初のグラデーションスライダーをクリックして、新しい色を割り当てます。 ＃efb648をカラーフィールドに入力します。

次に、 2番目の勾配スライダーをクリックして、 ＃f28f52を色に割り当てます。

勾配タイプのフィールドで、円形を選択します。

次に、 [デザイン]タブに移動します。 [間隔]タブを展開し、グループの上部と下部に5％のパディングを割り当てます。

ステップ5：最初のグループにコンテンツを追加します

グループの設定が構成されたので、グループにコンテンツの追加を開始できます。ブラック +アイコンをクリックしてモジュールを追加します。

[モジュールまたは行の挿入]ダイアログボックスが表示されたら、 [新しい行]タブをクリックします。等列セクションの下で、単一の列行を選択します。

見出しモジュールを追加します

見出しモジュールを選択して挿入します。

テキストドロップダウンメニューを展開し、タイトルとしてオレンジジュースを入力します。

[デザイン]タブに移動します。見出しのテキストドロップダウンメニューを展開します。 H1を見出しレベルとして選択し、 Bebas Neueを見出しフォントとして使用し、見出しフォントスタイルを大文字に設定し、見出しテキストのアライメントを中央に、見出しテキストの色を#ffffffに、見出しテキストサイズを20EMに設定します。

Divi 5のレスポンシブコントロールを使用して、見出しのテキストサイズをタブレットで15EM 、モバイルで8EMに調整します。

新しい行を追加します

次に、見出しモジュールを含む単一列の行の下に新しい行を追加します。ブラック +アイコンをクリックして、新しいモジュールを追加します。

[新しい行]タブをクリックします。オフセット列の下で、1/4 + 1/2 + 1/4オプションを選択します。

[デザイン]タブで、 [サイジング]タブを展開し、幅と最大幅に70％を入力します。アライメントを中央に設定します。

見出しモジュールを追加します

見出しモジュールを選択し、最初の列に追加します。

見出しにタイトルを付けて、 [デザイン]タブに向かいます。見出しのテキストドロップダウンメニューを展開します。見出しレベルのH2 、見出しフォントとしてBebas neue 、見出しフォントスタイルとして大文字、見出しのテキストの色として#ffffff 、見出しテキストサイズとして6emを選択します。

Diviのレスポンシブコントロールを使用して、見出しテキストサイズを4EMに調整します。

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

最初の列の見出しの下にテキストモジュールを追加します。ボディテキストを入力し、 [デザイン]タブに切り替えます。テキストフォントとしてPoppinsを選択し、テキストの色を#ffffffに設定し、テキストサイズを16pxに設定します。

ボタンモジュールを追加します

最初の列のテキストモジュールの下にボタンモジュールを追加します。 [コンテンツ]タブのボタンにテキストを割り当て、[デザイン]タブに交換します。ボタンドロップダウンメニューを展開し、ボタンにカスタムスタイルを使用できるようにします。次に、ボタンの背景メニューを展開します。 [背景色]タブで、ボタンの色に＃528BF2を追加します。

Divi 5のホバーコントロールを使用して、ボタンのホバー色に＃6A7C9Dを割り当てます。

デスクトップビューに戻ります。ボタンボーダードロップダウンタブを展開します。ボタンの境界半径の下に100pxを追加し、ボタンの境界幅を0pxに設定します。

ボタンテキストドロップダウンメニューを展開します。ポピンをボタンフォントとして、 #ffffffをボタンテキストの色として、 16pxをボタンテキストサイズとして割り当てます。

ボタンアイコンの設定を展開し、表示ボタンアイコンのトグルを無効にします。

最後に、間隔ドロップダウンメニューを展開します。上部と下部に15pxのパディング、左右に35pxを追加します。

画像モジュールを追加します

2番目の列に画像モジュールを配置します。設定が表示されたら、画像フィールドにホバリングして設定を表示します。 [設定]アイコンをクリックしてメディアライブラリをロードし、モジュールに画像をアップロードします。

次に、画像に相互作用を追加して、マウスオーバー効果を作成します。 [詳細]タブに移動します。インタラクションメニューを展開して、設定を表示します。 [インタラクションの追加]ボタンをクリックします。

オプションが表示されたら、マウスの入力を選択します。

管理ラベルフィールドに画像チルトを入力し、トリガーイベントとしてマウスの入力を選択し、マウスの動きをエフェクトアクションとしてミラーし、ターゲットモジュールとして画像を選択し、動きタイプとしてチルト、15を感度のために選択します。最後に、 [相互作用の保存]ボタンをクリックして、インタラクションを有効にします。

バーカウンターモジュールを追加します

クリックして、3番目の列にバーカウンターモジュールを追加します。 [コンテンツ]タブ。 [要素]タブで、 showパーセンテージを無効にします。

次に、[背景]タブを展開します。 #ffffffを背景色として追加します。

[デザイン]タブに交換し、バードロップダウンメニューを展開します。バーの背景色フィールドで、 ＃528bf2を色に追加します。

タイトルテキストドロップダウンメニューを展開します。タイトルフォントフィールドで、 Bebas Neueを選択します。タイトルテキストの色として#ffffffを選択し、タイトルテキストサイズとして22pxを選択します。

[コンテンツ]タブに戻します。今回は、最初のバーカウンターアイテムの設定アイコンをクリックします。

タイトルフィールドにテキストを入力し、パーセントフィールドを75に設定します。

クリックして、バーカウンターモジュールのメインコンテンツタブに戻ります。

設計設定が設定されたので、設定を保存するために最初のバーカウンターアイテムを簡単にコピーできます。

バーカウンターアイテムを複製し、タイトルとパーセントを目的の設定に変更します。

ステップ6：アニメーションを追加します

グループをより没頭させるために、いくつかのアニメーション効果を追加します。まず、メインの見出しにズーム効果を追加します。クリックして、グループのメイン見出しを選択します。 [デザイン]タブに移動し、下にスクロールしてアニメーションタブを展開します。アニメーションのズームを選択します。すべての設定をそのまま残します。

次に、クリックして2列目（3列の行）を展開します。最初の列の設定をクリックします。

[デザイン]タブをクリックして下にスクロールして、アニメーションタブを表示します。アニメーションスタイルのスライドを選択し、アニメーションの方向に適しています。他のすべての設定をそのまま残します。

行の[メインコンテンツ]タブに戻ります。今回は、3番目の列を選択します。 [デザイン]タブに移動し、[アニメーション]タブを展開し、アニメーションの[左]を選択します。他の設定をデフォルトで残します。

ステップ7：オーバーラップ行

レイアウトに少し余分なフレアを追加するために、2列目のマージンを調整してオーバーラップ効果を作成します。これにより、列が上方に押し上げられ、メインの見出しが良好な効果を重ねて重なります。レイアウトで2行目を選択し、[デザイン]タブに移動します。 [間隔]タブを展開して、設定を表示します。最上位で、値を-8％に設定します。

次に、zインデックス値を適用して、2行目を1行目に配置します。 [詳細設定]タブに移動し、位置設定を展開し、Zインデックスフィールドに999999を適用します。

スライダーをプレビューすると、2列目が押し上げられ、1列目がわずかにオーバーラップし、素晴らしいオーバーラップ効果が生じることがわかります。

ステップ8：応答性をテストします

最初のグループをコピーする前に、レイアウトの応答性をテストすることをお勧めします。 Divi 5のカスタマイズ可能なレスポンシブブレークポイントを使用して、調整を行います。

Divi 5には、Divi 4の3ではなく7つのブレークポイントがあります。これらのブレークポイントを使用して、レイアウトがどんな画面サイズでも信じられないほどに見えるようにすることができます。最初のグループをコピーする前に、ブレークポイントをナビゲートし、必要な調整を行います。

Divi 5で最高の新機能の1つは、モバイルデバイスの列の順序を変更する機能です。これは、すべての画面サイズで設計を機能的かつ効果的に保つための素晴らしい方法です。モバイルビューでは、レイアウト（3列の行）の2列目の2列目を選択します。

[コンテンツ]タブで、 [順序]タブを展開します。そこから、表示順序を-1に設定します。これにより、画像が上部に列が配置され、デスクトップビューやタブレットビューのように、画像が見出しのオーバーレイを可能にします。

ステップ9：複製グループ

すべてが二乗したら、最初のグループを簡単にコピーして、すべての手順を繰り返すことなく、背景勾配、テキスト、画像を変更できます。メインカルーセルグループコンテンツタブで、クリックして最初のグループを複製します。

コピーする前に、管理者ラベルをグループに割り当てて、識別を容易にします。

そこから、タイトルを変更し、画像を交換し、グループに新しい背景グラデーションを割り当てます。最初のグラデーションスライダーには＃FC6A3C 、 2番目に＃C52F00を使用します。

また、ホバーのボタンとバーのカウンターの色を＃3DFCCAと＃C52F00に変更することもできます。

また、2番目のグループのアニメーションタイミングを調整する必要があります。これにより、スライダーが進むまで他のスライドにアニメーションがロードされないようにします。メインの見出しモジュールで、 [デザイン]タブに移動し、アニメーションメニューを展開し、アニメーションの遅延を2000msに設定します。

3列の行についても同じことをします。最初の列と3番目の列で、アニメーションの遅延を2000msに設定します。

3番目のグループの変更

3番目のグループの場合、バックグラウンド勾配に＃71B953および＃617A56を使用します。

ボタンとバーカウンターモジュールの場合、ホバー色に＃BA54B3と＃654F64を使用します。

また、見出しモジュールのアニメーション遅延と、 2行目の1列目と3番目の列を4000msに変更する必要があります。

4番目のグループの変更

バックグラウンド勾配には、 ＃AD52B7および＃AD52B7を使用します。

バーカウンターとボタンモジュールには、＃83B853および＃83B853を使用します。

最後に、グループ内のメイン見出しでアニメーション遅延を6000msに設定し、3列の行の最初と3番目の列に加えます。

ステップ10：スライダーをプレビューして保存します

最後のステップは、レイアウトを保存し、プレビューして、手順が見逃されないようにすることです。ビジュアルビルダーで、右上隅の[保存]ボタンをクリックします。

[プレビュー]ボタンをクリックして、新しいタブでレイアウトを開きます。

完了すると、スライダーは次のようになります。

それでおしまい！グループCarouselモジュールは、Divi 5に多用の新しい追加です。これにより、あらゆるプロジェクト用にスライダーとカルーセルを作成でき、無制限のカスタマイズオプションを提供します。

フルスクリーンのカルーセルレイアウトをダウンロードします

この投稿で再作成したレイアウトを使用する場合は、以下のフォームからアクセスできます。フォルダをダウンロードして解凍すると、JSONファイルが見つかります。 DIVIライブラリに移動してファイルをアップロードして、ビルドする任意のページにアクセスして使用できるようにします。

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

無料でダウンロードしてください

Divi Newsletterに参加してください。究極のDiviランディングページレイアウトパックのコピーに加えて、他の驚くべき無料のDiviリソース、ヒント、トリックを大量にメールで送信します。フォローすると、すぐにDiviマスターになります。既にサブスクライブされている場合は、以下のメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

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

Divi 5で最初のカルーセルを今すぐ構築してください

Divi 5のグループCarouselモジュールを使用してカスタムフルスクリーンスライダーを作成すると、Webサイトで魅力的なエクスペリエンスを作成する可能性のある世界が開かれます。この投稿の手順に従って、アニメーション、レスポンシブブレークポイント、インタラクティブエフェクトなどの高度なカスタマイズオプションから、モジュールの機能を使用する方法を学びました。グループCarouselモジュールの柔軟性により、すべての画面サイズにわたってシームレスでプロフェッショナルな外観を維持しながら、想像できるもののスライドを構築できます。

最新のDivi 5 Public Alphaをダウンロードし、グループCarouselモジュールを試してみて、コメントやソーシャルメディアチャンネルであなたが考えていることをお知らせください。