ヒーローセクションは、イベント用ランディングページの最上部に表示されるエリアです。このガイドでは、ヒーローセクションをカスタマイズして、イベント訪問者に強い第一印象を与える方法を説明します。

スライドの管理

スライドを追加する

1. ドックからDesign > Website Designに移動します。
2. Edit Websiteをクリックします。Website Designer が開きます。
3. ヒーローセクションにカーソルを合わせ、関連付けられている設定アイコンをクリックします。Slider 設定パネルが表示されます。
4. スライドを追加をクリックします。
5. スライドが追加されました。必要に応じてカスタマイズします。
6. イベントが下書き状態の場合は、公開をクリックしてイベントを公開します。すでに公開済みの場合は、再公開します。

スライドの並べ替え

1. ドックからDesign > Website Designに移動します。
2. Edit Websiteをクリックします。Website Designer が開きます。
3. ヒーローセクションにカーソルを合わせ、関連付けられている設定アイコンをクリックします。Slider 設定パネルが表示されます。
4. スライド左側の並べ替えアイコンをクリックします。
5. ドラッグして、任意の順序に配置します。
6. イベントが下書き状態の場合は、公開をクリックしてイベントを公開します。すでに公開済みの場合は、再公開します。

スライドを編集する

1. ドックからDesign > Website Designに移動します。
2. Edit Websiteをクリックします。Website Designer が開きます。
3. ヒーローセクションにカーソルを合わせ、関連付けられている設定アイコンをクリックします。Slider 設定パネルが表示されます。
4. スライドに関連付けられている編集アイコンをクリックします。Slide 設定パネルが表示されます。
   
5. 必要に応じてスライダーをカスタマイズします。

セクションの背景

1. Section Backgroundをクリックします。
   
2. Color、画像、またはVideoを選択します。
   
3. モバイルページを編集するには、モバイルタブに移動します。モバイル用の背景を個別に編集するには、モバイルインターフェイスの Webサイト背景設定を無効にする必要があります。
   
   
   
4. Color、画像、Videoのいずれかを選択します。
   
1. Color オプション:
   
1. Background Colorを選択し、Background Opacityを調整します。色は単色またはグラデーションを選択できます。
   
2. 画像 オプション:
   
1. 画像のOpacityを調整し、画像のOverlayを切り替えます。
   
2. 画像 Fit 設定として Cover、Full 画像、またはTileを選択します。
   
3. 画像のPositionsツールを使用して、画像の配置を設定します。
   
4. 画像のOverlayを有効にした場合は、Overlay Color とOverlay Capacityを選択します。
   
5. 画像を変更するには、[変更] をクリックし、ライブラリから選択するか、新しい画像をアップロードします。
   
6. 必要に応じて、画像をクリップ、トリミング、反転、回転します。
   
7. [削除] をクリックして画像を削除します。
   
3. Videoオプション:
   
1. YouTube 動画のサムネイル URL を入力します。
   
2. Video Overlayを有効にした場合は、Overlay Color と Overlay Capacityを選択します。
   
3. 必要に応じて Loop Videoを有効にします。
   
5. 初期設定に戻したい場合は、リセットする to 初期設定をクリックします。
   
6. イベントが下書きステータスの場合は公開、イベントが有効または開催中の場合は再公開をクリックします。

スライドセクション

1. Section Layout:Media Left、Media Right、Media Top、Media Bottomから選択します。
2. Horizontal Alignment:左揃え、右揃え、両端揃えから選択します。
3. Vertical Alignment:必要に応じて調整します。
4. Media Size:Tiny、Small、中、Large、Extra Largeから選択します。

要素の追加／削除

1. ドックからDesign > Website Designに移動します。
2. Edit Websiteをクリックします。Website Designer が開きます。
3. ヒーローセクションにカーソルを合わせ、関連付けられている設定アイコンをクリックします。Slider 設定パネルが表示されます。
   
