섹션 가장자리까지 이어지게 하기.
섹션 콘텐츠를 가장자리까지 이어지게 하거나, 배경은 창을 채우면서 가운데 상자에 담아 둘 수 있습니다. 섹션의 토글 하나로 정합니다. Full width입니다. 예제에서는 세 컬럼의 회색 섹션을 만든 뒤 Full width를 켜서 컬럼을 늘이고, 색상과 사진 채우기는 Backgrounds를 참조합니다.
동영상에서는 세 컬럼의 회색 섹션을 만든 뒤 콘텐츠를 가장자리까지 이어지게 합니다.
박스형 섹션 만들기
- 빈 콘텐츠 영역에서 Add Elements를 클릭하고 Section을 Layout 탭에서 고릅니다.
- 섹션에 마우스를 올리고 More를 열어 Settings를 선택합니다.
- 다음 패널을 엽니다. Style 패널을 열고 연회색 Background를 고릅니다.
- 버튼 Save를 클릭합니다. 회색은 이미 창을 채우고 있습니다.
- 섹션에서 +를 클릭하고 Row를 고릅니다.
- 로우의 격자 아이콘을 클릭하고 동일한 컬럼 세 개 타일을 고른 뒤 Save를 클릭합니다.
- 각 컬럼에서 +를 클릭하고 Text를 Content 탭에서 고른 뒤 Heading 4와 한 줄을 입력하고 Save를 클릭합니다.
세 컬럼은 회색 띠 위 가운데 상자에 있습니다.
Full width 켜기
- 섹션에서 More를 열고 Settings를 선택합니다.
- 패널 General에서 항목 Full width를 켭니다.
- 버튼 Save를 클릭합니다.
- DXPR Builder 도구 모음에서 Save를 클릭합니다.
- 도구 모음의 눈 아이콘인 보기 메뉴를 열고 Preview를 선택합니다.
표시 내용
회색 띠는 전과 같아 보입니다. 바뀐 것은 콘텐츠 상자뿐입니다. 첫 번째 컬럼은 섹션 왼쪽 가장자리에서 시작하고 마지막 컬럼은 오른쪽 가장자리에서 끝납니다.
모든 섹션은 두 부분으로 이루어집니다. 배경을 담는 바깥 요소와 로우를 담는 안쪽 상자입니다. Full width는 안쪽 상자만 변경합니다. 끄면 최대 너비로 가운데 정렬되고, 켜면 섹션 가장자리까지 늘어납니다.
설정
섹션의 General 패널에는 레이아웃 토글이 세 개 있으며, 모두 기본적으로 꺼져 있습니다.
| Setting | What it does |
|---|---|
| Full width | 로우가 가운데 상자 대신 섹션을 가장자리까지 채웁니다. |
| 100% height | 섹션이 최소한 브라우저 창만큼 높습니다. |
| Vertical centering | 로우가 섹션의 세로 가운데에 배치됩니다. |
로우에는 자체 너비 설정이 없습니다. 섹션이 정합니다.
두 가지 패턴
- Edge-to-edge background, boxed text: 일반적인 히로입니다. Full width를 끄고 Style 또는 Background effects 패널에서 배경을 지정합니다.
- Edge-to-edge content: 카드나 사진 띠입니다. Full width를 켜고 텍스트가 창 가장자리에 너무 가까우면 컬럼에 Padding을 줍니다.
변경이 보이지 않는 경우
- Full width를 켜도 아무것도 바뀌지 않습니다. 휴대전화 같은 좁은 화면에서는 박스형도 이미 너비를 채웁니다. 브라우저 창을 넓히고 다시 봅니다.
- 배경이 창 가장자리까지 닿지 않습니다. 테마가 페이지 콘텐츠를 박스형 영역에 배치하므로 섹션은 해당 영역만 채울 수 있습니다. 테마에서 전체 너비 페이지 레이아웃이나 영역을 선택합니다.
- 텍스트가 창 가장자리에 닿습니다. 이것이 Full width의 동작입니다. 컬럼에 Padding을 Style 패널에서 추가하거나 Full width를 끈 채로 둡니다.
다음 단계
- Fill a section with colour, a photo or a gradient에서 콘텐츠 뒤 띠를 꾸밉니다.
- Make your layout work on phones에서 작은 화면에서 컬럼 동작을 조정합니다.