Studio 에디터: 라이트박스 사용하기

5 분 분량
라이트박스는 필요에 따라 사용자 지정할 수 있는 팝업입니다. 팝업 창을 디자인하고 원하는 요소를 추가한 후 이를 사이트 방문자에게 표시할 시점을 선택하세요.
텍스트, 버튼 또는 이미지와 같은 요소를 링크해 클릭 시 라이트박스가 열리도록 설정할 수도 있습니다. 이는 시간에 민감한 정보, 판매 또는 프로모션에 대한 노출을 높일 수 있는 좋은 방법입니다.
고객이 보유한 뉴스레터의 구독자 수를 늘리는 데 사용되는 라이트박스의 예
다음 지침을 참고하세요.

라이트박스 추가하기

사이트에 라이트박스 팝업을 추가해 방문자가 볼 수 있는 흥미로운 공지사항을 설정할 수 있습니다.

라이트박스를 추가하려면:

  1. 에디터 왼쪽에서 요소 추가를 클릭합니다.
  2. 레이아웃 도구를 클릭합니다.
  3. 라이트박스를 클릭합니다.
  4. 추가할 라이트박스를 선택합니다. 

라이트박스 사용자 지정하기

사이트의 나머지 부분과 어울릴 수 있도록 라이트박스를 사용자 지정하세요. 필요한 요소를 추가한 후 배경 색상을 변경하고 투명도를 설정할 수 있습니다.

라이트박스를 사용자 지정하려면:

  1. 에디터 왼쪽에서 페이지 아이콘을 클릭합니다.
  2. 라이트박스 아래에서 관련 라이트 박스를 선택합니다.
  3. 에디터에서 라이트박스를 클릭합니다.
  4. 라이트박스 사용자 지정 방법을 선택합니다.
    • 요소 추가하기:  
      1. 에디터 왼쪽에서 요소 추가를 클릭합니다.
      2. 해당 요소를 끌어다 놓습니다. 
    • 배경 디자인하기: 
      1. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
      2. 디자인 섹션으로 스크롤합니다.
      3. 배경 아래에서 색상을 선택하고 배경 투명도를 설정합니다.
  5. 준비가 되면, 하단에서 완료를 클릭해 편집 모드를 종료합니다. 
라이트박스 편집 모드, 속성에서 배경 색상을 선택하는 스크린샷
다음 단계:
사이트 미리보기를 통해 라이트박스가 작동하는지 확인하세요.

라이트박스 트리거 설정하기

라이트박스가 표시되는 방법 및 시기를 선택하세요. 특정 사이트 페이지에 자동으로 표시되도록 설정하거나 요소(예: 텍스트, 이미지)에 링크할 수 있습니다.또한, 방문자가 라이트박스를 확인한 후 닫는 방식을 결정할 수도 있습니다.
참고:
(여러 페이지에 표시되도록 설정된 경우) 라이트박스는 방문자당 한 번, 방문자가 보는 첫 번째 관련 페이지에 표시됩니다.

트리거를 설정하려면:

  1. 에디터 왼쪽에서 페이지 아이콘을 클릭합니다.
  2. 라이트박스 아래에서 관련 라이트 박스를 선택합니다.
  3. 캔버스에서 라이트박스를 클릭합니다.
  4. 라이트박스 설정을 클릭합니다.
  5. 라이트박스 자동 표시 아래에서 해당 옵션을 선택합니다.
    • ON: 방문자가 해당 페이지에 접속 시 라이트박스가 자동으로 표시됩니다.
      1. 표시 페이지 아래를 클릭해 해당 페이지를 선택합니다.
      2. 지연 시간 슬라이더를 끌어 페이지가 로딩된 후 라이트박스가 표시되는 데 소요되는 시간(초)을 설정합니다.   
    • OFF: 사이트 방문자가 페이지 접속 시 라이트박스가 표시되지 않습니다. 대신, 선택한 버튼 또는 링크에 의해 트리거됩니다. 
  6. 라이트박스 닫기 방식 아래에서 관련 버튼을 활성화합니다.
    참고: 'X' 아이콘 및 '닫기' 버튼을 모두 비활성할 경우, 방문자는 라이트박스 외부를 클릭해 라이트박스를 닫을 수 있습니다.
  7. 준비가 되면, 완료를 클릭해 편집 모드를 종료합니다.  
트리거 패널이 라이트박스 옆 열려있으며, 홈페이지에서 자동으로 열리도록 설정되어 있습니다

라이트박스 일정 설정하기

사이트 방문자에게 라이트박스가 표시되는 시점을 선택하세요. 예를 들어, 기간 한정 혜택을 홍보하는 경우 라이트박스가 해당 기간에만 표시되도록 설정할 수 있습니다.

라이트박스 일정을 설정하려면:

  1. 에디터 왼쪽에서 페이지 아이콘을 클릭합니다.
  2. 라이트박스 아래에서 관련 라이트 박스를 선택합니다.
  3. 캔버스에서 라이트박스를 클릭합니다.
  4. 라이트박스 설정을 클릭합니다.
  5. 라이트박스 예약으로 스크롤한 후 + 예약 설정을 클릭합니다.
  6. 시작 날짜 및 시간과 종료 날짜 및 시간을 설정합니다.
    도움말: 올바른 시간대가 설정되어 있는지 확인하세요. 그렇지 않은 경우, 변경할 수 있습니다. 
Studio 에디터에서 라이트박스 일정 설정하기

라이트박스에 요소 연결하기

사이트의 요소를 연결해 라이트박스가 열리도록 설정할 경우, 방문자가 공지사항을 놓치지 않게 됩니다. 텍스트, 이미지, 동영상 및 버튼과 같은 요소를 링크할 수 있습니다. 

라이트박스에 요소를 링크하려면:

  1. 에디터에서 해당 요소를 클릭합니다.
  2. 링크 아이콘을 클릭합니다. 
  3. 왼쪽에서 라이트박스 를 선택합니다.
  4. 라이트박스를 선택하세요 드롭다운 메뉴를 클릭해 해당 라이트박스를 선택합니다.
  5. 완료를 클릭합니다.
방문자가 클릭 시 라이트박스를 열도록 텍스트 마스크 요소 연결하기

라이트박스 관리하기

사이트의 라이트박스를 관리해 에디터에서 정리된 상태를 유지할 수 있도록 하세요.쉽게 찾을 수 있도록 이름을 변경하고 복제해 시간을 절약, 오래된 라이트박스를 삭제할 수 있습니다.

라이트박스를 관리하려면:

  1. 에디터 왼쪽에서 페이지 아이콘을 클릭합니다.
  2. 해당 라이트박스 옆 추가 작업 아이콘을 클릭합니다.
  3. 다음에 수행할 작업을 선택합니다.
사용 가능한 관리 옵션을 보여주는 페이지 패널의 라이트박스

도움이 되었나요?