드래그 앤 드롭 블록을 사용해 콘텐츠를 만들고 사이트 구조를 구축하세요.

블록은 텍스트, 버튼, 양식, 이미지와 같은 콘텐츠를 사이트에 추가하는 드래그 앤 드롭 기능입니다. 이것들을 웹사이트를 구성하는 기본 요소라고 생각하세요.

또, 미리 만들어진 블록 레이아웃을 사용하여 페이지 섹션 추가도 시도해 볼 수 있습니다.

블록 추가 비디오

이 비디오는 페이지에 블록을 추가하는 방법을 보여줍니다.

블록 추가

블록을 추가하는 방법은 사이트가 사용 중인 Squarespace 버전에 따라 다르며, Squarespace 앱을 사용 중인지에 따라 달라집니다.

블록을 드래그 앤 드롭하여 레이아웃에 추가

페이지에 블록을 드래그 앤 드롭하려면 다음 절차를 따라 주세요.

1. 블록 메뉴를 엽니다.
2. 메뉴에서 블록을 클릭하고 드래그하세요. 페이지에 놓을 수 있는 위치를 보여주는 가이드라인이 표시됩니다.
3. 블록을 페이지에 놓아 배치하세요.

기존 블록 편집

텍스트 블록 안의 텍스트와 같은 일부 블록 콘텐츠는 페이지에서 직접 편집할 수 있습니다. 대부분의 블록에는 블록 편집기가 있어 블록의 콘텐츠를 추가, 편집 및 관리할 수 있습니다.

블록 에디터를 여는 방법은 다음과 같습니다.

1. 페이지 패널을 엽니다.
2. 편집하려는 블록이 있는 페이지 또는 블록 영역에서 편집을 클릭하세요.
3. 블록을 클릭하여 선택한 후, 블록 위에 나타나는 연필 아이콘을 클릭하세요. 또는 블록을 두 번 클릭하세요.

버튼 및 이미지 블록을 맞춤 또는 채우기로 설정

플루이드 엔진은 버전 7.1에서 블록 섹션으로 제공됩니다.

이미지 블록과 버튼 블록을 경계 가장자리까지 늘리거나 내용 주위에 패딩을 넣도록 설정할 수 있습니다. 채우기를 선택하면 콘텐츠가 블록 영역 전체를 덮게 되어 인접한 블록의 가장자리까지 닿게 됩니다. 맞추기를 선택하면 블록 콘텐츠 주변에 깔끔한 여백이 유지됩니다.

이미지 또는 버튼 블록을 맞추기 또는 채우기로 설정하려면 다음 단계를 따르세요.

1. 페이지 패널 을 열고 편집하려는 페이지를 선택합니다.
2. 왼쪽 상단 모서리에서 편집을 클릭하세요.
3. 이미지 또는 버튼 블록을 클릭한 다음, 연필 아이콘을 클릭하고 디자인 탭을 클릭하세요.

맞추기 또는 채우기를 클릭하세요. 이미지 블록은 기본적으로 맞추기로, 버튼 블록은 기본적으로 채우기로 설정되어 있습니다. 블록을 맞추기로 설정하면 정렬 옵션이 아래쪽 또는 블록 도구 모음에 표시됩니다.

변형 효과로 블록 사용자 지정

플루이드 엔진은 버전 7.1에서 블록 섹션으로 제공됩니다.

블록의 불투명도를 낮추거나 회전하는 등 블록의 다양한 요소를 변형하는 옵션을 사용하여 특정 블록의 모양을 사용자 지정할 수 있습니다. 스택에 변형 효과를 추가할 수도 있습니다..

변형 효과 추가

1. 페이지 패널 을 열고 편집하려는 페이지를 선택합니다.
2. 왼쪽 상단 모서리에서 편집을 클릭하세요.
3. 변형 옵션이 있는 블록 또는 스택을 클릭하고 연필 아이콘을 클릭한 다음 디자인 탭을 클릭합니다.
4. 변환에서 설정을 사용자 지정합니다. 원하는 모양을 얻으려면 다양한 설정 조합을 테스트해 보세요.

변환 옵션에는 다음이 포함됩니다.

• 불투명도
• 회전
• 크기 조정
• 오프셋
• 기울이기
• 앵커

변형 효과를 사용할 수 있는 블록은 무엇인가요?

플루이드 엔진에서는 다음 요소에 변형 효과를 추가할 수 있습니다.

• 버튼 블록
• 양식 블록
• 이미지 블록
• 제품 블록
• 모양 블록
• 텍스트 블록

블록을 추가할 수 있는 곳

블록을 추가할 수 있는 위치:

• 모든 페이지의 블록 섹션(버전 7.1)
• 블로그 게시물
• 이벤트 설명
• 바닥글
• 레이아웃 페이지
• 페이지 머리말 및 바닥글(버전 7.0)
• 제품 추가 정보 (버전 7.0)
• 사이드바(버전 7.0)

블록을 추가할 수 없는 영역은 사이트 버전에 따라 다릅니다.

블록을 추가하는 버튼을 찾을 수 없는 경우

컴퓨터에서 편집할 때 블록 추가 버튼이나 + 아이콘을 찾을 수 없다면:

