วิธีใช้วิดเจ็ต Elementor Loop Grid บน WordPress ด้วย HappyAddons

เผยแพร่แล้ว: 2024-11-26

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

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

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

Loop Grid ใน Elementor คืออะไร?

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

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

ในส่วนถัดไป เราจะอธิบายวิธีใช้วิดเจ็ตบน WordPress อ่านต่อ!

วิธีใช้วิดเจ็ต Elementor Loop Grid

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

  • เอเลเมนท์
  • HappyAddons
  • HappyAddons Pro

เมื่อพร้อมแล้ว ให้เริ่มทำตามขั้นตอนของบทช่วยสอนตามที่อธิบายไว้

ขั้นตอนที่ 01: ลากและวางวิดเจ็ต Loop Grid ไปยังเพจของคุณ

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

พิมพ์ Happy Loop Grid ในช่องค้นหาแผง Elementor เมื่อวิดเจ็ตปรากฏขึ้น ให้ลากและวางลงในพื้นที่ผ้าใบที่คุณต้องการ

Drag-and-Drop the Loop Grid Widget to Your Page

ขั้นตอนที่ 02: สร้างเทมเพลต Loop Grid

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

ดังนั้น หากต้องการสร้างตั้งแต่ต้น ให้คลิก ปุ่มสร้างเทมเพลต

Click the Create Loop Template Button

คุณจะถูกนำไปที่หน้าใหม่ คลิก ปุ่มเพิ่มใหม่ ในขณะที่เลือกแท็บเทมเพลตลูป

Add a new template for the Loop Grid

ตั้งชื่อเทมเพลต ตัวอย่างเช่น เราได้ตั้งชื่อมันว่า 'Loop Template One' จากนั้น กดปุ่มสร้างเทมเพลต

Give a name to the template

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

Canvas opened up to design the loop template layout

ตรวจสอบคู่มือนี้เกี่ยวกับวิธีสร้างป๊อปอัปบนเว็บไซต์ Elementor

ขั้นตอนที่ 03: ออกแบบเค้าโครงสำหรับเทมเพลต Loop Grid

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

# โพสต์ภาพเด่น

การแสดงรูปภาพคุณสมบัติโพสต์เป็นสิ่งจำเป็นในส่วนตารางโพสต์ โดยค้นหาวิดเจ็ตแล้ววางลงบนผืนผ้าใบ

Add the Post Featured Image to create the Loop Grid Template

#โพสต์ข้อมูล

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

Add the Post Info to create the Loop Grid Template

หากคุณต้องการลบองค์ประกอบใดๆ ของวิดเจ็ต เพียงคลิก ไอคอนกากบาท (x) ที่อยู่ข้างๆ ในทำนองเดียวกัน หากต้องการเพิ่มองค์ประกอบใหม่ ให้คลิก ปุ่ม + เพิ่มรายการ

Edit the Post Info elements

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

Stylize the Post Info widget for the Loop Grid

#ชื่อกระทู้

ลากและวาง วิดเจ็ตชื่อโพสต์ ด้านล่างวิดเจ็ตข้อมูลโพสต์

Add the Post Title widget to design the Loop Grid template

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

Configure the Post Title widget for the Loop Grid template

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

Stylize the Post Title widget

#ข้อความที่ตัดตอนมาจากโพสต์

ด้วยการเพิ่มวิดเจ็ต Post Excerpt ในเทมเพลต คุณสามารถแสดงสรุปหรือข้อความที่ตัดตอนมาจากโพสต์ที่เกี่ยวข้องภายในส่วน Loop Grid ค้นหาและเพิ่ม วิดเจ็ต Post Excerpt ใต้ชื่อ

Add the Post Excerpt widget to design the Loop Grid template

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

Stylize the Post Excerpt widget

ขั้นตอนที่ 04: ปรับเค้าโครงเทมเพลตให้เหมาะสมสำหรับอุปกรณ์มือถือ

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

ดังนั้น หากต้องการปรับเค้าโครงเทมเพลตให้เหมาะสม ให้คลิก ตัวเลือกโหมดตอบสนอง ที่ส่วนท้ายของแผง Elementor แถบด้านบนจะปรากฏบนเทมเพลต รวมถึงตัวเลือกในการสลับระหว่างโหมดอุปกรณ์ต่างๆ (เดสก์ท็อป แท็บเล็ต และโทรศัพท์มือถือ)

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

หวังว่าการทำเช่นนี้จะทำให้เทมเพลตตอบสนองต่อหน้าจอทุกขนาดได้

Optimize the Template Layout for Mobile Devices

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

# เผยแพร่เทมเพลต

เมื่อเสร็จแล้ว ให้เผยแพร่เทมเพลต โดยคลิกปุ่มเผยแพร่บนแผง Elementor

Publish the Loop Grid template

ขั้นตอนที่ 04: มาที่ผืนผ้าใบหลักแล้วเลือกเทมเพลตลูป

