섹션 추가하기.

Learn DXPR BuilderBuild pagesAdd contentLay-out

섹션은 페이지의 띠 하나입니다. 맨 위의 히로나 아래 회색 기능 띠가 그 예입니다. 각 섹션에 배경, 텍스트 색상, 여백, 높이를 지정하고 로우나 콘텐츠로 채웁니다. 섹션 추가와 설정은 이 페이지에서 설명합니다. 하나를 컬럼으로 나누려면 Rows and columns를 참조합니다.

방문자에게 보이는 클리닉 페이지: 가장자리까지 이어진 남색 섹션에 가운데 정렬된 Book your health check 제목, 같은 주 예약 안내 문구, 흰색 Book online 버튼이 있고, 아래에는 Same-week visits, Experienced GPs, Results online 세 컬럼의 연회색 섹션이 있습니다

섹션 추가하기

예제에서는 클리닉용 남색 히로 섹션을 만듭니다. 아래에는 세 컬럼의 연회색 섹션이 이어집니다.

빈 페이지에서 Add Elements를 클릭하고 Layout 탭에서 Section을 고릅니다. 기존 섹션 아래에는 그 아래의 둥근 더하기인 Add Section Below를 클릭합니다.
섹션에 마우스를 올리고 More를 열어 Settings를 선택합니다.
섹션 전체를 설정합니다. 여기서는 HTML classes 아래의 Align text center, 남색 Background, 흰색 Font color입니다. Save를 클릭합니다.
섹션의 +를 클릭하여 콘텐츠를 바로 추가하거나 Row를 추가하여 컬럼으로 나눕니다.
도구 모음에서 Save를 클릭하여 페이지를 저장합니다.

Background와 Font color는 대화상자의 Style 패널에 있습니다. 새 요소는 섹션 맨 위에 추가되므로 가장 아래 요소부터 추가합니다. 동영상에서는 제목보다 버튼을 먼저 넣습니다.

표시 내용

남색 띠가 창을 가장자리까지 채웁니다. 제목과 버튼은 가운데 정렬 상자, 즉 섹션의 내부 컨테이너 안에 머뭅니다. 회색 섹션은 바로 아래에서 시작하며, 세 기능 컬럼이 동일한 가운데 상자에 있습니다.

새 섹션에는 이미 HTML classes에 클래스 Vertical padding size 5 (py-5)가 들어 있습니다. 이 클래스는 콘텐츠 위아래에 여백을 줍니다.

섹션 설정하기

설정 대화상자에는 패널이 다섯 개 있습니다. General, Background effects, Animation, Style, Hover style입니다. Background effects는 섹션에만 있습니다.

Setting	Panel	What it does	Default
Full width	General	로우가 가운데 컨테이너 안이 아니라 가장자리까지 이어집니다.	Off
100% height	General	섹션이 최소한 브라우저 창만큼 높습니다.	Off
Vertical centering	General	자신보다 높은 섹션의 세로 가운데에 콘텐츠가 배치됩니다.	Off
HTML ID	General	앵커 이름입니다. `#name`으로 연결하면 이 섹션으로 이동합니다.	Empty
HTML classes	General	유틸리티 클래스입니다(예: Align text center 또는 안쪽 여백 크기).	Vertical padding size 5 (py-5)
Background effect	Background effects	Simple image, Fixed image, Parallax image, Gradient 또는 YouTube video	Simple image
Background, Font color	Style	섹션 뒤의 색상과 텍스트 색상입니다.	None: the theme decides

배경은 Full width 설정과 관계없이 항상 섹션 전체에 걸칩니다. 이미지 효과는 선택한 Background image를 Style 패널에서 움직입니다. Backgrounds에 각 효과가 나와 있습니다.

여백을 늘리거나 줄이려면 Vertical padding size 5 (py-5)를 더 작은 크기나 No vertical padding (py-0)으로 바꿉니다. 정확한 픽셀 지정은 Style 패널의 박스 모델을 사용합니다. 자세한 내용은 Spacing에서 설명합니다.

섹션 레시피

Section	Settings that make it
Hero	100% height와 Vertical centering을 켜고, Parallax image 효과, 제목, 버튼을 사용합니다.
Features	밝은 Background, 제목, 세 컬럼의 로우를 사용합니다.
Call to action	강한 Background, Align text center, 짧은 문구 하나와 버튼을 사용합니다.
Testimonials	밝은 Background와 세 컬럼의 로우를 사용하고, 각 컬럼에 Block quote

Design a hero section에서 첫 번째를 단계별로 만듭니다.

표시되지 않는 경우

빈 페이지에 Add Elements 버튼이 없습니다. 페이지 생성 어시스턴트가 꺼져 있어 빈 페이지에는 Choose a template만 표시됩니다. 빈 영역을 클릭하여 요소 선택기를 열거나, Enable page creation assistant를 /admin/dxpr_studio/dxpr_builder/ai_settings 경로에서 켭니다.
Add Section Below 버튼이 없습니다. 페이지에 바로 놓인 섹션에만 있으며, 컬럼이나 탭 안의 섹션에는 없습니다. 대신 컬럼의 +를 클릭합니다.
세로 가운데 정렬이 적용되지 않습니다. 섹션은 콘텐츠만큼만 높으므로 중앙에 배치할 여백이 없습니다. 100% height도 함께 켭니다.
Full width를 켜도 아무것도 바뀌지 않습니다. 배경은 이미 섹션 전체에 걸칩니다. Full width는 로우를 가장자리까지만 이동합니다. 한 컬럼에 짧은 텍스트만 있으면 변화를 알아보기 어렵습니다.
추가하지 않은 섹션이 나타났습니다. 빈 페이지에서 Row나 콘텐츠 요소를 골랐고, 모든 요소에는 주변에 섹션이 필요합니다. DXPR Builder가 대신 하나 추가했습니다. 다른 섹션처럼 설정을 엽니다.

다음 단계

Rows and columns: 섹션을 컬럼으로 나눕니다.
Backgrounds: 섹션용 패럴랙스, 그러데이션, 동영상 효과입니다.
Full-width layouts: 로우를 가장자리까지 이어야 할 때를 설명합니다.