Divi 5のグループカルーセルモジュールについて知っておくべきことすべて

Divi 5の最新モジュールの1つであるグループCarouselは、Divi Webサイトの視覚的に見事なカルーセルとアニメーションを簡単に作成できるようにするためにここにあります。この強力な追加により、Webデザイナーは、サードパーティのプラグインやカスタムCSSを必要とせずに、魅力的なWebサイトCarouselsを作成できます。洗練されたポートフォリオ、eコマースストア、ブログを構築するかどうかにかかわらず、グループCarouselモジュールは新しいレベルの創造性のロックを解除します。

この投稿では、グループCarouselモジュールについて知っておく必要があるすべてのことをカバーします。例と、使用方法に関する段階的なガイドを備えています。飛び込みましょう！

グループカルーセルモジュールは何ですか？

Divi 5のグループCarouselモジュールを使用すると、Webサイトに少し動きや互換性を追加できる動的で人目を引くカルーセルとスライダーを作成できます。ポートフォリオのピース、チームメンバー、または製品を紹介する場合でも、この多用途のモジュールを使用すると、コンテンツを動的にプルする郵便局のものを含む、ほぼあらゆる種類のカルーセルを構築できます。

各スライドは空白のキャンバスであるため、Diviモジュールを追加できるため、創造的で機能的なデザインのための優れたツールになります。

重要な機能

グループCarouselモジュールは、Divi 5の最適化された基礎に基づいて構築されており、荷重時間が速く滑らかな遷移を確保しています。 Divi 5のドラッグアンドドロップインターフェイスを使用すると、スライダーにモジュールを簡単に追加できます。レスポンシブコントロールは、スピーディーパフォーマンスを維持しながら、デスクトップ、タブレット、モバイル用のレイアウトを微調整するための微調整を行うことができます。

カスタマイズ可能なスライド

グループCarouselモジュールは、スライダーの数、そのコンテンツ、アニメーション設定を完全に制御します。スライドトランジション、タイミング、およびナビゲーションオプションを調整して、ビジョンに合ったシームレスなユーザーエクスペリエンスを作成できます。

ループビルダー付きの動的コンテンツ

Divi 5のループビルダーと統合されたこのモジュールは、投稿、用語、またはユーザーデータに基づいて動的なカルーセルをサポートしています。たとえば、カスタムポストタイプと高度なカスタムフィールド（ACF）を使用して証言カルーセルを作成し、手動の更新を必要とせずにクライアントのレビューやケーススタディを自動的に引き込むことができます。

設計の柔軟性

Divi 5の設計設定を活用して、独自のCarouselスタイルを構築できます。変換、フィルター、ボックスシャドウ、またはホバーエフェクトをスライドに適用し、グループ内の個々のモジュールをカスタマイズして、訪問者を引き付ける視覚的に魅力的なスライドを作成します。

グループカルーセルモジュールの使用方法

Divi 5にグループカルーセルを設定することは、直感的で柔軟です。ページに単一列の行を追加することから始めます。次に、ビジュアルビルダーのグループCarouselモジュールを選択し、ページに追加します。

[コンテンツ]タブで、クリックしてCarousel設定のドロップダウンメニューを展開します。

自動回転、センターモードを有効にし、スライドを3に表示するように設定します。

Elements Dropdownメニューでドットナビゲーションを表示します。 show Arrows exabledを残すか、無効にすることができます。

スタイリングを最初のグループに割り当てます

Carouselの設定を配置すると、最初のグループを追加できます。 [グループ設定]アイコンをクリックして、設定を表示します。

[コンテンツ]タブで、バックグラウンドドロップダウンメニューを展開します。 [背景画像]タブをクリックしてから、 [背景画像を追加]をクリックして、グループに画像を追加します。

次に、 [デザイン]タブに移動します。レイアウトドロップダウンメニューを展開し、 Justifyコンテンツを終了するように設定します。

次に、間隔ドロップダウンメニューを展開し、グループの左右に5％のマージンを追加します。これにより、カルーセルのグループ間に呼吸室が追加されます。

上部のパディングを100％に設定します。左右に25pxのパディングを適用します。

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

コンテンツをグループに追加することに注意を向けることができます。ブラック +アイコンをクリックして、分割モジュールを追加します。

