Squarespace를 사용하여 첫 번째 웹 사이트를 구축하는 방법

Squarespace는 환상적인 웹 사이트 빌더. 다음과 같은 CMS의 설정 및 유지 관리 번거 로움에 대해 걱정할 필요없이 웹 사이트에 사용하는 경우 이상적입니다. 워드 프레스.

도메인 이름과 Squarespace 구독만으로 멋진 웹 사이트를 빠르고 쉽게 구성 할 수 있다는 사실에 놀랄 것입니다.

초보자를위한이 Squarespace 가이드에서는 생성 및 생성에 필요한 정확한 단계를 살펴 보겠습니다. 첫 웹 사이트 시작.

다음과 같은 Squarespace 구성 요소를 다룰 것입니다.

1. 디자인 (사이트의 전체적인 모양과 느낌을 사용자 지정)
2. 페이지 (사이트에 콘텐츠 추가)
3. 설정 (미세 조정 SEO 및 기타 비즈니스 설정)

이러한 구성 요소를 이해하면 플랫폼을 사용하여 모든 종류의 웹 사이트를 구축 할 수 있습니다.

Squarespace 사용 방법… 시작하기 전 준비 사항

Squarespace를 사용하여 웹 사이트를 구축하기 전에 몇 가지 사항이 필요합니다.

1. 도메인 이름

웹 사이트 설정 단계 중 하나로 도메인 이름을 Squarespace 계정과 연결합니다.

따라서 도메인 이름이 필요합니다. 아직 도메인 이름을 구입하지 않았다면 지금 구입하십시오.

Squarespace에서도 구입할 수 있지만 권장하지 않습니다.
호스팅 제공업체 간의 도메인 이전 또는 웹 사이트 빌더 또는 CMS는 도메인이 타사 도메인 등록 기관.

NameCheap 경쟁력있는 가격과 훌륭한 서비스를 제공하는 우수한 도메인 이름 등록 기관 서비스입니다. Squarespace 웹 사이트의 도메인 이름을 구입하려면 확인하십시오.

참고 : 도움이 필요한 경우 도메인 이름 등록 웹 사이트의 경우 도메인 이름 생성기 도움이 될 수 있습니다.

2. 사이트 탐색 구조에 대한 대략적인 아이디어 

사이트를 구축하기 전에 사이트의 탐색 구조 (또는 기본 메뉴 항목)를 알면 프로세스가 더 빨라집니다. 따라서 종이를 가져 와서 사이트 메뉴가 어떻게 보일지 그립니다. 이 연습은 사이트에 추가 할 여러 페이지를 마무리하는 데 도움이됩니다.

예를 들어 다음 페이지 중 일부를 사이트에 추가 할 수 있습니다.

3. 복사 및 그래픽

사이트 생성을 시작하기 전에 마지막으로 필요한 것은 콘텐츠입니다. 따라서 추가 할 모든 페이지의 초안을 작성하십시오.

또한 Squarespace 웹 사이트를 구축하는 데 필요한 모든 이미지 (또는 비디오)를 쌓으십시오. 필요한 경우 재고 이미지, 그것들도 준비하십시오. 올바른 이미지를 갖는 것은 큰 영향을 미치다 전환에.

모든 콘텐츠와 미디어를 편리하게 사용할 수 있으면 나중에 많은 시간이 소요됩니다.

이제 사이트 구축을 시작하겠습니다.

(이미 Squarespace 평가판에 등록한 경우 가이드의 첫 부분으로 이동하십시오.)

첫 번째 Squarespace 웹 사이트를 구축하는 방법

1 단계 : Squarespace 웹 사이트에 가입

모든 Squarespace 플랜은 무료 평가판으로 시작됩니다. 무료 평가판에 등록하려면 Squarespace '옵션을 선택하십시오.사이트 만들기':

다음으로 템플릿을 선택합니다.

이 단계를 쉽게하기 위해 Squarespace는 테마를 다음 범주로 그룹화합니다.

Squarespace 테마 샘플

