วิธีสร้างแท็บการเลื่อนแนวตั้งใน WordPress ด้วย Elementor

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

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

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

ใช้กรณีของแท็บการเลื่อนแนวตั้ง

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

. รายละเอียดผลิตภัณฑ์หรือบริการ

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

ข. คำถามที่พบบ่อย (คำถามที่พบบ่อย)

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

ค. คู่มือหรือแบบฝึกหัดทีละขั้นตอน

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

d. สมาชิกในทีมหรือพนักงานโปรไฟล์

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

ก. ผลงานหรือการแสดงโครงการ

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

วิธีสร้างแท็บการเลื่อนแนวตั้งใน Elementor

ส่วนทฤษฎีสิ้นสุดลง หวังว่าตอนนี้คุณจะมีความคิดที่ชัดเจนว่าแท็บการเลื่อนแนวตั้งคืออะไรและกรณีการใช้งานคืออะไร เรากำลังจะครอบคลุมส่วนการสอนตอนนี้ เราจะอธิบายวิธีการสร้างแท็บการเลื่อนแนวตั้งด้วย Elementor บน WordPress ในส่วนนี้ อ่านต่อไป!

สิ่งที่จำเป็นต้องเริ่มต้นการสอน

ในการสร้างแท็บการเลื่อนแนวตั้งบน WordPress ด้วย Elementor คุณต้องติดตั้งปลั๊กอินต่อไปนี้ที่ติดตั้งและเปิดใช้งานบนเว็บไซต์ของคุณ

• Elementor ฟรี
• happyaddons ฟรี
• Happyaddons Pro

หมายเหตุ: คุณต้องมี Happyaddons Pro เพราะ Elementor ไม่มีตัวเลือกในตัวเพื่อสร้างแท็บการเลื่อน Happyaddons Pro เสนอวิดเจ็ตที่เรียกว่า แท็บสกรอล ที่ให้คุณสร้างแท็บการเลื่อนแนวตั้งได้อย่างง่ายดาย

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

ขั้นตอนที่ 01: เปิดหน้าด้วย Elementor

เพียงเปิดหน้าด้วย Elementor ที่คุณต้องการสร้างแท็บการเลื่อนแนวตั้ง

ขั้นตอนที่ 02: ลากและวางวิดเจ็ตแท็บม้วนบนผืนผ้าใบ

ค้นหา วิดเจ็ตแท็บเลื่อน บนแผง Elementor ลากและวางลงบนผืนผ้าใบ Elementor

วิดเจ็ต Scroll Tabs มาพร้อมกับเนื้อหาเริ่มต้นบางส่วน เมื่อเพิ่มวิดเจ็ตลงในผืนผ้าใบคุณจะเห็นเนื้อหาเริ่มต้นนี้

ขั้นตอนที่ 03: เริ่มเพิ่มเนื้อหาลงในแท็บ

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

# เพิ่มชื่อไปยังวิดเจ็ตแท็บม้วน

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

ไปที่ เนื้อหา> แท็บเนื้อหา> ชื่อเรื่อง คุณจะได้รับพื้นที่ในการเขียนชื่อเรื่อง คุณจะเห็นว่าเราได้เขียนชื่อเรื่อง 'Insights Watch Stylish'

# เขียนคำอธิบายสำหรับวิดเจ็ต

เขียนภายใต้ชื่อเรื่องคุณสามารถเขียนคำอธิบายสำหรับวิดเจ็ต หากคำอธิบายไม่จำเป็นคุณสามารถลบออกได้

# เพิ่มเนื้อหาลงในแท็บ

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

# เขียนชื่อเรื่องสำหรับแท็บ

คุณต้อง เขียนชื่อเรื่องสำหรับแต่ละแท็บ หลังจากขยายแท็บคุณจะได้รับกล่องภายใต้ข้อความ NAV ที่นี่คุณสามารถเขียนชื่อเรื่องสำหรับแท็บ

# เปลี่ยนไอคอนของแท็บ

คุณสามารถลบไอคอนได้หากไม่จำเป็น แต่หากต้องการเปลี่ยนไอคอน ให้คลิกที่ไอคอนที่ คุณสามารถดูได้ภายใต้ไอคอน NAV

