วิธีสร้างตารางราคาแนวนอนด้วย Divi

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

มาเริ่มกันเลย.

แอบมอง

เริ่มต้น

สำหรับบทช่วยสอนนี้ สิ่งที่คุณต้องมีคือ Divi และเราจะใช้ Visual Builder เนื่องจากเราจะสร้างตารางตั้งแต่เริ่มต้น คุณจะต้องสร้างหน้าใหม่ ปรับใช้ตัวสร้างภาพ จากนั้นเลือกตัวเลือก “สร้างเค้าโครงตั้งแต่เริ่มต้น”

หลังจากนั้นคุณก็พร้อมที่จะเริ่มต้น มาทำกัน!

การตั้งค่าแถวห้าคอลัมน์สำหรับตารางราคาแนวนอนของคุณ

สำหรับผู้เริ่มต้น ให้เค้าโครงคอลัมน์ห้าคอลัมน์ที่รอเราอยู่ในเครื่องมือสร้างภาพ

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

ความกว้าง: 1200px
การจัดตำแหน่งส่วน: ศูนย์
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

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

สีพื้นหลัง: #00cbc9
คอลัมน์ 2 สีพื้นหลัง: #00cbc9
คอลัมน์ 3 สีพื้นหลัง: #eeeeee
คอลัมน์ 4 สีพื้นหลัง: #eeeeee

จากนั้นอัปเดตขนาดดังนี้:

ทำให้แถวนี้เป็นแบบเต็มความกว้าง: ใช่
ความกว้างของรางน้ำ: 1
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

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

การเติมคอลัมน์ด้วยโมดูลของเนื้อหา

ชื่อผลิตภัณฑ์

ในคอลัมน์แรก เพิ่มโมดูลข้อความที่มีส่วนหัวต่อไปนี้ในกล่องเนื้อหา (ใต้แท็บข้อความ):

<h2>Starter</h2>

ซึ่งจะเป็นจุดสำหรับชื่อแผนหรือผลิตภัณฑ์ที่คุณนำเสนอ ในตัวอย่างนี้ นี่จะเป็นแผน "เริ่มต้น" บางประเภท

จากนั้นอัปเดตการตั้งค่าการออกแบบต่อไปนี้:

ส่วนหัว 2 รูปแบบตัวอักษร: TT
หัวเรื่อง 2 สีข้อความ: #ffffff
หัวเรื่อง 2 ขนาดข้อความ: 38px
Custom Padding (เดสก์ท็อป): 90% บน, 90% ด้านล่าง, 10% ซ้าย
Custom Padding (แท็บเล็ต): 30% บน, 30% ด้านล่าง

เพิ่ม Blurbs สำหรับหัวข้อหมวดหมู่คุณสมบัติ

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

ข้ามไปที่แท็บการออกแบบและอัปเดตการตั้งค่าที่เหลือดังนี้:

ไอคอนสี: #00cbc9
ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
ขนาดข้อความชื่อเรื่อง: 16px
แพ็ดดิ้งที่กำหนดเอง: 2vw ด้านล่าง
ความกว้างของขอบแถวล่าง: 4px
สีขอบล่าง: #cccccc

เนื่องจากการออกแบบการนำเสนอนี้จะใช้เป็นชื่อหมวดหมู่คุณลักษณะในคอลัมน์ 2, 3 และ 4 คุณจึงสามารถคัดลอกโมดูลการนำเสนอและวางลงในคอลัมน์ที่สองและสามได้

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

เพิ่มโมดูลข้อความสำหรับรายการคำอธิบายคุณลักษณะ

ถัดไป เพิ่มโมดูลข้อความใต้ข้อความแจ้งในคอลัมน์ที่สอง จากนั้นเพิ่มโค้ด html ของตารางต่อไปนี้ในกล่องเนื้อหา:

• คำอธิบายของคุณลักษณะไปที่นี่
• คำอธิบายของคุณลักษณะไปที่นี่
• คำอธิบายของคุณลักษณะไปที่นี่
• คำอธิบายของคุณลักษณะไปที่นี่

Unordered List Style Type: สี่เหลี่ยม
เยื้องรายการที่ไม่เรียงลำดับ: 4px
ช่องว่างภายในที่กำหนดเอง: บน 20px ล่าง 20px ซ้าย 5% ขวา 5%

