見事なDiviウェブサイトヒーローセクションで製品カテゴリを強調する方法
公開: 2019-01-20あなたがeコマースのウェブサイトに精通しているなら、あなたは間違いなく製品カテゴリーにも精通しているでしょう。 製品カテゴリは、Webサイトで最も強力なページの一部になる可能性があります。 そのため、簡単でエレガントな方法で見つけて強調表示できるようにすることが重要です。 Diviの組み込みオプションを使用すると、デザインをさまざまな方向に進めることができます。 このチュートリアルでは、ヒーローセクションで製品カテゴリを強調表示する方法を紹介します。 デザイン例を最初から作成します。うまくいけば、独自のクリエイティブな方法で製品カテゴリを強調するように促されます。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
作り始めましょう！
私たちのYoutubeチャンネルを購読する
新しいセクションを追加
グラデーションの背景
ページに新しいセクションを追加することから始めます。 このセクションの設定を開き、グラデーションの背景を追加します。
- 色1：#ffffff
- 色2：＃757f1e
- グラデーションタイプ：線形
- グラデーション方向：90度
- 開始位置：50％
- 終了位置：50％
間隔
次に、[デザイン]タブに移動し、セクションにカスタムの上部と下部のパディングを追加します。
- トップパディング：130px
- ボトムパディング：130px
行＃1を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
列1の背景色
モジュールをまだ追加せずに、行設定を開き、最初の列に背景色を追加します。
- 列1の背景色：rgba（0,0,0,0.19）
列1の背景画像
ブレンドモードとともに、背景画像も最初の列に追加します。
- 列1の背景画像の位置：中央下
- 列1の背景画像の繰り返し：繰り返しなし
- 列1の背景画像のブレンド：乗算
列2の背景色
2番目の列には、白い背景色のみが必要です。
- 列2の背景色：#ffffff
サイジング
行設定の[デザイン]タブに移動して続行し、サイズ設定を変更します。
- カスタム幅を使用：はい
- ユニット：PX
- カスタム幅：2000px
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
行のデフォルトのカスタムパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
ボックスシャドウ
そして、微妙なボックスシャドウを追加します。
- ボックスシャドウブラー強度：80px
列2にテキストモジュールを追加します
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 2番目の列に必要な最初のモジュールは、タイトルのテキストモジュールです。 選択したコンテンツをいくつか追加します。
見出しテキストの設定
次に、見出しのテキスト設定に移動して、いくつかの変更を加えます。
- 見出しフォントの太さ：超太字
- 見出しのテキストサイズ：60px（デスクトップとタブレット）、50px（電話）
- 見出し文字の間隔：-4px
- 見出し線の高さ：0.8em
間隔
いくつかのカスタムマージンとパディング値も追加します。
- トップマージン：17vw
- 左パディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
Dividerモジュールを列2に追加します
可視性
2番目の列に必要な2番目で最後のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認します。
- 仕切りを表示：はい
色
次に仕切りの色を変更します。
- 色：＃757f1e
スタイル
スタイル設定でも仕切りスタイルを変更します。
- 仕切りスタイル：ダブル
サイジング
また、モジュールのサイズ設定で分周器の重量を増やします。
- 仕切りの重量：6px
間隔
最後に、Dividerモジュールにカスタムの上下マージンを追加します。
- トップマージン：2vw
- 下マージン：15vw
行＃2を追加
カラム構造
2列目へ！ 次の列構造を選択してください。
列1の背景色
行設定を開き、最初の列に背景色を追加します。
- 列1の背景色：＃212121
サイジング
次に、[デザイン]タブに移動し、行のサイズを試してみます。
- カスタム幅を使用：はい
- ユニット：PX
- カスタム幅：2000px
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
上下のパディングに「0px」を追加して、行のカスタムパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
ボックスシャドウ
大事なことを言い忘れましたが、行に微妙なボックスシャドウを付けます。
- ボックスシャドウブラー強度：80px
テキストモジュール＃1を列1に追加します
コンテンツを追加する
必要な最初のモジュールはテキストモジュールです。 選択したコンテンツを含む最初の列に1つ追加します。
テキスト設定
[デザイン]タブに移動し、テキスト設定を変更して続行します。
- テキストフォントの太さ：軽い
- テキストの色：#ffffff
- テキストサイズ：18px（デスクトップ）、15px（タブレット）、12px（電話）
- テキスト行の高さ：1em
- テキストの向き：左
- テキストの色：明るい
見出しテキストの設定
見出しのテキスト設定も変更します。
- 見出し3テキストの色：#ffffff
- 見出し3テキストサイズ：25px（デスクトップ）、20px（タブレット）、18px（電話）
- 見出し3文字の間隔：-1px
間隔
間隔設定にもいくつかのカスタムパディング値を追加します。
- トップパディング：30px
- ボトムパディング：30px
- 左パディング：50px
- 右パディング：50px
テキストモジュール＃2を列2に追加します
コンテンツを追加する
2番目の列に別のテキストモジュールを追加して続行します。 選択したコンテンツをいくつか追加し、リンク設定で製品カテゴリページもリンクします。
デフォルトの背景色
次に、背景設定に移動し、背景色を追加します。
- 背景色：#eaeaea
背景色にカーソルを合わせる
ホバー時にこの背景色を変更します。
- 背景色：＃ffbb00
デフォルトのテキスト設定
次に、[デザイン]タブのテキスト設定を変更します。
- テキストフォントの太さ：超太字
- テキストフォントスタイル：大文字
- テキストの色：＃333333
- テキストサイズ：16px
- テキスト文字の間隔：-1px
- テキストの向き：中央
テキスト設定にカーソルを合わせる
そして、ホバー時にこれらの設定を変更します。
- テキストの色：#ffffff
- テキストサイズ：20px
デフォルトの間隔
また、いくつかのデフォルトの間隔値を適用しています。
- トップパディング：45px
- ボトムパディング：45px
- 左パディング：5px
- 右パディング：5px
ホバー間隔
ホバーするとどちらが変更されますか。
- トップマージン：-50px
- 左マージン：-20px
- トップパディング：70px
- ボトムパディング：70px
- 左パディング：5px
- 右パディング：5px
デフォルトのボックスシャドウ
ボックスシャドウ設定を開いて続行し、完全に透明なボックスシャドウを追加します。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（255,255,255,0）
ホバーボックスシャドウ
ホバー時に完全に透明なボックスの影の色を変更して、表示されるようにします。
- 影の色：rgba（0,0,0,0.34）
テキストモジュール＃2のクローンを2回作成し、残りの列に配置します
列2のテキストモジュールの変更が完了したら、先に進んでモジュールのクローンを2回作成し、行の残りの2つの列に複製を配置できます。
最初の複製を変更する
コンテンツの変更
3番目の列の最初の複製を開き、製品カテゴリのコンテンツとリンクを変更します。
背景色を変更する
このモジュールの背景色も変更します。
- 背景色：#dddddd
2番目の複製を変更する
コンテンツの変更
列4の2番目の複製の内容も変更します。
背景色を変更する
背景色と一緒に。
- 背景色：＃c6c6c6
行＃1の列2に小さい画面サイズの画像モジュールを追加します
画像をアップロード
最後になりましたが、最初の行の2番目の列に画像モジュールを追加して、画面サイズが小さくなるようにすべてを最適化します。
可視性
モジュールの[詳細設定]タブでデスクトップに非表示にして、このモジュールが小さい画面サイズでのみ表示されることを確認してください。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
最終的な考え
この投稿では、Webサイトの主な製品カテゴリにスポットライトを当てる見事なデザイン例を再現しました。 このチュートリアルが、あなた自身の種類のデザインを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！