วิธีการออกแบบแผนภูมิเปรียบเทียบผลิตภัณฑ์สร้างสรรค์ด้วย Divi

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

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

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

แอบมอง

นี่คือตัวอย่างแผนภูมิเปรียบเทียบที่ฉันจะสร้างในบทช่วยสอนนี้

สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้

สำหรับบทช่วยสอนนี้ คุณต้องมีสิ่งต่อไปนี้:

• ธีม Divi (ติดตั้งและใช้งานอยู่)
• รูปภาพสองภาพ (ประมาณ 800px x 450px) เพื่อใช้เป็นรูปภาพผลิตภัณฑ์ของคุณในแผนภูมิเปรียบเทียบ

การสร้างหัวเรื่องและรูปภาพสินค้า

สำหรับผู้เริ่มต้น ให้สร้างเพจใหม่ ปรับใช้ Visual Builder จากนั้นเลือกสร้างเพจของคุณตั้งแต่เริ่มต้น

ถัดไป เพิ่มเค้าโครงคอลัมน์หนึ่งแถวในแถวของส่วนของคุณ

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

สีพื้นหลัง: #222222
พื้นหลังไล่ระดับสีซ้าย: rgba(242,90,71,0.14)
พื้นหลังไล่ระดับสีขวา: rgba(255,255,255,0)
ประเภทการไล่ระดับสี: เรเดียล
วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

บันทึกการตั้งค่า. ตอนนี้เปิดการตั้งค่าแถวของคุณและกำหนดความกว้างที่กำหนดเองให้กับแถวของคุณเป็น 100%

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

สำหรับเนื้อหา ให้ป้อน html นี้:

<h2>Compare</h2>
VS

แบบอักษรของข้อความ: มอนต์เซอร์รัต
น้ำหนักแบบอักษรของข้อความ: Ultra Bold
รูปแบบตัวอักษรข้อความ: TT (ตัวพิมพ์ใหญ่)
สีข้อความ: rgba(255,255,255,0.3)
ขนาดข้อความ: 3vw
ความสูงของบรรทัดข้อความ: 1.8em
การวางแนวข้อความ: ศูนย์

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

หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
หัวเรื่อง 2 สีข้อความ: rgba(255,255,255,0.3)
หัวเรื่อง 2 ขนาดข้อความ: 13vw
หัวเรื่อง 2 ระยะห่างตัวอักษร: 1vw
มาร์จิ้นที่กำหนดเอง: -13vw ด้านล่าง

บางส่วนของข้อความของคุณจะถูกซ่อนไว้ในขณะนี้ แต่จะแสดงขึ้นเมื่อเราเพิ่มเนื้อหาอื่นๆ

สองสร้างแถวที่สองของเราทำซ้ำแถวแรกแล้วลบโมดูลข้อความภายในแถวที่ซ้ำกัน จากนั้นอัปเดตโครงสร้างคอลัมน์เป็นแถวสองคอลัมน์

ไปข้างหน้าและอัปเดตการตั้งค่าแถวของคุณดังนี้:

ความกว้างของรางน้ำแบบกำหนดเอง: 1
คอลัมน์ 1 Custom Padding: 2vw Right
คอลัมน์ 2 Custom Padding: 2vw Left

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

ความกว้าง: 70%
การจัดตำแหน่งโมดูล: ขวา
ช่องว่างภายในที่กำหนดเอง: 40px ด้านล่าง

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

ใต้โมดูลรูปภาพในคอลัมน์ด้านซ้าย ให้เพิ่มโมดูลข้อความที่มีเนื้อหาข้อความต่อไปนี้: "ผลิตภัณฑ์เก่า"

จากนั้นไปที่โมดูลข้อความในแถวแรกด้านบนและคัดลอกลักษณะข้อความ

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

ซึ่งจะตรงกับรูปแบบข้อความที่เราต้องการเร็วกว่ามาก ตอนนี้สิ่งที่เราต้องทำคือ
อัปเดตขนาดข้อความและการจัดตำแหน่ง:

ขนาดข้อความ: 16px
การวางแนวข้อความ: ขวา

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

text-align:right !important;

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

บันทึกการตั้งค่า. จากนั้นคัดลอกโมดูลข้อความแล้ววางใต้รูปภาพในคอลัมน์ด้านขวา เปลี่ยนเนื้อหาข้อความเป็น "ผลิตภัณฑ์ใหม่" และอัปเดตการวางแนวข้อความเป็น "ซ้าย"

นี่คือสิ่งที่เรามีจนถึงตอนนี้

การสร้างแผนภูมิเปรียบเทียบสินค้า

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

สร้างแถวสองคอลัมน์ใหม่และอัปเดตการตั้งค่าแถวดังนี้:

