WooCommerce, Divi 및 SiteGround로 환상적인 온라인 상점을 만드는 방법 (2020 년 XNUMX 월)

74 천 XNUMX 백만 이상의 사이트가 WordPress 플랫폼에 의존하여 블로그를 호스팅하거나 제품을 판매하거나 전 세계 사람들이 볼 수있는 일일 정보를 작성합니다. 당신이 구축을 시작하면 전자 상거래 웹 사이트 당신은 확실히 선택의 여지가 많으며, WordPress는 이것과 관련이 있습니다.

눈에 띄는 것 전자 상거래 플랫폼 당신은 선택 하시겠습니까? 제품을 판매하기 위해 테마를 잡을 계획입니까, 아니면 처음부터 사이트를 구축하기 위해 지불 할 수있는 사람이 있습니까? 도대체, 전자 상거래 웹 사이트를 통한 판매 계획은 무엇입니까?

편집자 주 :이 게시물은 원래 15 년 2015 월 XNUMX 일에 게시되었으며 정확성과 종합 성을 위해 완전히 개정되고 업데이트되었습니다.

온라인 판매를 시작하기 위해 프런트 엔드 및 백엔드 구조를 찾을 때 선택할 수있는 수천 ~ 수백만 개의 워드 프레스 테마가 있습니다. 호스팅과 거의 동일하지만 (우리는 선호합니다 SiteGround or Bluehost).

최고의 테마에는 빠르고 쉬운 전자 상거래 관리 도구가 포함되어있어 제품을 업로드하고 할인, 보상, 버튼 및 제품 페이지와 같은 것을 관리 할 수 ​​있습니다. 사람들이 귀하의 사이트를 방문 할 때 가장 먼저 보게 될 주제입니다. 그것은 과정을 통해 그들을 안내하고 실제로 경험에 만족하는 사람과 그렇지 않은 사람의 차이를 전달합니다.

요컨대, 워드 프레스 테마는 매우 중요합니다. 디비 Elegant Themes의 워드 프레스 테마 고려해 볼만한 멋진 옵션입니다. 표준 비즈니스 웹 사이트에 사용할 수 있지만 전자 상거래 판매 및 빠른 판매 프로세스를위한 통합도 포함합니다. Divi WordPress 테마를 사용하여 온라인 상점을 작성하는 방법에 대해 알아보십시오.

도메인과 호스팅을 먼저 얻으십시오

💡웹 사이트 생성 과정의 첫 단계는 호스팅 계정, 도메인 이름을 잡고 사이트에 WordPress를 설치하는 것입니다. 디비 다르지 않습니다. 호스팅 및 도메인 이름을 얻는 방법은 많이 있지만 개인적으로 SiteGround는 가장 안전하고 안정적인 옵션 중 하나라고 생각합니다. (자세한 내용은 포괄적 인 내용을 확인하십시오. SiteGround 리뷰).

정말 멋진 점은 SiteGround가 전문화 된 기능을 제공한다는 것입니다 WooCommerce 호스팅 관리 온라인 판매를 시작하는 데 필요한 모든 것을 갖춘 서비스 패키지. 패키지 내에서 시작 계획 초보자를 위해 GrowBig 계획 비즈니스 성장을 위해 GoGeek WooCommerce 매장 설립

이들 각각은 합리적인 가격으로 WooCommerce 사이트를 최적화 할 수있는 고급 기능을 제공합니다.

즉, Divi WooCommerce 매장에 권장하는 또 다른 호스팅 서비스는 BlueHost는. 여기의 기능은 SiteGround와 일치하지 않지만 WordPress 전자 상거래 패키지를 통해 WooCommerce 중심 호스팅을 계속 이용할 수 있습니다. 이 계획은 Divi WooCommerce 매장을 편안하게 처리 할 수 ​​있지만 안타깝게도 관리 서비스를받을 수는 없습니다.

👉 이제 명확성을 위해 SiteGround를 진행해 보겠습니다.

어떻게 시작합니까?

로 이동 SiteGround 관리 형 WooCommerce 호스팅 페이지에서 이상적인 계획을 선택하고 클릭하십시오. 계획을 세우십시오.

