큐샵 고객센터
  • 📌큐샵
    • 🧑‍💻고객센터 안내
    • 🏠시작하기
      • 📝사이트 개설하기
        • 빈페이지로 시작하기
        • 템플릿으로 시작하기
        • 큐샵AI로 시작하기
      • 🚀이용요금안내
      • 💎마이베네핏
      • 🎫플랜 활성화 코드
    • 🙋고객 포럼 기능 요청하기
  • 💡큐샵 가이드
    • 🖌️상점 디자인하기
      • 에디터 기본정보
        • 섹션
        • 상단 메뉴바
        • 구조패널
        • 속성패널
        • 추가 패널
          • 섹션
          • 텍스트
          • 미디어
            • 로티 활용하기
          • 쉐이프
          • 아이콘
          • 버튼/폼
            • 구글 폼
            • 타입 폼
            • 탈리
          • 상품
          • 메뉴
          • 고급
            • 스크롤링 블록
            • 코드 블록
            • 구글 지도 블록
            • 네이버 지도 블록
            • 테이블 블록
            • 게시판 블록
            • 공지사항 블록
            • 아코디언 블록
            • RSS 피드
    • 🛠️운영관리
      • 상품
        • 상품 등록
          • 유형상품 등록하기
          • 무형상품 등록하기
        • 상품 조회/수정
        • 템플릿 관리
        • 카테고리 관리
      • 판매
        • 주문관리
        • 취소관리
        • 반품관리
      • 쇼핑 연동
        • 네이버쇼핑
      • 혜택
        • 쿠폰 관리
        • 적립금 관리
      • 리뷰
      • 문의
        • 상품문의
        • 1:1문의
      • 회원
        • 회원 관리
        • 그룹 관리
      • 메시지
        • 메시지 발신 관리
        • 발신 기본설정
        • 자동발신 설정
        • 발신 예시
      • 콘텐츠
        • 공지사항 관리
        • 입력폼 관리
          • 재피어 연동하기
        • 팝업/배너 관리
        • 게시판 관리
    • ⚙️상점설정
      • 기본정보
        • 사이트정보
        • 관리자정보
        • 주소지정보
      • 회원 가입
        • 기본 로그인
        • 소셜 로그인
          • 네이버 로그인
          • 카카오 로그인
        • 가입약관
        • 본인인증
      • 운영환경
        • 상담 설정
        • 도메인 설정
          • DNS 레코드
        • SEO 설정
          • 네이버 서치어드바이저
          • 구글 서치 콘솔
          • 다음 웹마스터 도구
          • 빙(Bing) 웹마스터 도구
      • 쇼핑환경
      • 결제수단
        • 무통장입금
        • 전자결제
          • 신청 전 확인 사항
          • 에스크로
            • 에스크로 인증마크 삽입하기
          • 토스 신청하기
          • 나이스페이 신청하기
          • KG 모빌리언스 신청하기
          • 휴대폰 결제
    • 🫂성장센터
      • 네이버 애널리틱스
      • 네이버 프리미엄 로그 분석
      • 네이버 지도
      • 구글 애널리틱스
      • 구글 애즈
      • 메타 픽셀
      • 메타 전환 API
      • 메타 도메인 인증
      • 카카오
    • ➕활용 가이드
      • 브라우저 쿠키 및 캐시 삭제하기
      • PC↔︎모바일 전용 페이지 만들기
      • 콘텐츠 고정하기
        • 섹션 고정하기
        • 블록 고정하기
        • 플로팅 콘텐츠
      • 헤더 디자인하기
      • 배경 고정하기
      • 사이트 이미지 최적 해상도
      • 쇼핑몰 운영을 위한 기본설정
      • 쇼츠 영상 업로드하기
  • 🖱️큐샵링크
    • 큐샵 링크 생성하기
    • 에디터 기본정보
      • 콘텐츠
        • 콘텐츠 요소
      • 디자인
  • 🚀큐샵 소식
    • 공지 및 뉴스
      • 공지 사항
        • 2025년 04월 25일
        • 2025년 03월 12일
        • 2025년 02월 27일
        • 2025년 02월 25일
        • 2025년 01월 31일
        • 2025년 01월 20일
        • 2024년12월27일
        • 2024년11월06일
        • 2024년11월 05일
        • 2024년09월25일
        • 2024년09월09일
        • 2024년08월16일
        • 2024년08월12일
        • 2024년08월08일
        • 2024년06월03일
        • 2024년05월13일
        • 2024년05월02일
        • 2024년04월25일
        • 2024년04월03일
      • 업데이트 소식
        • 2025년 4월
        • 2025년 3월
        • 2025년 2월
        • 2025년 1월
        • 2024년 12월
        • 2024년 11월
        • 2024년 10월
        • 2024년 9월
        • 2024년 8월
        • 2024년 7월
        • 2024년 6월
        • 2024년 5월
        • 2024년 4월
        • 2024년 3월
