連絡先プロファイル: ユーザにプロファイルの管理を許可する

[サイズと間隔]設定は、接触プロファイル要素のサイズと位置を制御するのに役立ちます。内訳は次のとおりです。

• 幅: パーセンテージ (%) またはピクセル (px) 値を使用して要素の幅を調整します。

• 上: 要素の上のスペースをパーセンテージ (%) またはピクセル (px) で設定します。

• 下: 要素の下のスペースをパーセンテージ (%) またはピクセル (px) で設定します。

• 整列: 要素をコンテナの左、中央、または右に揃えます。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのプロパティを個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (   px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

[ ゲスト] 状態と [ログ] 状態を使用すると、ユーザーのログイン ステータスに基づいて [連絡先プロファイル] 要素の表示方法をカスタマイズできます。

• ゲストの状態: ログインしていないユーザーの [サインイン] テキストと外観をカスタマイズします。

• ログイン状態: ログインしたユーザーのプロフィールアイコン、アバター、ドロップダウンオプション、その他の設定を構成します。

詳細なカスタマイズ手順については、以下の「ゲスト状態設定」および「ログ状態設定」セクションを参照してください。

プロファイルモーダルコンポーネントには、その外観とレイアウトを制御できるさまざまな設定が用意されています。これらの設定により、ページのブランディングやユーザー インターフェイスに合わせたモーダル デザインを作成できます。利用可能な設定とその影響の概要は次のとおりです。

一般的なレイアウト

• 上余白: モーダルの上のスペースを調整して、ページ内に正確に配置します。

• 幅: モーダルの幅をピクセル単位で定義し、モーダルが占める画面スペースの量を決定します。

• アイコンサイズ: モーダル内のアイコンのサイズをカスタマイズして、コンテンツに比例していることを確認します。

• パディング (側面と垂直方向): コンテンツの周囲の内側の間隔を調整して、モーダル内の呼吸スペースを制御するのに役立ちます。

境

• モーダルの周囲の境界線を有効または無効にします。

• スタイル: 事前定義された境界線スタイルから選択するか、デザインに合わせてカスタマイズします。

• 境界線: モーダルのどの辺に境界線を表示するかを選択します (例: すべての側面、上部のみなど)。

• 色とストローク サイズ: ブランディングに合わせて境界線の色と太さをカスタマイズします。

バックグラウンド

• 画像 URL: モーダルに背景画像を追加して、視覚的に魅力的なデザインを実現します。

• 画像のスタイルとフィット感: 画像の表示方法(ストレッチ、繰り返し、配置など)を制御できます。

• 色: 背景色と前景色をスタンドアロンとして設定するか、イメージと組み合わせて設定します。

隅

• スタイル: 角の半径を調整して、正方形、丸みを帯びた、または完全な円形のエッジを作成します。

• すべてのコーナー: 均一なコーナーの丸みを適用するか、個別のエッジを有効にして各コーナーを個別に調整します。

影

• スタイル: 定義済みのシャドウ スタイルから選択して、モーダルに視覚的なレイヤーを追加します。

• シャドウスタイル: アウトセット (モーダルの外側のシャドウ)または インセット (モーダルの内側のシャドウ)のいずれかを選択して、目的の効果を作成します。

• X方向とY方向:シャドウの水平方向と垂直方向の位置を調整して、モーダルを基準にした配置を制御します。

• ぼかし: 影のぼかしの量を設定し、シャープまたはソフトな外観を作成します。

• 広がり: 影がどこまで伸びるかを制御し、ページ上での影の目立つ度に影響を与えます。

• 色: シャドウの色をカスタマイズして、ページ デザインに合わせて、またはモーダルの背景と対照します。

連絡先プロファイル要素の 連絡先名と電子メール コンポーネントは、ログイン時にユーザーの名前/電子メールを動的に表示されます。

タイポグラフィ

• フォントファミリと太さ: フォントスタイルを選択し、太さを調整します。

• フォントサイズと行の高さ: デスクトップビューとモバイルビューのフォントサイズと間隔を設定します。

• 文字間隔: デスクトップとモバイルの両方で文字間の間隔を制御します。

• 色: ブランディングに合わせてテキストの色をカスタマイズします。

• テキストの大文字と小文字と装飾: 大文字、小文字、または大文字のテキストを適用し、下線、斜体、取り消し線などの効果を追加します。

• 配置と不透明度: テキストを左、中央、または右に揃え、透明度を制御します。

テキストシャドウ

• テキストシャドウを有効にする: シャドウ効果のオンとオフを切り替えます。

• オフセット-Xおよびオフセット-Y:影の水平位置と垂直位置を調整します。

• ぼかし: 影のエッジのシャープさまたは柔らかさを定義します。

• 色: テキストを引き立てる影の色を選択します。

[Contact Profile (連絡先プロファイル)] 要素の [Navigation Links (ナビゲーションリンク)] コンポーネントを使用すると、ファネルまたは外部リンク内でシームレスにナビゲーションするためのメニュー項目を表示できます。デフォルトのメニュー項目が事前に構成されていますが、ニーズに合わせてさらにカスタマイズできます。

デフォルトのメニュー項目

ClickFunnels は、ナビゲーション リンク コンポーネントに 4 つのデフォルト メニュー項目を自動的に含めます。

1. マイアカウント:カスタマーセンターの顧客プロファイルへのリンク。

2. サインアウト: ユーザーのログアウトリンクを提供します。

3. ダッシュボード: Customer Center ダッシュボードにリダイレクトされます。

4. コミュニティ: ClickFunnels コミュニティへのリンク。

これらのメニューはそれぞれのセクションに事前にリンクされており、手動セットアップを必要とせずに機能が保証されます。ただし、これらのメニューをクリックして、名前とアイコンをカスタマイズできます。

カスタムメニュー項目の追加

追加のナビゲーションオプションを含めるには:

1. [ + メニュー] ボタンをクリックします。

2. 新しいメニュー項目のラベルを追加します (例: ヘルプ、FAQ、サポート)。

3. 内部ファネルページまたは外部URLにリンクします。

スペーシング

• リンク間のギャップ: メニュー項目間の間隔を調整して、レイアウトを改善します。

ホバー状態

ホバー状態機能を使用すると、ナビゲーション リンクを 2 つの異なる条件でどのように表示するかを定義できます。

• デフォルト状態: これは、メニュー項目が操作されていないときの外観を制御します。これは、ページ上のリンクの規則的で静的な外観を表します。

• ホバー状態: これは、ユーザーがメニュー項目の上にマウスを置いたときにメニュー項目がどのように表示され、インタラクティブな効果を作成するかを定義します。テキストの色、フォントの太さ、下線などの要素をカスタマイズして、リンクを強調して注意を引くことができます。

これらの状態のいずれかを選択すると、フォント サイズ、文字間隔、テキストの色、装飾などのタイポグラフィ設定を個別に調整して、状態ごとに独自のスタイルを作成できます。この柔軟性により、インタラクティブ性とユーザー エクスペリエンスを向上させながら、プロフェッショナルなデザインを維持できます。

タイポグラフィ

• フォントファミリと太さ: フォントスタイルを選択し、太さを調整します。

• フォントサイズと行の高さ: デスクトップビューとモバイルビューのフォントサイズと間隔を設定します。

• 文字間隔: デスクトップとモバイルの両方で文字間の間隔を制御します。

• 色: ブランディングに合わせてテキストの色をカスタマイズします。

• テキストの大文字と小文字と装飾: 大文字、小文字、または大文字のテキストを適用し、下線、斜体、取り消し線などの効果を追加します。

• 配置と不透明度: テキストを左、中央、または右に揃え、透明度を制御します。