Extra로 제품 리뷰 사이트 구축 – 2부

Extra를 사용하여 제품 리뷰 사이트를 개발하는 방법에 대한 이 4부 시리즈 중 2부에 오신 것을 환영합니다. 제품 리뷰 사이트 개발을 시작하는 방법에 대해 고민하고 있다면 이 시리즈가 적합합니다. 내장된 리뷰 기능과 스마트한 게시물 분류 기능을 갖춘 Extra는 멋진 리뷰, 제품 게시물 템플릿, 메가 메뉴 및 카테고리 레이아웃을 몇 분 안에 만들 수 있도록 특별히 준비되어 있습니다. 저와 함께 Extra의 힘을 살펴보세요.

이 시리즈의 1부에서는 테마 옵션 및 테마 사용자 지정 설정을 설정하여 제품 리뷰 사이트를 구축하는 여정을 시작했습니다.

오늘 우리는 첫 번째 제품 리뷰를 새 게시물로 추가하고 Divi Builder 및 Extra 테마 설정을 사용하여 해당 게시물의 게시물 레이아웃을 사용자 지정하여 시작하겠습니다. 이 튜토리얼을 완료하면 라이브러리에서 가져와서 나머지 게시물을 쉽게 만들 수 있는 저장된 게시물 템플릿을 갖게 됩니다.

다음은 우리가 구축할 사항에 대한 미리보기입니다.

디자인 요소 준비

시리즈의 이 부분에 제품을 추가할 예정이므로 제품 이미지가 필요합니다. 이 튜토리얼에서는 각 카테고리에 3개의 제품이 있는 4개의 카테고리가 있으므로 총 12개의 이미지를 사용합니다. 더 깔끔한 느낌을 주기 위해 흰색 배경이 있는 셔터스톡의 스톡 이미지를 사용하고 있습니다.

포스트 레이아웃을 디자인하기 위해 우리는 Visual Builder와 약간의 Custom CSS를 사용할 것입니다.

시작하자.

Extra로 제품 리뷰 사이트 구축 – 2부

YouTube 채널 구독

첫 번째 제품 리뷰를 새 게시물로 추가하기

WordPress 대시보드에서 게시물 > 새로 추가 로 이동합니다.

각 게시물은 제품 리뷰가 되므로 게시물 이름은 제품 이름이어야 합니다. 내 제품은 피트니스 트래커가 될 것이므로 게시물 제목으로 "Fitness Tracker"를 입력합니다.

참고 : 아직 설정하지 않았다면 지금이 URL에 제품 이름만 포함되도록 영구 링크 설정을 "게시물 이름" 옵션으로 설정하는 것이 좋습니다(물론 기본 설정).

그런 다음 "Divi Builder 사용" 버튼을 클릭한 다음 "Visual Builder 사용" 버튼을 클릭하여 Visual Builder를 배포합니다.

Visual Builder에서 한 열 행을 삽입하고 열에 텍스트 모듈을 추가합니다.

텍스트 모듈 설정의 콘텐츠 탭에서 콘텐츠 상자에 다음 html을 입력합니다("시각적" 탭이 아니라 "텍스트" 탭에서 작업 중인지 확인).

<h2 class="subtitle fancy"><span>Product Description</span></h2>

이것은 다른 섹션에 대한 "멋진" 자막 역할을 합니다. 나중에 사용자 정의 CSS로 스타일을 지정합니다.

h2 태그 바로 아래에 제품 설명 텍스트를 추가할 수 있습니다. 지금은 "lorem ipsum"을 사용하고 있습니다.

현재 행 아래에 다른 1열 행을 추가하고 여기에 다른 텍스트 모듈을 추가하십시오. 텍스트 모듈 설정에서 콘텐츠 섹션의 텍스트 탭에 다음 "Pros & Cons" h2 태그를 삽입하여 다른 html 자막을 추가합니다.

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

이것은 제품 리뷰의 장단점 섹션을 시작합니다.

다음으로 이전 행 아래에 1/2 1/2(2열) 행을 추가합니다. 왼쪽 열에 텍스트 모듈을 추가하고 "Pros"라는 텍스트가 포함된 h3 제목을 입력합니다.

이제 해당 텍스트 모듈을 복제하고 복제된 모듈을 오른쪽 열로 끕니다. 새 텍스트 모듈의 h3 제목을 "Cons"로 변경합니다.

팁 : Visual Builder에서 설정을 여는 대신 텍스트 상자를 클릭하고 새 제목을 입력하기만 하면 됩니다.

다음으로 우리는 광고 모듈을 사용하여 장단점 제목 아래에 일부 하위 항목을 추가할 것입니다.

왼쪽 열의 "Pros" 텍스트 모듈 아래에 Blurb 모듈을 추가합니다. Blurb 설정의 콘텐츠 탭에서 콘텐츠 상자에 한 줄의 텍스트(지금은 더미 텍스트를 사용하고 있습니다)를 추가합니다.

