속성패널
속성패널의 요소에 대해 알아보고 각 요소의 사용법을 안내합니다.
속성패널이란?
에디터 오른쪽에 위치한 속성패널을 활용하여 섹션 및 콘텐츠의 기본 디자인 속성을 설정할 수 있습니다.
속성패널의 사이트 설정이 되어있더라도 섹션과 콘텐츠 각각의 요소에 배경색, 여백, 라운드 등의 기본 속성 설정 및 애니매이션, 클릭 이벤트와 같은 고급 설정을 하실 수 있습니다.

1. 사이트
페이지에 공통으로 적용이 될 섹션의 너비, 간격 텍스트의 글꼴과 크기, 기본 배경색, 버튼 및 도형의 디자인을 설정할 수 있습니다.
설정 방법
에디터의 오른쪽 위 [사이트 전체 설정]아이콘을 클릭합니다.
오른쪽 속성 패널의 기본, 컬러/폰트, 레이아웃 중 설정을 하려는 항목을 선택합니다.
아래 상세가이드를 참고하여 설정을 합니다.
1-1. 기본
모바일 스와이프 기능 및 플로팅 콘텐츠 기능의 사용 여부를 설정 할 수 있습니다.

모바일 스와이프 설정
모바일 기기에서 화면을 가로로 스크롤하여 페이지 이동을 할 수 있습니다.
해당 기능은 모바일 기기에서만 작동을 합니다.
플로팅 콘텐츠
사이트 오른쪽에 적용이 되어 따라 오는 플로팅 콘텐츠 설정을 할 수 있습니다. 자세한 내용은 [플로팅 콘텐츠] 가이드를 참고 부탁드립니다.
1-2. 색상/폰트
사이트에 공통으로 적용이 되는 색상 과 폰트를 설정할 수 있습니다.
자세한 내용은 아래 각 항목의 설정 방법을 참고 해주세요.
1-3. 레이아웃
섹션에 공통으로 적용이 되는 전체 너비와 격자 간격, 모양의 설정을 할 수 있습니다.
자세한 내용은 아래 각 항목의 설정 방법을 참고 해주세요.
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?