ポジションドレイヤーコンテナーを追加する.
エレメントの重なりや正確な位置決めが必要で、ローとカラムではできない 場合はポジションドレイヤーを使います。エレメントを好きな場所へドラッグ するキャンバスが得られます (例: 写真の上の見出し)。例では白いオープン デーの見出しを画像に重ねます。通常の横並びコンテンツは ローとカラムの方が 携帯電話でも整えやすいです。
ポジションドレイヤーコンテナーを追加する
- カラムにホバーしてコントロールバーの+をクリックするか、空カラム 中央の+をクリックしてエレメントピッカーを開きます。
- 開いてLayoutタブでPositioned layersを クリックします。
- 先に設定が開きます。最も高いレイヤーが収まるようHeightを設定し、 Saveをクリックします。空のキャンバスが現れます。
- キャンバスにホバーしてコントロールバーの+をクリックし、 エレメント (TextやImageなど) を追加します。 追加したエレメントはそれぞれ配置可能なレイヤーになります。
表示結果
キャンバスは設定した高さを保ち、各レイヤーは置いた場所に他の上下に重なって 座ります。訪問者にはエディター通りの構成が見えます。位置はキャンバスに対する 割合で保存されるので、キャンバスが狭まってもレイヤーは位置を保ちます。 テキストはResponsiveをオンにしない限りサイズを保ちます。
ポジションドレイヤーの設定
開くのはMore > Settingsからで、Positioned layersコントロールバー内です。
| 設定 | 内容 | 既定値 |
|---|---|---|
| Width | キャンバスの幅です。100%や600pxなど | 100% |
| Height | キャンバスの高さ (ピクセル) | 500 |
| Responsive | キャンバスの高さとテキストをキャンバス幅に連動させ、小画面でも構成の比率を保ちます | Off |
レイヤーの配置
- Select: レイヤーをクリックします。角と辺にハンドルが出ます。
- Move: コントロールバーの名前 (Textや Imageなど) をつかんでレイヤーをドラッグします。レイヤーは キャンバス内に留まります。
- Resize: 選択中レイヤーのハンドルをドラッグします。
- Add at a spot: キャンバスの空き部分をダブルクリックします。 エレメントピッカーが開き、新しいエレメントがクリック位置に付きます。
各レイヤーのMoreメニューには4つの追加項目があります。 100% widthと100% heightはレイヤーをキャンバス いっぱいに伸ばします。Bring forwardとSend backwardは 他のレイヤーの上下へ移動します。
表示されない場合
- ドラッグしてもレイヤーが動きません。 レイヤーはコントロール バーの名前付きハンドルでしか動きません。レイヤーにホバーしてそのハンドルを ドラッグします。
- レイヤーが別のレイヤーの後ろに隠れます。 積み重ねの下の方にいます。 レイヤーのMoreメニューを開いてBring forwardを 選びます。
- 携帯電話でレイヤーが重なったりはみ出したりします。 Responsiveがオフなので、キャンバスの高さとテキストがサイズを 保っています。Positioned layers設定でResponsiveを オンにします。
- キャンバス内ではPositioned layersがピッカーにありません。 キャンバスはキャンバスを持てません。新しいPositioned layers エレメントは代わりにカラムに追加します。
- Positioned layersがピッカーのどこにもありません。
DXPR Builderユーザープロファイルに含まれていません。管理者がLayersを
プロファイルのElements下でチェックします (
/admin/dxpr_studio/dxpr_builder/profile)。