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

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

이 시리즈의 2부에서는 Extra의 기본 제공 설정과 Visual Builder를 사용하여 제품 리뷰 포스트 템플릿을 만들었습니다. 새 게시물 템플릿을 사용하여 게시물을 추가하고 해당 카테고리에 할당할 수 있습니다.

오늘 우리는 Extra의 카테고리 빌더를 사용하여 두 개의 카테고리 레이아웃을 만들 것입니다. 첫 번째 레이아웃은 가장 최근의 인기 있는 리뷰를 강조 표시하는 게시물/제품 리뷰를 홈페이지에 표시합니다. 두 번째 레이아웃은 캐러셀 슬라이더 모듈을 사용하여 한 페이지에 모든 카테고리를 표시합니다. 이 튜토리얼을 마치면 잘 디자인된 제품 리뷰 사이트를 위한 좋은 기초를 갖게 될 것입니다.

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

디자인 요소 준비

카테고리 레이아웃은 게시물 콘텐츠에 크게 의존하므로 콘텐츠를 추가한 후 사이트가 어떻게 보이는지 알 수 있도록 게시물을 충분히 추가해야 합니다. 이 시리즈의 2부에서 논의한 바와 같이 내 카테고리 레이아웃은 4개의 카테고리와 각 카테고리에 3개의 제품으로 채워져 있습니다. 내 게시물의 추천 이미지에 셔터스톡의 스톡 이미지를 사용하고 있습니다.

카테고리 레이아웃을 디자인하기 위해 Extra의 카테고리 빌더와 약간의 사용자 정의 CSS를 사용할 것입니다.

시작하자.

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

YouTube 채널 구독

홈페이지 카테고리 레이아웃 구축

기본적으로 extra는 홈페이지에 카테고리 레이아웃을 사용합니다. 사용자 지정 레이아웃을 만들려면 WordPress 대시보드 사이드바에서 Extra > Category Building 으로 이동합니다. 이미 "homepage"라는 카테고리 레이아웃을 찾은 다음 그 위로 마우스를 가져간 다음 편집을 선택합니다.

그런 다음 보라색 빌더 메뉴에서 "레이아웃 지우기"를 클릭하여 현재 기본 레이아웃을 지웁니다.

이제 사용자 정의 레이아웃 구축을 시작할 수 있습니다. 표준 섹션의 행에 2/3의 1/3 열을 추가하여 시작합니다.

왼쪽(2/3) 열에 추천 게시물 슬라이더를 추가합니다.

다음과 같이 추천 게시물 슬라이더 모듈 설정을 업데이트합니다.

콘텐츠 탭에서…

카테고리: 전체
추천 게시물만 표시: [여러분이 추천할 게시물을 결정할 때까지 이 기능을 유지하겠습니다. 게시물 편집기 페이지의 추가 설정 상자에서 특정 게시물을 추천으로 지정할 수 있습니다.]
작성자 표시: 꺼짐
날짜 표시: 꺼짐

디자인 탭에서…

탐색 화살표 색상: #ffffff
탐색 화살표 배경: #000000
캡션 배경: rgba(255,255,255,0.4)
제목 글꼴 크기: 24px
제목 텍스트 색상: #000000
메타 글꼴 크기: 16px
메타 텍스트 색상: #000000
맞춤 여백: 하단 0px

고급 탭에서…

기본 요소 텍스트 상자에 다음 사용자 정의 CSS를 입력합니다.

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

설정 저장

이제 오른쪽(1/3) 열에 텍스트 모듈을 추가하고 다음과 같이 텍스트 모듈 설정을 업데이트합니다.

콘텐츠 탭에서 콘텐츠 상자의 텍스트 탭에 다음 html을 추가합니다.

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

여기 링크는 모의 CTA 버튼 역할을 합니다. 원하는 대로 선택하여 사용할 수 있습니다. URL과 링크 텍스트를 업데이트하기만 하면 됩니다.

