WordPress で投稿タグごとに XNUMX つのポップアップを作成して表示したいですか? この記事を読み続けてください。
Web サイトを閲覧するときに表示される小さなウィンドウについては、すでにご存知かと思います。 まあ、それはポップアップまたはポップアップと呼ばれます。 ポップアップは、Web サイト上のさまざまなサイズや画面上の位置で表示されます。
WordPress には、Elementor Pro、JetPopup、Brizy Pro など、ポップアップを作成するためのプラグインが多数あります。
覚えておくべき重要なことは、ポップアップが Web サイト訪問者にとって煩わしいものであってはいけないということです。したがって、できるだけシンプルで魅力的なポップアップを作成してください。
コンテンツ
ポップアップを作成するためのいくつかの WordPress プラグイン
Elementorプロ
Elementor Pro は、何百ものプレミアム機能を備えた Elementor 拡張機能です。ワークフローとデザインを加速する強力なプロフェッショナル ツールを提供します。 Elementor Pro を使用すると、Web サイトのレイアウトとデザインを完全に制御できます。 この場合、ポップアップのデザインを自由にカスタマイズできます。
使用 Elementorプロ 投稿タグでポップアップを作成するのは非常にシンプルで使いやすいです。 ポップアップの表示条件を非常に正確な方法で簡単に定義できます。
JetPopup
Crocoblock の JetPopup は、 Elementor。 スタンドアロンのプラグインとして購入することも、他の Crocoblock プラグインとのバンドルで購入することもできます。 JetPopup を使用してポップアップ ウィンドウを作成する利点は、多くの優れた機能が備わっていることです。
- ポップアップ ウィンドウのトリガーを試してみることができます。
- ポップアップウィンドウのアニメーションを作成できます。
- 多数のポップアップ テンプレートが利用可能です。
また読みます： Elementor 向けのベスト プレミアム アドオン 22 選
ブリジープロ
ポップアップビルダー ブリジープロ は XNUMX つのオプションを提供します。 XNUMX つ目はクリックでアクティブ化されるポップアップで、XNUMX つ目は自動トリガーと条件です。
- クリック時に開く: ページの要素をクリックするだけでポップアップをトリガーできます。
- 自動トリガーと条件: ポップアップが表示されるタイミングを決定する訪問者のアクションを構成できます。
Elementorを使用してWordPressで投稿タグごとにポップアップを作成して表示する方法
前述したように、WordPress でポップアップを作成するにはいくつかのオプションがあります。 このチュートリアルでは、バージョンを使用して投稿タグごとにポップアップを作成および表示する方法を説明します。 Elementorプロ、すでに持っていることを確認してください。
ステップ 1: ポップアップ テンプレートを作成する
最初に行うことは、新しいポップアップ テンプレートを作成することです。 新しいポップアップ テンプレートを作成するには、次の場所に移動します。 テンプレート > ポップアップ WordPressダッシュボードでボタンをクリックします 新しく追加する。
次に、ポップアップの名前を追加し、ボタンをクリックします。 モデルを作成します。
テンプレート ライブラリに移動します。ライブラリ ウィンドウからテンプレートを選択するか、独自のポップアップ テンプレートをデザインできます。 ライブラリのテンプレートを使用するには、ボタンをクリックするだけです。 インサート.
ただし、このチュートリアルでは、ポップアップ テンプレートを最初から作成します。 アイコンをクリックします X をクリックしてテンプレート ライブラリを閉じます。
ステップ 2: ポップアップ設定を調整する
ポップアップ テンプレートの作成を開始する前に、ポップアップ設定でいくつかの調整を行う必要があります。 あなたのサイトに最適な設定を見つけることができます。 このチュートリアルでは、選択したポップアップ設定を示します。
左下隅にある歯車アイコンをクリックします。 ポップアップ設定で、 幅 ビューの幅の 90% (VW）のEt 役職 en 中央下.
ステップ 3: ポップアップをデザインする
次に、ポップアップ テンプレートをデザインします。 新しいセクションを追加し、5 列構造を選択します。 セクション設定で、 幅 950 で。設定を変更して遊ぶことができます。
たとえば、タブに移動できます 形式 背景を設定するには、タブに移動します 高度な マージンなどをカスタマイズします。
さて、コラムに戻りましょう。 左側の列で幅を 33% に設定し、他の 16 つの列では XNUMX% に設定します。
左側の列に、テキストを含むタイトル ウィジェットを追加します。 現在のコンテンツに関連する他のコンテンツを閲覧するよう Web サイト訪問者を招待するテキスト、またはその他の任意のテキストを追加できます。
右側に、画像ウィジェットを追加します。 投稿のサムネイル/アイキャッチ画像から画像を追加したり、手動でアップロードしたりできます。
これで構造の準備が整いました。 帰ります ポップアップ設定 開始、終了、およびマージンのアニメーションをカスタマイズします。 このチュートリアルでは、入力を次のように設定します。 フェードダウン そして出力は フェードアップ。 次にタブに移動します 高度な そしてマージンを 30 (リンクの共通値) に設定します。
ステップ 4: ポップアップを公開する
デザインの準備ができたので、ボタンをクリックします。 PUBLISH 表示条件やトリガーを設定します。 表示条件を定義するには、 ボタンをクリックします。 条件を追加 ドロップダウン リストからオプションを選択します。
投稿タグでポップアップを表示したい場合は、以下の表示条件を設定できます（アニメーション参照）。
「次へ」をクリックします。 タブ内 トリガ、トリガーを次のように設定します。 オンスクロール スイッチを切り替えると はい。 を定義する リーダーシップ シュール ロー と 幅 95%以上。 訪問者が記事の最後に到達したときにポップアップが表示されるようにしたいからです。
このチュートリアルでは、次のことを定義しません。 高度なルール。 それでクリックしてください 保存して閉じます。 さて、これで終わりです。
それがどのようなものかを見てみましょう。
これでポップアップが完成しました。 関連記事もご覧ください。
