WordPress 및 Elementor 2020을 사용하여 전자 상거래 웹 사이트를 만드는 방법

게시 됨: 2022-07-10

이 튜토리얼에서는 완전히 사용자 정의할 수 있는 WordPress 및 Elementor 2020을 사용하여 전자 상거래 웹 사이트를 만드는 방법을 가르쳐 드립니다.

WordPress는 전자 상거래 웹 사이트를 포함한 모든 유형의 웹 사이트를 구축하는 데 가장 많이 사용되는 CMS 플랫폼입니다. 또한 Elementor 페이지 빌더를 사용하여 현재 WordPress의 1위이자 가장 인기 있는 페이지 빌더인 놀라운 웹 페이지를 만드는 방법을 배우게 됩니다. WordPress는 인터넷의 1/3 이상을 제어합니다. Sony, Bata, eBay 등과 같은 대부분의 대형 전자 상거래 회사는 웹 사이트의 개발 및 유지 관리를 위해 if를 사용하고 있습니다. WordPress 사용의 가장 좋은 점은 모든 유형의 코딩 언어 또는 기타 언어를 배울 필요가 없다는 것입니다. 귀하의 웹사이트를 만드는 기술 용어. 매력적인 사용자 친화적인 웹사이트를 만드는 데 도움이 되는 많은 내장 템플릿과 레이아웃을 제공하는 간단한 드래그 앤 드롭 플랫폼입니다. 또한 쉽게 가져올 수 있고 몇 분 안에 전자 상거래 웹사이트를 만들고 실행할 수 있는 미리 만들어진 템플릿을 제공합니다.

이 전체 자습서를 진행하면 외부 도움 없이 자신의 웹 사이트를 만들고 실행할 수 있습니다. 이 튜토리얼은 많은 사람들이 웹 사이트를 만들고 이 잔인한 전자 상거래 산업에서 경쟁에서 우위를 점할 수 있도록 도왔습니다. 따라서 이 쉽고 자명한 튜토리얼을 통해 평생 동안 도움이 될 기술을 습득하십시오. 전체 프로세스는 단계별 접근 방식으로 교육되었으며 모든 정보 그래픽 및 그림 표현이 제공되어 가능한 한 쉽게 이해할 수 있습니다.

이제 WordPress와 Elementor 2020을 사용하여 전자 상거래 웹 사이트를 만들어 봅시다.

전자상거래 웹사이트 소개

위 이미지는 일반적인 전자상거래 사이트의 홈페이지 또는 랜딩페이지의 예시입니다. 방문 페이지는 전자 상거래 웹 사이트에서 전환 및 판매에 매우 중요합니다. 따라서 방문 페이지는 특히 전자 상거래 웹 사이트의 경우 배너 및 판매 및 할인 가격 또는 신규 도착 알림을 포함하여 매력적이어야 합니다. 전환을 얻으려면 방문 페이지에서 가장 판매 가능한 제품을 강조하고 해당 제품에 대한 쉬운 링크를 제공해야 합니다. 랜딩 페이지에 제품 카테고리를 표시하고 해당 카테고리에 대한 링크를 제공할 수 있습니다.

상단에는 위치, 전화번호, 연락처가 포함된 헤더가 있으며 왼쪽과 오른쪽에는 Facebook, Twitter, YouTube 등의 소셜 미디어 페이지 아이콘이 있습니다. 그 아래에는 상점이 있습니다. 당사 웹사이트의 제품 쇼핑 페이지로 연결되는 버튼입니다. 또한 사용자가 자신의 개인 대시보드로 이동하여 정보 및 구매에 액세스하고 관리할 수 있는 계정 버튼이 있습니다. 또한 헤더 자체에 비즈니스 로고가 있습니다. 중간에 우리 페이지에 대한 링크가 있습니다. 홈, 회사 소개, 쇼핑, 내 계정 및 문의.

그런 다음 이 튜토리얼에서 만드는 방법을 배우게 될 모든 제품과 배너를 매우 매력적인 방식으로 보여 줍니다. 그 후 뉴스레터 섹션도 있습니다. 여기에서 사용자는 제품, 제안, 쿠폰 등에 대한 알림 및 메일이 아닌 웹사이트를 구독할 수 있습니다. 그 아래에는 당사에 대한 정보를 제공하는 바닥글과 이메일 구독 버튼이 있습니다.

이미지에서 볼 수 있듯이 상점 페이지에는 웹 사이트에서 사용할 수 있는 모든 제품이 나열되어 있으며 사용자는 클릭하여 모든 제품을 확인할 수 있습니다. 사이드 바에는 제품의 가격 필터, 카테고리 목록, 리뷰 및 동영상 광고가 있습니다. 모든 제품 아래에는 리뷰 양식 및 관련 제품도 있습니다. 다음으로 비즈니스 설명과 팀 정보를 표시하는 About Us 페이지가 있습니다. 그런 다음 사용자가 문의 양식을 사용하여 문의할 수 있는 연락처 페이지가 있습니다. 다음으로 개인, 구매 및 지불 정보가 포함된 각 고객에 대한 개인 대시보드가 ​​있는 내 계정 대시보드가 ​​있습니다.

장바구니 페이지는 상품 구매 후 이미지에서 보시는 바와 같이 구매 내역 변경, 총 금액 확인, 결제 진행이 가능한 페이지를 보실 수 있습니다. 그런 다음 방문자는 배송 정보를 입력하고 구매 비용을 지불하여 확인할 수 있습니다. 이 튜토리얼에서 이 모든 페이지를 단계별로 만드는 방법을 배우게 되므로 웹사이트가 완전히 비즈니스를 시작할 수 있습니다.

호스팅 받기 및 WordPress 및 Elementor 설치

  • NameHero 도메인 구매

웹사이트를 만들기 위해 가장 먼저 해야 할 일은 웹사이트에 대한 도메인 이름과 호스팅을 얻는 것입니다. 전체 웹 사이트가 호스팅 사이트를 기반으로 지원되고 지원되므로 좋은 호스팅을 선택해야 하므로 안정성, 기술 지원, 공간, 증권, 디자인, SEO 기회 등과 같은 기준을 기반으로 다양한 호스팅을 확인하고 비교해야 합니다.

시장에는 여러 호스팅 제공업체가 있으며 대부분은 서로 다른 서비스를 제공합니다. 나는 그들 중 많은 것을 시도했고 마침내 내 모든 웹사이트에 대해 NameHero에 정착했습니다. 개인적으로 사용하고 22개의 다른 호스팅과 비교하여 가장 좋은 것을 찾았습니다. 이미지에서 볼 수 있듯이 4가지 옵션이 있으며 전자 상거래 웹 사이트에는 Plus Cloud 옵션을 권장합니다. 내 링크를 사용하여 할인을 받을 수 있습니다. www.namehero.com/darrelwilson

요금제를 주문한 후 도메인 이름, 즉 웹사이트 이름을 선택하게 됩니다. 원하는 이름을 선택할 수 있습니다. .net, .biz 등 필요에 따라 도메인을 선택할 수 있습니다. 다음이자 마지막 단계는 계정 및 지불 세부 정보에 대한 정보를 채우는 것입니다. 스팸 발송자로부터 사용자를 보호하기 위해 애드온 확인란에서 ID 보호를 받는 것이 좋습니다. 다음 페이지를 클릭하고 결제 절차를 거쳐 구매를 완료합니다.

  • 워드프레스 설치

