วิธีสร้าง Image Scroll Effect ใน Elementor

ต้องการวิธีสร้างเอฟเฟกต์การเลื่อนรูปภาพค่ะ Elementor - ในบทความนี้ เราจะแนะนำให้คุณสร้างเอฟเฟกต์การเลื่อนรูปภาพโดยใช้ Elementor บนหน้าเว็บของคุณ

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

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

แต่ด้วยเอฟเฟ็กต์การเลื่อนรูปภาพ คุณสามารถเพิ่มรูปภาพได้มากขึ้นด้วยวิธีที่น่าสนใจซึ่งสามารถดึงดูดความสนใจของผู้ชมได้อย่างง่ายดาย

สร้าง Image Scroll Effect ใน Elementor

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

ตอนนี้ ให้เปิดเพจด้วยโปรแกรมแก้ไข Elementor แล้วคลิกไอคอนเครื่องหมายบวกเพื่อเพิ่มส่วน

ตอนนี้คุณต้องเลือกคอลัมน์สำหรับส่วนของคุณ ที่นี่เราเลือกส่วนคอลัมน์เดียว

สร้างเอฟเฟกต์การเลื่อนรูปภาพใน Elementor

ตอนนี้คลิกที่ไอคอนแก้ไขส่วน และในแท็บเค้าโครง ให้ตั้งค่าความสูงขั้นต่ำเป็น 500

จากวิดเจ็ตบล็อก ให้เพิ่มบล็อกส่วนภายในลงในส่วนที่คุณสร้างและลบคอลัมน์เริ่มต้น คลิกขวาที่ไอคอนแก้ไขคอลัมน์ แล้วคลิกตัวเลือกลบเพื่อลบคอลัมน์หลัก

ไปที่ตัวเลือกแก้ไขของส่วนด้านในอีกครั้ง และในแท็บเลย์เอาต์ ให้ตั้งค่าความสูงขั้นต่ำเป็น 500 ตามที่แสดงไว้ก่อนหน้านี้

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

ตอนนี้เปลี่ยนเป็นแท็บ สูง เพื่อเพิ่ม CSS ที่กำหนดเอง ในฟิลด์ CSS แบบกำหนดเอง ให้เพิ่มโค้ดต่อไปนี้:

ตัวเลือก{ -webkit-transition: easy-in-out 3s !important; การเปลี่ยนแปลง: ง่ายเข้า-ออก 3s !important; } ตัวเลือก: เลื่อน{ ตำแหน่งพื้นหลัง: ตรงกลางด้านล่าง !important; }

คุณสามารถเปลี่ยนค่าการเปลี่ยนแปลงเพื่อเปลี่ยนเอฟเฟกต์การเลื่อนของรูปภาพ หากคุณต้องการเพิ่มรูปภาพหลายๆ รูปที่มีเอฟเฟ็กต์เดียวกัน คุณสามารถทำซ้ำคอลัมน์แล้วเปลี่ยนรูปภาพพื้นหลังได้

สรุป

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

เราหวังว่าบทความนี้จะเป็นประโยชน์กับคุณ หากคุณชอบบทความนี้ โปรดกดไลค์เพจ Facebook ของเราเพื่อไม่พลาดการติดต่อ