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