환상적인 온라인 상점을 만드는 방법 WooCommerce, Divi 및 SiteGround OCT (2021)

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

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

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

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

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

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

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

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

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

이들 각각은 최적화를위한 고급 기능을 제공합니다. WooCommerce 합리적인 가격에 사이트.

즉, 우리가 적극 권장하는 또 다른 호스팅 서비스 Divi WooCommerce 상점은 BlueHost는. 여기에있는 기능은 SiteGround의, 당신은 여전히 WooCommerce-WordPress 전자 상거래 패키지를 통한 집중 호스팅. 계획은 편안하게 처리 할 수 ​​있습니다 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 PayPal의 인기가 높아지고 있음에도 불구하고 WooCommerce 상인. 그러나 고맙게도 간접적 으로라도 PayPal 지불을 수락 할 수 있습니다.

따라서 이것이 선호하는 모드 인 경우 필드를 비워두고 SiteGround라이브 채팅 도구를 통해의 판매 에이전트. PayPal을 통해 프로세스를 완료하는 데 도움이됩니다.

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

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

그런 다음 패키지에 포함 할 추가 추가 서비스를 선택하고 짜잔! 설정에 필요한 전부입니다. Siteground 계정입니다.

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

글쎄요, WordPress 설치 프로세스는 모두 자동화되어 있기 때문에 몇 초가 걸립니다. 모든 것이 설정되면 SiteGround 사이트의 백엔드에서 변경하려는 경우 액세스 할 수있는 적절한 도메인 이름을 제공합니다.

온라인 상점 만들기 Divi

무엇인가 Divi?

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

그렇다면이 테마의 특별한 점은 무엇입니까? 그리고 뛰어난 점이 있습니까? Divi의 WooCommerce?

음, 일반적인 WordPress 테마와 달리 Divi 포괄적 인 팩입니다. 즉, 표준 테마 기능과 편리한 추가 기능이 결합되어 있습니다. Divi WooCommerce 백화점.

뭐야 divi

그래도 오해하지 마십시오. 이기는 하지만 Divi의 WooCommerce 지원은 여기서 주요 초점이며 주제는 그 이상을 할 수 있습니다. 본질적으로, Divi 광범위한 웹 사이트 레이아웃 덕분에 모든 유형의 사이트와 원활하게 통합 될 수 있습니다. 전자 상거래 뿐만이 아닙니다.

그런 다음 끝내기 위해 Divi 자체 직관적 인 WordPress 페이지 빌더 플러그인이 함께 제공됩니다. 자유롭게 사용자 정의 할 수 있습니다. Divi WooCommerce 코딩없이 저장하십시오.

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

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

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

Divi 끌어서 놓기 페이지 빌더

우리가 말했듯이 Divi 두 가지 다양한 맛이 있습니다. 회원 가입시 우아한 테마, 당신은 표준을 찾을 수 있습니다 Divi 대시 보드의 테마와 함께 Divi WordPress 페이지 빌더 플러그인.

그러나이 빌더가 독점적으로 Divi 테마. Elegant Themes에서 얻은 모든 단일 테마에 대한 추가 플러그인으로 제공됩니다.

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

divi 설정

그러나 실수하지 마십시오. 비록 Divi Page Builder는 초보자를 대상으로하며 숙련 된 개발자를 지원하는 편집기입니다. 시각적 기능을 CSS 컨트롤과 체계적으로 결합하여 Divi WooCommerce 다음 단계로 웹 사이트.

그러나 생각하러 오십시오. 개발자가 모든 요소를 ​​디자인 할 필요는 없습니다. Divi WooCommerce 저장. 시각적 기능에만 의존 할 수 있습니다.

그리고 그거 알아?

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

여기에 또 다른 주목할만한 조항은 Divi의 레이아웃 사용자 정의 프로세스의 전반적인 단순화. 예를 들어 새 섹션을 소개하려면 한 번의 클릭으로해야합니다. 그런 다음 모듈을 복제, 제거 및 삽입합니다. Divi WooCommerce 스토어는 몇 번의 버튼 클릭 만 할 수 있습니다.

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

사전 설계 Divi WooCommerce 웹 사이트의 레이아웃