다음은 Squarespace 테마에서 찾을 수있는 여러 디자인입니다. 더 명확하게 보려면 다음 섬네일을 클릭하십시오.

Squarespace 가입 둘러보기 방법

이 연습을 위해 Squarespace 계정을 사용하여 설정했습니다.

저는 비즈니스 카테고리로 가서 Montauk 템플릿을 선택합니다.

템플릿을 선택하면 Squarespace에서 간단한 가입 양식을 표시합니다.

가입을 마치면 4 단계 Squarespace 사이트 콘텐츠 개인화 프로세스로 이동합니다.

1. 사이트 대상 선택

2.이 웹 사이트는 무엇에 관한 것입니까?

3.이 사이트의 목표는 무엇입니까?

4. 사이트 이름 지정

사이트 콘텐츠 개인화 설문지를 작성하면 다음 화면이 표시됩니다.

스크린 샷에서 볼 수 있듯이 왼쪽에는 다양한 디자인 설정과 기본 설정이있는 패널이 있습니다. 그리고 오른쪽에는 내 웹 사이트의 미리보기가 있습니다.

2 단계 : 정사각형 공간 사용 (1 부) : 설계 옵션

Squarespace는 디자인 설정 아래에 10 개의 항목이 있습니다.

1. 심벌 마크 & 제목
2. 주형
3. 스타일 편집기
4. 체크 아웃 페이지 스타일 편집기
5. 잠금 화면
6. 공지 사항 모음
7. 모바일 정보 표시 줄
8. Squarespace 배지
9. 사용자 정의 CSS
10. 고급의

이러한 각 요소를 자세히 살펴 보겠습니다.

1. 로고 및 제목

이미 사이트에 이름을 지정 했으므로이 단계에서는 태그 라인을 추가하겠습니다. 태그 라인을 'Squarespace 초보자를위한 리소스.

버튼을 클릭하면 Squarespace의 로고 메이커 도구로 이동합니다.

이 로고 메이커 도구를 사용하면 다음을 수행 할 수 있습니다.

• 수많은 로고 아이콘 중에서 선택
• 텍스트 기반 로고 만 생성
• 이미지 로고로 이동
• 로고 텍스트의 글꼴 및 색상 변경
• 로고가 명함 및 기타 브랜딩 자료에서 어떻게 보이는지 미리보기

전반적으로 Squarespace의 로고 메이커 도구는 매우 직관적입니다. 왼쪽 패널에는 다양한 디자인 요소 또는 아이콘이 있습니다.

키워드를 검색했을 때 '웹 사이트', 나는 많은 훌륭한 아이콘을 얻었습니다. 오른쪽에 보이는 것을 골라 이미지 로고를 만들었습니다.

고해상도 버전의 로고를 다운로드하려고했지만 편집자가이를 수행하려면 Squarespace 계정에 가입하라는 메시지를 표시했습니다.

그러나 여전히 저해상도 버전도이 시점에서 다운로드 할 수 있습니다. 지금은 그렇게 할 것입니다.

Squarespace 평가판이 종료되고 프리미엄 플랜으로 업그레이드하면 문제없이 고해상도 버전을 다운로드 할 수 있습니다. 고해상도 파일을 받으면 Squarespace 사이트에 업로드 할 수 있습니다.

이 디자인 항목의 다음 두 옵션은 파비콘과 소셜 공유 로고를 설정하는 것입니다. 이것들이 있으면 좋습니다. 그렇지 않으면 다음 설정으로 이동하십시오.

지금까지 변경 한 내용을 저장하려면 '저장' 패널 상단의 버튼.

참고 : 웹 사이트에 멋진 파비콘을 만들고 싶다면 여기에 무료 목록이 있습니다. 파비콘 생성기 당신은 볼 수 있습니다.

2. 템플릿

또한 '주형'섹션에는 Squarespace 사이트 내에서 다운로드 된 모든 템플릿이 표시됩니다.

지금 보시다시피 내 템플릿 목록에는 템플릿 만 포함되어 있습니다. Montauk 평가판을 설정할 때 등록한 템플릿이기 때문입니다.

