編集したい箇所の選択.

ページの各部には独自のコントロールバーがあります。エレメント、カラム、ロー、セクションです。カーソルを合わせれば各バーにたどり着けますし、Layersパネルから任意のレベルを選ぶこともできます。動画ではテキストとボタンを持つ2カラムのローを作り、各レベルを巡っています。

2カラムのローの作成

1. コンテンツエリアの+をクリックし、LayoutタブからSectionを選びます。
2. セクションの+をクリックしてRowを選びます。均等な2カラム付きで追加されます。
3. 左カラムの+をクリックし、ContentタブからTextを選びます。
4. 見出しと1行のテキストを入力し、Saveをクリックします。
5. 右カラムの+をクリックしてButtonを選びます。
6. タイトル欄のTitleを入力し、Linkを設定してSaveをクリックします。

ホバーでの各レベルへの到達

1. ボタンにカーソルを合わせます。エレメント名とMoreボタンを持つコントロールバーが表示されます。
2. ポインターをカラムの端に動かします。バーがColumnに変わります。
3. ローにカーソルを合わせます。バーがRowになり、カラムレイアウトアイコンが付きます。
4. セクションにカーソルを合わせます。最も外側のバーがSectionになります。

表示されるバーは、ポインターの下にある最も内側の箇所のものです。コントロールバーをクリックすると、その箇所が選択されて枠線が付きます。Ctrl+Cなどのキーボードショートカットは選択した箇所に作用し、何も選択していない場合はポインターの下の箇所に作用します。選択の解除は、コンテンツ外の空いた場所をクリックします。

Layersパネルからのレベル選択

1. DXPRツールバーのMoreを開き、Layers panelを選びます。
2. ツリーのレイヤーをクリックします。ページがその箇所までスクロールし、ハイライトされます。
3. レイヤーの3点ドットをクリックすると、コントロールバーと同じメニューが開きます。
4. パネルを閉じてSaveをクリックします。

Ctrl+Shift+Jキー（MacではCmd+Shift+Jキー）でも、パネルを開閉できます。

表示内容

ページは入れ子のレベルで作られ、順序は常にSection、Row、Column、エレメントです。各レベルのバーには、そのレベル向けの操作を持つMoreボタンが付いています。Layersパネルでは同じレベルがツリー表示のため、ホバーしにくい箇所も1クリックで選べます。

コントロールバーの表示方式

表示方式One rowでは、バーに乗るとページの対応箇所が光ります。狭い画面では外側のバーが列から落ちます。コンテナの端にカーソルを合わせてそのレベルにたどり着きます。

1. DXPRツールバーのMoreを開いてEditor settingsを選ぶか、Ctrl+;キー（MacではCmd+;キー）を押します。
2. 設定はControl barsでOn each elementかOne rowを選びます。
3. 最後にSaveをクリックします。ページはすぐに変わります。

Ctrl+Shift+Bキー（MacではCmd+Shift+Bキー）でダイアログなしに切り替えます。選択はユーザーアカウントに保存されるため、他のブラウザーにも付いてきます。アカウントの編集ページにあるDXPR Builderでも変えられます。Defaultタグ付きの選択肢はサイトの設定です。それを選ぶと、管理者が後から初期値を変えてもサイトに追随します。

コントロールバーが表示されない場合

• コントロールバーが出ない。 ページがPreviewです。表示メニュー（DXPRツールバーの目アイコン）を開いてEditを選びます。
• バーが違う箇所のものになっている。 ポインターが子エレメントの上にあります。コンテナ端のパディングに移動するか、Layers panelで箇所を選びます。
• テキストのクリックでテキストエディターが開く。 選択ではなくインライン編集です。テキストの外側をクリックしてから、テキストのコントロールバーをクリックします。

次のステップ

• ページ上でのテキスト編集：ページ上で直接語句を変えます。
• エレメントのMoreメニュー：Moreメニューのすべての操作を確認できます。
• キーボードショートカット：選択した箇所をマウスなしで操作できます。