DiviのWooモジュールを使用して製品ページのスティッキーバーを設計する方法

公開: 2019-10-16

スティッキーバーは、ウェブデザインで人気のある要素であり続けています。ポップアップのように邪魔になることなく、CTAを最前線に保つことで、コンバージョンを促進するのに最適です。

このユースケースでは、DiviのWooモジュールを使用してWooCommerce製品のスティッキーバーを設計します。スティッキーバーには、任意のDiviモジュールを含めることができます。このチュートリアルでは、「カートに追加」ボタンを含む1つのスティッキーバーを作成して、ユーザーがページを下にスクロールしても表示されたままになるようにします。さらに、「カートに追加」ボタンをクリックすると常に「カートを表示」ボタンが表示されるように、スティッキーカート通知バーも作成します。

これらのスティッキーバー要素は、これらの重要なCTAを表示し続けることで、コンバージョンを促進するのに役立ちます。

始めましょう！

スニークピーク

これは、このユースケースチュートリアルで設計するものの概要です。

スティッキーバーのレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

まだインストールしていない場合は、インストールされているDiviテーマ（またはDiviテーマを使用していない場合はDivi Builderプラグイン）をインストールしてアクティブ化します。
WooCommerceプラグインをインストールしてアクティブ化します。 WooCommerceを初めてセットアップする場合は、基本的なセットアップウィザードを実行して、ストアの準備を整える必要があります。完了すると、新製品を追加する準備が整います。
まだ持っていない場合は、いくつかの製品を作成します。新製品を追加する方法の詳細については、このチュートリアルを確認してください。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：製品ページでのスティッキーバーの設計

この例では、モックの単純な製品を使用するため、新しい製品を作成するか、既存の製品を編集する必要があります。このチュートリアルでは、製品情報は重要ではありません。製品のタイトル、価格、説明、画像などの基本事項があることを確認してください。

簡単な製品の準備ができたら、クリックしてバックエンドで製品を編集し、製品ページにDiviBuilderをデプロイします。 [Diviページ設定]で、[ページレイアウト]に[全幅]を選択し、[フロントエンドで構築]をクリックします。

製品ページは次のようになります。

ブレッドクラムとカート通知を含む最初の行の下に、1列のレイアウトで新しい行を追加します。

行設定

モジュールを追加する前に、次のように行設定を更新します。

背景色：＃333333
カスタムガター幅を使用：はい
側溝幅：1
幅：100％
パディング：0px上、0px下

行をスティッキーにする

行を固定するには、次のカスタムCSSをデスクトップのメイン要素に追加します。

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

次に、次のCSSをタブレットディスプレイの同じメイン要素に追加します。

top: 0px;

「position：sticky」cssプロパティに慣れていない場合は、基本的に、固定位置と、要素（この場合は行）がコンテナに沿ってスクロールして到達する相対位置とのブレンドのようなものです。ページの上部または下部の指定された位置（または指定されたオフセット）。この例では、ブラウザウィンドウの上部から50pxにオフセットを設定しています（デスクトップのデフォルトの固定ヘッダーの高さのためのスペースを残しています）。次に、タブレットでは、モバイルのブラウザの上部にある行/スティッキーバーを修正するために、オフセットが「top：0px」に変更されます。

注：CSSをボックスに追加するときに表示されるエラーは無視してください。コードは正常に機能します。

CSSを作成したら、次のようにZインデックスを更新します。

Zインデックス：10

これで、ユーザーが製品ページを下にスクロールすると、行が固定されます。

列カスタムCSS

行にコンテンツを入力する前に、1列の行内のモジュールが垂直方向ではなく水平方向に整列することを確認する必要があります。簡単なCSSトリックを使用して、flexプロパティでこれを行うことができます。列の設定を開き、次のカスタムCSSをメイン要素に追加します。

display:flex;
align-items:center;

それは私たちの粘着性のある列のデザインの世話をします。次に、行をいくつかのコンテンツで埋める必要があります。

ウータイトルを追加

スティッキー行の列に新しいウータイトルモジュールを追加します。

次に、次のように設定を更新します。

タイトルテキストの色：#ffffff
タイトルテキストサイズ：28px（デスクトップ）、20px（タブレット）、16px（電話）
幅：30％
パディング：上2vw、下2vw、左2vw、右2vw

ウー価格を追加

次に、作成したwooタイトルモジュールにカーソルを合わせると表示される灰色のプラスアイコンをクリックして、woo価格モジュールを追加します。

次に、ウー価格の設定を次のように更新します。

価格テキストサイズ：28px（デスクトップ）、20px（タブレット）、16px（電話）
幅：30％
パディング：上2vw、下2vw、左2vw、右2vw
右ボーダー幅：1px
右の境界線の色：＃777777
左ボーダー幅：1px
左ボーダーの色：＃777777

カートモジュールにウーを追加

最後のコンテンツについては、WooPriceモジュールの直後にWooAdd to CartModuleを追加します。

次に、次のように設定を更新します。

モバイルで在庫量と数量フィールドを非表示にして、[カートに追加]要素を簡略化します。

数量フィールドの表示：オフ（タブレット）
在庫を表示：オフ

テキストの配置：右
ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：18px（タブレット）、14px（電話）
ボタンのテキストの色：#ffffff
ボタンの背景色：＃7ac5af
ボタンの境界線の幅：0px

幅：40％
パディング：左2vw、右2vw

結果

それでは、ライブページでどのように表示されるかを確認しましょう。

そして、ここではモバイル上にあります。

パート2：カート通知スティッキーバーの作成

カート通知スティッキーバーの作成には、実際にはいくつかの簡単な手順が必要ですが、結果は非常に効果的です。ご存知かもしれませんが、カートの通知は、ユーザーが[カートに追加]ボタンをクリックした後にのみ表示されます。しかし、ユーザーをチェックアウトページに導くのは、購入プロセスの次の重要なステップです。そのため、カートの通知がウィンドウの下部にスティッキーバーとしてポップアップすると、ユーザーにとってより目立ちます。

カート通知スティッキーバーを作成するには、最初に製品ページの下部に新しい1列の行を作成します。次に、次のように行設定を更新します。

幅：100％
パディング：0px上、0px下

次に、次のカスタムCSSをメイン要素に追加して、行をスティッキーにします。

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

注：前に行ったように、position：stickyプロパティを追加するときにポップアップするエラーは無視してかまいません。

これにより、上にスクロールしたときに行がウィンドウの下部に固定されます。

次に、zインデックスを更新して、次のように最前線に保ちます。

Zインデックス：10

カート通知モジュールを追加する

行を作成したら、Woo Cart Notice Moduleを行に追加し、次のように設定を更新します。

テキストテキストサイズ（電話）：15px
マージン：0em下

それでおしまい！ページ上部のデフォルトのカート通知要素を消去するかどうかはあなた次第ですが、より良い変換のためにそのままにしておくことをお勧めします。

最終結果

これが、2本の粘着性のあるバーを配置した最終結果です。

デスクトップ

モバイル

最終的な考え

この投稿が、Diviの製品ページにスティッキーバーを作成する方法を理解するのに役立つことを願っています。商品のタイトル、価格、カートに追加ボタンを含むスティッキーバーを作成する方法について説明しました。また、カート通知スティッキーバーの作成方法も示しました。これらは両方とも、購入プロセスを支援し、コンバージョンを促進するはずです。また、プラグインも必要ありません。

自分のサイトで製品ページのスティッキーバーを使用する新しい方法を自由に探索してください。

コメントで皆様からのご連絡をお待ちしております。

乾杯！