Diviランディングページで人気商品をクリエイティブに紹介する方法

人気商品をランディングページに表示するときは、適切な商品を選択するだけでなく、魅力的に表示することも重要です。 Diviの新しいWooCommerceモジュールにより、無数の新しいデザインの可能性が私たちの膝に落ちました。 インスピレーションを得るのに役立つように、次のDiviランディングページに使用できる美しくエレガントな人気のある製品デザインを再現します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

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

デスクトップ

静的

ホバー

モバイル

人気のある製品のレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

新しいセクションを追加

間隔

新しいページまたは既存のページに通常のセクションを追加することから始めます。 セクション設定を開き、それに応じて上部と下部のパディング値を調整します。

• トップパディング：8vw
• ボトムパディング：8vw

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

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

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

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

動的コンテンツ

モジュールの追加を開始する時が来ました！ 最初に必要なモジュールはWooImageModuleです。 表示したい商品を選択してください。

画像

デザインタブに移動し、画像設定を変更します。

• 画像の丸みを帯びた角：20px（すべての角）

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

Wooタイトルモジュールを列に追加

動的コンテンツ

次に必要なモジュールは、ウータイトルモジュールです。 お好みの製品を選択してください。

タイトルテキスト設定

モジュールのタイトルテキスト設定を次のように変更します。

• タイトル見出しレベル：H3
• タイトルフォント：プラタ
• タイトルテキストサイズ：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）

間隔

さまざまな画面サイズにカスタムマージン値を追加して、モジュールの設定を完了します。

• トップマージン：7vw（デスクトップ）、14vw（タブレットと電話）
• 下マージン：2vw（デスクトップ）、4vw（タブレットと電話）
• 左マージン：2vw（デスクトップ）、5vw（タブレットと電話）
• 右マージン：2vw（デスクトップ）、5vw（タブレットと電話）

Woo説明モジュールを列に追加

動的コンテンツ

次のモジュールであるWooDescriptionModuleに進みます。 お好みの製品を選択してください。

テキスト設定

モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。

• テキストフォント：Montserrat
• テキストサイズ：0.8vw（デスクトップ）、1.6vw（タブレット）、2vw（電話）
• テキスト行の高さ：1.8em

間隔

さまざまな画面サイズでカスタムマージン値を試してみてください。

• トップマージン：2vw（デスクトップ）、4vw（タブレットと電話）
• 下マージン：2vw（デスクトップ）、4vw（タブレットと電話）
• 左マージン：2vw（デスクトップ）、5vw（タブレットと電話）
• 右マージン：2vw（デスクトップ）、5vw（タブレットと電話）

Woo Add To CartModuleを列に追加

動的コンテンツ

Woo Description Moduleのすぐ下に、Woo Add ToCartモジュールを追加します。 お好みの製品を選択してください。

デフォルトのフィールド設定

モジュールの[デザイン]タブに移動し、次のようにフィールド設定を変更します。

• フィールドの背景色：#ffffff
• フィールドテキストの色：＃3d3d3d
• フィールドフォント：Montserrat

• フィールドの境界線の幅：0px
• フィールドの境界線の色：＃3d3d3d

ホバーフィールド設定

ホバー時に境界線の幅を変更します。

• フィールドの境界線の幅：1px

デフォルトのボタン設定

次にボタン設定を開き、ボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1vw（デスクトップ）、3vw（タブレット）、4vw（電話）
• ボタンのテキストの色：＃3d3d3d
• ボタンの背景色：#FFFFFF
• ボタンの境界線の幅：0px
• ボタンの境界線の色：＃3d3d3d

• ボタンフォント：プラタ

• トップパディング：0.5vw
• ボトムパディング：0.5vw
• 左パディング：2vw
• 右パディング：2vw

ホバーボタンの設定

ホバー時にボタンの境界線の幅を変更します。

• ボタンの境界線の幅：1px

間隔

次に、間隔に移動し、さまざまな画面サイズにカスタムマージン値を追加します。

• 下マージン：7vw（デスクトップ）、14vw（タブレットと電話）
• 左マージン：2vw（デスクトップ）、5vw（タブレットと電話）
• 右マージン：2vw（デスクトップ）、5vw（タブレットと電話）

デフォルトの境界設定

モジュールの境界設定も変更します。

• 下の境界線の幅：1px
• 下の境界線の色：＃3d3d3d

ホバーボーダー設定

そして、ホバーで境界線の幅を削除します。

• 下の境界線の幅：0px

Woo価格モジュールを列に追加

動的コンテンツ

