คุณเคยเห็นภาพเคลื่อนไหว CSS ที่สวยงามเหล่านี้บนเว็บไซต์ยอดนิยมหรือไม่? เอฟเฟกต์แอนิเมชั่นเช่นเนื้อหาที่สไลด์, ที่กระจายไป, ภาพที่เด้งออกมา ฯลฯ …. เหรอ? คุณต้องการเพิ่มภาพเคลื่อนไหว CSS ใน WordPress หรือไม่?

ในบทความนี้เราจะแสดงวิธีเพิ่มภาพเคลื่อนไหว CSS ลงใน WordPress โดยไม่ต้องเขียนโค้ดใด ๆ

เมื่อไหร่และทำไมคุณควรใช้ภาพเคลื่อนไหว CSS?

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

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

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

แต่ก่อนหน้านี้หากคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ 

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

วิธีการตั้งค่าภาพเคลื่อนไหว CSS

เราจะใช้ปลั๊กอินสำหรับบทช่วยสอนนี้ จะช่วยให้คุณสร้างภาพเคลื่อนไหว CSS โดยใช้ โปรแกรมแก้ไขภาพ WYSIWYG. สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน ภาพเคลื่อนไหวมัน!. ปลั๊กอินทำงานโดยไม่มีการกำหนดค่าและไม่มีแผงควบคุม

ค้นพบ วิธีการติดตั้งปลั๊กอินในเวิร์ดเพรส ถ้าคุณไม่เคยทำ

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

เพิ่มภาพเคลื่อนไหว CSS บน WordPress - ปุ่ม animateit

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

แอนิเมชั่บรรณาธิการ

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

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

ปลั๊กอินมีสามทางเลือก คุณสามารถเรียกใช้แอนิเมชั่นเมื่อคลิกวางเมาส์หรือขณะเลื่อน

เพิ่มภาพเคลื่อนไหว CSS ไปยัง WordPress - animateon

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

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

เคลื่อนไหว-รหัส

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

ค้นพบด้วย วิธีเพิ่มแผนที่เชิงโต้ตอบลงในเว็บไซต์ WordPress ของคุณ

เนื้อหาย่อ

สิ่งที่คุณต้องทำตอนนี้คือเผยแพร่เนื้อหาของคุณและดูตัวอย่าง

ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง  

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

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 ChimpMate Pro

ชิมเมทคือ WordPress ปลั๊กอิน ป๊อปอัประดับพรีเมียมของ MailChimp ซึ่งจะช่วยให้คุณแปลงผู้อ่านของคุณให้เป็นสมาชิก ได้รับการออกแบบมาเพื่อขยายรายชื่ออีเมลของคุณโดยไม่รบกวนผู้เยี่ยมชมด้วยป๊อปอัปที่น่ารำคาญChimpMate Pro

มันสามารถปรับแต่งได้อย่างเต็มที่และคุณจะเชี่ยวชาญเมื่อใดและที่ไหนที่จะแสดงป๊อปอัป คุณสมบัติอื่น ๆ ของมันคือการสนับสนุน ของเบราว์เซอร์หลายแห่งและมี pตัวเลือกการตั้งเวลาหลายแบบเค้าโครงที่ปรับแต่งได้ทั้งหมดการสนับสนุนลูกค้าที่ตอบสนอง iบูรณาการที่สมบูรณ์แบบด้วย WooCommerceexcellente การจัดการแคชบูรณาการที่สมบูรณ์แบบ ที่มีมากมาย ธีม WordPress, การสนับสนุนหลายภาษาขอบคุณ ไปยังปลั๊กอิน WPML, eไม่มากอีกต่อไป

ดาวน์โหลดสาธิต | เว็บโฮสติ้ง

2 WooCommerce Card Gateway Payment Gateway

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

เกตเวย์การชำระเงิน WooCommerce

นอกจากนี้ยังช่วยให้คุณสามารถรับชำระเงินโดยใช้โซลูชันที่โฮสต์กับ Cardstream

ดาวน์โหลดสาธิต | เว็บโฮสติ้ง

3 แหล่งข้อมูล

แหล่งข้อมูลเป็น WordPress ปลั๊กอิน พรีเมียมเน้นที่การนำเสนอข้อมูลของคุณด้วยภาพในหน้าใดๆ ของเว็บไซต์ของคุณ ช่วยให้คุณสามารถนำเสนอข้อมูลจากไฟล์ CSV, XML, Excel, Google Spreadsheets, ฐานข้อมูล MySQL หรือประเภทโพสต์ที่กำหนดเองเป็นตารางที่จัดเรียงและกรองได้ กราฟต่างๆ แผนที่ และอื่นๆปลั๊กอิน wordpress แหล่งข้อมูลแทรกตารางกราฟิกแบบฟอร์มบล็อกเว็บไซต์

ท่ามกลางคุณสมบัติของมันคุณจะพบกับคนอื่น ๆ : ฉันอินเตอร์เฟซที่ใช้งานง่าย, tสามารถขึ้นอยู่กับรูปแบบของข้อมูลของคุณables ที่เรียงลำดับได้กรองและตอบสนองสนับสนุนของ Google Maps และ พูดได้หลายภาษาการสนับสนุนลูกค้าที่ตอบสนองต่อหนึ่งเมตรคู่มือผู้ใช้ iการติดตั้งอย่างรวดเร็ว et เพิ่มเติม

ดาวน์โหลด สาธิต | เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

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

สรุป

ที่นี่! สำหรับบทช่วยสอนนี้เราหวังว่าจะช่วยให้คุณเรียนรู้วิธีการรวมภาพเคลื่อนไหว CSS ใน WordPress อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ

อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress

หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.

...