カルーセルレイアウトでバナーを作成する

最も人気のカルーセルデザインの作成方法。

Last updated:
April 30, 2024

ビジネスポータルでカルーセルバナーを作成する

ステップ1

スーパーカルーセルレイアウトに使用するワイドな画像を選びます。画像を縦在8:9のアスペクト比に合う等分に分割します。分割数はスーパーカルーセルに含めたい動画数と同じにします。

Super Carousel

ステップ2

まだアップロードしていない場合は、カルーセルに含めたい動画をFireworkビジネスポータルにアップロードします。

Screenshot 2023-01-13 at 8.36.01 AM

ステップ3

スーパーカルーセル用にアップロードした各動画で編集をクリックします。

ステップ4

ポスターヘッダーをクリックしてセクションを展開し、画像の切り出したセグメントの1つ(順不同)をポスターとしてアップロードします。

Screenshot 2023-01-13 at 8.37.16 AM

ステップ5

動画にポスター画像を追加したら、プレイリストを作成して動画を追加します。ビジネスポータルでプレイリストを作成するを参照してください。

ステップ6

ビジネスポータルでプレイリストに移動します。

ステップ7

ポスターが画像全体を表示するように、プレイリスト内の動画を順番にドラッグ&ドロップします。

Screenshot 2023-01-13 at 8.37.48 AM

ステップ8

右上の青い埋め込みアイコンを選択し、レイアウト選択にカルーセルを選びます。

ステップ9

コードをコピーをクリックします。

A-1

デスクトップ体験のカスタマイズ

ウェブページエディターに貼り付ける前にコードを編集してカルーセルの視聴体験をカスタマイズできます。

注意:これはあくまでです。必ず自分のプレイリスト用のコードをコピーしてください。

<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script>
<fw-embed-feed
   channel="FW_testchannel"
   playlist="oBZ4Oo"
   mode="row"
   open_in="default"
   max_videos="0"
   placement="middle"
   player_placement="bottom-right"
   captions="false"
   autoplay="false"
></fw-embed-feed>

キャプションと自動再生をオフにする

各タイルにマウスホバーするだけで動画が再生されます。コピーしたコードにautoplay="false"captions="false"を追加します。

A new

キャプションオフ、自動再生オン

最初のタイルが自動再生され、残りのタイルで動画が観りやすくなります。コピーしたコードにcaptions="false"を追加します。

ab

キャプションオン、自動再生オフ

各タイルのキャプションは視聴者のクリックを誦わたすのに役立ちます。コピーしたコードにautoplay="false"を追加します。

abv

カルーセルはデスクトップで最も官凘できます。モバイルやアプリではポスターがスクロールされます。最適なエンゲージメントとコンバージョンを実現するための実装方法は、Fireworkチームにお問い合わせください。

mobile