คุณเคยพบหน้าที่กว้างขวางมากและจำเป็นต้องกลับไปที่การเลื่อนระดับบนสุด ? อาจเป็นเรื่องที่น่ารำคาญโดยเฉพาะบนอุปกรณ์พกพา แต่คุณสามารถบรรเทาปัญหานี้ได้โดยใช้ Elementor ใน WordPress เพื่อเพิ่มปุ่ม "กลับสู่ด้านบน"
ปุ่มต่างๆ มักเป็นส่วนประกอบสำคัญของไซต์ WordPress และ Elementor ทำให้การสร้างปุ่มเหล่านี้ทำได้ง่ายมาก ผู้คนมักต้องการเห็นว่าพวกเขาสามารถกลับไปที่ด้านบนสุดของหน้าโดยไม่ต้องเลื่อนดู ปุ่ม Back-to-top ของ Elementor ใช้งานได้ดีที่นี่
ในบทช่วยสอนนี้ เราจะสอนวิธีเพิ่มปุ่ม Back-to-top ของ Elementor ให้กับเครื่องมือสร้างเพจ Elementor ในสามขั้นตอนง่ายๆ
ความสำคัญของการมีปุ่ม "กลับสู่ด้านบน"
คุณอาจกำลังถามว่าเว็บไซต์ประเภทใดจำเป็นต้องมีปุ่ม "กลับสู่ด้านบน" และคำตอบก็คือเว็บไซต์หน้าเดียว
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลยเว็บไซต์ที่มีข้อมูลทั้งหมดในหน้าใดหน้าหนึ่งเรียกว่าเว็บไซต์หน้าเดียว ฉันรู้ว่ามันชัดเจน แต่มีข้อบกพร่องสำคัญประการหนึ่งในการออกแบบนี้ หน้าจะยาวมาก สิ่งนี้อาจทำให้ผู้เยี่ยมชมที่ต้องการกลับไปด้านบนได้อย่างรวดเร็ว
ที่จริงแล้ว ผู้ใช้บางคนอาจเพียงแค่ปิดเบราว์เซอร์และพิมพ์ URL เพื่อกลับสู่ด้านบน นั่นคือถ้าพวกเขาเลือกที่จะกลับมา
หน้าเว็บไซต์ส่วนใหญ่ไม่ยาวพอที่จะใช้ตัวเลือกนี้ อย่างไรก็ตาม มีข้อยกเว้น ดังนั้นจึงต้องอาศัยเนื้อหาของเว็บไซต์ของคุณจริงๆ
โปรดจำไว้ว่าปุ่มนี้ใน WordPress ไม่ได้มีไว้สำหรับหน้าเท่านั้น มันใช้ได้กับบทความด้วย เราควรพิจารณารวมสารบัญสำหรับรายการที่ยาวมาก ๆ เพื่อช่วยให้ผู้อ่านค้นพบสิ่งที่พวกเขากำลังมองหาได้อย่างรวดเร็ว
บทความที่มีความยาวมากกว่า 2,000 คำหรือเนื้อหาแบบยาว อาจต้องใช้ปุ่มกลับไปด้านบน ทั้งนี้ขึ้นอยู่กับบริบท เป็นวิธีการง่ายๆ ที่ช่วยให้ผู้เยี่ยมชมสามารถกลับมาที่ด้านบนของโพสต์ได้หากมีลิงก์หรือคำกระตุ้นการตัดสินใจอื่นๆ ที่พวกเขาต้องการใช้
การเพิ่มปุ่ม "กลับสู่ด้านบน"
การสร้างปุ่มกลับไปด้านบนเป็นการดำเนินการง่ายๆ ที่สามารถทำได้อย่างรวดเร็ว หากคุณทำตามขั้นตอนด้านล่าง โปรดจำไว้ว่า CSS Classes ต้องการ Elementor Pro
เพิ่มปุ่ม
Elementor สามารถใช้เพื่อแก้ไขหน้าที่คุณต้องการเพิ่มปุ่ม "กลับไปด้านบน" หากต้องการเข้าสู่โหมดแก้ไข ให้คลิกที่จับส่วนในส่วนบนสุด
เพิ่ม CSS ID โดยป้อนลงในฟิลด์ CSS ID ในแท็บขั้นสูงที่แผงด้านซ้าย
เพิ่มวิดเจ็ตปุ่มในหน้าของคุณ หรือวิดเจ็ตอื่นๆ ที่ให้คุณเพิ่มลิงก์ได้ เช่น ข้อความ ไอคอน หรือแม้แต่รูปภาพ คุณสามารถวางได้ทุกที่ที่คุณต้องการ
ในช่องลิงก์ ให้ระบุ CSS ID สำหรับพื้นที่ด้านบนของเพจที่คุณเพิ่งระบุ ในการเริ่มต้น ให้เพิ่มคำนำหน้า "#"
ตอนนี้คลิกปุ่มและคุณทำเสร็จแล้ว!
ตำแหน่งปุ่ม
เห็นได้ชัดว่าจำเป็นต้องกำหนดตำแหน่งของปุ่มก่อนทำการเปลี่ยนแปลงใดๆ ในเพจของคุณ โดยทั่วไป ปุ่มจะอยู่ที่มุมล่างขวาของหน้าจอ
เปิดแท็บขั้นสูงที่แผงด้านซ้ายและเลือกตัวเลือกการวางตำแหน่งสำหรับวิดเจ็ตปุ่ม ตั้งค่า Width เป็น Custom และ Position to Stable " คุณจะขยับปุ่มไปมาได้ตามต้องการด้วยวิธีนี้
วางปุ่มในตำแหน่งที่ต้องการโดยลากไปที่นั่น (เช่น มุมล่างขวา)
คุณยังสามารถปรับตำแหน่งอย่างละเอียดได้ด้วยการปรับออฟเซ็ตทั้งแนวนอนและแนวตั้ง นั่นคือทั้งหมดที่มีให้
หากคุณต้องการเปลี่ยนรูปลักษณ์ของปุ่ม ให้คลิกที่หน้าสไตล์ อย่าลืมบันทึกงานของคุณและเผยแพร่เมื่อคุณทำเสร็จแล้ว
ซ่อนหรือแสดง “Back to Top” Button
ฟังก์ชันซ่อนหรือแสดงจะแตกต่างกันเล็กน้อย คุณสามารถลากปุ่มกลับไปด้านบนที่ด้านล่างของหน้าไปยังด้านบนของหน้าได้อย่างง่ายดาย หากคุณกำลังติดตามพร้อมกับปลั๊กอินเวอร์ชันฟรี
เมื่อพวกเขาไปถึงด้านล่าง พวกเขาสามารถคลิกที่มันและมันจะหายไปจากสายตาของพวกเขา
อย่างไรก็ตาม หากคุณติดตั้งและใช้งาน Elementor Pro คุณสามารถ "ติด" ปุ่มที่ด้านล่างของหน้าได้อย่างง่ายดาย การใช้ "เอฟเฟกต์การเลื่อนแบบติดหนึบ" ซึ่งมีให้เฉพาะในเวอร์ชันโปรเท่านั้นคือวิธีแก้ปัญหา
เนื่องจากสามารถเข้าถึงปุ่มได้จากทุกที่ในโพสต์หรือหน้า ตัวเลือกติดหนึบจึงมีความยืดหยุ่นมากกว่า
ห่อ
ด้วย Elementor คุณสามารถสร้างหน้าที่สวยงามสำหรับไซต์ WordPress ของคุณได้อย่างง่ายดาย แม้ว่าคุณจะมีสิทธิ์เข้าถึงเวอร์ชันฟรีเท่านั้น คุณยังสามารถทำสิ่งต่างๆ ได้มากมายด้วย สิ่งที่คุณต้องทำในเวอร์ชันฟรีอาจเปลี่ยนแปลงจากสิ่งที่คุณต้องทำหากคุณใช้ เวอร์ชัน Pro ดังนั้นโปรดจำไว้เสมอว่า
เวอร์ชันฟรีอาจเพียงพอสำหรับวัตถุประสงค์ของคุณ ทั้งนี้ขึ้นอยู่กับสิ่งที่คุณต้องการสำหรับ ในทางกลับกัน รุ่น Pro นั้นคุ้มค่ากับเงินที่จ่ายเพิ่มอย่างแน่นอนในหลาย ๆ สถานการณ์
ฉันหวังว่าบทช่วยสอนนี้จะแสดงให้คุณเห็นว่าการเพิ่มปุ่ม back-to-top ใน Elementor ทำได้ง่ายเพียงใด ด้วยการคลิกเพียงไม่กี่ครั้งที่นี่และที่นั่น คุณสามารถทำให้ผู้คนสามารถเลื่อนกลับไปที่ด้านบนสุดของหน้าหรือโพสต์บนไซต์ของคุณได้อย่างง่ายดาย