호스팅에 WordPress를 설치하려면 호스팅 페이지의 '클라이언트 영역'으로 이동하여 '클라우드 웹 호스팅'을 클릭합니다. 다음으로 내 제품 및 서비스가 있습니다. 여기에는 도메인 이름이 포함된 Plus Cloud 패키지가 표시됩니다. 이미지에서 볼 수 있듯이 옆에 있는 활성 버튼을 클릭합니다. 다음 왼쪽에 'cpanel로 이동' 버튼이 표시되고 클릭합니다. 이미지에서 볼 수 있듯이 다음 페이지에서 소프트웨어 카테고리로 스크롤하여 'WordPress Manager by Softaculous'를 클릭합니다.

WordPress 설치 프로그램이 열리고 지금 설치 버튼을 클릭합니다. 이미지에서 볼 수 있듯이 버전, 도메인 이름 및 디렉터리가 포함된 설정 페이지가 열립니다. 디렉토리 아래에 기록된 내용을 삭제하십시오. 또한 프로토콜에서 'https://'를 선택하십시오. 사이트 설정에서 사이트 이름과 설명을 변경할 수 있습니다. 우리도 나중에 할 수 있습니다. WordPress 로그인 세부 정보가 될 사용자 이름, 비밀번호 및 이메일과 같은 관리자 세부 정보를 입력하십시오. 다음 페이지에서 템플릿을 사용하지 않으므로 아래로 스크롤하고 '설치'를 클릭합니다. 다음 페이지에 제공된 관리자 URL 링크를 클릭하면 새 WordPress가 만들어지고 인터넷에 게시됩니다. 이제 웹사이트를 편집할 수 있는 이미지와 같이 WordPress 대시보드에 있습니다.

  • 워드프레스 일반 설정

웹사이트를 디자인하기 전에 WordPress 대시보드에서 설정을 변경하는 방법을 알아보겠습니다. 이미지에서 볼 수 있듯이 WordPress 대시보드에서 페이지 왼쪽에 여러 탭이 표시됩니다. 가장 중요한 것 중 하나는 일반적인 WordPress 설정을 찾을 수 있는 '설정' 탭입니다. 퍼머링크를 '요일 및 이름'에서 '게시물 이름'으로 변경하여 웹사이트 주소를 이해하기 쉽도록 해야 합니다. 이것은 SEO에도 매우 중요합니다. WordPress 대시보드의 또 다른 탭은 프로필과 WordPress 대시보드의 모양을 사용자 정의하는 '사용자'입니다. '변경사항 저장'을 클릭하여 업데이트하십시오.

로그아웃한 후 WordPress에 다시 로그인하려면 주소 표시줄에 URL을 입력한 다음 '/wp-admin'을 입력해야 WordPress 로그인 페이지로 이동하여 로그인할 사용자 이름과 비밀번호를 입력할 수 있습니다.

페이지 및 메뉴 만들기

이제 기능적인 웹사이트를 만들었지만 아직 완전한 웹사이트는 아닙니다. 이제 웹사이트에 페이지를 추가해야 합니다. WordPress 대시보드에서 '페이지' 탭을 클릭하고 '새로 추가' 옵션을 선택합니다. 페이지 상단의 '새로 추가' 버튼을 클릭하여 이 작업을 수행할 수도 있습니다. 이렇게 하면 대시보드에 아래 이미지와 같이 새 페이지를 만들 수 있는 페이지 편집기가 열립니다. 여기에서 페이지 이름을 입력하고 페이지 레이아웃을 디자인할 수 있습니다. '게시' 버튼을 클릭하면 웹페이지가 생성됩니다. 여기이 튜토리얼에서는 모든 단일 웹 사이트에 필요한 홈, 회사 소개 및 연락처와 같은 기본 페이지를 만듭니다. 지금은 나중에 할 페이지의 내용으로 들어가지 않습니다. WordPress 대시보드의 페이지 이름 아래에 있는 보기를 클릭하여 이 페이지를 볼 수 있습니다.

별도의 페이지를 만든 후에는 이러한 페이지를 탐색할 수 있는 메뉴를 만들어야 합니다. WordPress를 사용하여 메뉴를 만드는 것은 매우 쉽습니다. 대시보드로 이동하여 '모양' 탭을 찾아 '메뉴'를 클릭하기만 하면 됩니다. 그러면 아래 이미지에서 볼 수 있는 것처럼 메뉴를 만들고 이름을 지정할 수 있는 메뉴 편집기가 열립니다. 메뉴를 만든 후에는 웹사이트의 다른 페이지를 메뉴에 할당할 수 있습니다. 언제든지 메뉴 항목의 시간순을 다시 할당할 수 있으며 끌어서 놓기로 한 항목을 다른 항목 아래에 놓아 드롭다운 메뉴를 만들 수 있습니다.

이제 당신이해야 할 일은 이미지와 같이 왼쪽 상단의 '사용자 정의'를 클릭하고 '홈페이지 설정'으로 이동하여 홈페이지를 '정적 페이지'로 변경하고 홈페이지를 정적 페이지로 선택하는 것입니다. 드롭다운 목록에서 선택합니다. 누군가가 귀하의 웹 사이트를 방문할 때마다 항상 귀하의 홈페이지로 연결되도록 하기 위해 이 작업을 수행합니다. 회사 소개, 연락처 페이지 또는 최신 게시물과 같은 다른 페이지로 직접 이동하는 것은 시청자에게 이해가 되지 않습니다.

엘리멘터 다운로드

이제 전자 상거래 웹 사이트의 웹 페이지를 구축하는 데 사용할 페이지 빌더 Elementor pro를 구입해야 합니다. 내 링크(www.darrelwilson.com/elementor)를 사용하여 구입할 수 있습니다. 해당 페이지에서 사용 가능한 다양한 패키지를 확인할 수 있습니다. 테마 빌더 및 Woocommerce 빌더 서비스가 필요하므로 무료 버전을 사용할 수 없습니다. 패키지를 구매하면 이미지와 같이 계정이 열리고 '플러그인 다운로드'를 클릭해야 하는 동안 zip이 다운로드됩니다.

다음으로 WordPress 웹 사이트에 업로드해야 합니다. WordPress의 대시보드로 이동하여 왼쪽의 도구 모음에서 '플러그인'을 클릭하고 '새로 추가'를 클릭하면 이미지와 같이 추가 플러그인이 열립니다. '플러그인 업로드'를 클릭하고 Elementor zip 파일을 선택하고 설치합니다. '플러그인 활성화'를 클릭하면 WordPress 도구 모음에 새로운 'Elementor' 버튼이 생성됩니다. 거기로 이동하여 '연결 및 활성화'를 클릭하십시오.

워드프레스 테마 설치

