Kajabi（カジャビ）で作成したサイトの上部にある一番目立つ部分であるHero（ヒーロー）セクションをカスタマイズする方法について解説いたします。
前回の記事はこちら
サイトを構成するセクションのひとつ「Hero」
今回は、Kajabi（カジャビ）作成したサイトのHero（ヒーロー）セクションをカスタマイズする方法を解説します。
サイトを構成するセクションのひとつである「Hero」ですが、サイトトップに表示される重要なセクションになります。
編集画面
「Hero」をクリックすると編集画面が表示され、「Text」を選択すると文章が編集できます。
まずは「Background」（背景）から編集します。
「Hero」の「SECTION SETTINGS」の「Background」の「Background Image」の「Select Image」で画像をアップロードできますが、ここでは2880×1200サイズが推奨されています。タブレットやスマホでも見やすいのでお勧めです。
私の場合の該当の画像を選択して、サイズを調整して「Hero」に戻ります。
ここでは細部の調整が必要ですが、この手順により画像が変更されました。
背景を動画に設定する場合
背景を動画に設定する場合、「Video Actions」から動画をアップロードします。
次に「Background Media Type」を「Video」に変更すると、背景を動画に設定することができます。
ちなみに「None」にすれば背景を単色に変更することも可能です。
各項目の設定をした後は必ず「Save」で設定を保存してください。
「Text」を編集
次に「Text」を編集します。
文字の大きさを調整して、メインキャッチとサブキャッチの大きさを分けます。
文字の表示範囲を変更したい場合、「Width」⇔「〇（数字）columns」の間で表示範囲を設定することができ、
「12 columns」に設定すると横幅いっぱいにテキストが表示されます。
その下に「Desktop Layout」と「Mobile Layout」がありますが、ここではサイトを表示する端末別にテキストや背景色を変更することができます。
「Call To Action」にある「Include CTA」では、チェックを入れるとボタンが表示されるようになり、その下の「Text」でボタンに表示する文字を編集することができます。
ボタン押下時のアクションなどを設定する場合
続けて「Button Action」ではボタン押下時のアクションを設定することができます。
「Go To a Landing Page」はランディングページへ、「Go To Checkout Page」では決済ページへ、「Download a file」ではファイルをダウンロードさせることができます。
他にもポップアップを表示させたり、ページ内の特定のセクションに移動させることもできます。
今回は「Go To URL」を選択して下の欄にはサイトのURLを入力します。
続けて「Open in New Tab」にチェックを入れることで、ボタンをクリックすればブラウザの新しいタブで内容が表示されるようにでき、他にもボタンの幅を選ぶこともできます。
「Button Width」を「Full」にすれば画面幅を一杯に使ってボタンが表示され「Auto」にすれば自動で設定してくれます。
「Button Background Color」ではボタンの色を変更することができ、同様に「Button Text Color」ではボタンの文字色を変更することができます。
背景を微調整する
ここまでの設定では背景の影響で文字が見にくいので、そちらを改善します。
「Hero」にある「SECTION SETTINGS」の中の「Background 」にある「Background Color」で背景の色を変更します。
ここでは文字に対して目立ちやすくするための色に変更しますが、色によってはせっかく設定した背景の動画が見にくくなるので注意して色を調節します。
これで背景が薄暗くなって文字が見やすくなりました。
各項目の設定をした後は必ず「Save」で設定を保存してください。
「Settings」について解説
ここで「Settings」について簡単に解説します。
「Favicon」ではトップに表示されるファビコンを設定することができます。
「Style Guide」ではページ全体の背景色を設定することができ、背景に画像を設定することもできます。
「Button Background Color」ではページにある全てのボタンの色を変更することができます。
「Hero」に表示される文字のフォントを変更したい場合、「Fonts」を選択します。
「Body Font」ではメインキャッチを、また「Heading Font Weight」ではサブキャッチのフォントを設定できます。
細かく設定するには
さらに細かく設定するには、ここで文字の色や大きさを変更することができます。
注意点として、モバイルなどで自身のサイトが表示された際のレイアウトを確認しておきましょう。
端末でのプレビュー方法
上部にあるボタンでそれぞれの端末でのプレビューを見ることができます。
このプレビューを参考にしながら各端末でのレイアウトを調整して下さい。
その際、スマホで表示される背景色を変更する場合は、「Mobile Layout」を選択して調整します。
各項目の設定をした後は必ず「Save」で設定を保存してください。
以上、Kajabi（カジャビ）作成したサイトのHero（ヒーロー）セクションをカスタマイズする方法を解説しました。
Kajabiの無料お試し期間を14日→30日に増やす方法（さらに超豪華特典もプレゼント！）
もしあなたがKajabiの導入を検討されたい場合は以下のブログ記事内のリンクからKajabiの無料お試しにお申し込みいただくと、Kaiabiを使い方をわかりやすく解説した100本以上の動画を収録した「Kajabiマスタークラス（定価9万9700円）」とKajabiの使い方をヒルトルに直接質問が出来る「海外ツールサポートコミュニティ」の参加権利を無料でプレゼントします。
詳細は以下の記事からご覧ください↓
Kajabiの導入をご検討されている方はぜひご活用くださいね！
