ในบทความพิเศษสำหรับสมาชิกนี้ เราจะมีเรียนรู้วิธีการทำ Shortcuts Bar หรือแถบเมนูสำหรับเฉพาะมือถือ เพื่ออำนวยความสะดวกในการใช้งานเว็บไซต์ให้กับผู้เข้าชมเหมือน Application โดยในบทความนี้ผมจะแนะนำวิธีการทำด้วย Elementor Pro และ Elementor Free
เริ่มทำ Shortcuts Bar ด้วย Elementor Pro
ก่อนเริ่มทำ Shortcuts Bar ให้ตรวจสอบว่าเราได้ติดตั้งปลั๊กอินที่จำเป็นทั้งหมดแล้ว
- Elementor
- Elementor Pro
เราจะเริ่มจากการสร้าง Footer Template และใส่เมนูของเราเข้าไปในนั้น ในบทความนี้ผมจะเริ่มตั้งแต่ยังไม่มี Footer ถ้าหากมี Footer Template อยู่แล้วสามารถเลื่อนไปอ่านขึ้นตอนทำ Shortcuts Bar ได้เลย
เข้าไปที่ Dashboard > Templates > Theme Builder > Footer > Add New
จากนั้นตั้งค่าให้เรียบร้อยและกด Create Template
เลือก Template ที่ต้องการหรือกดปิดหน้าเลือก Template จากนั้นให้เพิ่ม Section และเลือกจำนวน 4 Columns
เมื่อสร้าง Section เรียบร้อยแล้ว เราจะมาตั้งค่า Section ของเราให้แสดงผลเฉพาะสำหรับมือถือเท่านั้น
ไปที่ Section > Advanced > Responsive > เปิด Hide on Desktop และ Hide on Tablet
เมื่อเราสลับหน้าจะการปรับแต่งไปในรูปแบบมือถือ สังเกตุว่า Column ของเราจะเรียงซ้อนกันเป็นแนวตั้ง ให้เราแก้ไขความกว้างของ Column เป็น 25% ทั้งหมด เราก็จะได้ Column แนวนอน
ให้เราตั้งค่า Column ทุก Column ตามนี้
- Column Width: 25%
- Vertical Align: Middle
- Widget Space: 3px (กรณีใส่ Text จะทำให้แถบ Shortcuts Bar ไม่กินเนื้อที่มากเกินไป)
จากนั้นใส่ Icon เข้าไปใน Column และ ตั้งค่า Padding ของ Icon ตามภาพ กรณีนี้เป็นตัวกำหนดพื้นที่ หากต้องการมากให้ใส่มาก หรือต้องการเล็กให้ใส่น้อย
Icon > Advanced > Padding Bottom: 10px, Padding Top: 10px;
ปรับแต่ง Icon ให้เรียบร้อยจากนั้น Copy/Paste ลงในทุกๆ Column และปรับเปลี่ยนเป็น Icon ที่ต้องการ
ในขึ้นตอนสุดท้ายให้เราจัดการตั้งค่า Section
- Section > Advanced > Advanced > Z-Index: 99 หรือมากกว่า (ตั้งค่าให้ Section นี้อยู่หน้าสุด)
- Section > Style > Background Color: White ตั้งค่าพื้นหลังเป็นสีขาว
- Section > Advanced > Custom CSS (ใช้ selector ให้ค่านี้ apply เฉพาะ section นี้เท่านั้น)
selector {
position: fixed;
bottom: 0;
width: 100%;
}
ใส่ลิงค์ให้เรียบร้อย เป็นอันเสร็จสมบรูณ์กด Publish พร้อมใช้งานทันที
การทำ Shortcuts Bar ด้วย Elementor Free
การทำแถบเมนูใน Elementor Free นั้น เราจำเป็นต้องใช้ปลั๊กอินเสริม เช่น
จากนั้นในสร้าง Footer และทำตามขั้นตอนด้านบน