AX - コンテナ

概要

AX - コンテナ Experience Cloud コンポーネントで、Experience Sites ページ上の他のコンポーネントを境界線、背景、パディング付きのスタイル付きコンテナでラップします。

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

視覚的なセクションの作成、フォームフィールドのグルーピング、ブランド背景の追加、ダッシュボードウィジェットの整理、またはポータルでスタイル付きコンテナにコンテンツを包む必要があるあらゆる場所に最適です。

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

チュートリアル

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

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

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

Avonni Container コンポーネントは、Card、Box、Standard のスタイルバリアントの多彩さで際立っており、それぞれが異なるコンテンツニーズに対応するよう設計されています。

• その カード バリアントは、推薦文のような目を引くセクションやコンテンツに彩りを加える用途に最適です。

• その ボックス バリアントは、製品や主要な機能を強調して目立たせる際に優れており、それらを際立たせます。

• その スタンダード バリアントは、より従来型のコンテンツに対してクリーンで統一感のある外観を提供し、サイト全体の調和を保ちます。

サイトを高める動的なビジュアル

Avonni Container を使えば、さまざまなセクションに独自の背景画像で命を吹き込むことができます。『私たちについて』のセクションに活気あるチーム写真を追加したり、サステナビリティに関するトピックに穏やかな風景を描いたりすることを想像してください。これらの動的なビジュアルは美的魅力を高め、ブランドのストーリーをより効果的に伝えます。

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

装飾の多いまたはカラフルな背景に対してコンテンツを目立たせることはウェブデザインで非常に重要です。Avonni Container はオーバーレイカラーの使用でこの課題に対応します。祭りのような背景にダークオーバーレイを重ねてイベントの詳細を際立たせたり、控えめな色合いでコンテンツに奥行きを与えながら読みやすさを保つことを想像してください。

プレゼンテーションの完全なコントロール

Avonni Container は各セクションのサイズ、背景、境界線に関する幅広いコントロールを提供します。これにより、コンテンツが空間を占有する方法を細かく調整したり、テーマに合わせて背景色や画像を適用したり、追加の定義のために境界線設定を調整したりできます。これらの各要素はページの視覚構造を向上させる上で重要な役割を果たします。

多様なオーディエンスへの適応性

今日のデジタル環境では、さまざまなオーディエンスのニーズに応えることが重要です。Avonni Container はこの適応性を念頭に置いて設計されています。パートナーポータルのニュースセクションに Card スタイルを使用したり、カスタマーハブで特別オファーを強調するために Box スタイルを使用したりする場合でも、このコンポーネントはコンテンツが見られ、オーディエンスに響くことを保証します。

まとめ

Avonni Container コンポーネントは単なるツール以上のもので、Experience Cloud を使用する際の創造性のキャンバスであり、多様なウェブデザイン課題へのソリューションです。その多用途性、動的なビジュアル機能、読みやすさの向上、適応可能なコンテンツ表示オプションにより、どんな Salesforce Experience Cloud サイトにも不可欠な存在となります。魅了する、情報を伝える、あるいはエンゲージさせることを目指すにせよ、Avonni Container はスタイルと効率性をもってそれを可能にします。

設定

🎛️ プロパティ

名前	説明	使用法
バリアント	コンテナの全体的な外観を定義するスタイルバリアントを選択します。 詳細を読む	コンテンツの提示が簡潔なボックス型かカード風かどれがデザインのビジョンに合うか、該当するバリアントを選択してください。
背景画像	コンテナの背景画像を設定します。	コンテナの視覚的魅力を高め、伝えたいムードやテーマのトーンに寄与する画像をアップロードするか URL を指定してください。
オーバーレイカラー	背景画像の上にカラーオーバーレイを適用します。	背景画像の上に微妙に重ねる色を選択し、コンテナ内のコンテンツの視認性と読みやすさを保ちます。

バリアントの定義

🎨 スタイリング