¥4,900.00
Elementor にテンプレートをドラッグ&ドロップで作成する機能を追加するアドオン
Elementor Pro はドラッグ＆ドロップの機能を使ってテーマ全体のテンプレートを編集したり、メールフォームやポップアップをデザインできるアドオンです。
投稿や固定ページ、投稿一覧ページ（アーカイブ）や検索結果ページのテンプレートをドラッグ＆ドロップで作成できます。
WooCommerce の商品一覧ページや商品詳細ページのテンプレートをドラッグ＆ドロップで作成できます。
メールアドレスの登録フォームやキャンペーン情報を表示させるポップアップをドラッグ＆ドロップで作成することができます。
メールフォームを別のプラグインを使用せずにこのプラグインで作成することができます。
Elementor Pro は、Elementor の機能を拡張させるアドオンです。
ページ制作の基本的な使い方は Elementor とほぼ同じなので、Elementor の使い方ガイドをご参照ください。
Elementor Pro では、Elementor のドラッグ＆ドロップ機能を使用して、ページだけでなく、サイト全体をデザインするテーマを作成することができます。
テーマビルダーを使用すると、「投稿ページ」や「固定ページ」といった一般的なページから、「404エラーのページ」や「アーカイブページ」（投稿の一覧ページ）等のデザインを Elementor を使用してデザインすることができます。
※ WordPress のテーマをイチから作成できるという意味ではありません。
それでは、投稿ページのテンプレートを作成します。
WordPressのテーマを使用すると、テーマの中で用意されている投稿テンプレートが使用されます。
この「投稿テンプレート」というのは、複数の要素で構成されています：投稿タイトル、投稿コンテンツ、アイキャッチ画像、メタデータ、コメントなど。
Elementor Pro のテーマビルダー機能を使用すると、任意のテーマで、お好きなデザインの投稿ページのテンプレートを設定することができます。
下記では、アーカイブページ（投稿の一覧ページ）のテンプレートを作成します。
サイトのブログにアクセス際、公開された記事の一覧が表示されている場合、実際にはアーカイブページが表示されています。
アーカイブページにはフィルターに使用できる様々な要素があります：作成者、日付、カテゴリ、検索結果、最近の投稿、タグなど。
以上でアーカイブページ（投稿の一覧画面）の設定は完了です。
実際に設定された条件のアーカイブページで、設定したテンプレートで表示されているか、ご確認ください。
Elementor Pro を使用すると、お問い合わせフォームを設置する際、別途プラグインを用意する必要がありません。
Elementor の編集画面から、サイトに Elementor の問い合わせフォームを設定して、サイトの訪問者が簡単に連絡できるように設定できます。
それでは、お問い合わせフォームの設置方法を見ていきます。
以上で基本的なお問い合わせフォームの設置ができました。
それでは次は、フォーム送信後に別のページ（サンキューページなど）にリダイレクトさせるなど、フォーム送信後の処理の設定方法を確認していきます。
ここでは、サイト訪問者がフォームを送信した後に実行されるアクションを設定します。
（例：ポップアップを開くまたは閉じる、自動返信メールを送信する、MailChimp などのサードパーティのメール配信サービスに接続する、別ページへのリダイレクトなど）
Elementor のフォームウィジェットを設置しただけでは、「フォーム送信後のアクション」が「メール」が 1つしか設定されていないため、サイトの管理者宛にしかメールが送信されません。
そのため、フォーム送信後に何をしてほしいか設定する必要があります。
それでは今回は、フォームに入力された内容を自動返信メールで返信させるための設定方法を見ていきましょう。
以上で Elementor のフォームビルダーを使用した、自動返信メールの設定は完了しました。
メール以外にもフォーム送信後にページをリダイレクトさせたりなど、色々設定ができますので試してみてください。
Elementor Pro では、ポップアップを作成・表示させることができます。
ポップアップとは、指定された瞬間に、または特定のトリガーと条件の下で、現在閲覧中のページ上に重なって表示されるウィンドウです。
ポップアップは、ユーザーの注意を引き、次のアクションを起こすように促せます。
ポップアップを表示させるトリガーも複数設定でき、例えば、「ページの滞在時間がある一定時間経ったら表示」や「ページを離脱しようとしたら表示」といったことが可能になります。
それでは早速ポップアップの作成方法を見ていきましょう。
下記では、ボタンを手動でクリックした際にポップアップを表示させる方法を解説します。
以上でボタンを設置したときに表示させるポップアップの設定が完了しました。
ポップアップは、出すタイミングがよければ、サイト訪問者の注意を引くのに役立ちます。
次は、ボタンのクリック以外にどんな表示条件があるのか、見ていきましょう。
ポップアップを表示させる条件やトリガーの設定を細かく設定することができます。
条件により、ポップアップを表示するWebサイトのページを設定できます。
例えば、サイトのトップページでしか表示させないポップアップや、ブログのページでは、メルマガの購読を促すポップアップを表示させたりといったことが可能になります。
トリガーは、キャンペーンをポップアップさせるユーザーアクションです。
ポップアップを発生させるオプションごとに [はい] または [いいえ] を選択します。
それでは実際にポップアップの表示条件の設定画面を見ていきましょう。
以上で、ポップアップの表示条件やトリガーの設定が完了しました。
様々な設定項目があるので、色々試してみて反応が取れるポップアップの表示条件を見つけていくもの面白いですね。
Elementor Pro の WooCommerce ビルダーを使用すると、WooCommerce の商品一覧ページや詳細ページのページテンプレートのデザインをカスタマイズすることができます。
下記では、通常のWooCommerce 商品詳細ページを構成するパーツに対して、それぞれに対応する Elementor のウィジェットを紹介しています。
以上で Elementor Pro の WooCommerce ビルダーを使用して商品の詳細ページのテンプレートの設定方法が完了しました。