ความกว้างที่กำหนดเอง: 100%
ความกว้างของรางน้ำ: 1
ช่องว่างภายในที่กำหนดเอง: 0px Bottom
คอลัมน์ 1 Custom Padding: 2vw Right
คอลัมน์ 2 Custom Padding: 2vw Left

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

ในคอลัมน์ด้านซ้ายเพิ่มโมดูลตัวแบ่งและอัปเดตการตั้งค่าดังนี้:

พื้นหลังไล่ระดับสีซ้าย: rgba(81,91,214,0.25)
พื้นหลังไล่ระดับสีขวา: rgba(255,255,255,0.15)
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 35%
สี: #515bd6
น้ำหนักตัวแบ่ง: 23px (ค่านี้ควรเท่ากับค่าความสูงของตัวแบ่ง ซึ่งโดยค่าเริ่มต้นคือ 23px เพื่อให้ตัวแบ่งมีความกว้างเท่ากับพื้นหลังของโมดูล)
Custom Padding: 70% ทางซ้าย (สิ่งนี้จะผลักตัวแบ่งไปทางขวา 75% ส่งผลให้ค่ากราฟแท่งเป็น 25% จากทางขวา)

บันทึกการตั้งค่า.

ตอนนี้คัดลอกโมดูลตัวแบ่งไปยังคอลัมน์ด้านขวาของแถวเดียวกัน จากนั้นอัปเดตการตั้งค่าต่อไปนี้:

พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0.15)
พื้นหลังไล่ระดับสีขวา: rgba(242,90,71,0.25)
ตำแหน่งเริ่มต้น: 70%
สี: #f25a47
Custom Padding: 30% ทางขวา (สิ่งนี้จะดันตัวแบ่งไปทางซ้าย 30% ส่งผลให้ค่ากราฟแท่งเป็น 70% จากด้านซ้าย)

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

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

เนื้อหา: “คุณสมบัติ”
ใช้ไอคอน: ใช่
ไอคอน: ดูภาพหน้าจอ

ไอคอนสี: rgba(255,255,255,0.3)
ใช้ขนาดตัวอักษรของไอคอน: ใช่
ขนาดตัวอักษรของไอคอน: 30px
การวางแนวข้อความ: center
แบบอักษรของร่างกาย: มอนต์เซอร์รัต
น้ำหนักแบบอักษรของร่างกาย: Ultra Bold
สีข้อความ: rgba(255,255,255,0.3)
ระยะห่างระหว่างตัวอักษร: 2px
มาร์จิ้นที่กำหนดเอง: -20px

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

margin-bottom: 0px;

ตอนนี้ คุณมีตัวอย่างการทำงานครั้งแรกของคุณลักษณะการเปรียบเทียบผลิตภัณฑ์แล้ว สิ่งที่คุณต้องทำคือทำซ้ำสองแถวที่ประกอบเป็นคุณลักษณะการเปรียบเทียบ (แถวที่มีแถบ/ตัวแบ่งสองแท่ง และแถวที่มีโมดูลการนำเสนอ) ฉันพบว่ามันง่ายที่สุดที่จะใช้ ctrl + c (หรือ command + c) เพื่อคัดลอกแต่ละแถวแล้ว ctrl + v (หรือ command + v) เพื่อวางแถวด้านล่าง จากนั้นเพียงอัปเดตช่องว่างภายในที่กำหนดเองสำหรับตัวแบ่งที่ซ้ำกันเพื่อแสดงค่าแผนภูมิแท่งต่างๆ

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

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

ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสี: rgba(255,255,255,0.05)
ความสูงของตัวแบ่ง: 19vw

นี่คือผลลัพธ์สุดท้าย

ฉันยังชอบรูปลักษณ์ของการออกแบบเมื่อฉันเปลี่ยนสีพื้นหลังของส่วนเป็น #000314

ทำให้การออกแบบตอบสนอง

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

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

รหัสนี้จะปรับความกว้างคอลัมน์ของแถวใดๆ ที่มีคลาส CSS "disable-break" เป็น 50% สิ่งนี้จะทำให้แน่ใจว่าเราจะรักษาโครงสร้างสองคอลัมน์ของเราไว้บนอุปกรณ์พกพาเพื่อไม่ให้การออกแบบเสียหาย อย่าลืมเผยแพร่การเปลี่ยนแปลงของคุณ

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

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

จากนั้นคลิกขวาที่ตัวเลือก CSS Class แล้วคลิก "Copy CSS Class"

ตอนนี้สิ่งที่คุณต้องทำคือคลิกขวาที่แต่ละแถวที่มีโครงสร้างสองคอลัมน์ (ทุกแถวที่มีตัวแบ่ง/แถบ) แล้วคลิก "วาง CSS Class"

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

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

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

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

ไชโย!