섹션별 스타일 옵션을 활용해 페이지에 더욱 다양한 분위기와 시각적 대비를 더하세요. 

기본적으로 페이지 섹션에는 사이트 전체 스타일이 적용되지만 개별 섹션의 스타일을 지정해 디자인, 배경, 색상 및 기타 섹션별 설정을 변경할 수 있습니다.

페이지 섹션 및 섹션 스타일은 버전 7.1에서 사용할 수 있습니다.

섹션 스타일 변경

개별 페이지 섹션의 스타일을 지정하는 방법은 다음과 같습니다.

1. 페이지 패널을 연 다음 해당 페이지에서 편집을 클릭합니다.
2. 해당 섹션 위에 마우스를 올린 다음 섹션 편집을 클릭합니다. 섹션 유형에 따라 옵션이 다릅니다.
3. 섹션별 옵션 스타일을 지정하려면 디자인을 클릭합니다. 이 탭은 서식 또는 갤러리처럼 다른 이름으로 표시될 수 있습니다. 섹션 유형에 따라 이 탭에서 앵커 링크를 만들 수 있습니다.
4. 배경 이미지, 비디오 또는 그림을 추가하려면 배경을 클릭합니다. 배경 콘텐츠는 섹션 가장자리까지 꽉 차게 표시하거나 가장자리에서 안쪽으로 여백을 두고 표시할 수 있습니다.
5. 색상 구성표를 선택하려면 색상을 클릭합니다. 색상 구성표를 변경하면 해당 구성표를 사용하는 사이트의 모든 섹션에 변경 사항이 적용됩니다.

플루이드 엔진 그리드 및 간격 사용자 지정

플루이드 엔진 섹션에서 섹션 스타일을 열면 디자인 탭에서 다음 설정을 변경할 수 있습니다.

• 그리드 높이 변경 - 행 수 를 사용하여 섹션 그리드의 행 수를 설정합니다. 이 섹션 스타일 옵션에서만 데스크톱과 모바일 레이아웃에 서로 다른 설정을 적용할 수 있습니다. 다만 최소 행 수는 추가한 블록 수와 배치 방식에 따라서도 달라집니다. 섹션 오른쪽 하단의 파란색 화살표 아이콘을 클릭하고 드래그하여 페이지에서 직접 높이를 변경할 수도 있습니다.
• 블록 간격 조정 - 간격을 사용하여 그리드 내 블록 사이의 여백을 설정합니다. 간격 없음이나 사전 설정된 간격을 선택하거나 ...을 클릭하여 세로 및 가로 간격을 사용자 지정할 수 있습니다.
• 섹션 패딩 추가 및 사용자 지정 - 콘텐츠의 높이와 정렬을 더 세밀하게 조정하려면 화면 채우기를 활성화합니다. 섹션 콘텐츠 주위에 패딩을 두지 않으려면 비활성화 상태로 둡니다. 이 옵션은 화면 채우기가 활성화된 경우에만 표시됩니다.
  • 섹션 그리드 외부에 패딩 추가 - 높이에서 작음, 중간, 큼 중 하나를 선택하거나 ...을 클릭해 사용자 지정 높이를 설정합니다.
  • 추가 높이 패딩이 표시되는 위치 설정 - 정렬에서 콘텐츠를 상단에 맞추면 콘텐츠 아래에 패딩이 추가됩니다. 콘텐츠를 가운데에 정렬하면 콘텐츠 위아래에 패딩이 추가됩니다. 콘텐츠를 하단에 정렬하면 콘텐츠 위쪽에 패딩이 추가됩니다.

클래식 에디터 높이 및 간격 사용자 지정

클래식 에디터 섹션에서 섹션 스타일을 열면 디자인 탭에서 다음 설정을 변경할 수 있습니다.

• 섹션 높이 변경 - 섹션 높이를 사용하여 페이지에 표시되는 섹션의 높이를 조정합니다. 콘텐츠가 많은 섹션은 설정한 높이보다 더 높게 표시될 수 있습니다. 섹션 높이는 섹션 콘텐츠 위아래의 패딩 양에도 영향을 미칩니다.
• 콘텐츠 너비 변경 - 콘텐츠 너비를 사용하여 섹션 너비 중 콘텐츠가 차지하는 비율을 설정합니다.
• 섹션 콘텐츠와 섹션 테두리의 정렬 방식 변경 - 콘텐츠 정렬을 사용하여 콘텐츠가 섹션 테두리에 정렬되는 방식을 설정합니다.

섹션 구분선 추가

블록 섹션, 자동 레이아웃, 갤러리 섹션 하단에 고유한 구분선을 추가할 수 있습니다. 사이트의 첫 번째 섹션 구분선을 만든 후에는 해당 구분선의 설정이 이후에 만드는 구분선에도 적용됩니다. 섹션 구분선을 서로 다르게 설정하려면 각 구분선을 만들 때 직접 사용자 지정하세요.

섹션 구분선을 추가하는 방법은 다음과 같습니다.

1. 페이지 패널을 연 다음 페이지에서 편집을 클릭합니다.
2. 해당 섹션 위에 마우스를 올린 다음 섹션 편집을 클릭합니다.
3. 디자인에서 디바이더 토글을 켭니다.
4. 표시되는 설정을 사용하여 구분선을 사용자 지정합니다.

섹션 구분선 사용자 지정

디바이더 토글을 켠 후 다음 옵션을 사용하여 디바이더의 스타일을 지정합니다.

• 모양 - 셔플 아이콘을 클릭해 설정을 무작위로 변경하거나, 설정 아이콘을 클릭해 모양을 선택하고 설정을 직접 변경합니다.
• 테두리 - 구분선에 사용할 선으로 실선 테두리나 점선 테두리, 테두리 없음을 선택합니다.
• 색상 - 사이트 전체 팔레트에서 테두리 선의 색상을 선택합니다.
• 두께 - 작음, 중간, 큼 옵션을 사용해 테두리 두께를 설정합니다. 구분선 두께를 직접 변경하려면 ...을 클릭합니다.

구분선이 없는 섹션

페이지에 스토어나 블로그 섹션과 같이 섹션 구분선을 지원하지 않는 섹션이 있다면 빈 블록 섹션을 사용해 섹션 구분선과 같은 모양을 만들 수 있습니다.

이 구분선은 기본 제공 섹션 구분선과 완전히 같은 방식으로 위쪽 섹션과 상호작용하지 않는다는 점에 유의하세요. 예를 들어 섹션에 배경 이미지가 있는 경우 구분선은 이미지에 바로 맞닿지 않고 이미지 아래에 표시됩니다.

컬렉션 섹션 아래에 섹션 구분선을 추가하는 방법은 다음과 같습니다.

1. 페이지 패널을 연 다음 구분선이 없는 섹션이 포함된 페이지에서 편집을 클릭합니다.
2. 해당 섹션 아래에서 섹션 추가를 클릭합니다.
3. + 빈 항목 추가를 클릭한 다음 섹션을 클릭합니다.
4. 새 섹션 위에 마우스를 올린 다음 섹션 편집을 클릭합니다.
5. 높이를 작음으로 설정하고 구분선 토글을 켭니다.
6. 구분선의 스타일을 원하는 대로 지정합니다. 이 섹션에는 블록을 추가하면 안 됩니다.

섹션 스타일로 무엇을 변경할 수 있습니까?

섹션 스타일로 변경할 수 있는 사항은 섹션 유형에 따라 다릅니다.

블록 섹션 및 자동 레이아웃

블록 섹션(플루이드 엔진 또는 클래식 에디터)과 자동 레이아웃에서는 배경과 색상뿐만 아니라 섹션별 디자인 옵션도 사용자 지정할 수 있습니다. 섹션별 스타일 자세히 알아보기

• 플루이드 엔진
• 클래식 에디터
• 자동 레이아웃

컬렉션 및 갤러리 섹션

블로그 및 스토어 섹션과 같은 컬렉션 섹션과 갤러리 섹션에서는 색상과 섹션별 디자인 옵션을 사용자 지정할 수 있습니다. 섹션별 스타일 자세히 알아보기

• 코스 섹션
• 블로그 섹션
• 캘린더 섹션
• 갤러리 섹션
• 포트폴리오 섹션
• 섹션 저장하기
• 비디오 섹션