팁 : 이 CTA를 클릭할 때 Bloom을 사용하여 이메일 선택 팝업 상자를 트리거할 수 있습니다. 그렇게 하면 방문자는 이메일 마케팅 캠페인을 통해 제품에 대한 최신 정보를 얻을 수 있습니다. 이렇게 하려면 Bloom을 설치하고 팝업 양식을 추가하고 이메일 공급자를 통합해야 합니다. 그런 다음 위의 html 코드에서 링크 클래스에 해당하는 CSS 선택기 "a.join-cta"를 클릭할 때 팝업을 표시하도록 선택합니다.

버튼을 클릭할 때 블룸 선택 양식 팝업을 만드는 방법에 대해서도 자세히 알아볼 수 있습니다.

이제 텍스트 모듈 설정으로 돌아갑니다.

디자인 탭에서…

텍스트 글꼴 크기: 40px(데스크톱), 24px(태블릿 및 스마트폰)
헤더 글꼴 크기: 42px(데스크톱), 38px(태블릿), 28px(스마트폰)
맞춤 패딩: 40px(위), 15px(오른쪽), 15px(아래), 15px(왼쪽)

설정 저장

이제 행 설정으로 이동하여 행 의 배경 스타일을 지정할 수 있습니다.

그런 다음 다음을 업데이트합니다.

콘텐츠 탭에서…

배경: #ffffff

디자인 탭에서…

이 행을 전체 너비로 만들기: 예
열 높이 균등화: 예

고급 탭 아래에서 다음 사용자 정의 CSS를 기본 요소 입력 상자에 추가합니다.

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-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);
-moz-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);
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);

설정 저장

지금 맞춤형 기능 슬라이더 섹션을 확인하십시오.

지금까지 잘보고 있습니다.

계속하자. 범주 작성기로 돌아가서 현재 섹션 아래에 표준 섹션을 추가하고 텍스트 모듈이 있는 1열 행을 추가하십시오.

그런 다음 다음과 같이 텍스트 모듈 설정을 업데이트합니다.

콘텐츠 탭 아래에서 콘텐츠 상자의 텍스트 탭에 다음 html 헤드라인을 추가합니다.

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

디자인 탭에서…

텍스트 방향: 중앙
헤더 글꼴: B(굵게)
헤더 글꼴 크기: 48px(데스크톱), 42px(태블릿), 36px(스마트폰)

설정 저장

이것은 제품 리뷰를 표시할 아래 섹션의 제목으로 사용됩니다.

다음으로 3/4, 1/4 열 구조로 특수 섹션을 추가합니다.

왼쪽(3/4) 섹션에서 2열 행을 추가합니다.

해당 행의 왼쪽 열에 Posts Module을 추가합니다.

그런 다음 모듈에 카테고리를 할당하여 콘텐츠 탭에서 게시물 모듈 설정을 업데이트합니다. 이렇게 하면 게시물 모듈에 해당 카테고리만 표시됩니다. 이렇게 하려면 내 범주로 "의류"를 선택하겠습니다.

그런 다음 다음을 업데이트합니다.

작성자 표시: 아니요
쇼 날짜: 아니오

설정 저장

이 포스트 모듈을 복제하여 왼쪽 열에 두 개의 포스트 모듈이 쌓이고 오른쪽에 두 개의 포스트 모듈이 쌓이도록 합니다.

그런 다음 다른 범주로 각 모듈의 설정을 업데이트합니다. 제가 가지고 있는 카테고리는 의류, 전자 제품, 주방, 건강 및 피트니스입니다.

비디오 리뷰를 표시하는 게시물 모듈을 추가하려는 경우 여기에 추가할 수 있습니다. 먼저 비디오라는 새 게시물 카테고리를 추가하고 카테고리에 색상 #222222를 할당해야 합니다. 그런 다음 새 게시물을 만들고 형식으로 "비디오"를 선택한 다음 Extra의 내장 비디오 형식 옵션 상자에 비디오 URL을 추가합니다.

