Diviでスティッキーセクションタイトルを作成する方法

ページをデザインする方法は、ブランドを直接反映しています。 そのため、デザインのブレインストーミングのある時点で、すべてのページでパターンを生成するのに役立つ独自のデザイン要素を見つけてWebサイトに追加することができます。 ウェブサイトのアイデンティティを強調するユニークな方法の1つは、粘着性のあるセクションタイトルを使用することです。 これらのスティッキーセクションのタイトルは、ブラウザの上部に貼り付けることで、訪問者のナビゲーション動作に従います。 このチュートリアルでは、Diviのスティッキーオプションを使用してスティッキーセクションタイトルを作成する方法を示します。 スティッキーセクションのタイトルは、訪問者がスクロールすると強調されなくなりますが、訪問者が現在のセクションを認識できるように十分に表示されます。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

レイアウトを無料でダウンロード

無料のレイアウトを手に入れるには、まず下のボタンを使用してそれらをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

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

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

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

私たちのYoutubeチャンネルを購読する

1.セクションデザインを作成する

新しいセクションを追加

間隔

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、上部と下部のパディングを適用します。

• トップパディング：200px
• ボトムパディング：200px

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

列にテキストモジュールを追加

H2コンテンツを追加する

次に、テキストモジュールを行の列に追加し、選択したH2コンテンツを挿入します。

H2テキスト設定

モジュールの[デザイン]タブに移動し、H2テキスト設定を次のように変更します。

• 見出し2フォント：ポピンズ
• 見出し2フォントの太さ：半太字
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃000000
• 見出し2テキストサイズ：
  • デスクトップ：20vw
  • タブレットと電話：28vw

行＃2を追加

カラム構造

次の列構造を使用して、前の行のすぐ下に別の行を追加します。

サイジング

行設定を開き、それに応じてサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

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

コンテンツを追加する

次に、最初のテキストモジュールを列2に追加し、選択した説明コンテンツをいくつか追加します。

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：ポピンズ
• テキストの色：＃000000
• 文字サイズ：
  • デスクトップ：2vw
  • タブレット：4vw
  • 電話：5vw
• テキスト文字の間隔：-0.1vw
• テキスト行の高さ：1.6em

サイジング

さまざまな画面サイズにわたってサイズ設定も変更します。

• 幅：
  • デスクトップ：70％
  • タブレットと電話：90％
• モジュールの配置：中央

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

画像をアップロード

次のモジュールである画像モジュールに進みます。 お好みの画像をアップロードしてください。

サイジング

モジュールのデザインタブに移動し、画像に全幅を強制します。

• 全幅を強制：はい

間隔

上マージンも追加します。

• トップマージン：100px

ボタンモジュールを列2に追加

コピーを追加

次は、ボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

それに応じてモジュールのボタン設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：
  • デスクトップ：1.5vw
  • タブレット：2.5vw
  • 電話：3.5vw
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃f6223e
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px

• ボタンフォント：ポピン
• ボタンアイコンを表示：はい
• ボタンアイコンの配置：左
• ボタンのホバー時にアイコンのみを表示：いいえ

間隔

そして、さまざまな画面サイズにカスタムパディング値を追加して、モジュール設定を完了します。

• トップパディング：
  • デスクトップとタブレット：3％
  • 電話番号：5％
• ボトムパディング：
  • デスクトップとタブレット：3％
  • 電話番号：5％
• 左パディング：
  • デスクトップ：5vw
  • タブレット：8vw
  • 電話番号：12vw
• 右パディング：
  • デスクトップ：5vw
  • タブレット：8vw
  • 電話番号：12vw

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

箇条書きのコンテンツを追加する

この列に追加する次の最後のモジュールは、別のテキストモジュールです。 選択したリストアイテムをコンテンツボックスに追加します。

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：ポピンズ
• テキストの色：＃000000
• 文字サイズ：
  • デスクトップ：2vw
  • タブレット：4vw
  • 電話：5vw
