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

Element Pack Proのポップアップモーダルの機能を調査!

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

Element Pack Pro

Element Pack Proはデザイン関連が充実。ウィジェットの種類も多く利用しやすいアドオン。ポップアップモーダル…いわゆる「ポップアップモーダルっぽい機能」は3種類が用意されている。「Lightbox」というウィジェットについてはiframeが利用できる。

それでは、Element Pack Proの「ポップアップモーダルっぽい機能」紹介です!

その1 Modal(そのまんまストレート)

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

Layout

  • Default
    ボタンをクリックするとポップアップモーダルが表示させる。
  • Splash Screen
    ページ表示後にポップアップモーダルを表示するための機能。
  • Exit Popup
    タブの切り替え時、ページを閉じようとしたときに表示する。
  • Custom LinkButton
    表示させるリンクをクラスやIDにする場合に利用する。クラス名、ID名を入力。そのクラス名、ID名をオブジェクトに設定する。

Button

ポップアップモーダルを表示させるためのボタンリンクの設定。ボタンの大きさ、アイコンの設定ができる。

Modal

ポップアップモーダル内に表示する内容を設定する。

  • Header
    ポップアップモーダルのタイトル。空欄にするとタイトルエリアごと表示されない。
  • Footer
    フッターに表示する文字を入力する。空欄にするとフッターエリアごと表示されない。

Aadditional

ポップアップモーダル表示中にスクロールをさせるか、背景クリックでポップアップモーダルを閉じるか、配置の天地センターに設定する…などを設定。

その2 Dropbar(ツールチップみたいなの!)

Dropbar Content

Button

ポップアップモーダルを表示させるためのボタンリンクの設定。ボタンの大きさ、アイコンの設定ができる。

Dropbar Options

Dropbarを表示させる場所、クリックして表示するかホバーで表示するか、モーダルの幅、アニメーション処理の指定が可能。

その3 Lightbox(iframeが使えるよ!)

  • Poster
    メディアから画像を指定してポップアップモーダルを開くリンク設定できる。
  • Button
    ボタンをクリックするとポップアップモーダルが表示される。
  • IconImage
    アイコンを設定し、クリックするとポップアップモーダルが表示される。

Lightbox Content

  • Image
    モーダル内に表示する画像をメディアから指定する。
  • Video
  • Youtube
  • Vimeo
    ここで入力するのは動画のURL。Youtube、Vimeoなどは自動で判別されて表示がされる。
  • Google Map
    普通であればGoogleMapの表示に利用するのだが、WebページのURLを入力すると、iframeのポップアップモーダルとして機能する。
ツールの検索窓で「pop」と入力。Element Pack Proでは3つのウィジェットが表示される。※左上のEAEってのは別のアドオンのヤツです。

関連の投稿

カテゴリー

タグ

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

お問い合わせ

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