วิธีการออกแบบเค้าโครงตารางเรขาคณิตใน Divi

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

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

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

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

แอบมอง

นี่คือภาพรวมการออกแบบตารางเรขาคณิตที่เราจะสร้างในบทช่วยสอนนี้

สิ่งที่คุณต้องการ

• Photo Editor (ฉันจะใช้ Sketch) เพื่อสร้างภาพหกเหลี่ยม หรือในตอนนี้ คุณสามารถลากรูปภาพนี้ไปที่เดสก์ท็อปแล้วใช้งานได้
  
• ธีม Divi (ติดตั้งและใช้งานอยู่)

การสร้างภาพพื้นหลังรูปหกเหลี่ยม

ในการสร้างภาพพื้นหลังหกเหลี่ยม ฉันจะใช้โปรแกรมแก้ไขภาพ Sketch (สำหรับ Mac เท่านั้น) อย่างไรก็ตาม รูปแบบนี้ควรเป็นรูปทรงที่ง่ายต่อการสร้างโดยใช้โปรแกรมแก้ไขรูปภาพจำนวนเท่าใดก็ได้ (เช่น Photoshop, Illustrator หรือ Gimp)

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

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

ตอนนี้กดปุ่ม shift ค้างไว้แล้วคลิก (ค้างไว้) บนผืนผ้าใบแล้วลากเมาส์เพื่อสร้างรูปร่าง จากนั้นปล่อยเมาส์ การกด Shift ค้างไว้ช่วยให้คุณสร้างขนาดสี่เหลี่ยมจัตุรัสได้อย่างสมบูรณ์แบบสำหรับรูปร่างของคุณ อัปเดตคุณสมบัติของรูปร่างของคุณในแถบด้านข้างขวาดังนี้:

ขนาด: 360 กว้าง 360 สูง
ด้าน: 6
สีเติม: 000000 hex, 0 R, 0 G, 0 B, 30 A (โดยทั่วไปเป็นสีดำที่มีความทึบ 30%)

จากนั้นส่งออกรูปภาพของคุณเป็น png และนำเข้าไปยัง WordPress Media Library ของคุณในภายหลัง

การสร้างส่วนแรกที่มีสามคอลัมน์

การออกแบบนี้จะมีสามส่วนซ้อนทับกัน โดยแต่ละส่วนมีแถวที่มีโครงสร้างคอลัมน์ที่แตกต่างกัน ส่วนแรกจะมีโครงสร้างสามคอลัมน์ ส่วนที่สองจะมีสองคอลัมน์ และส่วนที่สามจะมีเพียงคอลัมน์เดียว

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

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

พื้นหลังไล่ระดับสีซ้าย: #2b87da
พื้นหลังไล่ระดับสีขวาสี: rgba(0,0,0,0.6)

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

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

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

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

อัปเดตการตั้งค่าแถวดังนี้:

ใช้ความกว้างที่กำหนดเอง: ใช่
หน่วย: %
ความกว้างที่กำหนดเอง: 100%
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 2
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

Custom Padding (เดสก์ท็อป): 0px บน, 0px ล่าง, 10% ซ้าย, 10% ขวา
Custom Padding (แท็บเล็ต): 0% ซ้าย, 0% ขวา

บันทึกการตั้งค่าแถวของคุณตอนนี้

การเพิ่มโมดูล Blurb ของคุณในแต่ละคอลัมน์

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

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

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

ไอคอนสี: #66d1ff
ขนาดตัวอักษรของไอคอน: 66px
การวางแนวข้อความ: ศูนย์
สีข้อความ: เบา
ความกว้าง: 360px (ความกว้างเท่ากันของภาพพื้นหลังรูปหกเหลี่ยมของคุณ)
การจัดตำแหน่งโมดูล: ศูนย์
ช่องว่างภายในแบบกำหนดเอง: บน 85px ล่าง 85px ล่าง 10% ซ้าย 10% ขวา 10%

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

หลังจากที่คุณบันทึกโมดูลการนำเสนอแล้ว ให้คัดลอกและวางลงในคอลัมน์ 2 และ 3 เพื่อให้มีการนำเสนอทั้งสามแบบ

ตอนนี้เราได้เพิ่มพื้นหลังรูปหกเหลี่ยมในแถวแรกของเราเรียบร้อยแล้ว

การสร้างส่วนที่สองด้วยสองคอลัมน์

เพื่อสร้างส่วนที่สองของเรา ไปข้างหน้าและทำซ้ำส่วนแรก จากนั้นอัปเดตการตั้งค่าส่วนด้วยสีพื้นหลังต่อไปนี้: rgba(0,0,0,0.6) และลบการไล่ระดับสีที่มีอยู่

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

อัปเดตการตั้งค่าแถวดังนี้:

ความกว้างของรางน้ำ: 3
มาร์จิ้นที่กำหนดเอง (เดสก์ท็อป): -145px Top
มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): -70px Top
Custom Padding (เดสก์ท็อป): 24% ซ้าย 24% ขวา

ฉันเพิ่มช่องว่างภายในด้านซ้ายและขวาเพื่อจัดตำแหน่งพื้นหลังรูปหกเหลี่ยมระหว่างข้อความแจ้งในส่วนด้านบน (ช่องว่างภายใน 24% ในแต่ละด้านทำให้เราใกล้กันมาก) ฉันยังเปลี่ยนความกว้างของรางน้ำกลับเป็น 3 เพื่อรองรับพื้นที่คอลัมน์ที่ลดลงเนื่องจากการเติมแถวเพิ่มเติม จากนั้นฉันใช้ระยะขอบ -145px เพื่อดึงแถวขึ้นเล็กน้อย

อย่างที่คุณเห็นโครงร่างกริดกำลังมารวมกัน

การสร้างส่วนที่สามด้วยหนึ่งคอลัมน์

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

ตอนนี้อัปเดตโครงสร้างคอลัมน์แถวเป็นหนึ่งคอลัมน์และลบโมดูลการนำเสนอเพิ่มเติม

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

ในการตั้งค่าแถว ให้อัปเดตการเติมแบบกำหนดเองดังนี้:

Custom Padding (เดสก์ท็อป): 37% ซ้าย, 37% ขวา

ตอนนี้ มาดูผลลัพธ์สุดท้ายของการจัดวางตารางเรขาคณิตของเรากัน

นี่คือลักษณะที่ปรากฏบนมือถือ

นี่คือวิธีการปรับให้เข้ากับขนาดหน้าจอต่างๆ

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

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

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

ไชโย!