เช่นเดียวกับที่เราทำสำหรับการนำเสนอ ให้คัดลอกโมดูลข้อความแล้ววางใต้โมดูลการนำเสนอแต่ละโมดูลในคอลัมน์ 3 และ 4

การเพิ่มราคาและปุ่มในคอลัมน์สุดท้าย

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

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

จากนั้นให้กำจัดสีพื้นหลังโดยเพิ่มรหัสสีที่โปร่งใสทั้งหมด

สีพื้นหลัง: rgba(255,255,255,0)

จากนั้นอัปเดตสิ่งต่อไปนี้:

สีพื้นหลังส่วนหัวของตาราง: rgba(255,255,255,0)
สีข้อความสกุลเงินและความถี่: #ffffff
ขนาดตัวอักษรและความถี่: 30px
สีข้อความราคา: #ffffff
ความกว้างของเส้นขอบ: 0px
มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): -100% ถูกต้อง
Custom Margin (สมาร์ทโฟน): 0% Right
ช่องว่างภายในที่กำหนดเอง: 0px บน, 10px ล่าง, 0px ซ้าย, 0px ขวา

ไปที่การตั้งค่าตารางแต่ละรายการโดยคลิกไอคอนรูปเฟืองทางด้านซ้ายของเมนูแสดงตารางแต่ละรายการ

ตอนนี้ลบเนื้อหาเริ่มต้นสำหรับชื่อเรื่อง คำบรรยาย และเนื้อหา ซึ่งจะเหลือเพียงข้อความสกุลเงินและราคา

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

ราคาสูงสุด:

border: none;

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

สำหรับปุ่ม เพิ่มโมดูลปุ่มภายใต้โมดูลตารางราคาและอัปเดตสิ่งต่อไปนี้:

การจัดตำแหน่งปุ่ม: กึ่งกลาง
สีข้อความ: เบา
มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): -100% ถูกต้อง
Custom Margin (สมาร์ทโฟน): 0% Right

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

การเพิ่มการออกแบบลูกศรและการเว้นวรรคคอลัมน์ที่ตอบสนอง

การเพิ่มลูกศรโดยเลเยอร์ Gradients

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

หากต้องการเพิ่มพื้นหลังการไล่ระดับสี ให้ไปที่การตั้งค่าแถวและเพิ่มสิ่งต่อไปนี้:

พื้นหลังไล่ระดับสีคอลัมน์ 1 สีซ้าย: rgba(255,255,255,0)
พื้นหลังไล่ระดับคอลัมน์ 1 สีขวา: #eeeeee (ควรตรงกับสีพื้นหลังของคอลัมน์ 2)
ทิศทางการไล่ระดับสี: -245deg
ตำแหน่งเริ่มต้น: 75%
ตำแหน่งสุดท้าย: 0%

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

พื้นหลังไล่ระดับคอลัมน์ 1 สีซ้าย: #eeeeee
พื้นหลังไล่ระดับสีคอลัมน์ 1 สีขวา: rgba(255,255,255,0)
ทิศทางการไล่ระดับสี: 245deg
ตำแหน่งเริ่มต้น: 25%
ตำแหน่งสุดท้าย: 0%

สังเกตว่าค่าต่างๆ ตรงข้ามกันเท่าๆ กัน ตัวอย่างเช่น ลำดับสีเปลี่ยนไป 245deg เปลี่ยนจากค่าลบเป็นค่าบวก และตอนนี้ 75% เป็น 25% (ส่วนต่าง) นี่คือวิธีที่คุณทำให้ด้านข้างของจุดลูกศรมีความสมมาตรอย่างสมบูรณ์

ระยะห่างระหว่างแถวและคอลัมน์

กลับไปที่การตั้งค่าแถวและมาปรับระยะห่างของแถวและคอลัมน์ของเราโดยอัปเดตสิ่งต่อไปนี้:

ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง, 0px ซ้าย, 0px ขวา
Custom 2 Padding: 5% บน, 5% ล่าง, 2% ซ้าย, 2% ขวา
Custom 3 Padding: 5% บน, 5% ล่าง, 2% ซ้าย, 2% ขวา
Custom 4 Padding: 5% บน, 5% ล่าง, 2% ซ้าย, 2% ขวา
กำหนดเอง 5 ช่องว่างภายใน: 10% บน, 10% ล่าง

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