처음부터 웹 사이트를 만드는 고통스럽고 까다로운 과정에서 벗어나기 위해 Divi 워드 프레스 테마는 미리 디자인 된 사이트 템플릿과 함께 제공됩니다. 동일한 템플릿의 다른 레이아웃 옵션이 필요할 수 있으므로 Divi 웹 사이트 디자인을 포괄적 인 팩으로 제공합니다. 결과적으로 다양한 템플릿 레이아웃과 색상을 얻을 수 있습니다.

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

divi 웹 사이트 레이아웃

이제 자신을위한 완벽한 WooCommerce 온라인 스토어에서 다양한 사이트 카테고리를 스크롤하기 만하면됩니다. Divi 테마. 또는 키워드를 사용하여 한 번에 모든 옵션을 검색합니다.

글쎄, 대체로 적절한 것을 식별하는 데 오래 걸리지 않습니다. Divi 온라인 상점 레이아웃. 다음과 통합하기 만하면됩니다. WooCommerce, 그리고 당신은 매력적인 WordPress 전자 상거래 사이트를 설정하게 될 것입니다.

계속해서 특히 눈에 띄는 점은 Divi 외모에만 집중하지 않습니다. 그만큼 WooCommerce 함께 제공되는 레이아웃 Divi 테마도 기능을 염두에두고 만들어졌습니다.

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

Is Divi 적합 WooCommerce?

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

결합 된 Divi 페이지 빌더 및 Divi 테마 오퍼링은 모든 유형의 WordPress 사이트를 설정하는 데 필요한 거의 모든 것을 제공합니다. 그리고 여기에는 완전한 기능을 갖춘 WooCommerce 모든 핵심 전자 상거래 기능과 함께 저장하십시오.

👉 요컨대, Divi 고려할 가치가있는 옵션입니다. WooCommerce 사이트 이유 :

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

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

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

Divi WordPress 테마

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

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

워드 프레스 새로운 테마

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

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

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

워드 프레스 테마 업로드

4 단계 : 설정 WooCommerce 스토어

당신이 Divi 테마 문서 페이지 테마에서 사용할 수있는 모든 도구와 기능을 찾을 수 있지만 전자 상거래 웹 사이트 설정에 중점을 둘 것입니다. 그리고, Divi 테마 완전히 호환된다 WooCommerce 모든 제품을 표시 할 수 있습니다.

멋진 것은 이니셜이 SiteGround 이미 설치된 가입 WooCommerce WordPress 웹 사이트에서 설치하거나 설정하는 것에 대해 걱정할 필요가 없습니다. 대시 보드에서 이미 사용할 수 있어야합니다.

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

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

WooCommerce 새 제품 추가

단계 6

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

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

7 단계 : 탐색 WooCommerce Features

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

WooCommerce 풍모

8 단계 : 홈페이지 만들기

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

워드 프레스 새 페이지

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

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

페이지 빌더 워드 프레스

단계 10

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

헤더 추가

단계 11

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

헤더 사용자 정의

단계 12

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

워드프레스(WordPress) woocommerce 설치

단계 13

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

이 버튼을 조정하십시오

단계 14

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

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

단계 15

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

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

단계 16

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

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

17 단계 : 미리보기 및 게시

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

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

결론

그리고 그것이 당신을 얻는 데 필요한 전부입니다 Divi WooCommerce 온라인 스토어를 사용하여 SiteGround 호스팅 계정.

앞으로는 안심할 수 있습니다. SiteGround WordPress 업데이트 및 WooCommerce 보안. 이것이 관리 형의 근본적인 차이점입니다. WooCommerce 호스팅 및 정기적 인 공유 호스팅 솔루션. 따라서, 그것은 당신에게 집중하는 데 매우 필요한 시간과 공간을 제공합니다 WooCommerce 매장 관리.

그리고 우리가 이미 보았 듯이, 그것은 Divi 테마. 언제든지 액세스 할 수 있습니다. Divi WooCommerce WordPress 백엔드의 레이아웃을 추가로 사용자 정의하십시오. 원하는 경우 전체 디자인을 모두 변경할 수 있습니다. WooCommerce 저장합니다. 선택은 당신의 것입니다.

설정에 대한 질문이있는 경우 Divi 워드 프레스 테마는 아래 댓글란에 알려주세요.

Divi
평가: 5.0 -검토

카탈린 조르지 니

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