スライドイン製品情報をDivi製品ページに追加する方法

あなたがあなたの製品ページをデザインする方法はあなたの店一般について多くを語っています。 商品ページのデザインは購入体験の重要な部分であるため、1マイル進む価値があることがよくあります。 もう少しインタラクティブな製品ページを作成したい場合は、この投稿を気に入るはずです。 このチュートリアルでは、美しく構築された製品ページレイアウト内にスライドイン製品情報を追加する方法を示します。 また、このレイアウトを製品ページテンプレートに変換し、JSONファイルを無料でダウンロードできるようにします。

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

プレビュー

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

デスクトップ

モバイル

スライドイン製品ページテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.WooCommerce製品を追加/開く

製品詳細

新しい製品を作成するか、既存の製品を開くことから始めます。 設計でまったく同じ結果を達成するには、製品に次の詳細を追加する必要があります。

• 名前
• 説明
• 背景が透明な商品画像
• 価格
• カテゴリー

DiviBuilderを有効にして製品ページ設定を変更する

Divi Builderを有効にして、右上隅のページレイアウトを変更します。

• ページレイアウト：全幅

VisualBuilderに切り替えます

ページレイアウトを変更したら、[フロントエンドでビルド]をクリックしてDiviのビジュアルビルダーに切り替えることができます。

2.スライドイン製品情報製品ページレイアウトを作成する

ページ上の複数の行を削除する

商品ページエディタ内には、商品に関連するさまざまな要素があります。 2番目の行の要素のみが必要なので、先に進んでセクション内の最初と最後の行を削除します。

セクション設定の変更

背景色

スライドイン製品情報レイアウトを作成するために、さまざまな要素の変更を開始します。 セクション設定を開き、背景色を変更します。

• 背景色：＃ffe4a5

サイジング

サイズ設定にも最小の高さを追加します。 この手順により、セクションがブラウザの高さ全体を占めるようになります。

• 最小高さ：100vh

間隔

次に、間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

可視性

セクションのオーバーフローも非表示にします。 これにより、アニメーションの実行中に水平バーが表示されなくなります。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

行設定の変更

サイジング

次に、行の設定を開き、さまざまな画面サイズでサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％（デスクトップ）、90％（タブレットと電話）

間隔

行のデフォルトの上下のパディングも削除します。

• トップパディング：0px
• ボトムパディング：0px

ポジション

次に、位置設定に移動し、それに応じて設定を変更して、行がセクションの下部に残っていることを確認します。

• 位置：絶対（デスクトップ）、デフォルト（タブレットと電話）
• 場所：下部中央

列2の設定を変更する

背景色

次に、2番目の列にいくつかの変更を加えます。 白い背景色を使用してください。

• 背景色：#FFFFFF

間隔

次に、間隔設定にいくつかのカスタムパディング値を追加します。

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

デフォルトのフィルター

列のフィルター設定に移動し、明るさ、反転、およびセピアフィルターがデフォルト値を通常の状態に保つことを確認します。

• 明るさ：100％
• 反転：0％
• セピア：0％

ホバーフィルター

ただし、ホバーすると、それに応じて値が変更されます。

• 明るさ：49％
• 反転：100％
• セピア：100％

ポジション

また、次の位置設定を適用して、列が行コンテナの右下隅に配置されていることを確認しています。

• 位置：絶対（デスクトップ）、デフォルト（タブレットと電話）
• 場所：右下

列2のウータイトルモジュールを変更する

タイトルテキスト設定

列2のさまざまなモジュールのカスタマイズを開始します。 Woo Title Moduleを開き、H1テキスト設定を次のように変更します。

• タイトルフォント：プレイフェアディスプレイ
• タイトルテキストの色：＃000000
• タイトルテキストサイズ：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）

列2のウー価格モジュールを変更する

価格テキスト設定

次にWooPrice Module設定を開き、価格テキスト設定を変更します。

• 価格フォント：ポピンズ
• 価格テキストの色：＃e5bc87
• 価格テキストサイズ：1.4vw（デスクトップ）、3vw（タブレット）、4vw（電話）

間隔

さまざまな画面サイズにわたって、カスタムの上下の余白も追加します。

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

列2のWoo説明モジュールを変更します

テキスト設定

ウー記述モジュールに移ります。 それに応じてモジュールのテキスト設定を変更します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：軽い
• テキストサイズ：0.8vw（デスクトップ）、1.8vw（タブレット）、2.7vw（電話）
• テキスト行の高さ：2.1em