4. スライドに関連付けられている編集アイコンをクリックします。Slide 設定パネルが表示されます。
   
5. カスタマイズするタブ内の要素セクションに移動します。
   
6. 利用可能な設定は次のとおりです。
   
1. Event 名前
   
2. Event 短 説明
   
3. ラベル
   
4. Button グループ
   
5. Event Countdown
   
6. Social Handles
   
7. Secondary Media
   
8. Primary Media
   
9. 日付/Time
   
10. Venue
    

要素の並べ替え

1. Slide 設定パネルで、管理 商品タブに移動します。
   
2. 要素をドラッグ＆ドロップして、縦方向の順序を変更します。
   

スライダーコントロールのカスタマイズ

1. ドックからDesign > Website Designに移動します。
2. Edit Websiteをクリックします。Website Designer が開きます。
3. ヒーローセクションにカーソルを合わせ、関連付けられている設定アイコンをクリックします。Slider 設定パネルが表示されます。
   
4. カスタマイズするタブに移動します。

矢印の設定

• 必要に応じてArrowsを有効にします。
• 矢印のDesignを選択します:
  
  • Stroke only with circle cover
  • Filled
  • シンプル 折れ線グラフ arrow with only stroke
  • シンプル 折れ線グラフ arrow with a 箱 filled
• Arrow ColorとBackground Colorを選択します（必要に応じて不透明度を調整）。

ナビゲーターの設定

• 必要に応じてSlide Navigatorを有効にします。
• DesignとしてDotsまたはDashesを選択します。
• ドットのAlignmentを選択します。
• Navigator Colorを選択します（必要に応じて不透明度を調整）。

スライドの動作

• 必要に応じてAuto Slideを有効にし、秒数で遅延時間を設定します。
• 必要に応じて一時停止する slide オン hoverを有効にします。
• スライド間のTransitionとしてFadeまたはSlideを選択します。
• 必要に応じてEqual height for すべて slidesを有効にします。
• 必要に応じてFit slider to screenを有効にします。

スライドを削除する

1. ドックからDesign > Website Designに移動します。
2. Edit Websiteをクリックします。Website Designer が開きます。
3. ヒーローセクションにカーソルを合わせ、関連付けられている設定アイコンをクリックします。Slider 設定パネルが表示されます。
4. スライドに関連付けられているメニューを開き、削除をクリックします。
5. ダイアログボックスで削除を確定します。

要素のカスタマイズ

Event 名前

1. Dock から[Design] > [ウェブサイトデザイン]に移動します。
2. [ウェブサイトを編集]をクリックします。ウェブサイトデザイナーが開きます。
3. ヒーローセクションにカーソルを合わせ、イベント名に関連付けられている[設定]アイコンをクリックします。
4. 次のいずれかを選択します:
   
   • テキストを更新して、ウェブサイトやその他のプロモーション全体で「イベント名」項目と同期する
   • イベント名を編集して書式設定: テキストを更新し、ウェブサイト上の書式スタイルのみをカスタマイズする
5. テキストを編集するには:
   編集したいテキストを選択し、次の書式設定オプションを使用します。
   
   
   
   
1. Bold: テキストを太字にします。
   
2. Italic: テキストに斜体スタイルを適用します。
   
3. Underline: テキストに下線を引きます。
   
4. Strikethrough: テキストに取り消し線を追加します。
   
5. Alignment: 選択したテキストの配置を変更します（例: 左揃え、中央揃え、右揃え）。
   
6. Ordered List: 番号付きリストを作成します。
   
7. Bullet List: 箇条書きリストを作成します。
   
8. Text Color: テキストの色と透明度を変更します。
   
9. Text Background: テキスト自体に背景色を追加します（ブロック全体ではありません）。
   
10. Line Height: テキスト行間のスペースを調整します。
    
11. Letter Spacing: 文字間隔を調整します。
    
12. Text Transform: テキストの大文字・小文字を変更します（例: すべて大文字、すべて小文字）。
    
13. リンク: テキストにハイパーリンクを追加します。
    
14. Horizontal Ruler: テキストセクションの間に水平線を挿入します。
    
15. Clean: テキストブロックのプロパティに影響を与えずに、すべてのテキストの書式設定をクリアします。

場所/日付/時間

1. Dock から[Design] > [ウェブサイトデザイン]に移動します。
2. [ウェブサイトを編集]をクリックします。ウェブサイトデザイナーが開きます。
3. ヒーローセクションにカーソルを合わせ、場所/日付/時間に関連付けられている[設定]アイコンをクリックします。
4. [日付、時間、会場]パネルで、イベントの場所を表示するために[会場]トグルを有効にします。
   
5. イベントの日付と時間を表示するには、[日付]トグルと[時間]トグルを有効にします。
6. [ウィジェットサイズ]で小、中、大、特大から選択します。
7. 書式タイプを更新するには:
   • [変更]をクリックして、カスタム書式パネルを開きます。
   • [会場]の[書式]で、書式を入力します。
   • タグの使い方が必要な場合は、[タグ]をクリックします。
   • ドロップダウンから値をクリックして、会場の書式エディターに適用します。
   • 設定を誤って変更した場合は、[初期設定にリセット]をクリックします。
8. 必要に応じてアイコンを有効にします:
   
   • [アイコンデザイン]をクリックして、[アイコンデザイン]パネルを開きます。
     
     
     
     
   • [カレンダーアイコンを変更]、[時間アイコンを変更]、[会場アイコンを変更]のいずれかをクリックします。
   • アイコンライブラリをクリックして Zoho Backstage ライブラリからアイコンを選択するか、自分のアイコンをアップロードします。
     
     
     
     
   • 設定を誤って変更した場合は、[初期設定にリセット]をクリックします。
9. 必要に応じて場所の[テキストカラー]を変更します（不透明度も調整できます）。

ボタン

設定

1. Dock から[Design] > [ウェブサイト]に移動します。
2. [ウェブサイトを編集]をクリックします。
3. ヒーローセクションにカーソルを合わせ、ボタングループに関連付けられている設定アイコンをクリックします。[ボタングループ設定]パネルが表示されます。
4. 編集したいボタンの横にある[編集]アイコンをクリックします。
   
5. 新しいボタンを追加するには、[新しいボタンを追加]をクリックします。
   
6. ボタンを設定するには、そのボタンに関連付けられている[編集]アイコンをクリックします。[ボタン設定]パネルが表示されます。
   
7. [設定]タブに移動します。
8. ドロップダウンからボタンタイプを選択します:
   
   • 今すぐ登録する:参加者を登録ページに誘導します。
     
     • ボタンのテキストを設定します。
     • 代替登録リンクを設定します（任意）。
   • お問い合わせ:訪問者が簡単に連絡できるようにします。
     
     • ボタンのテキストを設定します。
   • カレンダーに追加:イベントの日付を個人のカレンダーに保存できるようにします。
     
     • ボタンのテキストを設定します。
   • アジェンダを印刷:訪問者がイベントスケジュールをダウンロード/印刷できるようにします。
     
     • ボタンのテキストを設定します。
   • 経路を取得:インタラクティブマップ付きでイベントの場所を案内します。
     
     • ボタンのテキストを設定します。
   • カスタム:複数のリンク設定が可能です。
     
     • [ページ]の場合: ドロップダウンから選択します。
     • [外部 URL]の場合: URL を入力し、新しいタブで開くかどうかを選択します。
     • [スピーカー]の場合: 設定済みスピーカーの中から選択します。
     • [セッション]の場合: 予定されているセッションの中から選択します。
     • [スポンサー]の場合: 確定済みスポンサーの中から選択します。
     • [イベント一覧]の場合: イベント関連情報を表示します。
     • [チケット]の場合: 購入者向けのチケットクラスを選択します。
   • スポンサーになる:スポンサーシップや協賛を募集します。
     
     • [ボタンのテキスト]を設定します。
   • カスタムフォームにリンク:問い合わせやフィードバック用です。
     
     • [カスタムフォーム]を選択します。
     • [ボタンのテキスト]を設定します。
   • 出展者になる:製品やサービスを出展する方向けです。
     
     • [ボタンのテキスト]を設定します。
       
   • アブストラクトを送信:ユーザーがイベント向けのアブストラクトを送信できるようにします。
     
     • [ボタンのテキスト]を設定します。
   • サインイン:ユーザーがログインできるようにします。
     
     • [ボタンのテキスト]を設定します。
9. [保存]をクリックします。
10. イベントが下書き状態の場合は、[公開]をクリックしてイベントを公開します。すでに公開済みの場合は、[再公開]します。

デザイン

1. Dock から[Design] > [ウェブサイト]に移動します。
2. [ウェブサイトを編集]をクリックします。
3. ヒーローセクションにカーソルを合わせ、ボタングループに関連付けられている[設定]アイコンをクリックします。[ボタングループ設定]パネルが表示されます。
4. 編集したいボタンの横にある[編集]アイコンをクリックします。[ボタン設定]パネルが表示されます。
   
5. [デザイン]タブに移動します。
6. ボタンをカスタマイズします:
   
   • ボタンサイズ: 極小、小、中から選択します。
   • ボタンスタイル: 塗りつぶし、ゴースト、リンクから選択します。
   • ボタンカラー:
     
     • 塗りつぶしスタイル:[テキストカラー]と[背景色]をカスタマイズします。
       • [枠線]オプションを有効にして、太さと色を調整します。
     • ゴーストスタイル:[テキストカラー]をカスタマイズします。
       • [枠線]オプションを有効にして、太さと色を調整します。
     • リンクスタイル:[テキストカラー]のみをカスタマイズします。
7. 必要に応じて[初期設定にリセット]をクリックします。
8. イベントが下書き状態の場合は、[公開]をクリックしてイベントを公開します。すでに公開済みの場合は、[再公開]します。

カウントダウン

1. Dock から[Design > Webサイト]に移動します。
2. [Webサイトを編集]をクリックします。
3. ヒーローセクションにカーソルを合わせ、カウントダウン要素に関連付けられている[設定]アイコンをクリックします。
4. カウントダウン設定パネルで次を行います:
   
   • [カウントダウンレイアウト]を設定します（5 種類のスタイルから選択）。
   • [タイマーの色]と[タイマーサイズ]を調整します。
     
     
   • 必要に応じて[カウントダウン見出し]を有効にします。テキストを編集するには:
   • 編集したいテキストを選択し、次の書式設定オプションを使用します。
     
   • Size: フォントサイズを調整します。
   • Bold: テキストを太字にします。
   • Italic: テキストに斜体スタイルを適用します。
   • Underline: テキストに下線を引きます。
   • Strikethrough: テキストに取り消し線を追加します。
   • Alignment: 選択したテキストの配置（左揃え、中央揃え、右揃えなど）を設定します。
   • Ordered List: 番号付きリストを作成します。
   • Bullet List: 箇条書きリストを作成します。
   • Text Color: テキストの色と透明度を変更します。
   • Text Background: テキスト自体に背景色を追加します（ブロック全体ではありません）。
   • Line Height: テキスト行間のスペースを調整します。
   • Letter Spacing: 文字間のスペースを調整します。
   • Text Transform: テキストの大文字・小文字（例: すべて大文字/すべて小文字）を変更します。
   • リンク: テキストにハイパーリンクを追加します。
   • Horizontal Ruler: テキストセクション間に横罫線を挿入します。
   • Clean: テキストブロックのプロパティに影響を与えずに、すべてのテキストの書式設定をクリアします。
   • [タイマー表示設定]を選択します:
     • タイマーのみ表示
     • メッセージのみ表示
     • タイマーとメッセージを表示
   • カウントダウンの対象を次から選択します:
     • イベント開始日
     • カスタム日付（日付と時間を設定）
     • チケット販売開始日（チケットクラスを選択）
     • チケット販売終了日（チケットクラスを選択）
5. イベントが下書き状態の場合は、[公開]をクリックしてイベントを公開します。すでに公開済みの場合は、[再公開]します。

ソーシャルハンドル

1. Dock から[Design > Webサイト]に移動します。
2. [Webサイトを編集]をクリックします。
3. ヒーローセクションにカーソルを合わせ、ソーシャルハンドル要素に関連付けられている[設定]アイコンをクリックします。
4. 利用可能なプラットフォーム:
   • X
   • Facebook
   • LinkedIn
   • YouTube
   • Instagram
   • Telegram
   • Medium
   • Webサイト
5. リンクを入力し、Enter/Returnキーを押して、リンクを取得して適用します。
6. イベントが下書き状態の場合は、[公開]をクリックしてイベントを公開します。すでに公開済みの場合は、[再公開]します。

メディアの追加

1. Dock から[Design > Webサイト]に移動します。
2. [Webサイトを編集]をクリックします。
3. ヒーローセクションにカーソルを合わせ、要素上の[メディアを追加/変更]をクリックします。[メディアを編集]パネルが表示されます。
4. [画像]、[動画]、[埋め込み]から選択します:
   • 画像: 
     • 画像をアップロードするか、デザインライブラリから選択します。
     • [元の画像を使用]のチェックを外すと、トリミング/反転/回転などの編集ができます。
   • 動画: 
     • 動画の URL をフィールドに貼り付けます。
     • 不要な場合は[削除]をクリックし、確認します。
   • 埋め込み: 
     • iframe コードを貼り付けます。
5. 画像にリンクを設定するには:
   • [画像]タブで、画像の下にある[リンク]アイコンをクリックします。
   • 利用可能なオプションから選択します:
     
     
     
     
     
     
     
     • Page: ドロップダウンからページを選択します。
     • External URL: URL を入力し、新しいタブで開くかどうかを選択します。
     • Speakers: 登録済みスピーカーへのリンクを設定します。
     • Sessions: 予定されているセッションへのリンクを設定します。
     • Sponsors: 確定済みスポンサーへのリンクを設定します。
     • Event Listing: イベント詳細へのリンクを設定します。
     • チケット: 特定のチケットクラスへのリンクを設定します。
6. イベントが下書き状態の場合は、[公開]をクリックしてイベントを公開します。すでに公開済みの場合は、[再公開]します。
   

1. [メインメディア]トグルを使用すると、ヒーローセクションで中心となるメディアを追加できます。ヒーローセクション内の要素の順序を変更しても、メインメディアには影響しません。
2. [サブメディア]トグルを使用すると、小さめのメディアを追加できます。このメディアはヒーローセクション内の他の要素とグループ化され、ヒーローセクション内の要素の並び替え時に一緒に移動できます。

表示設定コントロール

スライドの表示/非表示

1. Dock から[Design > Webサイト Design]に移動します。
2. [Webサイトを編集]をクリックして、Webサイトデザイナーを開きます。
3. ヒーローセクションにカーソルを合わせ、そのセクションに関連付けられている[設定]アイコンをクリックします。
4. [スライダー設定]パネルで、非表示にしたいスライドを探します。
5. スライドの横にある[目]アイコンをクリックします:
   • 青い目のアイコン: スライドは非表示です（クリックすると表示されます）。
   • 黒い目のアイコン: スライドは表示中です（クリックすると非表示になります）。

要素の表示/非表示

1. Dock から[Design > Webサイト Design]に移動します。
2. [Webサイトを編集]をクリックします。
3. ヒーローセクションにカーソルを合わせ、非表示にしたい要素に関連付けられている[目]アイコンをクリックします。
4. 再度クリックすると、要素が再表示されます。