그런 다음 아래로 스크롤하여 "아이콘 사용"을 선택합니다. 표시되는 아이콘 상자에서 더하기 기호를 선택합니다.

디자인 탭을 클릭하고 다음을 업데이트합니다.

아이콘 색상: #ffffff

원 아이콘: 예

원 색상: #5bd999

이미지/아이콘 배치: 왼쪽

설정 저장

해당 광고 문구 모듈을 복제(또는 복사)하고 "단점" 텍스트 모듈 아래로 드래그(또는 붙여넣기)하십시오. 그런 다음 Blurb 설정 디자인 탭을 다음 원 색상으로 업데이트합니다. #e6567a

설정 저장

특정 제품에 얼마나 많은 것이 필요할지 모르기 때문에 이제 각 열의 광고 문구 모듈을 몇 번 복제하십시오.

이제 장단점이 포함된 행 설정으로 이동합니다. 콘텐츠 탭 에서 다음을 업데이트합니다.

열 1 배경: #f8f8f8

열 2 배경: #f8f8f8

설계 탭 에서 다음을 업데이트합니다.

사용자 지정 거터 너비 사용: 예

거터 폭: 1

열 높이 균등화: 예

열 1 패딩: 20px(위), 20px(오른쪽), 20px(아래), 20px(왼쪽)

2열 패딩: 20px(위), 20px(오른쪽), 20px(아래), 20px(왼쪽)

고급 탭 에서 다음 사용자 정의 CSS를 1열 기본 요소 텍스트 상자에 추가합니다.

 border-top: 10px solid #5bd999; 

Column 2 Main Element 텍스트 상자에 다음 CSS를 추가합니다.

 border-top: 10px solid #e6567a; 

팁 : 업데이트된 Extra 버전이 있는 경우 새 애니메이션을 웹사이트에 적용할 수 있어야 합니다. 디자인 탭 아래의 행 설정으로 이동하고 원하는 애니메이션 스타일을 선택하여 장단점 행에 애니메이션을 추가하십시오. 이렇게 하면 사용자가 페이지를 아래로 스크롤할 때 장단점 섹션이 표시됩니다.

설정 저장

"Pros & Cons" 부제목이 있는 두 번째 행을 복사(또는 복사)하고 방금 완료한 행 아래로 드래그(또는 붙여넣기)합니다. 그런 다음 h2 헤더를 "사양"으로 변경합니다.

장단점 목록 항목이 포함된 2열 행을 복제하고 "사양"이라는 제목의 새 텍스트 모듈 아래에 넣습니다. 열에서 "Pros" 및 "Cons" 헤더가 포함된 두 개의 텍스트 모듈을 삭제합니다.

이제 왼쪽 열에서 첫 번째 광고 모듈의 Blurb 설정을 클릭합니다.

콘텐츠 탭 에서 아이콘을 확인 표시로 변경합니다.

디자인 탭 에서 원 색상을 #222222로 변경합니다.

설정 저장

이제 다른 블러브 모듈을 삭제하고 복제하고 올바른 위치로 드래그하여 방금 업데이트한 모듈로 교체합니다.

이제 행 설정으로 이동하여 Column 1 Main Element 텍스트 상자와 Column 2 Main Element 텍스트 상자 모두에서 Custom CSS를 다음으로 바꿉니다.

border-top: 10px solid #222222;

설정 저장

이제 이 게시물 레이아웃에 마지막으로 추가해야 할 것은 "구매" 버튼입니다. 계속해서 새로운 1열 행을 만들고 Button Module 을 추가하십시오. 그런 다음 다음과 같이 버튼 모듈 설정을 업데이트합니다.

콘텐츠 탭에서…

버튼 텍스트: 지금 구매

버튼 URL: [URL 입력](아마도 이것은 결국 제3자 사이트에 대한 제휴 링크가 될 것입니다)

URL 열기: 새 탭에서

디자인 탭에서…

버튼 정렬: 중앙

텍스트 색상: 어두운

버튼에 사용자 정의 스타일 사용: 예

버튼 텍스트 크기: 30px

버튼 텍스트 색상: #222222

버튼 호버 텍스트 색상: #5bd999

버튼 호버 배경색: #ffffff

버튼 호버 테두리 색상: #5bd999

그것이 제품 게시물 레이아웃의 콘텐츠 섹션에 대한 것입니다. 페이지 를 저장 했는지 확인하십시오. 페이지를 저장했으면 비주얼 빌더를 종료하여 WordPress 대시보드에서 게시물을 편집하십시오.

게시물에 리뷰 추가하기

게시물 편집기 페이지 하단으로 스크롤하여 "Review Box Contents" 라는 제목의 상자를 찾습니다.