이제 웹 사이트에 WordPress 테마를 설치해 보겠습니다. WordPress는 웹 사이트의 모양을 위해 선택할 수 있는 수많은 미리 디자인된 테마를 제공합니다. 워드프레스 대시보드의 "모양" 탭에서 테마를 설치할 수 있는 '테마' 버튼을 찾을 수 있습니다. 사용 가능한 선택 항목에서 테마를 선택할 수 있습니다. 이 튜토리얼의 목적을 위해 인기 메뉴에서 찾을 수 있는 Astra 테마를 사용할 것입니다. 테마 이름 아래의 '활성화'를 클릭합니다. '이 테마를 사용하는 가장 좋은 점은 웹사이트를 실행하는 데 필요한 모든 기본 설정 및 기능이 포함되어 있고 Elementor 페이지 빌더와 매우 호환된다는 것입니다.

Elementor로 페이지 편집

이제 Elementor로 페이지를 편집하는 방법을 알아보겠습니다. WordPress 웹사이트의 홈페이지로 이동하여 상단의 검은색 행에서 '페이지 편집'을 클릭하면 페이지 편집기가 열립니다. 먼저 이미지와 같이 오른쪽의 페이지 설정을 변경해 보겠습니다. 콘텐츠 레이아웃을 '전체 너비 늘이기'로 변경하고 홈페이지에 해당 설정을 원하는 대로 '제목 비활성화'를 선택합니다.

이제 'Edit with Elementor'를 클릭하여 이미지와 같이 Elementor Editor를 엽니다. 여기에서 Elementor 편집기에 대한 빠른 자습서를 살펴보겠습니다. 페이지에 새 섹션을 추가하려면 더하기 버튼을 클릭하고 원하는 열 패턴을 선택합니다. 요소를 추가하려면 왼쪽에 있는 도구 모음에서 9개의 점을 클릭하면 이미지와 같이 요소 목록이 표시됩니다. 원하는 요소를 페이지에 끌어다 놓고 편집할 수 있습니다.

페이지에서 모듈을 클릭하면 해당 편집 도구 모음이 왼쪽에 표시됩니다. 여기 이미지에서 제목을 편집 중이므로 3개의 탭이 포함된 '제목 편집'이 나타납니다. 1st 는 요소의 콘텐츠에 대한 다양한 옵션을 제공하는 콘텐츠입니다. 2nd 는 요소의 색상, 크기, 글꼴 등의 스타일을 디자인할 수 있는 Style입니다. 그리고 세 번째 는 애니메이션 및 기타 항목을 넣을 수 있는 고급입니다. 마찬가지로, 제목 아래에 같은 방식으로 텍스트 상자를 추가, 편집 및 스타일 지정할 수 있습니다.

버튼을 추가하고 클릭 시 열리는 다른 웹사이트에 대한 링크를 제공할 수 있습니다. 사용자가 사이트를 떠나지 않도록 설정을 '새 창 열기'로 변경할 수 있습니다. 아이콘 갤러리에서 버튼의 아이콘을 선택할 수도 있습니다. 이 모든 것은 이미지와 같이 왼쪽의 '편집 버튼' 도구 모음에 있습니다.

이제 각 요소를 개별적으로 디자인하는 대신 Elementor에서 폴더 아이콘을 클릭하여 미리 만들어진 템플릿과 블록을 사용할 수 있습니다. 라이브러리에서 전체 페이지 또는 특정 섹션 또는 블록을 선택할 수 있습니다. 필요에 따라 사용할 수 있는 모든 범주의 블록이 있습니다. 랜딩 페이지의 경우 영웅 카테고리에서 블록을 선택하십시오. 예제에서는 Sound of the future를 선택했습니다.

홈페이지 구축

이제 이 블록을 사용하여 소개 섹션에서 본 Homepage와 유사한 페이지를 생성해 보겠습니다. 먼저 배경을 전체 섹션으로 변경해 보겠습니다. 전체 섹션을 편집하려면 이미지와 같이 섹션 상단의 점 6개를 클릭합니다. 이제 스타일을 탭하여 배경을 변경할 수 있는 '섹션 편집' 도구 모음이 표시됩니다. 다음은 전자상거래 웹사이트에서 사용할 수 있는 무료 데모 이미지에 대한 링크입니다. 다음 Elementor에 이 이미지를 업로드하고 배경 이미지를 선택합니다. 어둡게 보이면 배경 오버레이를 변경할 수 있습니다.

이제 앞에서 했던 것처럼 블록의 요소를 편집할 수 있습니다. 텍스트, 색상, 글꼴, 지형 등을 변경합니다. 요소의 오른쪽 상단에 있는 파란색 버튼을 클릭하여 복제를 사용할 수 있습니다. 텍스트 상자 사이에 구분선을 추가하고 '분할선 편집'을 사용하여 원하는 방식으로 스타일을 지정할 수 있습니다. 이제 주변 공간을 변경하기 위해 패딩을 추가하거나 줄이는 것과 같이 디자인에 따라 버튼을 편집합니다. 나중에 이 버튼을 쇼핑 페이지에 연결할 것입니다. 여기에 아이콘을 추가할 수도 있습니다. 이미지와 같이 '편집 버튼' 도구 모음 아래에 있는 스타일과 애니메이션을 모두 변경할 수 있습니다.

다음으로 요소 도구 모음을 아래로 스크롤하여 Pro Elements 섹션에서 애니메이션 헤드라인을 넣습니다. 이미지와 같이 '애니메이션 헤드라인 편집' 도구 모음을 사용하여 헤드라인 스타일, 모양, 색상, 지형 등을 변경할 수 있습니다. 모든 요소와 스타일을 확인하고 원하는 대로 디자인할 수 있습니다. 완벽한 디자인을 찾는 데는 많은 시행착오가 있습니다. 이러한 변경 사항을 웹사이트에 적용하려면 '업데이트' 버튼을 클릭하십시오.

다음으로 랜딩 페이지에서 여성용 섹션, 남성용 섹션 및 신상품과 같은 다양한 카테고리로 연결되는 섹션을 만들어야 합니다. 새로운 3열 섹션을 추가하고 제목, 텍스트 및 버튼을 추가합니다. 시간과 노력을 절약하기 위해 하나를 만들고 두 번 복제할 수 있습니다. 다시 위 섹션에서 했던 것처럼 이 섹션의 텍스트, 스타일, 배경 등을 편집해야 합니다. 내가 제공한 이미지를 3가지 카테고리 모두의 배경으로 사용할 수 있습니다. 텍스트 편집기를 사용하는 동안 여기 Women's Section에서 하는 것처럼 줄을 끝내고 다음 줄로 이동하려면 이미지와 같이 <br>을 사용합니다.

여기서는 이 섹션에 템플릿이나 블록이 없으므로 처음부터 모든 섹션을 만들고 스타일을 지정해야 합니다. 처음에는 긴 작업처럼 보일 수 있지만 모든 드래그 앤 드롭 및 복제와 같은 트릭을 사용할 수 있습니다. 위 섹션에서 만든 '지금 구매' 버튼을 복사하여 처음부터 만드는 대신 버튼의 스타일을 변경하거나 마우스를 가져갑니다. 당신의 취향에 가장 잘 맞는 것을 찾으려면 모든 요소에 대한 편집 도구 모음의 모든 옵션을 확인해야 합니다. 이것은 당신의 예술적 감각을 위한 훌륭한 연습이 될 것입니다. 열 안의 내용 간격을 변경하려면 열의 왼쪽 상단에 있는 열 편집 아이콘을 클릭하여 열의 패딩을 변경할 수 있는 '열 편집' 도구 모음을 엽니다. 아래 이미지에서 볼 수 있듯이 고급 섹션.

