アコーディオン スライダーは楽しく魅力的な表示方法です。 コンテンツ 限られた空間の中で。 アコーディオン スライダーは通常、カーテンの折り目のように、水平方向に積み重ねられたいくつかの要素 (またはパネル) で構成されます。 パネルの XNUMX つにカーソルを置くと、パネルが拡大して表示されます。 コンテンツ 一方、他のアコーディオン パネルは収縮します。 ここで、伸縮によるアコーディオン効果が得られます。
このチュートリアルでは、レスポンシブ アコーディオン スライダーを作成する方法を紹介します。 Divi CSSのみを使用。 これを行うには、いくつかのモジュールを使用します Divi アコーディオンパネルとして機能します。 任意のモジュールを使用できますが、この例では、デスクトップとモバイルの両方で見栄えがよく (そして機能する) 美しいアコーディオン スライダーを作成するために、非常にクリエイティブな方法で Blurb モジュールを使用します。
それをチェック！
概要
このチュートリアルで作成するものの概要を次に示します。
チュートリアルを始めましょう
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、 Diviテーマ インストール済み (またはプラグイン Divi ビルダーを使用していない場合 Diviテーマ).
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルコンストラクター）でページを編集します。
- ライブラリにある5のさまざまな画像についてダウンロードして、チュートリアルに必要な背景画像として使用します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Diviでレスポンシブアコーディオンを使用してスライダーを作成します
ラインの作成
まず、通常のセクションに列の行を追加します。
次に、回線の設定を開き、次を更新します。
- 側溝幅：1
- 幅：100％
- 最大幅：800px
- 高さ：400px（デスクトップ）; 700px（タブレットと電話）
幅と最大幅の値は、必要に応じて変更できます。 アコーディオンはスケーリングされ、任意の行幅で機能します。 また、固定の高さを設定することは、デザインが機能するために非常に重要です。 子要素（列とモジュール）の高さは100％になります。 したがって、行の固定の高さを設定しない場合、子要素には高さがありません。
列パラメーター
行の高さが設定されたので、列の設定を開き、次のCSSコードをメイン要素に追加します。
オフィス
display:flex;flex-direction: row;align-items:center;height: 100%;
タブレット
flex-direction: column;
flexプロパティは、アコーディオンパネルをデスクトップでは水平に、タブレットと電話では垂直に配置します。 100％の高さにより、追加するモジュールでも100％の高さの値を使用できるようになります。
モジュールを使用してアコーディオンパネルを作成する
アコーディオンスライダーは、任意のタイプのモジュールを使用して構築できます。 必要に応じて、さまざまなモジュールを組み合わせてアコーディオンパネルとして機能させることができます。 ただし、この設計では、BlurbModsを使用します。
プレゼンテーションモジュールを行に追加することから始めます。
抽象モジュール設計
概要モジュールの設定を開き、次を更新します。
タイトルは架空のままにし、 コンテンツ 体から。 これはいつでも後で変更できます。
次に、プレゼンテーションアイコンを次のように更新します。
- アイコン（デスクトップ）：水平矢印線を表すアイコン（スクリーンショットを参照）
- アイコン（ホバー）：アイコンを確認します（スクリーンショットを参照）
- アイコン（タブレットと電話）：垂直矢印線を表すアイコン（スクリーンショットを参照）
コンテキスト
次に、次のように背景画像とグラデーションオーバーレイをブラーに与えます。
- 幅が1000ピクセル以上の背景画像を追加します
- 背景画像の位置：中央左
次に、グラデーション背景オーバーレイを追加します。
フロート
- 左のグラデーション背景（ホバー）：＃3e215b
- 右への背景のグラデーション（ホバー）：rgba（0,0,0,0）
- 勾配方向：90deg
- 背景画像の上にグラデーションを配置します：はい
アイコン
- アイコンの色：#ffffff
- 画像/アイコンの位置：左
次に、[デザイン]タブに移動し、以下を更新します。
テキストのタイトルと本文
- タイトルフォント：ポピンズ
- フォントタイトル：半太字
- テキストのタイトルの色：透明（デスクトップ）、＃ffffff（ホバー）
- テキストのタイトルサイズ：23px
- 本文の色：透明（デスクトップ）、＃ffffff（ホバー）
高さと箱の影
テキストがスタイリッシュになったら、次のようにモジュールに100％の高さとシャドウボックスを割り当てます。
- 高さ：100％
- ボックスシャドウ：スクリーンショットを参照
- ボックスの影水平位置：-12px
- ボックスの影垂直位置：0px
BlurbカスタムCSS
アコーディオンパネル（またはプレゼンテーションモジュール）を残りのモジュールと拡張および縮小するには、カスタムCSSを追加して、flex-growでモジュールのサイズを変更する必要があります。 アコーディオンを構成するモジュールは全部で5つあるので、デフォルト状態に「flex：1」を追加し、ホバー状態で「flex：5」に変更します。
[詳細設定]タブで、メインのBlurb要素である次のカスタムCSSを追加します。
オフィス
flex:1;position: relative !important;transition: flex 800ms !important;
タブレット
flex:5;
次に、次のカスタムcssをCSS Blurbコンテンツに追加します。
オフィス
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
タブレット
width: 100%;height: 100%;position: relative !important;
オーバーフローと移行
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
- 移行期間：400ms
- 移行速度曲線：線形
上手！ それはプレゼンテーションモジュールの真剣なカスタマイズでした。 しかし、良いニュースは、残りのアコーディオンパネルを作成するためにそれらを複製することだけです。
より多くのアコーディオンパネルのためにブラーを複製します
プレゼンテーションモジュールにカーソルを合わせ、複製アイコンをXNUMX回クリックして、合計XNUMXつのアコーディオンパネル（またはモジュール）を作成します。
次に、複製した新しいブラーのそれぞれの背景画像を更新します。
最終結果
最終的な考え
この応答性の高いアコーディオンスライダーには、実際に使用するのを楽しくするいくつかのユニークな要素があります。 アコーディオンパネルは、予期しない問題なしにホバリングしながら伸縮します。 また、ホバリング中やモバイルでは、プレゼンテーションアイコンが変化してUXが向上します。 このデザインが次のプロジェクトに役立つことを願っています。