ไลบรารีไอคอนจะเปิดขึ้นทันที เลือกไอคอนที่ คุณชอบและ กด ปุ่มแทรก

คุณจะเห็นว่าไอคอนมีการเปลี่ยนแปลง

# เพิ่มเนื้อหาลงในแท็บผ่านตัวแก้ไข

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

ก่อนอื่น เลือก ตัวเลือก ตัวแก้ไข

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

# เปลี่ยนสีพื้นหลังของเนื้อหาแท็บ

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

# เพิ่มเนื้อหาลงในแท็บผ่านเทมเพลต

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

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

คลิกที่ ไอคอนดรอปดาวน์ ถัดไปเพื่อ เลือกเทมเพลต จากนั้นเลือกเทมเพลตที่คุณต้องการแสดงบนแท็บ

คุณจะเห็นว่าเทมเพลตที่เราต้องการจะถูกเพิ่มลงในแท็บแล้ว

ในทำนองเดียวกันเพิ่มเนื้อหาลงในแท็บทั้งหมดของวิดเจ็ตแท็บสกรอลล์

ขั้นตอนที่ 04: กำหนดค่าการตั้งค่าของวิดเจ็ตแท็บสโครล

หลังจากเสร็จสิ้นส่วนเนื้อหา ให้ขยาย ส่วนการตั้งค่า

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

# ปรับความกว้างของแผง NAV

วิดเจ็ตแท็บเลื่อนมีสองส่วน - แผงนำทาง (แผง NAV) และ แผงเนื้อหา

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

# ปรับความสูงของแผงควบคุม

ในทำนองเดียวกันปรับความสูงของแผงควบคุม นอกจากนี้ยืนยันว่าเนื้อหาได้รับการจัดแนวในแนวตั้งอย่างเหมาะสม

ขั้นตอนที่ 05: สไตล์การเลื่อนแท็บวิดเจ็ต

มาที่ แท็บสไตล์ ก่อนอื่นให้ ตั้งค่าสีพื้นหลัง สำหรับ แผงนำทาง

# ปรับแต่งการพิมพ์เนื้อหาของ Nav Panel

อัปเดตตัวอักษรทีละหนึ่งสำหรับแต่ละเนื้อหาที่คุณเพิ่มลงในแผง Navigator คุณสามารถเปลี่ยน ตระกูลตัวอักษรขนาดน้ำหนักความสูงของเส้น ฯลฯ ตามต้องการ

# สไตล์แท็บ

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

ในทำนองเดียวกันให้ขยายและจัดแต่งเนื้อหาที่เกี่ยวข้องกับแผงเนื้อหาและส่วนเลื่อน

ขั้นตอนที่ 06: เพิ่มประสิทธิภาพวิดเจ็ตแท็บ Scroll สำหรับโทรศัพท์มือถือ

หากต้องการเพิ่มประสิทธิภาพวิดเจ็ตสำหรับขนาดหน้าจอมือถือ ให้ไปที่ โหมด Portrait บนมือถือ บนแถบด้านบน

คุณจะเห็นว่าแท็บ Navigator จะปรากฏขึ้นโดยค่าเริ่มต้น

# ปรับความสูงของแผงเนื้อหาสำหรับอุปกรณ์มือถือ

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

ขั้นตอนที่ 07: เพิ่มประสิทธิภาพวิดเจ็ตแท็บสโครลสำหรับแท็บเล็ต

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

คุณสามารถดูได้ในคลิปวิดีโอที่แนบมาด้านล่างว่าวิดเจ็ตดูดีบนหน้าจอแท็บเล็ตแล้ว ดังนั้นเราไม่จำเป็นต้องแก้ไขมันต่อไป

ขั้นตอนที่ 08: ดูตัวอย่างวิดเจ็ตแท็บม้วน

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

ดังนั้นคุณสามารถสร้างแท็บการเลื่อนแนวตั้งใน WordPress ด้วย Elementor

ประเด็นสุดท้าย!

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

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

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

เรียนรู้วิธีการออกแบบกล่องพลิกใน WordPress ด้วย Elementor