ไฮไลท์ปลั๊กอิน Divi: เครื่องมือสร้างตาราง

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

การติดตั้ง Table Maker

การติดตั้งทำได้ง่ายและตรงไปตรงมา

1. ไปที่ Plugins > Add New > Upload Plugin
2. คลิก เลือกไฟล์
3. ค้นหาไฟล์ zip ของปลั๊กอินบนคอมพิวเตอร์ของคุณแล้วเลือก
4. คลิก ติดตั้งทันที
5. คลิก เปิดใช้งาน

โมดูลเครื่องสร้างตาราง

โมดูลใหม่ถูกเพิ่มลงใน Divi Builder ชื่อ Table Maker มาดูคุณสมบัติหลักกัน

แท็บเนื้อหาของผู้สร้างตาราง

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

โมดูลย่อยของคอลัมน์

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

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

คอลัมน์รวมถึงการปรับแต่งการออกแบบสำหรับทุกองค์ประกอบ รวมถึงข้อความ พื้นหลัง เซลล์ เซลล์ส่วนหัวและส่วนท้าย ฯลฯ

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

ส่วนหัวและส่วนท้าย

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

คุณสามารถทำเช่นเดียวกันสำหรับแถว ในตัวอย่างนี้ ฉันได้ตั้งค่า 2 แถวเป็นส่วนหัว (สองแถวทางซ้าย) และแถวหนึ่งเป็นส่วนท้าย (แถวทางขวา)

การเลื่อนตาราง

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

ไอคอนตาราง

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

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

ปุ่มตาราง

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

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

รูปภาพตาราง

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

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

แท็บออกแบบเครื่องสร้างตาราง

แท็บออกแบบประกอบด้วยการตั้งค่าสำหรับกรอบตาราง แถบ เซลล์ ข้อความ ส่วนหัว ส่วนท้าย ขนาด ระยะห่าง เส้นขอบ ฯลฯ นี่คือการตั้งค่าหลัก

กรอบโต๊ะ

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

สำหรับช่องว่าง คุณสามารถปรับช่องว่างของคอลัมน์และแถวได้อย่างอิสระ ฉันได้เพิ่มช่องว่างคอลัมน์เป็น 8px และช่องว่างแถวเป็น 4px

เส้นวางเส้นขอบรอบ ๆ แต่ละเซลล์ คุณสามารถควบคุมสไตล์ สี และความหนาของเส้นได้ นี่คือค่าเริ่มต้น

ในตัวอย่างนี้ ฉันได้ตั้งค่ารูปแบบเป็นจุด เปลี่ยนสี และปรับความกว้างของบรรทัดเป็น 3px

ลายตาราง

Table Stripes สร้างเอฟเฟกต์แถบเหมือนสเปรดชีตมาตรฐาน คุณสามารถเลือกตำแหน่งที่ต้องการ เลือกลำดับ และปรับเฉดสี ความอิ่มตัว และความสว่าง นี่คือการตั้งค่าเริ่มต้น

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

สำหรับตัวอย่างนี้ ฉันได้ปรับสีของเซลล์ตาราง เซลล์ส่วนหัว และเซลล์ส่วนหัวของคอลัมน์

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

การจัดรูปแบบส่วนหัวและส่วนท้าย

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

ในตัวอย่างนี้ ฉันได้ปรับเส้นขอบสำหรับเซลล์ เซลล์ส่วนหัว และเซลล์ส่วนท้ายอย่างอิสระ

ตัวอย่างเครื่องทำตาราง

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

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

นี่คือการออกแบบเดียวกันโดยไม่มีรูปภาพในส่วนหัวของแถว

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

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

อันนี้แสดงแถวเป็นหีบเพลง การคลิกหนึ่งรายการจะเปิดขึ้นเพื่อแสดงเนื้อหา

หาซื้อได้ที่ไหน เครื่องทำตาราง

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

จบความคิด

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

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

Table Maker เป็นปลั๊กอินที่ยอดเยี่ยมสำหรับการสร้างตารางด้วย Divi ความสามารถในการเพิ่มเนื้อหา เช่น HTML, รหัสย่อ, iFrames, CSS เป็นต้น ช่วยเพิ่มประเภทของตารางที่คุณสามารถสร้างได้อย่างมาก หากคุณสนใจที่จะสร้างตารางของคุณเองด้วย Divi Table Maker ก็คุ้มค่าที่จะดู

เราต้องการได้ยินจากคุณ คุณลองใช้ Table Maker สำหรับ Divi แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

ภาพเด่นผ่าน PCH.Vector / shutterstock.com