間隔

レスポンシブなボトムマージンも追加します。

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

列2のカートモジュールに追加するウーを変更します

フィールド設定

次は、Woo Add toCartモジュールです。 モジュールのフィールド設定を変更します。

• フィールド背景色：rgba（255,255,255,0）
• フィールドテキストの色：＃000000
• フィールドフォント：ポピンズ
• フィールドテキストサイズ：0.9vw（デスクトップ）、2vw（タブレット）、3vw（電話）

• すべてのコーナー：0px
• フィールド下部境界線幅：1px
• フィールド下の境界線の色：＃e5bc87

ボタンの設定

ボタンの設定に移動し、それに応じてボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.9vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• ボタンのテキストの色：#ffffff
• グラデーションカラー1：＃e5bd89
• グラデーションカラー2：＃e5bc87
• グラデーションタイプ：線形
• 勾配方向：153度
• ボタンの境界線の幅：0px

• ボタンの境界線半径：1px
• ボタンフォント：ポピン

• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 左パディング：3vw（デスクトップ）、6vw（タブレット）、9vw（電話）
• 右パディング：3vw（デスクトップ）、6vw（タブレット）、9vw（電話）

間隔

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

• 下マージン：2vw（Destkop）、4vw（タブレットと電話）

列2のWooメタモジュールを変更する

テキスト設定

Woo Meta Moduleを開いて続行し、テキスト設定を変更します。

• メタフォント：ポピン
• メタフォントの太さ：軽い
• メタテキス​​トサイズ：0.8vw（デスクトップ）、1.8vw（タブレット）、3vw（電話）

リンクテキスト設定

リンクテキストの色も変更します。

• リンクテキストの色：＃e5bc87

列2にコードモジュールを追加する

Woo Image Moduleのズームの背景色を変更するには、2列目の新しいコードモジュールに配置するCSSコードを少し必要とします。

CSSコードを追加してWoo画像のズームの背景色を変更します

次のCSSコード行をコードモジュールに追加します。

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3.同期されたアニメーション設定をコンテナに追加します

ウー画像モジュール

商品ページのさまざまな要素のスタイルを設定したので、次はスライドイン商品情報効果を実現します。 これを実現するために、Diviの組み込みアニメーション設定を使用します。 列1のWooImage Moduleを開き、次のアニメーションを適用します。

• アニメーションスタイル：スライド
• アニメーションの方向性：上
• アニメーションの開始不透明度：50％
• アニメーション速度曲線：使いやすさ

列1

次に列1の設定を開き、次のアニメーション設定を使用します。

• アニメーションスタイル：スライド
• アニメーションの方向：左（デスクトップ）、上（タブレットと電話）
• アニメーションの遅延：950ms（デスクトップ）、0vw（タブレットと電話）
• アニメーション強度：25％
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト

列2

最後に、次のアニメーション設定を列2に適用します。

• アニメーションスタイル：スライド
• アニメーションの方向：左（デスクトップ）、上（タブレットと電話）
• アニメーション時間：1200ms
• アニメーションの遅延：800ms（デスクトップ）、0ms（タブレットと電話）
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト

4.製品ページのレイアウトをテンプレートに変える

レイアウトをDiviライブラリに保存

製品ページのデザイン全体が完了したら、Diviライブラリに保存できます。 この保存された商品ページレイアウトを使用して、新しい商品ページテンプレートを作成します。

Diviテーマビルダーに移動し、新しいテンプレートを追加します

Divi Theme Builderに移動し、新しいテンプレートを追加します。

すべての製品でテンプレートを使用する

すべての製品で新しいテンプレートを使用してください。

• 使用場所：すべての製品

製品ページテンプレートの本文にレイアウトをアップロードする

次に、[カスタムボディの追加]をクリックし、[ライブラリから追加]をクリックします。

[保存したレイアウト]に移動し、Diviライブラリにアップロードした製品ページレイアウトを選択します。

5.テーマビルダーの変更を保存して結果を表示する

レイアウトを新しい製品ページテンプレートにアップロードしたら、あとはすべてのテーマビルダーの変更を保存して、Webサイトで結果を表示するだけです。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、スライドインの商品情報レイアウトをデザインする方法を紹介することで、商品ページにスパイスを加える方法を紹介しました。 これは、商品ページにインタラクションを追加するための優れた方法です。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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