Avonni Banner コンポーネントでは、コンテンツセクション内に2カラムレイアウトを組み込むことで、視覚的に魅力的でインタラクティブな体験を作成できます。このレイアウトには、2つの異なるボタンが配置されます — 1つは Avonni Button Dialog モーダル操作用に最初の列に配置される、標準の Avonni Button 外部アクション用に2番目の列に配置されます。両方のボタンは、それぞれの列内で水平中央揃えにされ、すっきりとした対称的な外観になります。
Experience Builder で、バナーを表示したいページ上に Avonni Banner コンポーネントをドラッグします。
メディアを設定する：
バナー設定内で画像またはイラストを追加するオプションを見つけます（CMS Media または Media URL）
使用したいイラストをアップロードまたは選択し、（Media Position 属性を使用して）バナーの左側または右側に配置します
Avonni Layout コンポーネントを挿入する：
Avonni Banner のコンテンツセクションに、2カラムに設定した Avonni Layout コンポーネントを配置します。
最初の列に Avonni Button Dialog を追加する：
Avonni Button Dialog コンポーネントをレイアウトの最初の列にドラッグします。
ボタン設定を調整して、列内で水平中央揃えにします。
2番目の列に Avonni Button を挿入する：
Avonni Button コンポーネントを2番目の列に配置します。
最初のボタンと同様に、水平配置を中央に設定し、反対側の列にある Button Dialog のレイアウトと一致させます。
両方のボタンには、わかりやすく魅力的な行動喚起のラベルを明確に付けます。
ボタンを水平中央揃えにすることで、見た目が整ったプロフェッショナルな印象になり、視覚的にも魅力的で操作しやすくなります。
中央揃えのボタンを備えた2カラムレイアウトにより、バランスの取れたデザインになり、両方の選択肢へのユーザーの操作を促します。
Avonni Banner コンポーネント内で、2カラムの Avonni Layout と中央揃えのボタンを活用することで、ユーザーにコンテンツへの関与を促す、焦点の定まったインタラクティブなセクションを作成できます。この構成は視覚的な魅力を高めるだけでなく、Salesforce Experience Cloud プラットフォーム上でユーザーを目的のアクションへ導くという機能的な役割も果たします。
最終更新 1 か月前
役に立ちましたか？
