커피숍 웹사이트를 만드는 방법(빠르고 쉬움)

게시 됨: 2024-10-26

구석구석에 카페가 있기 때문에 카페를 목적지로 만드는 것이 필수적입니다. 잘 디자인된 웹사이트는 고객을 유치하고, 고유한 제품을 선보이며, 주문을 쉽게 만들 수 있습니다. 하지만 복잡한 기술 없이 어떻게 멋진 커피숍 웹사이트를 만들 수 있을까요?

Divi 및 Divi Quick Sites를 사용하면 코딩 없이 몇 분 만에 전문적이고 매력적인 웹사이트를 구축할 수 있습니다. 귀하의 커피숍에 합당한 온라인 존재감을 제공할 준비가 되셨습니까? 본격적으로 시작해 보겠습니다.

Divi로 구축 시작하기

목차
  • 커피 웹사이트 구축에 필요한 1가지 필수 도구
  • 2 커피숍 웹사이트를 5단계로 구축하는 방법
    • 2.1 1. 도메인 이름 및 WordPress 호스팅 받기
    • 2.2 2. WordPress 테마 설치
    • 2.3 3. 커피숍 사이트 구축
    • 2.4 4. 커피 사이트 맞춤화
    • 2.5 5. 커피 메뉴 추가
    • 2.6 6. 커피 사이트의 기능 확장(선택 사항)
  • 3 Divi AI를 통한 노력의 10배
  • 커피숍 사이트 제작에 관한 4가지 FAQ

커피 웹사이트를 구축하는 데 필요한 필수 도구

완벽하게 작동하는 커피 웹사이트를 구축하려면 몇 가지 필수 도구만 있으면 됩니다. 필수 항목은 다음과 같습니다.

  • SiteGround는 커피 사이트를 온라인으로 호스팅하기 위해 최적화된 성능과 보안을 제공합니다. 또한 1년 동안 무료 도메인 이름이 포함되어 있어 도메인 비용이 절약됩니다.
  • WordPress: WordPress는 사이트 콘텐츠를 효율적으로 관리하기 위한 가장 널리 사용되는 콘텐츠 관리 시스템(CMS)입니다.
  • Divi: 커피 사이트, 특히 Divi Quick Sites에 적합한 다목적 WordPress 테마로, 몇 분 안에 Coffee Starter Site를 사용하여 사이트를 생성합니다.

추가 기능을 사용하면 언제든지 사이트 기능을 확장할 수 있지만(아래에서 설명) 선택 사항이라는 점을 기억하세요. 커피 사이트를 관리하는 데 필요한 유일한 도구는 SiteGround, WordPressDivi입니다.

커피숍 웹사이트를 구축하는 5단계 방법

이제 필요한 도구를 알았으므로 설정을 구축하고 웹 사이트를 만드는 모든 단계를 안내해 보겠습니다.

1. 도메인 이름과 WordPress 호스팅 받기

커피숍의 고유한 웹 주소인 도메인 이름과 신뢰할 수 있는 WordPress에 최적화된 호스팅 제공업체를 확보하여 사이트를 원활하게 운영하세요.

도메인 이름

Namecheap 도메인 등록기관

NameCheap은 저렴한 도메인 이름을 확보할 수 있는 좋은 장소입니다. 하지만 일을 단순하게 유지하고 싶다면 웹 호스팅 회사에서 도메인 이름을 구입하면 관리가 더 쉬워집니다. 예를 들어 SiteGround는 중앙 집중식 관리를 통해 1년 동안 무료 도메인 이름을 제공합니다.

콘텐츠 관리 시스템(CMS)

Wordpress.org

다음으로 콘텐츠, 이미지 등 사이트 데이터를 저장하려면 콘텐츠 관리 시스템이 필요합니다. WordPress는 인기 있고 신뢰할 수 있으며 유연한 콘텐츠 관리 시스템입니다. 무료일 뿐만 아니라 전체 웹사이트의 40% 이상에서 사용되고 있으므로 WordPress를 선택하신 것을 후회하지 않으실 것입니다.