Extra에 이 스마트한 추가 기능을 사용하면 게시물에 제품 등급을 추가할 수 있습니다. 등급 시스템은 하나 이상의 고장을 갖도록 설계되었습니다. 고장은 전체 등급을 구성하는 구성 요소입니다. 예를 들어, 카메라에 등급을 지정하려는 경우 고장의 예에는 디자인, 성능, 배터리 수명 등이 포함됩니다. 이는 별도의 등급 백분율을 추가할 수 있는 카메라의 구성 요소입니다. 그런 다음 Extra는 해당 구성 요소를 기반으로 전체 평가 백분율을 계산하고 검토 상자에 표시합니다. 검토 상자에는 검토 상자 제목, 요약 및 요약 제목에 대한 유용한 입력 영역도 있습니다.

리뷰를 추가하려면 다음으로 리뷰 상자 내용을 업데이트하십시오.

리뷰 상자 제목: [리뷰 상자의 제목 입력] (저는 "제품 리뷰" 또는 "에디터 리뷰"를 제안합니다)

요약: [요약 입력]

요약 제목: [요약 제목 입력] (간단히 하기 위해 "요약"을 사용하고 있습니다)

다음과 같이 제목과 등급 백분율이 포함된 4개의 분류를 추가합니다.

고장 #0

제목: 디자인

평가: 85%

고장 #1

제목: 공연

평가: 90%

고장 #2

제목: 배터리 수명

평가: 70%

고장 #3

제목: 기능

평가: 85%

이제 등급이 지정되었으므로 게시하기 전에 게시물을 최종 수정하겠습니다.

게시물에 카테고리 지정

카테고리 옆의 확인란을 클릭하여 게시물/제품에 올바른 카테고리를 지정했는지 확인하십시오. 이 경우 이 게시물은 피트니스 트래커를 위한 것이므로 "Health & Fitness" 카테고리를 선택하겠습니다. 또한 "분류되지 않음" 확인란의 선택을 취소합니다.

다음은 내가 사용하고 있는 제품 및 카테고리에 대한 분석입니다.

• 의류
  • 신발
  • 손목 시계
  • 멋진 양말
• 부엌
  • 부엌칼
  • 믹서
  • 도마
• 건강과 운동
  • 피트니스 트래커
  • 가중치
  • 밟아 돌리는 바퀴
• 전자제품
  • 카메라
  • 헤드폰
  • 노트북 컴퓨터

페이지에서 멀지 않은 곳에 추가 설정 상자가 있습니다. 이 컨트롤을 사용하면 이 특정 게시물에 대한 기본 테마 설정을 재정의할 수 있습니다. 물론 원하는 대로 사용자 지정할 수 있지만 이 예에서는 다음 상자를 선택합니다.

추천 게시물(이를 통해 제품을 특정 카테고리 모듈의 추천 게시물로 끌어올 수 있습니다.)

작성자 상자 숨기기

마지막으로 추천 이미지를 추가합니다. 추천 이미지에 대해 전체 너비 0ne-column 레이아웃을 사용할 것이기 때문에 너비가 최소 1280픽셀인지 확인하십시오.

게시물을 게시합니다.

모든 제품/게시물에 대해 이 프로세스를 복제할 수 있도록 이 템플릿을 저장하세요. 템플릿을 저장하려면 페이지 하단의 비주얼 빌더 메뉴에서 "라이브러리에 저장" 아이콘을 클릭하고 템플릿 이름을 입력한 다음 라이브러리에 저장을 클릭합니다.

이제 나머지 게시물을 추가할 때 라이브러리에서 이 템플릿을 로드하고 새 제품 리뷰를 위한 콘텐츠를 채울 수 있습니다. 그러면 프로세스가 훨씬 빨라집니다.

사용자 정의 CSS 추가

거의 다 끝났습니다. 게시물의 일부 요소에 스타일을 지정하려면 테마에 사용자 정의 CSS를 추가해야 합니다. 이렇게 하려면 WordPress 대시보드에서 테마 사용자 정의 > 추가 CSS로 이동하고 다음을 입력합니다.

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

저장 및 게시

이제 결과를 확인해보자.

사용자 평가 시스템

게시물 하단에 사용자 별 배급 시스템이 있습니다.

여기에서 방문자는 별 아이콘 위에 마우스를 놓고 선택한 별 수준을 클릭하여 모든 제품에 대한 시작 평가를 제출할 수 있습니다.

전체 사용자 평가는 게시물 발췌의 메타 데이터에 표시됩니다.

추가 설정 상자에서 언제든지 이 기능을 비활성화하도록 선택할 수 있습니다.

그게 다야 이 시리즈의 2부를 즐겼기를 바랍니다.

출시 예정: 제품을 표시하기 위한 카테고리 레이아웃 구축

3부에서는 홈페이지 및 모든 카테고리 페이지의 카테고리 레이아웃을 만드는 방법을 보여 드리겠습니다. 시리즈의 3부를 준비하려면 새 게시물 템플릿을 사용하여 4개 카테고리 각각에 대해 3개 이상의 제품을 추가해야 합니다. 제품을 표시할 카테고리 모듈을 채우는 데 필요합니다.

3부에서 빌드할 것으로 예상되는 내용은 다음과 같습니다.

아래에 질문이나 의견을 자유롭게 제출하십시오. 귀하의 의견을 기다리겠습니다.