Avadaポップアップリンクの使い方がわからない場合、1分でモーダルテキストHTMLリンク要素でポップアップトリガーを実装する方法を学ぶことができます！

使用中 アバダのテーマ ウェブサイトを構築する際、ポップアップはユーザー体験を向上させる重要な要素のひとつです。ウェブサイトを最大限に活用しようとすると、段落のあるテキストやイメージクリックするとウィンドウがポップアップする？この記事ではAvadaの モーダルテキスト／HTMLリンク要素クリック・トゥ・ポップアップ機能の迅速な実装！

モーダルテキスト/HTMLリンク要素とは何ですか？

モーダルテキスト／HTMLリンク要素 は軽量だが、Avadaテーマの非常に便利な要素である：テキストまたはHTML要素で、定義済みのモーダルポップアップウィンドウをトリガーします。つまり、ページ上のあらゆるコンテンツをクリック可能なポップアップ・ウィンドウにすることができる。フリップフロップ「よりスムーズで自然なユーザー体験をもたらす。

Avadaはモーダルポップをトリガーする3つの方法を提供します：

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

ボタンとメニュートリガーの違い

トリガメソッド	(自由度	一般的な用途
ボタン要素（Button）	真ん中	登録/ログイン、購入、送信などの機能的なボタン。
メニュー項目	俯す	トップナビゲーションバーのトリガー
モーダルテキスト / HTMLリンク	御前	任意のテキスト、画像、リンクなど。

モーダルテキスト/HTMLリンク要素は、以下の3つの方法のうちの1つです。最高の自由度唯一無二の存在。グラフや段落を挿入できる HTMLSVGアイコンであっても、クリックされた領域にこの要素が含まれるたびにポップアップがトリガーされます。

使用例

製品ショーケースクリック "もっと詳しく「テキストポップアップ商品詳細.
地図ナビゲーションクリック地図アイコン属ポップアップ・マップ.
フォームの埋め込みクリック "今すぐ登録「という言葉だ。ポップアップ登録フォーム.
個人情報保護方針をご覧ください。条件に同意するで条"文字通りの"。ポップアップする詳細な方針声明.

対応コンテンツフォーマット

モーダル・テキスト/HTMLリンク要素のハイライトのひとつは、プレーン・テキストだけでなく、以下の要素もサポートすることです。 HTML構造具体的には

ハイパーリンク <a>
イメージ <img>
アイコン またはSVG

任意のHTMLスタイル（例えば <strong>そして<span>ネスト <div> など)

そのため、全体のレイアウトを崩すことなく、さまざまなページデザインにシームレスにフィットし、繊細なデザインのウェブサイトに最適です。

ステップ・バイ・ステップ・ガイド

1.アバダ編集モードへのアクセス

この操作を行う前に、ページにモーダルポップアップ要素が作成されていることを確認してください。たとえば、次のようなモーダルポップアップ要素を設定したとします。 地図 のモーダルは、ショップの住所の地図を表示するために使用されます。モーダルの設定方法がわからない場合は、こちらの記事「モーダルの設定方法」をご覧ください。Avada テーマモーダルポップアップ要素の作成方法を

ログインワードプレス舞台裏

バックグラウンドで"ウェブページ"、デザインしたいページを選択する

クリック "ライブビルダー「アバダ編集モードに入る

2.モーダルテキスト/HTMLリンク要素の挿入

デザインしたいコンテンツをクリックし、「要素を追加」をクリックします。

要素のリストで、"モーダルテキスト／HTMLリンク」要素.

以下のように、コンテンツがモーダルテキスト／HTMLリンク要素左の赤枠がセットアップのプロパティです。

"モーダル名"という要素名が設定される。

"テキストまたはHTMLコード"HTMLコードは通常

"CSSクラス"と"CSS ID「が設定されているCSSスタイル分類と名称

独自のコードを入力してスタイルを設定します。例えば、このコードでは<img>画像リンクと<alt> 代替テキスト。書き方がわからない場合は、AIが生成してくれます。

3.プレビュー効果

押さえつける シフト＋ P ページプレビューへ

先ほど設定した画像をクリック

モーダルテキスト／HTMLリンク要素のポップアップウィンドウが表示されます。

概要

モーダルテキスト/HTMLリンク要素の使用は、柔軟で実用的な方法です。 アバダのテーマ でクリック可能なポップアップウィンドウを素早く実装できます。地図の表示でも登録フォームあなたのウェブサイトのインタラクティブな体験を強化するために、オファーや製品の詳細。あなたがアクションでアバダテーマについての詳細をお知りになりたい場合は、に注意してください光子ゆらぎネットワークWordPressのアドバイスや人気テーマのハウツーチュートリアルを毎日更新しています。

お問い合わせ

チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！

カスタマーサービス WeChat

① 電話：020-2206-9892

② QQ咨询：1025174874

三 Eメール：info@361sale.com

④ 勤務時間: 月～金、9:30～18:30、祝日休み

© 複製に関する声明
この記事はEarly Seasonが執筆しました。
この記事へのリンクhttps://www.361sale.com/ja/47469
この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。

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