행 열을 복제한 다음 남성 섹션과 신상품의 다른 두 범주에 대한 텍스트와 배경을 편집할 수 있으므로 다시 스타일을 지정할 필요가 없습니다. 각 섹션의 배경 이미지와 텍스트 색상의 스타일을 다르게 지정하여 각 카테고리가 뚜렷하게 보이도록 해야 합니다. 첫 번째 이미지에 밝은 텍스트 색상의 어두운 배경 이미지가 있는 경우 다음 이미지는 반대여야 합니다. 이러한 모든 기술은 디자인을 시작할 때 배우고 이러한 효과를 직접 볼 수 있습니다. 배경 포레이를 사용하여 이미지 위의 텍스트를 강조하고 드래그 앤 드롭 또는 정렬 옵션을 사용하여 텍스트의 위치를 ​​조정하여 배경 이미지의 얼굴을 가리지 않도록 합니다. 이전과 같이 '열 편집'을 사용하여 배경 이미지의 위치를 ​​변경할 수도 있습니다. 섹션 상단의 파란색 버튼을 클릭하여 '섹션 편집'을 열면 섹션 너비를 전체 100%까지 늘릴 수 있습니다.

그 아래에 아이콘을 추가합니다. 이를 위해 먼저 새 섹션을 추가하고 Elementor 도구 모음에서 이미지 상자를 삽입합니다. 이미지에 표시된 대로 내가 제공한 이미지의 아이콘 이미지를 선택합니다. 이 아이콘 상자는 '무료 배송'과 같은 매력적인 제목을 부여하고 아래 텍스트에 설명 및 조건을 작성하여 구매를 유도합니다. '이미지 편집' 도구 모음에서 이미지 위치, 크기, 제목 및 설명 및 텍스트의 색상을 변경하여 이미지 상자의 스타일을 원하는 대로 지정합니다. 모든 아이콘을 다시 디자인할 필요가 없도록 디자인 후 복제합니다. 그런 다음 원하는 목적에 맞게 각 상자의 텍스트를 편집할 수 있습니다. 고급 섹션에서 페이지가 너무 혼잡해 보이지 않도록 패딩을 사용하여 여백을 추가할 수 있습니다.

열에 테두리를 추가하여 눈에 띄게 만들 수 있습니다. '열 편집' 버튼을 클릭하고 '스타일' 카테고리에서 테두리를 추가하고 테두리를 디자인할 수 있습니다. 테두리 유형, 너비, 배치, 반경 등을 선택할 수 있습니다. 여기에서 오른쪽 테두리를 수행한 것처럼 하나 이상의 특정 면에서만 테두리를 선택할 수 있습니다. 도구 모음에서 사용 가능한 모든 디자인 도구를 확인하고 자신을 선택하십시오. 스스로 하면 할수록 모든 도구와 기능에 익숙해지고 더 빠르고 쉬워집니다.

다음으로 '신규 도착' 섹션을 추가합니다. 그러나 이러한 행 사이에 구분선을 추가하기 전에 명확하고 구별 가능하게 보입니다. 다시 새 섹션을 추가하고 Elementor 도구 모음에서 'Divider'를 추가하고 이미지와 같이 'Edit Divider' 도구 모음을 사용하여 디자인합니다. 다음 섹션의 제목으로 사용할 구분선에 'New Arrival'이라는 텍스트를 추가 하여 이미지와 같이 크기, 글꼴 등을 변경하여 매력적으로 보이게 합니다.

제품 만들기

이제 전자상거래 웹사이트에서 판매할 제품을 만들어야 합니다. 상품은 심플(Simple)과 가변(Variable)이 있으며, 심플(Simple) 상품은 사이즈, 색상, 스타일 등 선택의 여지가 없는 반면, 가변(Variable) 상품은 옷의 사이즈나 색상 등 다양한 선택이 가능합니다. 우리는 둘 다 만드는 법을 배울 것입니다.

우커머스

제품을 만들려면 새 플러그인을 추가해야 합니다. 이제 WordPress 대시보드로 이동하여 도구 모음에서 '플러그인'을 클릭한 다음 이전에 했던 것처럼 '새로 추가'를 클릭합니다. 플러그인 라이브러리에서 '우커머스'를 검색하세요. Woocommerce는 내 개인적인 경험에서 최고의 전자 상거래 플러그인입니다. '설치'를 클릭하고 활성화를 클릭합니다. 이제 Woocommerce 플러그인이 이미지와 같이 열립니다. 양식을 작성하고 '계속'을 클릭합니다. 다음으로 업종을 선택합니다. 이 튜토리얼에서는 패션 및 의류 웹사이트를 만들고 있습니다. 다음으로 물리적 및 다운로드의 2가지 옵션이 있는 제품 유형이 있습니다. 둘 다 선택하고 '계속'을 클릭합니다. 그런 다음 몇 가지 질문에 답하고 '계속'을 다시 클릭합니다.

다음으로 플러그인 테마를 선택하고 'Astra' 테마를 선택해야 합니다. 다음으로 저희에게 도움이 될 Jetpack 서비스를 활성화할 수 있는 옵션이 제공되므로 '예'를 선택하면 Jetpack 계정 페이지가 표시되고 세부 정보를 입력하고 계정을 만들 수 있습니다. WordPress 대시보드로 리디렉션되지만 이미지와 같이 도구 모음에서 새로운 'Woocommerce'를 사용할 수 있습니다. 이러한 모든 세금 설정은 나중에 하겠습니다.

이제 제품 만들기를 시작해 보겠습니다. 먼저 이미지와 같이 Woman Green Shirt의 간단한 제품을 만듭니다.

툴바에서 '제품'을 클릭하면 아래 이미지와 같이 '새 제품 추가' 페이지가 열립니다. 제품의 이름과 설명을 입력합니다. 아래 제품 데이터에서 먼저 '단순 제품'을 선택하여 간단한 제품을 만듭니다. 아래의 다음 이미지와 같이 아래에서 예약할 수 있는 정가와 판매가를 넣어주세요. 이 날짜에는 판매 가격이 자동으로 적용됩니다.

다음으로 재고 가용성을 입력할 수 있는 일반 아래의 '재고' 설정을 클릭합니다. 여기에서 이월 주문을 허용하거나 허용하지 않을 수도 있습니다. '허용하지 않음'을 입력하면 제품이 품절된 경우 주문이 접수되지 않습니다. 재고 부족 시 알림을 받으려면 '재고 부족 임계값'을 설정하세요.

