部品の概要

コンポーネントを使用して、サイト全体で繰り返し使用されるレイアウトとコンテンツをより効率的に管理します。

ユニットを使用すると、要素と子要素からカスタマイズ可能なブロックを形成して、信頼性が高く、効果的で、拡張可能な設計プロセスを維持できます。これらのブロックをサイト全体で再利用し、1 か所で調整できるため、繰り返し使用されるレイアウトを個別に修正する必要がなくなります。

このセッションでは、次のことを理解します。

  1. ユニットの作成
  2. ユニットの活用と再利用
  3. ユニットの変更
  4. ユニットインスタンスをコアユニットから切り離す

ユニットの作成

ユニットは次の目的で利用できます。

  • インスタンスごとに同一のコンテンツを確立します。 ナビゲーション バー、フッター、登録フォームなど、まったく同じコンテンツを含む定期的な配置のミラー コピーを作成します。 1 か所でそれらを修正すると、その変更がそのユニットのすべてのインスタンスに反映されます。
  • インスタンスごとに固有のコンテンツを確立します。 さまざまなテキスト、画像、ビデオ、リッチ テキストを使用して繰り返しレイアウトを調整し、各インスタンスに独特のコンテンツを与えながら一貫したデザインを維持します。

サイト上のほぼすべての要素または要素のグループからユニットを構築できます。ユニットを作成するには:

  1. ユニットに変換したい要素を選択します
  2. 展開する デザインパネル または 要素構成パネル
  3. パネルの頂点にある「ユニットを作成」アイコンをタップします
  4. ユニットにタイトルを付けて 作成する

ユニットを開始すると、コア ユニット内に入ることになります。つまり、コア ユニットに加えた変更は、そのユニットのすべてのインスタンスに反映されます。必要なときはいつでも、次の方法で、任意のユニット インスタンスのコア ユニットにアクセスできます。

  • ユニットインスタンスをダブルタップする
  • 右クリックしてクリック ユニットの変更
  • インスタンスを選択して「ペンラベルの「」アイコン
  • インスタンスを選択して「レンチ” 左パネルの右上隅にあるアイコン

コアユニットの変更に関する追加の詳細を確認します。

ユニットの活用とリサイクル

ユニットを確立すると、サイト内のどこでも再利用できます。

  1. 展開する 単位パネル
  2. 希望のユニットをタップして、サイト上の任意のページにドラッグします。
  3. ユニットインスタンスをキャンバス上またはナビゲーターに直接配置します。

ユニットインスタンスを選択すると、緑色で強調表示され、アウトラインが表示されます。 単位パネル 各ユニットがサイト上でどのくらいの頻度で使用されているかを確認します。

リマインダー: ユニット インスタンスの複製は可能です (コピー アンド ペースト、右クリック、またはキーボード ショートカットによるコピーなど) が、コア ユニットの複製は現時点ではネイティブでは実行できません。代わりに、ユニット インスタンスを切り離し、切り離した要素または要素のグループから新しいユニットを作成できます。

ユニットをダブルタップすると、コア ユニットにアクセスし、ナビゲーター パネルでユニットの要素階層を確認できます。ユニットの要素階層は、コア ユニットからのみ確認できます (つまり、ユニット インスタンス内からユニットの要素階層を確認することはできません)。

ユニットの変更

ユニットを操作して変更するためのさまざまな方法を進めていきましょう。

  • コアユニットを編集する
  • コアユニットを出る
  • エディタで単位を変更する
  • ユニット名を変更する
  • ユニットを消去する

コアユニットを編集する

同じ調整を 全て ユニットのインスタンスを編集する場合は、コア ユニットを調整する必要があります。次の方法で、任意のユニット インスタンスのメイン ユニットを編集できます。

  • ユニットインスタンスをダブルタップする
  • 右クリックしてクリック ユニットの変更
  • インスタンスを選択して「ペンラベルの「」アイコン
  • インスタンスを選択して「レンチ下部パネルの右上隅にある「」アイコン

ユニット インスタンスを選択すると、下のパネルでユニット特性のデフォルト値を確認できます。ユニットのプロパティを以前に配置した場合にのみ、特性のデフォルト値が表示されることに注意してください。

ユニット特性を使用すると、ユニット インスタンスで変更できるメイン ユニット内の特定の要素値 (テキスト、リッチ テキスト、画像、ビデオ、可視性など) を定義できます。または、ユニット特性を CMS フィールドに関連付けて、CMS コレクションからデータを取り込むこともできます。ユニット特性の定義とユニット インスタンスの値の変更の詳細については、こちらをご覧ください。

リマインダー: ユニットインスタンスのスタイルを修正するには、 クラス パーソナライズされた属性。

コア ユニットを調整すると、すべてのユニット インスタンスに影響します (そのユニット インスタンスに、ユニット内の特定の要素に適用されるユニット特性がない限り)。コア ユニットを調整するときに、構造と要素の順序を入れ替えて、サイト全体のすべてのユニット インスタンスに同時に影響を与えることができます。

たとえば、ユニットとして配置されたカード デザインを所有しているとします。カード ユニットには、タイトル要素、段落要素、ボタン要素が含まれ、ボタン要素はカードの一番下にあります。カードのコア ユニットを変更して、ボタンをカードの下部から上部に移動すると、その変更はサイト全体でのカード ユニットのすべての出現に影響します。

コア ユニットへの編集は、ユニット インスタンス内で明示的に変更された場合を除き、そのユニットのすべてのユニット インスタンスに影響します。ユニット特性の定義とユニット インスタンスの値の変更について詳しく学習します。  

コアユニットを出る

メインユニットの調整が完了したら、次の方法でメインユニットを終了できます。

  • 戻る開発者ツールの左上隅にある「」矢印をクリックします。
  • キャンバス上のユニットの外側をクリックする
  • 押す 逃げる キーパッドで

コア ユニットの調整を停止した後は、ユニット インスタンス内の要素に対して行った調整は、その特定のユニット インスタンスにのみ影響することに注意してください。

エディタで単位を変更する

コンテンツ編集者にエディターでサイトのコンテンツを更新するよう依頼した場合、ユニット要素に加えた変更は ではない ユニット特性で変更され、すべてのインスタンスで一貫している場合は、他のすべてのインスタンスに適用されます。

あるいは、コンテンツ編集者がユニット要素を変更した場合、 ユニット特性を介して変更された場合、それらの調整は編集中のユニットインスタンスにのみ適用されます。

ユニット名を変更する

ユニット名を変更するには:

  1. 展開する 単位パネル
  2. ユニット名の上にマウスを移動し、「ペンユニットの右側に現れる「」アイコン
  3. 変更を実行し、 保存

ユニットを削除する

ユニットを完全に根絶するには:

  1. サイトからユニットのすべてのインスタンスを消去または切り離します
  2. 展開する 単位パネル
  3. クリック "ペンユニットの右側に表示される「」アイコン
  4. 打つ 消去 確認する

ユニットインスタンスをコアユニットから切り離す方法

ユニット インスタンスをデタッチし、コア ユニットから独立して調整するには:

  1. 切り離したいインスタンス内のユニット要素を右タップします
  2. クリック インスタンスのリンクを解除

一度デタッチすると、デザイン内でそのユニットのリンクされた他のインスタンスを変更しても、デタッチされたインスタンスには影響しません。

ユアン・マック