[デザイン]タブに移動します。ラインドロップダウンメニューを展開し、色を#ffffffに変更します。

次に、サイジングタブを展開します。仕切りの重量を4pxに、幅を15％に設定します。

次に、グループに見出しモジュールを追加します。見出しにタイトルを与えます。

[デザイン]タブに切り替えます。見出しテキストの下で、見出しレベルをH2（またはその他の見出し）に設定し、見出しフォントのINTERを選択し、フォント重量のライト、見出しテキストの色の#ffffff 、見出しテキストサイズの2EMを選択します。

グループを複製する前に、[デザイン]タブに戻り、垂直ギャップを10pxに調整します。これにより、モジュール間の不要な垂直空間が排除されます。

追加のグループを追加します

最初のグループが設計されたので、スタイルのグループをコピーして、カルーセルのコンテンツ（背景画像とタイトル）を単純に交換できます。グループを8回複製すると、合計9つのスライドがあります。

グループを複製した後、グループのカルーセルはこのように見えるはずです。

私たちがここにいる間、各グループにユニークな名前を与えて、識別しやすいことをお勧めします。最初のグループの設定アイコンをクリックして、下にスクロールして管理ラベルになります。グループギリシャに名前を付けます。

カルーセルの2番目のグループをクリックします。 [背景]タブを展開し、画像を新しいものに置き換えます。

[コンテンツ]タブでは、 [管理者ラベル]フィールドに名前を追加することを忘れないでください。次に、メイン州の見出しモジュールのタイトルを変更します。

すべての追加グループで手順を繰り返します。完了すると、カルーセルはこのように見えるはずです。ビジュアルビルダーにいる間、ナビゲーションドットを使用してカルーセルをスクロールして、手順を見逃していないことを確認できます。

ご覧のとおり、いくつかのスライドのテキストを読みにくいです。これは、各グループアイテムを個別に編集することなく、Carouselレベルのデザインタブで修正できます。

グループとアクティブグループのカスタマイズ

グループCarouselモジュールでは、アクティブなグループと非アクティブなグループをスタイリングできます。重要なのは、グループカルーセルモジュール自体が空白のキャンバスとして機能し、その中のモジュールグループにスタイリングを適用することです。これにより、高レベルのカスタマイズが可能になり、一意のレイアウトとエフェクトを作成できます。

グループCarouselを作成したので、メインカルーセルの設定の[デザイン]タブに移動します。

グループドロップダウンメニューを展開します。このタブは、グループカルーセルに含まれるモジュールグループの設計設定を制御します。ここで適用する設定は、非アクティブなグループモジュールに適用されます。

[背景]タブを展開します。テキストが読みやすいことを確認するために、非アクティブなタブに光勾配を適用します。最初のグラデーションストップを0％不透明で＃000000に設定します。スライダーを右にわずかに調整します。背景画像の切り替えの上の場所勾配を有効にします。

2番目のグラデーションストップを40％の不透明度で＃000000に設定します。

背景画像の切り替えの上の場所勾配を有効にします。

次に、 [フィルター]タブを見つけます。非アクティブグループの飽和を減らして、背景画像に白黒効果を与えます。飽和スライダーを見つけて0に設定します。

次に、アクティブグループのドロップダウンメニューを展開し、 [背景]タブをクリックします。上記と同じ勾配設定を適用します。

背景画像の上にある場所のグラデーションをトグルすることを必ず有効にしてください。

アクティブグループの下でフィルタードロップダウンメニューを展開し、飽和スライダーを75％に調整します。これにより、アクティブなカルーセルアイテムのみが色付けされ、ユーザーはカルーセルのアクティブなスライドを識別できます。

レスポンシブレイアウトをカスタマイズします

グループCarouselがデスクトップの準備ができたので、Divi 5のカスタマイズ可能なレスポンシブブレークポイントを使用して、Carouselのモバイルバージョンをスタイリングします。デフォルトでは、Divi 5は3つのブレークポイントを有効にします。さまざまなデバイスサイズをさらに制御する場合は、利用可能な7つのブレークポイントすべてを使用できます。ビジュアルビルダーのトップバーの中央にあるEllipsisメニューをクリックします。