그런 다음 비디오 아래에 표시할 리뷰 상자 내용을 추가할 수 있습니다.

몇 개의 비디오를 업로드했으면 비디오 카테고리에 추가해야 합니다. 그런 다음 홈페이지의 카테고리 작성기로 돌아가서 4개의 게시물 모듈이 포함된 행 아래에 1열 행을 추가합니다. 그런 다음 이전 행의 게시물 모듈을 복제하고 새 행에 추가합니다. 콘텐츠 탭 아래의 게시물 모듈 설정에서 "비디오" 카테고리를 선택합니다. 이제 동영상을 표시할 게시물 모듈이 생겼습니다.

특수 섹션의 오른쪽(사이드바) 영역에서 서로 위에 쌓인 두 개의 포스트 모듈을 더 추가할 것입니다.

첫 번째 항목의 경우 Posts Module Settings를 업데이트하여 "All" 카테고리를 포함합니다. 그런 다음 정렬 방법 "최고 등급"을 선택합니다.

해당 Posts 모듈을 복제하여 다른 모듈이 그 아래에 쌓이도록 합니다. 그런 다음 해당 항목의 정렬 방법을 "가장 인기 있는"으로 업데이트합니다.

설정을 저장하려면 게시물을 업데이트하세요. 지금까지 레이아웃이 어떻게 생겼는지 보여줍니다.

다음으로 "제품 리뷰"라는 제목의 텍스트 모듈이 포함된 두 번째 기본 섹션을 복제(또는 복사)합니다.

그런 다음 복제된 섹션을 특수 섹션 아래로 드래그(또는 붙여넣기)하십시오. 새 섹션에서 다음 html로 텍스트 모듈 설정 콘텐츠를 업데이트합니다.

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

설정 저장

다음으로 가장 최근 제품부터 시작하여 모든 제품 리뷰를 표시하는 블로그 피드를 추가할 것입니다.

방금 업데이트한 텍스트 모듈 아래에서 Blog Feed Masonry Module을 열에 추가합니다. 블로그 피드 석조 모듈 설정의 콘텐츠 탭에서 피드에 표시할 모든 카테고리를 선택합니다.

설정 저장

마지막으로 Blog Feed Masonry Module 아래에 Posts Carousel Module을 추가합니다. 콘텐츠 탭에서 게시물 캐러셀 모듈 설정을 업데이트하여 모든 카테고리를 포함하고 예를 선택하여 추천 게시물만 표시합니다.

이 캐러셀은 제품 리뷰 게시물을 작성할 때 추천 항목으로 선택한 게시물만 표시하기 위한 것입니다.

이제 최종 레이아웃이 어떻게 생겼는지 봅시다.

몇 줄의 사용자 정의 CSS 추가

디자인을 통합하려면 몇 줄의 Custom CSS를 추가해야 합니다. 테마 사용자 정의 > 추가 CSS로 이동하여 이미 있는 현재 CSS 코드 상단에 다음을 추가합니다.

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
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);
border-top: 10px solid;
}

그런 다음 최소 너비 980px로 설정된 미디어 쿼리 괄호 안에 다음을 추가합니다.

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

첫 번째 CSS 스니펫은 모듈에 약간 더 어두운 그림자와 더 높은 상단 테두리를 추가합니다. 두 번째는 상단 섹션의 "지금 가입" 버튼을 사용자 지정합니다.

그게 홈페이지 카테고리 레이아웃에 대한 것입니다. 최종 결과는 다음과 같습니다.

홈페이지 카테고리 레이아웃 외에도 모든 카테고리를 한 페이지에 표시하는 간단한 레이아웃을 하나 더 추가해 보겠습니다.

"모든 카테고리" 레이아웃 구축