WordPress에 최적화된 호스팅

WordPress 성능을 최적화하려면 SiteGround와 같이 WordPress에 최적화된 호스팅 계획을 제공하는 호스팅 회사를 선택하세요.

사이트그라운드 WordPress 관리형 호스팅

SiteGround는 1년 무료 도메인 이름 및 자동 설치 WordPress를 포함하여 중앙 집중식 관리를 제공하는 안정적인 웹 호스팅입니다. 99.9% 가동 시간과 Speed ​​OptimizerSecurity Optimizer 와 같은 프리미엄 플러그인을 제공하여 사이트 성장을 위한 안전하고 성능 최적화된 환경을 제공합니다.

SiteGround를 시작하는 것은 간단합니다. 계정을 만들고 무료 도메인을 신청하세요. 이를 수행하는 방법을 보여주는 단계별 비디오는 다음과 같습니다.

SiteGround 받기

2. WordPress 테마 설치

사이트 및 WordPress 대시보드를 설정한 후 커피 사이트를 쉽게 디자인하려면 테마를 설치해야 합니다. WordPress에는 다양한 무료 및 프리미엄 테마가 포함되어 있지만 Divi를 권장합니다.

Divi는 카페, 커피숍, 음식 관련 비즈니스를 위해 미리 만들어진 템플릿이 포함된 다용도 WordPress 테마입니다. Divi와 함께 무료로 제공되는 Divi Quick Sites를 사용하면 코딩 경험 없이도 단 몇 분 만에 전문 커피숍 웹사이트를 만들 수 있습니다.

Divi에는 사이트를 시각적으로 사용자 정의할 수 있는 직관적인 드래그 앤 드롭 페이지 빌더가 포함되어 있습니다. 또한 아름다운 이미지로 커피 창작품을 전시할 수 있는 갤러리 , 간편한 온라인 주문을 위한 문의 양식 , 카페 위치를 강조할 수 있는 지도 통합200개 이상의 콘텐츠 요소가 포함되어 있습니다.

또한 Divi에서 프리미엄 플러그인 Bloom(이메일 수신 동의 양식용) 및 Monarch(소셜 미디어 공유용)를 사용하여 브랜드 마케팅을 간소화할 수 있습니다. 그리고 블로그 게시물, 소셜 미디어 콘텐츠, 이메일 뉴스레터 등 사용자를 대신하여 콘텐츠를 생성하는 Divi AI.

Divi 받기

Divi가 커피 사이트에 탁월한 이유는 무엇입니까?

  • 미리 만들어진 커피 스타터 사이트: 전문적인 커피 테마의 미학을 유지하면서 디자인 시간을 절약할 수 있는 필수 페이지가 포함된 즉시 사용 가능한 커피 스타터 사이트가 포함되어 있습니다.
  • Divi 모듈을 사용한 커피 제품 디스플레이: 갤러리 모듈을 사용하여 멋진 제품 갤러리, 슬라이더 및 그리드를 만들어 커피 블렌드, 상품 및 가격 옵션을 선보일 수 있습니다.
  • 온라인 커피 주문: WooCommerce를 원활하게 통합하여 커피 원두, 구독 및 상품을 판매합니다. 원활하고 브랜드화된 온라인 쇼핑 프로세스를 위해 제품 페이지와 결제 환경을 맞춤화하세요.
  • 지도 통합: Google 지도를 추가하여 카페 위치를 표시하세요. 여러 위치, 영업시간, 방향에 대한 핀을 사용하여 사용자 정의하여 사이트 기능으로 고객 편의를 향상시키세요.

Divi 가격(연간 및 평생)

연간 $89의 연간 멤버십을 선택하여 Divi 테마 멤버십을 활성화할 수 있습니다. 또는 한 번만 지불하고 싶다면 $250의 Divi 평생 가격을 확인하세요.

분할 가격 평생

Divi를 구매하면 설치가 쉽습니다. WordPress 대시보드에서 Divi 테마를 구매, 설치 및 활성화하는 방법은 다음과 같습니다.

