最初のポップアップは、イーサン ズーカーマンが想像したシナリオに基づいて作成されました。宿泊施設 90 年代初頭に彼の Web ページを Tripod に掲載しました。ユーザーは Web サイトに配置した広告の数について不満を抱いていたため、ユーザーがページにアクセスしたときに開く別のページにバナーを配置することにしました。
この小さなコードは、今でもすべてのWebサイトで見られるような実際のポップアップではありませんでしたが、そこからすべてが始まりました。 最新のWebページでは、ポップアップは広告だけでなく、さまざまな目的で使用されます。 お問い合わせフォーム、プライバシーポリシーの警告、サブスクリプションの提案もポップアップとして表示されることがよくあります。
ポップアップに関して、ユーザーを悩ませるものが2つあります。 また、その外観がWebサイトのスタイルと完全に異なる場合。 これらの2つの問題は、最高品質ではないと思われるプラグインを使用する場合に発生します。
初心者開発者が使用するほとんどのプラグインの最大の問題 ポップアップを作成する 結果のメッセージに対する制御の欠如です。 ただし、Elementor を使用してこれらの問題をすべて回避できます。 ウェブサイトを作成する.
特にElementor用に作成されたXNUMXつの素晴らしいプラグイン ページ·ビルダー、必要なタイプ、形状、スタイルのポップアップを作成するのに役立ちます– エレメンターポップアップビルダー et JetPopup。 どちらもElementorと同じ肉でできているので、質問するのはこれらのプラグインのどちらを選択するかだけです。 あなたがこの決定をするのを助けるために、私は両方の徹底的なレビューをするつもりです、そしてあなたは彼らの賛否両論を比較することができます。 じゃあ行こう ！
ダウンロードとインストール
これは、使用するプラグインを選択する際の最も重要な基準ではありませんが、試すには、最初に取得する必要があります。 そのため、最初から始めて、それを取得するためのプロセスの概要を説明します。価格設定、関連する労力、およびセットアッププロセスの単純さです。
ポップアップビルダ
このプラグインはElementorチームによって作成されました。 したがって、彼を彼の本当の「子供」と呼ぶことができます。 これは、お客様のニーズを満たすために2019年XNUMX月にリリースされたElementorの最後のアップデートです。 ただし、無料版のElementorのユーザーは利用できません。
Popup Builderは、プロフェッショナルサブスクリプションプランに含まれています。 したがって、ポップアップを作成する機能を使用するには、最初にElementorProが必要です。 Elementorのさまざまな機能をすべて49つのWebサイトで使用できる最もシンプルな価格プランは、年間XNUMXドルです。 したがって、最初のステップ（Elementor Proの購入）から、PopupBuilderを取得するためのアルゴリズムは次のとおりです。
- Pro Elementor を購入する ページ·ビルダー.
- 個人アカウントにアクセスして、プラグインをダウンロードします。
- Webサイトのダッシュボードに移動し、[プラグイン]> [新規追加]を選択し、[プラグインのアップロード]ボタンをクリックして、適切な.zipファイルを選択します。
- インストールが完了したら、ライセンスキーを使用してプラグインをアクティブ化します。
- これは、[テンプレート]> [ポップアップ]タブにあるポップアップビルダーです。
少し長い道のりですが、Popup Builderを使用すると、ウィジェット、テンプレート、その他の追加ツールなど、Elementorからさまざまな要素の膨大なコレクションを取得することもできます。
ポップアップビルダ
JetPopup
Jetプラグインの「ファミリー」にはすでに10を超える記事があり、JetPopupもその1つです。 Elementor専用に注意深く作成されており、使用可能なツールの数が増えています。 このプラグインはt
無料版と有料版と完全に互換性があります。 したがって、追加購入する必要はありません。 JetPopupの価格は15ドルで、入手したら45つのWebサイトで使用できます。 複数のプロジェクトで必要な場合は、開発者のライセンスの下でプラグインを購入し（XNUMXドルかかります）、XNUMXつのWebサイトで使用できます。 プラグインを取得するためのアルゴリズムは少し単純です：
- TemplateMonster Marketplaceでプラグインを購入します。 コンピューターにダウンロードされます。
- Webサイトのダッシュボードに移動し、[プラグイン]> [新規追加]を選択し、[プラグインのアップロード]ボタンをクリックして、適切な.zipファイルを選択します。
- インストールが完了したら、プラグインをアクティブにします。
- 出来上がり！ （「Elementorで編集」ボタンをクリックして）Elementorカスタマイズメニューを開くと、ウィジェットの左側のメニューにJetPopupセクションがあります。
ポップアップ作成
これで、ツールが準備できたら、両方のプラグインでポップアップを作成して、この機能がどれほどシンプルで理解しやすいかを確認できます。 次に、基本的なポップアップを作成し、ポップアップビルダーとJetPopupのカスタマイズオプションを見てみましょう。
ポップアップビルダ
Pro Elementorでは、ポップアップはサイトページとは別に行われます。 Webサイトの外観を変更するには、カスタマイズするページを開き、[Elementorで編集]ボタンをクリックして変更を加えます。 ただし、ポップアップを作成（および編集）するには、[テンプレート]> [ポップアップ]に移動し、[新しいポップアップを追加]ボタンをクリックする必要があります。
開いたウィンドウで、作成するテンプレートを選択する必要があります（はい、ポップアップだけでなく、ページやその他のアイテムにもテンプレートを作成できます）。名前を付けます。
[テンプレートの作成]ボタンを押した後、Elementorパーソナライゼーションメニューにリダイレクトされます。 既存のアイテムをゼロから構築することで、簡単にカスタマイズできます。 したがって、最初に適切なモデルを選択するように求められます。
ライブラリリストの一番上に表示されているモデルのXNUMXつを選択しました。 選択した直後に、おそらく慣れているElementorワークスペースに移動します。 パーソナライズオプションは、画面左側のサイドバーに配置されています。 ここにはXNUMXつのタブがあります。
[設定]タブでは、ポップアップのレイアウトの変更、モデルの名前の変更、プレビューを行うことができます。 「スタイル」タブでは、デザインをカスタマイズできます-色、フォント、画像、境界線を変更します。 「詳細」タブには、追加のスライダーのセットもあります。 たとえば、ポップアップがESCキーで閉じられないようにします。
ご覧のとおり、予期しないことは何もありません。以前にElementorを使用したことがある場合は、このプラグインで問題が発生することはありません。 PopupBuilderを使用してポップアップウィンドウを作成する方法を説明する詳細なビデオは次のとおりです。
JetPopup
このプラグインは、ダッシュボードに新しいタブを追加します ワードプレスのテーマ その助けを借りて、ポップアップもページとは別に作成されます。 すぐに使用できるポップアップも、「ポップアップ ライブラリ」という名前のタブに保存されます。 新しいポップアップを作成するには、事前に作成されたテンプレートの [追加] ボタンを押すか、[JetPopup] > [新しいポップアップを追加] に移動し、テンプレートに名前を付けて [Elementor で編集] を押します。
作業領域は標準とは少し異なります。これは、ウィンドウを小さくしているためです。 左側のメニューで、ポップアップに任意のタイプのアイテムを追加できます。
JetPopupプラグインは、ウィジェットメニューに単一の項目（コンテキストアクションボタン）を追加します。 これにより、ユーザーがボタンを押したときに発生するアクションのタイプを定義できます。
ポップアップウィンドウから設定を開くことは、実際には明らかではありません。 メニューの下部にあるメンテナンスボタンをクリックする必要があります。 設定メニューはPopupBuilderのメニューと非常に似ていますが、カスタマイズタブはXNUMXつしかありません。 「一般設定」では、アニメーション効果の定義、モデルの名前変更、または条件の定義を行うことができます。 「スタイル」タブでは、レイアウト、色、画像、フォント、境界線を変更できます。
JetPopupの機能はやや明白ではありませんが、詳細で有用なビデオチュートリアルで補っています。
トリガ
便利で訪問者を困らせないためには、適切なタイミングでポップアップが表示されなければなりません。 ポップアップが表示される条件は「トリガー」と呼ばれます。 利用可能な条件が詳細であるほど、ポップアッププラグインはより柔軟になります。 サブスクリプションフォームのポップアップウィンドウが表示された後にユーザーがサイトを離れないようにする場合は、精度が非常に重要です。
ポップアップビルダ
このプラグインは、ポップアップウィンドウをカスタマイズした直後に必要な条件を定義するのに役立ちます。 [発行]ボタンを押すと、条件（このポップアップが表示されるページ）、トリガー（ポップアップウィンドウが表示されるとき）、および高度なルールを定義できるウィンドウが表示されます。
Popup Builderには、XNUMX回のスクロールとクリックでの表示などのXNUMXつのトリガーと、設定されたセッション数の後での表示や特定のデバイスでの表示などのXNUMXつの高度なルールがあります。 トリガーと高度なルールにはシンプルなスライダースイッチがあり、必要なパラメーターをすばやく設定できます。
JetPopup
すべてのトリガー、条件、および開始イベントは、パラメーターにグループ化されます。 メンテナンスボタンをクリックした後、設定タブを開き、すぐにトリガーを設定できます。 スクロール後のページの割合、表示するコンテキストメニュー、またはユーザーにメッセージが表示されるまでの秒数を設定できます。
ウィンドウは、ユーザーが特定のアクションを実行するたびにXNUMX回だけ表示できます（強くお勧めしません。ユーザーを満足させることはできません）。 この具体的なポップアップを表示する投稿またはページを非常に正確に選択することもできます。 一般に、このプラグインは非常に柔軟性があり、ポップアップを非常に正確に表示できます。
ポジショニング
ユーザーは確かに画面の中央から飛び出すウィンドウを避けることはできませんが、訪問者をWebサイトからそらし、本当に迷惑になる可能性があります。 すべてのポップアップを中央に配置する必要はありません。上部の細いリボンは目立たなくなりますが、はるかに効果的です。 これは、ウィンドウの位置を制御し、画面内を移動できるようにする必要があることを意味します。
ポップアップビルダ et JetPopup 画面をXNUMXつのセクターに分割し、ポップアップをそれらのいずれかに配置できるようにします。 配置は、左右および上下のスケールに沿って定義されます。 あまり柔軟性はありませんが、ポップアップには十分です。
アニメーション効果
ウィンドウがページ上でスライド（またはロールまたはジャンプ）する方法は非常に重要です。 ウィンドウの動きが速すぎたり遅すぎたりすると、効果がありません。 跳ね返り、くすぐり、震えも非常に正確に使用する必要があります。 アニメーション効果はサイトをよりダイナミックにしますが、全体の印象を損なう可能性もあります。
ポップアップビルダ さまざまな種類のスライド、展開、ズーム、バウンス、さまざまな方向への回転など、36種類の入力アニメーションがあります。 これらすべてとアニメーションの長さは、[設定]タブの[レイアウト]セクションにあります。
プラグインには13種類のアニメーションがあります JetPopup、フェード、垂直反転、さまざまなスライド、バウンスおよびズームを含む。 これらは、[設定]タブの[設定]セクションにあります。
モデル
場合によっては、特定の構造を持つポップアップを作成し、それがどのように表示されるかを正確に知りたいことがあります。 しかし、これはかなりまれな機会です。 多くの場合、ポップアップにどの要素を含める必要があるかわかりません。 ここでテンプレートが役に立ちます。 事前構成されたサンプルを使用しない場合でも、サンプルを処理することで概要を把握できます。 そしてもちろん、すぐに使用できるアイテムをカスタマイズする方が、最初から作成するよりもはるかに迅速かつ簡単です。
ポップアップビルダ Elementorのモデルライブラリにカテゴリを追加しました。 前に言ったように、ポップアップを作成する新しいプロセスの開始時にそれを見ることができます。 ポップアップテンプレートの品揃えは十分に大きいです。 100以上のアイテムがあります。 左上隅にあるドロップダウンカテゴリ別の並べ替えツールを使用すると、検索を高速化できます。 カテゴリは理解しやすく、必要なポップアップを見つけるのにそれほど時間はかかりません。
JetPopup テンプレートの膨大なライブラリもあります。 それらはすべて[コンテキストライブラリ]タブに保存され、プレビューボタンや使用状況カウンターなどの便利な機能を備えています。 さらに多くの並べ替えオプションがあり、特定のタイプのモデルを表示するようにリストを構成して、任意の順序で配置することができます。 たとえば、作成日に応じて。 利用可能なモデルの正確な数はわかりませんが、間違いなく100を超えています。
比較表
| エレメンターポップアップビルダー | JetPopup | |
| グランプリ | $ 45 | $ 15 |
| モデル | 100+ | 100+ |
| トリガ | 6トリガー、7の高度なルール | 5オープンイベントと追加パラメーター |
| Animatio | 36タイプ | 13タイプ |
| チュートリアル | ドキュメント | ドキュメント、9ビデオチュートリアル |
まとめ
これらXNUMXつのプラグインのどちらが優れているかはわかりません。 それらを判断するには複雑すぎます。 各ケースおよび各人には、プラグインの選択に関する独自の要件があります。 自分で定義する必要があると思います。このXNUMXつのうちどちらが最適ですか。 あなたのウェブサイトに素晴らしいポップアップを追加することであなたに幸運を祈ります！
