微妙なモーションシェイプで新しいDiviセクションをマークする方法

訪問者がページの別のセクションに移動していることを訪問者に認識させる方法はたくさんあります。 Divi内には、すぐに使用できるさまざまなセクションディバイダーがあります。 しかし、それを明確にするためのよりアニメーション化された方法を探しているなら、このチュートリアルを気に入るはずです。 微妙なモーションシェイプを使用して新しいDiviセクションをマークする方法を紹介します。 Diviの組み込みオプションを使用してこれらの形状を作成し、Diviのスクロール効果を使用してそれらにモーションを追加します。 可能性は無限大ですが、すぐに使用できる3つの設計例を紹介します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

例3

デスクトップ

モバイル

微妙なモーションシェイプのレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

一般的な手順

アートギャラリーのランディングページのレイアウトをアップロードする

このチュートリアルでは、アートギャラリーレイアウトパックを使用しますが、構築しているあらゆる種類のWebサイトにこの手法を適用できます。 新しいページを追加し、レイアウトパックのランディングページをアップロードします。

セクション＃1の下部に新しい行を追加

カラム構造

ここで、このチュートリアルの最初に示した3つの例すべてに適用されるいくつかの基本的な手順を実行します。 まず、次の列構造を使用して、ページの最初のセクションの下部に新しい行を追加します。

サイジング

行設定を開き、次のようにサイズ設定を変更します。

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

間隔

マージンとパディングの値も変更します。

• トップマージン：10vw
• トップパディング：0px
• ボトムパディング：0px

セクション＃1の下部パディングを削除します

行とモーションシェイプがセクションの下部に表示されるようにするには、セクションの下部のパディングを削除する必要があります。

• ボトムパディング：0vw

例1を再作成する

Divider Module＃1を追加します

可視性

一般的な手順が完了したら、最初の例から始めて、さまざまな例の再作成を開始します。 最初のディバイダーモジュールを追加し、[ディバイダーを表示]オプションが有効になっていることを確認します。

• 仕切りを表示：はい

ライン

モジュールのデザインタブに移動し、線の色を変更します。

• 線の色：＃ffa100

サイジング

モジュールのサイズ設定も変更します。

• 仕切りの重量：50px
• 高さ：50px

間隔

次に、間隔設定に移動し、カスタムマージンとパディング値を追加します。

• 左マージン：-200px（タブレットと電話のみ）
• 右マージン：-200px（タブレットと電話のみ）
• 左パディング：15vw
• 右パディング：15vw

トランスフォームスキュー

また、変換設定に下部スキュー値を追加して、モジュールをわずかに変換します。

• 下：60度

水平モーションスクロール効果

モジュールにさまざまなスクロール効果を追加する時が来ました！ まず、水平方向の動きを追加します。

• 水平方向の動きを有効にする：はい
• 開始オフセット：0
• ミッドオフセット：0（80％）
• 終了オフセット：
  • デスクトップ：20（85％）
  • タブレットと電話：5（85％）

フェードインおよびフェードアウトスクロール効果

フェードインとフェードアウトの効果も追加します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：0％
• 中程度の不透明度：0％（36％）
• 終了不透明度：100％（40％）

上下のスクロール効果のスケーリング

そして、スケールアップとスケールダウンの効果を追加して、モジュールの設定を完了します。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：20％
• ミッドスケール：50％（69％）
• 終了スケール：100％（73％）

クローンディバイダーモジュール＃1

Divider Moduleが完了したら、クローンを作成できます。

線の色を変更する

複製モジュールの設定を開き、線の色を変更します。

• 線の色：＃24252d

間隔を変更する

モジュールの間隔値も変更します。

• 左マージン：-200px（タブレットと電話のみ）
• 右マージン：-200px（タブレットと電話のみ）
• 左パディング：25vw
• 右パディング：25vw

水平方向のモーションスクロール効果を変更する

次に、[詳細設定]タブのスクロール効果に移動し、水平モーションスクロール効果の終了オフセットを変更します。

• 終了オフセット：
  • デスクトップ：-20
  • タブレットと電話：-5

例2を再作成する

Divider Module＃1を追加します

可視性

2番目の例を再作成する場合は、先に進んで、セクションの最後の行に最初のDividerModuleを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

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

• 線の色：＃ffa100

サイジング

サイズ設定も変更してください。

• 仕切りの重量：200px
• 幅：200px
• モジュールの配置：中央
• 高さ：200px

国境

次に、境界線の半径を追加して、モジュールを円に変えます。

• すべてのコーナー：200px

水平モーションスクロール効果

スクロール効果を追加する時が来ました！ 私たちが使用している最初の効果は、水平方向の動きです。

• 水平方向の動きを有効にする：はい
• 開始オフセット：-2
• ミッドオフセット：0
• 終了オフセット：
  • デスクトップ：20
  • タブレットと電話：5

上下のスクロール効果のスケーリング

次に、スケールアップとスケールダウンの効果も有効にします。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：20％
• ミッドスケール：100％
• エンディングスケール：100％

クローンディバイダーモジュール

先に進み、Dividerモジュール全体のクローンを作成します。

線の色を変更する

複製を開き、線の色を変更します。

• 線の色：＃24252d

間隔を変更する

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

• 上マージン：-200px

水平方向のモーションスクロール効果を変更する

次に、水平モーションスクロール効果の設定に移動し、終了オフセットを変更します。

• 終了オフセット：
  • デスクトップ：-20
  • タブレットと電話：-5

例3を再作成する

行パディングを追加

次の最後の例に移りましょう！ このチュートリアルの一般的な手順で作成した行を開き、間隔設定でパディング値を変更することから始めます。

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

Divider Module＃1を追加します

可視性

セクションの最後の行に新しいディバイダーモジュールを追加し、ディバイダーを非表示にします。

• 仕切りを表示：いいえ

グラデーションの背景

次にグラデーションの背景を追加します。

• 色1：＃ffa100
• 色2：＃f77f00
• グラデーションタイプ：線形
• 勾配方向：121度

サイジング

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

• 幅：200px
• モジュールの配置：中央
• 高さ：0px

間隔

次に、カスタムの上部と下部のパディングを追加します。

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

水平モーションスクロール効果

次に、さまざまな画面サイズでの水平方向の動きから始めて、スクロール効果を追加します。

• 水平方向の動きを有効にする：はい
• 開始オフセット：-1（30％）
• ミッドオフセット：0
• 終了オフセット：
  • デスクトップ：20
  • タブレットと電話：5

回転スクロール効果

回転スクロール効果を追加して、モジュールの設定を完了します。

• 回転を有効にする：はい
• 先発投手：0°（46％）
• 中回転：50°（75％）
• 終了回転：90°

クローンディバイダーモジュール

先に進み、モジュール全体のクローンを作成します。

グラデーションの背景を変更する

複製の設定を開き、グラデーションの背景色を変更します。

• 色1：＃24252d
• 色2：＃16161c

間隔を変更する

負の上部マージンを追加します。

• 上マージン：-100px

水平スクロール効果を変更する

そして、スクロール効果設定で水平モーションの終了オフセットを変更します。

• 終了オフセット：
  • デスクトップ：-20
  • タブレットと電話：-5

プレビュー

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

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

例3

デスクトップ

モバイル

最終的な考え

この投稿では、モーションシェイプを作成し、それらを使用してDiviページの新しいセクションをマークする方法を示しました。 この手法を使用すると、訪問者はページ上の別の部分に切り替えているという事実をさらに認識できるようになります。 私たちが再現したモーションエフェクトは微妙で、簡単な方法でWebサイトにインタラクションを追加します。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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