Divi 받기

3. 커피숍 사이트 구축

Divi를 사용하면 가장 좋은 점은 5분 이내에 완전한 커피 사이트를 생성할 수 있다는 것입니다. Divi Quick Sites를 사용하여 수행합니다.

Divi Quick Sites는 홈, 정보, 서비스, 메뉴, 연락처 및 갤러리와 같이 미리 디자인된 페이지를 포함하는 사이트를 생성합니다. 또한 사이트를 전문적으로 마무리할 수 있는 테마 빌더 템플릿, 글로벌 스타일 및 브랜딩 사전 설정도 포함되어 있습니다.

Divi Quick Sites를 사용하여 커피 사이트를 생성하려면 Divi 대시보드에서 새 사이트 생성을 클릭하세요.

divi 빠른 사이트로 새 사이트 생성

다음 중에서 선택하라는 메시지가 표시됩니다.

  • 미리 만들어진 시작 사이트 사용: 브랜딩, 페이지 및 레이아웃이 포함되어 미리 디자인된 시작 사이트에서 선택합니다. 귀하의 웹사이트는 즉시 출시될 준비가 됩니다.
  • Divi AI로 생성: Divi AI에 지침을 제공하면 필요한 페이지와 기능을 갖춘 맞춤형 웹사이트가 생성됩니다.

미리 만들어진 스타터 사이트 선택

미리 만들어진 시작 사이트를 사용하는 경우 귀하의 웹사이트는 모든 페이지와 브랜딩을 포함하여 선택한 사이트를 복제합니다. 원하는대로 맞춤 설정할 수 있습니다. Divi Quick Sites에는 Coffee Starter 사이트가 있으므로 사용자 정의에 많은 시간을 소비할 필요가 없습니다.

웹사이트 템플릿 선택을 클릭하세요.

웹사이트 템플릿을 선택하세요

아래로 스크롤하여 커피를 선택합니다.

미리보기 커피 스타터 사이트

해당 항목 위로 마우스를 가져가서 커피 미리보기를 클릭하면 홈, 정보, 상점, 블로그 및 연락처 페이지를 크게 볼 수 있습니다.

커피 사이트 페이지를 크게 미리보기

커피 사이트 구축을 시작하려면 커피로 시작을 클릭하세요.

커피 스타터 사이트로 시작

다음으로, 커피 사이트를 개인화하기 위한 몇 가지 세부 정보를 입력하세요.

  • 사이트 이름사이트 슬로건을 입력하세요.
  • 사이트 로고를 업로드하여 모든 페이지의 헤더에 추가하세요.
  • 포함하려는 페이지를 선택합니다. Shop 옵션을 선택하면 Divi Quick Sites가 WooCommerce를 설치하고 온라인으로 커피 주문을 받도록 구성합니다.
  • 추가 페이지를 추가하려면 사용자 정의 페이지 추가 버튼을 사용하십시오.

커피 사이트 세부정보를 입력하고 게시를 누르세요.

완료되면 내 웹사이트 생성 및 게시를 클릭하세요. 2~3분 정도 기다리면 사이트가 준비됩니다.

귀하의 사이트는 커피 사이트에 대한 준비가 된 페이지입니다

내 사이트 보기를 클릭하면 사이트가 어떻게 보이는지 볼 수 있습니다.

시작 사이트를 사용하여 생성된 커피 사이트

Divi AI를 사용하여 커피 사이트 만들기

처음부터 맞춤형 웹사이트를 만들고 싶다면 AI로 사이트 생성 옵션을 선택하세요.

사이트 세부 정보를 입력하고 Divi AI가 완벽한 웹 사이트를 만들 때까지 2~3분 정도 기다립니다. 준비가 되면 내 웹사이트 생성 및 게시를 클릭하세요.

Divi 시작하기

4. 커피 사이트 맞춤화

귀하의 커피 사이트에는 제품, 카페 위치 등 수동으로 추가해야 하는 개인화가 부족합니다. 사이트 페이지를 사용자 정의하는 것부터 시작해 보겠습니다.

