スタイルボタンをカスタマイズする方法
公開日: 更新日:
ClickFunnels で ボタン をカスタマイズすることは、ボタンがブランドと確実に一致し、訪問者の注意を引くための重要なステップです。 スタイルを使用すると、ボタンを一度カスタマイズすると、すべてのファネルとページで再利用できるため、時間を節約し、一貫性を確保できます。適切にデザインされたボタンはユーザー エクスペリエンスを向上させ、訪問者がファネルをナビゲートして関与しやすくします。この記事では、ClickFunnels でスタイル ボタンをカスタマイズするプロセスを説明し、見栄えが良く、ページ全体で一貫したボタンを作成するのに役立ちます。
- アクティブなClickFunnelsアカウント
スタイルボタンへのアクセス
Section titled “スタイルボタンへのアクセス”-
ClickFunnelsダッシュボードの左下にある [ワークスペース設定 ]をクリックします。
-
左側のメニューを下にスクロールし、[ スタイル] タブをクリックします。
-
編集するスタイルを見つけて、その右側にある [デザインのカスタマイズ] アイコンをクリックします。
-
左側のメニューで、[ ボタン] をクリックして、スタイルのボタン設定にアクセスして編集します。
ボタン設定のカスタマイズ
Section titled “ボタン設定のカスタマイズ”-
3つのスタイルが利用可能です。カスタマイズするスタイルを選択します。ウィンドウの右側には、さまざまな状態のすべてのスタイルのプレビューが表示されます。このプレビューは、変更を加えるとリアルタイムで更新されます。
-
各ボタン スタイルには 3 つの 状態があります。カスタマイズするには、変更したい状態をクリックするだけです。
-
デフォルト: ボタンの通常の外観。
-
ホバー: ユーザーがボタンにカーソルを合わせたときの外観。
-
押されたとき: ボタンがクリックされたときの外観。
-
-
背景**、テキストの色**、サブテキストの色を変更するには、[色] ボックスをクリックしてカラー パレットを開き、次のいずれかの方法で色を選択します。
-
カスタム カラースライダー を動かし、カラーパレット上の手のアイコンをドラッグして、希望の色を選択します。 透明度スライダー を使用して、色の不透明度を調整します。
-
特定の色の HEX コードを入力し、HEX コードの横にあるボックスを使用して 不透明度の割合 を調整します。
-
または、[ テーマ] タブに切り替えて、テーマに一致する色を選択します。
-
-
次に、 プライマリ テキスト スタイルをカスタマイズします。変更できるすべてのオプションは次のとおりです。
-
ボタンフォント: ボタンテキストのフォントスタイルを選択します。
-
太さ: フォントの太さを調整します (太字、標準など)。
-
フォントサイズ:ボタンテキストのサイズを設定します。
-
フォントサイズモバイル: モバイルデバイス専用のボタンテキストのサイズを設定します。
-
文字間隔: 各文字間のスペースを調整します。
-
行の高さ: テキスト行の高さを設定して、行間の間隔を制御します。
-
テキストの大文字と小文字: テキストの大文字と小文字 (大文字、小文字、大文字など) を選択します。
-
装飾: 下線や取り消し線などのテキスト装飾を追加します。
-
-
[ プライマリテキストシャドウ] をオンに切り替えて、次のオプションをカスタマイズします。
-
オフセット-x: 影の水平位置を調整します。
-
オフセット-y: 影の垂直位置を調整します。
-
ぼかし: ぼかしレベルを設定して、影のエッジの柔らかさやシャープさを制御します。
-
色: カラー ボックスをクリックしてカラー パレットを開き、希望の影の色を選択します。
-
-
サブテキストのスタイルをカスタマイズします。変更できるオプションは次のとおりです。
-
上部の余白: サブテキストの上のスペースを調整します。
-
ボタンフォント: ボタンテキストのフォントスタイルを選択します。
-
太さ: フォントの太さを調整します (太字、標準など)。
-
フォントサイズ:ボタンテキストのサイズを設定します。
-
フォントサイズモバイル:ボタンのサイズを設定します
-
文字間隔: 各文字間のスペースを調整します。
-
行の高さ: テキスト行の高さを設定して、行間の間隔を制御します。
-
テキストの大文字と小文字: テキストの大文字と小文字 (大文字、小文字、大文字など) を選択します。
-
装飾: 下線や取り消し線などのテキスト装飾を追加します。
-
-
トグルをオンにして、 境界線 の設定を調整します。
-
罫線スタイル: 罫線のスタイル (実線、破線、点線など) を選択します。
-
色: カラーボックスをクリックしてカラーパレットを開き、希望の色を選択します。
-
ストローク サイズ: スライダーを使用するか、表示されたボックスにピクセル番号を入力して、ストローク サイズを調整します。
-
-
コー ナーを オンに切り替えて調整します。
-
すべての角: スライダーを使用するか、ピクセル値を入力して、すべての角の半径を設定します。
-
エッジの分離: 個別のエッジを有効または無効にして、各コーナーを個別にカスタマイズします。
-
-
シャ ドウト グルを有効にして、以下を変更します。
-
シャドウスタイル:シャドウスタイル(アウトセットなど)を選択します。
-
X方向:影の水平位置を調整します。
-
Y方向:影の垂直位置を調整します。
-
ぼかし: ぼかしレベルを設定して、影のエッジの柔らかさやシャープさを制御します。
-
スプレッド: 影が要素からどれだけ広がるかを調整します。
-
色: カラー ボックスをクリックしてカラー パレットを開き、希望の影の色を選択します。
-
-
(オプション) 追加のボタンの状態またはスタイルをカスタマイズする場合は、上記の手順を繰り返します。
-
[ 更新 ] をクリックして変更を保存します。