제 생각에는 GoGeek 계획 고급 전자 상거래 기능을 갖춘 무제한 WooCommerce 웹 사이트를 지원하기 때문에 가장 적합한 옵션 인 것 같습니다. 더 많은 서버 성능 외에도 우선 순위 지원, WordPress 준비, 주문형 백업 및 수퍼 체커 리소스는 물론 무료 사이트 전송 및 Cloudflare CDN뿐만 아니라 다른 견고한 기능도 제공합니다.

👉 자원 수당에 관한 한이 계획은 다음을 수용합니다.

  • 6GB 사서함
  • 1GB 데이터베이스 스토리지
  • SSD 저장소
  • 계량되지 않은 데이터 전송
  • 30GB 저장 공간
  • 월간 최대 100,000 회 방문

점에 유의하십시오 이 서비스는 한달에 $ 11.95에서 시작합니다BlueHost 호스팅 계정에 일반 WordPress 사이트를 설치하는 방법과 매우 유사합니다.

그러나 초보자에게는 특별한 가격이라는 것을 기억하십시오. 향후 갱신시 34.95 달러로 증가 할 것으로 예상되며, 장거리 운송에 필요한 모든 기능을 고려하면 여전히 합리적인 비용입니다.

선호하는 계획을 선택하면 SiteGround 도메인 등록 페이지로 연결됩니다. 도메인을 이미 소유 한 경우 두 번째 옵션을 선택하고 세부 정보를 입력하십시오. 그렇지 않으면 연간 $ 15.95에 새 도메인 이름 등록을 진행하십시오.

다음 단계는 계정을 만들기 전에 원하는 호스팅 옵션을 선택하고 결제 정보 및 개인 정보를 입력하는 마지막 단계입니다.

물론, 이것들은 이전에 여러 번 다루었던 기본적인 것들입니다. 따라서 전화 번호, 국가, 이름, 이메일, 계정 비밀번호 등을 입력하는 데 어려움이 없어야합니다.

결제 부분에서는 신용 카드 정보를 입력해야합니다. 당신은 둘 중 하나를 진행할 수 있습니다 발견, 마스터 카드 or 비자

그러나 오히려 흥미롭게도 SiteGround WooCommerce 가맹점에서 인기가 높아지고 있음에도 불구하고 PayPal은 표시되지 않습니다. 그러나 고맙게도 간접적으로는 PayPal 결제를 수락 할 수 있습니다.

이것이 선호되는 모드 인 경우 필드를 비워두고 라이브 채팅 도구를 통해 SiteGround의 판매 대리점에 문의하십시오. PayPal을 통해 프로세스를 완료하도록 도와줍니다.

마지막 섹션에는 선호하는 데이터 센터 위치와 가입 기간을 포함하여 호스팅 서비스에 대한 몇 가지 옵션이 있습니다.

이제 Siteground 서버와 WooCommerce 사이트 방문자 간의 데이터 전송 거리를 최소화하려면 목표 시장 영역에 가장 가까운 데이터 센터 위치를 선택하십시오.

그런 다음 패키지에 포함 할 추가 애드온 서비스를 선택하십시오. 이것이 Siteground 계정을 설정하는 데 필요한 전부입니다.

완료되면 계정에 로그인하여 cPanel 영역으로 바로 이동하십시오. 기본 WordPress 자동 설치 프로그램이 있습니다. 따라서 그것을 선택하고 WordPress 로그인 정보를 입력 한 다음 설치 버튼을 누르십시오.

글쎄, 당신은 WordPress 설치 과정이 모두 자동화되기 때문에 몇 초가 걸린다는 것을 알 수 있습니다. 모든 것이 설정되면 SiteGround는 사이트 백엔드에서 항목을 변경하려는 경우 액세스 할 수있는 적절한 도메인 이름을 제공합니다.

Divi로 온라인 쇼핑하기

Divi는 무엇입니까?

