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

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

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

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

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

リンクテキストの設定

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

ポップアップの内容を編集する

テキスト、画像、ボタン、フォームなど、どのようなブロックでもポップアップ・ウィンドウ内に挿入でき、フレキシブルに対応します。オープニング.通常のコンテンツブロックの編集と同様に、スタイル、タイポグラフィ、構造を調整します。

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

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

背景マスクの設定

ポップアップ・ウィンドウが開くと、ページに半透明の背景マスクが現れます。マスクの色と透明度を選択することで、ページを透明な背景に保ちながらポップアップの内容を強調することができます。

アニメーションとポジションの設定

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

ポップアップ・ウィンドウのサイズ設定

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

クローズボタンのスタイルを調整する

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

ポップアップ・ウィンドウの外観を設定する

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

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

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

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

手順は以下の通り：

• モーダル設定でデフォルトのリンクスイッチをオフにする

• ポップアップのオープンIDを設定します。 カスタムID
• ページ上の任意の場所に高度なボタンを挿入する
• ボタンのリンクを #customid
• ボタンにクラス名を追加する モーダルトリガー

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

概要

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