• テキスト文字の間隔：-0.1vw
• テキスト行の高さ：1.6em

順序付きリストのテキスト設定

順序付きリストのテキスト設定にもいくつか変更を加えます。

• 順序付きリストのテキストの色：＃ff2340
• 注文リスト行の高さ：1.6em
• 順序付きリストスタイルタイプ：upper-roman
• 順序付きリストスタイルの位置：外側

コンテンツボックスのアイテムを個別にリストするために黒のテキストの色を追加する

次に、コンテンツボックスに移動し、リストアイテムのそれぞれに黒のテキストの色を手動で追加して、アイテムを黒に戻します。

サイジング

次に、さまざまな画面サイズでサイズ設定を変更します。

• 幅：
  • デスクトップ：70％
  • タブレットと電話：90％
• モジュールの配置：中央

間隔

モジュールの間隔設定にも、いくつかのカスタムマージンとパディング値を適用します。

• トップマージン：50px
• 左パディング：5％
• 右パディング：5％

2.セクションタイトルにスティッキー効果を適用します

行にスティッキー効果を追加する

デザインの基礎を確立したので、この投稿のプレビューで確認できた効果を実現するときが来ました。 これを行うには、行の設定を開き、[詳細設定]タブに移動して、次の設定を適用することにより、最初の行全体をスティッキーにします。

• スティッキーポジション：トップに固執
• スティッキーボトムリミット：セクション
• 周囲の粘着要素からのオフセット：はい
• トランジションのデフォルトスタイルとスティッキースタイル

行Zインデックスを変更する

スティッキー行がデザインの2行目より下にあることを確認するために、スティッキー行に「1」のazインデックスを割り当てます。 スクロールすると、スティッキー行とそのテキストモジュールが2番目の行のモジュールの下に表示されます。

• Zインデックス：1

列2ブレンドモードの追加（行＃2）

ただし、この投稿のプレビューでわかるように、スティッキーセクションのタイトルは常に表示されます。 その効果を実現するために、2番目の行の2番目の列にブレンドモジュールを追加します。 これは、スティッキー行の低いzインデックスを維持しながら、スティッキー行と2番目の行のモジュールをブレンドするのに役立ちます。

• ブレンドモード：乗算

スティッキーH2テキスト設定の変更

行＃1のテキストモジュールにもいくつかのスティッキースタイルを適用します。 スティッキー状態のH2テキストの色を変更することから始め、カスタムテキストシャドウも適用します。

• スティッキーH2テキストの色：#ffffff
• 見出し2テキストシャドウ：2番目のオプション（以下の印刷画面を参照）
• 見出し2テキストの影の色：
  • デフォルト：rgba（0,0,0,0）
  • スティッキー：rgba（0,0,0,0.08）

スティッキーテキストモジュールの間隔を変更する

間隔設定で負のスティッキー左マージンを使用して、モジュールの位置も変更します

• スティッキー左マージン：-35％

テキストモジュールの移行期間を長くする

また、スムーズな移行を保証するために、[詳細設定]タブで移行期間を長くします。

• 移行時間：500ms

3.再利用セクション

クローンセクション

スティッキーセクションのタイトルを含む1つの完成したセクションができたので、クローンを作成することで、セクション全体を何度でも再利用できます。

タイトルコンテンツの変更

必ず最初の行のタイトルの内容を変更してください。

テキストサイズを文字長に一致させる

新しいH2タイトルの文字数に応じて、見出し2のテキストサイズを調整することをお勧めします。

他のすべてのコンテンツと画像を変更する

そしてもちろん、重複セクションの他のすべてのコンテンツも変更する必要があります。 それでおしまい！

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのスティッキーオプションを使ってクリエイティブになる方法を紹介しました。 具体的には、作成しているデザイン全体で訪問者をフォローするスティッキーセクションタイトルを作成する方法を示しました。 この効果により、デザインに追加の次元とシームレスな移行がもたらされます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。