위치 지정 레이어 추가하기.
요소를 겹치거나 정확한 위치에 놓고 싶을 때 Positioned layers를 사용합니다. 로우와 컬럼으로는 할 수 없습니다. 원하는 위치에 각 요소를 드래그하는 캔버스가 생깁니다. 사진 위의 제목이 그 예입니다. 예제에서는 이미지 위에 흰색 open day 제목을 겹칩니다. 일반적인 나란 배치 콘텐츠에는 rows and columns가 휴대전화에서 정리하기 쉽습니다.
위치 지정 레이어 컨테이너 추가하기
- 컬럼에 마우스를 올리고 컨트롤 표시줄의 +를 클릭하거나, 빈 컬럼 가운데의 +를 클릭하여 요소 선택기를 엽니다.
- 탭 Layout에서 항목 Positioned layers를 클릭합니다.
- 먼저 설정이 열립니다. 가장 높은 레이어가 들어가도록 Height를 설정한 뒤 Save를 클릭합니다. 빈 캔버스가 나타납니다.
- 캔버스에 마우스를 올리고 컨트롤 표시줄의 +를 클릭하여 Text나 Image 같은 요소를 추가합니다. 추가한 요소마다 위치를 지정할 수 있는 레이어가 됩니다.
표시 내용
캔버스는 설정한 높이를 유지하고, 각 레이어는 놓은 위치 그대로 다른 레이어 위나 아래에 있습니다. 방문자에게는 에디터에서 보는 그대로의 구성이 표시됩니다. 위치는 캔버스 대비 비율로 저장되므로 캔버스가 좁아져도 레이어가 자리를 유지합니다. Responsive를 켜지 않으면 텍스트는 크기를 유지합니다.
위치 지정 레이어 설정하기
설정은 다음에서 엽니다. More > Settings를 Positioned layers 컨트롤 표시줄에서 엽니다.
| Setting | What it does | Default |
|---|---|---|
| Width | 캔버스 너비입니다(예: 100% 또는 600px). | 100% |
| Height | 캔버스 높이로, 픽셀 단위입니다. | 500 |
| Responsive | 캔버스 너비에 따라 캔버스 높이와 텍스트를 조절하므로 작은 화면에서도 구성의 비율이 유지됩니다. | Off |
레이어 배치하기
- Select: 레이어를 클릭합니다. 모서리와 가장자리에 핸들이 나타납니다.
- Move: 컨트롤 표시줄에서 Text나 Image 같은 이름으로 레이어를 드래그합니다. 레이어는 캔버스 안에 머뭅니다.
- Resize: 선택한 레이어의 핸들을 드래그합니다.
- Add at a spot: 캔버스의 빈 부분을 더블클릭합니다. 요소 선택기가 열리고 새 요소가 클릭한 위치에 들어갑니다.
각 레이어의 More 메뉴에는 네 가지 추가 항목이 있습니다. 100% width와 100% height는 레이어를 캔버스 가득 늘이고, Bring forward와 Send backward는 다른 레이어 위나 아래로 이동합니다.
표시되지 않는 경우
- 드래그해도 레이어가 움직이지 않습니다. 레이어는 컨트롤 표시줄의 이름 핸들로만 이동합니다. 레이어에 마우스를 올리고 해당 핸들을 드래그합니다.
- 레이어가 다른 레이어 뒤에 숨습니다. 쌓인 순서가 아래입니다. 레이어의 More 메뉴를 열고 Bring forward를 선택합니다.
- 휴대전화에서 레이어가 겹치거나 삐져나옵니다. Responsive가 꺼져 있어 캔버스 높이와 텍스트가 크기를 유지합니다. Responsive를 Positioned layers 설정에서 켭니다.
- 캔버스 안에서는 피커에 Positioned layers가 없습니다. 캔버스 안에 다른 캔버스를 넣을 수 없습니다. 새 Positioned layers 요소는 컬럼에 추가합니다.
- 어느 위치에서도 피커에 Positioned layers가 없습니다. DXPR Builder 사용자 프로필에서 빠져 있습니다. 관리자가 프로필의 Elements 아래에서 Layers를
/admin/dxpr_studio/dxpr_builder/profile경로에서 체크합니다.
다음 단계
- Sections: 캔버스 주변 영역에 배경 색상이나 이미지를 지정합니다.
- Nesting: 레이어와 로우, 컬럼을 조합하여 더 복잡한 레이아웃을 만듭니다.
- Animation tab: 각 레이어가 고유의 등장 효과와 함께 나타나게 합니다.