Elementor 2.10 Multi Step Form และ Lottie Animations

Elementor เวอร์ชั่น 2.10 เพิ่มฟีเจอร์ Multi Step Form ให้กับ Form widget และเพิ่ม widget ใหม่อีกตัว คือ Lottie widget ให้เราสามารถใช้กราฟฟิคแบบ animations จาก Lottiefiles.com ได้

Multi Step Form

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

Elementor Multi Step Form
ฟอร์มที่แบ่งแต่ละช่วงเป็น Multi Step Form

การสร้าง Multi Step Form

ขั้นแรกก็ให้เราสร้างฟอร์มเหมือนปกติ เมื่อถึงจุดที่เราต้องการตัดให้เป็นช่วงหรือ step ใหม่ ก็ให้เพิ่มฟอร์มไอเทมใหม่ โดยเลือกประเภท Field Type เป็นแบบ Step เพื่อสร้างตัวแบ่งฟอร์มแต่ละขั้นตอน

การเพิ่ม step form Elementor

เมื่อเราเลือกเป็นแบบ Step แล้ว ระบบก็จะสร้าง step ขึ้นมา 2 อันในอันดับแรก ซึ่ง step แรก จะถูกใส่ไว้แรกสุดอัตโนมัติ และอันที่เราสร้างขึ้นเพื่อเป็น step ถัดไปนี้เอง

การปรับแต่ง Step แต่ละอัน สามารถปรับแต่งข้อความให้กับปุ่ม Previous และ Next ได้

การเปลี่ยนไอคอนของ Step ต้องไปกำหนดประเภทของ Step ให้เป็นแบบ Icon ในแท็บ Steps Settings ที่อยู่ด้านล่างเสียก่อน ไอคอนที่เราเลือกไว้ถึงจะแสดง ใน Steps Settings เราจะเลือก Shape หรือกรอบรอบไอคอนหรือตัวเลขได้ 4 แบบ คือ Circle, Square, Rounded, None

ตั้งค่าให้แสดง Icon สำหรับ Multi Step Form
เลือกเป็นประเภท Icon

สามารถเลือกไอคอนจากไลบารี่ที่มีอยู่แล้ว หรืออัพโหลดขึ้นเองก็ได้

Icon Library
Elementor multi step icon

Lottie Widget

Lottie คือ แหล่งรวม SVG Animation ที่ให้เราสามารถนำมาใช้กับเว็บได้ และเรายังสามารถที่จะจ้างให้นักออกแบบ สร้างภาพแอนิเมชั่นเฉพาะสำหรับเราเลยก็ได้ที่เว็บ Lottiefiles.com ซึ่งข้อดีก็คือ ไฟล์ SVG เป็นไฟล์ที่มีขนาดเล็ก เมื่อมาทำเป็น animation จึงทำให้มีขนาดเล็กกว่าไฟล์อื่นๆ และเรายังสามารถตั้งค่าควบคุมการทำงานของ animation ได้ ไม่เหมือนกับไฟล์ GIF หรือไฟล์พวก Video

Lottiefiles.com
Lottiefiles.com

เราสามารถเลือก animation ที่เราต้องการ และปรับแต่งค่าต่างๆ ได้ จากนั้นก็คลิกที่ปุ่ม Download JSON เพื่อไว้ใช้อัพโหลดในเว็บของเรา หรือจะใช้วิธีก๊อปปี้ URL จากช่อง Lottie Animation URL ด้านล่างก็ได้

Download Lottie Json file

การแทรก Lottie Animations

Lottie Widget Elementor
Lottie widget

หลังจากเพิ่ม Lottie widget แล้ว ให้เราคลิกปุ่ม Upload แล้วทำการอัพโหลดไฟล์ .json ที่เราดาวน์โหลดไว้ก่อนหน้านี้ขึ้นไป หรือถ้าใช้แบบก๊อป URL มา ก็ให้เลือก Source เป็นแบบ External URL

Upload ไฟล์ Lottie Json

จากนั้นภาพก็จะปรากฏแบบนี้

เราสามารถตั้งค่าเพิ่มเติมได้ที่แท็บ Settings เช่น การควบคุมความเร็ว การกำหนดให้ทำงานเมื่อ Hover หรือ Scroll ไปถึงจุดที่แสดงภาพ เป็นต้น

Lottie Settings
Advertisements