Diviの新しいオーバーフローオプションを使用してスクロールギャラリーモックアップを作成する方法

あなたのウェブサイトに画像を表示するための創造的な方法をお探しですか？ この投稿では、Diviの組み込みオプションのみを使用してスクロールギャラリーのモックアップを作成する方法を紹介するため、読み続けてください。 具体的には、セクションをモックアップに変換し、セクション内のすべての行をモックアップの一部にします。 テクニックを習得すると、モバイルモックアップで必要なあらゆる種類のコンテンツを紹介し、すぐにページにインタラクションを追加できるようになります。

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

スクロールギャラリーモックアップデザインを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

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

新しいセクションを追加

サイジング

新しいページを作成するか、既存のページを開いて、通常のセクションを追加することから始めます。 セクション設定を開き、サイズ設定で幅と最大幅を変更します。

• 幅：25vw（デスクトップ）、60vw（タブレット）、80vw（電話）
• 最大幅：25vw（デスクトップ）、60vw（タブレット）、80vw（電話）

間隔

次に、間隔の設定に移動し、デフォルトの上下のパディングをすべて削除し、上下の余白を追加してスペースを作成します。

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

国境

セクションの境界線設定に移動し、各コーナーに「30px」を追加してモバイルモックアップの形状を作成します。

ボックスシャドウ

微妙なボックスシャドウを追加して、形状が透けて見えるようにします。

• ボックスシャドウブラー強度：100px
• 影の色：rgba（0,0,0,0.18）

行＃1を追加

カラム構造

次の列構造を使用して、セクションに最初の行を追加して続行します。

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

• 背景色：#ffffff

サイジング

次に、サイズ設定に移動し、行がセクションの幅全体を占めるようにします。

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

間隔

次に、デフォルトの上下のパディングを削除します。

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

ボックスシャドウ

また、ボックスシャドウも追加します。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.92）

Zインデックス

最後になりましたが、可視性設定でZインデックスを増やすことにより、行（特にそのボックスシャドウ）が次に来る行と重なるようにします。

• Zインデックス：99

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

H2コンテンツを追加する

この行に必要な唯一のモジュールは、H2コンテンツを含むテキストモジュールです。

H2テキスト設定

H2コピーを追加したら、H2テキスト設定に移動していくつかの変更を加えます。

• 見出し2フォント：Abril Fatface
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃000000
• 見出し2テキストサイズ：1.5vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）

間隔

次に、カスタムの上下マージンを追加します。

• トップマージン：1.5vw（デスクトップとタブレット）、3.5vw（電話）
• 下マージン：1.5vw（デスクトップとタブレット）、3.5vw（電話）

行＃2を追加

カラム構造

2列目へ！ ここでは、次の列構造を使用しています。

サイジング

モジュールをまだ追加せずに、行設定を開き、行がセクションの幅全体を占めるようにします。 また、高さと最大高さを変更して、次の手順で垂直スクロール効果を作成します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％
• 高さ：38vw（デスクトップ）、100vw（タブレット）、120vw（電話）
• 最大高さ：38vw（デスクトップ）、100vw（タブレット）、120vw（電話）

間隔

次に、間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。

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

垂直オーバーフロー

前述のように、この行を垂直方向にスクロール可能にします。 そのためには、行の可視性設定で垂直方向のオーバーフローを変更する必要があります。

• 垂直オーバーフロー：スクロール

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

画像をアップロード

先に進み、最初の画像モジュールを行に追加して、選択した画像をアップロードします。 このチュートリアル全体で使用している画像は、Wedding Planner LayoutPackの投稿にアクセスしてダウンロードできます。

サイジング

レスポンシブな結果を確実にするために、画像モジュールで「全幅を強制」オプションを有効にしてください。

• 全幅を強制：はい

間隔

次に間隔設定に移動し、下マージンを追加して、このモジュールと次に来るモジュールの間にスペースを作成します。

• 下マージン：1vw

イメージモジュールを必要な回数だけクローンする

最初のイメージモジュールの変更が完了したら、必要な回数だけクローンを作成できます。

別の画像をアップロードする

もちろん、複製のそれぞれの画像を変更する必要があります。

行＃3を追加

カラム構造

3行目と最後の行に！ 次の列構造を使用しています。

背景色

モジュールをまだ追加せずに、行設定を開き、白い背景色を追加します。

• 背景色：#ffffff

サイジング

次に、サイズ設定に移動し、行がセクションの幅全体を占めるようにします。

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

間隔

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

• トップパディング：2.1vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）
• ボトムパディング：2.1vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）

ボックスシャドウ

そして、ボックスシャドウを追加して奥行きを作成します。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.92）

Zインデックス

この行（特にそのボックスの影）が前の行と重なるようにするために、Zインデックスを増やします。

• Zインデックス：99

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

コピーを追加

この行に必要なモジュールはボタンモジュールだけです。 選択したコピーをいくつか追加します。

配置

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

• ボタンの配置：中央

ボタンの設定

ボタンの設定も変更します。

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

間隔

そして、カスタムのパディング値を使用して、必要な形状を作成します。

• トップパディング：0.5vw（デスクトップ）、1vw（タブレット）、2vw（電話）
• ボトムパディング：0.5vw（デスクトップ）、1vw（タブレット）、2vw（電話）
• 左パディング：3vw（デスクトップ）、7vw（タブレット）、9vw（電話）
• 右パディング：3vw（デスクトップ）、7vw（タブレット）、9vw（電話）

スタイルスクロールバー

行＃2にCSSIDを追加します

スクロールバーのスタイルを設定するかどうかはあなた次第です。 その場合は、2番目の行を開き、CSSクラスを追加します。

• CSSクラス：画像-スクロールバー

ページ設定を開く

次に、行設定を開きます。

CSSを使用したスタイルスクロールバー

そして、次の行のCSSコードを[詳細設定]タブの[カスタムCSS]ボックスに追加します。

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの組み込みオプションのみを使用して美しいスクロールギャラリーモックアップを作成する方法を紹介しました。 この投稿の冒頭で、レイアウトJSONを無料でダウンロードして、作業中の任意のWebサイトで使用することもできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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