Diviのスクロール効果を使用してスクロール上にモジュールのオーバーラップを作成する方法

デザインでオーバーラップを使用することは、過去数年間で人気が高まっています。 それはあなたのデザインにもっと抽象的なルックアンドフィールを与えます。 同時に、スペースを節約するのに役立ちます。これにより、必要な垂直スクロールが制限されます。 Diviの内部では、モジュールにオーバーラップを簡単に追加する方法がいくつかあります。 さらに一歩進んで、スクロール操作を追加することもできます。 今日のDiviチュートリアルでは、負のマージンとDiviの垂直モーションスクロール効果を使用して、スクロールで微妙なモジュールのオーバーラップを作成する方法を示します。 私たちが再作成しているデザインには、美しい画像オーバーレイが含まれており、JSONファイルも無料でダウンロードできます。

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

プレビュー

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

デスクトップ

モバイル

スクロールレイアウトのモジュールオーバーラップを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

一般的な手順

新しいセクションを追加

間隔

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

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

行＃1を追加

カラム構造

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

間隔

モジュールをまだ追加せずに、行設定を開き、間隔設定に下マージンを追加します。

• 下マージン：100px

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

H2コンテンツを追加する

モジュールを追加するときは、選択したH2コンテンツを含む最初のテキストモジュールから始めます。

見出し2のテキスト設定

モジュールのH2テキスト設定を次のように変更します。

• 見出し2フォント：Abril Fatface
• 見出し2テキストサイズ：100px（デスクトップ）、70px（タブレット）、60px（電話）

Dividerモジュールを列に追加

可視性

次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

[デザイン]タブに移動し、次のように線の設定を変更します。

• 線の色：＃333333
• 線のスタイル：実線
• ライン位置：上

サイジング

サイズ設定も変更します。

• 仕切りの重量：6px
• 幅：10％（デスクトップ）、20％（タブレット）、30％（電話）

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

コンテンツを追加する

この行で必要な最後のモジュールは、説明コンテンツを含む別のテキストモジュールです。

テキスト設定

それに応じてモジュールのテキスト設定を変更します。

• テキストフォント：Karla
• テキストサイズ：18px
• テキスト行の高さ：2.2em

行＃2を追加

カラム構造

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

サイジング

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

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

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

オーバーレイのアップロード

列1で、最初に必要なモジュールは画像モジュールです。 この投稿の冒頭でダウンロードできたダウンロードフォルダにあるオーバーレイ画像ファイルをアップロードします。

背景画像

次に、選択した背景画像をアップロードします。

• 背景画像サイズ：カバー
• 背景画像の位置：中央

サイジング

次に、イメージモジュールに全幅を強制します。

• 全幅を強制：はい

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

H3と説明のコンテンツを追加する

次のモジュールに進みます。これは、選択したH3と説明の内容を含むテキストモジュールです。

背景色

モジュールの背景色を変更します。

• 背景色：＃333333

テキスト設定

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

• テキストフォント：Karla
• テキストサイズ：18px
• テキスト行の高さ：2.2em
• テキストの色：明るい

H3テキスト設定

H3テキスト設定にもいくつかの変更を加えます。

• 見出し3フォント：Abril Fatface
• 見出し3フォントの太さ：太字
• 見出し3テキストサイズ：50px

サイジング

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

• 幅：70％（デスクトップ）、80％（タブレット）、100％（電話）
• モジュールの配置：中央

間隔

いくつかのカスタムマージンとパディング値も使用しています。

• トップマージン：-26％
• トップパディング：15％
• ボトムパディング：15％
• 左パディング：10％
• 右パディング：10％

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

そして、[詳細設定]タブのスクロール効果に水平方向の動きを追加して、モジュールの設定を完了します。

• 垂直モーションを有効にする：はい
• 開始オフセット：4
• ミッドオフセット：4（5％）
• 終了オフセット：0（10％）
• モーションエフェクトトリガー：要素の中央

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

コピーを追加

列1に必要な最後のモジュールは、ボタンモジュールです。 お好みのコピーを入力してください。

配置

次に、[デザイン]タブに移動し、ボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

次に、それに応じてボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンのテキストの色：＃333333
• ボタンの背景色：#ffffff
• ボタンの境界線の幅：0px
• ボタンの境界線半径：1px

• ボタンフォント：Karla
• ボタンのフォントの太さ：太字

間隔

そして、モジュールの間隔設定にいくつかのカスタムマージンとパディング値を追加して、モジュール設定を完了します。

• トップマージン：-4％
• トップパディング：2％
• ボトムパディング：2％
• 左パディング：7％
• 右パディング：7％

列1にモジュールのクローンを作成し、列2に複製を配置します

列1のモジュールを完了したら、すべてのモジュールのクローンを作成し、行の2番目の列に複製を配置できます。

背景画像とコンテンツを変更する

必ず背景画像とコンテンツを変更してください。

行全体のクローンを作成する

次に、行全体を必要な回数だけ複製します。

背景画像とコンテンツを変更する

ここでも背景画像とコンテンツを変更すれば完了です。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの新しいスクロール効果を使用して、スクロール時に微妙なモジュールのオーバーラップを作成する方法を示しました。 ネガティブトップマージンとDiviの組み込みの垂直モーションスクロール効果を効果的に組み合わせて、デザインの全体的なルックアンドフィールを向上させました。 再作成したデザインには美しい画像オーバーレイが含まれており、JSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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