Kadence チュートリアル: モーダルポップアップブロック ユーザーガイド

ケイデンス?ブロック?プロ このプラグインは モーダル クリックトリガーのポップアップコンテンツエリアをページに追加するために使用できるポップアップブロックです。通知を表示したり、クイックフィルけいしきユーザーを特定のコンテンツに誘導(dǎo)するにしても、このモジュールは非常に有用です。

この記事では、モーダルブロックの基本的な設(shè)定、ポップアップリンク、コンテンツ編集、スタイルカスタマイズ、カスタムトリガー方法などの操作手順を紹介します。

畫像 [1]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

モーダルブロックを追加する

エディターを開き、ブロックの追加をクリックし、ブロックのリストから モーダルをクリックし、ページに挿入します。挿入後、リンクテキストとポップアップコンテンツエリアが自動(dòng)的に表示されます。

畫像 [2]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

リンクテキストの設(shè)定

ブロックを選択し、ポップアップのトリガーとなるリンクのテキストを右側(cè)の設(shè)定フィールドに入力します。ポップアップウィンドウ".このテキストは、ユーザーがクリックするための入り口としてページに表示されます。

畫像 [3]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

ポップアップの內(nèi)容を編集する

テキスト、畫像、ボタン、フォームなど、どのようなブロックでもポップアップ?ウィンドウ內(nèi)に挿入でき、フレキシブルに対応します。オープニング.通常のコンテンツブロックの編集と同様に、スタイル、タイポグラフィ、構(gòu)造を調(diào)整します。

畫像 [4]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

カスタム?リンク?スタイル

トリガーリンクのフォント、色、ボーダー、背景などのアピアランスパラメーターを調(diào)整し、ページ全體のスタイルと一致させることができます。

畫像 [5]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

背景マスクの設(shè)定

ポップアップ?ウィンドウが開くと、ページに半透明の背景マスクが現(xiàn)れます。マスクの色と透明度を選択することで、ページを透明な背景に保ちながらポップアップの內(nèi)容を強(qiáng)調(diào)することができます。

畫像 [6]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

アニメーションとポジションの設(shè)定

設(shè)定バーでは、ポップアップ?ウィンドウの開閉アニメーション(フェードイン、スライド、ズームなど)を選択することができます。

畫像 [7]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

ポップアップ?ウィンドウのサイズ設(shè)定

ポップアップウィンドウの幅と高さは、さまざまなタイプのコンテンツ表示に合わせてオンデマンドで調(diào)整できます。これはパーセンテージまたはピクセル固有の値として設(shè)定できます。

畫像 [8]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

クローズボタンのスタイルを調(diào)整する

右上のクローズ?ボタンは、アイコンのサイズ、色、位置などのスタイル設(shè)定に対応しています。よくデザインされた閉じるボタンは、ページをシンプルで使いやすく保つのに役立ちます。

畫像 [9]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

ポップアップ?ウィンドウの外観を設(shè)定する

コンテンツの階層性を高めるために、ポップアップに背景色、ボーダー、角丸、シャドウを追加することができます。適切なデザインは、ポップアップコンテンツをより目立たせ、ページを協(xié)調(diào)させることができます。

畫像 [10]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド
畫像 [11]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

スタイルを調(diào)整し、フロントエンドのビューに保存する。

畫像 [12]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド

カスタム?トリガー?リンクの使用

モーダル?ブロックは、組み込みリンクに加えて、ポップアップをトリガーするための手動(dòng)作成ボタンをサポートしており、特定の場(chǎng)所でレイアウト構(gòu)造をカスタマイズするのに適しています。

手順は以下の通り:

  • モーダル設(shè)定でデフォルトのリンクスイッチをオフにする
畫像 [13]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド
  • ポップアップのオープンIDを設(shè)定します。 カスタムID
  • ページ上の任意の場(chǎng)所に高度なボタンを挿入する
  • ボタンのリンクを #customid
  • ボタンにクラス名を追加する モーダルトリガー
畫像 [14]-Kadence Blocks Pro: モーダル?ポップアップ?ブロックの設(shè)定とカスタム?トリガー?メソッド


設(shè)定後、ボタンをクリックするとポップアップウィンドウが開き、コンテンツとページ構(gòu)造の最適化を自由に組み合わせることができます。

概要

モーダルポップアップブロックは ケイデンス?ブロック?プロ コンテンツを表示するための非常に便利なツールです。ポップアップ?ウィンドウは明快な構(gòu)造で、さまざまなタイポグラフィ柔軟なトリガーメカニズムで、様々なウェブサイトページのシナリオに適したウェイとスタイルの調(diào)整。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨詢:1025174874
Eメール:info@361sale.com
勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み
? 複製に関する聲明
この記事を書いた人:泥棒はネズミの勇気になる
終わり
好きなら応援してください。
クドス1213 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし