ヒーローセクション

ヒーローセクション

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

設定する the Hero セクション


Webサイトの訪問者と交流するHeroセクションによって、イベントの提供物の簡単なプレビューを提供します。このHeroセクションはホームページの最上部に位置しています。このセクションにある要素を好みに合わせて追加し、デザインタブのHeroセクションを変更することで整理します。

日付、時間、および会場の要素を変更します



 
  1. デザイン > Webサイトへ移動します、Dockから。
  2. ウェブサイトの編集をクリックして、Webサイトビルダーを開きます。
  3. ヒーローセクションの日付、時間、および会場の要素の上にマウスを移動します。
  4. 設定アイコンをクリックします []。日付、時間、および会場のパネルが表示されます。
  5. 各要素の表示または非表示を切り替えるスイッチを使用します、ヒーローセクションで。
  6. ウィジェットサイズ項目で要素のサイズを調整します。
  7. 形式項目で日付と時間の形式を変更します。
  8. アイコンを有効化、無効化、またはデザインを変更して管理します。
    1. オプション: プリセットのアイコンライブラリからアイコンを選択するか、ローカルシステムからアップロードします。
  9. 日付、時間、および会場の要素のテキストに適用する色を選択します。

イベントカウントダウンタイマーを追加します




  1. デザイン > Webサイトへ移動します、Dockから。
  2. ウェブサイトの編集をクリックして、Webサイトビルダーを開きます。
  3. ウェブサイト上のヒーローセクションでカウントダウン要素を有効にします。
    1. ヒーローセクションで設定アイコンをクリックします []。ヒーローセクションの設定パネルが表示されます。
    2. イベントカウントダウンスイッチを有効にします。カウントダウン要素がヒーローセクションに表示されます。
  4. イベントカウントダウン要素のレイアウトやその他の要素を変更します。
    1. ヒーローセクション内のカウントダウン要素に対して設定アイコンをクリックします []。カウントダウン設定パネルが表示されます。
    2. カウントダウン件名スイッチを有効にして、カウントダウン要素のトップにテキストを含めることができます。
    3. レイアウト、テキストの色、テキストのサイズ、その他を変更して、カウントダウンの表示を調整します。
    4. タイマー表示の設定ドロップダウンメニューから設定を選択します。カウントダウンが終了したときまたはイベントが終了した後の表示を選択します。
    5. カウントダウンするセクションから設定を選択します。タイマーが何までカウントダウンするかを指定します。次のいずれかにカウントダウンするように選択できます: イベント開始日、特定の日付、特定のチケットカテゴリーのチケット販売開始日または終了日。

トップページのセクションにスライダーを設定します

各ウェブページの上部セクションにスライダーを追加して、一箇所にその他の情報を表示します。これはWebサイトと参加者のモバイルアプリで表示されます。たとえば、ホームページのヘッダーセクションに背景画像やビデオを追加すると、見込み客にページコンテンツやイベントの視覚的なプレビューを提供できます。



  1. スライダー設定アイコンをクリックします []. スライダー設定パネルが表示されます。
  2. スライドタブをクリックします。
    1. スライドを追加ボタンをクリックします。新規スライドが上部セクションに追加され、スライドタブに一覧表示されます。
  3. カスタマイズタブをクリックします。
    1. 矢印のトグルを有効にします。このオプションを展開して、矢印のデザインと色の設定を行います。
    2. スライドナビゲータのトグルを有効にします。このオプションを展開して、スライドナビゲータのデザイン、配置、および色の設定を行います。
    3. オートスライドのトグルを有効にします。このオプションを展開して、スライドの遅延時間を設定し、スライドがホバー時に一時停止するかどうかを設定します。
  4. トランジションドロップダウンで設定を選択し、各スライド間のアニメーションを選択します。
  5. 全スライドの高さを均一にするトグルを有効にします。全スライドは、各スライドが持つ要素のサイズや数に基づいて最大スライドの高さにリサイズされます。
  6. スライダーを画面に適応トグルを有効にします。これによりHeroセクションのスライダーのみが全画面に表示されるようになります。

スライドを編集する


  1. スライドタブのスライドに対する編集アイコンをクリックします。
  2. 編集タブをクリックします。
    1. セクションレイアウトのエリアで配置、サイズ、整列設定を使用します。
    2. 要素セクションのトグルボタンを有効にし、追加したい要素を選択します。
  3. クリックアイテムを管理タブ.
    1. 要素をクリックしてドラッグし、並べ替えます。

スライドを隠す


  1. 隠すのアイコン[]をクリックします。対象はSlidesタブ内のスライドです。スライドは表示されなくなります。
  2. スライドの表示を戻すには、もう一度アイコンをクリックします。

メモ:セクション内にスライドが1つしかない場合、それを隠すことはできません。

スライドに背景を追加する方法

Webサイト用


  1. Slidesタブ内のスライドに関するアイコンをクリックします。
  2. Backgroundオプションをクリックします。
  3. Webサイトタブを選択します。
    1. Colorタブを選択し、色を選び、透明度を設定します。
    2. または、画像タブを選択し、画像をアップロードします。画像の要素(透明度やオーバーレイ)を変更したら、必要に応じてフィットや位置を調整します。
    3. または、Videoタブを選択し、ビデオのURLを入力します。このタブに表示される設定を用いて、ビデオがどのように表示されるべきか定めます。
      メモ:YouTubeのビデオURLまたは公開Zoho文書のビデオURLを貼り付けることができます。
  4. 完了したら閉じるをクリックします。

メモ:ビデオを背景として追加する際の代替画像オプションは、フォールバック画像として機能し、ビデオがモバイルインターフェイスで読み込まれない場合に表示されます。

モバイル用


  1. Slidesタブのスライドのアイコンをクリックします。
  2. Backgroundオプションをクリックします。デフォルトでは、セクションの背景設定はウェブサイトと同じくモバイルインターフェイスにも適用されます。
  3. モバイルブラウザで異なる背景を希望する場合は、ウェブサイトのバックグランドをモバイルインターフェースで使用するチェックボックスのチェックを外します。
    1. Colorタブを選択し、色を選び、不透明度を設定します。
    2. もしくは、画像タブを選択して画像をアップロードします。画像の要素(不透明度やオーバーレイなど)を変更し、必要に応じてフィットと位置を調整します。
    3. または、Videoタブを選択し、ビデオのURLを入力します。このタブに表示される設定を使用して、ビデオがどのように表示されるべきかを決定します。
      メモ: YoutubeのビデオURLや公開されているZoho文書のビデオURLを貼り付けることができます。

メモ:ビデオを背景として追加する際の代替画像オプションは、フォールバック画像として機能し、ビデオがモバイルインターフェイスで読み込まれない場合に表示されます。

対応している画像の形式

JPG, JPEG, PNG
GIF, WEBP
 

画像のサイズ制限

5MB以下
 

画像の寸法

72dpiでの1440x760ピクセル
 

対応しているビデオの形式

YouTube

スライドの削除方法


  1. スライドのアイコンをクリックします。これはスライドタブにあります。
  2. 削除オプションをクリックします。スライドは削除されます。

メモ:セクションに一つのスライドしかない場合、削除はできません。

スライダーの複数スライドは、あなたのサブスクリプション プランに基づいて有効な支払い済み機能です。

メディアの埋め込み

ホームページのヘッダーセクションにイベント関連のメディアを埋め込みます。これにより、訪問者はWebサイトを訪れた際にイベントに参加する可能性が高くなります。


 
  1. Design > Webサイトへ移動し、Dockから選択します。
  2. 編集 Webサイトをクリックして、Webサイト Builderを開きます。
  3. 設定アイコン []をクリックします。Hero section 設定パネルが表示されます。
  4. Primary media Secondary media のトグルを有効にします。これにより、Heroセクションにメディアのマージ項目が表示されます。
  5. マージ項目内の追加する mediaリンクをクリックします。追加する mediaパネルが表示されます。
    1. 画像を追加する: 画像のタブをクリックして画像をアップロードします。画像にはWebサイトの別のページ、外部URL、スピーカーの権限、スポンサー情報、セッションの詳細、あなたのポータルのイベントリスティングページ、または申し込みがある場合は自動的に選択したチケットクラスとともに申し込みフォームにハイパーリンクをつけることができます。
    2. ビデオの追加:  ビデオタブを選択し、ビデオURLを入力します。このビデオは公開されているYouTubeまたはVimeoのリンクであり、再生時にオーディオがロードされます。
    3. Embed コード: Embedタブを選択し、あなたのiframeコードを貼り付けます。
  6. Hero section 設定パネルのMedia sizeドロップダウンで設定を選択します。
  7. 閉じるをクリックします。

メモ:
  1. Primary mediaトグルは、Heroセクションの中心となるメディアを追加できます。Heroセクションの要素の順序を変更しても、primary mediaには影響しません。
  2. Secondary mediaトグルは、より小さなメディアを追加できます。このメディアはHeroセクションの他の要素とグループ化され、Heroセクションの要素を並べ替えるときに移動できます。

対応メディアフォーマット

JPG, JPEG, PNG
GIF

画像メディアのサイズ制限

5MB未満

画像メディアの寸法

720x360ピクセル、72dpi

対応ビデオメディアフォーマット

YouTube