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

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

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

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

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

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

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

Elementorのドラッグアンドドロップ機能をこのチュートリアルと組み合わせると、ページを作成するときに問題のないエクスペリエンスを確実に得ることができます。

wooCommerceストアをセットアップした後、訪問者や顧客にとってより魅力的なものにしたいと思うかもしれません。 ポップアップを追加すると、ユーザーは別の印象を与え、ストアにとどまりたいという新しい欲求を得ることができます。

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

あなたは（かなり自明である）ADD NEW POPUPをクリックしたら、あなたはそれに名前を付け、その後、既成の元からテンプレートを選択するように求められますampレ表示。 さまざまなテンプレートが複数の目的で利用できます。 アナウンスに適しているものもあれば、割引を宣伝するのに適しているものもあれば、ユーザーに何かにサインアップするように促すのに理想的なものもあります。 でもありの元ampレクッキーの使用または他のGDPR通知をユーザーに警告するため。 気に入ったものが見つかったら、それをクリックして大きなプレビューを表示し、[挿入]ボタンを押します。

このボタンをクリックすると、WordPressバックエンドのポップアップビルダーに移動します。

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

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

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

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

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

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

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

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

[設定]タブでは、次のオプションを使用できます。

• 画像の高さと幅を変更します。
• オブジェクトの垂直または水平方向の変更（例のためにampル、あなたは通知バーを作成するために、上部または下部にそれを修正することができ）
• オーバーレイを使用するか否かの決定を行う（これはあなたが元のために、することができますampル、ポップアップがアクティブであるときに、背景を灰色）
• ブラウザの閉じるボタンを無効にします。
• 入り口のアニメーションを含めます。

[スタイル]タブでは、次の操作を実行できます。

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

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

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

• ページを下にスクロールする機能を無効にします。
• 複数のポップアップを避けます（同じページに複数のポップアップをターゲットにした場合、これにより訪問者がイライラするのを防ぐことができます）。

これらの設定がポップアップにどのように影響するかを理解するために、位置をウィンドウの右下隅に

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

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

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

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

フォームウィジェットを使用すると、提供するフィールド、および送信ボタンのテキストと外観を完全に制御できます。 EX用ampル：

それ以外にも、Elementorのすべてのウィジェットとデザインオプションに精通することを強くお勧めします。

前に述べたように、あなたはあなたのウェブサイトの外観をかなり制御することができます、そしてあなたはあなたがあなたのコンバージョン率を上げるのを助けることができるいくつかの便利なウィジェットにアクセスすることもできます。

公開設定

自分が作成したものに満足したら、それを世界と共有したいと思うでしょう。 PUBLISHボタンを押すと、一連の質問が表示されます。 実例として：

ポップアップを表示する条件を指定することはできますか？ 検索結果に含めるページまたは検索結果から除外するページを選択できます。 あなたはあなたが望むだけ多くの条件を持つことができます。

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

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

希望する方法で設定を完了し、[保存して閉じる]をクリックします。 あなたはように移動しますampルあなたのポップアップが、このボタンをクリックした後にどのように見えるかの。

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

物事を次のレベルに引き上げましょうか。 これまで、テンプレートを選択し、1つまたは2つのシッティングを微調整しましたが、それだけです。 ポップアップをさらにカスタマイズしたいシナリオを考えてみましょう。

プロセスのADDNEW POPUPステージに戻ります。ここで、タイトルを指定して、もう一度テンプレートを選択できます。

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

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

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

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

データベースの詳細が適切に取得されていないとします。 その場合、テキストの前、テキストの後、およびフォールバックテキスト（データベースの詳細が適切に取得されていない場合）を指定できます。

それでは、このプロセスをボタンに複製してみましょう。ボタンには、製品の価格が表示されます。 前のテキストを「今すぐ購入」と表現して、説得力のある行動を促すことができます。

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

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

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