다음으로 '배송' 카테고리에서 배송할 상품의 무게와 치수 정보를 입력합니다. '링크된' 제품에서는 관련 제품을 표시하는 '업셀'과 사용자가 원래 제품을 구매한 후 장바구니에 관련 제품을 표시하는 크로스셀을 할 수 있습니다. 구매자가 이 특정 제품을 구매할 때 보여주고 싶은 관련 제품을 추가합니다. '고급' 카테고리에서 구매자에게 메모를 남기고 리뷰를 활성화할 수 있습니다.

이 설정 아래에서 아래로 스크롤하면 이미지와 같이 '제품 간략한 설명'이 있습니다. 여기에 예제 제품에 따라 전체 설명을 작성하십시오. 여기에서 설명의 글꼴과 스타일도 디자인할 수 있습니다. 이미지가 보이면 우측에 '제품 이미지' 옵션이 있습니다. '제품 이미지 설정'을 클릭하면 제품 이미지를 선택하고 업로드할 수 있는 '제품 이미지' 페이지가 열립니다. '제품 이미지' 아래에는 '제품 갤러리'가 있어 이미지와 같이 시청자의 이해를 돕기 위해 다른 각도에서 제품의 다른 이미지를 배치할 수 있습니다.

위의 이미지와 같이 오른쪽 도구 모음에 '제품 카테고리'가 있습니다. 여기에서 제품을 분류할 수 있습니다. '새 카테고리 추가'를 클릭하여 새 카테고리를 생성해 보겠습니다. 'Women's'라는 이름을 입력하고 게시를 클릭합니다. 이제 '제품보기' 버튼을 클릭하여 제품을 볼 수 있습니다. 시청자가 제품을 클릭할 때 제품이 어떻게 표시되는지 보여줍니다. 제품을 볼 수 있고 이미지를 확대하여 더 잘 볼 수 있는 새 제품 팝업이 열립니다. 원하는 것은 무엇이든 다시 편집할 수 있습니다.

디스플레이 페이지의 스타일과 테마가 마음에 들지 않으면 이미지와 같이 오른쪽 툴바의 '아스트라 설정'에서 변경할 수 있습니다. 예를 들어, 사이드바를 제거하려면 '사이드바'를 클릭하고 '사이드바 없음'을 선택합니다. '업데이트'를 클릭하여 변경 사항을 저장하고 제품 보기를 다시 클릭하여 변경 사항을 볼 수 있습니다. 그래서 이것은 간단한 제품을 만드는 방법의 예였습니다. 이 동일한 절차를 사용하여 원하는 만큼 제품과 범주를 추가할 수 있습니다. 제품 페이지에서 카테고리 버튼을 클릭하면 해당 카테고리의 모든 제품이 표시되는 카테고리의 새 페이지가 열립니다. 이 시점에서 이것은 매우 단순하지만 나중에 이 페이지도 디자인할 것입니다.

다음으로 가변 곱을 만드는 방법을 알아보겠습니다. 다시 이전과 같이 '새 제품 추가' 페이지로 이동해야 합니다. 이번에는 남성용 가변 제품을 만들어 보겠습니다. 이전에 했던 것처럼 제품의 제목과 설명을 제공합니다. 이것은 주요 설명이 아니라 아래에 표시되는 추가 작은 설명이며 주요 설명은 '제품 간략 설명'에 작성되어야 합니다. 여기서는 '제품 데이터'를 '가변 제품'으로 변경하겠습니다. Inventory, Shipping, Linked Products 등과 같은 다른 모든 설정은 이전에 생성한 Simple Product와 유사하므로 이러한 세부 사항을 직접 완료할 수 있습니다.

이제 '속성'을 클릭하여 제품에 새 속성이나 특성을 추가합니다. '추가'를 클릭하면 됩니다. 다음으로 이미지와 같이 크기, 색상 등과 같은 제품의 새 속성을 생성합니다. 먼저 '이름' 상자에 크기를 입력합니다. '값' 상자에 Small을 먼저 쓰고 그 다음에 '|' 기호(대괄호 제외)를 입력합니다. 'Shift' 키 + Enter 버튼 위의 키를 눌러 이미지와 같이 이 기호를 작성한 다음 Medium을 입력하고 같은 기호를 다시 입력한 다음 Large를 입력합니다. 해당 기호를 사용하여 S, M, L, XL 등 원하는 만큼 변수를 추가할 수 있습니다. '모든 변형에 사용됨' 확인란을 선택하고 '속성 저장'을 클릭합니다.

다음으로 다른 속성을 추가합니다. '추가' 버튼을 다시 클릭하고 이름 상자에 '색상'을 입력하고 값 상자에 원하는 색상 이름을 Size 속성에서 사용한 기호로 구분하여 추가합니다. 여기에서는 사용 가능한 두 가지 옵션으로 '흰색|파란색'을 씁니다. 변형에 사용 상자를 다시 선택하고 '속성 저장'을 클릭합니다.

이제 이러한 속성을 제품에 적용합니다. '속성' 아래의 '변형'을 클릭하고 '모든 속성에서 변형 생성'을 선택한 다음 '이동'을 클릭합니다. 팝업에서 '예'를 클릭하여 이 옵션을 확인합니다. 그러면 이미지와 같이 옵션이 열립니다. 스몰 화이트, 스몰 블루, 미디엄 화이트, 미디엄 블루, 라지 화이트, 라지 블루의 3가지 사이즈를 2가지 색상으로 조합하여 6가지 바리에이션이 추가된 것을 확인할 수 있습니다.

첫 번째 항목을 클릭하여 이미지와 같이 편집 설정을 엽니다. 먼저 이 변형의 이미지를 업로드해야 합니다. '이미지 업로드'를 클릭하고 갤러리에서 이미지를 선택합니다. 다음으로 이 변형의 정상 가격을 입력해야 합니다. 필수 필드이므로 가격이 동일하더라도 여기에 작성해야 합니다. 다시 단순 제품에서 했던 것처럼 판매 가격을 추가하고 일정을 잡을 수 있습니다. Simple Product에서 했던 것처럼 재고 정보와 배송 정보를 입력할 수 있습니다.

다시 다른 변형에 대해서도 동일한 프로세스를 수행해야 합니다. 따라서 Variationname을 클릭하고 이미지를 업로드하고 Small Blue 등의 가격을 입력합니다. 여기에는 필요한 모든 변형의 이미지와 가격만 표시되지만 다른 모든 세부 정보는 자체 조건에 따라 웹사이트에 표시할 수 있습니다. 변형 이름 위에는 사용자가 제품을 볼 때 제품 상자에서 기본값으로 표시할 변형을 선택할 수 있는 '기본 형식 값'을 입력하는 옵션을 볼 수 있습니다.

제품 간략한 설명과 같은 기타 설정은 이전에 수행한 Simple Product와 유사하므로 제품에 따라 세부 정보를 입력하십시오. 제품 이미지와 동일하며 기본 변형 이미지를 넣어야 합니다. 이 이미지는 제품을 볼 때 시청자에게 먼저 표시되기 때문입니다. 가장 판매 가능한 변형을 기본 제품으로 설정해야 합니다. 보기에서 변형의 다른 이미지를 볼 수 있으므로 가변 제품에 대한 제품 갤러리를 넣을 필요가 없습니다. 새 '남성' 카테고리를 만들고 Simple Product에서 했던 것처럼 해당 확인란을 선택합니다. 웹 사이트에 이러한 변경 사항을 적용하려면 게시를 클릭하십시오.

