เลย์เอาต์ที่ใช้ซ้ำได้สำหรับการสร้างการออกแบบเฟรมที่ไม่ซ้ำใครด้วย Divi

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

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

การสร้างเค้าโครงการออกแบบเฟรมที่ใช้ซ้ำได้

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

ออกแบบแถว

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

สีพื้นหลัง: #333333
การจัดแนวแถว: กึ่งกลาง
กำหนดความกว้าง: 775px
ความกว้างของรางน้ำ: 2
ช่องว่างภายในที่กำหนดเอง: บน 130px, ด้านล่าง 130px, ซ้าย 50px, 50px ขวา
มาร์จิ้นที่กำหนดเอง: 0px บน, 0px ล่าง

ออกแบบมาตรา

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

สีพื้นหลัง: #ffffff
สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสีด้านบน: #ffffff
สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
ตัวแบ่งสีด้านล่าง: #ffffff

ถัดไป คุณจะต้องตั้งค่าการเติมด้านบนและด้านล่างเป็น 0px และสร้างพื้นที่ด้านบนและด้านล่างโดยใช้เส้นขอบดังนี้:

ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง
ความกว้างขอบด้านบน: 5vw
ขอบบน สี: #ffffff
ความกว้างขอบล่าง: 5vw
สีขอบล่าง: #ffffff

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

บันทึกเค้าโครงไปยังห้องสมุดของคุณ

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

คลิกไอคอน บันทึกไปยังห้องสมุด ในเมนูส่วน

จากนั้นป้อนชื่อสำหรับเลย์เอาต์ (เช่น "Row Frame Layout") แล้วคลิกปุ่มบันทึกลงในไลบรารี

จบการออกแบบกรอบ #1

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

การเปลี่ยนโครงสร้างคอลัมน์

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

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

การเพิ่มเนื้อหาลงในแถว

จากนั้นเพิ่มโมดูลรูปภาพสามโมดูล (พร้อมรูปภาพ) ในแต่ละคอลัมน์ ฉันใช้รูปภาพที่มีการวางแนวแนวตั้งมากกว่า (แทนที่จะเป็นแนวนอน) ที่มีขนาด/มิติต่างกัน

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

เคล็ดลับการออกแบบโบนัส

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

ไล่สีพื้นหลังซ้าย: #333333
ไล่สีพื้นหลังด้านขวา: #ffffff
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 0%

ตรวจสอบการออกแบบนี้

การปรับแต่งเลย์เอาต์สำหรับการออกแบบเฟรมและเนื้อหาต่างๆ

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

นี่คือกระบวนการพื้นฐานสำหรับการอัปเดตเลย์เอาต์:

1. โหลดเค้าโครงส่วนที่บันทึกไว้ไปยังเพจ
2. อัปเดตรูปแบบสีของส่วนโดยใช้ "ค้นหาและแทนที่"
3. เปลี่ยนรูปแบบตัวแบ่ง
4. ปรับแต่งแถวด้วยพื้นหลังและโครงสร้างคอลัมน์ใหม่
5. เพิ่มโมดูลลงในคอลัมน์ของคุณ

ด้วยกระบวนการนี้ การสำรวจการออกแบบใหม่น่าจะสนุกมาก! ไปต่อกันเลย

การออกแบบกรอบ #2

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

ตอนนี้เราพร้อมที่จะปรับแต่งส่วนสำหรับการออกแบบใหม่แล้ว

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

ใน Modal Find & Replace ให้อัปเดตสิ่งต่อไปนี้:

ภายใน: ส่วนนี้
แทนที่ด้วย: #443850
เลือกแทนที่ทั้งหมด

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

ตอนนี้อัปเดตการตั้งค่าส่วนด้วยรูปแบบตัวแบ่งใหม่:

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

สำหรับเนื้อหา ให้ลองใช้เค้าโครงคอลัมน์ห้าคอลัมน์พร้อมคำประกาศสั้นๆ ไปข้างหน้าและอัปเดตเค้าโครงคอลัมน์สำหรับแถวของคุณเป็นเค้าโครงห้าคอลัมน์

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

ไอคอนสี: #7d8491
ขนาดตัวอักษรของไอคอน: 80px
การวางแนวข้อความ: ศูนย์

ทำซ้ำโมดูลการนำเสนอและอัปเดตการตั้งค่าดังต่อไปนี้:

ไอคอนสี: #8cd845
ขนาดตัวอักษรของไอคอน: 50px

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

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

การออกแบบกรอบ #3

สำหรับการออกแบบเฟรมที่สาม อันดับแรก เราต้องโหลดเลย์เอาต์ของส่วนที่บันทึกไว้เหมือนที่เราทำก่อนหน้านี้สำหรับการออกแบบที่สอง

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

ภายใน: ส่วนนี้
แทนที่ด้วย: #1e3888
เลือกแทนที่ทั้งหมด

จากนั้นอัปเดตตัวแบ่งส่วนด้วยรูปแบบตัวแบ่งด้านบนและด้านล่างใหม่ (กลุ่มเมฆ):

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

พื้นหลังไล่ระดับสีซ้าย: ค่าเริ่มต้น (#2b87da)
พื้นหลังไล่ระดับสีขวา: #1E3888 (สีเดียวกับพื้นหลังของส่วน)
ประเภทการไล่ระดับสี: เรเดียล (เพื่อให้แถวมีลักษณะเหมือนก้อนเมฆ)
ตำแหน่งสิ้นสุด: 83% (เพื่อซ่อนขอบแถวเล็กน้อย)

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

เพิ่ม “#” ลงในช่องป้อนลิงก์เพื่อแสดงปุ่ม
ใช้สีพื้นหลัง: NO

สีข้อความชื่อเรื่อง: #ffc338
สีข้อความของปุ่ม: #ffc338

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

แล้วมือถือล่ะ?

ในกรณีที่คุณสงสัย นี่คือลักษณะการออกแบบบนอุปกรณ์พกพา

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

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

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

ไชโย!