การทำซ้ำตารางสำหรับตารางใหม่และแบบแผนสี

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

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

ภายใต้ "ภายใน" เลือก "ส่วนนี้"
ใต้ “แทนที่ความกว้าง” ให้เพิ่มสี: #f84f51
จากนั้นเลือกช่องทำเครื่องหมายเพื่อแทนที่ค่าทั้งหมดที่พบในส่วน (ไม่ใช่แค่สีพื้นหลัง)

จากนั้นคลิกแทนที่และดูความมหัศจรรย์เกิดขึ้น นี่เป็นวิธีที่รวดเร็วและง่ายดายในการเปลี่ยนอินสแตนซ์ทั้งหมดของสีก่อนหน้าด้วยสีใหม่

อย่าลืมบันทึกการตั้งค่าแถวก่อนออกเพื่อบันทึกการเปลี่ยนแปลง

ตอนนี้คุณมีตารางใหม่พร้อมชุดสีใหม่

ทำขั้นตอนนี้ซ้ำอีกครั้งเพื่อเพิ่มตารางอื่นด้วยสี: #bdc958

การทำตารางเด่น

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

ในการดำเนินการนี้ ให้ไปที่การตั้งค่าส่วนสำหรับส่วนที่สอง (ส่วนตรงกลาง) และอัปเดตสิ่งต่อไปนี้:

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของกล่องเงาเบลอ: 80px

หากต้องการเปลี่ยนสีพื้นหลังสีเทา ให้ไปที่การตั้งค่าแถวและค้นหาสีพื้นหลังของคอลัมน์ 2 (#eeeeee) คลิกขวาที่มันแล้วคลิก "ค้นหาและแทนที่" ปรับปรุงดังต่อไปนี้:

ภายใต้ "ภายใน" เลือก "ส่วนนี้"
ใต้ “แทนที่ความกว้าง” ให้เพิ่มสี: #ffffff
จากนั้นเลือกช่องทำเครื่องหมายเพื่อแทนที่ค่าทั้งหมดที่พบในส่วน (ไม่ใช่แค่สีพื้นหลัง)
จากนั้นคลิก "แทนที่"

ใช้ค้นหาและแทนที่เพื่อทดสอบแบบอักษร

หากคุณต้องการใช้แบบอักษรอื่นในตารางของคุณ คุณสามารถทดสอบแบบอักษรต่างๆ ได้อย่างง่ายดายโดยใช้คุณลักษณะ "ค้นหาและแทนที่" ฉันตั้งใจใช้แบบอักษรเริ่มต้นสำหรับโมดูลทั้งหมดเพื่อให้กระบวนการนี้ราบรื่น หากต้องการเปลี่ยนแบบอักษรสำหรับทั้งหน้าของตาราง สิ่งที่คุณต้องทำคือเปิดการตั้งค่าของโมดูลข้อความในคอลัมน์แรกของส่วนตารางใดๆ (จริงๆ แล้วอาจเป็นโมดูลใดก็ได้ที่ใช้แบบอักษรเริ่มต้นในหน้าของคุณ) จากนั้นคลิกขวาที่แบบอักษร Heading 2 ที่ใช้แล้วเลือก "Find and Replace" จากนั้นอัปเดตสิ่งต่อไปนี้:

ภายใต้ "ภายใน" ให้ "หน้านี้"
ใต้ "แทนที่ความกว้าง" ให้เลือกแบบอักษร (ฉันกำลังใช้ Roboto Condensed)
จากนั้นเลือกช่องทำเครื่องหมายเพื่อแทนที่ค่าทั้งหมดที่พบในส่วน (หรือคุณไม่สามารถเลือกเพื่อแทนที่แบบอักษร h2 ทั้งหมด)
จากนั้นคลิก "แทนที่"

ตอนนี้แบบอักษรทั้งหมดได้เปลี่ยนไปทั่วทั้งหน้า

แค่นั้นแหละ! ตอนนี้ตารางราคาแนวนอนเสร็จสมบูรณ์แล้ว

มาดูผลลัพธ์กัน

การปรับห้าคอลัมน์บนแท็บเล็ตและสมาร์ทโฟนก็ใช้งานได้ดีเช่นกัน

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!