มาที่ผ้าใบ Elementor ตัวหลัก เลือก ส่วนตารางวนรอบ ใต้ ส่วนเลย์เอาต์ คุณจะพบตัวเลือกให้ เลือกเทมเพลตลูป

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

Select the loop grid template you created

เมื่อเลือกเทมเพลต Loop Grid แล้ว มันจะแสดงโพสต์ที่คุณเผยแพร่ในรูปแบบตารางตามภาพด้านล่าง

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

Content is displayed with the Loop Grid template

ขั้นตอนที่ 05: ปรับแต่งและปรับแต่งส่วน Loop Grid

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

เราได้เก็บสามคอลัมน์และสามโพสต์ต่อหน้าสำหรับบทช่วยสอนนี้

Customize the post per page and equal height

# กำหนดค่าแบบสอบถาม

หลังจากนั้นมาที่ ส่วน Query

คุณสามารถแสดงเนื้อหาจากแหล่งต่างๆ ได้ในวิดเจ็ต Loop Grid ตามค่าเริ่มต้น โพสต์จะแสดงในรูปแบบตาราง แต่คุณสามารถแสดงหน้าหรือหน้า Landing Page ได้หากต้องการ

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

Configure the Post Type Query for the Loop Grid section

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

เลือก ผู้เขียน หรือ ข้อกำหนด คุณสามารถเลือกทั้งสองอย่างได้เช่นกัน

Show content by Authors or Terms

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

Select authors and terms

กำหนดค่าตัวเลือกคิวรีอื่นๆ ตามที่คุณต้องการ หวังว่าคุณจะทำเองได้

Complete the other Loop Grid Query options

ขั้นตอนที่ 06: กำหนดค่าตัวเลือกการแบ่งหน้าสำหรับส่วน Loop Grid

ขยาย ส่วนการแบ่งหน้าและโหลดเพิ่มเติม

คลิก ไอคอนแบบเลื่อนลง ถัดจาก การแบ่งหน้า เลือกตัวเลือกที่คุณต้องการ

Configure pagination for the Loop Grid section

เราได้เลือก Numbers + Previous/Next คุณสามารถเห็นในรูปภาพว่าตัวเลือกการแบ่งหน้านี้แสดงอยู่ใต้วิดเจ็ต

Configure the Pagination option

ขั้นตอนที่ 07: ปรับสไตล์เลย์เอาต์ของวิดเจ็ต Loop Grid

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

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

Stylize the Layout of the Loop Grid Widget

ในทำนองเดียวกัน ขยาย ส่วนกล่องรายการ คุณสามารถเพิ่ม Padding , Background Type (สีหรือรูปภาพ), Box Shadow, Border Types และ Border Radius

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

Customize the Item Box

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

Stylize the Pagination option

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

ขั้นตอนที่ 08: ปรับแต่งเทมเพลต Loop Grid อีกครั้ง

ก่อนอื่นคุณต้องค้นหาเทมเพลตก่อน ตามที่คุณออกแบบด้วย HappyAddons ให้ไปที่ แดชบอร์ด WordPress ของคุณ จากนั้นไปที่ HappyAddons > Theme Builder > Loop Template

ค้นหาเทมเพลตแล้วเปิดด้วยตัวเลือก แก้ไขด้วย Elementor

Go to the Template Section on the Backend

ตัวอย่างเช่น เราได้เปลี่ยนการพิมพ์ของข้อความ Continue Reading >>

เมื่อเสร็จแล้ว ให้อัปเดต การเปลี่ยนแปลง

Stylize parts of the Loop Grid Template again

ขั้นตอนที่ 09: ดูตัวอย่างการเปลี่ยนแปลง

ไปที่ผืนผ้าใบหลักอีกครั้ง เลือก ไอคอนแบบเลื่อนลง จากนั้นคลิก ตัวเลือกบันทึกฉบับร่าง

Preview the changes in the Loop Grid widget

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

ดังนั้นคุณจึงปรับแต่งเทมเพลต Loop Grid ได้ตลอดเวลา

See the changes of the Loop Grid widget

ขั้นตอนที่ 10: เผยแพร่การออกแบบ Loop Grid

หวังว่าส่วน Loop Grid ของคุณพร้อมที่จะเผยแพร่แล้ว คลิก ปุ่มเผยแพร่ ที่ด้านล่างของแผง Elementor

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

Publish the Loop Grid Design

กรณีการใช้งานทั่วไปของวิดเจ็ต Elementor Loop Grid

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

1. เค้าโครงบล็อก

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

เรียนรู้วิธีการออกแบบเทมเพลตโพสต์บล็อกด้วย Elementor

2. กริดผลิตภัณฑ์

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

3. ตู้โชว์ผลงาน

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

เรียนรู้วิธีสร้างเว็บไซต์พอร์ตโฟลิโอ

4. รายการกิจกรรม

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

5. รายการบริการ

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

ปิดเทอม

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

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

สุดท้ายนี้ ขอขอบคุณที่สละเวลาและอยู่กับเราจนจบ เพลิดเพลิน มีความสุขในการอ่าน!