วิธีสร้างการเปลี่ยนส่วนที่สวยงามโดยใช้คุณสมบัติการออกแบบใหม่ของ Divi

ในบทช่วยสอน Divi นี้ เราจะแสดงวิธีสร้างการเปลี่ยนส่วนที่สวยงามโดยใช้ตัวเลือก Divi ในตัว

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

แอบมอง

ก่อนดำดิ่งสู่การเปลี่ยนส่วนต่างๆ ทีละส่วน มาดูสิ่งที่คุณคาดหวังได้:

วิธีสร้างการเปลี่ยนส่วนที่สวยงามโดยใช้คุณสมบัติการออกแบบใหม่ของ Divi

สมัครสมาชิกช่อง Youtube ของเรา

สร้างส่วนใหม่

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

สร้างส่วนแรก

เริ่มต้นด้วยการสร้างส่วนมาตรฐานส่วนแรกและเลือกแถวเต็มความกว้าง

การตั้งค่ามาตรา

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

โมดูลข้อความแรก

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

• แบบอักษรของข้อความ: Comfortaa
• ขนาดตัวอักษรของข้อความ: 50
• ความสูงของบรรทัดข้อความ: 1.7em
• การวางแนวข้อความ: ศูนย์

โมดูลข้อความที่สอง

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

• แบบอักษรของข้อความ: Comfortaa
• ขนาดตัวอักษรข้อความ: 16
• ความสูงของบรรทัดข้อความ: 1.7em
• การวางแนวข้อความ: ศูนย์

โมดูลปุ่ม

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

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

ขณะที่ยังคงอยู่ในหมวดหมู่ย่อยของปุ่ม ให้ใช้พื้นหลังแบบไล่ระดับสีต่อไปนี้สำหรับปุ่ม:

• สีแรก: #2b87da
• สีที่สอง: #29c4a9
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 162deg
• ตำแหน่งเริ่มต้น: 0%
• ตำแหน่งสุดท้าย: 100%

สร้างส่วนที่สอง

เพิ่มส่วนมาตรฐานอื่น แต่เลือกแถวสามคอลัมน์แทน

การตั้งค่ามาตรา

ส่วนที่สองจะใช้ช่องว่างภายในขนาด '300px' สำหรับด้านบนและด้านล่างเช่นกัน

โมดูล Blurb

ต่อไป เราจะเพิ่ม Blurb Module ลงในคอลัมน์แรกของแถว เมื่อคุณตัดสินใจเลือกข้อความที่ต้องการให้ปรากฏแล้ว ให้เลื่อนลงไปที่แท็บเนื้อหา เปิดใช้งานตัวเลือก 'ใช้ไอคอน' และเลือกไอคอน

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

• ไอคอนสี: #515151
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 55px

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

• แบบอักษรของส่วนหัว: Comfortaa
• การจัดตำแหน่งข้อความส่วนหัว: Center
• ขนาดตัวอักษรของส่วนหัว: 18

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

• แบบอักษรของร่างกาย: Comfortaa
• การจัดตำแหน่งข้อความเนื้อหา: กึ่งกลาง
• ขนาดตัวอักษรของร่างกาย: 14
• ความสูงของเส้นร่างกาย: 1.7em

โคลน Blurb โมดูล

เมื่อคุณสร้าง Blurb Module แล้ว ให้โคลนสองครั้งและวางไว้ในอีกสองคอลัมน์ของแถว

1. เส้นทแยงมุมทั้งหมด

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

การตั้งค่าพื้นหลังไล่ระดับของส่วนแรก

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

• สีแรก: #dddddd
• สีที่สอง: #f7f7f7
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 183deg
• ตำแหน่งเริ่มต้น: 85%
• ตำแหน่งสุดท้าย: 70.05%

การตั้งค่าพื้นหลังไล่ระดับของส่วนที่สอง

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

• สีแรก: #f7f7f7
• สีที่สอง: #dddddd
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 183deg
• ตำแหน่งเริ่มต้น: 85%
• ตำแหน่งสุดท้าย: 69.05%

ลบการเติมด้านบนของส่วนที่สอง

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

2. เจอกันครึ่งทาง

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

การตั้งค่าพื้นหลังไล่ระดับของส่วนแรก

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

• สีแรก: rgba(255,255,255,0)
• สีที่สอง: rgba(224,43,32,0.07)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: บนซ้าย
• ตำแหน่งเริ่มต้น: 60%
• ตำแหน่งสุดท้าย: 50%

