섹션 복사하기, 섹션 붙여넣기

메뉴(페이지), 위젯에 이어 섹션도 복제가 가능합니다.

다음 샘플 사이트에 접속해보시면 REVIEW 및 COMMUNITY 메뉴 상단 섹션이 모두 같은 것을 보실 수 있습니다. 

메뉴별로 반복적으로 사용하는 디자인이 있는 경우 섹션 복제 기능을 활용해보세요. 

사이트를 빠르고 효율적으로 제작하면서 디자인에 일관성 및 통일성을 줄 수도 있습니다.

섹션 복제 방법

1. 디자인 모드에 접속합니다.

2. 복사하려는 섹션에 마우스 오른쪽 버튼을 클릭합니다.

   *주의 : 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.

   

3. 보조 메뉴가 나타나면 섹션 복사를 클릭합니다.

   
4. (선택 사항) 붙여넣기 할 메뉴로 이동합니다.
5. 다시 마우스 오른쪽 버튼을 클릭해 섹션 보조 메뉴를 열어주세요.

6. 다음 그림처럼 섹션 붙여넣기가 활성화 되었다면 클릭합니다.

   
7. 같은 섹션이 복제된 것을 확인할 수 있습니다.

섹션에 동영상 배경 넣기

섹션 배경에 동영상을 넣는 기능은 두가지로 나뉩니다.

1. 비주얼 섹션에 동영상 넣기

- 디자인모드 좌측 상단 섹션추가를 누릅니다.
- 비주얼의 2번째 항목 동영상 섹션을 클릭합니다.

추가된 비주얼 동영상 섹션에서 우측 마우스를 통해 설정에 접속 → 배경 동영상에 삽입할 동영상 URL을 입력합니다.

2. 섹션에 동영상 배경 넣기

섹션에서 우측 마우스를 통해 섹션 설정에 접속합니다.

섹션 설정에서 [동영상]을 클릭하면 YouTube 동영상 URL을 입력하는 창이 나옵니다.

** 동영상 위젯에서는 YouTube와 Vimeo 동영상 URL 등록이 가능하지만 섹션 배경은 YouTube만 지원되는 점 참고바랍니다.

빈 섹션 추가하기

빈 섹션을 추가할 수 있습니다. 

빈 섹션에 위젯을 추가하고 배경색 또는 배경 이미지를 추가하여 섹션을 디자인 할 수 있습니다. 

섹션(구획, 구역)에 대한 상세한 도움말을 다음 문서를 확인해보세요.

빈 섹션 추가 방법

1. 디자인 모드에 접속합니다.

2. 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
   *참조 : 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.

   

3. 섹션 보조 메뉴가 나타납니다.

   
4. 빈 섹션 추가를 클릭합니다.

5. 빈 섹션이 추가됩니다.

   

섹션 삭제하기

섹션을 삭제하려면 다음 절차에 따라 삭제할 수 있습니다.

섹션 삭제 방법

1. 디자인 모드에 접속합니다.

2. 삭제하려는 섹션에 마우스 오른쪽 버튼을 클릭합니다.

   *주의 : 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.

   

3. 보조 메뉴가 나타나면 섹션 삭제를 클릭합니다.
   

   *주의 : 섹션이 페이지 최상단 또는 최하단에 있는 경우 한 방향으로만 이동 가능합니다.

   
   

섹션 사이드 나누기 (사이드 섹션, 섹션 사이드 고정)

섹션을 나누어 사이드 영역을 만들 수 있습니다. 섹션 사이드에는 종종 2차 메뉴를 삽입하곤 하지만, 광고 배너, 페이지 타이틀 등 다양하게 응용해 사용할 수 있습니다.

이 도움말에서는 섹션을 둘로 나누어, 왼쪽 또는 오른쪽에 섹션 사이드 영역을 추가하는 방법을 설명합니다.

설정방법

1. 디자인 모드에 접속합니다. 
2. 사이드 영역을 추가하려는 섹션 내, 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
3. 컨텍스트 메뉴가 나타나면 섹션 설정을 클릭합니다.
4. 사이드 항목에서 왼쪽 또는 오른쪽을 선택합니다.

   
   

5. 본문과 사이드 간의 간격을 설정합니다.

   
   

6. (선택 사항) 선 스타일 항목에서 섹션 본문과 섹션 사이드 사이에 세로선을 추가합니다.

   
   

   • 선두께 : 세로선의 두께를 입력합니다.
   • 선모양 : 실선, 점선, 긴점선 중 하나를 선택해 세로선 모양을 정합니다.
   • 선색 : 컬러피커를 활용해 세로선의 색상을 지정합니다.
7. (선택 사항) 섹션 사이드 고정 옵션을 선택할 수 있습니다. 해당 옵션을 활성화하면 페이지를 스크롤해도 사이드 섹션이 현재 위치에 고정됩니다.
8. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
9. 선택한 방향에 사이드 영역이 생긴 걸 확인할 수 있습니다. 이제 사이드 영역에 ⨁를 클릭해 위젯을 추가해 꾸밉니다. (예를 들어, 메뉴 리스트 위젯을 추가해 세로형 사이드 메뉴를 추가할 수도 있습니다.)
   

   참고: 사이드 영역이 정상적으로 표시되지 않는 경우 새로고침(F5)해 주세요.

