エレメントをドラッグで配置する.

DXPR Builderを学ぶページを作るページを編集

エレメント、ロー、セクションはドラッグで好きな場所に置けます。カラム内で上下に動かすことも、別のカラムやセクションに移すこともできます。新しいエレメントはカラムの一番上に追加されるため、並べ替えにはドラッグが手早くなります。例ではBook a free consultationボタンを、関係するテキストの下にドラッグしています。

エレメントのドラッグ

  1. エレメントにカーソルを合わせてコントロールバーを表示します。
  2. ドラッグハンドル(コントロールバー左にあるエレメント名付きの点状グリップ)を押したままにします。
  3. エレメントを新しい場所までドラッグします。縞模様のプレースホルダーが配置先を示します。
  4. マウスボタンを離してドロップします。
  5. ツールバーのSaveをクリックして、ページを保存します。

例では、各エレメントにStyleパネルで48ピクセルの上マージンも付けています。

コントロールバーと点状のドラッグハンドル付きでホバーされたButtonエレメント。Section、Row、Columnのバーの下にあり、サービス紹介テキストにはバーなし

ドロップできる場所

エレメントは、同じカラム内の2つのエレメントの間、別のカラム、別のセクションのいずれにも置けます。タブやCollapseパネルのようなコンテナエレメントの中にも入れられます。同じページ内のDXPR Builder領域なら、どこでも受け付けます。

セクション、ロー、カラムの移動

セクションとローは、コントロールバーに同じハンドルがあります。セクションはページ内で上下にドラッグし、ローは別のセクションにドラッグします。カラムはロー内に留まります。カラムのハンドルを左右にドラッグして、隣と入れ替えます。

ドラッグなしでの移動

コントロールバーのエレメント名をクリックして選択します。Ctrl+UpキーまたはCtrl+Downキー(MacではCmdキー)を押して1つ分移動します。カラムの場合はCtrl+LeftキーまたはCtrl+Rightキーを押します。Moreメニューにも、Move UpとMove Downとして同じ移動があります。

表示内容

ドラッグ中はエレメントのコピーがポインターに付いてきて、縞模様のプレースホルダーがドロップ位置を示します。ドロップ後はエレメントが新しい場所に収まり、カラムの残りが周りで詰まります。Saveボタンのドットは、変更がまだ保存されていないことを示します。

エレメントが動かない場合

  • ドラッグしても何も動かない。 エレメント自体を押しており、ハンドルではありません。エレメント名の付いた点状グリップを押したままにします。
  • 置きたい場所が画面外にある。 ページは、ポインターがウィンドウの端に近い間だけスクロールします。ポインターを上端や下端の近くに寄せて待ちます。
  • カラムがローから出られない。 カラムはロー内での入れ替えのみです。代わりに、カラム内のエレメントを他のローにドラッグします。
  • Positioned layers内のエレメントにプレースホルダーが出ない。 それらのエレメントはキャンバス上に自由配置です。Positioned layersをご覧ください。
  • エレメントが違う場所に落ちた。 Ctrl+Zキー(MacではCmd+Zキー)を押してドロップを取り消します。

次のステップ