この列で必要な最後のモジュールは、Woo PriceModuleです。 お好みの製品を選択してください。

タイトルテキスト設定

モジュールの[デザイン]タブに移動し、それに応じて価格テキストの設定を変更します。

• 価格テキストフォント：Montserrat
• 価格テキストフォントの太さ：軽い
• 価格テキストの色：＃333333
• 価格テキストサイズ：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
• 価格ラインの高さ：1.8em

間隔

マージン値も変更します。

• 下マージン：5vw
• 左マージン：2vw（デスクトップ）、5vw（タブレットと電話）
• 右マージン：2vw（デスクトップ）、5vw（タブレットと電話）

カラムを2回クローンする

列とその中のすべてのモジュールを完了したら、列全体を2回複製できます。

行の列構造を変更する

次に、行の列構造を変更します。

すべての動的コンテンツを変更する

列2と3のすべての動的コンテンツを、選択した他の製品に変更して続行します。

列2のモジュール間隔を変更する

ウータイトルモジュール

2番目の列のモジュールには、追加の間隔変更が必要です。 Woo TitleModuleから始めます。

• 左マージン：5vw（すべてのデバイス）
• 右マージン：5vw（すべてのデバイス）

ウー記述モジュール

次に、ウー記述モジュールの間隔設定を変更します。

• トップマージン：4vw（すべてのデバイス）
• 下マージン：4vw（すべてのデバイス）
• 左マージン：5vw（すべてのデバイス）
• 右マージン：5vw（すべてのデバイス

Woo Add To Cart Module

Woo Add To CartModuleの間隔設定に移動します。

• 左マージン：5vw（すべてのデバイス）
• 右マージン：5vw（すべてのデバイス）

ウー価格モジュール

また、Woo Price Moduleの間隔設定も変更して、列2のモジュールを完成させます。

• 左マージン：5vw（すべてのデバイス）
• 右マージン：5vw（すべてのデバイス）

列スタイル

すべての列

背景色

すべてのモジュールが配置されたので、列のスタイル設定を開始できます。 各列には白い背景色が必要です。

• 背景色：#ffffff

国境

各列の隅に「20px」を追加することもできます。

• 丸みを帯びた角：20px（すべての角）

1列目と3列目

デフォルトのボックスシャドウ

列1と3にデフォルトのボックスシャドウを追加して続行します。

• ボックスシャドウの垂直位置：22px
• ボックスシャドウシャドウブラー強度：150px
• 影の色：rgba（0,0,0,0）（デスクトップ）、rgba（0,0,0,0.1）（タブレットと電話）

ホバーボックスシャドウ

ホバー時にホバーシャドウの色を変更します。

• 影の色：rgba（0,0,0,0.27）

デフォルトのフィルター

次に、フィルター設定に移動し、列1と3の両方にぼかしを追加します。

• ぼかし：4px（デスクトップ）、0px（タブレットと電話）

ホバーフィルター

ホバー時のぼけを取り除きます。

• ぼかし：0px

デフォルトのZインデックス

次の列に同じデフォルトのzインデックス値を割り当てます。

• Zインデックス：9

ホバーZインデックス

そして、ホバー時に同じzインデックスを増やします。

• Zインデックス：12

列1のみ

変換翻訳

変換変換オプションを使用して列1の位置を変更して続行します。

• 右：7vw（デスクトップ）、0vw（タブレットと電話）
• 下：2vw（デスクトップ）、0vw（タブレットと電話）

列3のみ

変換翻訳

次に列3の変換設定を開き、次の設定を適用します。

• 右：7vw（デスクトップ）、0vw（タブレットと電話）
• 下：-2vw（デスクトップ）、0vw（タブレットと電話）

列2のみ

ボックスシャドウ

列2の設定に移動し、微妙なボックスシャドウを適用します。

• ボックスシャドウの垂直位置：22px
• ボックスシャドウブラー強度：150px
• 影の色：rgba（0,0,0,0.27）（デスクトップ）、rgba（0,0,0,0.1）（タブレットと電話）

Zインデックス

最後になりましたが、2番目の列のzインデックスを変更すれば、完了です。

• Zインデックス：11

プレビュー

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

デスクトップ

静的

ホバー

モバイル

最終的な考え

この投稿では、Diviのランディングページで人気商品をエレガントに紹介する方法を紹介しました。 Diviの組み込みオプションのみを使用して美しい結果を作成する方法を段階的に説明しました。 このデザイン例は、Diviの新しいWooCommerceモジュールがいかに用途が広いか、そしてどのようにして驚くべきeコマースWebデザインを短時間で作成できるかを示しています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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