Avadaテーマのモーダルポップアップ効果を実現する方法



How Achieve Avada Modal Popup Effect



Avadaテーマのモーダルポップアップ効果は、ユーザーエクスペリエンスに良い影響を与えます。今日はどう? Avadaテーマのモーダルポップアップ効果を実装する

はじめに:モーダルはボタンまたはキャッチフレーズボックスと組み合わせて使用​​する必要があります。モーダルが車の場合、ボタンは車のキーであり、車には始動するためのキーが必要です。また、ポップアップウィンドウはポップアップとも呼ばれます。



1つ目は、ボタンをクリックしてポップアップ効果を実現することです。

1.モーダルとボタンを追加します



Buttonと要素のモーダルの2つの要素(ショートコード)をクリックすると、これら2つの要素を本体に追加できます。

7940255-e8df6d0b5acd7470.png

2.設定ボタン

ボタンのURLは空白のままにします



ボタンのテキストテキストを入力します

モーダルウィンドウアンカーお問い合わせなどの小文字の英語の単語を入力します。 文章やフレーズなどの連絡フォームにスペースを入れないでください


7940255-45ad6720efa91c56.png 7940255-db3900d68764fe51.png 7940255-637fedacf23f26d0.png

3.モーダルを設定します

モーダルの名前上のボタンでモーダルウィンドウアンカーに入力します まったく同じ 小文字

モーダルのサイズポップアップウィンドウのサイズを選択します

7940255-4635c5d47d8fae8a.png

モーダルのコンテンツは、フォーム、画像、ビデオなどのポップアップコンテンツで埋められます。対応するコンテンツをその中に入れて、保存するだけです。

7940255-39f96f5433b18be8.png

照会フォームのポップアップウィンドウの効果は次のとおりです。

7940255-37a045a7c559b9cc.gif

ビデオのポップアップ効果は次のとおりです。

7940255-4895ba10e841c576.gif

2つ目は、テキストまたは画像をクリックしてポップアップ効果を実現することです。

1.要素内のモーダルテキストリンクを選択し、ページに挿入します。

7940255-94ba0329b4a70f3c.png

2.モーダルの名前で問い合わせを入力します。 文章やフレーズなどのお問い合わせフォームには、スペースを入れないでください。

7940255-a104b107d5fd495b.png 7940255-3f972495e8939da0.png

3.モーダル要素を挿入し、モーダルの名前を入力して、ポップアップウィンドウの内容を入力します。更新を保存して、テキストまたは画像のポップアップ効果を実現します。

モーダルの名前上記と同じ小文字を入力します

モーダルのサイズポップアップウィンドウのサイズを選択します

7940255-34e6d154d652e715.png

モーダルのコンテンツは、フォーム、画像、ビデオなどのポップアップコンテンツで埋められます。対応するコンテンツをその中に入れて、保存するだけです。

7940255-028006a3cd239a56.png