이제 제품 보기를 클릭하여 시청자가 제품을 어떻게 보는지 확인할 수 있습니다. 이미지에서 볼 수 있듯이 제품이 열립니다. 여기에서는 가변 제품이므로 드롭다운 상자에 속성 및 해당 값 목록이 표시됩니다. 이 상자를 클릭하면 이 제품의 다양한 변형을 볼 수 있습니다. 클릭하면 변형에 대해 설정한 이미지와 가격이 표시됩니다. Astra 설정을 사용하여 마음에 들지 않는 경우에도 제품 페이지의 테마를 변경할 수 있습니다. 일관성을 위해 단일 제품에서 했던 것처럼 설정을 변경하고 사이드바를 제거하고 콘텐츠 레이아웃을 전체 너비로 변경하겠습니다. 원하는 만큼 다양한 변형 제품을 만들 수 있지만 여기에서 했던 것처럼 각 변형의 세부 정보를 입력해야 합니다. 따라서 더 많은 속성과 더 많은 값이 있으면 더 많은 변형이 생깁니다. 한 가지 주의할 점은 제품의 가격은 가장 낮은 가격 변동의 가격과 가장 비싼 변동의 가격을 범위로 표시하기 때문에 범위로 표시된다는 것입니다. 이제 단순 제품과 가변 제품을 모두 만드는 방법을 배웠습니다.

이제 이 제품을 홈페이지에 추가해 보겠습니다. 홈페이지로 이동하여 'Elementor로 편집'을 클릭합니다. New Arrivals 디바이더를 생성한 끝까지 아래로 스크롤합니다. 오른쪽의 Elementor 도구 모음에서 '검색 위젯' 표시줄을 클릭하고 제품을 입력합니다. Product 요소를 선택하고 New Arrivals 구분선 아래에 있는 페이지의 상자에 끌어다 놓으면 거기에 제품이 표시됩니다.

이미지에서 볼 수 있는 것처럼 '제품 편집' 도구 모음에는 여기에 표시하려는 제품의 열과 행 수가 있으므로 일부 제품이 이 페이지에 표시되지 않습니다. 스타일 범주를 사용하여 이미지의 열 간격 및 행 간격, 정렬, 테두리를 변경할 수도 있습니다. 색상, 글꼴, 간격, 지형 등 여기에서 제품 이름의 제목 스타일을 지정할 수 있습니다. 채워진 별과 비어 있는 별 등급 모두 동일합니다. 가격도 마찬가지로 일반 가격과 판매 가격 모두에 대해 글꼴, 색상, 지형 등을 변경할 수 있습니다. 다음은 버튼입니다. 배경색, 텍스트 색상, 테두리 색상 등 원하는 대로 버튼을 디자인할 수 있습니다. Elementor를 사용하면 이 모든 편집 작업을 매우 쉽게 수행할 수 있습니다. 사용 가능한 모든 편집 도구를 사용하고 사용하기만 하면 모든 결과가 눈앞에 나타납니다.

또한 제품에 할인이 있을 때 제품 위에 플래시 배너를 표시하는 판매가 있을 때 표시되도록 디자인할 수 있는 '세일 플래시' 옵션이 있습니다. 고객이 귀하의 홈페이지를 방문할 때 귀하의 제품으로 고객을 유치하려면 이를 사용하십시오. 모든 디자인 옵션은 지금까지 배운 것과 유사하므로 모든 옵션을 통해 성장하고 가장 적합한 디자인을 선택할 수 있습니다.

쿼리 옵션에서 이 섹션에 표시할 제품을 선택할 수 있습니다. 예를 들어, 여성용 제품만 이 섹션에 표시하려면 소스 상자에서 '최신 제품'을 선택하십시오. 드롭다운 상자에서 새로 도착한 섹션이므로 '포함'을 클릭하십시오. 그런 다음 '포함 기준' 상자에 용어를 작성하고 용어 상자가 되도록 하는 용어 옵션을 선택합니다. 용어 상자에 '여성'이라고 쓰고 이미지와 같이 '제품 카테고리: 여성'을 선택합니다. 업데이트를 클릭하여 웹사이트에 적용하십시오. 이러한 방식으로 웹사이트의 어느 부분에서나 제품 디스플레이 섹션을 만들 수 있습니다.

Elementor 전자 상거래 템플릿

이 링크에서 내 웹 사이트에서 무료로 준비한 레이아웃을 지금 준비한 전자 상거래 웹 사이트의 템플릿을 제공했습니다.https://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

테마 커스터마이저

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

플러그인

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

  • Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

  • Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

  • Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

  • Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

  • 맞춤형 제품 페이지

이제 동일한 기술을 사용하여 제품 페이지를 사용자 정의합니다. 지금 제품을 클릭하면 제품을 만들 때 본 기본 테마의 제품 페이지가 표시됩니다. 다시 Elementortheme 빌더로 이동하고 옆에 있는 + 아이콘을 클릭하여 새 단일 제품 테마를 추가합니다. 여기에 제공된 템플릿을 사용할 수 있지만 이 자습서에서는 처음부터 템플릿을 빌드합니다. 따라서 먼저 2파트 섹션을 추가하고 요소 탭을 클릭합니다. 여기에서 페이지를 만들 때 볼 수 없는 이미지에 표시된 것처럼 제품을 위해 특별히 만들어진 모든 요소를 ​​볼 수 있습니다.

먼저 제품의 분류와 같은 이동 경로를 추가합니다. 이제 이미지에서 볼 수 있는 것처럼 도구 모음을 사용하여 색상, 크기, 패딩 등과 같은 이동 경로의 스타일을 편집할 수 있습니다. 오른쪽의 사이드바에서 '제품 제목' 요소를 추가하고 이전과 같이 도구 모음을 사용하여 해당 요소의 스타일을 디자인합니다. 다음으로 같은 방법으로 제품 이미지를 추가해 보겠습니다. 제품 이미지 요소를 클릭하고 도구 모음을 사용하여 스타일을 편집합니다. 다음으로 비슷한 방법으로 간단한 설명을 추가합니다. 제목과 설명 사이에 구분선을 추가할 수 있습니다. 다음으로 제품 카테고리를 입력해야 합니다. 이를 위해 'Product Meta' 요소를 선택하고 설명 아래에 놓고 스타일도 지정합니다. 다음으로 그 아래에 'Price' 요소를 추가하면 스타일도 다시 변경할 수 있습니다. 그런 다음 가격 아래에 '장바구니에 추가' 버튼을 넣습니다. 가변형 제품이므로 자동으로 변형 옵션을 제공합니다. 다음으로 소셜 아이콘을 추가하고 양식, 추가 정보 등 원하는 요소를 검토할 수 있습니다. 제품 페이지에 원하는 요소를 추가 및 디자인한 후 '게시'를 클릭합니다. 표시 페이지의 조건에 '모든 제품'을 포함하여 생성한 모든 제품에 이 템플릿의 효과를 부여합니다. 원하는 경우 다른 제품 카테고리에 대해 다른 테마를 만들 수 있습니다. 특정 카테고리에만 포함되도록 조건을 변경하면 됩니다. 모든 제품에 적용할 때 모든 제품 페이지가 이 템플릿으로 업데이트됩니다.

  • 사용자 정의 결제 및 장바구니 페이지

