オーバーラップをDiviのスティッキーオプションと組み合わせて、簡単なトランジションを作成する方法

テクノロジーが進化し続けるにつれて、デザインも進化します。 これまで以上に、Webサイトがどのように作成されているのかを驚かせたり、不思議に思ったりするWebサイトに出くわす可能性があります。 スクロール操作が行われているWebサイトは、すべてのタイプのビジネスに適しているわけではありませんが、さらに一歩進んだ方法を知っていると、良い印象を残すのに特に役立ちます。 Diviを使用すると、1行のコードに触れることなく、多くのことがすでに可能です。 今日のチュートリアルは、Diviを別の観点から理解するのに役立ちます。 Diviのスティッキーオプションを他の組み込み設定と組み合わせて、簡単なトランジションを作成する方法を紹介します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

1.設計構造を再作成する

新しいセクションを追加

間隔

このチュートリアルの最初の部分では、Divi内の設計構造の再作成に焦点を当てます。 次に、パート2では、この投稿のプレビューで気付くことができる効果を実現するために、すべてのスティッキーオプションを確認することに時間を費やします。 作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、[デザイン]タブに移動して、下部のパディングを追加します。

• ボトムパディング：100vh

行＃1を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、それに応じてサイズ設定を変更します。

• 幅：90％
• 最大幅：100％

Zインデックス

この行にもazインデックスを割り当てます。

• Zインデックス：1

画像モジュールを列に追加

画像ボックスを空のままにします

イメージモジュールから始めて、モジュールを追加します。 コンテンツボックスは空のままにします。

代わりに背景画像を使用する

代わりに、選択した背景画像を使用してください。

• 背景画像サイズ：カバー

サイジング

次に、モジュールの幅を変更します。

• 幅：100％

間隔

次に、間隔の設定にカスタムの上下のパディングを適用します。

• トップパディング：40vh
• ボトムパディング：40vh

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

H2コンテンツを追加する

次のモジュールに進みます。これは、選択したH2コンテンツを含むテキストモジュールです。

H2テキスト設定

モジュールのH2テキスト設定を適宜変更します。

• 見出し2フォント：Montserrat
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：#ffffff
• 見出し2テキストサイズ：
  • デスクトップ：10vw
  • タブレット：14vw
  • 電話：15vw
• 見出し2文字の間隔：-0.5vw

サイジング

モジュールも「100％」であることを確認してください。

• 幅：100％

ポジション

そして、[詳細設定]タブでモジュールを再配置します。

• 位置：絶対
• 場所：センター

行＃2を追加

カラム構造

次の行に進みます。 次の列構造を使用します。

サイジング

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

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

Zインデックス

この行にもazインデックスを割り当てます。

• Zインデックス：2

列1の間隔

最初の列の設定を開き、左右のパディングを割り当てて、行の設定を完了します。

• 左パディング：5％
• 右パディング：5％

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

H3コンテンツを追加する

行の設定が完了したので、モジュールを追加します。 選択したH3コンテンツを含むテキストモジュールを列1に追加します。

H3テキスト設定

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

• 見出し3フォント：Montserrat
• 見出し3フォントスタイル：下線
• 見出し3下線の色：#ffffff
• 見出し3下線スタイル：実線
• 見出し3のテキストの色：#ffffff
• 見出し3テキストサイズ：
  • デスクトップ：4vw
  • タブレットと電話：10vw
• 見出し3文字の間隔：-3px

間隔

小さい画面サイズにいくつかの右パディングを追加します。

• 右パディング：20％（タブレットと電話のみ）

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

コンテンツを追加する

選択した説明コンテンツを含む別のテキストモジュールを列2に追加します。

背景色

次に背景色を変更します。

• 背景色：#ffffff

テキスト設定

次に、テキスト設定を次のように変更します。

• テキストフォント：プレイフェアディスプレイ
• テキストフォントスタイル：斜体
• 文字サイズ：
  • デスクトップ：1.6vw
  • タブレット：3vw
  • 電話：4vw
• テキスト行の高さ：1.5em

間隔

いくつかのカスタムパディング値も適用します。

• トップパディング：10vh
• ボトムパディング：10vh
• 左パディング：10％
• 右パディング：10％

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

コピーを追加

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

ボタンの設定

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

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

• ボタンのフォントスタイル：下線
• ボタンの下線の色：＃000000
• ボタンの下線スタイル：実線

間隔

いくつかのカスタムパディング値も追加します。

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

ポジション

そして、[詳細設定]タブでモジュールを再配置します。

• 位置：絶対
• 場所：右下

2.スティッキーエフェクトを適用する

行＃1の画像モジュール

スティッキー設定

デザインの基礎を構築したので、カスタムスティッキーエフェクトの適用を開始します。 行＃1のイメージモジュールを開き、次のようにモジュールをスティッキーにします。

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

スティッキーサイジング

スティッキー設定を適用すると、モジュールのスティッキースタイルも変更できます。 最初に行うことは、粘着性のある状態で幅を変更することです。

• スティッキー幅：80％

スティッキースペーシング

次に、粘着性のある上部と下部のパディングを変更します。

• スティッキートップパディング：50vh
• スティッキーボトムパディング：50vh

粘着性のあるグラデーションの背景

モジュールにもスティッキーグラデーションの背景を適用します。

• 色1：＃00336b
• 色2：rgba（41,196,169,0）
• グラデーションタイプ：線形
• グラデーション方向：90度
• 背景画像の上にグラデーションを配置：はい

遷移

また、スムーズな移行を確実にするために、モジュールの移行期間を長くします。

• 移行時間：1500ms

行＃2の列2

列2スティッキー設定

次に、2行目の2列目をスティッキーにします。

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

スティッキー列のテキストモジュール

粘着性のある背景色

行＃2の列2がスティッキーになっているので、この列内のテキストモジュールにいくつかのスティッキースタイルを適用できます。 粘着性のある状態で背景色を変更することから始めます。

• 粘着性のある背景色：＃333333

スティッキーテキストの色

次に、粘着性のある状態でテキストの色を変更します。

• スティッキーテキストの色：#ffffff

遷移

そして、[詳細設定]タブで遷移期間を長くして、モジュール設定を完了します。 それでおしまい！

• 移行時間：1000ms

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのスティッキーオプションを使ってクリエイティブになる方法を紹介しました。 具体的には、オーバーラップをDiviのスティッキーオプションと組み合わせて、簡単なトランジションを作成する方法を示しました。 このチュートリアル全体で使用されたアプローチを取得すると、無限のさまざまなバリエーションを作成できるようになります。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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