วิธีการออกแบบเลย์เอาต์ "ตู้โชว์" ห้าคอลัมน์ที่ตอบสนองด้วย Divi

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

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

แอบมอง

เทคนิคการตอบสนองที่ใช้

ใช้ความกว้างของแถวที่กำหนดเองและความกว้างของรางน้ำ

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

ใช้หน่วยความยาว vw สำหรับการเว้นวรรคและข้อความส่วนหัว

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

ตอนที่ 1: เริ่มต้น

สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้คือธีม Divi เราจะใช้ Visual Builder ร่วมกับเค้าโครงหน้าแรกของ Architecture Firm

ดังนั้น ในการเริ่มต้น ให้สร้างหน้าใหม่ ตั้งชื่อหน้าของคุณ และปรับใช้ Visual Builder เลือกตัวเลือก “เลือกเค้าโครงล่วงหน้า” ในป๊อปอัปการโหลดจากไลบรารี ให้เลือกแพ็กเลย์เอาต์การออกแบบภายในแล้วโหลดแผนผังโฮมเพจของ Architecture Firm ลงในเพจของคุณ

ส่วนที่ 2: การสร้างหัวข้อหัวข้อ

สำหรับผู้เริ่มต้น ให้ทำซ้ำส่วนที่สองที่มีคำประกาศสามคำ

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

ไปต่อกันเลย

ในส่วนเดิม (ไม่ใช่รายการที่ซ้ำกัน) ให้ลบคำประกาศสามคำและเปลี่ยนโครงสร้างคอลัมน์ของแถวเป็นหนึ่งคอลัมน์

จากนั้นเลื่อนลงไปที่ด้านล่างของเค้าโครงไปยังส่วนสุดท้าย และคัดลอกโมดูลข้อความในคอลัมน์ด้านซ้าย

จากนั้นวางลงในแถวคอลัมน์เดียวที่คุณเพิ่งสร้างและลบเนื้อหาข้อความทั้งหมดภายใต้ส่วนหัว h2 เพื่อให้เหลือเพียง "Let's Build Something"

ส่วนที่ 3: การปรับแต่ง Blurbs สำหรับเค้าโครงห้าคอลัมน์

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

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

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

เปิดการตั้งค่าสำหรับการนำเสนอด้านบนในคอลัมน์แรกและลบเนื้อหาในกล่องเนื้อหา

เพิ่มภาพพื้นหลังและการไล่ระดับสีไปยังโมดูล Blurb ด้านบน

จากนั้นให้ภาพพื้นหลังแบบเดียวกันและเพิ่มความลาดชันเพื่อซ้อนทับภาพดังต่อไปนี้:

เพิ่มภาพพื้นหลัง
พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0)
พื้นหลังไล่ระดับสีขวา: rgba(18,18,18,0.65)
ตำแหน่งเริ่มต้น: 50%
วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

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

ใช้ VW Units สำหรับข้อความชื่อเรื่องและระยะห่าง

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

ขนาดข้อความชื่อเรื่อง: 2.7vw (เดสก์ท็อป), 46px (แท็บเล็ต), 36px (สมาร์ทโฟน)
ระยะห่างของตัวอักษรชื่อเรื่อง: -3px
มาร์จิ้นที่กำหนดเอง: ซ้าย 1.5vw, 1.5vw ขวา
แพ็ดดิ้งที่กำหนดเอง: 35vw บน, 2vw ล่าง, 1vw ซ้าย, 1vw ขวา

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

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

ปรับแต่งข้อความด้านล่าง

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

การจัดตำแหน่งข้อความเนื้อหา: ซ้าย
สีข้อความ: #666666
Custom Padding: 2vw บน, 2vw ล่าง, 2vw ซ้าย, 2vw ขวา

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

ส่วนที่ 4: การปรับแต่งการตั้งค่าส่วน

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

สีพื้นหลัง: #ffffff
Custom Padding: ค่าเริ่มต้นบน, 5vw ล่าง, ค่าเริ่มต้นซ้าย, ค่าเริ่มต้นขวา
กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: -200px
ความแรงของกล่องเงาเบลอ: 0px
สีเงา: #121212

ส่วนที่ 5: การปรับแต่งการตั้งค่าแถว

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

ภาพพื้นหลัง: #ffffff
การจัดแนวแถว: กึ่งกลาง
ความกว้างที่กำหนดเอง: 89%
ความกว้างของรางน้ำ: 1
มาร์จิ้นที่กำหนดเอง: -10vw
Custom Padding: 3vw บน, 3vw ล่าง, 1.5vw ซ้าย, 1.5vw ขวา
กล่องเงา: ดูภาพหน้าจอ
ความแรงของกล่องเงาเบลอ: 80px

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

ณ จุดนี้โครงสร้างพื้นฐานของการออกแบบเสร็จสิ้นแล้ว นี่คือสิ่งที่การออกแบบดูเหมือนจนถึงตอนนี้

ตอนที่ 6: เพิ่มสัมผัสสุดท้าย

ตอนนี้ เราสามารถเพิ่มเติมการปรับแต่งการออกแบบอีกสองสามอย่างเพื่อทำให้เสร็จ

ส่าย Blurbs

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

แพ็ดดิ้งแบบกำหนดเอง: 28vw Top

และสำหรับข้อความด้านบนในคอลัมน์ที่สาม ให้เปลี่ยนช่องว่างภายในด้านบนเป็น 30vw

เพิ่มตัวแบ่งส่วนเพื่อเพิ่มพื้นผิวให้กับแถวห้าคอลัมน์ของคุณ

เทคนิคการออกแบบที่ยอดเยี่ยมอย่างหนึ่งคือการเพิ่มตัวแบ่งส่วนบนให้กับส่วนที่อยู่เหนือส่วนโดยตรงด้วยห้าคอลัมน์ของเรา พื้นหลังตัวแบ่งจะแสดงบนพื้นหลังของแถวห้าคอลัมน์ แม้ว่าจะซ้อนทับส่วนด้านบนก็ตาม ในการดำเนินการนี้ ให้ไปที่ส่วนที่มีชื่อ "Let's Build Something" และให้ตัวแบ่งดังนี้:

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

ฉันไปข้างหน้าและอัปเดตภาพพื้นหลังสองสามภาพเพื่อให้เข้าใจมากขึ้นว่าการออกแบบจะมีลักษณะอย่างไรเมื่อใช้รูปภาพต่างๆ

นี่คือการออกแบบขั้นสุดท้าย

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

และนี่คือสิ่งที่ดูเหมือนบนสมาร์ทโฟน

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

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

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

ไชโย!