제품 탭

제품 탭 위젯은 단일 페이지 템플릿 위젯입니다. 이는 제품 설명, 제품 리뷰를 표시하는 데 사용되며 새로운 리뷰를 제출하는 양식도 제공합니다.

wooCommerce 사이트에서 제품 탭 위젯을 사용하는 방법을 알아보겠습니다.

1단계: 제품 탭 위젯 활성화 #

위젯을 활성화하려면,

  • 이동 ShopEngine > 위젯 > 제품 탭
  • 켜다 
  • 구하다 변화
제품_탭 사용.png
제품 탭 위젯 켜기

메모: 또한 글로벌 설정을 사용하여 제품 탭을 켤 수도 있습니다. ShopEngine의 모든 위젯을 켭니다.

2단계: 제품 탭 위젯 추가 #

위젯을 추가하기 전에 먼저 단일 제품 템플릿을 생성해야 합니다. 다음 문서를 확인하세요. 단일 제품 템플릿을 만드는 방법.

추가하려면 제품 탭:

  • 이동 ShopEngine > 템플릿 > 단일 페이지 템플릿
  • Elementor로 편집을 클릭하세요.
단일 페이지 템플릿 편집
단일 템플릿 편집
  • 찾다 ~을 위한 제품 탭 요소 검색 옵션
  • 드래그 앤 드롭 t위젯 
  • 클릭 업데이트 변경 사항을 저장합니다.
드래그 앤 드롭 제품 탭
끌어서 놓기

3단계: 제품 탭 위젯 설정 #

다음 설정은 다음에서 사용자 정의할 수 있습니다. 스타일 꼬리표:

탐색 스타일 설정
탐색 스타일 설정

탐색 스타일: #

  • 타이포그래피: 여기에서 메뉴 옵션의 글꼴 크기를 변경할 수 있습니다.
  • 메뉴 색상: 메뉴 색상을 변경합니다.
  • 활성/호버 메뉴 색상: 선택한 메뉴의 활성/호버 모드에 대한 색상을 선택하세요.
  • 내비게이션 표시기 색상: 활성 메뉴 표시기에 대한 색상을 선택하세요.
  • 탐색 표시기 테두리(px): 탐색 표시기 테두리의 위쪽과 아래쪽 값을 선택합니다.
  • 메뉴 간격(px): 두 메뉴 사이에 픽셀 단위로 간격을 두세요.
  • 상자 그림자: 편집 옵션을 클릭하여 그림자 색상, 수평, 수직, 흐림 및 확산 값을 선택합니다. 위치를 윤곽선이나 삽입으로 설정할 수도 있습니다.
  • 테두리 유형: 테두리 유형을 실선, 점선, 이중 점선, 홈 또는 없음으로 선택할 수 있습니다.
  • 타이포그래피: 여기에서 메뉴 옵션의 글꼴 크기를 변경할 수 있습니다.
  • 메뉴 색상: 메뉴 색상을 변경합니다.
  • 활성/호버 메뉴 색상: 선택한 메뉴의 활성/호버 모드에 대한 색상을 선택하세요.
  • 내비게이션 표시기 색상: 활성 메뉴 표시기에 대한 색상을 선택하세요.
  • 탐색 표시기 테두리(px): 탐색 표시기 테두리의 위쪽과 아래쪽 값을 선택합니다.
  • 메뉴 간격(px): 두 메뉴 사이에 픽셀 단위로 간격을 두세요.
  • 상자 그림자: 편집 옵션을 클릭하여 그림자 색상, 수평, 수직, 흐림 및 확산 값을 선택합니다. 위치를 윤곽선이나 삽입으로 설정할 수도 있습니다.
  • 테두리 유형: 테두리 유형을 실선, 점선, 이중 점선, 홈 또는 없음으로 선택할 수 있습니다.
탭 콘텐츠 설정
탭 콘텐츠 설정

탭 내용: #

  • 탭 콘텐츠 제목
    • 쇼 제목: 이 옵션을 켜면 탭 콘텐츠에 제목을 표시합니다.
    • 색상: 탭 영역의 제목 색상을 선택하세요.
    • 심: 제목 주위의 위쪽, 왼쪽, 오른쪽, 아래쪽 패딩을 조정합니다.
  • 탭 콘텐츠 랩
    • 패딩(px): 탭 콘텐츠의 위쪽, 왼쪽, 오른쪽, 아래쪽 패딩을 조정합니다.
추가 정보 설정
추가 정보 설정

