DiviのWooCommerceモジュールを使用してクリーンで大胆な製品ページを作成する方法（無料ダウンロード！）
公開: 2019-09-16大胆な製品ページには、訪問者の注意を引く特別な方法があります。 また、Diviの新しいWooCommerce Modulesアップデートにより、古い製品ページを、あなたとあなたの訪問者の両方が気に入るクリーンで大胆なページにすばやく変えることができます。 今日のチュートリアルでは、大胆な製品ページを最初から再作成し、JSONファイルを無料でダウンロードすることもできます。 このチュートリアルでは、Diviの新しいWooCommerceモジュールがいかに用途が広いか、そして非常にプロフェッショナルなeコマースWebサイトをすぐに作成する方法を示します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
Clean＆Bold製品ページのレイアウトを無料でダウンロード
無料のヒーロークリーンで大胆な製品ページレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
1.WooCommerce製品を追加/開く
製品詳細
既存の製品を開くか、新しい製品を作成します。 この投稿のプレビューに示されているのとまったく同じ結果を達成したい場合は、次の製品の詳細を必ず追加してください。
- 題名
- 簡単な説明
- 長い説明
- カテゴリー
- 注目の画像
- 価格
DiviBuilderを有効にして製品ページ設定を変更する
製品の詳細が完成したら、Diviを有効にして、ページレイアウトを「全幅」に変更します。
VisualBuilderに切り替えます
VisualBuilderに切り替えて続行します。
ページの元の製品セクションを削除する
そこでは、元の製品ページ情報が1つのセクションにまとめられているのがわかります。 すっきりとした大胆なデザインを一から作り直しますので、このセクションは削除してください。
2.Diviのビジュアルビルダーを使用してクリーンで大胆な製品ページを作成する
通常のセクション＃1を追加
間隔
大胆な製品ページの作成を開始しましょう。 新しい通常のセクションを追加し、セクションの間隔設定を変更します。
- トップパディング：200px
- ボトムパディング：0px
オーバーフロー
セクションコンテナを超えるものがなく、ページ上で水平スクロールが行われないようにするには、可視性設定でセクションのオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
行を追加する
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
背景色
モジュールをまだ追加せずに、行の設定を開き、行の背景色を変更します。
- 背景色：＃f4f4f4
サイジング
行の最大幅も変更します。
- 最大幅：1000px
間隔
次に、間隔の設定に移動し、カスタムの上部と下部のパディングを追加します。
- トップパディング：150px
- ボトムパディング：150px
国境
行の左上隅と右上隅にも「50px」の境界線半径を追加します。
オーバーフロー
オーバーフローを表示して、行の設定を完了します。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：目に見える
Wooブレッドクラムモジュールを列に追加
動的コンテンツ
モジュールの追加を開始する時が来ました！ 最初に必要なモジュールは、ウーブレッドクラムモジュールです。
- 製品：この製品
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：クリムゾンテキスト
- テキストフォントの太さ：太字
- テキストフォントスタイル：大文字
- テキストサイズ：20px
- テキスト文字の間隔：4px
リンクテキスト設定
リンクテキストの設定にもいくつかの変更を加えます。
- リンクフォントの太さ：軽い
- リンクテキストの色：＃e02b20
間隔
次に、間隔の設定に移動し、さまざまな画面サイズにカスタムマージン値を追加します。
- 下マージン：80px
- 左マージン：50px（デスクトップとタブレット）、20px（電話）
- 右マージン：50px（デスクトップとタブレット）、20px（電話）
Wooタイトルモジュールを列に追加
動的コンテンツ
この列で必要な次の最後のモジュールは、ウータイトルモジュールです。
- 製品：この製品
タイトルテキスト設定
モジュールのタイトルテキスト設定を次のように変更します。
- タイトルフォント：Montserrat
- タイトルフォントの太さ：重い
- タイトルテキストの配置：中央
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：250px（デスクトップ）、150px（タブレット）、80px（電話）
- タイトル行の高さ：0.9em
間隔
負の左右のマージンを追加して、モジュールの幅を広げます。
- 左マージン：-150px（デスクトップ）、-100px（タブレット）、-50px（電話）
- 右マージン：-150px（デスクトップ）、-100px（タブレット）、-50px（電話）
通常のセクション＃2を追加
間隔
前のセクションのすぐ下に別のセクションを追加します。 セクションのパディング値を次のように変更します。
- トップパディング：0px
- ボトムパディング：200px
行を追加する
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
背景色
モジュールをまだ追加せずに、行の設定を開き、行の背景色を変更します。
- 背景色：＃f4f4f4
サイジング
次に、行の最大幅を増やします。
- 最大幅：1000px
間隔
カスタムの下部パディングも追加します。
- ボトムパディング：150px
国境
次に、境界線の設定に移動し、左下隅と右下隅に「50px」の境界線半径を適用します。
オーバーフロー
オーバーフローが表示されていることを確認して、行の設定を完了します。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：目に見える
列1の設定
動的背景画像
一般的な行の設定が完了したら、列1の設定を開き、動的コンテンツを使用して製品の注目画像を背景に追加します。
- 背景画像：注目の画像
間隔
次に、列に下部のパディングを追加します。 これにより、背景画像が透けて見えます。
- 下部のパディング：370px（デスクトップ）、690px（タブレット）、380px（電話）
列1にテキストモジュールを追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 1列目では、必要なモジュールはテキストモジュールのみです。 お好みのコンテンツを追加してください。
背景色
次に、モジュールの背景色を変更します。
- 背景色：＃E02B20
テキスト設定
デザインタブに移動し、テキスト設定を変更します。
- テキストフォント：Montserrat
- テキストフォントの太さ：超太字
- テキストの配置：中央
- テキストの色：#FFFFFF
- テキストサイズ：30px
- テキスト行の高さ：1em
サイジング
次に、サイズ設定でモジュールのサイズを縮小します。
- 幅：280px
間隔
そして、いくつかのカスタムパディング値を追加して、モジュールを正方形に変えます。 また、負のマージンを使用して上下のオーバーラップを作成しています。
- 上マージン：-120px
- 左マージン：-120px
- トップパディング：110px
- ボトムパディング：110px
- 左パディング：50px
- 右パディング：50px
国境
正方形を円に変えるために、モジュールの各コーナーに「500px」の境界半径を追加します。
変換回転
モジュールも回転させます。
- 左：330度
列2にテキストモジュールを追加します
H2コンテンツを追加する
2列目へ！ そこで、最初に必要なモジュールは通常のテキストモジュールです。 お好みのH2コンテンツを入力してください。
H2テキスト設定
[デザイン]タブに移動し、H2テキスト設定を次のように変更します。
- 見出し2フォント：Montserrat
- 見出し2テキストサイズ：35px
間隔
次に、いくつかのカスタムマージン値を追加します。
- 上マージン：-70px（デスクトップ）、100px（タブレットと電話）
- 左マージン：100px（デスクトップ）、20px（タブレットと電話）
- 右マージン：20px（タブレットと電話）
Woo説明モジュールを列2に追加
動的コンテンツ
列2に必要な2番目のモジュールは、Woo DescriptionModuleです。
- 製品：この製品
- 説明タイプ：簡単な説明
テキスト設定
それに応じてモジュールのテキスト設定を変更します。
- テキストフォント：クリムゾンテキスト
- テキストサイズ：19px
- テキスト行の高さ：1.8em
- テキストの配置：正当化
間隔
次に、モジュールの間隔値を変更します。
- 下マージン：50px
- 左マージン：100px（デスクトップ）、20px（タブレットと電話）
- 右マージン：-100px（デスクトップ）、20px（タブレットと電話）
ウー価格モジュールを列2に追加
動的コンテンツ
次のモジュールであるWooPriceモジュールに進みます。
- 製品：この製品
価格テキスト設定
価格テキストの設定を次のように変更します。
- 価格フォント：Montserrat
- 価格フォントの太さ：重い
- 価格テキストの色：＃000000
- 価格テキストサイズ：50px
間隔
次に、間隔の設定を変更します。
- 下マージン：50px
- 左マージン：100px（デスクトップ）、20px（タブレットと電話）
- 右マージン：20px（タブレットと電話）
Woo Add to CartModuleを列2に追加
動的コンテンツ
この設計を完了するために必要な次の最後のモジュールは、Woo Add ToCartモジュールです。
- 製品：この製品
テキスト設定
テキスト設定でテキストフォントを変更します。
- テキストフォント：Montserrat
フィールド設定
次に、フィールド設定を変更します。
- フィールドの背景色：#ffffff
- フィールドテキストの色：＃000000
- トップパディング：66px
- ボトムパディング：66px
- フィールドフォント：Montserrat
- フィールドフォントの太さ：重い
- すべてのコーナー：5px
- ボトムフィールドボーダー幅：3px
- フィールドの境界線の色：＃e02b20
ボタンの設定
ボタンのスタイルを設定して続行します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃E02B20
- ボタンの境界線の幅：0px
- ボタンの境界線半径：5px
- ボタンフォント：Montserrat
- ボタンのフォントの太さ：超太字
- ボタンのフォントスタイル：大文字
- トップパディング：50px
- ボトムパディング：50px
- 左パディング：100px（デスクトップ）、50px（タブレット）、20px（電話）
- 右パディング：100px（デスクトップ）、50px（タブレット）、20px（電話）
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.3）
間隔
小さい画面サイズに左右のマージン値を追加してモジュールの設計を完了します。これで完了です。
- 左マージン：20px（タブレットと電話）
- 右マージン：20px（タブレットと電話）
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
最終的な考え
この投稿では、Diviの新しいWooCommerceモジュールを使用して、見事な大胆な製品ページをすっきりとしたルックアンドフィールで作成する方法を紹介しました。 大胆な製品ページには、製品にスポットライトを当てる独自の方法があります。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。