커피 사이트 페이지 사용자 정의

탐색을 위해 귀하의 사이트가 준비되었습니다 화면을 사용하십시오. 홈 페이지를 편집하려면 페이지 옆에 있는 연필 아이콘을 클릭하세요.

홈페이지 편집

그러면 드래그 앤 드롭 인터페이스를 사용하여 시각적으로 사용자 정의할 수 있는 Divi Builder 페이지가 열립니다. 제목 텍스트를 맞춤설정하려면 제목 위에 마우스를 놓고 톱니바퀴 아이콘을 클릭하여 설정을 엽니다.

divi 빌더를 사용하여 사용자 정의

콘텐츠 탭에서는 콘텐츠를 편집할 수 있습니다. 디자인 탭에서는 요소의 스타일을 사용자 정의하고 고급 탭에서는 사용자 정의 코드나 조건을 추가할 수 있습니다. 이미지, 버튼, 텍스트 모듈 등 각 요소에 대해 동일한 옵션을 찾을 수 있습니다.

웹 사이트 사본(Divi AI를 사용하여 텍스트 생성 가능) 버튼, 링크 및 이미지 조정을 시작하세요. 다음은 Divi Builder를 사용하여 다양한 모듈을 사용자 정의하는 방법에 대한 심층적인 튜토리얼입니다.

커피 사이트에 대한 브랜드 글꼴 사용자 정의

현재 사이트에는 Coffee Starter 사이트에서 선택한 전역 글꼴이 있습니다 . 이를 사용하거나 브랜드 글꼴을 추가할 수 있습니다. Divi Builder를 사용하여 전역 글꼴을 수정하는 것은 쉽습니다. 텍스트 요소를 클릭하고 설정으로 이동합니다. 디자인 탭으로 전환하고 텍스트 로 스크롤한 다음 글꼴 을 클릭합니다.

전역 글꼴 편집

커피 사이트의 브랜드 색상 사용자 정의

마찬가지로 현재 사이트에는 Coffee Starter Site전역 색상이 있습니다. 전체 색상을 수정하려면 디자인 탭에서 텍스트 색상 까지 아래로 스크롤하세요.

전체 색상 편집

Saved 에서 Global 로 전환합니다. 전체 색상을 편집하려면 튜브 아이콘을 클릭하여 색상 선택 창을 엽니다. 이제 원하는 색상을 선택하거나 16진수 코드를 추가할 수도 있습니다.

16진수 색상 코드 선택

마찬가지로 다른 전체 색상을 편집하고 더 추가할 수 있습니다.

페이지 레이아웃 템플릿 사용자 정의

Divi Quick Sites로 생성된 커피 사이트에는 테마 빌더 템플릿이 사전 정의되어 있습니다 . 이러한 사이트 전체 템플릿은 모든 사이트 페이지에 대해 일관된 레이아웃을 정의합니다. 일반적으로 모든 항목을 수정할 필요는 없지만 머리글, 바닥글 등 일부 특정 섹션을 조정해야 합니다 .

카페 주소를 추가하려면 커피 사이트의 바닥글을 맞춤설정해 보세요. 귀하의 사이트가 준비되었습니다 에서 테마 템플릿 관리를 클릭하세요. 기본 바닥글을 사용자 정의하려면 기본 웹사이트 템플릿을 수정하세요. 마우스를 올려놓고 바닥글 버튼 옆에 있는 연필 아이콘을 클릭하세요.

전체 바닥글 수정

그러면 드래그 앤 드롭 인터페이스를 사용하여 변경할 수 있는 Divi Builder로 이동됩니다.

전역 바닥글 편집

마찬가지로 블로그, 제품 페이지, 작성자 페이지 및 카테고리에 대한 다른 Divi Theme Builder 템플릿을 수정할 수 있습니다. Divi 테마 빌더의 더욱 강력한 기능을 확인해 보세요.

저장된 요소 설정 사용자 정의

