Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62

ในการกวดวิชาก่อนหน้าเรา คุณแนะนำ Divi. สำหรับผู้ที่ไม่ทราบ Divi เป็นธีม WordPress พรีเมี่ยมที่ออกแบบโดยทีมงาน ธีมที่สง่างาม ซึ่งเสนอบริการต่าง ๆ บน WordPress และออกแบบปลั๊กอินและชุดรูปแบบ

Divi เป็นชุดรูปแบบที่ตอบสนองและหลังเข้ากันได้กับปลั๊กอินอื่น ๆ ในหมู่อื่น ๆ ที่เรามี WooCommerce วันนี้เราจะแสดงวิธีสร้างภาพเคลื่อนไหวที่แตกต่างให้กับผลิตภัณฑ์ WooCommerce ของคุณ

บางครั้งรูปแบบของ WooCommerce อาจไม่เหมาะสมโดยเฉพาะอย่างยิ่งถ้าสไตล์ CSS ของคุณแตกต่างกันเล็กน้อย บทช่วยสอนนี้ซึ่งจะเป็นเทคนิคเล็กน้อย (CSS เล็ก ๆ น้อย ๆ และไม่มีอะไรอื่น) จะช่วยให้คุณแก้ไขปัญหานี้ได้

บทเรียนอื่น ๆ เกี่ยวกับชุดรูปแบบ Divi

ขอเริ่มต้น

วิธีเพิ่มรูปภาพให้กับผลิตภัณฑ์ woocommerce

การปรับเปลี่ยนไอคอนสำหรับข้อความบนเม้าส์

โดยค่าเริ่มต้นเมื่อคุณใช้ WooCommerce กับ Divi และวางเมาส์เหนือผลิตภัณฑ์คุณจะเห็นไอคอน '+' ขนาดเล็กซึ่งเป็นแบบอักษร (ทำให้ไอคอน) เสนอโดย Divi และซึ่งเป็นดังนี้:

ไอคอน woocommerce เริ่มต้น

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ให้คุณสร้าง อย่างง่ายดายและฟรี การออกแบบเว็บไซต์หรือบล็อกใดๆ ก็ตามที่ดูเป็นมืออาชีพ หยุดจ่ายมากสำหรับเว็บไซต์ที่คุณทำเองได้

มันง่ายมากที่จะเปลี่ยนเป็นไอคอนอื่นในการตั้งค่า แต่ถ้าคุณต้องการเพิ่มข้อความมันเป็นอย่างอื่นหรือไม่? ฉันจะแสดงวิธีการบรรลุเป้าหมายนี้ด้วยตัวอย่าง CSS ของวันนี้และฉันจะรวมโค้ดที่ไม่บังคับเพื่อเพิ่มลงในไซต์ของคุณ

นี่คือสิ่งที่เราจะได้เสร็จสิ้นเมื่อ:

ผลลัพธ์สุดท้ายของการปรับเปลี่ยนผลิตภัณฑ์ Wordpress

ทำไมต้องใช้ข้อความแทนไอคอนล่ะ?

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

ฉันสามารถคิดถึงเหตุผลบางอย่างที่ทำให้คุณทำสิ่งนี้ได้:

วิธีกำหนดรูปลักษณ์ที่เป็นเอกลักษณ์ให้กับร้านค้าของคุณ: ทุกสิ่งที่คุณสามารถทำได้เพื่อแยกไซต์ Divi / WooCommerce ของคุณออกจากไซต์อื่นเป็นสิ่งที่ดีเสมอ

การใช้คำเช่น "ดู" หรือ "ซื้อ" อาจทำให้เกิด Conversion มากขึ้น: ทุกคนต้องทำสิ่งที่ดีที่สุดสำหรับเว็บไซต์ของพวกเขาและคุณสามารถใช้ประโยชน์จากการทดสอบ A / B แบบรวมใน Divi เพื่อช่วยในเรื่องนั้น

แหล่งที่มาของแรงบันดาลใจ

ฉันเพิ่งเรียกดูไซต์ที่มีข้อความบนผลิตภัณฑ์ที่วางเมาส์เหนือ แน่นอนว่าฉันเคยเห็นมันจากไซต์อีคอมเมิร์ซอื่น ๆ ที่มีคำมากกว่าไอคอนบนผลิตภัณฑ์ที่วางเมาส์อยู่ดังนั้นนี่จึงไม่ใช่แนวคิดใหม่ ฉันไม่เคยต้องทำสิ่งนี้ในธีม Divi เลยและเมื่อฉันเห็นสิ่งนี้ฉันก็ตั้งโจทย์ให้กับตัวเองและตระหนักว่ามันง่ายมากที่จะนำสิ่งนี้ไปใช้ ด้วยรหัสที่จำเป็นเพียงเล็กน้อยคุณจึงมั่นใจว่าจะไม่ส่งผลกระทบต่อประสิทธิภาพของบล็อกของคุณ

ตัวอย่างเว็บไซต์

วางเมาส์เหนือข้อความ

ขั้นตอนที่ 1: การซ้อนทับสี

อันดับแรกเราจะเปลี่ยนสีของการวางซ้อนบนโฮเวอร์ นี่เป็นเรื่องง่ายมากที่จะทำบน Divi ในโมดูลร้านค้าของคุณไปที่ส่วน " พารามิเตอร์การออกแบบขั้นสูงขั้นสูง และเลือกสีของคุณ

การเลือกสี 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 อื่น ๆ

10 หุ้น
หุ้น6
ทวีต
Enregistrer4