วิธีเพิ่มการเลื่อนอย่างราบรื่นไปยังส่วนต่างๆ บน Elementor

Franklin บทช่วยสอน WordPress Nov 7, 2021

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

นี่คือเหตุผลที่เราจะใช้เวลาในการอธิบายในบทความนี้โดยไม่มีปัญหา เราจะแบ่งปันกระบวนการกับคุณในสองขั้นตอนง่ายๆ

การกำหนดค่าส่วน

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

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

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

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

เริ่มเลย

การกำหนดค่าเมนู

คุณสามารถเข้าถึงเมนูได้อย่างง่ายดายโดยทำตามเส้นทาง Dashboard-

นี่คือสิ่งที่ผลลัพธ์ควรมีลักษณะเช่นนี้

ปลั๊กอินอื่นๆ เพื่อการเลื่อนที่ราบรื่น

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

เลื่อนหน้าไปที่ ID

การเลื่อนหน้าไปที่ id เป็นปลั๊กอิน WordPress ฟรีที่มีคุณสมบัติครบถ้วนที่เพิ่มแอนิเมชั่นที่ลื่นไหล โดยที่เบราว์เซอร์จะมีพฤติกรรมกระโดด โดยมีแอนิเมชั่นการเลื่อนที่ราบรื่น เมื่อมีการคลิกลิงก์ที่มีแอตทริบิวต์ href ซึ่งค่าที่มี # ถูกคลิก ปลั๊กอินจะแสดงภาพเคลื่อนไหวการเลื่อนแบบโปรเกรสซีฟ มีเครื่องมือพื้นฐานและฟังก์ชันการทำงานขั้นสูงทั้งหมดสำหรับเว็บไซต์แบบหน้าเดียว การนำทางในหน้า ลิงก์กลับไปด้านบน ฯลฯ ด้วยคุณลักษณะต่างๆ เช่น:

คุณสมบัติหลัก

  • เลื่อนปรับได้
  • การค่อยๆ คลายตัว
  • การเน้นลิงก์และเป้าหมาย
  • เลื่อนแนวตั้งและ/หรือแนวนอน
  • เลื่อนจาก/ไปยังหน้าต่างๆ
  • เลื่อนออฟเซ็ตเป็นพิกเซล
  • ใส่ลิงค์และปุ่มรหัสเป้าหมาย
  • ออฟเซ็ตเฉพาะลิงก์ ระยะเวลาการเลื่อน ไฮไลต์เป้าหมาย ฯลฯ

เลื่อนอย่างราบรื่นโดย WPOS

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

ข่าวดีของปลั๊กอินนี้คือคุณสามารถทำให้มันใช้งานได้กับส่วนขยาย Gutenberg ที่มีให้

เมนูติดหนึบ ส่วนหัวติดหนึบบน Scroll

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

ข้อเสียเล็กน้อยคือ คุณจะต้องเชี่ยวชาญ HTML/CSS เล็กน้อยจึงจะใช้งานได้ คุณจะต้องใช้สิ่งนี้เนื่องจากคุณจำเป็นต้องทราบตัวเลือกที่ใช้ในการกำหนดเป้าหมายองค์ประกอบใดองค์ประกอบหนึ่งที่มีอยู่ในหน้าเว็บของคุณ (ไม่ว่าจะด้วย ID หรือแอตทริบิวต์ของ Class) ตัวอย่างเช่น คุณสามารถใช้ตัวเลือกง่ายๆ เช่น “nav†, “#main-menu†, “.menu-main-menu-1†ก็เพียงพอแล้ว แต่คุณยังสามารถใช้ตัวเลือกแบบละเอียด เช่น “header

คุณสมบัติหลัก

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

บทสรุป

และนั่นคือทั้งหมด! ตอนนี้ ไม่ว่าหน้า Elementor ของคุณจะมีขนาดเท่าใด คุณสามารถอำนวยความสะดวกในการนำทางของผู้ใช้ด้วยการผสานรวม "จุดยึดเมนู" เรามั่นใจว่าคุณจะนำไปใช้ให้เกิดประโยชน์

Divi WordPress Theme