必要なブレークポイントを有効にし、 [保存]をクリックして続行します。

タブレットブレークポイントをクリックして、レイアウトがタブレットデバイスでどのように見えるかを表示します。カルーセルの設定まで下にスクロールし、スライドを調整して1に表示します。これは、電話全体や電話などの小さなブレークポイントにも適用されます。

最後に、画面の左上にあるプレビューボタンをクリックして、新しいタブでグループCarouselを表示します。

終了したら、グループCarouselは以下のビデオに似ているはずです。

それでおしまい！ Divi 5にグループカルーセルを構築するのは簡単で、信じられないほどの結果が得られます。

Divi 5のループビルダーとの統合

Divi 5のループビルダーは、グループモジュールを動的コンテンツディスプレイに変えることができる強力な機能です。この機能により、設計者は、コンテンツをWordPressから直接引き出す動的で自動化されたカルーセルを作成し、静的コンテンツを製品ディスプレイ、カテゴリアーカイブ、またはチームメンバーのカルーセルに数回クリックして変換できます。

ループビルダーをグループCarouselと統合することにより、Divi 5は、最小限の手動作業で洗練されたコンテンツ駆動型のカルーセルを作成するためにユーザーを強化し、ダイナミックWebデザインの傑出した機能になります。

ループビルダーは、グループCarouselが投稿、用語、またはユーザーデータを動的にループすることを可能にし、サイトの最新コンテンツを自動的に反映するカルーセルを作成します。 Loop BuilderはWordPressデータベースからデータを直接引き出すため、ブログ投稿、製品カテゴリ、またはユーザープロファイルを簡単に紹介できます。

たとえば、WooCommerceの用語を使用して、投稿タイプまたは製品カテゴリスライダーを使用してブログ投稿Carouselを作成することができ、モジュールは動的なコンテンツのニーズに非常に汎用性があります。

グループカルーセルモジュールの現実世界の例

グループCarouselモジュールの柔軟性により、さまざまなユースケースに適しています。何が可能かを示すためのいくつかの実際の例を以下に示します。

カスタムフル幅 /フルスクリーンスライダー

この例では、アイスクリームショップのシェイクを備えた全幅/フルスクリーンスライダーを作成しました。カルーセルを一度に1つのスライドを表示するように設定します。それぞれに背景画像、2つの見出し、および行動を促すボタンが含まれています。また、3秒の遅延の後、次のスライドに進むようにアニメーションを設定しました。グループCarouselとセクションを100VHに設定することで、この外観を実現できます。

チームメンバーのショーケース

ウェブサイトにチームメンバーを紹介したい場合は、グループCarouselモジュールを使用することは素晴らしい方法です。この例では、カルーセルに3列のレイアウトを構成しました。各スライドには、Diviのソーシャルフォローモジュールを使用したヘッドショット、名前、役割、およびソーシャルメディアリンクが含まれています。カルーセルを設定して、きれいでプロの外観のために、一度に1つのスライドをスクロールします。

カテゴリが紹介します

Divi 5のグループCarouselモジュールは、ループビルダーで完璧に機能します。これにより、Webサイトの製品カテゴリを特徴とする魅力的なスライダーを作成できます。各スライドは、カテゴリ名を動的に引き出し、画像を備えているため、製品を紹介するのに最適な方法です。この例では、フィルター効果を使用します

証言

グループカルーセルモジュールは、証言スライダーを作成するのにも最適です。最高の顧客レビュー、クライアントの声などを簡単に紹介できます。グループCarouselモジュールのおかげで、静的列や外部プラグインに制限されなくなりました。

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

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

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

ダウンロード

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

Divi 5のCarouselモジュールで創造的な可能性を解き放ちます

Divi 5のグループCarouselモジュールは、動的なDivi Webサイトを作成するための新しい可能性を解き放つ強力な追加です。魅力的な製品スライダーの作成から証言まで、このモジュールにより、Diviサイトにインタラクティブなコンテンツを追加しやすくなります。

Divi 5のRevamped Foundationがより多くの機能への道を開いたので、飛び込むのに最適な時期です！グループカルーセルモジュールをもう試しましたか？以下のコメントでお知らせください。