선택한 템플릿이 마음에 들면 다음 단계로 이동합니다. 또는 더 많은 템플릿을 다운로드 할 수 있습니다.

팁

• 이 시점에서 템플릿을 다운로드하고 전환하는 데 시간을 낭비하지 마세요. 도움이되지 않습니다.
• 사이트를 디자인하고 콘텐츠를 업로드 한 후에야 다양한 템플릿이 콘텐츠를 표시하는 방식을 이해할 수 있습니다.
• 데모 콘텐츠와 이미지로 많은 것을 알아낼 수 없습니다.

웹 사이트에서 사용중인 Squarespace 템플릿을 찾는 방법

좋아하는 Squarespace 템플릿을보고 어떤 테마를 사용하고 있는지 궁금하다면 여기에서 알아내는 방법을 알아보세요.

1. 페이지를 마우스 오른쪽 버튼으로 클릭> 소스 / 페이지 소스보기
2. 당신은 알아 차릴 것입니다  코드 상단 근처에 Squarespace 웹 사이트임을 표시합니다.
3. Ctrl + F를 눌러 페이지에서 다음을 검색합니다. 템플릿 ID 코드 복사

내가 사용하는 템플릿 인 Montauk는 템플릿 ID를 가지고 있습니다. 50521cf884aeb45fa5cfdb80. 자신을보십시오. 

템플릿 ID를 찾은 후 Squarespace 템플릿 패밀리 공식 Squarespace 데모 사이트로 이동합니다.

3. 스타일 편집기

또한 스타일 편집기 글꼴, 제목 색상, 로고 위치, 바닥 글 내용과 같은 템플릿 설정을 사용자 정의하는 데 사용됩니다.

각 템플릿은 스타일 편집기.

하지만 모든 Squarespace 템플릿은 완벽하게 설계 되었기 때문에 디자이너가 아니라면이 섹션에서 벗어나는 것이 좋습니다!

4. 체크 아웃 페이지 스타일 편집기

또한 체크 아웃 페이지 스타일 편집기 결제 페이지의 설정을 사용자 지정하는 데 도움이됩니다. 이 설정은 상점이 있거나 상점 웹 사이트 인 Squarespace 사이트에 주로 유용합니다.

5. 잠금 화면

Squarespace를 사용하면 암호로 페이지를 잠글 수 있습니다. 이러한 모든 페이지에는 내용이 표시되지 않지만 잠금 화면이 표시됩니다.

사용자 지정하지 않으면 잠금 화면 전혀, 그것이 어떻게 보일지 여기에 있습니다.

5. 공지 사항 모음

또한 공지 사항 모음 사이트 상단에 고정 알림을 추가 할 수 있습니다. 이것은 중요한 콘텐츠에 독자의 관심을 끌 수있는 훌륭한 기능입니다.

활성화하면 공지 사항 모음, 사용자가 클릭해야하는 메시지와 링크를 추가 할 수 있습니다.

위 스크린 샷에서 볼 수 있듯이 새 창에서 링크를 열 수 있습니다.

6. 모바일 정보 표시 줄

이름에서 알 수 있듯이 모바일 정보 표시 줄 모바일 사용자 앞에 표시되며 이메일, 전화 번호, 위치 및 업무 시간을 표시하는 데 사용할 수 있습니다.

Squarespace는이 정보를 '사업 정보' 섹션은 나중에 살펴볼 것입니다.  

7. Squarespace 배지

Squarespace는 함께 구축 된 모든 웹 사이트에 브랜딩 (배지)을 추가합니다.

또한 Squarespace 배지 설정을 통해 Squarespace 배지를 활성화 또는 비활성화하고, 위치를 조정하고, 디스플레이 설정을 미세 조정할 수 있습니다.

8. 사용자 정의 CSS

글꼴, 색상 및 기타 기본 사용자 지정 옵션 이상으로 템플릿을 사용자 지정하려면 다음의 도움을 받아야합니다. 사용자 정의 CSS.

