클래식 에디터를 사용할 때 모바일 기기에서 블록이 올바른 순서로 나타나는지 확인하세요.

클래식 에디터에서 Squarespace의 반응형 디자인은 모바일 기기에서 블록을 자동으로 세로로 스택합니다. 이렇게 하면 사이트의 가독성을 유지하며, 방문자가 콘텐츠를 둘러보기 위해 핀치, 확대/축소, 스크롤을 하지 않아도 됩니다.

블록이 원하는 방식으로 스택되지 않는 경우 이 가이드와 비디오의 시나리오를 사용하여 블록을 이동할 수 있습니다. 사이트를 실험하고 미리 보는 것은 모든 기기에서 멋지게 보이고 디자인이 마음에 들 때까지 레이아웃을 다듬는 최선의 방법입니다.

이 가이드는 모든 7.0 버전 사이트 및 7.1 버전 사이트의 특정 영역에서 사용하도록 클래식 에디터에 추가된 블록의 모바일 동작에 대해 설명합니다. 플루이드 엔진을 사용하는 경우 컴퓨터와 모바일 레이아웃을 독립적으로 구성하세요. 사이트의 어느 부분이 어떤 에디터를 사용하는지 확신이 서지 않는다면, Squarespace의 최신 콘텐츠 편집 기능인 플루이드 엔진을 방문하세요.

비디오 시청하기

모바일 보기의 열 레이아웃

블록이 세로로 스택되어 페이지의 전체 너비를 차지할 때(양쪽에 블록이 없는 경우), 모바일 기기에서도 페이지의 컴퓨터 레이아웃을 유지하면서 세로로 스택됩니다. 

다른 블록의 왼쪽이나 오른쪽에 블록을 추가하면 열이 생성됩니다. 페이지에 열이 있을 때, 모바일 기기에서 Squarespace는 두 번째, 세 번째 및 추가 열을 첫 번째 열 아래로 이동시킵니다. 다시 말해, 모바일에서는 열이 가로에서 세로로 이동합니다.

예를 들어:

• 가로로 배열된 이미지 블록이 세 개 있는 경우, 모바일에서는 왼쪽에서 오른쪽 순서로 이미지 블록이 스택됩니다.
• 세 개의 이미지 블록이 연속으로 있고, 각 이미지 블록 아래에 해당 이미지를 설명하는 텍스트 블록이 있는 경우, 모바일 보기에서는 각 이미지 블록 아래에 관련 텍스트 블록이 스택되고, 그 다음 이미지 블록이 이어집니다. 어떻게 작동하는지 확인하려면 위의 비디오를 시청하세요.

이러한 예외 사항을 고려하세요.

• 여백 블록은 모바일에서 모든 7.1 버전 사이트와 대부분의 7.0 버전 사이트에서 자동으로 숨겨집니다.

• 텍스트 블록에 떠 있는 블록(예: 텍스트로 둘러싸인 이미지)은 모바일 보기에서 텍스트 블록 위에 표시됩니다. 모바일 보기에서 블록이 텍스트 위에 잘못 나타나는 경우, 텍스트 위에 떠 있지 않도록 블록을 이동하세요.

모바일 보기에서 더 복잡한 레이아웃

일부 영역의 열 크기가 다른 레이아웃에서도 모바일에서 블록의 순서를 제어할 수 있습니다.

블록을 추가할 때, 블록이 어떻게 정렬될지를 보여주는 가이드 선이 표시됩니다. 가이드 선이 옆 블록의 길이를 따라 배치되면, 이는 Squarespace에 두 블록이 모든 화면에서 함께 그룹화되어야 함을 알립니다.

한 블록을 다른 블록과 함께 스택 상태로 유지하려면, 가이드 선(가로선)이 다른 블록의 길이와 일치할 때 블록을 드래그하여 놓으세요.

어떻게 작동하는지 확인하려면 위의 비디오를 시청하세요.

추가 지원

• 모바일에서 사이트가 어떻게 나타날지 미리 보려면 기기 화면 보기를 사용하세요. 사이트는 기기마다 약간 다르게 보일 수 있으므로 모바일 기기에서 어떻게 보이는지 테스트해 볼 것을 권장합니다.
• 모바일에서 사이트가 어떻게 보이는지 더 잘 이해하려면 Squarespace 앱에서 사이트를 편집하세요.