페이지 레이아웃과 마찬가지로 현재 사이트는 개별 요소에서 전역 설정을 선택하여 여러 페이지에서 일관된 브랜딩을 유지합니다. 이를 전역 사전 설정 이라고 하며 사이트 전체에 적용할 수도 있습니다.

따라서 하나의 버튼을 수정하면 변경 사항은 사이트의 모든 버튼에 반영됩니다. 요소의 Divi 글로벌 사전 설정을 수정하는 방법은 다음과 같습니다.

커피 사이트의 모든 페이지를 사용자 정의하려면 다음 심층 단계를 따르세요. 브랜드가 올바르게 반영되었다고 생각되면 최종 확인을 수행하고 모든 사람과 공유하세요.

5. 커피 메뉴 추가

고객이 온라인으로 커피를 주문할 수 있도록 웹사이트에 메뉴를 추가해야 합니다. 가장 쉬운 방법은 PDF 파일을 만들어 사이트에 업로드하는 것입니다.

하지만 Coffee Starter 사이트에는 미리 디자인된 메뉴 페이지가 포함되어 있으므로 그럴 필요가 없습니다. 당신이 해야 할 일은 목록과 항목을 전환하는 것뿐입니다.

귀하의 사이트가 준비되었습니다 페이지에서 메뉴 페이지 옆에 있는 연필 아이콘을 클릭하여 Divi Builder를 엽니다. 이제 커피 이름을 변경하고, 설명을 추가하고, 가격을 맞춤 설정할 수 있습니다.

커피 사이트 메뉴 페이지 편집

같은 페이지에 다운로드 가능한 메뉴를 추가할 수도 있습니다. 버튼 모듈을 추가합니다.

버튼 모듈 추가

버튼 이름을 "메뉴 다운로드"와 같이 지정하고 링크 탭에 파일 링크를 추가하세요.

메뉴 링크 추가

그게 다야! 고객이 필터를 사용할 수 있도록 Divi Restro 메뉴 확장을 사용하여 아름다운 메뉴를 만들 수도 있습니다.

6. 커피 사이트의 기능 확장(선택 사항)

이는 선택적인 단계이지만 강력한 플러그인을 통합하는 것은 고객 참여를 높이고 운영을 간소화하며 사이트 성능을 최적화할 수 있는 좋은 방법입니다. 다음은 고도로 기능적인 웹사이트로 웹사이트 방문자를 놀라게 할 수 있는 몇 가지 도구 권장 사항입니다.

  • Bloom을 사용하여 팔로어 수집: Bloom 수신 동의 양식을 사용하여 고객 이메일을 캡처합니다. 참여도를 높이기 위해 이메일 구독자가 귀하의 사이트에서 자주 주문하도록 육성하십시오. Bloom은 Divi와 함께 무료로 제공되지만 MailOptin 및 OptinMonster도 확인할 수 있습니다.
  • Monarch를 통해 사회적 도달 범위를 강화하세요. 사이트에 아름다운 소셜 공유 버튼을 추가하세요. 이는 사이트 방문자가 콘텐츠를 공유하고 도달 범위를 확대하도록 장려하는 쉬운 방법입니다. Monarch는 Divi에서도 무료로 사용할 수 있습니다. 또는 게시물이 게시되자마자 자동으로 공유하는 Revive Social을 사용해 볼 수도 있습니다.
  • 온라인으로 테이블 예약: Amelia를 통해 고객은 온라인으로 테이블이나 이벤트를 사전 예약할 수 있습니다. 이 사이트 에는 분석 섹션과 모바일 장치에서 잘 작동하는 반응형 달력 레이아웃이 함께 제공됩니다.
  • 온라인 주문 및 배달 허용: Divi Quick Sites는 커피 또는 상품 주문을 수락하도록 WooCommerce를 자동으로 구성합니다. 또한 개별 제품 목록, 결제, 장바구니 및 기타 페이지에 대한 페이지 레이아웃을 생성하므로 제품만 추가하면 됩니다.
  • 안전한 결제 게이트웨이: 2Checkout을 통해 안전하게 결제를 처리하세요. 귀하의 사이트와 원활하게 통합되며 고객이 구매를 완료할 수 있는 안전한 환경을 제공합니다.
  • 유기적 방문자 유치: 유기적 트래픽을 유도하려면 블로그 게시물을 게시하고 Rank Math SEO 또는 Yoast와 같은 SEO 플러그인을 설치하여 검색 엔진에 맞게 웹사이트를 최적화하여 가시성을 높이세요.
  • 사이트 보안 강화: 고객은 구매 시 자신의 정보를 입력하므로 온라인 위협으로부터 사이트를 안전하게 보호하려면 Wordfence로 사이트를 보호해야 합니다. 다른 보안 플러그인으로는 Solid Security와 Sucuri가 있습니다.
  • 정기적으로 사이트 백업: UpdraftPlus는 자동 사이트 백업을 지원하므로 사이트가 중단된 경우 안전하게 복원할 수 있습니다.