추가하는 것을 기억하십시오 맞춤 CSS 템플릿 디자인을 망칠 수 있습니다. 권장하지 않습니다.

9. 많은

또한 고급의 옵션을 사용하면 더 많은 글꼴을 추가 할 수 있습니다. Typekit에서 Squarespace 웹 사이트로 이동합니다. 그만큼 고급의 설정에는 고급 템플릿 설정도 있습니다.

이것으로 Squarespace 사이트의 디자인 부분을 마무리했습니다.

다음으로 Squarespace 페이지와이를 사용하여 새로 디자인 된 사이트에 콘텐츠를 업로드하는 방법을 살펴 보겠습니다.

3 단계 : Squarespace 사용 (2 부) : 방법 '페이지'Squarespace에서 작업

템플릿을 선택하고 사용자 지정하고 사이트의 제목과 로고를 추가했으면 이제 콘텐츠를 추가 할 차례입니다.

Squarespace 페이지를 사용하면 다음을 수행 할 수 있습니다.

• 사이트에 페이지 (및 콘텐츠) 추가 (예 : 정보, 연락처 등)
• 사이트에 블로그 추가
• 사이트에 상점 추가
• 사이트의 기본 메뉴 구축

메인 메뉴부터 시작하겠습니다.

페이지 설정에 처음으로 액세스하면 'TOP NAVIGATION ' 데모의 메뉴 항목을 보여줍니다.

지금은 데모 페이지는 잊어 버리고 자신의 페이지를 추가하기 시작하십시오.

사이트에 일반적으로 필요한 각 페이지에 대해 Squarespace는 미리 만들어진 템플릿을 제공했습니다.

예를 들어 정보, 기능, 상점, 연락처 등과 같은 페이지의 경우 사이트에로드 할 수있는 바로 사용할 수있는 페이지 레이아웃이 이미 있습니다.

1. 미리 만들어진 템플릿에 페이지를 추가하는 방법

미리 만들어진 템플릿에 페이지를 추가하는 방법을 살펴 보겠습니다.

다음 스크린 샷에서 볼 수 있듯이 사이트에 페이지를 추가하기 위해 클릭 할 수있는 두 개의 '+'기호가 있습니다.

첫 번째 옵션을 클릭하면 페이지를 추가하는 것이 아니라 웹 사이트의 기본 메뉴에도 추가합니다.

두 번째 옵션을 클릭하면 페이지를 추가하기 만하면됩니다.

두 번째 옵션으로 페이지 추가를 시작하는 것이 좋습니다. 페이지 생성을 마친 후 모든 데모 페이지를 삭제하고 새로 생성 된 모든 페이지를 드래그하여 아래에 놓습니다. 상위 탐색.

'정보'페이지를 추가해 보겠습니다. 항목을 클릭하면 '페이지', 왼쪽 패널에 다음 옵션이 표시됩니다.

'를 클릭하면편집 시작 ', 선택한 about me 페이지 레이아웃이 Squarespace의 페이지 편집기에로드됩니다. 페이지 요소를 편집하려면 페이지 상단 (탐색 바로 아래)에 마우스를 가져 가면 다음 옵션 패널이 열립니다.

클릭 '편집하다'.

이 시점에서 페이지 내용 편집을 시작하거나 '+'페이지 상단에 서명하여 더 많은 디자인 요소를 추가하십시오.

사이트에 요소를 추가하면 간단한 끌어서 놓기 기능을 사용하여 위치를 쉽게 재정렬 할 수 있습니다.

참고 :

기본 레이아웃을 사용자 정의하고 스페이서 요소를 포함하여 다른 요소를 추가하면 모바일 미리보기가 재미있게 보일 수 있습니다. 따라서 다른 요소 사이의 간격이 약간 떨어져 보일 수 있습니다.

(기본 레이아웃은 아름답게 렌더링됩니다.)

다른 페이지를 추가하는 것은 정보 페이지를 추가하는 것과 유사합니다.

