블록 선택 및 이동

사이트 콘텐츠를 작업하다 보면 블록(또는 여러 블록)을 페이지의 다른 부분으로 이동해야 할 때가 있습니다. 이 가이드에서는 올바른 블록을 선택하고 이동하는 다양한 방법을 안내합니다.

이 비디오에서는 워드프레스 편집기에서 블록을 선택하고 이동하는 방법을 배울 수 있습니다. 블록을 클릭하거나 목록 보기를 사용해 선택하는 방법, 그리고 도구 모음의 화살표를 사용하거나 목록 보기에서 드래그해 하나 이상의 블록을 이동하는 방법을 다룹니다.

블록을 이동하기 전에 올바른 블록을 선택했는지 확인하세요. 대부분의 블록은 한 번 클릭해 선택할 수 있지만, 일부 블록은 다른 블록 안에 포함되어 있어, 이동하려는 블록을 정확히 선택하는 방법을 알아두면 좋습니다.

의도한 블록을 선택하고 있는지 확인하는 또 다른 방법은 아래 이미지에서 주황색으로 표시된 화면 하단의 브레드크럼즈를 확인하는 것입니다. 빵부스러기 흔적을 따라가듯 현재 위치를 보여준다고 해서 브레드크럼즈라고 부릅니다.

선택한 블록은 브레드크럼즈 목록의 마지막 항목입니다. 다른 블록을 선택하려면 해당 블록의 이름을 클릭하세요.

일부 블록은 다른 블록(“상위” 블록이라고 함) 안에 들어 있어, 상위 블록을 쉽게 선택할 방법이 필요합니다.

그 방법 중 하나는 일부 블록의 블록 도구 모음에 표시되는 상위 블록 선택 도구를 사용하는 것입니다.

상위 블록이 있는 블록을 클릭하면 위 이미지에서 주황색으로 표시된 것처럼 블록 도구 모음 왼쪽으로 약간 떨어진 버튼이 나타납니다. 해당 버튼을 클릭하면 상위 블록이 선택됩니다(이 경우에는 열 블록).

열 안에 텍스트가 있어 열 블록을 선택해야 하는 경우나, 버튼 블록 안에 여러 버튼이 있어 전체 버튼 블록을 선택해야 하는 경우처럼 다양한 상황에서 유용합니다.

선택한 블록을 이동하는 방법은 여러 가지가 있습니다.

블록을 이동하려면 먼저 블록을 선택하세요. 그러면 블록 위 또는 아래에 도구 모음이 바로 나타납니다. 위쪽 화살표나 아래쪽 화살표를 클릭하면 블록을 한 단계씩 위나 아래로 이동할 수 있습니다.

도구 모음의 점 6개 아이콘을 사용하면 블록을 다른 위치로 끌어서 이동할 수도 있습니다.

다음 애니메이션에서 두 가지 방법을 모두 확인할 수 있습니다.

또는 목록 보기를 사용하여 페이지에 있는 모든 블록의 전체 목록을 확인하고, 블록을 새 위치로 클릭해 끌어갈 수 있습니다.

마우스를 사용하여 블록을 원하는 위치로 끌어서 놓을 수 있습니다.

중첩된 블록은 열, 행, 스택 같은 레이아웃 블록 안에 들어 있습니다. 블록의 도구 모음에서 화살표를 클릭하면 이러한 블록을 이동할 수 있습니다.

마우스로 여러 블록을 선택한 다음 아래 데모와 같이 도구 모음의 화살표를 클릭하면 한 번에 함께 이동할 수 있습니다.

목록 보기를 사용하면 여러 블록을 한꺼번에 선택한 뒤 새 위치로 클릭해 끌어갈 수 있습니다.

1. 편집기 왼쪽 상단의 가로줄 3개 아이콘을 클릭해 목록 보기를 엽니다.
2. 첫 번째 블록을 클릭하세요.
3. 키보드에서 Shift 키를 누른 채 마지막 블록을 클릭하세요. 그러면 첫 번째 블록과 마지막 블록 사이의 모든 블록이 선택됩니다.
4. 블록을 클릭해 원하는 위치로 끌어가세요.

블록을 아래로 쌓는 대신 나란히 배치하려면 먼저 열 블록을 삽입하세요. 그런 다음 각 열 안에 원하는 블록을 삽입할 수 있습니다.

기존 콘텐츠를 열 안에 배치하려면 먼저 열 블록을 삽입한 다음 목록 보기를 사용해 블록을 클릭해 열로 끌어가세요.

워드프레스 에이전트는 페이지 콘텐츠의 구조와 흐름을 검토하고 개선하는 데 도움을 줄 수 있습니다. 다음은 복사해 사용할 수 있는 프롬프트 예시입니다.

• “이 페이지를 검토하고 섹션의 더 나은 순서를 제안해 주세요.”
• “이 글의 구조가 사용법 가이드로 적합한지 확인해 주세요.”
• “포트폴리오 홈페이지에서 어떤 콘텐츠가 먼저 와야 하나요?”
• “가독성을 높이기 위해 이 섹션들을 어떻게 재구성하면 좋을지 제안해 주세요.”

워드프레스 에이전트는 자연어 프롬프트를 통해 페이지와 글 전체에서 블록을 재배치하고 순서를 변경할 수 있습니다. 다음은 사용해 볼 수 있는 프롬프트 예시입니다.

• “서비스 페이지의 섹션 순서를 변경하여 가격 섹션이 마지막에 오도록 해 주세요.”
• “최신 글의 특성 이미지 블록을 맨 위로 이동해 주세요.”
• “소개 페이지에서 첫 번째 단락과 두 번째 단락의 순서를 바꿔 주세요.”
• “홈페이지의 히어로 섹션 바로 아래에 연락처 버튼 블록을 이동해 주세요.”