이전 튜토리얼에서 당신은 Divi를 소개했습니다. 모르시는 분들을 위해 Divi는 워드 프레스 테마 팀이 디자인한 프리미엄 우아한 테마 WordPress에서 다양한 서비스를 제공하고 플러그인 및 테마를 디자인합니다.

Divi는 반응형 테마이며 후자는 우리가 가지고 있는 여러 플러그인과 호환됩니다. WooCommerce. 오늘은 제품에 다른 애니메이션을 적용하는 방법을 보여 드리겠습니다. WooCommerce.

가끔 스타일이 WooCommerce 특히 CSS 스타일이 약간 다른 경우에는 다소 부적절할 수 있습니다. 이 튜토리얼은 약간 기술적인 내용을 담고 있습니다(작은 CSS와 다른 것),이 문제를 해결할 수 있습니다.

Divi 테마에 대한 다른 튜토리얼

시작하자.

woocommerce 제품에 이미지를 추가하는 방법

마우스 오버 텍스트 아이콘 수정

기본적으로 Divi와 함께 WooCommerce를 사용하고 제품 위로 마우스를 가져 가면 글꼴 () 인 작은 '+'아이콘이 표시됩니다.메이크업 아이콘)는 Divi에서 제안했으며 다음과 같습니다.

기본 woocommerce 아이콘

설정에서이 아이콘을 다른 아이콘으로 변경하는 것은 정말 쉽지만 텍스트를 추가하려는 경우 다른 것이 있습니까? 오늘의 CSS 스 니펫으로이를 수행하는 방법을 보여 드리고 사이트에 추가 할 선택적 코드도 포함하겠습니다.

우리가 한 번 완성한 내용은 다음과 같습니다.

Wordpress 제품 수정 최종 결과

어쨌든 아이콘 대신 텍스트를 사용하는 이유는 무엇입니까?

나는 당신이 이것을 할 수있는 몇 가지 이유를 생각할 수 있습니다.

상점에 독특한 모양을 부여하려면 다음을 수행하십시오. Divi / WooCommerce 사이트를 다른 사이트와 구별하기 위해 할 수있는 일은 항상 좋은 것입니다.

"보기"또는 "구매"와 같은 단어를 사용하면 더 많은 전환이 발생할 수 있습니다.: 모든 사람이 자신의 웹 사이트에 가장 적합한 작업을 수행해야하며 Divi에서 통합 A / B 테스트를 활용하여 도움을받을 수 있습니다.

영감의 원천

나는 최근에 제품에 대한 텍스트가 떠 있는 사이트를 탐색했습니다. 물론 제품에 아이콘이 아닌 단어가 떠 있는 다른 전자 상거래 사이트를 본 적이 있으므로 이것은 새로운 개념이 아닙니다. 나는 이것을 할 필요가 없었습니다. 디비 테마, 그리고 이것을 보고 나는 스스로에게 도전을 설정했고 이것을 구현하는 것이 정말 쉽다는 것을 깨달았습니다. 코드가 거의 필요하지 않으므로 블로그 성능에 영향을 미치지 않습니다.

예제 웹 사이트

텍스트 위에 마우스 구현

1 단계 : 색상 오버레이

먼저 호버 오버레이의 색상을 변경합니다. 이것은 Divi에서 매우 쉽습니다. 상점 모듈에서 " 고급 고급 디자인 매개 변수 그리고 당신의 색깔을 선택하십시오.

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 자습서