FREE GAZA ! FREE PALESTINE ! STOP GENOCIDE ! Elementorはイスラエルの企業 Elementorはもう使わない
エディターならDivi!Divi最高!

Dynamic Content for Elementorのポップアップモーダルの機能を調査!

Dynamic Content for Elementorデザイン関連が充実 ウィジェットの種類も多数 ポップアップモーダルの実力は!

Dynamic Content for Elementor

Dynamic Content for Elementorは、JavaScriptバリバリのリッチサイトが作成できる!個人的には大好きなのだが、全面的に利用したサイトは、まあ個人サイトでは能力あり過ぎ…特定の機能をぜひにという場合は利用したいが…。でポップアップモーダルについては2種類のウィジェットが用意されている。

それでは、Dynamic Content for Elementor Proの「Modals」と「Fire Modal Window」の紹介です!

その1 Modals(普通のポップアップモーダル)

Modalはポップアップモーダルを表示するための機能。ベーシックなもので他のアドオンと同じように利用できる。

Content


  • 編集ページにポップアップモーダルを表示するかどうか。表示条件を満たしても編集ページでは表示がされない。編集ページでプレビューしたい場合はこのトグルを操作する。

  • テキストエディターが表示されるので内容を入力するタイプと「テンプレート>テンプレートを保存」にある「セクション」「固定ページを」を利用するタイプがある。

Settings > Trigger

  • On Page Load
    ページ表示後、設定時間後にポップアップモーダルを表示する。
  • On Click Button
    ボタンをクリックするとポップアップモーダルを表示する。
  • On Scroll Page
    ページをスクロールしたら表示。ピクセル単位で数値を設定する。
  • On Widget position
    ウィジェットの位置にページがスクロールすると表示されるらしいが…成功したことはない。設定がわからない!

※ここではポップアップモーダルのオンロードをWebサイト全体で適用するかのオプションも用意されている。

Animation

ポップアップモーダルを表示するアニメーション、閉じるときのアニメーションの設定ができる。

Overlay

ポップアップモーダルの外側、背景の設定。背景をクリックしたら閉じるかどうか。また

その2 Fire Modal Window(個性的なアニメーション効果素晴らしい!)

Fire Modal Windowは完成されすぎており編集できる部分は少ない。モーダルに表示するセクション、固定ページを読み込んだら終わり。あまりいじる必要はない。

Fire Modal Window > Text Button

Fire Modal Window > Icon

ボタンにアイコンを表示することができる。その設定をする箇所。

Fire Modal Window > Select Template

「テンプレート>テンプレートを保存」にある「セクション」「固定ページ」を設定する。

動作はこんな感じ。クリックして表示のみで利用可能。背景色の変更ができるので、サイトのテイストに合わせて利用できそうではある。

関連の投稿

カテゴリー

タグ

FREE GAZA ! FREE PALESTINE ! STOP GENOCIDE ! Elementorはイスラエルの企業 Elementorはもう使わない
エディターならDivi!Divi最高!

お問い合わせ

当サイトの内容などで疑問・質問があればご利用ください。