Diviの新しいデザイン機能を使用して美しいセクショントランジションを作成する方法

このDiviチュートリアルでは、組み込みのDiviオプション以外を使用せずに美しいセクショントランジションを作成する方法を紹介します。

セクションは、Webサイトで共有するすべてのコンテンツの基盤です。 各セクションは章であり、あるセクションから別のセクションに移動することは、ストーリーテリングプロセスの一部です。 この移行をできるだけスムーズにすると、明確に表現しようとしているメッセージが強調されます。 これを支援するために、次のWebサイトプロジェクト用に美しいセクショントランジションを作成する方法を紹介します。

スニークピーク

さまざまなセクションの遷移すべてに個別に飛び込む前に、期待できることを見てみましょう。

Diviの新しいデザイン機能を使用して美しいセクショントランジションを作成する方法

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

セクションを再作成する

すべての例で使用する2つのセクションを再作成することから始めます。 これらの2つのセクションでは、トランジションを最大限に活用するために必要なパディングを使用しました。 ただし、高さが異なるセクションを使用している場合は、セクションに完全に一致するように、使用されているグラデーションの背景をわずかに調整する必要がある可能性があります。

最初のセクションを作成する

最初の標準セクションを作成し、全幅の行を選択することから始めます。

セクション設定

[デザイン]タブの[間隔]サブカテゴリ内に追加できる「300px」の上下のパディングが必要になります。

最初のテキストモジュール

次に、テキストモジュールを全幅の行に追加します。 表示するテキストを入力して、[デザイン]タブに移動します。 [デザイン]タブで、[テキスト]サブカテゴリに次の設定を使用します。

• テキストフォント：Comfortaa
• テキストフォントサイズ：50
• テキスト行の高さ：1.7em
• テキストの向き：中央

2番目のテキストモジュール

2番目のテキストモジュールについても同じことを行いますが、代わりに次の設定を使用します。

• テキストフォント：Comfortaa
• テキストフォントサイズ：16
• テキスト行の高さ：1.7em
• テキストの向き：中央

ボタンモジュール

最後に、ボタンモジュールも追加します。 [デザイン]タブで中央揃えを選択することから始めます。

次に、ボタンのサブカテゴリを開き、[ボタンにカスタムスタイルを使用する]オプションを有効にして、ボタンのテキストサイズとして[20]を選択します。

ボタンサブカテゴリにある間は、ボタンに次のグラデーションの背景を使用します。

• ファーストカラー：＃2b87da
• 2番目の色：＃29c4a9
• グラデーションタイプ：線形
• 勾配方向：162度
• 開始位置：0％
• 終了位置：100％

2番目のセクションを作成する

別の標準セクションを追加しますが、代わりに3列の行を選択します。

セクション設定

2番目のセクションでは、上部と下部にも「300px」のパディングを使用します。

宣伝文モジュール

次に、行の最初の列に宣伝文モジュールを追加します。 表示するテキストを決定したら、[コンテンツ]タブを下にスクロールし、[アイコンを使用]オプションを有効にして、アイコンを選択します。

それが完了したら、[デザイン]タブに移動し、アイコンサブカテゴリに次の設定を使用します。

• アイコンの色：＃515151
• 画像/アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：55px

次に、次の設定がヘッダーテキストサブカテゴリに適用されることを確認します。

• ヘッダーフォント：Comfortaa
• ヘッダーテキストの配置：中央
• ヘッダーフォントサイズ：18

そして最後に、これらは本文テキストサブカテゴリの設定です。

• ボディフォント：Comfortaa
• 本文の配置：中央
• ボディフォントサイズ：14
• ボディラインの高さ：1.7em

クローン宣伝文モジュール

宣伝文モジュールを作成したら、それを2回複製し、行の他の2列に配置します。

1.ずっと対角線

セクションを作成したので、セクショントランジションの追加を開始します。 最初の例では、単純な対角線で構成される作成方法を示します。

最初のセクションのグラデーション背景設定

最初のセクションの設定を開き、次のグラデーションの背景を追加します。

• 最初の色：#dddddd
• 2番目の色：＃f7f7f7
• グラデーションタイプ：線形
• グラデーション方向：183度
• 開始位置：85％
• 終了位置：70.05％

2番目のセクションのグラデーション背景設定

2番目のセクションでは、代わりに次のグラデーション背景設定が必要になります。

• 最初の色：＃f7f7f7
• 2番目の色：#dddddd
• グラデーションタイプ：線形
• グラデーション方向：183度
• 開始位置：85％
• 終了位置：69.05％

2番目のセクションの上部パディングを削除します

この例で最後に行う必要があるのは、2番目のセクションの上部のパディングを削除することです。

2.途中で会いましょう

共有したい次の例は、2つの反対のグラデーション背景が使用されている非常にエレガントな例です。 この効果を利用することで、セクションはお互いにフォローアップしているように感じます。

