Diviで日本の美学にインスパイアされた製品ページテンプレートを作成する方法
公開: 2019-11-21あなたはあなたのオンラインショップのためのクリーンで最小限の製品ページデザインを探していますか？ 今日、私たちは日本の美学に触発されたデザインを手に入れました。 これは、最小限の日本の雑誌やWebサイトで一般的なスタイルです。 テキストを読みやすく、製品を確認し、気を散らさないようにします。 以下のチュートリアルに従って、独自の製品用にこのテンプレートを再作成してください。 テンプレートJSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
始める前に、さまざまなデバイス間でデザインがどのように見えるかを見てみましょう。
デスクトップ
モバイル
製品ページテンプレートを無料でダウンロード
無料の製品ページテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.Woocommerce製品を追加/開く
製品データ
新しいWooCommerce製品を開くか作成します。 この日本の美学に触発された製品デザインを再現するには、次の詳細を入力する必要があります。
- タイトル：書道セット
- 説明：美しいレタリングアートを作成するために必要なすべてのツールを備えた書道セット。 黒墨、馬の毛のブラシ、岩の重り、ミキシングボウル、日本のはさみ、およびにじみのない紙。
- 価格：31
- カテゴリ：画材
- 注目の画像：製品の横向きの画像。
- ギャラリー：同じ寸法の4つの風景画像
- 属性：以下を参照してください
属性タブには、woo追加情報モジュールの情報が保持されます。 この情報を追加するには、[属性]タブを選択し、次のように1つのカスタム属性を作成します。
- 含まれるもの：
- 1ブラシ
- 1ボウル
- インクボトル1本
- 1ペアはさみ
- 1リバーストーン
- 1連の紙
DiviBuilderを有効にしてページ設定を変更する
すべての製品データの準備ができたら、Divi Builderを有効にして、ページレイアウトを「全幅」に変更します。
VisualBuilderに切り替えます
次に、ビジュアルビルダーに切り替えます。 「フロントエンドでビルド」というボタンをクリックします。
デフォルトの製品セクションを削除
この製品ページを最初から設計したいので、デフォルトのセクション全体を削除します。 これにより、作業用の空白のキャンバスが作成されます。
2.和風デザインを再現
新しいセクションを追加
日本の美的商品ページの再現を始めましょう！ 新しい通常のセクションを追加します。
バックグラウンド
セクション設定を開き、背景色を変更します。
- 背景色：非常に明るい灰色＃f2f2f2
サイジング
次に、サイズを調整します。
- 幅：100％
- 最大幅：100％
間隔
次に、間隔の値は次のとおりです。
- トップパディング：
- デスクトップ：0vw
- タブレット+電話：2vw
- ボトムパディング：
- デスクトップ+タブレット：2vw
1行目を追加
カラム構造
新しい行を追加し、次の列構造を選択します。
サイジング
モジュールを追加する前に、次のように行のサイズ設定を調整します。
- 幅：
- デスクトップ：80％
- タブレット+電話：63％
間隔
また、間隔の値を調整します。
- 上+下マージン：0vw
- 上+下のパディング：0vw
ウーブレッドクラムモジュールを追加する
コンテンツ
次に、最初のモジュールを追加します。 ウーブレッドクラム。
- 製品：この製品
文章
[デザイン]タブで、テキストのスタイルを次のように設定します。
- フォント：Duru Sans
- フォントスタイル：TT
- カラー：ブラック＃000000
- サイズ：
- デスクトップ：0.7vw
- タブレット：1.5vw
- 電話：1.7vw
- 文字間隔：2px
サイジング
次に、サイズを調整します。
- 幅：100％
間隔
最後に、間隔を調整します。
- トップマージン：
- デスクトップ：3em
- タブレット+電話：0em
- 下マージン：
- デスクトップ+タブレット：1em
- 電話番号：0em
- 上+下のパディング：1em
- 左パディング：2em
2行目を追加
カラム構造
次の列構造を使用して2番目の行を追加します。
サイジング
行設定を開き、さまざまな画面サイズで幅を変更します。
- 幅：
- デスクトップ：80％
- タブレット+電話：65％
間隔
間隔も調整します。
- トップパディング：0vw
列1 + 2設定
バックグラウンド
列の設定を続行します。 1列目と2列目はどちらも同じスタイルです。 背景から始めます。
- 色：白#ffffff
国境
また、両方の列にも境界線スタイルを追加します。
- ボーダースタイル：4辺すべて
- ボーダー幅：4px
- 色：＃333333
WooImagesモジュールを列1に追加
コンテンツ
モジュールの追加を開始する時が来ました！ 1列目にウーイメージモジュールが必要です。
- 製品：この製品
要素
次のように、[要素]タブのトグルを調整します。
- 注目の画像：オン
- ギャラリー画像を表示：オフ
- 販売バッジを表示：オフ
Wooタイトルモジュールを列1に追加
コンテンツ
画像の下に、wooタイトルモジュールを追加します。 コンテンツを選択します。
- 製品：この製品
タイトルテキスト
[デザイン]タブで、テキストのスタイルを設定します。
- タイトル見出しレベル：H1
- H1フォント：Droid Sans
- H1フォントスタイル：TT
- H1カラー：ベリーダークグレー＃333333
- 文字間隔：5px
- 線の高さ：1em
間隔
次に、間隔の値を調整します。
- トップマージン：
- タブレット+電話：0vw
- トップパディング：0vw
- ボトムパディング：
- デスクトップ：1.5vw
- タブレット：3.5vw
- 電話：6vw
- 左パディング：
- デスクトップ：2vw
- タブレット+電話：5vw
- 右パディング：
- デスクトップ+タブレット：0vw
国境
境界線を追加して、モジュールの設定を完了します。
- ボーダースタイル：ボトムボーダー
- 幅：4px
- カラー：ベリーダークグレー＃333333
Woo説明モジュールを列1に追加
コンテンツ
次に、woo記述モジュールを追加します。 コンテンツと説明の種類を選択します。
- 製品：この製品
- 説明タイプ：説明
文章
次に、次のようにテキストのスタイルを設定します。
- フォント：Duru Sans
- フォントスタイル：TT
- カラー：ベリーダークグレー＃333333
- サイズ：
- デスクトップ：0.8vw
- タブレット：1.4vw
- 電話：1.8vw
- 文字間隔：3px
- 線の高さ：2em
間隔
さまざまな画面サイズにカスタムパディングを追加して、モジュール設定を完了します。
- 上+下のパディング：0vw
- 左+右パディング：
- デスクトップ：2vw
- タブレット+電話：5vw
ウー価格モジュールを列1に追加
コンテンツ
次に、ウー価格モジュールを列に追加して、製品を選択します。
- 製品：この製品
価格テキスト
価格テキストを次のようにスタイル設定します。
- フォント：Duru Sans
- カラー：ベリーダークグレー＃333333
- サイズ：
- デスクトップ：1.5vw
- タブレット：3.2vw
- 電話：4vw
- 文字間隔：3px
- 線の高さ：1em
間隔
間隔の設定も調整します。
- 下マージン：
- デスクトップ：1vw
- タブレット：3vw
- 電話：4vw
- トップパディング：
- デスクトップ：1vw
- タブレット：3.3vw
- 電話：5vw
- ボトムパディング：0vw
- 左パディング：
- タブレット+電話：5vw
- 右パディング：
- デスクトップ：2vw
- タブレット+電話：3vw
国境
最後に、境界線を追加します。
- ボーダースタイル：トップボーダー
- ボーダー幅：4px
- カラー：ベリーダークグレー＃333333
Woo Add to CartModuleを列1に追加
コンテンツ
価格の下に、カートに追加モジュールを追加して、製品を選択します。
- 製品：この製品
要素
次のように要素を切り替えます。
- 数量フィールドの表示：オフ
- 在庫を表示：オン
バックグラウンド
背景色も追加します。
- 背景色：非常に濃い灰色＃333333
ボタン
[デザイン]タブで、ボタンのスタイルを次のように設定します。
- 文字サイズ：
- デスクトップ：1vw
- タブレット：2.6vw
- 電話：3.1vw
- 色：白#ffffff
- ボーダー幅：0px
- 文字間隔：3px
- フォント：Duru Sans
- フォント：TT
間隔
次に、間隔を調整します。
- トップ+ボトムパディング：0.5vw
- 左パディング：1vw
国境
最後に、境界線を追加します。
- ボーダースタイル：トップボーダー
- 幅：4px
- カラー：ベリーダークグレー＃333333
Woo追加情報モジュールを列2に追加
コンテンツ
2番目の列に移動し、woo追加情報モジュールを追加します。 製品を選択してください。
- 製品：この製品
要素
次のように要素設定を切り替えます。
- タイトルを表示：オン
文章
[デザイン]タブで、テキストのスタイルを設定します。
- フォント：Duru Sans
- フォントスタイル： I + TT
- カラー：ベリーダークグレー＃333333
- サイズ：
- デスクトップ：0.7vw
- タブレット：1.5vw
- 電話：2.4vw
- 文字間隔：2px
- 線の高さ：1.5em
タイトルテキスト
次に、タイトルテキストのスタイルを設定します。
- フォント：Duru Sans
- フォントスタイル：TT
- カラー：ベリーダークグレー＃333333
- サイズ：
- デスクトップ：1vw
- タブレット：2vw
- 電話：2.2vw
- 文字間隔：3px
- 線の高さ：1.5em
属性テキスト
属性テキストのスタイルも忘れないでください。
- フォント：Duru Sans
- フォントスタイル：TT
- カラー：ベリーダークグレー＃333333
- サイズ：
- デスクトップ：0.7vw
- タブレット：2vw
- 電話：2.4vw
- 文字間隔：2px
間隔
次に、間隔を調整します。
- トップパディング：
- デスクトップ：1vw
- タブレット+電話：3vw
- ボトムパディング：
- デスクトップ+タブレット：1vw
- 左パディング：
- デスクトップ：2vw
- タブレット+電話：5vw
- 右パディング：
- 電話：3vw
Wooギャラリーモジュールを列2に追加
コンテンツ
設計を完了するために必要な最後のモジュールは、ウーギャラリーモジュールです。 製品を選択してください。
- 製品：この製品
レイアウト
デザインタブに移動し、レイアウトを変更します。
- レイアウト：スライダー
間隔
次に、間隔の設定を次のように調整します。
- トップマージン：
- デスクトップ：-2vw
- タブレット：-4vw
- 電話：-6vw
- トップパディング：0vw
国境
最後に、境界線を追加します。
- ボーダースタイル：トップボーダー
- 幅：4px
- カラー：ベリーダークグレー＃333333
3.Diviテーマビルダーのテンプレートに変換します
Diviライブラリに保存
デザインが完了したので、製品ページのレイアウトをDiviライブラリに保存します。 製品レイアウトのカテゴリがない場合は、作成します。
- 名前を付けて保存：レイアウト
- 氏名：和風プロダクトマスター
- カテゴリ：製品レイアウト。
Diviテーマビルダーを開き、新しいテンプレートを作成します
このデザインをすべての製品ページで使用するには、テーマビルダーでそのテンプレートを作成する必要があります。 テーマビルダーページ内に、新しいテンプレートを追加します。 ドロップダウンメニューから[すべての製品]を選択します。 このデザインを一部の製品にのみ使用する場合は、設定を調整できます。
Diviライブラリからカスタムボディを追加
「カスタムボディの追加」をクリックし、ドロップメニューで「ライブラリから追加」を選択します。
保存したレイアウトでレイアウトを見つけて適用する
レイアウトウィンドウで、保存されているレイアウトをクリックして、作成したレイアウトを探します。
テーマビルダーへの変更を保存
テーマビルダーへの変更を保存することを忘れないでください。
プレビュー
これで、テンプレートがWebサイト上のすべての製品に適用されます。 さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
それはラップです！
この投稿では、日本の美学にインスパイアされた製品ページを作成する方法を紹介しました。 スタイルはすっきりと最小限で、繊細な製品や手作りの製品を展示するのに最適です。 また、Diviテーマビルダーを使用してレイアウトをテンプレートに変換する方法も示しました。 新しいDivi + WooCommerceプロジェクトでこのデザインを試してみて、ご意見をお聞かせください。