Diviでスティッキーページ見出しを使用してクリック可能なアコーディオンを作成する方法
公開: 2020-09-03ディビの新しいスティッキーポジションオプションは、多くの新しくエキサイティングなデザインの可能性への扉を開きます。 このチュートリアルでは、Diviのスティッキーポジションオプションとスムーズなスクロールアンカーリンクを組み合わせて、ページにインデックスを付けてナビゲートするアコーディオンのような方法を作成する方法を紹介します。 Diviの組み込みオプションを使用すると、ビルドが非常に簡単になるため、追加のCSSやその他のコードは必要ありません。 完了すると、ページを整理し、デスクトップとモバイルでのユーザーエクスペリエンスを向上させる独自の方法が得られます。
始めましょう！
スニークピーク
これは、このチュートリアルで構築するデザインの概要です。
ここでは、スティッキーページの見出しがブラウザウィンドウの上下に貼り付けられ、アコーディオンのように積み重なっているのがわかります。
ここでは、付箋の見出しの1つをクリックすると、（スムーズにスクロールするアンカーリンクを使用して）ページのそのセクションにアコーディオンのようにジャンプすることがわかります。
これがモバイルの機能でもあります。
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。
[インポート]ボタンをクリックします。
移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。
次に、インポートボタンをクリックします。
完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
スティッキー行の作成
手始めに、スティッキーな行を作成しましょう。 これを行うには、デフォルトのセクションに1列の行を追加します。
行設定を開きます。 [詳細設定]タブで、次のようにスティッキーの位置を更新します。
- スティッキーポジション：上下にこだわる
これにより、ユーザーが下にスクロールすると行がブラウザーウィンドウの上部に固定され、次にユーザーが上にスクロールすると行がブラウザーウィンドウの下部に固定されます。
スティッキーロウのスタイリング
スティッキー位置が設定されたので、組み込みのスティッキースタイルオプションを使用して行のスタイリングを開始できます。これにより、スティッキー位置が有効（またはスタック）のときに要素に特定のスタイルを与えることができます。 行については、スタック位置にあるときはいつでも背景を暗い色に変更する必要があります。 これを行うには、行設定を開き、以下を更新します。
- 背景色（デスクトップ）：＃ffffff
- 背景色（スティッキー）：＃051923
[デザイン]タブで、以下を更新します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅（タブレットと電話）：100％
- パディング：0px上、0px下
次に、見出しと下のコンテンツの間の境界線として機能するように、行に下の境界線を付けます。 そして、行がスティッキーな位置になったら、代わりに左の境界線を表示します。
境界線オプションの切り替えで、以下を更新します。
- ボーダーカラー：＃6eeb83
- 下の境界線の幅（デスクトップ）：8px
- 下の境界線の幅（スティッキー）：0px
- 左の境界線の幅（デスクトップ）：0px
- 左ボーダー幅（スティッキー）：8px
スティッキー見出しテキストの作成
ページ見出しテキストを作成するには、行に新しいテキストモジュールを追加します。
次に、次のHTMLを本文のコンテンツに貼り付けます。
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>
また、ホバー時に背景色も更新します…
- 背景色（ホバー）：rgba（255,255,255,0.2）
これにより、ユーザーが見出しをクリックできることがより明確になります。
スティッキーな見出しテキストのスタイリング
[デザイン]タブで、以下を更新します。
- 見出し2フォント：Montserrat
- 見出し2テキストの配置：左
- 見出し2テキストの色（デスクトップ）：デフォルト（または黒）
- 見出し2テキストの色（スティッキー）：＃ffffff
- 見出し2テキストサイズ：80px（デスクトップ）、22px（スティッキー）、28px（電話）
- 見出し2行の高さ：1.3em（デスクトップ）、1em（スティッキー）
次に、次のようにパディングを更新します。
- パディング（デスクトップ）：上15px、下15px
- パディング（スティッキー）：上10px、下0px、左20px
- パディング（タブレットと電話）：上15ピクセル、下15ピクセル、左15ピクセル、右15ピクセル
モックページコンテンツの作成
スティッキー行が配置されたら、見出しの下にモックページコンテンツを含む別の行を追加できます。 これを行うには、スティッキー行の下に新しい1列の行を作成します。
次に、新しいテキストモジュールを行に追加し、いくつかのモックコンテンツを貼り付けます。
より粘着性のあるページ見出しとコンテンツのために必要に応じてセクションを複製する
この時点で、セクションを複製するだけで、粘着性のある見出しを持つ追加のページセクションを作成するための基本的なデザインが整いました。
重複セクション
別のセクションを作成するには、スティッキーな行/見出しとモックコンテンツの行を含む既存のセクションを複製します。 これにより、ページの次のセクションを作成する開発プロセスがスピードアップします。
テキストコンテンツと行の境界線の色を更新します
複製セクションで、テキストモジュール内のテキストを更新してから、行設定の下の境界線の色を更新します。
必要に応じて繰り返す
引き続きセクションを複製し、必要に応じてテキストの内容と行の境界線の色を更新します。 この例では、セクションをさらに2回複製して、アコーディオンを構成する合計4つのスティッキーページ見出しを作成します。
スティッキーページ見出しへのアンカーリンクの追加
現在、この機能により、ユーザーはページを下にスクロールして、アコーディオンのように見出しを上下に貼り付けることができます。 ここで、見出しをクリック可能にして、ユーザーがスティッキーな見出しの1つをクリックすると、ページのそのセクションに移動できるようにします。 これは、アンカーリンクを使用して行われます。
アンカーリンクを追加するには、最初に、リンク先のセクションにCSSIDを追加する必要があります。
セクション1CSSIDを追加します
セクションの設定を開き、次のCSSIDを追加します。
- CSS ID：1つ
次に、スティッキー行の設定を開き、次の行リンクURLを追加します。
- 行リンクURL：#one
これで、ユーザーが行/見出しをクリックすると、ページはこの最初のセクションにジャンプします。
セクション2CSSIDを追加します
次に、2番目の見出しのアンカーリンクを追加する必要があります。
2番目のセクション設定を開き、次のCSSIDを追加します。
- CSS ID：2
セクション1スティッキー行リンクURLを追加
次に、2番目のセクション内のスティッキー行の設定を開き、行リンクURLを追加します。
- 行リンクURL：#two
セクション3CSSIDを追加します
次に、3番目の見出しのアンカーリンクを追加する必要があります。
3番目のセクション設定を開き、次のCSSIDを追加します。
- CSS ID：3
セクション1スティッキー行リンクURLを追加
次に、3番目のセクション内のスティッキー行の設定を開き、行リンクURLを追加します。
- 行リンクURL：＃three
セクション4CSSIDを追加します
最後に、4番目の見出しのアンカーリンクを追加する必要があります。
4番目のセクション設定を開き、次のCSSIDを追加します。
- CSS ID：4
セクション1スティッキー行リンクURLを追加
次に、4番目のセクション内のスティッキー行の設定を開き、行リンクURLを追加します。
- 行リンクURL：＃four
最終結果
ここでは、スティッキーページの見出しがブラウザウィンドウの上下に貼り付けられ、アコーディオンのように積み重なっているのがわかります。
ここでは、付箋の見出しの1つをクリックすると、（スムーズにスクロールするアンカーリンクを使用して）ページのそのセクションにアコーディオンのようにジャンプすることがわかります。
これがモバイルの機能でもあります。
最終的な考え
このデザインは、独自の方法でスティッキーポジションオプションを使用しています。 ユーザーがスクロールしてもページ見出しが表示されたままになるだけでなく、各見出しをクリックして、アンカーリンクを使用して特定のセクションに移動できます。 結果は、ページ全体のアコーディオンによく似ています。 このデザインは、長い形式のコンテンツのインデックス作成や、ユーザーフレンドリーなポケットベルの作成に間違いなく役立ちます。
コメントでお返事をお待ちしております。
乾杯！