섹션 고정하기 (본문)

이 옵션을 사용하면 마우스 스크롤을 통해 특정 섹션이 브라우저 화면을 벗어나더라도 상단에 고정되는 효과를 줄 수 있습니다.

설정방법

1. 디자인 모드에 접속합니다.
2. 옵션을 줄 섹션에서 위젯이 없는 공간에 마우스 오른쪽 버튼을 클릭합니다.

3. 보조 메뉴가 나타나면 섹션 설정을 클릭합니다.

   

4. 섹션 설정에서 오른쪽 하단 섹션 고정을 체크합니다.

   
5. 사이트 미리보기를 클릭해 확인 후 웹에 게시합니다.

관련 도움말: 섹션을 둘로 나누고자 하시나요?

섹션 사이드 기능을 활성화하면 다음 그림처럼 섹션의 왼쪽 또는 오른쪽에 사이드 영역을 둘 수 있습니다. 이 기능은 섹션 사이드에 서브메뉴 등을 넣어 방문자의 편리한 메뉴 이동에 도움이 될 수 있습니다.

섹션 사이드 나누기 (사이드 섹션)

섹션 반복하기

디자인 모드 섹션 반복 기능을 통해 페이지 하단에 공통적으로 표시할 내용을 지정할 수 있습니다.

설정방법

1. 새로운 빈 섹션을 추가합니다. 
2. 추가한 빈 섹션을 페이지 최하단으로 이동시킵니다. 
3. 위젯을 추가해 섹션을 디자인 합니다.
4. 디자인한 섹션에서 위젯이 없는 공간에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 섹션 반복을 클릭합니다.

   
   

6. 다른 메뉴로 이동하면 같은 섹션이 반복되는 것을 확인할 수 있습니다.

2개 이상 섹션 반복하기

섹션이 페이지 최하단에 붙어 있다면 2개 이상의 섹션도 반복시킬 수 있습니다. 위 절차를 반복하여 또 다른 섹션을 추가하고 반복 설정해 보세요.

섹션 반복을 해제하려면?

위 설정 방법 4번을 참조하여 섹션 컨텍스트 메뉴를 열어주세요. 섹션 반복이 정상적으로 설정 되었다면 다음처럼 반복 해제 메뉴가 표시됩니다. 반복 해제를 클릭해 해제 시킵니다.

특정 섹션으로 이동하도록 링크 연결이 가능한가요?

모든 섹션은 고유의 ‘섹션 ID’를 갖고 있으며, 버튼 등에 추가할 수 있는 링크 주소로 활용할 수 있습니다.

예를 들어, 방문자가 ‘섹션 ID’가 링크된 버튼을 클릭하면 아래의 애니메이션과 같이 방문자를 동일한 페이지의 다른 섹션으로 이동시킬 수 있으며, 필요에 따라 다른 페이지의 특정 섹션으로 이동시키는 것도 가능합니다.

이 도움말을 통해 버튼을 클릭하면 특정 섹션으로 이동시키는 앵커 링크를 만드는 방법을 배워보세요.

설정방법

동일한 페이지의 특정 섹션에 앵커 링크 걸기

다른 페이지의 특정 섹션에 앵커 링크 걸기

컬러피커 활용하기 (색상값, 색상 투명도 조절)

컬러피커의 투명도 조절 슬라이더를 사용해 색상을 투명하게 처리할 수 있습니다. 투명 색상은 색상 변경 가능한 옵션이 있는 모든 위젯(텍스트 편집모드 포함), 섹션에 적용할 수 있습니다.

투명도 조절방법

1. 디자인 모드에 접속합니다.
2. 오른쪽 상단의 공통 디자인 설정  아이콘을 클릭합니다.
3. 본문 항목에서 브랜드/링크색의 오른쪽 끝 원을 클릭해 컬러피커를 켤 수 있습니다.
   

   참고: 색상 변경이 가능한 여러 위젯, 섹션, 설정 옵션에서 컬러피커를 켤 수 있습니다.

   
   

4. 마우스로 원하는 색상을 선택하고, 투명도 슬라이더를 클릭해 좌우로 이동합니다.

   
   

5. 색상 값이 RGBA 형식으로 바뀌며, 색상이 투명하게 처리됩니다.
6. 색상 값을 복사해, 색상 옵션에 붙여넣어 사용할 수 있습니다.

애니메이션 효과 적용하기

위젯마다 페이드인, 날아오기, 회전하기, 뒤집기 등 애니메이션 효과를 추가할 수 있습니다. 적절히 활용하면 심미성을 높일 뿐더러 주목도를 높이는 데도 도움이 됩니다.

적용방법

위젯에 애니메이션 효과를 적용하는 방법을 두 가지가 있습니다.

방법2: 위젯 별로 애니메이션 효과 적용하기