섹션을 끝까지 펼치기.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

섹션 내용을 한쪽 끝에서 다른 쪽 끝까지 펼치거나, 배경이 창을 채우는 동안 가운데 박스에 담아 둘 수 있습니다. 섹션의 토글 하나로 결정됩니다: Full width. 예시에서는 회색 섹션에 세 칸을 만들고 Full width(을)를 켜서 칸을 펼칩니다. 색상 및 사진 채우기에 대해서는 배경(을)를 보세요.

이 비디오는 회색 섹션에 3칸을 만든 뒤 내용을 한쪽 끝에서 다른 쪽 끝까지 펼칩니다.

박스형 섹션 만들기

  1. 다음을 클릭하세요: 빈 콘텐츠 영역의 Add Elements. Section(을)를 Layout 탭에서 고르세요.
  2. 섹션에 마우스를 올리고 More(을)를 연 뒤 Settings(을)를 고르세요.
  3. 다음 패널을 여세요: Style. 연한 회색 Background(을)를 고르세요.
  4. 다음을 클릭하세요: Save. 회색이 이미 창을 가득 채웁니다.
  5. 다음을 클릭하세요: 섹션의 +. Row(을)를 고르세요.
  6. 행의 격자 아이콘을 클릭하고 세 칸이 같은 타일을 고른 뒤 Save(을)를 클릭하세요.
  7. 각 칸에서 다음을 클릭하세요: +. Text(을)를 Content 탭에서 고르고, Heading 4 하나와 한 줄을 입력한 뒤 Save(을)를 클릭하세요.

세 칸이 이제 회색 띠 위의 가운데 박스에 놓입니다.

Full width 켜기

  1. 섹션에서 More(을)를 열고 Settings(을)를 고르세요.
  2. 다음을 켜세요: General 패널의 Full width.
  3. 다음을 클릭하세요: Save.
  4. 다음을 클릭하세요: DXPR Builder 도구 모음의 Save.
  5. 보기 메뉴(도구 모음의 눈 아이콘)를 열고 Preview(을)를 고르세요.

결과 화면

회색 띠는 이전과 같아 보입니다. 바뀐 것은 콘텐츠 박스뿐입니다. 첫 칸은 이제 섹션의 왼쪽 끝에서 시작하고 마지막 칸은 오른쪽 끝에서 끝납니다.

모든 섹션은 두 부분으로 이루어집니다. 배경을 담는 바깥 요소와 행을 담는 안쪽 박스입니다. Full width(은)는 안쪽 박스만 바꿉니다. 끄면 최대 너비로 가운데 정렬되고, 켜면 섹션 끝까지 늘어납니다.

설정

섹션의 General 패널에는 세 가지 레이아웃 토글이 있으며, 기본적으로 모두 꺼져 있습니다:

설정 기능
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(이)가 하는 일입니다. 칸의 Style 패널에서 Padding(을)를 추가하거나 Full width(을)를 끄세요.

다음 단계