Elementorでポップが作れるって知ってました？
そう、これはElementorのユニークな機能の一つで、ポップアップを自分でデザインすることができます。ポップアップは、通知、トラフィックの誘致、オファーの表示、終了の意図のために役立ちます。Elementorの最新バージョンでは、カスタムまたはテンプレートを使用してポップアップをデザインすることができます。
Elementorを使ってポップアップを作る、 に移動する。 ページ >> ポップアップレイアウトを設定する 設定からテキスト、画像、ボタンなどの要素を追加します。ポップアップテンプレートの準備ができたら、保存するだけです。次に、"モーダル"ウィジェットをElementorから取得し、ポップアップテンプレートをモーダルに添付して表示します。
それでは、Elementorを使ったポップの作り方を紹介しよう。
始めよう！
Elementorでポップを作る｜7つのステップ
ここでは
- ポップアップテンプレートを作る
- テンプレートを使ってポップアップを作る
注：ポップアップ・テンプレートをデザインする方法はたくさんありますが、最も手っ取り早い方法は、コール・トゥ・アクションのボタンを背景に画像を配置することです。この記事ではこの方法を紹介します。
ステップ1：ポップアップ・テンプレートの作成
まず最初に行う必要があるのは、ウェブページに表示するポップアップを作成することです。
これを行うには、WordPressのダッシュボードに移動し、ページエディタ内にテンプレートを作成する必要があります。
さて、この部分は通常Elementor Popup Builderを使用して多くのステップを必要とします。
しかし、私たちはこのようなポップアップをデザインするのに2、3分かかる別の方法をとります。
では、Elementorでおなじみの方法でページを開いてみよう。
新しいページを開き、Elementorページエディターウィンドウに移動します。
プラス（+）記号をクリックして空白のセクションを作成します。
ステップ2：ポップをデザインする
ボタンウィジェットを空白ページにドラッグして、テンプレートの作成を開始します。
ボタンウィジェットはElementorから選択するか、または Elementorアドオンライブラリ -Element Pack.
ポップアップには、コールトゥアクションを開始するためのボタンが必要です。
ステップ3：ポップアップウィンドウの設定
Elementorで作成するポップアップの寸法を決定する必要があります。
をクリックしてください。 セクション設定 アイコンから レイアウトタブそして、コンテンツの幅を 900.
コンテンツの幅も狭いか広いかを選択できる。
ポップアップで配信する情報量に従うだけだ。
次に カラム設定 アイコンから 詳細タブを設定する。 パディング の 150 四方八方に。
こうすることで、背景画像を完璧に表示するための限られたエリアを作ることができる。
ステップ4: Elementorを使用してポップアップテンプレートをスタイル設定する
をクリックしてポップアップに背景画像を追加します。 カラム設定 のアイコンがある。
以下の中から画像を選んでください。 スタイル> 背景 そして、ポジションを センターセンター.
画像が大きすぎる場合は カスタム オプション サイズ で、それに応じて画像の幅を調整する。
注：お望みであれば、多くのセクションを使ってテキストと画像を並べて配置することもできます。何でも可能です。
Elementorを使ってポップアップを作るには、ある位置にボタンを追加する必要があります。
重要なコール・トゥ・アクションのプロンプトとして、ポップアップに十分な白い領域を持つボタンを配置します。
をクリックしてください。 ボタン ウィジェットで 詳細タブそして ポジショニング.
を変更する。 ポジション デフォルトから アブソリュート オフセット値を使って調整する。
色などを使ってボタンのスタイルを変更し、より人目を引くようにすることができる。
完璧だ！
Elementorを使って素晴らしいポップアップを作りましたね。
ステップ5：テンプレートの最終決定
ポップアップ・テンプレートが完成したら、Elementorに保存しましょう。
をクリックしてください。 セクション設定 アイコンをクリックします。 テンプレートとして保存.
次に 名称 フィールド そして セーブ ボタンをクリックする。
テンプレートに名前を付け、保存ボタンを押す。
これで、Elementorはデザインをテンプレート・ライブラリにインポートした。
ステップ6：Elementorをポップアップさせる
モーダル付きのポップアップテンプレートを使えば、ウェブページ内に表示されるポップアップを完成させることができます。
ポップアップを表示したいページに行く必要があります。
モーダルウィジェットをドラッグ＆ドロップする (による Element Pack) ページ内
ModalはElementorポップアップビルダーツールで、4つの異なる設定でポップアップとして動作します。 デフォルト (ボタンでポップアップ）、 スプラッシュ・スクリーン (時間操作のポップアップ）、 終了ポップアップ (終了の意向）、そして カスタムリンク.
で行こう。 スプラッシュスクリーン 今回は
から選択する。 レイアウト オプションがある。
次にポップアップの時間を選択する。
ポップアップには10秒を使った。
ページにアクセスして10秒間滞在したユーザーには、このポップアップが表示されます。
ステップ 7: ポップアップテンプレートをモーダルに貼り付ける
これが最後のステップだ。
モーダルにテンプレートを貼り付けるだけで、Elementorを使ったあらゆるポップアップを作ることができます。
第2セクション モーダルElementorテンプレートをソースとして選択します。
オプションから テンプレートを選択今作成したテンプレートを見つけるまでスクロールし、それを選択する。
プレビューとして即座にポップアップが表示されます。
ここには ヘッダー & フッター テキスト・フィールドをテンプレートと並べる。
どちらもデフォルトで表示される。
好きなテキストを表示することもできるし、消すだけで消すこともできる。
もうひとつ、ポップアップの閉じるボタンはそのままにしておくこともできるし、削除することもできる。
それは完全に君の選択だ。
結論
ポップアップを作るのはとても簡単だ！
最小限の努力で、ポップアップを賢く使って大量のトラフィックを獲得することができる。
最良の結果を得るためには、このブログを参照してほしい： elementorで終了意図ポップアップを作成する方法
潜在顧客を購入者リストに取り込むための完璧なポップアップのデザイン方法を教えてくれる。
記事を楽しんでくれてありがとう。
