イラストとボタン付き

概要

その Avonni バナー このコンポーネントは、魅力的なビジュアルとインタラクティブなボタンでユーザーの注意を引くように設計されています。

イラストを左または右に配置し、ビデオを視聴するダイアログを起動するボタンと別のページにリダイレクトするボタンを含むバナーを構成する方法は次のとおりです。

ライブ結果

対話型ステップバイステップ構成ガイド

バナーの追加

1. バナーコンポーネントを配置：

   • Experience Builder で、バナーを表示したいページ上に Avonni Banner コンポーネントをドラッグします。

2. メディアを設定する:

   • バナー設定内で画像やイラストを追加するオプションを見つけます（CMS メディア または メディア URL）

   • 使用したいイラストをアップロードまたは選択し、バナーの左側または右側に配置します（Media Position 属性を使用）

ボタンの設定

1. ビデオモーダルを開くボタンを追加：

   • Avonni レイアウトをドラッグして2列のレイアウトを作成し、各列内にボタンを追加します。

   • Avonni Button Dialog コンポーネントをドラッグします。

   • ボタンの設定（ラベル、バリアント、配置）を調整します。

   • ボタンに「ビデオを見る」など適切なラベルを付けます。

   • モーダルを開くにはボタンをクリックします。

   • モーダルの内部に、次を使用してビデオプレーヤーをドラッグします： Avonni Video コンポーネント （dialogContent ゾーン内）

   • Avonni Video コンポーネントを設定します。

2. ページにリダイレクトするボタンを追加：

   • 先に作成した Avonni レイアウトバナーのもう一方の列に追加のボタンを含めます。

   • このボタンに「詳細を見る」などのコールトゥアクションのラベルを付けます。

   • ボタンの ナビゲート操作 'リンク先' セクションでユーザーのリダイレクト先ページを指定して設定します。

実装例

新製品の発売を告知するプロモーションバナーを作成しているとしましょう：

1. イラスト：

   • バナーの左側に新製品の目を引くイラストを追加して注目を集めます。

2. ビデオモーダルボタン：

   • 最初のボタンは「デモを見る」と表示されます。製品デモビデオが埋め込まれたモーダルダイアログを開くように設定されています。これには、次を使用できます。 Avonni Button Dialog そのための

3. リダイレクトボタン：

   • 2番目のボタン「製品詳細」はクリックされると、 ページへ移動します 製品に関する詳細情報が表示されます。

4. スタイリングとテスト：

   • バナーとボタンを会社のブランディングに合わせてスタイル設定します。

   • 両方のボタンをテストして、1つがビデオを正しく開き、もう1つが期待どおりにリダイレクトすることを確認します。

5. 公開：

   • すべてが問題なく動作することを確認したら、変更を公開します。

効果的にするためのヒント

• イラストが関連性を持ち、バナーのメッセージを強化していることを確認してください。

• ビデオは短く、魅力的で、情報に富んだものであるべきです。

• 「詳細を見る」ボタンは、バナーの説明を引き継ぐページにユーザーを誘導するべきです。