構造コンポーネント structure-components

ビジュアルデザイン空間で​ 構造コンポーネント ​を使用して、コンテンツの構造を定義します。 シンプルなドラッグ&ドロップ操作で構造要素を追加、移動することで、コンテンツレイアウトの形状をすばやく定義できます。 それぞれの構造コンポーネントは水平方向のスペースにまたがり、それらを積み重ねて垂直方向にレイアウトを構築できます。

構造ライブラリ structure-library

コンポーネント ライブラリの上部にある​構造 セクションには、使用可能な構造コンポーネントが表示されます。

構造コンポーネントを追加 add-structure-components

メール、ランディングページ、フラグメントのコンテンツをデザインする際には、それぞれの構造コンポーネントを追加してレイアウトを作成します。 左側の​構造 セクションから項目をドラッグし、キャンバスにドロップします。 ツールバーを使用して列を選択し、右側のパネルの「設定」タブと「スタイル」タブを使用して、選択したコンポーネントまたは列のパラメーターを定義できます。

{width="800" modal="regular"}

コンポーネントツールバー component-toolbar

ツールバーは、カンバスで選択したときにカンバスに表示されます。 使用可能なツールを使用すると、列を選択してコンポーネント関数を適用する簡単な方法を提供できます。

{width="150"}

コンポーネント設定 component-settings

コンポーネントを追加すると、ビジュアルデザインスペースでコンポーネントが選択され、右側のパネルにそのプロパティが表示されます。 デフォルトでは、設定 タブが表示されます。 また、いつでも構造コンポーネントを選択して、設定を変更することもできます。

表示オプション

デスクトップまたはモバイルデバイスの表示からコンポーネントを除外する場合は、表示オプション​設定を変更します。 デフォルトの​ すべてのデバイスに表示 ​では、すべてのデバイスで表示が有効になります。

{width="400" modal="regular"}の表示オプション

別の設定を選択して、デバイスタイプ別にコンポーネントを排他的にします。

ヘッダーとフッター

構造コンポーネントは、メールメッセージまたはランディングページのHTML ヘッダーまたはフッターとして指定できます。 キャンバスで構造コンポーネントを選択した状態で、ヘッダー​または​フッター オプションをクリックします。 ヘッダーまたはフッターは1つだけ指定でき、別のコンポーネントが割り当てられている場合、このオプションは使用できません。

{width="600" modal="regular"}

ヘッダーまたはフッターの指定を削除するには、コンポーネントを選択し、オプションをクリックして削除します。

積み重ね列 stacked-columns

小さい画面または表示ウィンドウの場合、デフォルト設定を変更しない限り、構造コンポーネントの列は積み重ねとして表示されます。 複数列構造コンポーネントを選択した状態で、切り替えスライダーを右に移動して、モバイルで列をスタックしない​設定を変更します。

{width="250"}

コンポーネントスタイル component-styles

コンポーネントを追加すると、ビジュアルデザインスペースでコンポーネントが選択され、右側のパネルにそのプロパティが表示されます。 また、いつでもコンポーネントを選択して、設定やスタイルを変更することもできます。

背景 background

右側のパネルで「スタイル」タブを選択した状態で、背景 セクションを使用して、構造コンポーネントの背景として使用するカラーとオプションの画像を定義します。

背景色

チェックボックスを選択し、カラーの正方形をクリックして、ピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。 または、カラースライダーとカラーフィールドを使用してカラーを選択します。

{width="300"}

背景画像 background-image

切り替えセレクターを移動して、背景画像の設定を有効にします。

{width="250"}

「アセットを選択」をクリックしてアセットセレクターを開き、Assets ライブラリ ​から画像を選択できます。

画像の配置 オプションを使用して、画像が構造コンポーネントをどのように塗りつぶすかを選択します。 プレースメント設定は、標準のHTML背景画像塗りつぶしと整列属性に従います。

{width="250"}

その他のスタイル other-styles

その他の構造コンポーネントスタイルを適用して、メールメッセージまたはランディングページでの表示を調整できます。 これらの組み込みオプション以外のスタイル設定については、​ コンテンツのカスタム CSSの追加を参照してください。

列 columns

コンポーネントツールバーの「列を選択」ツールを使用して、列を選択します。 次に、列ツールバーを使用して、列の選択を変更したり、列を削除したり、列に条件付きコンテンツのバリエーションを適用したりできます。 列のパラメーターは、右側の​設定 タブと​スタイル タブに表示されます。

{width="500"}

n:n列を変更 change-nn-columns

列の幅は、ほとんどの構造コンポーネントで静的です。 n:n列 コンポーネントを追加すると、列数と列サイズを変更できます。 n:n列コンポーネントは、幅が同じ5列（20%）で始まります。

カンバスでコンポーネントを選択した状態で、右側のパネルの「列数」オプションを使用して、列数を変更します。 上下の矢印アイコンをクリックして、列数を増減するか、フィールドに数値を入力します。

{width="650" modal="regular"}

カンバスで、列サイズ アイコンを移動して、選択した列の幅を調整します。 幅を増減すると、隣接する列も調整され、すべての列がコンポーネント幅の100%を占めるようになります。

{width="500" modal="regular"}

列スタイル column-styles

カンバスで列を選択した状態で、その列に適用するスタイルを設定できます。

ナビゲーションツリー navigation-tree

ビジュアルデザイン空間では、ナビゲーションツリーを使用して、列やコンテンツなどの構造コンポーネントにアクセスできます。 左側の​ナビゲーションツリー アイコン（ ）をクリックすると、ツリーが表示されます。

{width="800" modal="regular"}

Body​要素は、ツリー構造のルートです。 ツリー内のコンポーネントまたは列の子要素のいずれかをクリックして、キャンバス上で選択します。 右側の​設定 タブと​スタイル タブには、そのコンポーネントまたは列のパラメーターが表示されます。

{width="800" modal="regular"}