좋아, 당신이 그것을 시도하지 않은 경우, 나는 당신이 이미 그것에 대해 들었을 것입니다. 디비 평범한 WooCommerce 테마가 아닙니다. 사실, 그것은 Elegant Themes에서 가장 인기있는 WordPress 테마 중 하나입니다. 흥미롭게도 Divi는 우아한 테마의 주력 제품.

그렇다면이 주제에서 특별한 점은 무엇입니까? Divi의 WooCommerce에 대한 뛰어난 점이 있습니까?

글쎄, 일반적인 WordPress 테마와 달리 Divi는 포괄적 인 팩입니다. 이는 표준 테마 기능과 Divi WooCommerce 상점에 편리한 추가 기능을 결합한 것을 의미합니다.

divi는 무엇인가

그래도 틀리지 마. 비록 Divi의 WooCommerce 지원이 주요 초점이지만, 그 주제는 그 이상입니다. 본질적으로 Divi는 광범위한 웹 사이트 레이아웃 덕분에 모든 유형의 사이트와 완벽하게 통합 될 수 있습니다. 전자 상거래 만이 아닙니다.

그런 다음 Divi는 직관적 인 WordPress 페이지 빌더 플러그인을 제공합니다. 이를 사용하여 코딩없이 Divi WooCommerce 상점을 자유롭게 사용자 정의 할 수 있습니다.

실제로 Divi는 초보자를 위해 개발되었습니다. 따라서 학습 곡선이 거의없는 깔끔한 제어판을 찾을 수 있습니다. 전체 Divi 생태계를 중단하고 설정하고 Divi의 WooCommerce 레이아웃을 사용자 정의하는 데 몇 분 밖에 걸리지 않습니다.

👉 결국, 당신은 활용할 수 있습니다 디비'에스:

  • WooCommerce 온라인 상점을 포함한 모든 유형의 WordPress 웹 사이트에 대한 사용자 정의 가능한 레이아웃 배열.
  • 다양한 웹 사이트 요소 및 디자인 기능을 제공하는 사용하기 쉬운 페이지 빌더.
  • 어떤 형태의 코딩 없이도 유연한 사용자 정의 프로세스 초보자도 편안하게 모든 기능을 갖춘 Divi WooCommerce 매장을 설정하고 조정할 수 있습니다.
  • 간단한 WordPress 통합. Divi는 복잡한 조정없이 완벽하게 설치할 수있는 몇 안되는 외부 WordPress 테마 중 하나입니다.
  • 전자 상거래에 최적화 된 WooCommerce 템플릿.

Divi 드래그 앤 드롭 페이지 빌더

우리가 말했듯이, Divi는 두 가지 맛이 있습니다. 에 멤버십을 지불 할 때 우아한 테마, Divi WordPress Page Builder 플러그인과 함께 대시 보드에 표준 Divi 테마가 있습니다.

그러나이 빌더가 독점적으로 Divi 테마와 관련이 없음을 주목할 가치가 있습니다. Elegant Themes에서 얻은 모든 단일 테마에 대한 추가 플러그인으로 제공됩니다.

즉, Divi WordPress Page Builder는 고급 사용자 정의 기능이있는 끌어서 놓기 편집기입니다. 코딩 경험없이 요소, 열, 행 및 모듈을 이동 및 정의 할 수 있습니다. 즉, Divi 빌더의 유형입니다. WooCommerce 초보자는 얻을 수 있도록 노력하겠습니다.

분할 설정

그러나 실수하지 마십시오. Divi Page Builder는 초보자를 대상으로하지만 숙련 된 개발자를 지원하는 편집기이기도합니다. 시각적 기능과 CSS 컨트롤을 체계적으로 결합하여 Divi WooCommerce 웹 사이트를 한 단계 끌어 올릴 수 있습니다.

그러나 생각하러 오십시오. Divi WooCommerce 상점의 모든 요소를 ​​디자인하기 위해 개발자가 필요하지 않습니다.. 시각적 기능에만 의존 할 수 있습니다.

그리고 그거 알아?

디비 심지어 레이아웃 모듈에 라벨을 붙이고 컬러 코딩하여 전체 프로세스를 훨씬 쉽게 만들려고 시도합니다.

그리고 여기서 주목할만한 또 다른 조항은 레이아웃 커스터마이징 프로세스에 대한 Divi의 전반적인 단순화입니다. 예를 들어 새 섹션을 소개하려면 한 번의 클릭으로 수행해야합니다. 그런 다음 Divi WooCommerce 상점의 모듈을 복제, 제거 및 삽입하면 몇 번의 버튼 클릭만으로 충분합니다.

한편 Divi의 편집 창에는 사이트의 레이아웃 변경 사항이 실시간으로 표시됩니다. 모든 단일 조정을 시각적으로 추적 할 수 있으며 Divi WooCommerce 상점의 전체 전망 디자인에 어떤 영향을 미치는지 확인할 수 있습니다.

사전 디자인 된 Divi WooCommerce 웹 사이트 레이아웃

Divi WordPress Theme에는 웹 사이트를 처음부터 새로 작성해야하는 까다로운 프로세스를 피하기 위해 사전 디자인 된 사이트 템플릿이 포함되어 있습니다. 동일한 템플릿의 다른 레이아웃 옵션이 필요할 수 있으므로 Divi는 웹 사이트 디자인을 종합적인 팩으로 제공합니다. 결과적으로 다양한 템플릿 레이아웃과 색상을 얻을 수 있습니다.

더 정확하게 말하면, Divi는 모든 단일 웹 사이트 팩에 약 7-8 개의 서로 다른 사전 디자인 레이아웃을 제공합니다. 각각이 완전히 구축 된 것을 고려하면 기본 구조를 광범위하게 재 작업하지 않고도 레이아웃을 쉽게 채택 할 수 있습니다. 여기저기서 몇 번만 조정하면됩니다.

divi 웹 사이트 레이아웃

이제 WooCommerce 온라인 상점에 적합한 제품을 찾으려면 Divi Theme의 다양한 사이트 범주를 스크롤하면됩니다. 또는 키워드를 사용하여 모든 옵션을 한 번에 검색하십시오.

글쎄, 대체로 적절한 것을 식별하는 데 오래 걸리지 않습니다. 디비 온라인 상점 레이아웃. WooCommerce와 통합하기 만하면 매력적인 WordPress 전자 상거래 사이트를 구축 할 수 있습니다.

계속해서 눈에 띄는 점 중 하나는 Divi가 외모에만 집중하지 않는다는 것입니다. Divi 테마와 함께 제공되는 WooCommerce 레이아웃은 기능을 염두에두고 구축되었습니다.

따라서 결제, 제품 및 장바구니와 같은 일반적인 상점 페이지 외에도 Divi에는 기본적으로 전자 상거래 모듈이 포함되어 있습니다. 보다 구체적으로, 추천 제품, 판매 품목 등과 같은 섹션을 얻을 수 있습니다.

Divi는 WooCommerce에 적합합니까?

Divi는 근본적으로 올인원 WordPress 테마 솔루션이기 때문에 모든 것이 고려되고 있습니다.

Divi Page Builder와 Divi 테마 오퍼링은 모든 유형의 WordPress 사이트를 설정하는 데 필요한 모든 것을 제공합니다. 여기에는 모든 핵심 전자 상거래 기능을 갖춘 모든 기능을 갖춘 WooCommerce 상점이 포함됩니다.

👉 간단히 말해, Divi는 다음과 같은 이유로 WooCommerce 사이트에서 고려해야 할 옵션입니다.

  • 드래그 앤 드롭 비주얼 편집기를 통해 WooCommerce 웹 사이트를 사용자 정의 할 수 있습니다.
  • Divi를 사용하면 모든 레이아웃에서 조정 사항을 전역 요소로 저장할 수 있습니다.
  • 20 개가 넘는 잘 디자인 된 사전 구축 된 웹 사이트 레이아웃이 제공됩니다.
  • 레이아웃을 쉽게 내 보낸 다음 다른 웹 사이트에서 활용할 수 있습니다.
  • 여러 열, 행 및 컨텐츠 요소로 WooCommerce 상점을 설계 할 수 있습니다.
  • 모든 WooCommerce 레이아웃은 모바일 장치에 최적화되었습니다.
  • 처럼 MS 워드, 텍스트 컨텐츠를 편집하는 것은 클릭하고 입력하는 것만 큼 간단합니다.
  • 전체 사이트 사용자 지정 프로세스가 실시간으로 추적되므로 모든 디자인 변경 사항을 실시간으로 미리 볼 수 있습니다.
  • WooCommerce 레이아웃은 기본 온라인 상점 페이지 및 모듈과 함께 제공됩니다.

1 단계 : 우아한 테마로 가입하여 Divi에 액세스

다음으로 이동하여 시작하십시오. 우아한 테마 제품 페이지 Divi 워드 프레스 테마. 이 페이지는 테마 데모 옵션과 빠른 다운로드 버튼을 제공합니다. Elegant Themes는 여러 클라이언트 사이트를 보유한 개발자 나 수많은 전자 상거래 웹 사이트를 운영하는 사람들에게 좋은 연간 또는 일회성 결제 구조를 사용하여 테마를 판매합니다. 하나의 테마 만 구입할 수는 없지만 개인 계획 연간 67 달러는 일반 테마에 대해 지불 할 수있는 것과 유사하며 더 이상 지원을 원하지 않으면 연간 지불을 중단 할 수 있습니다. 지불하기 전에 테마를 가지고 놀아주십시오.

Divi 워드 프레스 테마

2 단계 : WordPress 사이트에 Divi 설치

가입하면 테마의 다운로드 버튼을 클릭하십시오. 이렇게하면 테마가 컴퓨터에 zip 파일로 저장됩니다. WordPress 사이트 백엔드의 모양 탭으로 이동하여 테마 옵션을 클릭하십시오.

워드 프레스 새로운 테마

3 단계 : 새로 추가 버튼을 클릭합니다

워드 프레스 새로운 테마 추가

테마 업로드 버튼을 클릭하십시오. 테마 zip 파일을 찾아서 업로드하십시오. 프로세스를 진행하여 테마를 완전히 활성화하면 사이트 프론트 엔드에서 테마를 볼 수 있습니다.

워드 프레스 테마 업로드

4 단계 : WooCommerce Store 설정

당신이 Divi 테마 설명서 페이지 테마에서 사용할 수있는 모든 도구와 기능을 찾을 수 있지만 전자 상거래 웹 사이트 설정에 중점을 둘 것입니다. Divi 테마 WooCommerce와 완벽하게 호환되므로 모든 제품을 표시 할 수 있습니다.

가장 좋은 점은 초기 SiteGround 가입이 WordPress 웹 사이트에 WooCommerce를 이미 설치했기 때문에 설치 또는 설정에 대해 걱정할 필요가 없다는 것입니다. 대시 보드에서 이미 사용 가능해야합니다.

5 단계 : WooCommerce에 첫 번째 제품 추가

기술적으로 이미 전자 상거래 사이트에 모든 설정이되어 있지만 실제로는 일부 제품을 추가하여 프런트 엔드에서 전자 상거래 사이트처럼 보이게 만들고 싶습니다. WordPress 대시 보드로 이동하여 아래에서 제품 탭을 클릭하십시오. WooCommerce Add Product 항목을 클릭하십시오.

WooCommerce는 새로운 제품을 추가

단계 6

이렇게하면 새 제품 페이지가 나타납니다. 제품 이름, 설명 및 추천 이미지를 추가하여 사람들이 웹 사이트에서 제품의 모양을 볼 수 있다는 점을 제외하면 모든 WordPress 페이지 편집기와 매우 유사합니다.

전자 상거래는 새로운 제품 필드를 추가합니다

7 단계 : WooCommerce 기능 탐색

설명 영역 아래로 스크롤하면 가능한 모든 WooCommerce 기능을 찾을 수 있습니다. SKU 번호, 재고, 가격, 운송 및 속성 등을 자유롭게 수정하십시오. 기능이 너무 광범위해서 여기에 모든 기능을 설명 할 수는 없지만 WooCommerce 설명서 페이지 전자 상거래 사이트에서 설정할 수있는 모든 것을 이해합니다.

WooCommerce 특징

