섹션은 위젯보다 더 상위 개념입니다. 

똑디에서는 페이지(메뉴) 안에 섹션이 있고 섹션 안에 위젯이 있는 구조로 이루어져 있습니다. 

아래 예시 이미지처럼 페이지 내의 구역을 섹션으로 구분하여부분적으로 다른 분위기를 연출할 수 있습니다.

섹션 추가하기

비주얼 섹션 또는 미리 구성된 섹션 추가

1. 왼쪽 상단의 툴바에서 섹션 추가 버튼 을 누릅니다.
2. 원하는 섹션 유형의 미리보기 이미지를 클릭합니다.
3. 섹션이 페이지의 마지막에 추가됩니다.

컨텐츠, 구성원, 연락 분류에서는 자주 사용하는 레이아웃으로 미리 구성된 섹션을 추가할 수 있습 니다.

빈 섹션 추가 및 섹션 이동

위젯이 하나도 없는 빈 섹션을 추가하거나 섹션을 이동하고자 할 땐 섹션의 영역에서 마우스 오른쪽 버튼을 누릅니다. 

(위젯의 영역이 우선으로 인식되므로 위젯이 없는 가장자리 영역에서 하세요)

위로 이동하거나 아래로 이동하면 섹션 단위로 한칸씩 이동됩니다. 

상단보다 높게 이동되거나 하단보다 낮은 위치로 이동될 수는 없습니다.

섹션도 위젯처럼 복사 및 붙여넣기가 가능합니다. 반복된 작업을 크게 줄일 수 있습니다.

섹션 설정

섹션의 배경색, 배경이미지, 간격 및 각종 효과를 섹션 설정을 통해 제어할 수 있습니다.

• 배경 이미지/동영상 설정방법: 섹션의 상단 회색 부분에 마우스 커서를 올리면 이미지 찾기 버튼으로 이미지를 업로드하거나 YouTube영상을 배경으로 설정할 수 있습니다.
• 배경-이미지: 올려진 배경 이미지를 표시하는 방법을 선택합니다. 9칸으로 구성된 네모난 버튼은 이미지가 표시되는 기준위치를 설정합니다.
• 배경-배경색: 배경색을 지정합니다. 업로드 된 이미지가 있는 경우 이미지 위에 겹쳐 보이기 때문에 이미지와 함께 사용하려면 투명도를 조정하세요.
• 배경-텍스트: 섹션에 표시되는 기본 텍스트 색상을 설정합니다. 이 값을 비워두면 공통 디자인 설정 의 텍스트 색상을 따릅니다.
• 흑백 이미지: 업로드된 배경 이미지를 흑백으로 처리합니다.
• 배경 이미지 고정: 스크롤을 하더라도 배경이 고정된 위치에 표시됩니다.
• 마우스 포인터 움직임: 마우스 포인터의 움직임에 따라 배경 이미지가 움직입니다.
• 간격-상하여백, 좌우여백: 섹션의 안쪽 여백을 설정합니다.
• 그리드 간격: 기본 그리드 간격 옵션을 해제하고 그리드 상하 및 좌우 간격을 조정하여 공통 디자인 설정의 그리드 간격을 따르지 않고 해당 섹션에만 위젯간 간격을 조정할 수 있습니다.
• 가로 100% 확장: 섹션의 본문영역을 브라우저 크기만큼 확장합니다.
• 사이드: 좌측이나 우측에 사이드 메뉴를 삽입하려면 분할된 모양의 아이콘을 선택합니다. 사이드 영역의 폭과 사이드 영역과 본문 영역간의 간격을 조정할 수 있습니다.

비주얼 섹션

슬라이드 방식으로 동작하는 비주얼 섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보를 알리는데 특화되어 있습니다.

한 개의 슬라이드만 적용하면 슬라이드가 동작하지 않습니다. 

Slide, Fade 등 다양한 전환효과를 부여할 수 있으나 하나의 슬라이드만 있으면 이러한 전환효과가 동작하지 않습니다.

비주얼 섹션의 배경으로 사용하기 좋은 이미지

비주얼 섹션은 높이 조정이 가능하지만 항상 같은 비율로 이미지를 표시하지 않습니다. 

배경 이미지는 영역에 최대한 가득차서 빈 공간이 생기지 않도록 표시됩니다.

사용자 기기의 화면 크기는 매우 다양하고 비주얼 섹션에 사용한 이미지는 모바일에서도 그대로 사용됩니다. 

따라서 이미지에 텍 스트가 포함되거나 특정한 인물 또는 사물에 포커스가 맞춰진 사진은 다양한 기기에서 잘리는 부분이 있을 수 있습니다.(아래 이미지 참고)

• 텍스트는 비주얼 섹션에서 텍스트를 입력하여 표현합니다.
• 풍경, 패턴, 특정 사물에 포커스가 맞춰지지 않은 이미지를 선택합니다.

팁: 이미지의 비율을 유지하여 모든 기기에서 표현하고 싶다면 이미지 위젯이나 갤러리 위젯을 이용해 보세요.