Powered by GitBook
On this page
  • 1. 섹션 빠른 추가
  • 1-1. 빈 섹션
  • 1-2. 게시판 섹션
  • 1-3. 상품 목록 섹션
  • 1-4. 슬라이더 섹션
  • 1-5. 탭 섹션
  • 2. 섹션형 템플릿

Was this helpful?

  1. 큐샵 가이드
  2. 상점 디자인하기
  3. 에디터 기본정보
  4. 추가 패널

섹션

섹션의 종류와 사용 방법에 대해 알아봅니다.

Previous추가 패널Next텍스트

Last updated 5 months ago

Was this helpful?

섹션은 디자인 작업의 가장 밑 바탕이 되는 영역으로, 섹션 위 다양한 블록을 추가, 배치하여 페이지 디자인을 하게 됩니다.

하나의 페이지에는 여러개의 섹션을 사용하여 디자인을 할 수 있으며 다양한 형태의 섹션을 바탕으로 페이지 주제에 맞는 디자인을 해나갈 수 있습니다.

1. 섹션 빠른 추가

페이지 디자인은 섹션에 블록을 직접 추가하고 레이아웃을 구성하여 페이지 디자인을 해나가게 됩니다.

섹션 빠른 추가에는 빈섹션, 상품목록 섹션, 슬라이더 섹션, 탭 섹션이 존재합니다. 섹션 위 블록을 추가하여 디자인을 하는 과정을 동일하며, 디자인의 방향에 따라 섹션을 다양하게 활용 할 수 있습니다.

모든 섹션의 배경색, 이미지 등 기본 설정은 오른쪽 속성패널을 통해 설정하실 수 있습니다.

1-1. 빈 섹션

가장 기본이 되는 섹션으로 빈 바탕에 원하는 블록을 사용하여 디자인을 할 수 있습니다.

1-2. 게시판 섹션

게시판 섹션은 다른 블록 추가 및 게시판 블록의 크기 설정이 불가능합니다.

게시판 섹션은 섹션 내 블록을 추가하여, 디자인을 하는 것이 아닌 섹션 자체에 게시판 블록이 적용 되어있는 형태로 구성 되어있습니다.

섹션을 추가한 후 사이트의 기본 레이아웃 및 게시글 표시 개수, 레이아웃 테마에 따라 블록과 섹션의 크기가 결정 됩니다.

1-3. 상품 목록 섹션

상품 목록 섹션은 다른 블록 추가 및 상품 목록 블록의 크기 설정이 불가능합니다.

상품 목록 섹션은 색션 내 블록을 추가하여, 디자인을 하는 것이 아닌 섹션 자체에 상품 블록이 적용이 되어있는 형태로 구성이 되어있습니다.

섹션을 추가한 후 상품 목록 설정의 상품 노출 개수 및 간격에 따라 블록과 섹션의 크기가 결정이 됩니다.

빈 섹션을 사용하여 상품 목록 블록을 직접 추가하여 사용을 할 수도 있지만, 상품 목록 섹션을 활용하여 보다 쉽게 상품 노출을 위한 페이지 디자인을 할 수 있습니다.

1-4. 슬라이더 섹션

슬라이더 섹션은 여러개의 섹션이 슬라이드가 되는 형태로 구성이 되어있습니다.

기본적인 디자인 방법 및 공통 설정 방법은 빈 섹션과 동일하며, 서로 다른 디자인의 섹션을 한 위치에서 슬라이드 시킬 수 있다는 큰 장점을 가지고 있습니다.

각각의 슬라이드 섹션을 개별적으로 디자인이 가능하기때문에 홈페이지에 사이트의 중요 정보, 이벤트 정보 등을 알리는 형태로 활용이 가능합니다.

