สร้างตารางราคาด้วย Gutenberg Block Editor

เป็นเวลากว่าหนึ่งปีแล้วที่เราได้เห็นวิวัฒนาการอันยิ่งใหญ่ในตัวแก้ไขบล็อกของ Gutenberg เมื่อเทียบกับตัวแก้ไข WordPress แบบคลาสสิก ตอนนี้เราสามารถออกแบบองค์ประกอบในโพสต์และหน้าเว็บของเราที่ก่อนหน้านี้ทำได้โดยการเข้ารหัสเท่านั้น

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

บล็อกตาราง

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

ในบล็อกตาราง เราสามารถปรับแต่งคุณสมบัติดังต่อไปนี้:

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

ด้วยวิธีนี้ เราจะเห็นว่าเราสามารถสร้างตารางต่อไปนี้ได้อย่างง่ายดาย:

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

ข้อ จำกัด ของการบล็อกตาราง

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

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

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

เราจะสร้างตารางตอบสนองเหล่านี้ได้อย่างไร

ทางเลือก

บล็อกคอลัมน์

อีกทางเลือกหนึ่งคือพยายามจัดวางตารางด้วยบล็อกคอลัมน์:

ขั้นพื้นฐาน

สำหรับฟรีแลนซ์และเว็บไซต์ส่วนตัว

€ 29 / เดือน

1 ไซต์

การเข้าชมหน้าทดสอบ 5,000 ครั้ง

ติดตาม

มืออาชีพ

สำหรับผู้ประกอบการรายย่อย

€ 89 / เดือน

5 ไซต์

เข้าชมหน้าทดสอบ 35,000 ครั้ง

ติดตาม

องค์กร

สำหรับทีมที่เน้นการเพิ่มประสิทธิภาพ

€ 259 / เดือน

? 10 ไซต์

เข้าชมหน้าทดสอบ 200,000 ครั้ง

ติดตาม

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

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

ปลั๊กอินบล็อกตารางราคา

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

CoBlocks

Coblocks เป็นปลั๊กอินที่รวมบล็อกทั้งชุดที่ปรับให้เข้ากับ Gutenberg โดยสิ้นเชิง หนึ่งในนั้นคือบล็อกตารางราคา

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

Getwid

ในทำนองเดียวกัน ปลั๊กอิน Getwid ยังมีบล็อกทั้งชุดที่เข้ากันได้กับตัวแก้ไข Gutenberg อย่างสมบูรณ์ คุณสามารถสร้างตารางราคาที่ตอบสนองได้อย่างเต็มที่อย่างรวดเร็วเช่นนี้:

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

บล็อกพรีเมียมสำหรับ Gutenberg

ปลั๊กอิน Premium Blocs สำหรับ Gutenberg ยังมีบล็อกที่คุณสามารถสร้างตารางราคาที่น่าดึงดูดใจได้ ด้านล่างฉันแสดงรูปภาพตารางราคาที่ฉันสร้างโดยแทรกบล็อกตารางราคาไว้ในคอลัมน์

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

ปลั๊กอินพร้อมตัวแก้ไขในตัว

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

ตารางราคาที่ตอบสนอง

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

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

เมื่อสร้างแผนแล้ว คุณเพียงแค่ต้องเพิ่มโดยใช้รหัสย่อในหน้าการกำหนดราคา

ตารางราคาโดย Supsystic

ปลั๊กอินตารางราคา Supsystic เพิ่มตัวแก้ไขแบบลากแล้ววางลงในแดชบอร์ด WordPress ของคุณ ซึ่งคุณสามารถสร้างตารางได้ มีการออกแบบตารางตอบสนองมากมายให้คุณ ในเวอร์ชันฟรี คุณมีการออกแบบให้เลือกมากถึง 7 แบบ

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

ปลั๊กอินฟรีอื่นๆ ที่รวมเครื่องมือแก้ไขตารางราคาไว้ด้วยกัน ได้แก่:

• ตารางราคาโดย ARPrice
• ตารางราคา ปลั๊กอิน WordPress – ตารางราคาง่าย ๆ โดย Fatcat Apps
• ตัวสร้างตารางราคาที่ตอบสนอง – ตัวสร้างราคา wpPricing
• ตารางราคา WRC
• ตัวสร้างตารางราคา – ตารางราคา AP Lite
• ตารางราคา TC ตามธีมโค้ด
• ตารางราคา – bh A WP Life

บทสรุป

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

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