WooCommerce で Elementor ポップアップを作成する

私たちは皆、WooCommerce の大ファンです。 セットアップとカスタマイズは簡単です。 動的で強力な e コマース ストアの作成と管理を簡単にする機能がパッケージに含まれています。

ただし、成功する e コマース ページを作成するには、単に人気のある商品を追加するだけではありません。 すべてのページは視覚的にも魅力的である必要があります。 ウェブサイトが視覚的に魅力的でユーザーフレンドリーであればあるほど、より多くの顧客を引き付ける可能性が高くなります。

• ポップアップウィンドウの構成
• Elementor のビジュアル ビルダーを使用してポップアップを作成することもできます
• 公開設定

WooCommerce はサイトを構築するときにショッピング カートとチェックアウト ページを作成しますが、Elementor はそれらをカスタマイズすることで、より魅力的なページを作成します。

再設計するか、最初からやり直すかを選択できます。 Web サイト上の他のすべてのページに対してこのプロセスを繰り返すことができます。

温かいサンキューページを作成し、マイアカウントページと利用規約ページを更新することで、顧客の心をつかむことができます。

Elementor のドラッグ アンド ドロップ機能をこのチュートリアルと組み合わせることで、ページの作成時に問題なく操作できるようになります。

wooCommerce ストアを設定した後、訪問者や顧客にとってより魅力的なストアにしたい場合があります。 ポップアップを追加すると、ユーザーに別の印象が与えられ、ストアに留まりたいという新たな欲求が生まれます。

 ポップアップを作成するには、メニュー バーの [テンプレート] > [ポップアップ] に移動します。 すべてのポップアップのリストが表示されます。ポップアップをまだ作成していない場合は、次のような内容が表示されます。

[新しいポップアップの追加] (これは一目瞭然です) をクリックすると、名前を付けて、表示された既成のampからテンプレートを選択するように求められます。 さまざまな目的に応じて、さまざまなテンプレートが利用できます。 アナウンスに適したもの、割引の宣伝に適したもの、ユーザーに何かへのサインアップを促すのに適したものなどがあります。 Cookie の使用やその他の GDPR 通知についてユーザーに警告するampもあります。 気に入ったものが見つかったら、それをクリックして大きなプレビューを表示し、[挿入] ボタンを押します。

このボタンをクリックすると、WordPress バックエンドのポップアップ ビルダーが表示されます。

これまでに Elementor を使用したことがある場合は、インターフェイス、オプション、すべてのレイアウトに慣れることができるでしょう。 これは基本的に、WordPress で Elementor ページ テンプレートを作成するプロセスと同じです。

画面の右側にはメイン キャンバスがあり、現在作業中の内容のプレビューが表示されます。 各要素を選択し、[編集] > [要素の編集] を選択すると、各要素を個別に編集およびカスタマイズできます。 完了すると、左側のサイドバーにコントロールと設定が表示され、作品を公開するオプションも表示されます。

ポップアップウィンドウの構成

 このとき、ポップアップのプレビュー (白紙の状態、または選択したテンプレートのいずれか) が表示されます。

ポップアップ設定はデフォルトで常に開いており、ポップアップ キャンバス自体の機能をカスタマイズできます。 それらは次のとおりです。

• ここでさまざまな種類のポップアップを作成できるため、最も時間を費やす必要があります。 つまり、これらの設定を調整することで、次のような効果を得ることができます。

• モーダル ポップアップはモーダル ウィンドウの一種です。
• スライドイン、通知バーなど。

さらに、他のいくつかの重要な設定をカスタマイズできます。

[設定]では次のオプションが使用できます。

• 画像の高さと幅を変更します。
• オブジェクトの垂直方向または水平方向を変更します (たとえば、ampを上部または下部に固定して通知バーを作成できます)
• オーバーレイを使用するかどうかを決定します (これにより、たとえば、ampがアクティブなときに背景をグレー表示にすることができます)
• ブラウザの閉じるボタンを無効にしてください。
• 入口にアニメーションを入れます。

[スタイル]では次のことを行うことができます。

• 背景色を変更したり、グラデーションにしたり、画像を背景として使用したりできます。
• オーバーレイが有効になっている場合は、設定します。
• 閉じるボタンを有効にしている場合は、それを設定する必要があります。

最後に、[詳細設定] タブには、次のような操作を可能にするさまざまなインポート設定が含まれています。

• 閉じるボタンを表示するか、一定時間が経過するとポップアップが自動的に閉じるようにします。
• オーバーレイをクリックするか Esc キーを押すと、ウィンドウが閉じないようにすることができます。

• ページを下にスクロールする機能を無効にします。
• 複数のポップアップを避けてください (複数のポップアップを同じページにターゲットにしている場合、訪問者がイライラするのを防ぐことができます)。