8 단계 : 홈페이지 만들기

이것의 요점은 홈페이지 만들기 또는 사람들이 귀하의 사이트를 방문했을 때 모든 제품을 특징으로하는 일반 페이지. 따라서 WordPress 대시 보드의 왼쪽에서 페이지> 새로 추가로 이동해야합니다.

워드 프레스 새 페이지

9 단계 : Divi 페이지의 제목 추가

페이지 제목을 작성하십시오. 상단에서 페이지 빌더 사용 버튼을 클릭하고 모듈 삽입 영역을 탭하여 전체 너비 헤더를 포함하십시오. 전체 너비 헤더를 선택할 필요는 없지만이 자습서를 진행하겠습니다.

페이지 빌더 워드 프레스

단계 10

전체 너비 헤더 버튼을 클릭하십시오.

헤더 추가

단계 11

사이트 제목, 소제목 텍스트 및 텍스트 색에 대한 세부 정보를 입력하십시오. 주로 자신의 참조를위한 관리 레이블을 변경할 수도 있습니다. 완료되면 저장 버튼을 누르십시오.

헤더 사용자 정의

단계 12

전체 너비 헤더 모듈의 왼쪽에있는 XNUMX 개의 막대를 탭하여 추가 설정을 변경하십시오.

워드 프레스 woocommerce 설정

단계 13

여기에서 머리글에 멋진 배경색을 지정하고 회사의 비디오를 포함시킬 수도 있습니다.

이 버튼을 조정하십시오

단계 14

헤더가 완성되었으므로 열 삽입 영역을 클릭하여 전자 상거래 모듈을 포함시킬 수 있습니다.

워드 프레스 전자 상거래 설정

단계 15

원하는 열 수를 선택한 다음 나타나는 Insert Modules 옵션을 클릭하십시오. 하단 근처의 상점 버튼을 선택하십시오.

워드 프레스 전자 상거래 설정

단계 16

제품 표시 방법을 자유롭게 수정하십시오. 따라서 페이지의 12 개 항목, 몇 개의 열 및 주문 방법과 함께 최신 제품을 표시 할 수 있습니다. 저장 버튼을 클릭하십시오.

워드 프레스 전자 상거래 설정

17 단계 : 미리보기 및 게시

이 작업이 완료되면 미리보기 또는 게시 단추를 눌러 프론트 엔드의 변경 사항을 볼 수 있습니다. 보시다시피, 제품은 멋지게 표시되며 WordPress 백엔드에서 제품 또는 상점 첫 화면 설정을 변경하기 위해 언제든지 다시 갈 수 있습니다. 축하합니다!

설정에 대한 질문이있는 경우 Divi 워드 프레스 테마아래의 의견란에 알려주십시오.

결론

그리고 그것이 당신을 얻는 데 필요한 전부입니다 디비 WooCommerce 온라인 스토어는 SiteGround 호스팅 계정을 사용하여 시작 및 실행됩니다.

앞으로 SiteGround가 WordPress 업데이트 및 WooCommerce 보안. 이것이 관리 형 WooCommerce 호스팅과 일반 공유 호스팅 솔루션의 근본적인 차이점입니다. 따라서 WooCommerce 매장 관리에 집중할 시간과 공간이 많이 필요합니다.

그리고 우리가 이미 본 것처럼, 그것은 Divi 테마로 산들 바람이되어야합니다. 언제든지 WordPress 백엔드에서 Divi WooCommerce 레이아웃에 액세스하여 추가로 사용자 정의 할 수 있습니다. 원하는 경우 WooCommerce 상점을 처리 할 수있는 다른 레이아웃으로 이동하여 전체 디자인을 완전히 변경할 수도 있습니다. 선택은 당신입니다.

Divi WordPress 테마 설정에 대한 질문이있는 경우 아래 의견 섹션에 알려주십시오.

디비
평가: 5.0 -검토

카탈린 조르지 니

나는 웹 디자인 블로거이고 몇 주를 보냈다가 최고의 전자 상거래 플랫폼 나를 위해. 내 현재 확인 10 대 전자 상거래 사이트 구축 업체.