Diviでスクロールファッションカタログを作成する方法

この投稿では、スクロールするファッションカタログを作成する方法を紹介します。 この方法を使用すると、紙のカタログを渡すのと同じように、視聴者とつながることができます。 オンラインスクロールファッションカタログを作成すると、カタログから得られる結果を増やすのに役立つ場合があります。 たとえば、ショップアイテムへの直接リンクを含めることで、購入プロセスも強化されます。

結果

作成方法を段階的に示す結果は、デスクトップで次のようになります。

そして、電話とタブレットでこのように：

Diviでスクロールファッションカタログを作成する方法

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

Photoshopで画像に透明な形状を追加する

最初に紹介するのは、Photoshopを使用して画像に透明な部分を追加する方法です。 GimpShopと呼ばれるPhotoshopの無料の代替手段がありますが、チュートリアルのこの部分では、Photoshopのみを使用します。 それぞれ2つの異なる形状の2つの画像が必要です。 1つはデスクトップ用、もう1つはモバイルとタブレット用です。 このパートでは、画像に透明な形状を追加する方法を簡単に説明します。 その後、必要なすべての画像を自分で作成できます。

Photoshopを開く

コンピューターでPhotoshopを開くことから始めます。

画像を開く

次に、編集する最初の画像を開きます。 この方法は、このチュートリアル全体で使用する3つの画像すべてで同じです。 そのため、一度だけ説明します。

画像をダブルクリックしてレイヤーを作成

編集する画像を開いたら、画像をダブルクリックして新しいレイヤーを作成します。

別のレイヤーを追加する

その上に別の空のレイヤーを追加して続行します。

レイヤー1と多角形なげなわツールを選択します

レイヤー1を選択し、多角形なげなわツールの使用を開始します。

形を作る

多角形なげなわツールをアクティブにしたまま、先に進んで画像内に透明な形状を作成します。

レイヤー1を非表示にし、レイヤー0を選択した状態でDeleteキーを押します

透明にしたい領域を選択したら、レイヤー1を非表示にし、レイヤー0をもう一度選択して、キーボードのDeleteボタンを押します。

長方形マーキーツールを選択し、画像のどこかをクリックします

それが終わったら、長方形マーキーツールを選択し、画像のどこかをクリックします。

画像をPNGとして保存

最後に、画像をPNGとして保存し、レイアウト全体で使用する4つの画像すべてに対して同じプロセスを繰り返す必要があります。

プライマリメニューバーの設定

作成するレイアウトに必要なプライマリメニューバーの設定は次のとおりです。

• ロゴ画像を非表示：有効にする
• メニューの高さ：30
• テキストサイズ：15
• 文字間隔：-1
• フォント：ラト
• フォントスタイル：太字と大文字
• テキストの色：#FFFFFF
• アクティブリンクの色：#FFFFFF
• 背景色：rgba（255,255,255,0）
• ドロップダウンメニューの背景色：rgba（255,255,255,0）

エディションイントロ

プライマリメニューバーを変更したら、先に進んで新しいページを追加し、Divi Builderを使用して、VisualBuilderに切り替えることができます。

新しいセクションを追加

そのページ内で、標準セクションを追加することから始めます。

セクションの背景色

その色の背景は「＃d6d6d6」である必要があります。

カスタムパディング

そのセクションの[デザイン]タブに移動します。 Spacingサブカテゴリ内で、上部のパディングに「24px」を追加し、下部のパディングに0pxを追加します。

1列の行を追加する

それが完了したら、先に進んでセクションに1列の行を追加できます。

サイジング

[デザイン]タブに移動し、[サイズ設定]サブカテゴリを変更します。

• この行を全幅にする：はい
• カスタムガター幅を使用：1

カスタムパディング

下にスクロールして、行の一番上のパディングに「0px」を追加します。

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

それが完了したら、テキストモジュールを行に追加できます。 表示するテキストを入力したら、[デザイン]タブに移動し、次の変更が[テキスト]サブカテゴリに適用されることを確認します。

• テキストフォント：旧標準TT
• フォントスタイル：大文字
• テキストフォントサイズ：72（デスクトップ）、41（タブレット）、29（電話）
• テキストの色：＃000000
• テキスト文字の間隔：11px
• テキスト行の高さ：1em
• テキストの向き：中央

Spacingサブカテゴリを開き、上下のパディングに「30px」を追加します。

