イラストとボタン付き

概要

この 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 バナーのもう一方の列に、追加のボタンを入れます。
   • このボタンには、「詳しく見る」などのCTAラベルを付けます。
   • ボタンの ナビゲートインタラクション を「Link To」セクションで、ユーザーを転送する先のページを指定して設定します。

実装例

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

1. イラスト:

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

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

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

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

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

効果的に使うためのヒント

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