これらの設定がポップアップにどのような影響を与えるかを理解するために、位置をウィンドウの右下隅に変更すると次のようになります。

ポップアップが右下隅に恒久的に固定される様子を見てください。 スクロール トリガーを開始アニメーションと組み合わせて使用​​すると、控えめで素敵なスライドイン効果を実現できます。

Elementor のビジュアル ビルダーを使用してポップアップを作成することもできます

基本的なポップアップ設定を完了すると、視覚的なドラッグ アンド ドロップ インターフェイスに要素をドラッグ アンド ドロップすることで、ポップアップの実際のコンテンツのデザインをすぐに開始できます。

任意の Elementor ウィジェットを使用できるため、最終的なデザインを大幅に制御できます。 フォーム ウィジェットは、電子メール オプトイン フォームを作成できる唯一のウィジェットであるため、絶対に含める必要がある唯一のウィジェットです。

フォーム ウィジェットを使用すると、提供するフィールドだけでなく、送信ボタンのテキストや外観も完全に制御できます。 amp​​：

さらに、Elementor のすべてのウィジェットとデザイン オプションをよく理解することを強くお勧めします。

前述したように、Web サイトの外観を大幅に制御でき、コンバージョン率の向上に役立ついくつかの便利なウィジェットにもアクセスできます。

公開設定

自分が作ったものに満足したら、それを世界と共有したくなるでしょう。 「PUBLISH」ボタンを押すと、一連の質問が表示されます。 例として:

ポップアップの表示条件を指定することはできますか？ 検索結果にどのページを含めるか除外するかを選択できます。 条件はいくつでも指定できます。

では、ポップアップを表示させるイベントは何でしょうか? ページの読み込み時、スクロール時、またはユーザーが特定の要素までスクロールしたときなどにポップアップをすぐに表示するかどうかを選択できます。 これらのオプションにはすべて独自の設定があり、完全なカスタマイズが可能です。

最後になりましたが、重要なこととして、再訪問者にのみポップアップを表示する、設定された回数だけポップアップを表示する、または訪問者が特定の Web サイトから Web サイトを参照した場合にのみポップアップを表示するなど、いくつかの高度なルールが表示されます。 URL。 他にもいくつかあります。 これらのオプションにより、ポップアップのユーザー エクスペリエンスが大幅に向上し、真の整合性とユーザーへの配慮を持ってポップアップを設計できるようになります。

希望する方法で設定を完了し、「保存して閉じる」をクリックします。 このボタンをクリックすると、ポップアップがどのように表示されるかがampされます。

ポップアップはカスタマイズでき、動的コンテンツを追加できます。

物事を次のレベルに引き上げましょうか? ここまでは、テンプレートを選択し、1 ～ 2 回の座り方を微調整しました。これで終わりです。 ポップアップをさらにカスタマイズするシナリオを考えてみましょう。

プロセスの「新しいポップアップの追加」段階に戻り、タイトルを指定してテンプレートをもう一度選択できます。

その後、それを選択し、基本設定に必要な変更を加え、もう一度「公開」をクリックします。

さて、ここからが面白くなり始めます。 Elementor を使用して、WordPress インストールから動的データを取得し、それをポップアップ内のポップアップ自体に挿入できます。 ユーザーの名前、ページのタイトルなどの情報を含めることができます。

次のシナリオを考えてみましょう。WooCommerce を実行しており、現在表示している特定の製品に割引があることをユーザーに通知したいと考えています。 まず、テンプレートからテキストのセクションを選択し、サイドバーの [動的] をクリックします。

投稿自体からの情報、サイト全体からの情報、メディア情報、著者情報、さらには WooCommerce 情報など、幅広いオプションから選択できます。 製品タイトルを選択すると、選択の結果としてテキスト コンテンツ ブロックに追加されます。

データベースの詳細が適切に取得されなかったとします。 その場合、テキストの前にいくつか、テキストの後にいくつか、およびフォールバック テキスト (データベースの詳細が適切に取得されない場合) を指定することができます。

そこで、このプロセスをボタンに対して複製して、商品の価格を表示しましょう。 前述のテキストを「今すぐ購入」と表現して、説得力のある行動喚起を提供できます。

さらに一歩進めて、製品画像をポップアップ ウィンドウ自体の背景として使用することもできます。

PUBLISH を押すと、もう一度公開設定が表示され、ポップアップを WooCommerce ページにのみ表示するように指定できます。 トリガーとして、タイマーを 15 秒間の非アクティブ状態に設定します。 最終的には次のようになりました。

デザインは改善の余地がありますが、ポップアップの背景として商品名、価格、商品画像が表示されていることがわかります。 素晴らしい！