ปัจจุบัน "เนื้อหาคือกษัตริย์" แต่ "รูปลักษณ์คือราชินี" และคำพูดนี้ไม่เคยตรงไปตรงมาเท่าที่วันนี้ การมีดีไซน์ที่ดึงดูดสายตาจะช่วยให้เจ้าของเว็บจับใจผู้เยี่ยมชมได้ นอกจากเลย์เอาต์ที่คิดไว้ดี สีสันที่สอดคล้อง และฟอนต์ที่สวยงาม หนึ่งในวิธีที่ทำให้ผู้เยี่ยมชมสนใจทันทีคือการใช้ข้อความเคลื่อนไหวแบบเครื่องพิมพ์ (Typewriter-like text) หากคุณใช้ WordPress สามารถทำได้ง่ายๆ ด้วยปลั๊กอินชื่อ Typed Js
หมายเหตุ: เนื่องจากเอฟเฟกต์เป็นข้อความเคลื่อนไหว ไม่สามารถอธิบาย "ความโคตรเท่" ได้ด้วยคำหรือภาพนิ่ง ผมจึงนำไปใช้ในโปรเจกต์เว็บส่วนตัว คุณสามารถดูตัวอย่างได้ที่นั่น
การติดตั้งและตั้งค่าปลั๊กอิน
การติดตั้งปลั๊กอินใน WordPress ง่ายมาก โดยเฉพาะคนที่เคยเล่น WordPress มาสักพัก เพียงล็อกอินเข้าแอดมิน ไปที่เมนู "Plugins → Add New" ค้นหา "Typed Js" จากคลังปลั๊กอิน แล้วติดตั้งและเปิดใช้งาน
ตอนนี้พร้อมสร้างเอฟเฟกต์ Typed Js ใหม่ กระบวนการคล้ายการสร้างโพสต์ใหม่ ไปที่เมนู "Typed → Add New" จากแถบด้านซ้าย ตั้งชื่อให้เอฟเฟกต์ใหม่
สำคัญ! โปรดสังเกต "Generated Shortcode" คือข้อความภายใน "[square brackets]" คัดลอกทั้งหมดรวมถึงวงเล็บ แล้วนำไปวางที่ต้องการให้เอฟเฟกต์ปรากฏ ชุดข้อความต่างกันจะมี Shortcode ต่างกัน
ในส่วน "Typed Options" คุณสามารถเพิ่มสตริงของคำ/วลี/ประโยคที่ต้องการให้แสดงตามลำดับที่ชอบ ใช้ปุ่ม "Plus (+)" เพิ่มสตริงใหม่ และ "Minus (-)" ลบรายการ
ด้านล่างของสตริงมีการตั้งค่าต่างๆ เพื่อปรับรูปลักษณ์ของเอฟเฟกต์ สามารถปรับ Typing Speed, Start Delay, Back Speed, Back Delay ได้ (หน่วยเป็นมิลลิวินาที) ยังสามารถตั้งให้เล่นวนลูป แสดงเคอร์เซอร์ เลือกตัวอักษรเป็นเคอร์เซอร์ และทำให้กระพริบได้
อีกอย่างที่ปรับได้คือการแสดงผล เช่น ฟอนต์และสี
เมื่อตั้งค่าเสร็จสิ้น กด "Publish" หรือ "Update"
การใช้งานเอฟเฟกต์ใน WordPress
ตามที่กล่าวมา ให้คัดลอก Shortcode ไปวางที่ต้องการให้เอฟเฟกต์ปรากฏ สำหรับเว็บของผม จะใช้บน Landing Page ที่สร้างด้วย SiteOrigin Page Builder
สร้างหน้าใหม่ผ่าน "Pages → Add New" เลือกแท็บ "Page Builder" เพิ่ม "Row" ตั้งค่าเป็น 1 คอลัมน์ ใส่วิดเจ็ต "SiteOrigin Hero" ลงใน Row
เปิดเฟรมแก้ไขเนื้อหาเหมือนแก้ไขโพสต์ปกติ ใส่ Shortcode ที่สร้างไว้ก่อนหน้า
เพื่อให้สมบูรณ์ เพิ่มและปรับแต่ง "ปุ่ม" ที่ลิงก์ไปหน้า "Contact Me" ที่ตั้งไว้ก่อนหน้า เพื่อให้ผู้เยี่ยมชมที่ต้องการบริการติดต่อได้
นี่คือผลลัพธ์สุดท้าย หากอยากดูตัวอย่างจริง สามารถเข้าเว็บของผมได้
คุณสามารถสร้าง Typed Js ได้หลายรายการ แล้วนำ Shortcode ไปวางในโพสต์หรือหน้าเว็บได้ทุกที่ แม้จะเท่มาก แต่ไม่สามารถใช้ใน Title ได้ (ผมลองแล้ว)
คุณคิดยังไงกับเอฟเฟกต์ Typed Js? เห็นตัวเองใช้ได้ไหม? แชร์ความคิดเห็นได้ที่ความคิดเห็นด้านล่างครับ