이제 사용자 정의된 체크아웃 및 장바구니 페이지를 디자인할 것입니다. 결제 및 장바구니 페이지는 테마 빌더가 없으므로 Elementor로 편집합니다. 장바구니 페이지로 이동하여 Elementor로 편집을 클릭합니다. 다른 페이지와 마찬가지로 Elementor 요소를 사용하여 원하는 방식으로 편집하고 스타일을 지정할 수 있습니다. 이제 텍스트, 아이콘, 쿠폰 버튼 등을 편집하고 글꼴, 색상, 지형 등의 스타일을 직접 지정할 수 있습니다. 그러나 여기에서 Cart라는 제목과 같은 실제 테마의 일부를 편집하는 것은 Elementor에서는 불가능합니다. 이를 수정하려면 워드프레스 자체에서 수정해야 하므로 '페이지 수정'을 클릭하고 오른쪽 하단 모서리에 있는 비활성화 섹션에서 '제목 비활성화' 확인란을 선택합니다. 워드프레스 테마.

결제 페이지와 같은 방식으로 편집 및 디자인할 수 있습니다. 같은 방식으로 고객의 '내 계정' 페이지를 기본 테마가 보기 좋지 않아 디자인할 수 있습니다. Elementor로 편집할 수 있습니다. 그리고 나는 또한 당신이 빨리 디자인할 수 있도록 이 모든 페이지의 템플릿에 대한 zip 파일을 넣은 링크도 제공했습니다.

우커머스 설정

지금까지 Elementor 및 Theme Builder를 사용하여 페이지를 만드는 방법을 배웠고 웹 사이트 구축이 완료되었습니다. 이제 이 웹사이트를 실행하려면 Woocommerce 설정에 대해 배워야 합니다. WordPress 대시보드로 이동하여 Woocommerce를 클릭하고 '설정'을 선택하면 이미지와 같이 Woocommerce의 일반 설정 탭이 열립니다.

  • 일반 설정

여기에 주소를 입력하고 판매하려는 국가를 선택하고 세금을 활성화하고 쿠폰 코드를 활성화할 수 있습니다. 활성화하려면 이 모든 상자를 선택하십시오. 그 아래에서 국가에 따라 통화를 변경할 수 있습니다.

  • 제품 탭

다음 탭은 설정의 맨 위 행에 있는 제품 탭으로, 대부분의 설정이 여기에 매우 구체적이며 제품에 대한 리뷰와 별점을 활성화할 수 있는 리뷰 섹션을 제외하고는 사용하지 않을 것입니다. 또한 이미지와 같이 리뷰에서 실제 구매자에게 인증된 사용자 태그를 표시할 수 있습니다. 또한 무게, 치수 등과 같은 제품의 배송 세부 정보를 입력할 수도 있습니다.

  • 세금 탭

다음으로 세금 탭에서 자동 세금 계산을 활성화하거나 비활성화할 수 있습니다. 세금 계산은 국가 및 비즈니스에 따라 매우 복잡할 수 있으므로 자동 계산이 작동하지 않을 수 있습니다. 그러나 다른 배송 주소와 장바구니 항목에 따라 세금을 설정할 수 있는 옵션이 있습니다. 세금 계산에 도움이 되는 무료 및 유료 서비스를 받을 수 있는 www.taxjar.com에 대한 링크를 제공했습니다. 또한 상점에서와 같이 다양한 지점에서 세금 포함 또는 제외 가격을 표시하도록 선택할 수 있습니다.

  • 배송 탭

다음 탭은 '배송'입니다. 먼저 '배송 지역 추가'를 클릭하고 지역 이름, 지역의 특정 지역을 추가하고 이미지와 같이 다양한 배송 방법에 따라 배송비를 설정합니다. 여기에서는 5달러 고정 요금을 넣고 다른 하나는 무료 배송 방법을 적용하는 고정 요금 방법을 사용했습니다. 아래 수정 버튼을 클릭하여 최소 주문 금액 또는 쿠폰 요구 사항의 조건을 추가하십시오. 여기에 최소 $50 주문 요구 사항이 선택되어 있습니다. 여러 구역과 구역 각각에 대해 여러 배송 방법 및 요금을 추가할 수 있습니다. 또한 특정 요율을 지정하지 않은 영역에 포함되지 않는 위치에 대한 기본값이 있습니다. 그래서 여기에 기본적으로 해당 구역에 대해 $10의 기본 요금을 적용했습니다.

  • 계정 및 개인 정보 탭

'계정 및 개인정보 보호' 탭에서 구매하기 전에 고객의 계정을 생성하거나 먼저 계정 없이 구매하도록 허용하는 옵션을 선택하고 Checkout 시 계정을 생성하고 생성 시 다양한 기타 옵션을 선택할 수 있습니다. 사용자 이름, 비밀번호 등과 같은 계정은 매우 자명하므로 스스로 확인할 수 있습니다. 또한 여기에서 법률에서 요구하는 개인 정보 보호 정책을 추가할 수 있습니다. 개인 데이터 보유에서 사용자의 개인 데이터가 삭제되는 시간에 대한 옵션도 있습니다.

  • 이메일 탭

또한 '이메일' 탭에는 새 주문이나 취소된 주문과 같이 웹사이트에서 고객에게 보내고 받을 모든 자동 이메일에 대한 설정이 있습니다. 여기에서 이러한 모든 상황에서 고객에게 받거나 보낼 이메일 형식을 편집할 수 있습니다. 이 목적을 위해 플러그인을 추가하여 더 나은 품질의 이메일을 받을 수 있습니다. 플러그인으로 이동하여 'Kadence Woocommerce Email 디자이너'를 설치하고. 이 플러그인을 사용하면 이미지와 같이 Woocommerce 사이드바의 플러그인으로 이동하여 여기에서 편집할 수 있는 사용자 정의 스타일을 사용하여 이메일 내용, 머리글, 바닥글, 텍스트 등을 디자인할 수 있습니다.

  • 지불

이제 '결제' 탭으로 이동하여 고객에게 허용된 결제 방법을 선택할 수 있습니다. 선택할 수 있는 옵션이 많이 있지만 아래 이미지와 같이 활성화 버튼을 클릭하여 여기에서 'Stripes' 및 'PayPal'을 활성화합니다.

  1. 페이팔

이제 PayPal에 대한 결제 설정을 먼저 설정하겠습니다. '설정'을 클릭하여 PayPal 설정 페이지를 열고 결제 상자에 대한 제목, 설명 및 PayPal 이메일 계정을 입력하고 '변경 사항 저장'을 클릭합니다. '를 클릭하여 웹사이트를 PayPal과 통합할 수 있습니다. PayPal이 없는 경우 웹사이트로 이동하여 무료로 가입하여 만들 수 있습니다. 이미지와 같이 PayPal 이메일 상자에 입력할 이메일 주소로 가입하면 됩니다. 사용 가능한 가장 인기있는 지불 방법 중 하나입니다.

  1. 줄무늬