슬라이드 섹션의 설정 방법은 퀵 메뉴를 통해 설정창을 확인할 수 있다.

항목 설명

전환 효과 다른 섹션으로 전환이 될 때 적용되는 전환 효과를 선택합니다.

  • 기본, 페이드, 플립 중 선택 가능

좌우화살표 슬라이더 좌우에 이전,다음 페이지로 이동을 위한 버튼 노출 여부를 설정합니다.


색상 좌우 화살표 버튼의 색상 및 투명도를 설정합니다.


크기 좌우 화살표의 크기를 설정합니다.


위치 좌우 화살표의 위치를 설정합니다.

  • px값이 클 수록 중앙으로 모이게 됩니다.

페이지네이션 슬라이더 가운데 아래 표시가 될 페이지네이션 버튼 노출 여부를 설정합니다.


색상 페이지네이션 버튼의 색상 및 투명도를 설정합니다.


위치 페이지네이션 버튼의 위치를 설정합니다.

  • PC값이 작을 수록 섹션 아래에 위치합니다.

자동 넘김 페이지의 자동 넘김 여부를 설정합니다.


재생 간격 슬라이드가 넘어가는 속도를 설정합니다.


마우스 올릴 시 일지 정지 마우스를 슬라이드 위에 올리면 동작이 일시 정지 됩니다.

항목 설명

+ 섹션 추가 슬라이드가 될 섹션을 추가합니다.

- 섹션 삭제 추가 된 섹션을 삭제합니다.

이름 변경 섹션의 이름을 클릭하여, 각각의 섹션의 이름을 수정할 수 있습니다.

1-5. 탭 섹션

탭 섹션은 여러개의 섹션을 탭을 통해 전환이 되는 형태로 구성이 되어있습니다.

기본적인 디자인 방법 및 공통 설정 방법은 빈 섹션과 동일하며, 한 위치에서 여러개의 섹션을 만들고 탭을 통해 각 탭의 주제에 맞는 콘텐츠를 보여주는 방법으로 활용이 가능합니다.

항목 설명

테마 탭 메뉴의 활성 테마를 선택합니다

정렬 탭 메뉴의 정렬 위치를 선택합니다.

  • 왼쪽 가운데 오른쪽 중 선택 가능

글자 탭 메뉴의 서체의 종류, 크기, 두께를 선택합니다.

색상 텍스트 탭 메뉴의 텍스트 색상 및 투명도를 설정합니다.


활성 텍스트 활성 된 탭 메뉴의 텍스트 색상 및 투명도를 설정합니다.


활성 테마 활성 된 탭 메뉴의 테마 색상 및 투명도를 설정합니다.


배경 탭 메뉴의 배경 색상 및 투명도를 설정합니다.


밑줄 탭 메뉴와 탭 영역을 구분 짓는 밑줄의 색상 및 투명도를 설정합니다.

항목 설명

+ 섹션 추가 슬라이드가 될 섹션을 추가합니다.

- 섹션 삭제 추가 된 섹션을 삭제합니다.

이름 변경 섹션의 이름을 클릭하여, 각각의 섹션의 이름을 수정할 수 있습니다.

2. 섹션형 템플릿

섹션형 템플릿은 디자인 구성이 되어있는 형태의 템플릿 입니다.

주제에 맞는 다양한 템플릿을 선택하여, 템플릿 내 이미지, 텍스트 등을 수정하는 방법으로 보다 쉽고 빠르게 페이지 디자인을 해나갈 수 있습니다.

공통 설정 및 섹션의 기본 사용방법은 빈 섹션과 동일합니다.

섹션 설정의 자세한 내용은 []를 참고 부탁드립니다.

블록 추가, 배치에 대한 자세한 내용은 []를 참고 부탁드립니다.

빈 섹션에 게시판 블록을 직접 추가하여 사용을 하실 수도 있으며, 게시판 블록 사용 방법 및 설정 방법은 [] 가이드를 참고 부탁드립니다.

게시판 및 게시글 관리는 [] 가이드를 참고 부탁드립니다.

상품 목록의 자세한 설정 방법은 []를 참고 부탁드립니다.

💡
🖌️
속성패널 가이드
게시판 블록
게시판 관리
상품 목록 가이드
블록 가이드