ポップアップ、フォーム、画像の回転を追加するためのElementor無料テンプレートガイド

Elementorの無料版を使ってウェブサイトを構築する際、多くの人がこう尋ねるだろう。ポップアップウィンドウ何が起こっているのか?何かフォーム機能?回転チャートどこで設定する?無料版の機能には制限があり、いくつかの無料プラグインと便利なヒントがあれば、ほとんどの基本的なインタラクションデザインを実現することは可能です。

まず、ポップアップウィンドウ(Popup)を追加する - ポップアップウィンドウの機能を実現するための無料のプラグインの使用

Elementor 無料版ポップアップ機能はそれ自体では提供されていないが、無料のプラグインを使えば可能だ。

推奨プラグイン
ポップアップメーカー(強力で互換性がある)

操作手順:

  • Popup Maker "プラグインをインストールし、有効にする。
画像[1] - Elementor無料テンプレートガイド ポップアップ、フォーム、回転画像の追加方法
  • 背景の左側にある "ポップアップメーカー > ポップアップを追加 "をクリックして、新しいポップアップウィンドウを作成します。
  • ポップアップコンテンツの編集:テキスト、画像、ショートコードなど、表示したいコンテンツをコンテンツエリアに直接追加できます。
画像[2] - Elementorポップアップ、フォーム、回転画像を追加するための無料テンプレートガイド
  • Elementorでコンテンツをデザインする必要がある場合は、あらかじめElementorでテンプレートまたはページを作成し、そのショートコードをポップアップウィンドウに貼り付けることができます。
  • ポップアップウィンドウのトリガー条件を設定する(例:ボタンをクリックする、ページ読み込み後に表示するなど)
画像[3] - Elementorポップアップ、フォーム、回転画像を追加するための無料テンプレートガイド
  • ポップアップの保存と公開

ポップアップをボタンにバインドする:

1.ボタンCSSクラス名を追加します(Elementorで操作します):

  • 編集ボタン要素
  • 左パネルの "Advanced "タブをクリックする。
  • CSS Classフィールドにクラス名を記入する:ショーポップアップ

(注:フルストップではない) .直接書く ショーポップアップ (できる)。

画像[4] - ポップアップ、フォーム、回転画像を追加するためのElementor無料テンプレートガイド

2.ポップアップメーカーのポップアップウィンドウでトリガー条件を設定します:

  • ポップアップの編集
  • 下の「ポップアップ設定 > トリガー」設定までスクロールしてください。
  • 新しいトリガーを追加」をクリック → 選択 開く」をクリック
画像[5] - ポップアップ、フォーム、回転画像を追加するためのElementor無料テンプレートガイド
  • 以降の設定で「ターゲットセレクター」を有効にする
  • 輸入 .show-popup(今回は、CSSクラスセレクタを示すためにフルストップで)
画像[6] - Elementor無料テンプレートガイド:ポップアップ、フォームの追加と画像の回転

ユーザーが ショーポップアップ ボタンをクリックすると、このポップアップが表示されます。このようにして Elementor 無料版 + ポップアップメーカー のポップアップクリック連動効果

次に、フォームを追加します。

Elementor Proにはフォームモジュールが組み込まれていませんが、以下の無料プラグインからフォームモジュールを選択できます。フォーム機能::

推奨プラグイン
WPForms ライト(初心者向け)
Contact Form 7 (クラシック、安定した機能)

には WPForms Lite 一例として

業務プロセス:

  • WPForms Liteをインストールして有効にする
  • バックグラウンドで "WPForms > Add New "をクリックし、テンプレートを選択します(例:"Simple Contact Form")。
画像[7] - Elementor無料テンプレートガイド ポップアップ、フォームの追加と画像の回転
  • フィールドをドラッグ&ドロップしてフォーム構造を調整(名前、Eメール、メッセージなど)
画像[8] - ポップアップ、フォーム、回転画像を追加するためのElementor無料テンプレートガイド
  • フォームを保存し、ショートコードをコピーする
画像[9] - ポップアップ、フォーム、回転画像を追加するためのElementor無料テンプレートガイド
  • Elementorのページに戻り、フォームを表示するための "ショートコード "ウィジェットを貼り付けます。
画像[10] - Elementor無料テンプレートガイド:ポップアップ、フォームの追加と画像の回転
画像[11] - Elementor無料テンプレートガイド ポップアップ、フォームの追加と画像の回転

この方法で、あらゆるページやポップアップウィンドウにフォームを埋め込むことができ、ユーザーがコメントを残したり、情報を送信したりといったインタラクションをサポートすることができます。

第三に、回転マップ(スライダー)を追加します。

Elementorの無料版には高度なスライドショーはありませんが、基本的な回転チャートこの機能は自己完結している。

使い方:

  • Elementorページエディタを開く
  • 引きずり込む 「画像の回転 ガジェット(イメージカルーセル)
画像[12] - Elementor無料テンプレートガイド:ポップアップ、フォームの追加と画像の回転
  • 複数の画像をアップロードする(均一サイズを推奨)
  • セットアップスライドスイッチング効果、スライド速度、自動再生などのパラメータ。
画像[13] - Elementor無料テンプレートガイド:ポップアップ、フォームの追加と画像の回転
  • ナビゲーション・アロー、ページング・ドットを表示するかどうかのオプション
画像[14] - Elementor無料テンプレートガイド:ポップアップ、フォームの追加と画像の回転

このコンポーネントは、特にホームページに適しています。 バナーこのウェブサイトの内容には、「提携ブランドが表示され、顧客のケースが回転する。

テキストアニメーションやグラフィックの組み合わせなど、より高度なスライドショーを実現したい場合に使用できる:

  • スマートスライダー3(無料版)
  • メタスライダー(軽くて実用的)

そして、ショートコードを介してElementorページに埋め込まれます。

IV.推奨事項とその他のヒント

  • ポップアップとフォームの組み合わせは、「今すぐ問い合わせる」や「オファーを受ける」などのマーケティングコンバージョンモジュールに最適です。
  • フォームが送信された後、ユーザーの信頼感を高めるため、サンキューページにジャンプすることをお勧めします。
  • 回転画像は、あまりにも多くの画像であってはならない、それは読み込み速度を遅くしないために、5以内に制御することをお勧めします。
  • すべてのプラグインは、提供元不明のバージョンの使用を避けるため、WordPressプラグインマーケットプレイスからインストールすることを推奨します。

はんけつをくだす

エレメンタ 無料版の機能では、ポップアップ、フォーム、回転画像などを簡単に追加でき、インタラクティブな活気とプロフェッショナルな雰囲気をサイトに加えることができます。無料テンプレートから始めるなら、手を動かしてこれらの方法を試してみよう。これらの方法を習得すれば、予算を節約できるだけでなく、自分のウェブサイトを構築するためのスキルも身につけることができます。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はリトル・リンが執筆した。
終わり
好きなら応援してください。
クドス676 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし