섹션
섹션의 종류와 사용 방법에 대해 알아봅니다.
섹션은 디자인 작업의 가장 밑 바탕이 되는 영역으로, 섹션 위 다양한 블록을 추가, 배치하여 페이지 디자인을 하게 됩니다.
하나의 페이지에는 여러개의 섹션을 사용하여 디자인을 할 수 있으며 다양한 형태의 섹션을 바탕으로 페이지 주제에 맞는 디자인을 해나갈 수 있습니다.
1. 섹션 빠른 추가
페이지 디자인은 섹션에 블록을 직접 추가하고 레이아웃을 구성하여 페이지 디자인을 해나가게 됩니다.
섹션 빠른 추가에는 빈섹션, 상품목록 섹션, 슬라이더 섹션, 탭 섹션이 존재합니다. 섹션 위 블록을 추가하여 디자인을 하는 과정을 동일하며, 디자인의 방향에 따라 섹션을 다양하게 활용 할 수 있습니다.
모든 섹션의 배경색, 이미지 등 기본 설정은 오른쪽 속성패널을 통해 설정하실 수 있습니다.
섹션 설정의 자세한 내용은 [속성패널 가이드]를 참고 부탁드립니다.
1-1. 빈 섹션
가장 기본이 되는 섹션으로 빈 바탕에 원하는 블록을 사용하여 디자인을 할 수 있습니다.
블록 추가, 배치에 대한 자세한 내용은 [블록 가이드]를 참고 부탁드립니다.
1-2. 상품 목록 섹션
상품 목록 섹션은 다른 블록 추가 및 상품 목록 블록의 크기 설정이 불가능합니다.
상품 목록 섹션은 색션 내 블록을 추가하여, 디자인을 하는 것이 아닌 섹션 자체에 상품 블록이 적용이 되어있는 형태로 구성이 되어있습니다.
섹션을 추가한 후 상품 목록 설정의 상품 노출 개수 및 간격에 따라 블록과 섹션의 크기가 결정이 됩니다.
빈 섹션을 사용하여 상품 목록 블록을 직접 추가하여 사용을 할 수도 있지만, 상품 목록 섹션을 활용하여 보다 쉽게 상품 노출을 위한 페이지 디자인을 할 수 있습니다.
상품 목록의 자세한 설정 방법은 [상품 목록 가이드]를 참고 부탁드립니다.
1-3. 슬라이더 섹션
슬라이더 섹션은 여러개의 섹션이 슬라이드가 되는 형태로 구성이 되어있습니다.
기본적인 디자인 방법 및 공통 설정 방법은 빈 섹션과 동일하며, 서로 다른 디자인의 섹션을 한 위치에서 슬라이드 시킬 수 있다는 큰 장점을 가지고 있습니다.
각각의 슬라이드 섹션을 개별적으로 디자인이 가능하기때문에 홈페이지에 사이트의 중요 정보, 이벤트 정보 등을 알리는 형태로 활용이 가능합니다.
슬라이드 섹션의 설정 방법은 퀵 메뉴를 통해 설정창을 확인할 수 있다.
항목 설명 |
전환 효과 다른 섹션으로 전환이 될 때 적용되는 전환 효과를 선택합니다.
|
좌우화살표 슬라이더 좌우에 이전,다음 페이지로 이동을 위한 버튼 노출 여부를 설정합니다. 색상 좌우 화살표 버튼의 색상 및 투명도를 설정합니다. 크기 좌우 화살표의 크기를 설정합니다. 위치 좌우 화살표의 위치를 설정합니다.
|
페이지네이션 슬라이더 가운데 아래 표시가 될 페이지네이션 버튼 노출 여부를 설정합니다. 색상 페이지네이션 버튼의 색상 및 투명도를 설정합니다. 위치 페이지네이션 버튼의 위치를 설정합니다.
|
자동 넘김 페이지의 자동 넘김 여부를 설정합니다. 재생 간격 슬라이드가 넘어가는 속도를 설정합니다. 마우스 올릴 시 일지 정지 마우스를 슬라이드 위에 올리면 동작이 일시 정지 됩니다. |
1-4. 탭 섹션
탭 섹션은 여러개의 섹션을 탭을 통해 전환이 되는 형태로 구성이 되어있습니다.
기본적인 디자인 방법 및 공통 설정 방법은 빈 섹션과 동일하며, 한 위치에서 여러개의 섹션을 만들고 탭을 통해 각 탭의 주제에 맞는 콘텐츠를 보여주는 방법으로 활용이 가능합니다.
항목 설명 |
테마 탭 메뉴의 활성 테마를 선택합니다 |
정렬 탭 메뉴의 정렬 위치를 선택합니다.
|
글자 탭 메뉴의 서체의 종류, 크기, 두께를 선택합니다. |
색상 텍스트 탭 메뉴의 텍스트 색상 및 투명도를 설정합니다. 활성 텍스트 활성 된 탭 메뉴의 텍스트 색상 및 투명도를 설정합니다. 활성 테마 활성 된 탭 메뉴의 테마 색상 및 투명도를 설정합니다. 배경 탭 메뉴의 배경 색상 및 투명도를 설정합니다. 밑줄 탭 메뉴와 탭 영역을 구분 짓는 밑줄의 색상 및 투명도를 설정합니다. |
2. 섹션형 템플릿
섹션형 템플릿은 디자인 구성이 되어있는 형태의 템플릿 입니다.
주제에 맞는 다양한 템플릿을 선택하여, 템플릿 내 이미지, 텍스트 등을 수정하는 방법으로 보다 쉽고 빠르게 페이지 디자인을 해나갈 수 있습니다.
공통 설정 및 섹션의 기본 사용방법은 빈 섹션과 동일합니다.
Last updated