지금은 사이트를 매우 빠르게 시작하고 실행하려면 기본 레이아웃을 사용하는 것이 가장 좋습니다.

이 단계가 끝나면 사이트의 모든 페이지를 기본 메뉴로 이동할 준비가되어 있어야합니다.

그러나 이동하기 전에 데모 페이지를 삭제하십시오.

다음으로 새로 만든 페이지를 'TOP NAVIGATION '.

내비게이션을 정리했으면 페이지 작업을 할 차례입니다.

2. Squarespace 페이지에 콘텐츠를 추가하는 방법 :

콘텐츠를 추가하거나 페이지 디자인을 사용자 지정하려면 페이지 이름을 클릭하기 만하면됩니다.

클릭하면 페이지 편집기가로드되고 템플릿의 내용을 준비 단계에서 작성한 내용으로 바꿀 수 있습니다.

3. 고급 페이지 설정을 구성하는 방법

높은 수준의 페이지 설정은 페이지의 다음 사항에 도움이 될 수 있습니다.

페이지를 더 높은 수준으로 변경하거나 삭제하려면 페이지 이름 옆에있는 설정 아이콘을 클릭합니다.

또한 페이지를 홈페이지로 설정하려면 선택한 페이지에 대해 이러한 설정을 열고 '시작 페이지로 설정합니다' 옵션을 선택합니다.

중요한 Squarespace 페이지 : 블로그

Squarespace에서 블로그를 간단한 페이지로 추가 할 수 있지만 몇 가지 추가 설정이 필요할 수 있습니다.

게시물을 추가하려면 블로그 메뉴 항목 옵션에서 '+'기호를 클릭하십시오.

포스트 에디터는 매우 직관적입니다.

하단에는 게시물에 카테고리 및 태그를 추가하는 설정이 표시됩니다.

또한 옵션 중 설정을 통해 다음을 수행 할 수 있습니다.

• 게시물에 추천 이미지 추가
• 게시물에 작성자 지정
• 발췌문 작성
• 게시물을 추천 게시물로 표시

위의 섹션을 통해 콘텐츠와 블로그가있는 멋진 웹 사이트를 만들 수 있기를 바랍니다.

이제 Squarespace 설정을 살펴 보겠습니다.

4 단계 : Squarespace 사용 : 설정 살펴보기

Squarespace의 설정을 사용하는 것은 쉽습니다. 세 가지 범주로 분류됩니다.

1. 일반
2. 웹 사이트
3. 상업

이들 중 '일반' 카테고리를 사용하면 업체 이름, 주소, 납세자 ID 등과 같은 비즈니스 정보를 추가 할 수 있습니다.

그리고 '상업' 설정은 온라인 상점을 운영하거나 사이트에 상점을 추가하려는 사람과 관련이 있습니다.

이 카테고리 중 '웹 사이트 ' 카테고리는 제가 이야기하고 싶은 카테고리입니다.

'웹 사이트 ' 설정은 다음과 같습니다.

• 기본 정보 –이 설정은 사이트의 내용에 대한 발췌문을 추가하는 데 도움이됩니다. 일부 템플릿은이 정보를 표시하므로 입력해야합니다.
• 도메인 -  도메인을 구매 한 후에는이 설정으로 돌아와 Squarespace 사이트가 해당 도메인을 가리 키도록해야합니다. 타사 도메인 통합 산들 바람입니다.
• 이메일 – 다음 항목은 이메일입니다. 여기에서 Gmail 비즈니스 이메일 통합을 수행 할 수 있습니다.
• 연결된 계정 – 여기에서 Squarespace 웹 사이트에 소셜 미디어 계정을 연결할 수 있습니다. 다음에 Squarespace 사이트에 소셜 미디어 프로필 아이콘을 추가하면 Squarespace는이 섹션의 정보를 사용하여 아이콘을 프로필에 자동으로 연결합니다.
• 마케팅 – 마케팅 설정 옵션에는 SEO, 소셜 미디어 및 Google Adwords에 대한 설정이 있습니다.
  SEO 설정 여기에서 사이트에 대한 SEO 발췌문을 추가하는 데 도움이됩니다. 이 발췌문은 검색 엔진 결과 페이지에서 사용자에게 표시됩니다. 사이트에있는 여러 항목의 URL 형식을 설정할 수도 있습니다. 소셜 미디어 설정은 웹 사이트에 표시 할 공유 버튼을 결정하는 데 도움이됩니다. Google Adwords 마케팅 설정은 Squarespace의 비즈니스 또는 상거래 계획을 사용하는 사이트를위한 것입니다.