다음으로 스트라이프로 결제를 설정합니다. 따라서 옆에 있는 '관리' 버튼을 클릭합니다. PayPal 설정과 동일한 방법으로 먼저 지불 상자의 제목, 설명을 입력합니다. 다음으로 테스트 게시 가능 키와 테스트 비밀 키가 있습니다. www.stripe.com으로 이동하여 무료 계정을 만들 수 있습니다. 계정을 만들려면 은행 계좌가 있어야 합니다. 무료 서비스인 스트라이프 계정을 만든 후 웹사이트에 통합할 수 있습니다. 이를 위해 스트라이프 계정에 로그인한 후 이미지와 같이 '개발자'를 클릭하고 'API 키'를 선택합니다. 웹사이트에 게시 가능한 키를 게시 가능한 키 상자에 복사하고 비밀 키를 비밀 키 상자에 복사합니다. '변경 사항 저장'을 클릭하면 이제 웹사이트에서 매우 낮은 거래 수수료로 전 세계 어디에서나 신용 카드 결제를 수락할 수 있습니다. 여기에서 우리는 스트라이프 계정에서 테스트 데이터 보기 버튼을 활성화하고 Woocommerce 설정 페이지에서 '테스트 모드 활성화' 확인란을 선택했지만 결제 시스템을 사용할 준비가 되면 비활성화합니다. .

이제 주문을 하고 무언가를 구매하여 웹사이트를 테스트할 수 있으며 모든 것이 제대로 되어 있는지 확인하기 위해 지불을 할 수도 있습니다. 내 계정 페이지에서 고객은 자신의 개인 대시보드를 확인, 편집 또는 취소할 수 있습니다. 주문, 배송 및 청구 주소 편집, 지불 방법 및 계정 세부 정보 설정. 모든 과거 주문 보기도 상태와 함께 주문 목록에 표시됩니다.

모바일 최적화

모바일 최적화는 웹사이트를 모바일 장치에 대해 사용자 친화적으로 보이게 만드는 것을 의미합니다. 모바일 최적화는 오늘날의 시나리오에서 매우 중요합니다. 왜냐하면 a) 많은 사람들이 인터넷 서핑을 위해 모바일 장치를 사용하고 b) 새로운 Google 알고리즘에 따르면 귀하의 웹사이트가 모바일에 최적화되어 있지 않으면 순위가 낮아져 귀하에게 재앙이 될 수 있기 때문입니다. 웹사이트 트래픽 및 SEO.

모바일 최적화는 Elementor 편집기를 사용하여 간단합니다. 다시 Elementor 대시보드로 돌아가 보겠습니다. 도구 모음의 맨 아래에 '반응형 모드' 버튼이 있습니다. 이 버튼을 클릭하면 3가지 옵션이 있는 드롭다운 목록이 열립니다. 데스크탑, 태블릿 및 모바일. 지금까지 우리는 데스크톱 뷰어가 어떻게 보일지에 따라 웹사이트를 디자인했습니다. 이제 '태블릿'을 클릭하면 태블릿 브라우저에서 어떻게 보일지 미리 볼 수 있습니다. 마찬가지로 '모바일' 모드에서도 확인할 수 있습니다. 순서가 잘못되었거나 시각적으로 매력적이지 않은 경우 웹 페이지를 편집할 수 있습니다.

여기에서는 이미지에서 볼 수 있듯이 첫 번째 제목이 태블릿 모드에 비해 너무 크고 '50% OFF'는 너무 작아서 조정해야 합니다. 페이지의 모든 요소를 ​​확인하여 다시 디자인해야 할 사항이 있는지 확인하십시오. 이러한 모든 변경 사항은 업데이트를 클릭하면 태블릿 모드에 적용됩니다. 모바일 모드에도 동일하게 적용됩니다. 제목 텍스트의 크기, 버튼 정렬, 배너 및 제목을 조정합니다.

중요하지 않다고 생각되는 경우 모바일 또는 태블릿 버전에서 필요한 일부 섹션을 비활성화할 수 있습니다. 이를 위해 숨기려는 섹션을 선택하고 '섹션 편집' 도구 모음의 고급 카테고리로 이동한 다음 '반응형'을 클릭하고 가시성에서 다음과 같이 데스크톱, 태블릿 또는 모바일 버전에서 섹션을 숨기도록 선택할 수 있습니다. image.같은 작업을 다른 섹션이나 요소로 수행할 수 있습니다. 배경 이미지, 글꼴 크기 등 태블릿 또는 모바일 모드에 맞게 모든 것을 다르게 디자인할 수 있습니다.

문의 양식

이제 방문자가 연락처 정보를 입력하고 귀하의 이메일로 바로 이동할 수 있는 '연락처' 페이지를 만드는 방법에 대해 알아보겠습니다. 페이지의 기본 디자인은 Elementor 편집기 또는 Theme Customizer를 사용하여 직접 할 수 있습니다. 유일한 중요한 것은 이미지에 표시된 연락처 양식입니다. 따라서 Elementor 도구 모음에서 양식을 검색하고 섹션에 끌어다 놓으면 '양식 편집' 도구 모음을 사용하여 양식의 텍스트와 디자인을 편집할 수 있으며 지금쯤이면 스스로 할 수 있을 것이라고 생각합니다. 양식 편집 도구 모음에는 여기에서 다루지 않지만 만들 수 있는 기본 양식에 많은 고급 설정이 있습니다.

쿠폰

사이트에 쿠폰을 추가하려면 사용자 지정 버튼 옆에 있는 상단 표시줄의 '+ 새로 만들기'를 클릭하고 쿠폰을 선택합니다. 워드프레스 사이드 툴바의 쿠폰은 이미지와 같이 '마케팅' 섹션 아래에 있습니다. 여기에서 새 쿠폰 코드를 추가하고 할인 유형을 백분율 할인, 고정 장바구니 할인 또는 고정 제품 할인으로 선택하고 할인 금액 또는 백분율을 입력하고 쿠폰의 만료일을 입력할 수 있습니다. '이용 제한' 항목에서 최소 지출, 개별 사용 또는 다른 쿠폰과의 연계와 같은 조건을 설정하고, 쿠폰에서 제품 또는 제품 카테고리를 포함하거나 제외할 수 있습니다. 사용 한도에서 본 쿠폰의 사용 횟수를 선택하거나 특정 상품에 한하여 한도 내에서 사용할 수 있습니다. 게시를 클릭하여 웹사이트에 이 쿠폰을 적용하고 구매 시 쿠폰 코드를 적용하여 장바구니 페이지에서 테스트하십시오.

이 튜토리얼이 독자들에게 도움이 되었기를 진심으로 바랍니다. 이제 처음부터 웹사이트를 직접 만들 수 있습니다. 도움이 필요하시면 제 웹사이트와 페이스북 페이지를 방문하셔서 댓글을 남겨주세요. 웹 사이트 구축 및 Elementor 사용에 대한 기타 리소스가 많이 있습니다. 여기에서 확인할 수 있습니다. 이 튜토리얼을 읽어주셔서 감사합니다. 피드백과 질문은 언제나 환영합니다.