이전 튜토리얼에서 당신은 Divi를 소개했습니다. 모르시는 분들을 위해 Divi는 워드 프레스 테마 팀이 디자인한 프리미엄 우아한 테마 WordPress에서 다양한 서비스를 제공하고 플러그인 및 테마를 디자인합니다.
Divi는 반응형 테마이며 후자는 우리가 가지고 있는 여러 플러그인과 호환됩니다. WooCommerce. 오늘은 제품에 다른 애니메이션을 적용하는 방법을 보여 드리겠습니다. WooCommerce.
가끔 스타일이 WooCommerce 특히 CSS 스타일이 약간 다른 경우에는 다소 부적절할 수 있습니다. 이 튜토리얼은 약간 기술적인 내용을 담고 있습니다(작은 CSS와 다른 것),이 문제를 해결할 수 있습니다.
Divi 테마에 대한 다른 튜토리얼
- 레스토랑 이용 디비 테마 5 웹 사이트
- WooCommerce 제품 디비에 텍스트를 추가하는 방법
- Divi에서 페이지 간 메뉴 색상을 변경하는 방법
- Divi에 대해 모르는 기능
- Divi에서 슬라이더를 만드는 방법
- Divi에서 사용자 역할을 편집하는 방법
시작하자.
마우스 오버 텍스트 아이콘 수정
기본적으로 Divi와 함께 WooCommerce를 사용하고 제품 위로 마우스를 가져 가면 글꼴 () 인 작은 '+'아이콘이 표시됩니다.메이크업 아이콘)는 Divi에서 제안했으며 다음과 같습니다.
설정에서이 아이콘을 다른 아이콘으로 변경하는 것은 정말 쉽지만 텍스트를 추가하려는 경우 다른 것이 있습니까? 오늘의 CSS 스 니펫으로이를 수행하는 방법을 보여 드리고 사이트에 추가 할 선택적 코드도 포함하겠습니다.
우리가 한 번 완성한 내용은 다음과 같습니다.
어쨌든 아이콘 대신 텍스트를 사용하는 이유는 무엇입니까?
나는 당신이 이것을 할 수있는 몇 가지 이유를 생각할 수 있습니다.
상점에 독특한 모양을 부여하려면 다음을 수행하십시오. Divi / WooCommerce 사이트를 다른 사이트와 구별하기 위해 할 수있는 일은 항상 좋은 것입니다.
"보기"또는 "구매"와 같은 단어를 사용하면 더 많은 전환이 발생할 수 있습니다.: 모든 사람이 자신의 웹 사이트에 가장 적합한 작업을 수행해야하며 Divi에서 통합 A / B 테스트를 활용하여 도움을받을 수 있습니다.
영감의 원천
나는 최근에 제품에 대한 텍스트가 떠 있는 사이트를 탐색했습니다. 물론 제품에 아이콘이 아닌 단어가 떠 있는 다른 전자 상거래 사이트를 본 적이 있으므로 이것은 새로운 개념이 아닙니다. 나는 이것을 할 필요가 없었습니다. 디비 테마, 그리고 이것을 보고 나는 스스로에게 도전을 설정했고 이것을 구현하는 것이 정말 쉽다는 것을 깨달았습니다. 코드가 거의 필요하지 않으므로 블로그 성능에 영향을 미치지 않습니다.
텍스트 위에 마우스 구현
1 단계 : 색상 오버레이
먼저 호버 오버레이의 색상을 변경합니다. 이것은 Divi에서 매우 쉽습니다. 상점 모듈에서 " 고급 고급 디자인 매개 변수 그리고 당신의 색깔을 선택하십시오.
2 단계 : CSS 추가
"의 다음 CSS 코드 테마 옵션> 사용자 정의 CSS 또는 자녀 테마의 스타일 시트에서.
.woocommerce .et_overlay : 전 {왼쪽 : 0; 왼쪽 여백 : 0; 내용 : '보기'; / *** 당신의 텍스트는 여기 *** / font-family : 'Source Without Pro', Arial! / *** 글꼴을 선택하십시오 *** / text-transform : 대문자; 글꼴 크기 : 24px; 색상 : #fff; / *** 텍스트 색상을 설정합니다 *** / font-weight : bold; 텍스트 정렬 : 가운데; 폭 : 100 %; 패딩 : 5px 0; }
제품을 둥글게하려면 다음과 같은 선택적 코드를 추가하십시오.
.woocommerce ul.products li.product IMG, .et_overlay {경계 반경 : 50의 %; }
즉입니다!
이제 상점을 방문하여 변경 사항이 어떻게 적용되는지 확인할 수 있습니다.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target ="blank "layout =" 확장된 "align ="center "font_family =" Raleway "font_weight = 700 ″ 스타일 = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI 테마 다운로드 [/ vcex_button] [/ width_column] [»vc_column] » 1/2 ″] [vcex_button URL = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" 대상 = "빈" 레이아웃 = "확장" 정렬 = "중앙" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] 템플릿 다운로드 DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
다른 Divi 자습서
- 레스토랑 이용 디비 테마 5 웹 사이트
- Divi WooCommerce 제품에 텍스트를 추가하는 방법
- Divi 페이지 간의 메뉴 색상을 변경하는 방법
- Divi로 블로그 그리드를 개인화하는 방법
- 어떻게 워드 프레스의 역할 디비 편집기를 사용하는
- 전체 화면 Divi 슬라이더를 만드는 방법
- Divi 페이지 간의 메뉴 색상을 변경하는 방법
- Divi에 대해 잘 모르는 기능
- WordPress에 Divi Builder를 사용하는 방법
- Divi 비디오 스크롤 모듈을 사용하는 방법
- Divi Builder Flip 모듈을 사용하는 방법
- Divi Builder에서 회원 평가 모듈을 추가하는 방법
- Divi 텍스트 모듈을 사용하는 방법
- Divi에서 슬라이더를 만드는 방법
- Divi 사용자 역할을 편집하는 방법
- Divi Social Media 모듈 사용 방법
- 테마 WordPress Divi에서 상점 모듈을 사용하는 방법
- Divi 사이드 바 모듈을 사용하는 방법
- Divi Price 테이블 모듈을 사용하는 방법
- Divi 발행물의 제목 모듈을 사용하는 방법
- Divi의 비디오 모듈을 추가하는 방법
- 기사 탐색 모듈을 사용하는 방법
- Divi 검색 모듈 사용 방법
- Divi 지갑 모듈 사용 방법
- Divi Builder에서 person 모듈을 사용하는 방법
- Divi 필터와 함께 Wallet 모듈을 사용하는 방법
- 전체 너비 슬라이더 모듈을 사용하는 방법
- Divi Builder 이미지 모듈을 사용하는 방법
- Divi Builder의 전체 너비 탐색 모듈을 사용하는 방법
- 이미지 갤러리 모듈을 사용하는 방법
- Divi Builder Full-Width Module을 사용하는 방법
- Divi Full Width 포트폴리오 모듈을 사용하는 방법
- Divi 전폭 헤더 모듈 사용 방법
- Divi Counter Module 사용 방법
- Divi Builder에서 아티클 슬라이더를 사용하는 방법
- Divi Email Optin 모듈을 사용하는 방법
제품마다 다른 텍스트? 새 제품에 추가하겠습니까? 어때? 어디?
최고 기사,이 끝을 당신을 감사하십시오. 제품별로 다른 텍스트를 원한다면 어떻게 될까요?
안녕 Brice,
이 경우 새 WooCommerce 제품에 다른 텍스트를 추가합니다.
슈퍼 !! 이 팁을 가져 주셔서 감사합니다.
아무것도.