เมื่อใด (และอย่างไร) เพื่อใช้เค้าโครงกริดขั้นสูงใน WordPress

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

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

บทนำสู่เค้าโครงกริดขั้นสูง

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

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

แม้ว่าเราทุกคนจะคุ้นเคยกับสิ่งนี้ในหน้าผลิตภัณฑ์และในผลการค้นหา แต่กริดขั้นสูงก็เป็นวิธีที่ดีกว่า สมมติว่ามีโพสต์บล็อกห้ารายการที่คุณต้องการแสดงบนหน้า Landing Page ด้วยตารางมาตรฐาน ตัวเลือกของคุณอาจเป็นแถว 5×1 หรือตาราง 2×3 ที่มีพื้นที่ว่าง

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

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

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

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

ข้อดีของกริดขั้นสูง

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

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

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

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

เว็บไซต์ของคุณสามารถใช้ประโยชน์จากเค้าโครงกริดขั้นสูงได้อย่างไร (กรณีการใช้งาน 3 กรณี)

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

1. บล็อกที่มีหลายหมวดหมู่

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

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

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

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

2. ร้านค้าออนไลน์

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

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

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

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

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

3. แกลลอรี่

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

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

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

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

วิธีสร้างเค้าโครงกริดขั้นสูงสำหรับไซต์ WordPress ของคุณ (ใน 3 ขั้นตอน)

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

ในการสร้างเค้าโครงกริดขั้นสูงแรกของคุณ เพียงทำตามสามขั้นตอนเหล่านี้

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งานปลั๊กอินตัวสร้างบีเวอร์

เมื่อคุณพร้อมที่จะเริ่มต้น เพียงค้นหา Beaver Builder ในส่วน ปลั๊กอิน ของแดชบอร์ด WordPress จากนั้นติดตั้งและเปิดใช้งาน:

เมื่อสร้างเพจหรือโพสต์ใหม่ ให้เลือก Launch Beaver Builder เพื่อเปิดตัวแก้ไข:

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

ขั้นตอนที่ 2: สร้างกริดขั้นสูงของคุณ

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

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

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

3. เติมสล็อต

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

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

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

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

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

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

บทสรุป

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

ในการสร้างเค้าโครงกริดขั้นสูงด้วย Beaver Builder เพียงทำตามขั้นตอนเหล่านี้:

1. ติดตั้งและเปิดใช้งานปลั๊กอิน Beaver Builder
2. เพิ่มโมดูลแถว/คอลัมน์ในหน้าหรือโพสต์เพื่อสร้างตารางของคุณ
3. เติมตารางด้วยองค์ประกอบอื่นๆ เช่น รูปภาพและสื่ออื่นๆ

แผนพรีเมียมของ Beaver Builder เพิ่มการใช้งานหลายไซต์ ไวท์เลเบล และธีม Beaver Builder ซึ่งออกแบบมาเพื่อใช้กับปลั๊กอินของเราโดยเฉพาะ เรายังนำเสนอผลิตภัณฑ์อื่นๆ รวมถึง Beaver Themer และ Assistant Pro เพื่อให้ขั้นตอนการออกแบบเว็บง่ายยิ่งขึ้น

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