仕切りモジュール

テキストモジュールのすぐ下に、ディバイダーモジュールを追加し、[ディバイダーを表示]オプションを有効にします。

[デザイン]タブに移動し、仕切りの色として[#FFFFFF]を選択します。

次に、[スタイル]サブカテゴリ内の[ディバイダースタイル]として[ソリッド]を選択し、[ディバイダー位置]として[トップ]を選択します。

次に、[サイズ設定]サブカテゴリを開き、次の設定を適用します。

• 仕切りの重量：10px
• 高さ：23px
• 幅：100％
  

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

Divider Moduleのすぐ下に、別のテキストモジュールを追加します。 文字コード表（Windows）または文字パレット（Mac）内で必要なアイコンを選択し、[コンテンツ]タブに配置します。 この例では、次の記号を使用しています： '↓'。 次に、[デザイン]タブに移動し、次の設定を適用します。

• テキストフォントサイズ：42px
• テキストの色：＃000000
• テキストの向き：中央

デスクトップファッションカタログ（新セクション）

次に、別の標準セクションを追加します。 このセクションには、デスクトップにカタログの異なる部分を表示する2つの行が含まれます。

セクション設定

背景色

このセクションの背景色として「#FFFFFF」を使用します。

カスタムパディング

次に、[デザイン]タブに移動し、上部のパディングに「15px」を追加します。

最初の行

カラム構造

設定を変更したら、次の列構造で行を追加します。

背景色

行設定を開き、背景色として「rgba（255,255,255,0.14）」を追加します。

背景画像

この投稿のPhotoshop部分で作成した画像の1つを追加し、背景画像のブレンドとして「色相」を使用します。

サイジング

最後に、Sizingサブカテゴリに次の変更を加えます。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

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

行の設定が完了したら、2番目の列にテキストモジュールを追加します。 テキストサブカテゴリには、次の設定を使用します。

• テキストフォント：苦い
• テキストフォントサイズ：63px
• テキストの色：＃000000
• テキストの向き：中央

仕切りモジュール

最初のテキストモジュールのすぐ下に、ディバイダーモジュールを追加し、[ディバイダーを表示]オプションを有効にします。

[デザイン]タブに移動し、仕切りの色として「＃000000」を使用します。

スタイルサブカテゴリ内で、「ソリッド」をディバイダースタイルとして使用し、「トップ」をディバイダー位置として使用します。

同じタブを下にスクロールして、次の設定をサイズ設定サブカテゴリに適用します。

• 仕切りの重量：3px
• 高さ：23px
• 幅：57％
• モジュールの配置：左

最後に、「30px」の上マージンと「50px」の下マージンを追加します。

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

Dividerを配置したら、先に進み、タイトルを含む2番目のテキストモジュールを追加します。 まず、[コンテンツ]タブの背景色として「＃000000」を使用します。

次に、[デザイン]タブに移動し、次の設定を[テキスト]サブカテゴリに適用します。

• テキストフォント：苦い
• テキストフォントサイズ：92px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：左

Borderサブカテゴリを開き、次の境界線を使用します。

• 境界線を使用：はい
• ボーダーカラー：＃000000
• ボーダー幅：3px
• ボーダースタイル：ソリッド

さらに、「77％」の幅と左側のモジュール配置を使用します。

最後に、テキストモジュールの上下左右のパディングに「15px」を追加します。

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

前のテキストモジュールのすぐ下に別のテキストモジュールを追加します。 これは説明を表します。 [デザイン]タブに移動し、テキストサブカテゴリに次の設定を使用します。

• テキストフォント：Lato
• テキストフォントサイズ：16px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：左

サイジングサブカテゴリを開き、幅に「70％」を使用して、左側のモジュール配置を選択します。

最後に、「20px」の上マージンを追加します。

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

5番目のテキストモジュールは、最小限のボタンとして機能します。 [コンテンツ]タブ内で、「→」記号+テキストを使用し、その後ろにリンクを配置します。

次に、[デザイン]タブに移動します。 テキストサブカテゴリには次の設定を使用します。

• テキストフォント：苦い
• テキストフォントサイズ：23px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：左

[サイズ設定]サブカテゴリが表示されるまで、同じタブを下にスクロールします。 そのサブカテゴリ内で、「49％」の幅と適切なモジュール配置を使用します。

最後に、「80px」の上マージンを追加します。

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

必要になる6番目で最後のモジュールは、前のモジュールとほぼ同じです。 '→' +テキストを使用し、その後ろにリンクを配置します。

テキストサブカテゴリの設定は次のとおりです。

• テキストフォント：苦い
• テキストフォントサイズ：23px
• テキストの色：＃e02b20
• テキスト行の高さ：1em
• テキストの向き：左

幅を「39％」に変更し、適切なモジュール配置も使用します。

2列目

背景色

行設定を開き、背景色として「rgba（255,255,255,0.14）」を追加します。

背景画像

この投稿のPhotoshop部分で作成した画像の1つを追加し、背景画像のブレンドとして「色相」を使用します。

カラム構造

標準セクションに追加する必要がある2番目の行は、前の行の正反対です。

クローンモジュール

前の行で使用したモジュールは、この行に必要なモジュールと同じなので、先に進んでクローンを作成し、2番目の列ではなく最初の列に配置します。 この投稿の次の部分で、配置を変更する必要があります。

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

最初のテキストモジュールを開き、「20px」の上マージンを追加します。

仕切りモジュールの変更

次に、Divider Moduleを開き、Sizingサブカテゴリ内のModuleAlignmentを右に変更します。

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

2番目のテキストモジュールのテキストの向きを右に設定します。

また、サイジングサブカテゴリでも適切なモジュール配置を選択します。

3番目のテキストモジュールの変更

3番目のテキストモジュールにも正しいテキストの向きが必要です。

また、適切なモジュールの配置も同様です。

5番目のテキストモジュールの変更

5番目のテキストモジュールで行う必要があるのは、幅を「82％」に変更することだけです。

6番目のテキストモジュールの変更

6番目のテキストモジュールでも同じカウントですが、代わりに「87％」を使用します。

タブレットと電話のセクションを非表示

2つの行が終了したら、先に進んで、電話とタブレットのセクション全体を無効にすることができます。

タブレットと電話のカタログ（新しいセクション）

タブレットや携帯電話でもすべてを美しく見せるために、新しい標準セクションを作成します。

セクション設定

背景色

そのセクションの背景色として「#FFFFFF」を追加します。

カスタムパディング

[デザイン]タブに移動し、「15px」の上部パディングを追加します。

最初の行

カラム構造

次に、セクションに2列の行を追加します。

サイジング

その行のサイジングサブカテゴリに移動し、次の変更を加えます。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

画像モジュール

背景画像を使用する代わりに、代わりに画像モジュールを使用します。 そうすれば、テキストと画像が重ならないようにすることができます。 先に進み、行の最初の列に画像モジュールを追加して、画像をアップロードします。

デスクトップバージョンの最初の行のクローンモジュール

次に、デスクトップバージョンの最初の行で使用したすべてのモジュールのクローンを作成し、2番目の列に配置します。

2番目のテキストモジュールのフォントサイズを変更する

変更する必要があるのは1つだけです。 2番目のテキストモジュールのフォントサイズ。 65pxに変更します。

2列目

カラム構造

次に、先に進み、セクションに別の2列の行を追加します。

サイジング

この行には、変更されたサイズ設定サブカテゴリも必要です。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

画像モジュール

画像モジュールも最初の列に追加し、画像をアップロードします。

デスクトップバージョンの2行目のクローンモジュール

次に、先に進んで、デスクトップバージョンの2行目に配置されているモジュールのクローンを作成します。 それらのクローンを作成したら、この行の2番目の列に配置します。

2番目のテキストモジュールのフォントサイズを変更する

2番目のテキストモジュールのテキストサイズも変更する必要があります。 先に進み、フォントサイズを「65px」にします。

デスクトップのセクションを非表示

両方の行が終了したら、先に進んでデスクトップのセクション全体を無効にすることができます。

結果

この投稿のすべての手順を実行すると、デスクトップで次の結果が得られるはずです。

そして、電話とタブレットでは次のようになります。

最終的な考え

この投稿では、素敵なスクロールファッションカタログを作成する方法を紹介しました。 デザインを機能させるために、最初にPhotoshopを使用して画像内に透明な形状を作成する方法を示しました。 その後、Diviチュートリアル内でこれらの画像を使用して、デザインを作成しました。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

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

Rvectorによって注目画像/ shutterstock.com