스티커 바는 웹 디자인의 인기있는 요소입니다. 팝업처럼 방해받지 않고 최첨단 클릭 유도 문안을 유지함으로써 전환을 유도하는 데 적합합니다.
이 사용 사례에서는 제품에 대한 접착 막대를 디자인합니다. WooCommerce Woo 모듈 사용 Divi. 고정 막대는 모든 모듈을 포함할 수 있습니다. Divi. 이 자습서에서는 사용자가 페이지를 아래로 스크롤할 때 계속 표시되도록 "장바구니에 추가" 버튼이 포함된 고정 막대를 만듭니다. 또한 "장바구니에 추가" 버튼을 클릭하면 사용자가 항상 "장바구니 보기" 버튼을 볼 수 있도록 장바구니 알림 표시줄도 만들 것입니다.
이러한 고정 막대 요소는 이러한 중요한 CTA를 지속적으로 파악하여 전환율을 높이는 데 도움이됩니다.
측량
다음은이 튜토리얼에서 디자인 할 내용의 미리보기입니다.
부품 1 : 제품 페이지의 접착 막대 디자인
이 예에서는 간단한 시뮬레이션 제품을 사용하므로 새 제품을 만들거나 기존 제품을 편집해야합니다. 이 자습서에서는 제품 정보가 중요하지 않습니다. 제품 제목, 가격, 설명, 사진 등과 같은 기본 사항이 있는지 확인하십시오.
간단한 제품이 준비되면 클릭하여 백엔드에서 제품을 편집하고 배포합니다. Divi 제품 페이지의 빌더. Divi 페이지 설정에서 레이아웃으로 “Fullwidth”를 선택한 다음 “Build on Front”를 클릭하세요.
제품 페이지는 다음과 같아야합니다.
탐색 경로 및 장바구니 알림이 포함 된 첫 번째 행 아래에 XNUMX 열 레이아웃으로 새 행을 추가하십시오.
라인 설정
모듈을 추가하기 전에 다음과 같이 회선 설정을 업데이트하십시오.
- 배경색 : # 333333
- 사용자 지정 거터 너비를 사용하십시오. 예
- 거터 폭 : 1
- 너비 : 100 %
- 실내 장식품 : 0px 상단, 0px 하단
끈적 끈적하게
선을 고정하려면 다음 사용자 정의 CSS 코드를 기본 데스크탑 요소에 추가하십시오.
position: -webkit-sticky !important; position: sticky !important; top: 50px;
그런 다음 태블릿 디스플레이의 동일한 기본 요소에 다음 CSS 코드를 추가하십시오.
top: 0px;
"position : sticky"css 속성에 익숙하지 않은 경우 이는 고정 위치와 요소 (이 경우 선)가 해당 요소와 함께 스크롤되는 상대 위치 사이의 혼합입니다. 페이지의 맨 위 또는 맨 아래 (또는 지정된 오프셋)의 지정된 위치에 도달 할 때까지 컨테이너입니다. 이 예에서는 오프셋을 브라우저 창 상단에서 50px로 설정했습니다 (데스크톱의 기본 고정 헤더 높이를위한 공간을 남겨 둡니다). 그런 다음 태블릿에서는 모바일 브라우저 상단의 접착 선 / 바를 수정하기 위해 오프셋이 "top : 0px"로 변경됩니다.
참고 : 상자에 CSS를 추가 할 때 표시되는 오류는 무시하십시오. 코드가 잘 작동합니다.
CSS 후 다음과 같이 Z 색인을 업데이트합니다.
- Z 색인 : 10
이제 사용자가 제품 페이지를 스크롤 할 때 줄이 고정됩니다.
맞춤 CSS 열
라인 채우기를 시작하기 전에 내용, XNUMX열 행 내부의 모듈이 수직이 아닌 수평으로 정렬되는지 확인해야 합니다. flex 속성으로 이를 수행하기 위해 간단한 CSS 트릭을 사용할 수 있습니다. 열 설정을 열고 다음 사용자 정의 CSS를 기본 요소에 추가하십시오.
display:flex; align-items:center;
이것은 끈끈한 라인 디자인을 처리합니다. 이제 우리는 라인을 채워야합니다 내용.
제목 추가 Woo
끈끈한 줄에 새 Woo 제목 모듈을 추가하십시오.
그런 다음 다음과 같이 설정을 업데이트하십시오.
- 컬러 텍스트 제목 : #ffffff
- 텍스트 제목 크기 : 28px (데스크톱), 20px (태블릿), 16px (전화)
- 너비 : 30 %
- 실내 장식품 : 상단에 2vw, 하단에 2vw, 왼쪽에 2vw, 오른쪽에 2vw
가격 추가
그런 다음 방금 만든 우 타이틀 모듈 위로 마우스를 가져갈 때 나타나는 회색 더하기 아이콘을 클릭하여 우 가격 모듈을 추가하십시오.
그런 다음 다음과 같이 Woo Price 설정을 업데이트하십시오.
- 가격 텍스트 크기 : 28px (데스크톱), 20px (태블릿), 16px (전화)
- 너비 : 30 %
- 실내 장식품 : 상단에 2vw, 하단에 2vw, 왼쪽에 2vw, 오른쪽에 2vw
- 오른쪽 테두리의 너비 : 1px
- 오른쪽 테두리의 색상 : #777777
- 왼쪽 테두리의 폭 : 1px
- 왼쪽 테두리 색상 : #777777
모듈 추가 장바구니에 추가
마지막 요소의 경우 내용, Woo 가격 모듈 바로 뒤에 Woo 장바구니에 추가 모듈을 추가하세요.
그런 다음 다음과 같이 설정을 업데이트하십시오.
모바일에서 재고 수량 및 수량 필드를 숨겨 장바구니에 추가 요소를 단순화하십시오.
- 수량 표시 필드 : OFF (태블릿)
- 재고 표시 : OFF
- 텍스트 정렬 : 오른쪽
- 버튼에 사용자 정의 스타일 사용 : 예
- 버튼 텍스트 크기 : 18px (태블릿), 14px (전화)
- 버튼 텍스트 색상 : #ffffff
- 버튼 배경색 : #0c71c3
- 단추 테두리의 너비 : 0px
- 너비 : 40 %
- 실내 장식품 : 왼쪽에 2vw, 오른쪽에 2vw
결과
라이브 페이지에서 어떻게 보이는지 봅시다.
2 부품 : 바스켓 알림 표시 줄 만들기
접착식 카트 알림 표시 줄을 만드는 것은 실제로 몇 가지 간단한 단계를 포함하지만 그 결과는 매우 효과적 일 수 있습니다. 이미 알고 계시 겠지만 장바구니 알림은 사용자가 "장바구니에 추가"버튼을 클릭 할 때만 나타납니다. 그러나 사용자를 결제 페이지로 이동시키는 구매 프로세스의 다음 중요한 단계입니다. 따라서 장바구니 알림이 창 하단에 접착 막대로 표시되면 사용자에게 더 잘 보입니다.
장바구니 알림 고정 막대를 만들려면 먼저 제품 페이지 하단에 새로운 XNUMX 열 행을 만듭니다. 그런 다음 다음과 같이 행 설정을 업데이트합니다.
- 너비 : 100 %
- 실내 장식품 : 상단에 0px, 하단에 0px
다음과 같은 사용자 정의 CSS를 기본 요소에 추가하여 행을 고정하십시오.
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
참고 : 이전에했던 것처럼 position : sticky 속성을 추가 할 때 나타나는 오류를 무시할 수 있습니다.
위로 스크롤하면 행이 창의 맨 아래에 고정됩니다.
그런 다음 z 인덱스를 업데이트하여 다음과 같이 전경에 유지합니다.
- Z 색인 : 10
바스켓 알림 모듈 추가
라인을 작성했으면 Woo Cart Notice 모듈을 라인에 추가하고 다음과 같이 설정을 업데이트하십시오.
- 문자 크기 (전화) : 15px
- 여백 : 하단의 0em
그게 다야! 페이지 상단의 기본 카트 경고 항목을 제거할지 여부는 귀하에게 달려 있지만 더 나은 전환을 위해 남겨 두는 것이 좋습니다.
최종 결과
최종 결과는 다음과 같습니다.
마지막 생각
이 기사가 Divi에서 제품 페이지에 대한 고정 막대를 만드는 방법을 이해하는 데 도움이되기를 바랍니다. 제품 제목, 가격 및 장바구니에 추가 버튼이 포함 된 고정 막대를 만드는 방법을 살펴 보았습니다. 또한 스티키 바를 만드는 방법도 보여주었습니다. 이 두 가지 모두 구매 프로세스를 더 쉽게 만들고 전환율을 높여야합니다. 그리고 플러그인도 필요하지 않습니다!
