AX - コンテナ

概要

AX - コンテナ は、Experience Sites ページ上で、他のコンポーネントを枠線、背景、パディング付きのスタイル化されたコンテナにまとめる Experience Cloud コンポーネントです。

関連するコンテンツをまとめたり、視覚的なセクションを作成したり、背景色や画像を追加したり、コンポーネントの周囲に一貫した余白を適用したりするために使用します。Experience Builder では、コンテナ内に任意の Experience Cloud コンポーネントをドラッグ＆ドロップして、グループ化されたレイアウトを作成できます。

視覚的なセクションの作成、フォームフィールドのグループ化、ブランド背景の追加、ダッシュボードウィジェットの整理、あるいはポータルでコンテンツをスタイル化されたコンテナで囲みたいあらゆる場面に最適です。

このコンポーネントは スロットを活用し 高度なカスタマイズが可能で、LWR サイトに最適です。Aura サイトでは、このレベルのカスタマイズはサポートされていません。

チュートリアル

名前	説明
グリッドレイアウトを作成する	インタラクティブな「詳細を見る」ボタン付きで製品を紹介する、動的なグリッドレイアウトの作成方法を学びます。

Avonni Container でサイトの可能性を最大化する

あらゆるニーズに対応する多彩なデザインオプション

Avonni Container コンポーネントは、Card、Box、Standard という多彩なスタイルバリアントを備えており、それぞれ異なるコンテンツ要件に対応するよう設計されています。

• この カード バリアントは、推薦文のような目を引くセクションに最適で、コンテンツに華やかさを加えます。

• この Box バリアントは、製品や主要機能を強調して目立たせるのに最適です。

• この Standard バリアントは、より一般的なコンテンツに対してすっきりと一貫した見た目を提供し、サイト全体の調和を保ちます。

サイトを高めるダイナミックなビジュアル

Avonni Container を使えば、独自の背景画像を通じてさまざまなセクションに命を吹き込めます。「会社概要」セクションに鮮やかなチーム写真を追加したり、サステナビリティのトピックに穏やかな風景を描いたりする場面を想像してみてください。こうしたダイナミックなビジュアルは、見た目の魅力を高めるだけでなく、ブランドのストーリーをより効果的に伝えるのにも役立ちます。

読みやすさとスタイルの両立

コンテンツがにぎやかで色鮮やかな背景の上でも際立つようにすることは、Web デザインでは重要です。Avonni Container は、オーバーレイカラーを使うことでこの課題に対応します。たとえば、華やかな背景の上に暗いオーバーレイを重ねてイベント詳細を目立たせたり、読みやすさを保ちながらコンテンツに奥行きを加えるさりげない色味を使ったりできます。

表示を完全に制御

Avonni Container では、各セクションのサイズ、背景、枠線を細かく制御できます。つまり、コンテンツが占めるスペースを微調整したり、テーマに合わせて背景色や画像を変更したり、枠線の設定を調整してより明確にしたりできます。これらの要素はそれぞれ、ページの視覚的な構造を強化するうえで重要な役割を果たします。

多様なユーザー層への適応性

今日のデジタル環境では、さまざまな利用者のニーズに対応することが重要です。Avonni Container は、この適応性を念頭に設計されています。パートナーポータルのニュースセクションでは Card スタイルを使い、顧客ハブで特別オファーを強調するには Box スタイルを使うなど、このコンポーネントはコンテンツが確実に表示され、利用者の心に響くようにします。

まとめ

Avonni Container コンポーネントは単なるツールではなく、創造性のためのキャンバスであり、Experience Cloud を使う際の多様な Web デザイン課題を解決するソリューションです。その汎用性、ダイナミックなビジュアル機能、読みやすさの向上、適応可能なコンテンツ表示オプションにより、あらゆる Salesforce Experience Cloud サイトで欠かせない存在になります。惹きつけたい、伝えたい、参加を促したい、どの目的でも、Avonni Container があれば、スタイルと効率を両立しながらすべてを実現できます。

設定

🎛️ プロパティ

名前	説明	使用方法
バリアント	コンテナ全体の外観を定義するスタイルバリアントを選択します。 詳細を見る	シンプルな表示、ボックス型の表示、カード型の表示のいずれを好む場合でも、デザインのビジョンに合うバリアントを選択してください。
背景画像	コンテナの背景画像を設定します。	コンテナの視覚的な魅力を高め、伝えたい雰囲気やテーマ性に貢献する画像をアップロードするか、URL を指定します。
オーバーレイカラー	背景画像の上に色のオーバーレイを適用します。	背景画像の上にさりげなく重なる色を選択し、コンテナ内のコンテンツの視認性と読みやすさを保つのに役立てます。

バリアントの定義

🎨 スタイリング