요소 패널 사용법: 검색·접기·삽입·잠금 배지

페이지를 만들다 보면 "버튼은 어디 있지?", "이 요소는 어느 자리에 들어가지?" 하고 요소를 찾느라 시간을 쓰게 됩니다. 에디터의 요소 패널은 페이지에 넣을 수 있는 요소를 한곳에 모아 둔 화면입니다. 이 글에서는 패널을 여는 방법, 요소를 페이지에 넣는 두 가지 방법(클릭과 드래그), 검색과 카테고리 접기, 잠긴 요소가 보이는 방식을 순서대로 안내합니다.

1. 요소 패널은 어디에 있나요

에디터 왼쪽에 세로로 놓인 아이콘 줄(레일)에서 + 모양 아이콘(요소 추가)을 누르면 왼쪽에 "요소" 패널이 열립니다. 다시 누르거나 패널 오른쪽 위의 닫기(×) 버튼을 누르면 닫힙니다. 캔버스(페이지 화면)를 누르면 패널이 자동으로 닫히니 참고해 주세요.

패널 맨 위에는 "요소 검색..." 입력창이 있고, 그 아래에 요소가 카테고리별로 3열 아이콘 목록으로 나열됩니다. 현재 카테고리는 레이아웃, 텍스트, 미디어, 인터랙티브, 콘텐츠, 커머스, 강의, 기타, 캠페인, 자가진단 결과 순서입니다.

2. 요소를 페이지에 넣는 방법

클릭해서 넣기

요소 아이콘을 누르면 페이지에 들어갑니다. 위치는 선택 상태에 따라 정해집니다.

• 캔버스에서 섹션의 빈 곳이나 박스를 눌러 선택해 둔 채 패널을 열고 요소를 누르면, 선택한 섹션의 맨 아래에 들어갑니다. 선택한 것이 박스(칸)라면 그 박스 안쪽 맨 아래에 들어갑니다.
• 아무것도 선택하지 않고 누르면 페이지의 첫 번째 섹션 맨 아래에 들어갑니다.

요소 종류에 따라 반응이 조금 다릅니다. 구분선이나 이미지처럼 바로 들어가는 요소도 있고, 먼저 창이 열리는 요소도 있습니다. 제목, 소제목, 텍스트, 리스트, 인용구, 버튼, 뱃지는 "제목 추가"처럼 내용을 입력하는 창이 열리고, 입력한 내용이 아래 미리보기에 바로 보입니다. 삽입을 누르면 페이지에 들어가고 취소를 누르면 닫힙니다. 리스트는 줄마다 한 항목으로 입력합니다. 아이콘은 "아이콘 선택" 창, 임베드는 URL 또는 iframe 코드를 입력하는 "임베드 추가" 창이 열립니다. 이미지는 기본 이미지가 들어갑니다.

끌어다 놓기

마우스로 요소 아이콘을 끌어 캔버스 위로 가져가면 요소 이름표와 보라색 선이 나타나 놓을 위치를 보여 줍니다. 원하는 자리에서 마우스를 놓으면 그 자리에 들어갑니다. 위치를 정확히 정하고 싶을 때는 드래그가 편합니다.

모든 요소를 끌 수 있는 것은 아닙니다. 아이콘 위에 마우스를 올렸을 때 나오는 설명에 "(드래그하여 삽입)"이 붙은 요소만 끌어 놓을 수 있습니다. 임베드 등은 클릭으로 넣습니다.

3. 검색과 카테고리 접기

검색창에 글자를 입력하면 요소 이름과 카테고리 이름에서 찾아 줍니다. 예를 들어 "버튼"을 입력하면 예약 버튼, 버튼, 수강 신청이 카테고리별로 나옵니다. "수강 신청"은 원래 이름이 "수강 신청 버튼"이라 함께 찾아집니다. "커머스"처럼 카테고리 이름을 입력하면 그 카테고리의 요소가 모두 나오고, 찾는 것이 없으면 "검색 결과 없음"이 표시됩니다.

카테고리 제목(이름, 선, 화살표 줄)을 누르면 그 카테고리가 접히고 다시 누르면 펼쳐집니다. 자주 쓰지 않는 카테고리를 접어 두면 필요한 요소가 한눈에 보입니다. 접어 둔 상태는 새로고침한 뒤에도 유지되는 것을 확인했습니다. 이 설정은 사용 중인 브라우저에 저장되므로 다른 브라우저나 컴퓨터에서는 따로 정해야 합니다.

4. 이렇게 활용해 보세요

• 자주 쓰는 카테고리만 펼쳐 두고 나머지는 접어서 패널을 짧게 쓸 수 있습니다.
• 요소 이름이 기억나지 않을 때는 카테고리 이름이나 일부 글자로 검색해 볼 수 있습니다.
• 넣을 위치가 중요한 요소는 드래그로, 문구만 빠르게 넣고 싶을 때는 입력 창이 열리는 클릭 방식으로 넣어 보세요.

5. 알아 두실 점

• 현재 플랜에서 쓸 수 없는 요소에는 PRO, MAX 같은 배지가 붙고 흐리게 보입니다. 눌러도 삽입되지 않고 안내 창이 열립니다. 자세한 내용은 별도 글에서 다룹니다.
• 요소를 넣은 뒤에는 상단의 저장을 눌러야 보관됩니다. 저장하지 않고 화면을 벗어나면 넣은 요소가 남지 않습니다.
• 클릭으로 넣을 때 선택해 둔 곳이 없으면 첫 번째 섹션 맨 아래로 들어갑니다. 의도한 위치가 아니면 드래그로 넣어 주세요.

요소를 넣는 방법을 익혔다면, 넣은 요소를 고르고 꾸미는 방법을 다루는 별도 글도 함께 읽어 보세요.