이 레이아웃은 모든 게시물을 로드하고 카테고리를 설정하고 테마 스타일을 지정했으므로 만들기가 정말 간단합니다. 이 레이아웃의 목적은 한 페이지에 모든 카테고리와 제품을 표시하는 페이지를 만드는 것입니다. 이 작업은 여러 가지 방법으로 수행할 수 있지만 Extra에서는 게시물 회전식 모듈을 활용하여 Hulu 및 Netflix와 같은 비디오 스트리밍 웹사이트에서 볼 수 있는 것과 유사한 레이아웃으로 카테고리와 게시물을 표시하고 싶었습니다.

레이아웃을 추가하려면 현재 카테고리 레이아웃의 맨 위로 스크롤하고 새로 추가를 선택합니다. 카테고리 빌더를 사용하여 표준 섹션에 1열 행을 추가하십시오. 그런 다음 행에 텍스트 모듈을 추가합니다. 콘텐츠 탭에서 콘텐츠 상자에 다음 h1 태그를 포함하도록 텍스트 모듈 설정을 업데이트합니다.

<h1 class="subtitle fancy"><span>All Categories</span></h1>

설정 저장

그런 다음 텍스트 모듈 아래에 Posts Carousel 모듈을 추가합니다. 게시물 캐러셀 모듈 설정에서 카테고리로 의류를 선택합니다.

설정 저장

그런 다음 의류 카테고리 게시물 캐러셀 아래에 텍스트 모듈을 추가합니다. 텍스트 모듈 설정에서 콘텐츠 탭 아래의 콘텐츠 상자에 다음 링크를 추가합니다.

<a href="/category/clothing">view all clothing reviews</a>

URL 및/또는 링크 텍스트는 사이트에 따라 변경해야 할 수 있지만 아이디어는 해당 카테고리에 대한 모든 제품 리뷰를 표시하기 위해 해당 특정 카테고리의 카테고리 페이지에 링크하는 것입니다.

디자인 탭에서 텍스트 방향을 "오른쪽"으로 변경합니다.

설정 저장

다음 세 가지 범주를 동일한 방식으로 표시하려면 해당 범주 페이지에 대한 링크가 포함된 텍스트 모듈 다음에 특정 범주에 할당된 게시물 캐러셀 모듈을 추가하는 과정을 반복합니다.

빌더의 오른쪽에 있는 카테고리 상자에서 "모든 카테고리"라는 새 카테고리를 추가하고 이 레이아웃에 대해 선택하십시오. 그렇게 하면 "모든 카테고리" 카테고리 페이지에 연결할 때마다 이 템플릿이 표시됩니다.

완료되면 최종 레이아웃이 다음과 같아야 합니다.

사이트의 카테고리 레이아웃은 다음과 같습니다.

아직 추가된 제품이 많지 않기 때문에 바로 알 수 있지만, 이는 결국 게시물 캐러셀 슬라이더 모듈을 사용하여 각 카테고리의 제품을 셔플하는 편리한 방법으로 기능할 것입니다.

오늘의 포스팅은 여기까지입니다. Extra를 사용하여 제품 리뷰 사이트를 구축하는 이 4부 시리즈 중 3부를 즐겁게 읽으셨기를 바랍니다.

아직 지치지 않으셨기를 바랍니다. 시리즈의 마지막 게시물이 하나 있습니다.

다가오는

시리즈의 마지막 게시물에서는 제품 리뷰 사이트의 헤더 및 탐색 요소를 사용자 정의할 것입니다. 메뉴를 만드는 것 외에도 사이트 전체의 카테고리 색상에 해당하는 색상을 메뉴 링크에 할당하는 멋진 방법을 보여 드리겠습니다. 또한 몇 번의 클릭으로 메가 메뉴를 구축하는 방법도 보여 드리겠습니다.

나는 우리 웹 사이트의 마지막 부분을 함께 구축하기를 기대합니다.

언제나처럼 아래에 자유롭게 의견을 제출하십시오.