ต้องการเพิ่มเอฟเฟกต์โฮเวอร์ใน Elementor ผ่าน CSS ที่กำหนดเองหรือไม่
Elementor มีฟีเจอร์ในตัวเพื่อเพิ่มเอฟเฟกต์โฮเวอร์ให้กับองค์ประกอบ (เราได้กล่าวถึงสิ่งนี้ในบทความของเรา แม้ว่าฟีเจอร์นี้จะมีประโยชน์เพียงพอ แต่ก็มีข้อเสีย คุณสามารถเพิ่มเอฟเฟกต์โฮเวอร์ได้เท่านั้น ส่วน คอลัมน์ วิดเจ็ตรูปภาพ วิดเจ็ตปุ่ม และวิดเจ็ตโพสต์
อ่าน: วิธีการติดตั้ง Elementor บน WordPress
คุณสมบัติเอฟเฟกต์โฮเวอร์ในตัวของ Elementor ไม่อนุญาตให้คุณเพิ่มเอฟเฟกต์โฮเวอร์ให้กับวิดเจ็ตอื่น ๆ เช่นวิดเจ็ตตัวแก้ไขข้อความ วิดเจ็ตชื่อ ฯลฯ ข้อเสียอีกประการหนึ่งคือคุณสามารถเพิ่มเอฟเฟกต์โฮเวอร์พื้นฐานเท่านั้น
มีตัวเลือกอื่นในการเพิ่มเอฟเฟกต์โฮเวอร์ใน Elementor หรือไม่?
มีครับ. คุณสามารถเพิ่มเอฟเฟกต์โฮเวอร์ใน Elementor ผ่าน CSS ที่กำหนดเองได้ แต่ในการเพิ่ม CSS ที่กำหนดเอง คุณต้องใช้ Elementor Pro เนื่องจาก CSS ที่กำหนดเองมีให้ใช้งานใน Elementor Pro เท่านั้น
การเพิ่มเอฟเฟกต์โฮเวอร์ใน Elementor ผ่าน CSS . ที่กำหนดเอง
ก่อนที่เราจะเริ่ม เรามาดูตัวอย่างของเอฟเฟกต์โฮเวอร์ที่สร้างผ่าน CSS ที่กำหนดเองกัน
ต่างจากเอฟเฟกต์โฮเวอร์ในตัวของ Elementor คุณสามารถใช้วิธีนี้เพื่อเพิ่มเอฟเฟกต์โฮเวอร์ให้กับองค์ประกอบใดๆ ใน Elementor ไม่ว่าจะเป็นส่วน คอลัมน์ หรือวิดเจ็ต (วิดเจ็ตทั้งหมด)
ในตัวอย่างนี้ เราจะแสดงวิธีเพิ่มเอฟเฟกต์จุดให้กับคอลัมน์
ขั้นแรก ให้คลิกที่จุดจับคอลัมน์เพื่อสลับไปที่แผงการตั้งค่าคอลัมน์ ไปที่แท็บ สูง และเปิดบล็อค ประเพณี CSS และวางโค้ด CSS ต่อไปนี้
ตัวเลือก: โฮเวอร์ {การเปลี่ยน: ทั้งหมด .2s เข้าออกง่าย; แปลง: มาตราส่วน (1.1); เคอร์เซอร์: จุด; ดัชนี z: 1; }
ที่นั่น
ในโค้ดด้านบนเราใช้คุณสมบัติ CSS แปลง () เพื่อเพิ่มเอฟเฟกต์โฮเวอร์ ประเภทของการแปลงที่เราใช้ในตัวอย่างนี้คือมาตราส่วน โดยมีระยะเวลา 1,1 วินาที
คุณสามารถใช้การแปลงรูปแบบอื่นๆ ได้อีก 4 ประเภท:transform
- มดลูก
- แปลความ
- หมุน
- ลาด
หากคุณต้องการใช้รูปแบบการแปลงอื่น คุณเพียงแค่แทนที่ค่าของ แปลง ในโค้ด CSS ด้านบน
คุณสามารถอ่านได้ หน้านี้ เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการแปลง CSS
คุณสามารถไปตามเส้นทางเดียวกันเพื่อเพิ่มเอฟเฟกต์โฮเวอร์ให้กับองค์ประกอบอื่นๆ
หากต้องการเพิ่มเอฟเฟกต์จุดให้กับส่วน คุณสามารถคลิกที่จุดจับส่วนและไปที่แท็บ สูง และเปิดบล็อค CSS ที่กำหนดเอง
หากต้องการเพิ่มเอฟเฟกต์โฮเวอร์ให้กับวิดเจ็ต คุณสามารถคลิกที่แฮนเดิลของวิดเจ็ตแล้วไปที่แท็บอีกครั้ง ขั้นสูง แล้วเปิดบล็อก CSS ที่กำหนดเอง
ปลั๊กอิน WordPress พรีเมียมเพิ่มเติมอื่น ๆ
นอกจากนี้ยังค้นพบอื่น ๆ ปลั๊กอิน WordPress พรีเมี่ยมที่เพิ่มประสิทธิภาพการทำงานของบล็อก WordPress หรือเว็บไซต์ของคุณ
1 ป๊อปอัพการขายสด
ป๊อปอัปการขายสดเป็นอีกเรื่องหนึ่ง WordPress ปลั๊กอิน การแจ้งเตือนด้วยสารพัดหลายอย่างที่คุณสามารถเปลี่ยนเป็นข้อได้เปรียบได้ ก่อนอื่นเขามีโอกาส แสดงหน้าต่างป๊อปอัป เมื่อมีคนสั่งซื้อเสร็จสมบูรณ์ 
ประการที่สองหน้าต่างป๊อปอัปการขายแบบเรียลไทม์ยังสามารถแสดงการแจ้งเตือนเมื่อบุคคลเพียงแค่เพิ่มสินค้าลงในรถเข็น และประการที่สามคุณสามารถใช้เครื่องมือนี้เพื่อเพิ่มโฆษณาให้กับผลิตภัณฑ์โดยการแสดงจำนวนผู้เยี่ยมชมที่ดูบทความ
ด้วยเทรนด์เว็บล่าสุดคุณสามารถคาดหวังว่า Live Sales Popup จะแสดงอย่างสวยงามบนอุปกรณ์และเบราว์เซอร์ทั้งหมด สำหรับเค้าโครงป๊อปอัปคุณสามารถปรับแต่งให้ละเอียดที่สุดได้
อ่าน: วิธีการแก้ไขการแจ้งเตือนการรักษาความปลอดภัยบนบล็อกของคุณ WordPress
คุณสมบัติอื่น ๆ ของ Live Sales Popup คือภาพเคลื่อนไหวเสียงมากกว่าสามสิบแบบ นับถอยหลัง และตำแหน่งส่วนบุคคล นอกจากนี้ยังใช้งานได้กับการแจ้งเตือนปลอมและให้คุณตั้งค่าเฉพาะสำหรับเพจเฉพาะที่คุณต้องการให้การแจ้งเตือนทำงาน
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
2 Foodify
อาหาร เป็นวิธีที่เร็วและง่ายที่สุดสำหรับลูกค้าในการสั่งอาหารจากร้านค้า มันคือทั้งหมด การตอบสนอง และมีคุณสมบัติเพิ่มเติมเช่นรูปภาพ ตัวเลือกการค้นหาข้อมูลผลิตภัณฑ์ 
นอกจากนี้ยังเพิ่มปุ่มลงในรถเข็นเพื่อปรับปรุง ประสบการณ์ของผู้ใช้. ส่วนขยาย WooCommerce นี้เป็นโซลูชันการสั่งซื้อที่รวดเร็วและครอบคลุมซึ่งสามารถเพิ่มลงในเว็บไซต์ WooCommerce ใดก็ได้
ที่นี่สำหรับคุณ ปลั๊กอิน WordPress 5 เพื่อเพิ่มประสิทธิภาพคำอธิบายหมวดหมู่และป้ายกำกับ
มีข้อดีคือมีความยืดหยุ่นและเข้ากันได้กับปลั๊กอินที่มีอยู่มากมายในไดเรกทอรี WordPress
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3. Mega Zoom & Pan Image Viewer
ปลั๊กอิน Mega Zoom & Pan Image Viewer เป็นโปรแกรมดูรูปภาพและเบราว์เซอร์ที่ยอดเยี่ยมพร้อมเลย์เอาต์ที่ตอบสนองอย่างเต็มที่สำหรับการแสดงภาพขนาดใหญ่บน บล็อก WordPress.
เป็นเครื่องมืออันทรงพลังที่ออกแบบมาเพื่อนำเสนอผลิตภัณฑ์ (ภาพผลิตภัณฑ์ที่มีความละเอียดสูงเช่นเสื้อผ้ารถยนต์แผนภาพทางเทคนิค ฯลฯ ) แสดงแผนที่และภาพอื่น ๆ ทั้งหมดด้วยการซูมและการทำงานของมัน พาโนรามาการควบคุมทิศทาง แถบเลื่อนและเครื่องหมาย / จุดเชื่อมต่อที่ปรับแต่งได้สูง
นี่คือ 5 แอพสมาร์ทโฟนเพื่อปกป้องรูปภาพและวิดีโอของคุณ
ปลั๊กอินนี้ใช้งานได้ดีบน iOS (iPad, iPhone), Android และ Windows mobile เป็นต้น นอกจากนี้ยังใช้งานได้กับเบราว์เซอร์รุ่นใหม่และเบราว์เซอร์รุ่นเก่า เช่น IE7 หรือ IE8
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
นอกจากนี้เรายังขอเชิญคุณให้ศึกษาข้อมูลด้านล่างเพื่อเพิ่มเติมในส่วนที่จับและควบคุมของเว็บไซต์และบล็อกของคุณ
- วิธีลบความคิดเห็นที่รอดำเนินการทั้งหมดใน WordPress
- เมื่อไหร่และวิธีการติดตั้ง WordPress ในไดเรกทอรีย่อย
- 5 ปลั๊กอิน WordPress เพื่อเพิ่มความสุขในวันคริสต์มาสให้กับเว็บไซต์ของคุณ
- ปลั๊กอิน 10 WordPress เพื่อปรับปรุงภาพลักษณ์ของเว็บไซต์ของคุณ
สรุป
ที่นี่คือ ! เพียงเท่านี้สำหรับคู่มือนี้ เราหวังว่าบทความนี้จะช่วยให้คุณเพิ่มเอฟเฟกต์โฮเวอร์ใน Elementor ผ่าน CSS ที่กำหนดเองได้ คุณยังสามารถอ่านบทความของเราได้ที่ วิธีแก้ไขการบล็อกการแสดงผล JavaScript และ CSS ใน WordPress.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
หากคุณมีเพื่อนหรือความคิดเห็นโปรดทิ้งไว้ในส่วน ไม่มีความคิดเห็น. ส่วนใหญ่ แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
