ต้องการเรียนรู้วิธีเพิ่มเอฟเฟกต์โฮเวอร์ให้กับรายการในวิดเจ็ตโพสต์Elementor?
หากคุณเป็นผู้ใช้ WordPress ที่ใช้ Elementor เพื่อสร้าง .ของคุณ เว็บไซต์เว็บคุณควรทำความคุ้นเคยกับคุณลักษณะเอฟเฟกต์โฮเวอร์ คุณจะพบคุณลักษณะนี้เป็นหลักในการตั้งค่าวิดเจ็ตแต่ละอัน Elementor.
เอฟเฟกต์โฮเวอร์สามารถทำให้องค์ประกอบของคุณน่าสนใจ ดังนั้นจึงเป็นวิธีที่มีประสิทธิภาพในการปรับปรุงประสบการณ์ผู้ใช้บน .ของคุณ เว็บไซต์.
เมื่อพูดถึงเอฟเฟกต์โฮเวอร์ บทความนี้จะแสดงวิธีเพิ่มส่วนหลังให้กับองค์ประกอบโพสต์แต่ละรายการในวิดเจ็ต Elementor โพสต์โดยใช้ CSS ที่กำหนดเองของ Elementor โดยเฉพาะเอฟเฟกต์โฮเวอร์แบบซูมเข้า
มีเหตุผลสองประการที่เราจัดทำบทแนะนำนี้ให้กับคุณ:
- โดยค่าเริ่มต้น คุณสามารถเพิ่มเอฟเฟกต์โฮเวอร์ให้กับโพสต์จากวิดเจ็ตโพสต์ Elementor แต่เอฟเฟกต์โฮเวอร์จะเป็นพื้นฐาน/มาตรฐานมาก
- โดยค่าเริ่มต้น Elementor อนุญาตให้คุณเพิ่มเอฟเฟกต์ซิปลงในวิดเจ็ตโพสต์ (tab สูง -> หม้อแปลงไฟฟ้า –> ขนาด). แต่เอฟเฟกต์โฮเวอร์จะส่งผลกระทบต่อองค์ประกอบวิดเจ็ตโพสต์ทั้งหมด (ไม่ใช่แต่ละรายการ)
ขั้นตอนในการเพิ่มเอฟเฟกต์โฮเวอร์ให้กับแต่ละโพสต์จากวิดเจ็ตโพสต์ของ Elementor
ก่อนเริ่มบทช่วยสอน เราต้องการแจ้งให้คุณทราบว่าบทช่วยสอนนี้ใช้คุณลักษณะ CSS ที่กำหนดเองของ Elementor ฟีเจอร์นี้ใช้ได้เฉพาะใน Elementor Pro; ตรวจสอบให้แน่ใจว่าคุณได้อัปเกรดเวอร์ชันของคุณแล้ว
ขั้นตอนที่ 1: เพิ่มวิดเจ็ตโพสต์
ไปที่เครื่องมือแก้ไข Elementor แล้วเราจะเริ่มต้นทุกอย่างตั้งแต่เริ่มต้น ดังนั้นให้สร้างส่วนที่มีคอลัมน์เดียว
อ่าน: วิธีรวม MailChimp กับ Elementor
จากนั้นเลือกวิดเจ็ตโพสต์จากแผงวิดเจ็ต จากนั้นลากและวางลงในพื้นที่แก้ไข เมื่อคุณเพิ่มวิดเจ็ตโพสต์แล้ว คุณสามารถแก้ไขและจัดรูปแบบวิดเจ็ตได้ตามต้องการ
Remarque: โปรดตรวจสอบให้แน่ใจว่าคุณได้เผยแพร่บทความเกี่ยวกับของคุณแล้ว เว็บไซต์.
ขั้นตอนที่ 2: เพิ่มข้อมูลโค้ด CSS
เมื่อคุณแก้ไขและจัดรูปแบบวิดเจ็ตโพสต์แล้ว ต่อไปเราจะเพิ่มเอฟเฟกต์โฮเวอร์ภายในโพสต์แต่ละรายการโดยเพิ่มข้อมูลโค้ด CSS อย่างง่าย ในการตั้งค่าวิดเจ็ตโพสต์ ให้ไปที่ Tab สูง -> CSS ที่กำหนดเอง. โปรดคัดลอกข้อมูลโค้ด CSS ด้านล่างแล้ววางลงในช่อง CSS ที่กำหนดเอง.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
โค้ดด้านบนจะเลือกองค์ประกอบโพสต์แต่ละรายการในวิดเจ็ตโพสต์โดยใช้ตัวเลือก .élémentor-post และใช้การแปลง CSS
หากคุณพอใจกับเอฟเฟกต์โฮเวอร์ที่ใช้ คุณสามารถคงไว้อย่างนั้นและบันทึกโปรเจ็กต์ของคุณได้หากต้องการ แต่ถ้าคุณต้องการปรับแต่งความเร็วในการเปลี่ยนและค่ามาตราส่วนการแปลง คุณสามารถเปลี่ยนค่าในข้อมูลโค้ด CSS
Remarque: การแปลง/ซูมเข้าเป็นเอฟเฟกต์ทั่วไปและเป็นที่นิยมที่ใช้บนเว็บไซต์ หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับวิธีการอื่นๆ ในการเปลี่ยนเอฟเฟกต์โฮเวอร์ คุณสามารถไปที่นี้ หน้า.
ค้นพบยัง: ตัวเลือกวิดเจ็ต Elementor ทั้งหมดในบทความต่อไปนี้
รับ Elementor Pro ทันที!!!
สรุป
บทความนี้แสดงให้คุณเห็นว่าการเพิ่มเอฟเฟกต์โฮเวอร์ให้กับองค์ประกอบโพสต์แต่ละรายการในวิดเจ็ตโพสต์ของ Elementor นั้นง่ายดายเพียงใดโดยใช้ CSS ที่กำหนดเอง
เทคนิคที่เราใช้สำหรับเอฟเฟ็กต์นี้คือ ( ซูมเข้า ) ซึ่งเกี่ยวข้องกับ 2D และองค์ประกอบที่แปลงร่างหลอกบางส่วน ปรับแต่งและเล่นกับเอฟเฟกต์โฮเวอร์ทุกสไตล์จนกว่าคุณจะพบเอฟเฟกต์โฮเวอร์ที่ดีที่สุดสำหรับเว็บไซต์ของคุณ
ที่นี่คือ! เราเพิ่งแนะนำคุณให้รู้จักกับเครื่องมือที่ดีที่สุดสำหรับ การตลาด ทางอีเมลสำหรับ Elementor หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการใช้งานโปรดแจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
