วิธีสร้างพื้นหลังไล่ระดับสีแบบเคลื่อนไหวโดยใช้ Elementor

Rifat Jul 26, 2022

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

พื้นหลังไล่ระดับสีแบบเคลื่อนไหวไม่จำเป็นต้องใช้ Elementor pro คุณจะออกแบบพื้นหลังไล่ระดับสีแบบเคลื่อนไหวของเราโดยใช้ Elementor รุ่นฟรีและปลั๊กอินฟรีเพิ่มเติม

สร้างพื้นหลังไล่ระดับสีแบบเคลื่อนไหวโดยใช้ Elementor

คุณต้องเปิดใช้งานปลั๊กอิน Elementor Addon Elements WordPress คุณไม่ต้องจ่ายสำหรับฉากหลังแบบไล่ระดับสีแบบเคลื่อนไหวเนื่องจากปลั๊กอินฟรี

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

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

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

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

ห่อ

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

Divi WordPress Theme