Divi AI로 10배 더 노력하세요

커피 사이트를 성장시키고 더 많은 고객에게 다가가려면 지속적으로 콘텐츠를 만드는 것이 성장에 매우 중요합니다. 그러나 수동으로 그렇게 하는 것은 시간을 최대한 활용하는 것이 아닙니다. 그렇기 때문에 고품질 콘텐츠를 빠르게 생성하는 스마트 글쓰기 도우미인 Divi AI를 사용하는 것이 좋습니다.

Divi AI를 사용하면 블로그, 뉴스레터, 소셜 미디어 콘텐츠를 빠르고 효율적으로 생성하여 노력의 10배를 얻을 수 있습니다. 브레인스토밍에 몇 시간을 소비하는 대신 Divi AI가 프로세스를 간소화하여 순조롭게 진행되고 그 어느 때보다 빠르게 콘텐츠를 제작할 수 있도록 도와줍니다.

Divi AI 받기

커피숍 사이트 생성에 대한 FAQ

커피숍 웹사이트에 포함해야 할 필수 기능은 무엇입니까?
커피숍 웹사이트에는 메뉴, 위치 세부정보, 연락처 정보, 온라인 주문 및 "회사 소개" 페이지가 있어야 합니다. 고품질 커피 이미지, 고객 리뷰, 소셜 미디어 링크, 업데이트 블로그는 사이트 방문자의 관심을 끌 수 있는 좋은 방법입니다.
커피숍 브랜드를 반영하도록 웹사이트를 디자인하려면 어떻게 해야 합니까?
사이트 전체에 브랜드를 추가하려면 로고, 색상 및 글꼴을 일관되게 사용하십시오. 귀하의 사이트에는 사전 정의된 브랜드 색상과 글꼴이 포함되어 있으므로 Divi Quick Sites는 이를 자동으로 처리합니다. 또한 매장의 아늑하고 현대적이거나 소박한 분위기에 어울리는 이미지와 디자인을 선택해야 합니다.
내 커피숍 웹사이트에 온라인 주문 시스템을 포함해야 합니까?
그렇습니다. 고객이 주문에 더 쉽게 접근할 수 있게 해주고, 특히 바쁜 시간에 매출을 증대시킵니다. Divi Quick Sites는 WooCommerce를 자동으로 통합하므로 온라인 주문을 활성화하려면 제품 목록만 추가하면 됩니다.
내 커피숍 웹사이트에서 모바일 반응성은 얼마나 중요합니까?
매우 중요합니다! 많은 고객이 모바일 장치에서 검색합니다. Divi와 같은 반응형 테마는 자동으로 사이트를 모바일 친화적으로 만들고, 좋은 탐색을 보장하며, SEO를 강화하고, 사용자 경험을 향상시킵니다.
커피숍 웹사이트에 소셜 미디어를 어떻게 통합할 수 있나요?
Monarch는 사용자가 콘텐츠를 홍보하고 고객 사진과 같은 사용자 생성 콘텐츠를 선보일 수 있도록 사이트에 공유 버튼을 추가합니다. Divi 멤버십으로 프리미엄 플러그인인 Monarch를 설치하기만 하면 됩니다.