• 편집기가 열려 있는지 확인합니다. 편집기를 열려면, 페이지 왼쪽 상단에 있는 편집 을 클릭하세요.
• 블록을 추가할 수 있는 영역을 편집하고 있는지 확인해 주시기 바랍니다.
• 다른 블록의 선택을 해제합니다. 블록 선택을 해제하려면 편집기에서 빈 영역을 클릭하세요.

그래도 문제가 지속되면 브라우저 캐시를 지우거나, 브라우저 확장 프로그램을 비활성화하거나, 브라우저 버전을 업데이트하는 것이 도움이 될 수 있습니다.

블록은 몇 개까지 추가할 수 있을까?

콘텐츠 영역에 추가할 수 있는 블록 수에는 엄격한 제한이 없지만 페이지당 60개 이하의 블록을 권장합니다. 콘텐츠가 너무 많으면 특히 모바일 기기에서 사이트가 느리게 로드될 수 있습니다.

사이트에 추가할 수 있는 블록 유형

블록을 사용하여 사이트에 콘텐츠를 추가하세요.

• 아카이브 - 컬렉션 아이템의 체계적인 링크 목록을 표시합니다.
• 오디오 - 오디오 파일 플레이어를 추가합니다.
• Bandsintown - Bandsintown 프로필에서 투어 날짜를 표시합니다.
• 버튼 - 버튼과 콜투액션을 추가합니다.
• 캘린더 - 페이지에 이벤트와 같은 항목을 날짜별로 정렬된 캘린더로 표시합니다.
• 차트 - 막대형, 선형, 원형 차트를 추가합니다.
• 코드 - 사용자 지정 코드를 추가하거나 코드 스니펫을 표시합니다. 코드 블록에서 JavaScript와 iframe 코드를 사용하는 것은 프리미엄 기능입니다.
• 콘텐츠 링크 - 시각적 미리보기를 통해 사이트의 다른 페이지로 연결되는 링크를 추가합니다.
• 기부(프리미엄 기능) - 사명이나 조직을 위해 기부금을 모으세요. 결제 처리업체 연결이 필요합니다.
• 임베드 - Tweet, 비디오 등의 링크가 있는 외부 콘텐츠를 추가합니다.
• Flickr - Flickr 계정에서 이미지를 추가합니다.
• 양식 - 방문자로부터 정보를 수집하는 양식을 추가합니다.
• 갤러리 - 캐러셀, 그리드, 슬라이드쇼 또는 스택 레이아웃으로 이미지나 비디오 갤러리를 추가합니다.
• 이미지 - 카드, 콜라주, 인라인, 오버랩, 포스터 또는 스택 레이아웃에 캡션이 있는 이미지를 추가합니다.
• Instagram - Instagram 계정에서 게시물을 추가합니다.
• 선 - 수평선을 추가하여 텍스트를 나누거나 시각적으로 콘텐츠를 분리합니다.
• 지도 - 위치 핀이 있는 Google 지도를 추가합니다.
• Markdown - Markdown 언어를 사용하여 텍스트를 추가합니다.
• 메뉴(프리미엄 기능) - 레스토랑 메뉴를 표시합니다.
• 뉴스레터 - 뉴스레터 구독 양식을 추가합니다.
• OpenTable (프리미엄 기능) - 레스토랑 예약을 추가합니다. OpenTable 레스토랑 ID가 필요합니다.
• 제품 - 스토어 페이지에서 제품을 표시합니다.
• 인용 - 스타일이 적용된 인용문이나 추천 리뷰를 추가합니다.
• 예약 - Tock을 사용하여 이벤트에 대한 예약을 하거나 티켓을 판매할 수 있는 버튼을 추가합니다.
• RSS - 블로그 페이지의 RSS 피드에 링크를 추가합니다.
• 스케줄링 - Acuity Scheduling을 사용하여 온라인 예약을 추가합니다.
• 스크롤링 - 뉴스 티커 또는 마퀴와 같은 스크롤링 텍스트를 추가합니다.
• 모양(플루이드 엔진 전용) - 단색 도형을 추가하세요.
• 검색 - 검색 필드를 추가합니다.
• 소셜 링크 - 소셜 미디어 프로필로 연결되는 아이콘을 추가합니다.
• SoundCloud - SoundCloud 플레이어를 삽입합니다.
• 스페이서(클래식 에디터만) - 블록 사이에 조절 가능한 공백이나 패딩(여백)을 추가합니다. 플루이드 엔진 섹션에서는 지원되지 않습니다.
• 요약 - 사이트의 컬렉션 아이템을 캐러셀, 그리드, 리스트 또는 벽 레이아웃으로 표시합니다.
• 태그 클라우드 - 태그 또는 카테고리를 그래픽 클라우드 형태로 표시합니다.
• 텍스트 - 표제 요소, 인용문, 서식이 사전 지정된 텍스트, 링크 및 목록을 포함한 텍스트를 추가합니다.
• 비디오 - 외부 호스팅 비디오를 추가합니다.
• Zola - 결혼 레지스트리를 추가합니다.

블록을 사용자 지정하는 다양한 방법

이제 블록을 추가했으므로 다음을 수행할 수 있습니다.

• 플루이드 엔진에서 애니메이션 추가
• 블록 복제
• 플루이드 엔진에서 모바일 레이아웃 편집
• 접근성 모범 사례 알아보기
• 블록 이동
• 블록 고정하기
• 블록 크기 조정