スティッキーな商品画像をDivi商品ページテンプレートに追加する方法
公開: 2020-11-02オンラインで商品を購入する場合、セールを終了するには優れた商品画像が不可欠です。 そのため、ほとんどの商品ページの上部に商品画像が表示されているため、購入者が最初に目にするのはこの商品です。 ただし、ユーザーがページを下にスクロールして製品に関する詳細情報（説明、レビューなど）を表示すると、メインの製品画像が表示されなくなります。 これらの商品画像を表示したままにする1つの方法は、潜在的な購入者が商品情報を閲覧しているときに表示されたままの粘着性のある商品画像を追加することです。
このチュートリアルでは、粘着性のある商品画像をDivi商品ページテンプレートに追加する方法を紹介します。 これを行うには、DiviのWooCommerce製品画像モジュールを最適化して、元の製品画像がスクロールして表示されないように、ページの上部に表示して貼り付けることができます。
始めましょう！
スニークピーク
これは、このチュートリアルで構築するデザインの概要です。
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
https://youtu.be/vwfPFqyVaNM
私たちのYoutubeチャンネルを購読する
テンプレートをアップロードする方法
Diviテーマビルダーに移動します
テンプレートをアップロードするには、WordPressWebサイトのバックエンドにあるDiviThemeBuilderに移動します。
ウェブサイトテンプレートをアップロード
次に、右上隅に2つの矢印の付いたアイコンが表示されます。 アイコンをクリックします。
[インポート]タブに移動し、この投稿でダウンロードできたJSONファイルをアップロードして、[Diviテーマビルダーテンプレートのインポート]をクリックします。
Diviテーマビルダーの変更を保存
ファイルをアップロードすると、すべての投稿に割り当てられた新しい本文領域を持つ新しいテンプレートが表示されます。 テンプレートをアクティブ化したらすぐに、Diviテーマビルダーの変更を保存します。
チュートリアルに取り掛かって、これを最初から作成する方法を学びましょう。
スティッキーな商品画像をDivi商品ページテンプレートに追加する方法
Theme Builder Pack5製品ページテンプレートのアップロード
開始するには、事前に作成された製品ページテンプレートの1つを追加して、デザインをすぐに開始します。 テンプレートのテーマビルダーをインポートするには、次の手順を実行する必要があります。
- Diviテーマビルダーに移動します
- ページの右上にある移植性アイコンをクリックします。
- [移植性]ポップアップで[インポート]タブを選択します。
- Divi Divi Theme Builder5製品テンプレートファイルをダウンロードしてインポートします。 ここでパックをダウンロードしたら、ファイルを解凍すると、インポートする必要のある「divi-theme-builder-pack-5-product-page-template.json」ファイルが見つかります。
- インポートボタンをクリックします
- テンプレートをインポートしたら、テンプレートのカスタムボディ領域にある編集アイコンをクリックして、テンプレートのレイアウトを編集します。
新しい行を追加する
ユーザーがすでに商品画像を含む上部セクションを超えてスクロールすると、商品画像が表示されるようにします（そこに表示する必要はありません）。 したがって、レイアウトの上部セクションの下にある新しいセクションに追加します。
先に進み、上部セクションの下に新しい通常のセクションを追加します。
新しいセクションの設定を開き、パディングを更新します。
- パディング：0px上、0px下
[詳細設定]タブに移動して、zインデックスを更新します。
- Zインデックス：13
これは、スクロール時に画像（このセクションの子要素）がページ上の他のセクション/要素の上にとどまるようにするためです。
行を追加する
次に、セクションに1列の行を追加します。
行設定を開き、行の配置とパディングを調整します。
- 行の配置：右
- パディング：0px上、0px下
商品画像を追加
これで、スクロール時にページの上部に最終的に貼り付く製品画像を追加する準備が整いました。 商品画像を追加するには、上部のセクションにある既存の商品画像モジュールをコピーして、新しい行に貼り付けます。
ウー画像設定
新しいwooimagesモジュールの設定を開き、次のようにコンテンツを調整します。
- ギャラリー画像を表示：オフ
- セールバッジの表示：オフ
（注：必要に応じてギャラリー画像を保持できます。この画像モジュールはページ上の他の要素の上にカーソルを合わせるため、スペースを取りすぎないように注意してください。）
[デザイン]タブで、[全幅を強制]オプションを[はい]に更新します。
次に、以下を更新します。
- 最大幅：300px（デスクトップ）、200px（電話）
- モジュールの配置：右
パディングを調整します。
- パディング：上10px、右10px
[詳細設定]タブで、以下を更新します。
- Zインデックス：1
- スティッキーポジション：トップに固執
これにより、ユーザーがその画像を超えてスクロールすると、画像がページの上部に貼り付けられます。
スティッキーの位置が決まったら、[デザイン]タブに戻り、スティッキーオプションを使用して不透明度フィルターを更新し、スティッキーになるまで画像を非表示にします。 設定にカーソルを合わせてサムネイルアイコンをクリックすると、スティッキースタイルオプションを展開できます。
- 不透明度：0％（デスクトップ）、100％（スティッキー）
セクション、行、および列の間隔を削除します
現在、レイアウトのフロー内で新製品の画像が使用している不要な間隔があります。 その間隔を削除するには、列に「0」または非常に低い値のカスタム高さ値を指定するだけです。 実際の高さがない列がある場合でも、商品画像は表示/オーバーフローします。
列の設定を開き、次のカスタムCSSをメイン要素に追加します。
height: 15px;
それでおしまい！ これですべて完了です。
最終結果
あなたのサイトのライブ投稿を見て、最終結果をチェックしてください。
最終的な考え
Diviの商品ページテンプレートに粘着性のある商品画像を追加すると、訪問者が商品を探索するときに商品をすばやく簡単に表示できます。 また、同じ手法を使用して、その横にある[カートに追加]ボタンを貼り付けることもできます。 とにかく、うまくいけば、これはあなたの次のプロジェクトであなたを助けるでしょう。
コメントでお返事をお待ちしております。
乾杯！