ในการกวดวิชาก่อนหน้าเรา คุณแนะนำ Divi. สำหรับผู้ที่ไม่รู้ Divi เป็น ธีม WordPress พรีเมี่ยมออกแบบโดยทีมงาน ธีมที่สง่างาม ซึ่งเสนอบริการต่าง ๆ บน WordPress และออกแบบปลั๊กอินและชุดรูปแบบ
Divi เป็นธีมที่ตอบสนองและตัวหลังนั้นเข้ากันได้กับปลั๊กอินอื่น ๆ อีกหลายตัวที่เรามี WooCommerce. วันนี้เราจะมาแนะนำวิธีการสร้างแอนิเมชั่นต่างๆ ให้กับผลิตภัณฑ์ของคุณ WooCommerce.
บางครั้งสไตล์ของ WooCommerce อาจไม่เพียงพอเล็กน้อย โดยเฉพาะอย่างยิ่งหากสไตล์ CSS ของคุณแตกต่างออกไปเล็กน้อย บทช่วยสอนนี้ซึ่งจะเป็นเทคนิคเล็กน้อย (CSS เล็ก ๆ น้อย ๆ และไม่มีอะไรอื่น) จะช่วยให้คุณแก้ไขปัญหานี้ได้
บทเรียนอื่น ๆ เกี่ยวกับชุดรูปแบบ Divi
- เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
- วิธีการเพิ่มข้อความบน Divi สินค้า WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้าบน Divi
- คุณสมบัติที่คุณไม่รู้เกี่ยวกับ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้บน Divi
ขอเริ่มต้น
การปรับเปลี่ยนไอคอนสำหรับข้อความบนเม้าส์
โดยค่าเริ่มต้นเมื่อคุณใช้ WooCommerce กับ Divi และวางเมาส์เหนือผลิตภัณฑ์คุณจะเห็นไอคอน '+' ขนาดเล็กซึ่งเป็นแบบอักษร (ทำให้ไอคอน) เสนอโดย Divi และซึ่งเป็นดังนี้:
มันง่ายมากที่จะเปลี่ยนเป็นไอคอนอื่นในการตั้งค่า แต่ถ้าคุณต้องการเพิ่มข้อความมันเป็นอย่างอื่นหรือไม่? ฉันจะแสดงวิธีการบรรลุเป้าหมายนี้ด้วยตัวอย่าง CSS ของวันนี้และฉันจะรวมโค้ดที่ไม่บังคับเพื่อเพิ่มลงในไซต์ของคุณ
นี่คือสิ่งที่เราจะได้เสร็จสิ้นเมื่อ:
ทำไมต้องใช้ข้อความแทนไอคอนล่ะ?
ฉันสามารถคิดถึงเหตุผลบางอย่างที่ทำให้คุณทำสิ่งนี้ได้:
วิธีกำหนดรูปลักษณ์ที่เป็นเอกลักษณ์ให้กับร้านค้าของคุณ: ทุกสิ่งที่คุณสามารถทำได้เพื่อแยกไซต์ Divi / WooCommerce ของคุณออกจากไซต์อื่นเป็นสิ่งที่ดีเสมอ
การใช้คำเช่น "ดู" หรือ "ซื้อ" อาจทำให้เกิด Conversion มากขึ้น: ทุกคนต้องทำสิ่งที่ดีที่สุดสำหรับเว็บไซต์ของพวกเขาและคุณสามารถใช้ประโยชน์จากการทดสอบ A / B แบบรวมใน Divi เพื่อช่วยในเรื่องนั้น
แหล่งที่มาของแรงบันดาลใจ
ฉันเพิ่งเรียกดูไซต์ที่มีข้อความเกี่ยวกับผลิตภัณฑ์ที่วางอยู่ แน่นอน ฉันเคยเห็นไซต์อีคอมเมิร์ซอื่นๆ ที่มีคำมากกว่าไอคอนบนผลิตภัณฑ์ที่ลอยอยู่ ดังนั้นนี่ไม่ใช่แนวคิดใหม่ ฉันไม่เคยต้องทำสิ่งนี้ใน ธีม Diviและเมื่อฉันเห็นสิ่งนี้ ฉันก็ตั้งความท้าทายให้ตัวเองและตระหนักว่ามันง่ายที่จะนำไปใช้จริง ด้วยการใช้โค้ดเพียงเล็กน้อย คุณจึงมั่นใจได้ว่าจะไม่ส่งผลต่อประสิทธิภาพของบล็อกของคุณ
วางเมาส์เหนือข้อความ
ขั้นตอนที่ 1: การซ้อนทับสี
อันดับแรกเราจะเปลี่ยนสีของการวางซ้อนบนโฮเวอร์ นี่เป็นเรื่องง่ายมากที่จะทำบน Divi ในโมดูลร้านค้าของคุณไปที่ส่วน " พารามิเตอร์การออกแบบขั้นสูงขั้นสูง และเลือกสีของคุณ
ขั้นตอนที่ 2: การเพิ่ม CSS
รหัส CSS ต่อไปนี้ใน " ตัวเลือกธีม> Custom CSS หรือบนสไตล์ชีทของธีมลูกของคุณ
.woocommerce .et_overlay: ก่อนหน้า {left: 0; ระยะขอบซ้าย: 0; เนื้อหา: 'ดู'; / *** ข้อความของคุณที่นี่ *** / font-family: 'Source Without Pro', Arial! / *** เลือกแบบอักษรของคุณ *** / การแปลงข้อความ: ตัวพิมพ์ใหญ่; ขนาดตัวอักษร: 24px; สี: #fff; / *** กำหนดสีข้อความ *** / font-weight: ตัวหนา; จัดเรียงข้อความ: กึ่งกลาง; ความกว้าง: 100%; การขยาย: 5px 0; }
หากคุณต้องการให้ผลิตภัณฑ์ของคุณค่อนข้างกลมคุณสามารถเพิ่มรหัสเสริมนี้:
.woocommerce ul.products li.product img, .et_overlay {border-radius: 50%; }
ว่ามัน!
ตอนนี้คุณสามารถเยี่ยมชมร้านค้าของคุณและดูว่าการเปลี่ยนแปลงของคุณได้รับการพิจารณาอย่างไร
[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 " style = "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" target = "blank" Layout = "ขยาย" align = "กลาง" 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 ธีม
- วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
- วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
- วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
- วิธีการใช้ Divi Builder ใน WordPress
- วิธีใช้โมดูลเลื่อนภาพ Divi
- วิธีการใช้โมดูล Divi Builder Flip
- วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
- วิธีใช้โมดูลข้อความ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้ Divi
- วิธีใช้โมดูล Divi Social Media
- วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
- วิธีใช้โมดูลด้านข้าง Divi
- วิธีการใช้โมดูลตารางราคา Divi
- วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
- วิธีเพิ่มโมดูลวิดีโอของ Divi
- วิธีใช้โมดูลการนำทางบทความ
- วิธีการใช้โมดูลค้นหา Divi
- วิธีใช้โมดูลกระเป๋าสตางค์ Divi
- วิธีการใช้โมดูลคนบน Divi Builder
- วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
- วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
- วิธีใช้โมดูล Divi Builder Image
- วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
- วิธีการใช้โมดูลคลังภาพ
- วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
- วิธีใช้โมดูล Divi Full Width Portfolio
- วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
- วิธีใช้โมดูล Divi Counter
- วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
- วิธีใช้โมดูล Divi Email Optin
ข้อความที่แตกต่างกันสำหรับผลิตภัณฑ์? คุณบอกว่าจะเพิ่มในผลิตภัณฑ์ใหม่? อย่างไรและที่ไหน?
บทความยอดเยี่ยมขอขอบคุณสำหรับเคล็ดลับนี้ และถ้าเราต้องการข้อความที่แตกต่างกันตามผลิตภัณฑ์อย่างไร?
สวัสดีไบรส์,
ในกรณีนี้คุณจะเพิ่มข้อความอื่นในผลิตภัณฑ์ WooCommerce ใหม่
ซูเปอร์ !! ขอขอบคุณสำหรับเคล็ดลับนี้
ไม่มีอะไร