추가 정보: #

  • 타이포그래피: 추가 정보의 글꼴 크기를 여기에서 변경할 수 있습니다.
  • 테이블 셀 구분선 색상: 표 셀 구분선의 색상을 선택하세요.
  • 테이블 셀 패딩:  위쪽, 왼쪽, 오른쪽, 아래쪽 패딩을 조정합니다.
  • 상표:
    • 색상: 라벨의 색상을 선택하세요.
    • 배경: 배경색을 선택하세요.
    • 너비: 너비를 px나 퍼센트로 선택할 수 있습니다.
  • 값:
    • 색상: 값에 맞는 색상을 선택하세요
    • 배경: 값에 대한 배경색을 선택하세요
평균 평가 설정
평균 평가 설정

평균 평점: #

  • 평가 제목:
    • 색상: 평가 제목의 색상을 변경합니다.
    • 타이포그래피: 평가 제목의 글꼴 크기를 변경할 수 있습니다.
  • 평가 제목:
    • 색상: 평가 제목의 색상을 변경합니다.
    • 타이포그래피: 평가 제목의 글꼴 크기를 변경할 수 있습니다.
  • 평가 제목:
    • 색상: 평가 제목의 색상을 변경합니다.
    • 타이포그래피: 평가 제목의 글꼴 크기를 변경할 수 있습니다.
제목 설정 검토
제목 설정 검토

리뷰 제목: #

  • 색상: 평점 평균의 색상을 변경합니다.
  • 타이포그래피: 평점 평균의 글꼴 크기를 변경할 수 있습니다.
  • 여유: 위쪽, 왼쪽, 오른쪽, 아래쪽 여백을 조정합니다.
리뷰 스타일 설정
스타일 설정 검토

검토 스타일: #

  • 색상: 평가에 맞는 색상을 선택하세요.
  • 날짜, 저자 및 설명 색상: 여기에서 날짜, 작성자, 설명에 대한 색상을 선택할 수 있습니다.
  • 주석 구분 기호 색상: 주석 구분 기호의 색상을 선택하세요.
  • 저자 타이포그래피: 저자에 맞는 글꼴 크기를 선택하세요.
  • 날짜 타이포그래피: 날짜의 글꼴 크기를 선택하세요.
  • 설명 타이포그래피: 여기에서 설명 글꼴 크기를 선택할 수 있습니다.
  • 단일 리뷰 간격(px): 단일 리뷰 간격에 대한 값을 선택하세요.
리뷰 양식 설정
리뷰 양식 설정

검토 양식: #

  • 입력 라벨:
    • 색상: 입력 라벨의 색상을 선택하세요.
    • 필수 색상: S필요한 기호에 대한 색상을 선택하세요.
    • 타이포그래피: 입력 라벨의 글꼴 크기를 선택하세요
  • 양식 입력:
    • 색상 : P양식 입력에 대한 색상을 선택하세요.
    • 테두리 색상: 테두리 색상을 선택하세요.
    • 초점 테두리 색상: 포커스 테두리의 색상을 선택하세요.
    • 타이포그래피: 양식 입력에 대한 글꼴 크기를 선택하세요.
  • 필드 간격(px):  입력 필드 사이에 원하는 간격을 선택하세요.
  • 입력 테두리 반경(px): 입력 필드에 대해 border-radius 값을 선택합니다.
  • 입력 패딩(px): 입력 필드의 위쪽, 왼쪽, 오른쪽, 아래쪽 패딩을 조정합니다.
제출 버튼 설정
제출 버튼 설정

제출 버튼: #

  • 버튼 타이포그래피: 여기에서 글꼴 패밀리, 글꼴 크기, 글꼴 굵기, 변형 및 줄 높이를 변경할 수 있습니다.
  • 조정: 정렬을 왼쪽, 오른쪽, 가운데로 설정합니다.
  • 일반/호버: 일반 보기와 호버 보기 모두에 대한 색상과 배경색을 선택합니다.
  • 테두리 유형: 테두리 유형을 실선, 점선, 이중 점선, 홈 또는 없음으로 선택할 수 있습니다.
  • 너비: 테두리의 위쪽, 왼쪽, 오른쪽 및 아래쪽 너비를 선택합니다.
  • 색상: 테두리 색상을 선택합니다.
  • 국경 반경: 테두리 반경의 위쪽, 왼쪽, 오른쪽 및 아래쪽 값을 선택합니다.
  • 심: 위쪽, 왼쪽, 오른쪽, 아래쪽 패딩을 조정합니다.

전역 글꼴: #

글로벌 글꼴 설정 제품 탭
글로벌 글꼴 설정
  • 글꼴 계열: 여기에서 전체 위젯의 글꼴 모음을 변경할 수 있습니다.

다음을 클릭하세요. 업데이트 버튼을 구하다 모든 변경 사항.

제품 탭 위젯의 미리보기는 다음과 같습니다.

미리보기 제품 탭
당신의 감정은 무엇입니까?
2022년 3월 27일 업데이트