最初のセクションのグラデーション背景設定

最初のセクションでは、次のグラデーションの背景設定が必要になります。

• 最初の色：rgba（255,255,255,0）
• 2番目の色：rgba（224,43,32,0.07）
• グラデーションタイプ：ラジアル
• 半径方向：左上
• 開始位置：60％
• 終了位置：50％

2番目のセクションのグラデーション背景設定

2番目のセクションでは、次のグラデーションの背景をお楽しみいただけます。

• 最初の色：rgba（255,255,255,0）
• 2番目の色：rgba（224,43,32,0.33）
• グラデーションタイプ：ラジアル
• 半径方向：右下
• 開始位置：58％
• 終了位置：50％

3.フュージョン

次の例は他の例とは少し異なります。 下の画像でわかる結果を得るには、両方のセクションの間に追加のセクションが必要になります。

最初のセクションのグラデーション背景設定

最初のセクションでは、次のグラデーションの背景が必要になります。

• 最初の色：rgba（12,113,195,0.19）
• 2番目の色：rgba（255,255,255,0.39）
• グラデーションタイプ：ラジアル
• 半径方向：左下
• 開始位置：50％
• 終了位置：50％

2番目のセクションのグラデーション背景設定

2番目のセクションでは、次のグラデーションの背景設定を使用します。

• 最初の色：rgba（224,43,32,0.17）
• 2番目の色：rgba（255,255,255,0.39）
• グラデーションタイプ：ラジアル
• 半径方向：右上
• 開始位置：50％
• 終了位置：50％

間に新しい標準セクションを追加

両方のセクションにグラデーションの背景を追加したら、それらの間にセクションを追加します。

新しいセクションにグラデーションの背景色を追加する

その新しいセクションには、次の設定を使用して、グラデーションの背景も必要になります。

• 最初の色：rgba（12,113,195,0.19）
• 2番目の色：rgba（224,43,32,0.17）
• グラデーションタイプ：線形
• グラデーション方向：92度
• 開始位置：43％
• 終了位置：62％

4.逆

次に、他のセクションほど印象的ではないが、セクションに微妙なタッチを加えることができるセクション遷移もあります。

最初のセクションのグラデーション背景設定

最初のセクションのグラデーションの背景は次のとおりです。

• 最初の色：＃f2f2f2
• 2番目の色：rgba（104,153,193,0.58）
• グラデーションタイプ：ラジアル
• 半径方向：右下
• 開始位置：7.9％
• 終了位置：7.9％

2番目のセクションのグラデーション背景設定

また、2番目のグラデーションの背景には、次のグラデーションの背景設定が必要です。

• 最初の色：rgba（104,153,193,0.58）
• 2番目の色：＃f2f2f2
• グラデーションタイプ：ラジアル
• 半径方向：右上
• 開始位置：8％
• 終了位置：8％

5.ポインタ

5番目の例は、他の例よりも少しクリーンでミニマルに見えます。 ポインタまたは円（あるいはその両方）を確認することで、2つの方法で遷移を認識することができます。

最初のセクションのグラデーション背景設定

最初のセクションには、次のグラデーションの背景を使用します。

• 最初の色：＃f4f4f4
• 2番目の色：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：上
• 開始位置：88％
• 終了位置：88.05％

2番目のセクションのグラデーション背景設定

最後に、次のグラデーション背景設定を2番目のセクションに適用します。

• 最初の色：rgba（43,135,218,0）
• 2番目の色：rgba（12,113,195,0.43）
• グラデーションタイプ：ラジアル
• 半径方向：下
• 開始位置：87％
• 終了位置：87％

6.パズル

最後の例では、セクションが一緒に属しているように感じさせます。

最初のセクションのグラデーション背景設定

最初のセクションの設定を開き、次のグラデーションの背景を使用します。

• 最初の色：rgba（160,181,193,0.46）
• 2番目の色：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：上
• 開始位置：56.3％
• 終了位置：43％

2番目のセクションのグラデーション背景設定

次に、2番目のセクションに次のグラデーション背景設定を使用します。

• 最初の色：rgba（242,242,242,0）
• 2番目の色：rgba（160,181,193,0.46）
• グラデーションタイプ：ラジアル
• 半径方向：上
• 開始位置：56％
• 終了位置：40％

最初のセクションのパディングを変更する

2つのセクションをより適切にフィットさせるために、最初のセクションの上部と下部のパディングを「150px」に変更します。

2番目のセクションの上部パディングを削除します

最後に、2番目のセクションの上部のパディングも削除します。

最終的な考え

セクション遷移は、さまざまなセクションとその目的を結び付けるのに役立ちます。 この投稿では、Diviの組み込みオプション以外を使用せずに再作成できる6つの例を共有しました。 質問や提案がある場合; 下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

NikVector / shutterstock.comによる注目の画像