Avadaポップアップを使いこなす：モーダルエレメントでプロ級のポップアップを作成する

使用中 アバダのテーマ ウェブサイトを構築する際、ポップアップはユーザー体験を向上させる重要なツールであることは間違いありません。フォームや画像、地図を表示したり、プロモーション情報を宣伝したりするために使われるにせよモーダルポップアップ要素 これらはすべて、クリーンでエレガントな方法でコンテンツを表示します。本日は、Avadaのモーダルエレメントを深く掘り下げ、コンテンツを表示する新しい方法をボタンメニューや画像をクリックするとポップアップが表示されます。

Avadaのモーダル要素とは何ですか？

モーダル・エレメント で御座いますアバダビルダーコンテンツポップアップウィンドウコンポーネント。クリックされたときだけポップアップする隠し領域をページ上に設定できます。次のような用途に使用できます：

示すお問い合わせフォーム
詳細を表示
グラフィック・ポートフォリオのコンテンツを挿入する
ポップアップ広告、ヒント、地図など。

モーダル自体は非表示。を通じてのみである。次の3つ表示される前に、いずれかの方法が発動される：

プッシュボタンエレメント
メニュー項目
モーダルテキスト／HTMLリンク要素

操作チュートリアル

1.アバダ編集モードに入る

ワードプレスのバックエンドにログインする
バックグラウンドで"ウェブページ"、デザインしたいページを選択する
クリック "ライブビルダー「アバダ編集モードに入る

ステップ2：モーダル要素を追加する

デザインしたいものを選択し、"+"要素の追加オプション

ある要素リストモーダル要素を挿入します。

設定パネルを開き、以下のオプションを順番に設定する：

オプション名	構成
モーダル名	に設定します。 `エキスパート`ボタンはボタンアンカーと対をなす。
モーダル見出し	ポップアップ・ウィンドウのタイトル（例："お問い合わせ"
サイズ	オプションの小/大、通常は大を選択
背景色	ポップアップ・ウィンドウ全体の背景色。
ボーダーカラー	ポップアップウィンドウの上部と下部の仕切りの色
フッターを表示する	下部エリアを表示するかどうか、"閉じる "ボタンを追加できる
モーダルの内容	モーダルの中核となるコンテンツエリアで、テキスト、フォーム、画像、HTML、Avada要素の入れ子をサポートします。

ステップ3：モーダルコンテンツの編集

Avadaは、テキストや画像を直接追加できる完全なビジュアル・コンテンツ編集エリアを提供します。しかし、グラフィックスとテキストを横に並べたり、カラムを入れ子にするなど、より複雑なレイアウトを実装したい場合は、以下の方法を推奨します：まず、Avada Builderを使用して空白ページにコンテンツレイアウトを作成し、右クリックして対応する容器または列を作成し、それをモーダルのコンテンツエリアに貼り付けます。

空白ページにコンテナを追加する

コンテナタイプを選択

コンテナに要素を追加する

コンテンツの構成例：

左列::
- フォト・エレメント（プロモーション・グラフィック）
- ピクチャーエレメント（ロゴ）
- テキストブロック（短い説明）

右列::
- Avadaフォームエレメント（お問い合わせフォームなど）

ビルドしたら、ネストした列全体を右クリックする。 のコピーを取ります。

それからモーダル・エレメント・エディターに戻り、右クリックしてコンテンツ・エリアに貼り付ければ準備完了です。

概要

Avadaのモーダルポップアップエレメントは、Webサイトにインタラクティブ性と情報表示を追加するための優れた柔軟性を提供します。この記事の流れで、あなたはモーダルエレメントの追加からポップアッププロパティの設定、複雑なコンテンツ構造の挿入までの完全なプロセスをマスターしました。Avadaテーマナレッジの操作方法については、こちらの記事をご覧ください。アストラ・テーマ・ナニー・チュートリアルアバダテーマテンプレートのインポート、ページ設定、ヘッダーとフッターの設定が含まれています、ホームページ設定などの業務知識をフル活用。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み