• 블로깅 – 블로그 설정은 블로그 게시물 URL 형식을 설정하는 데 도움이됩니다.
  기본 형식을 변경하지 마십시오. 이미 독자에게 친숙합니다. 그러나 원하는 경우 연도, 월 및 날짜를 ​​제거 할 수 있습니다. 이러한 설정을 통해 블로그를 댓글 서비스 인 Disqus와 통합 할 수도 있습니다. 이렇게하면 사용자가 Disqus 계정을 통해 콘텐츠에 댓글을 달 수 있습니다. (Disqus를 원하지 않는 경우 기본 댓글 시스템도 있습니다.)
  블로그 설정은 AMP 제공 업체가 블로그 게시물의 AMP 버전을 표시 할 수 있도록하는데도 도움이됩니다. (AMP에 최적화 된 페이지는 모바일 방문자에게 웹 페이지를 축소하여 보여주는 페이지입니다. 이는 초고속 모바일 브라우징 경험을 제공하는 데 도움이됩니다.)
• SSL – 아래에서 사이트의 보안 버전과 안전하지 않은 버전 중에서 선택할 수 있습니다. SSL 설정. Google은 안전하지 않은 웹 사이트보다 안전한 웹 사이트를 선호하므로 보안 버전을 선택하세요.
• 고급 – 고급 설정을 사용하면 다른 웹 사이트 빌더 또는 CMS에서 사이트 콘텐츠를 가져올 수 있습니다. 또한 사이트를 다음으로 내보낼 수 있습니다. 워드 프레스.
  사이트에 대한 사용자 지정 404 페이지를 만드는 경우 고급 설정을 사용하여 기본 404 페이지 대신 사용자 지정 404 페이지를 표시 할 수 있습니다.
  당신은 또한 당신의 Google 웹 로그 분석 이 설정을 통해 계정 번호. 그렇게 하면 사이트에 Google Analytics 스크립트가 자동으로 설치됩니다.

그게 전부 야.

이 가이드의 지침을 따랐다면 이제 첫 번째 기능적 (완벽하지 않은 경우) Squarespace 웹 사이트가 준비되었을 것입니다.

Squarespace 웹 사이트를 시작한 후 가장 먼저해야 할 일

새 웹 사이트를 시작하면 첫 번째 작업은 Google에서 색인을 생성하는 것입니다.

색인 생성 프로세스의 속도를 높이려면 사이트 맵을 Google Search Console에 제출해야합니다.

Squarespace 웹 사이트의 사이트 맵은 다음에서 찾을 수 있습니다.

http://www.yourdomain.com/sitemap.xml

따라서 웹 사이트의 사이트 맵 URL을 복사하고 검색 콘솔.

Squarespace 웹 사이트를 구축하는 방법 – 마무리

Squarespace 웹 사이트를 만들고 완벽하게 조정하고 사용자 지정하는 데 일주일 이상 걸리지 않습니다. 완료되면 업데이트 나 해킹, 호스팅 등에 대해 걱정할 필요가 없습니다. Squarespace는 귀하의 웹 사이트를 관리합니다.

이 가이드를 통해 10 시간 이내에 첫 번째 Squarespace 사이트의 대략적인 버전을 구축 할 수 있기를 바랍니다 (도메인 구입 및 기타 사항에 대한 시간 고려).

참고 : 대체 플랫폼을 찾는 경우 다음 목록이 있습니다. 자신 만의 웹 사이트를 구축 할 수있는 플랫폼.