속성패널
속성패널의 요소에 대해 알아보고 각 요소의 사용법을 안내합니다.
속성패널이란?
에디터 오른쪽에 위치한 속성패널을 활용하여 섹션 및 콘텐츠의 기본 디자인 속성을 설정할 수 있습니다.
속성패널의 사이트 설정이 되어있더라도 섹션과 콘텐츠 각각의 요소에 배경색, 여백, 라운드 등의 기본 속성 설정 및 애니매이션, 클릭 이벤트와 같은 고급 설정을 하실 수 있습니다.
1. 사이트
페이지에 공통으로 적용이 될 섹션의 너비, 간격 텍스트의 글꼴과 크기, 기본 배경색, 버튼 및 도형의 디자인을 설정할 수 있습니다.
설정 방법
에디터의 오른쪽 위 [사이트 전체 설정]아이콘을 클릭합니다.
오른쪽 속성 패널의 기본, 컬러/폰트, 레이아웃 중 설정을 하려는 항목을 선택합니다.
아래 상세가이드를 참고하여 설정을 합니다.
1-1. 기본
모바일 스와이프 기능 및 플로팅 콘텐츠 기능의 사용 여부를 설정 할 수 있습니다.
모바일 스와이프 설정
모바일 기기에서 화면을 가로로 스크롤하여 페이지 이동을 할 수 있습니다.
해당 기능은 모바일 기기에서만 작동을 합니다.
플로팅 콘텐츠
사이트 오른쪽에 적용이 되어 따라 오는 플로팅 콘텐츠 설정을 할 수 있습니다. 자세한 내용은 [플로팅 콘텐츠] 가이드를 참고 부탁드립니다.
1-2. 색상/폰트
사이트에 공통으로 적용이 되는 색상 과 폰트를 설정할 수 있습니다.
자세한 내용은 아래 각 항목의 설정 방법을 참고 해주세요.
색상
사이트의 콘텐츠에 공통으로 적용이되는 배경색, 텍스트 색상 등을 설정합니다.
다양한 컬러 팔레트 중 선택하여 사용을 하실 수 있으며, 아래 표를 참고하여 위치에 맞는 컬러값을 개별적으로 수정하여 사용을 할 수 있습니다.
컬러 팔레트는 크게 글자색과 배경색의 영역으로 나뉘게 되며, 총 7가지 색상으로 나눠 지정이 가능합니다.
주요 글자 컬러
섹션 본문의 배경 색상을 지정합니다.
브랜드 배경 컬러
헤더 섹션의 배경 색상, 페이지 메뉴 블록의 글자색을 지정합니다.
강조 컬러
푸터 섹션의 배경색상, 아이콘, 버튼 블록의 색상을 지정합니다.
보조 컬러
상품목록, 상품슬라이드 블록의 할인율 표시 색상을 지정합니다.
주요 글자 컬러
페이지 메뉴 블록의 활성 상태, 라인, 도형, 텍스트 블록 및 입력폼 등의 텍스트에 대한 색상을 지정합니다.
브랜드 글자 컬러
페이지 메뉴 블록의 메인/서브 메뉴 색상을 지정합니다.
보조 글자 컬러
버튼/입력폼 등의 버튼 위에 적용이 되는 텍스트 색상과 상품 목록/슬라이드에 적용되는 “정가” 표시 색상을 지정합니다.
설정방법
디자인 에디터에 접속합니다 ( 에디터 접속하기 )
캔버스 영역을 클릭 한 후 오른쪽 속성패널의 컬러 항목을 클릭합니다.
현재 적용 된 컬러 팔래트 중 색상 설정을 원하는영역의 설정 버튼을 클릭하여 색상표를 통해 색상을 지정하시거나, 색상값을 입력하여 설정합니다.
폰트
페이지에 공통으로 적용이되는 글꼴, 크기 등을 설정합니다. 글꼴을 미리 지정하여, 페이지 디자인 시 보다 편하게 사용이 가능합니다.
기본 텍스트 블록 블록 제목1 ~ 제목4, 본문에 적용이 될 텍스트를 설정합니다.
사용자 텍스트 블록 사용자 텍스트 추가 [ + ] 버튼을 통해 글꼴 생성이 가능합니다.
기본 글꼴 이외 최대 4개까지 생성 가능
설정방법
기본 텍스트 블록
디자인 에디터에 접속합니다 ( 에디터 접속하기 )
캔버스 영역을 클릭 한 후 오른쪽 속성패널의 폰트 항목을 클릭합니다.
설정하려는 항목에 마우스를 올린 후 오른쪽 끝 [설정 아이콘]을 클릭합니다.
글꼴 및 크기, 자간 등을 설정합니다.
기본 텍스트 블록은 이름 변경 및 목록 삭제가 불가능 합니다.
사용자 글꼴
[사용자 텍스트 추가] 버튼을 클릭합니다.
추가 된 텍스트에 마우스를 올린 후 오른쪽 끝 [설정 아이콘]을 클릭합니다.
관리를 위한 이름등록을 한 후 서체 크기 자간 등을 설정합니다.
1-3. 레이아웃
섹션에 공통으로 적용이 되는 전체 너비와 격자 간격, 모양의 설정을 할 수 있습니다.
자세한 내용은 아래 각 항목의 설정 방법을 참고 해주세요.
간격
섹션에 공통으로 적용이 되는 전체 너비와 격자 간격을 조절합니다.
전체 너비에 따라 작업 영역와 여백 영역이 갖는 크기가 달라지게 되며, 격자 간격에 따라 블록 사이의 간격이 달라지게 됩니다.
특정 섹션의 간격 및 너비를 개별 설정하는것은 불가능합니다.
전체 너비 섹션의 전체 너비를 설정합니다. 800 ~ 1920px 내로 설정이 가능합니다.
격자 간격 격자 간의 간격을 설정합니다. 격자 간격이 0px일 경우 블록과 블 사이 간격이 없어지게 됩니다.
설정 방법
디자인 에디터에 접속합니다 ( 에디터 접속하기 )
캔버스 영역을 클릭 한 후 오른쪽 속성패널의 레이아웃 항목을 클릭합니다.
전체 너비 / 격자 간격의 토글을 드래그&드랍 방식으로 px값을 설정합니다.
px값을 직접 입력하여 설정을 할 수 있습니다.
격자 그리드
섹션의 격자 그리드 표시 여부를 설정할 수 있습니다.
특정 섹션의 격자 그리드 표시를 개별 설정하는것은 불가능합니다.
섹션은 가로로 총 50칸의 그리드가 존재하며 [간격] 가이드를 참고하여 그리드의 너비 및 간격 수정이 가능합니다. 기본적으로 섹션의 그리드는 블록을 드래그할 때 보이며, 격자 그리드 토글을 활성화하게 되면, 섹션 배경에 그리드가 표시 됩니다.
모양
콘텐츠 블록 중 버튼, 입력폼, 미디어의 모양을 설정할 수 있습니다.
라운딩, 원형 스타일 선택 시 사각 형태의 콘텐츠 구성은 불가능합니다.
버튼 모든버튼 모양의 라운드 설정을 합니다.
입력폼 입력폼 콘텐츠의 라운 설정을 합니다.
미디어 모든 미디어 콘텐츠의 라운 설정을 합니다.
2. 섹션
배경, 여백 등 기본 속성 설정을 섹션 마다 개별적으로 설정이 가능합니다.
각 항목의 사용안함 선택을 하면, 설정이 초기화 됩니다.
항목
설명
배경
색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.
% 조절을 통해 투명도를 설정합니다.
이미지 : 배경에 이미지를 적용합니다.
흐림 : 이미지에흐림 효과를 적용합니다
오버레이 : 이미지에 색상을 덮어씌워 표현을 합니다. %가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.
여백
패딩 값을 설정하여, 상하의 여백크기를 조절할 수 있습니다.
라운드
각 테두리의 라운딩 설정을 할 수 있습니다.
배경 이미지가 등록이 되어있을 경우 라운딩 설정은 적용 되지 않습니다.
테두리
섹션 테두리에 선을 지정합니다.
유형 : 실선과 점선을 선택합니다.
두께 : 테두리의 두께를 설정합니다.
색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.
% 조절을 통해 투명도를 설정합니다.
3. 블록
콘텐츠의 배경, 여백 등 기본설정과 애니메이션, 클릭이벤트의 고급 설정을 할 수 있습니다.
각 항목의 사용안함 선택을 하면, 설정이 초기화 됩니다.
정렬
좌우 정렬, 수평 정렬을 할 수 있습니다.
배경
색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.
% 조절을 통해 투명도를 설정합니다.
흐림 : 색상에 흐림 효과를 적용합니다 투명도 100%일 경우 흐림 효과는 적용이 되지않습니다.
이미지 : 배경에 이미지를 적용합니다.
흐림 : 이미지에 흐림 효과를 적용합니다
오버레이 : 이미지에 색상을 덮어씌워 표현을 합니다. %가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.
여백
패딩 값을 설정하여, 상하좌우의 여백크기를 조절할 수 있습니다.
라운드
콘텐츠 영역의 각 테두리의 라운딩 설정을 할 수 있습니다.
테두리
섹션 테두리에 선을 지정합니다.
유형 : 선의 표시 형태를 설정합니다.
두께 : 테두리 의 두께를 설정합니다.
색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.
% 조절을 통해 투명도를 설정합니다.
그림자
콘텐츠 뒤 그림자를 생성합니다
방향 : 그림자가 생기는 방향을 설정합니다.
x축, y축을 입력하여 지정 가능
흐림 : 그림자의 번짐 정도를 설정합니다.
크기 : 그림자의 크기를 설정합니다.
색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.
% 조절을 통해 투명도를 설정합니다.
애니메이션 (고급)
스크롤 시 적용이 되는 애니메이션 효과를 설정할 수 있습니다.
동작시간 : 애니메이션의 전환속도를 설정합니다.
방향 : 애니메이션의 전 방향을 설정합니다.
플립, 슬라이드 애니메이션만 사용 가능
클릭 이벤트 (고급)
클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 할 수 있습니다.
사용하지않음
블록 클릭 시 아무런 동작을 하지않습니다.
사이트 링크 연결
블록 클릭 시 등록한 URL로 이동을 합니다.
새창으로 열기 설정 시 새로운 창에서 연결이 된 링크의 사이트가 열리게 됩니다.
내부링크연결
사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.
페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.
SNS 공유하기
카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택할 수 있습니다.
버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.
현재 URL복사하기
블록이 적용이 된 페이지의 URL을 복사합니다.
커스텀 자바스크립트
CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.
스크립트 입력 시 <script> </script> 는 제외한 자바스크립트만 입력을 합니다.
입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.
전화 걸기
버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.
전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)
전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.
문자 보내기
버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.
전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)
전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.
이메일 보내기
버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.
페이지 상단 이동
버튼 클릭 시 페이지 상단으로 이동합니다.
헤더 숨김 시 기능이 동작하지 않습니다.
페이지 하단 이동
버튼 클릭 시 페이지 하단으로 이동합니다.
푸터 숨김 시 기능이 동작하지 않습니다.
공통 페이지 이동
로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.
Last updated
Was this helpful?