イラストとボタン付き

概要

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

左または右に配置されたイラスト、動画を見るためのダイアログを開くボタン、そしてユーザーを別のページへリダイレクトするもう一つのボタンを備えたバナーを設定する方法は次のとおりです。

ライブ結果

インタラクティブなステップバイステップ設定ガイド

バナーの追加

1. バナーコンポーネントを配置します:

   • Experience Builder で、バナーを表示したいページ上の場所に Avonni Banner コンポーネントをドラッグします。
2. メディアを設定する：

   • バナー設定内で画像またはイラストを追加するオプションを見つけます（CMS Media または Media URL）
   • 使用したいイラストをアップロードまたは選択し、バナーの左側または右側に配置します（Media Position 属性を使用）

ボタンの設定

1. 動画モーダルを開くボタンを追加します:

   • Avonni Layoutをドラッグして2列のレイアウトを作成し、各列の中にボタンを追加します。
   • Avonni Button Dialogコンポーネントをドラッグします。
   • ボタンの設定（ラベル、バリアント、配置）を調整します
   • ボタンには、たとえば「動画を見る」のように適切なラベルを付けます。
   • ボタンをクリックしてモーダルを開きます。
   • モーダル内で、次を使用して動画プレーヤーをドラッグします Avonni Videoコンポーネント （dialogContentゾーン内）
   • Avonni Videoコンポーネントを設定します。
2. ページへリダイレクトするボタンを追加します:

   • 先ほど作成したAvonni Layoutバナーの別の列に、追加のボタンを含めます。
   • このボタンには、「詳細を見る」などの行動喚起ラベルを付けます。
   • ボタンの ナビゲートのインタラクション を「Link To」セクションで設定し、ユーザーをリダイレクトする先のページを指定します。

実装例

新製品発表のプロモーションバナーを作成しているとしましょう:

1. イラスト:

   • 注目を引くために、バナーの左側に新製品の目を引くイラストを追加します。
2. 動画モーダルボタン:

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

   • 2つ目のボタン「製品詳細」は、クリックすると ページへ移動し 製品に関する詳細情報が表示されます。
4. スタイリングとテスト:

   • バナーとボタンを会社のブランディングに合わせてスタイル設定します。
   • 両方のボタンをテストして、1つが動画を正しく開き、もう1つが期待どおりにリダイレクトすることを確認します。
5. 公開:

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

効果を高めるためのヒント

• イラストが関連性を持ち、バナーのメッセージを強化していることを確認します。
• 動画は短く、魅力的で、情報価値があるものにしてください。
• 「詳細を見る」ボタンは、バナーから続くストーリーを伝えるページへユーザーを誘導する必要があります。