วิธีการสร้างเนื้อหา Canvas ใน Elementor: คู่มือ

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

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

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

เนื้อหา Off Canvas คืออะไร?

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

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

วิธีการสร้างเนื้อหา Canvas ใน Elementor

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

• ผู้ประกอบการ
• Happyaddons
• Happyaddons Pro

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

ขั้นตอนที่ 01: เพิ่มวิดเจ็ตเนื้อหา Off Canvas ลงใน Elementor Canvas

เปิดโพสต์หรือหน้าด้วย Canvas Elementor ค้นหาวิดเจ็ตโดยพิมพ์ชื่อในช่องค้นหาของแผง Elementor เมื่อคุณเห็นวิดเจ็ตแล้วให้ลากและวางลงในผืนผ้าใบ

คุณจะเห็นปุ่มหรือไอคอนที่เพิ่มลงในผืนผ้าใบ โดยการคลิกคุณสามารถเปิดส่วน OFF Canvas คุณสามารถดูในคลิปวิดีโอที่แนบด้านล่าง

ขั้นตอนที่ 02: เพิ่มวิดเจ็ต Off Canvas ลงในหน้าเว็บของคุณ

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

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

ตรวจสอบวิธีปรับปรุง SEO ในท้องถิ่นใน WordPress ด้วย Elementor

ขั้นตอนที่ 03: เลือกประเภทเนื้อหาที่กำหนดเองสำหรับวิดเจ็ต Off Canvas

นำทางไปยัง เนื้อหา> เนื้อหา Offcanvas คลิก รายการดรอปดาวน์ ถัดจากตัวเลือกประเภทเนื้อหา

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

สำหรับบทช่วยสอนนี้เราได้เลือกประเภทเนื้อหาที่กำหนดเอง

สำรวจคู่มือนี้เกี่ยวกับวิธีการออกแบบฐานความรู้ใน WordPress

ขั้นตอนที่ 04: เพิ่มข้อมูลลงในวิดเจ็ต

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

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

เรียนรู้วิธีสร้างหน้าเว็บอินโฟกราฟิกที่น่าทึ่งใน Elementor

ขั้นตอนที่ 05: เลือกแหล่งสลับ

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

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

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

ขั้นตอนที่ 06: ปรับแต่งไอคอนแถบปิด

ส่วน Off Canvas มาพร้อมกับ ไอคอนข้าม (x) ที่มุมบนขวา ในการปรับแต่งให้ขยาย ส่วนแถบปิด บนแผง Elementor

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

นี่คือการสอนเกี่ยวกับวิธีสร้างปฏิทินกิจกรรมใน WordPress

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

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

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

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

ในทำนองเดียวกันกำหนดค่าตัวเลือกอื่น ๆ

ขั้นตอนที่ 08: จัดแต่งวิดเจ็ต Off Canvas

มาที่ แท็บสไตล์ และขยาย เนื้อหา Offcanvas

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

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

ในทำนองเดียวกันคุณสามารถเปลี่ยนตัวอักษรขนาดตัวอักษรและสีข้อความ

นี่คือคำแนะนำง่ายๆเกี่ยวกับวิธีการแสดงการถ่ายภาพผลิตภัณฑ์ที่หมุนได้ 360 รายการใน WordPress

ขั้นตอนที่ 09: ปุ่มสลับสไตล์

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

ขั้นตอนที่ 10: ปรับแต่งไอคอนแถบปิด

ด้วยการขยายส่วน แถบปิด คุณสามารถปรับแต่ง สีขนาด และ สิ่งของอื่น ๆ ของไอคอนปิด

ขั้นตอนที่ 11: ทำอุปกรณ์มือถือออกจากผ้าใบ

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

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

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

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

ขั้นตอนที่ 12: ดูตัวอย่างวิดเจ็ตเนื้อหา Off Canvas

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

สิ่งที่ควรพิจารณาเมื่อใช้วิดเจ็ตเนื้อหา Off Canvas

เพื่อให้ใช้วิดเจ็ตที่ดีที่สุดมีหลายจุดที่คุณต้องพิจารณาอย่างรอบคอบเมื่อใช้วิดเจ็ตเนื้อหา OFF Canvas ลองดูที่พวกเขาด้านล่าง

• ประสบการณ์การใช้งานที่ราบรื่น

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

• ปรับให้เหมาะสมสำหรับโทรศัพท์มือถือ

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

• ปิดง่าย

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

• ความเกี่ยวข้องของเนื้อหา

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

คำพูดสุดท้าย!

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

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

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