การตั้งค่าพื้นหลังไล่ระดับของส่วนที่สอง

ส่วนที่สองจะเพลิดเพลินไปกับพื้นหลังไล่ระดับต่อไปนี้:

• สีแรก: rgba(255,255,255,0)
• สีที่สอง: rgba(224,43,32,0.33)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ล่างขวา
• ตำแหน่งเริ่มต้น: 58%
• ตำแหน่งสุดท้าย: 50%

3. ฟิวชั่น

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

การตั้งค่าพื้นหลังไล่ระดับของส่วนแรก

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

• สีแรก: rgba(12,113,195,0.19)
• สีที่สอง: rgba(255,255,255,0.39)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ล่างซ้าย
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

การตั้งค่าพื้นหลังไล่ระดับของส่วนที่สอง

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

• สีแรก: rgba(224,43,32,0.17)
• สีที่สอง: rgba(255,255,255,0.39)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: บนขวา
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

เพิ่มส่วนมาตรฐานใหม่ในระหว่าง

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

เพิ่มสีพื้นหลังไล่ระดับให้กับส่วนใหม่

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

• สีแรก: rgba(12,113,195,0.19)
• สีที่สอง: rgba(224,43,32,0.17)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 92deg
• ตำแหน่งเริ่มต้น: 43%
• ตำแหน่งสุดท้าย: 62%

4. ผกผัน

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

การตั้งค่าพื้นหลังไล่ระดับของส่วนแรก

พื้นหลังไล่ระดับสีสำหรับส่วนแรกมีดังต่อไปนี้:

• สีแรก: #f2f2f2
• สีที่สอง: rgba(104,153,193,0.58)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ล่างขวา
• ตำแหน่งเริ่มต้น: 7.9%
• ตำแหน่งสุดท้าย: 7.9%

การตั้งค่าพื้นหลังไล่ระดับของส่วนที่สอง

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

• สีแรก: rgba(104,153,193,0.58)
• สีที่สอง: #f2f2f2
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: บนขวา
• ตำแหน่งเริ่มต้น: 8%
• ตำแหน่งสุดท้าย: 8%

5. พอยน์เตอร์

ตัวอย่างที่ห้าดูสะอาดตาและเรียบง่ายกว่าตัวอย่างอื่นๆ คุณสามารถรับรู้การเปลี่ยนแปลงได้สองวิธีโดยการดูตัวชี้หรือวงกลม (หรือทั้งสองอย่าง)

การตั้งค่าพื้นหลังไล่ระดับของส่วนแรก

ใช้พื้นหลังไล่ระดับสีต่อไปนี้สำหรับส่วนแรก:

• สีแรก: #f4f4f4
• สีที่สอง: #ffffff
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านบน
• ตำแหน่งเริ่มต้น: 88%
• ตำแหน่งสุดท้าย: 88.05%

การตั้งค่าพื้นหลังไล่ระดับของส่วนที่สอง

สุดท้าย ใช้การตั้งค่าพื้นหลังการไล่ระดับสีต่อไปนี้กับส่วนที่สอง:

• สีแรก: rgba(43,135,218,0)
• สีที่สอง: rgba(12,113,195,0.43)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านล่าง
• ตำแหน่งเริ่มต้น: 87%
• ตำแหน่งสุดท้าย: 87%

6. ปริศนา

ตัวอย่างสุดท้ายทำให้ส่วนต่างๆ รู้สึกเหมือนเป็นส่วนหนึ่งร่วมกัน

การตั้งค่าพื้นหลังไล่ระดับของส่วนแรก

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

• สีแรก: rgba(160,181,193,0.46)
• สีที่สอง: rgba(255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านบน
• ตำแหน่งเริ่มต้น: 56.3%
• ตำแหน่งสุดท้าย: 43%

การตั้งค่าพื้นหลังไล่ระดับของส่วนที่สอง

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

• สีแรก: rgba(242,242,242,0)
• สีที่สอง: rgba(160,181,193,0.46)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านบน
• ตำแหน่งเริ่มต้น: 56%
• ตำแหน่งสุดท้าย: 40%

เปลี่ยน Padding ของส่วนแรก

เพื่อให้ทั้งสองส่วนพอดีกันมากขึ้น เราจะเปลี่ยนช่องว่างด้านบนและด้านล่างของส่วนแรกเป็น '150px'

ลบการเติมด้านบนของส่วนที่สอง

สุดท้าย เราจะลบการเติมส่วนบนของส่วนที่สองด้วย

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

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย NikVector / shutterstock.com