テンプレートエディタを使用してポップアップ内の要素をカスタマイズする

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

柔軟なテンプレートエディターを使用すると、ポップアップ上の各要素を個別に選択して自由に変更できます。要素を自由に移動したり、背景色やボタンの色、画像のサイズ、スペーシング、配置など、ポップアップの外観をカスタマイズすることができます。例えば、CTAボタンのサイズや色を変更したり、チェックボックスの配置をポップアップ上の特定の場所に変更することで、訪問者がすぐにクリックすることを促すことができます。もはや開発者の助けを借りる必要はありません。ポップアップにモダンな外観と雰囲気を与えることができます。

この記事では、PageSenseのテンプレートエディタを使用して、ポップアップ内の要素をフォーマットやスタイルするさまざまな方法について学びます。

背景色

ポップアップを見たとき、訪問者が何をすべきか、どこをクリックすべきか迷うことはありません。テキストボックス、入力ボックス、テキストエリアなどのオブジェクトに背景色を適用することで、テキストを目立たせることができます。ウェブページ上で埋もれずに、テキストを引き立たせることができます。

要素に背景スタイルを適用するには：
1. ポップアップ上で、背景色を適用したい要素（テキストボックス、入力ボックス、テキストエリアなど）をクリックします。

2. 左側のペインのBACKGROUNDセクションで、以下のいずれかを選択します：

単色：要素に一様な単色を適用するには、カラーピッカーをクリックします。
グラデーションカラー：要素に2色以上の連続したブレンドカラーを適用するには、カラーピッカーをクリックします。1つの色が徐々にフェードアウトし、別の色に変化します。
画像：要素の背景に適用するために、コンピュータから画像を選択します。
注意：要素に適用された背景色や画像を削除したい場合は、透明を選択してください。

マージンスペース

スペースの量を増減させるマージン設定を使用して要素間のスペースを調整することができます。エディタでは、各側面の余白を設定します（右、上、下）、ボックスに含まれる要素の左側と右側。

要素の余白を調整するには：
1. マージンスペースを調整したい要素（テキストボックス、入力ボックス、テキストエリアなど）をクリックしますのためにポップアップ内のテキストです。

2. マージンスライダー（左側のパネルにあります）を使用して、上部、右部、下部、左部のマージンセクションで、ポップアップデザインに最適な要素の周囲全体または特定の側面に余白を追加します。また、希望の値（ピクセル単位）を手動で入力し、Enterキーを押します。

ボーダースタイル

テキストボックス、画像、ビデオに装飾的な枠線やストローク効果を追加します。または他のアイテムポップアップのさまざまなセクションを定義し、強調するために使用します。さらに、ボーダースタイルをカスタマイズすることもできます。、ボーダーの色、太さを含む、各要素のフォントサイズ、文字間隔、縦揃えスタイル、以下で説明します。

要素にボーダースタイルを適用するには：
1. ボーダースタイルを適用したい要素（テキストボックス、入力ボックス、テキストエリアなど）をクリックしてくださいまでポップアップに表示されます。

2. インそのボーダーとシャドウのセクション (左側のペイン)で、クリックしてください。ボーダースタイル要素に適用するボーダーラインの種類を選択するためのドロップダウンメニューです。点線、破線、二重線などが選択できます。
ボーダーのプロパティをカスタマイズすることができます。ボーダーの色、ボーダー厚み、とボーダーラジウスオプション、スクリーンショットに示されているように。

シャドウ効果

影効果を追加して、要素にスタイルを付ける、ポップアップの重要な部分を強調する-上に移動します。影の位置やぼかしの程度など、影のさまざまな側面を制御できます。、および要素からの距離。

要素に影効果を適用するには：
1. 影の効果を適用したい要素（テキストボックス、入力ボックス、テキストエリアなど）をクリックしてくださいまでポップアップ内のテキストです。

2. 2. Zoho Invoiceでは、顧客に販売する商品やサービスの請求書を新規に作成したり、発行済みの見積書を請求書に変換したりできます。下記の図は、Zoho Invoiceの請求書のライフサイクルを理解するのに役立ちます。ボーダーとシャドウセクション(左のペイン)から、要素に適用する影の色をカラーピッカーから選択してください、およびそのプロパティをカスタマイズします、位置やぼやけ具合など、スクリーンショットに示されているように。

パディング

パディングは、要素の境界とそのメインコンテンツの間のスペースを制御するために使用されます。パディングの値を調整しても、ポップアップ内の異なる要素間の距離には影響しません。

要素のパディングを調整するには：
ポップアップ上の要素をクリックしてください. 私以下の図は、Zoho Invoiceにおける請求書のライフサイクルを理解するのに役立ちます。パディングセクション（左ペイン）で、パディングのスライダーをドラッグします：トップ、正しい、下部、そして左、必要に応じて変更することができます。また、テキストボックスに望む値（ピクセル単位）を手動で入力することもできます。、そしてプレス入力。

表示設定

ポップアップ内で要素を配置する方法を決めてください、例えば左、右、または中央、および幅そして各要素の高さをブラウザウィンドウのサイズに合わせるために設定したい高さ。

要素の表示設定をカスタマイズするには：
ポップアップ上の要素（テキストボックス、入力ボックス、テキストエリアなど）をクリックしてください。私表示セクション（左ペイン）で、以下のいずれかを行います：

要素の位置を変更するには、左、右、中央、または均等割り付けのオプションを使用します。
スライダーを使用して、要素の幅と高さを変更します。スクリーンショットに示されているように。

ボタンの色

ポップアップのアクションボタンの色を左側のパレットで変更できます。CTAボタンに明るい色を適用すると、注意を引き、訪問者がすぐにクリックすることができます。、とウェブサイトでのコンバージョンを向上させます。

ボタンに色を適用するには:
ポップアップ上のボタンをクリックしてください. 私以下の図は、Zoho Invoiceにおける請求書のライフサイクルを理解するのに役立ちます。ボタンの色左ペインのセクションで、CTAに適用する色を選択してください。

ホバーアクション

ホバーエフェクトにより、ポップアップ上のボタンの背景色やテキスト色を変更することができます。いつでもユーザーホバーボタン上にマウスを移動すると、ポップアップの異なる要素のインタラクションがはっきりと見えるようになります。、そして彼らを奨励します重要なCTAを素早くクリックするために。

ボタンにホバーエフェクトを適用するには：
ポップアップ上のボタンをクリックしてください. 私Zoho Invoiceでは、顧客に販売する商品やサービスの請求書を新規に作成したり、発行済みの見積書を請求書に変換したりできます。下記の図は、Zoho Invoiceの請求書のライフサイクルを理解するのに役立ちます。ホバーアクション左ペインのセクションで、表示中に表示したい必要な背景色とテキスト色を選択してください。マウス-オーバーやクリック、スクリーンショットに示されているように。