7 เทคนิคในการสร้างเว็บไซต์ที่โดดเด่นและมีสีสันด้วย Divi

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

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

นี่เป็นโพสต์สุดท้ายในชุดโพสต์ที่เราจัดการ 4 สไตล์เว็บไซต์ที่แตกต่างกันและวิธีทำให้สำเร็จโดยใช้ Divi:

1. สะอาดและเป็นนามธรรม
2. มินิมอล
3. แบน
4. ตัวหนาและมีสีสัน

ไปกันเถอะ!

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

1. 'เปลี่ยน' แถวให้เป็นส่วนที่มีคอลัมน์

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

2. การไล่ระดับสี + พื้นผิวพื้นหลัง

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

3. สีไล่ระดับสีกึ่งโปร่งใส + ใต้ตัวแบ่งส่วน

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

4. การทับซ้อนคอลัมน์แนวนอนของโมดูล

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

5. แยกสำเนาเพื่อการจัดตำแหน่งที่สมบูรณ์แบบ

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

6. รวมสีดำและสีข้อความกึ่งโปร่งใส

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

7. หลีกเลี่ยงกล่องเงาที่ด้านบนหรือด้านล่างเพื่อรวมส่วนต่างๆ

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

ดูตัวอย่าง

เมื่อเราได้ใช้เทคนิคต่างๆ ทั้งหมดแล้ว ก็ถึงเวลานำสิ่งต่าง ๆ ไปปฏิบัติ เราจะสร้างการออกแบบใหม่ดังต่อไปนี้:

มาเริ่มสร้างกันเลย: เพิ่มส่วนมาตรฐาน #1

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

ตัวแบ่งด้านบน

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

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: rgba(0,0,0,0.13)
• ความสูงของตัวแบ่ง: 900px
• พลิกตัวแบ่ง: แนวตั้ง
• การจัดเรียงตัวแบ่ง: ใต้เนื้อหาส่วน

ตัวแบ่งด้านล่าง

ดำเนินการต่อโดยเพิ่มตัวแบ่งด้านล่างที่คล้ายกันเช่นกัน

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: rgba(0,0,0,0.13)
• ความสูงของตัวแบ่ง: 900px
• การจัดเรียงตัวแบ่ง: ใต้เนื้อหาส่วน

ระยะห่าง

ถัดไป กำหนดระยะขอบบางส่วนและลบช่องว่างภายในเริ่มต้น

• ขอบบนและล่าง: 50px
• ระยะขอบซ้ายและขวา: 50px
• ช่องว่างบนและล่าง: 0px
• ช่องว่างภายในซ้ายและขวา: 0px

มุมโค้งมน

จากนั้นเปิดการตั้งค่าเส้นขอบและเพิ่มมุมโค้งมน

• ซ้ายบน: 20px
• ขวาบน: 20px

กล่องเงา

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

• ตำแหน่งแนวตั้งเงาของกล่อง: -23px
• ความแรงของกล่องเงาเบลอ: 37px
• ความแรงของการกระจายเงาของกล่อง: -29px
• เงาสี: rgba(0,0,0,0.22)
• ตำแหน่งเงาของกล่อง: เงาด้านนอก

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

พื้นหลังไล่ระดับคอลัมน์ 1

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

• สี 1: rgba(255,191,0,0.76)
• สี 2: rgba(153,0,255,0.87)

ภาพพื้นหลังพื้นผิวคอลัมน์ 1

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

หลังจากที่คุณอัปโหลดภาพไปยังไลบรารีสื่อของคุณแล้ว อย่าลืมเลือก 'พอดี' เป็นขนาดภาพพื้นหลังของคอลัมน์ 1 ด้วย

คอลัมน์ 2 สีพื้นหลัง

ถัดไป กำหนดสีพื้นหลัง '#F7F7F7' ให้กับคอลัมน์ที่สองของคุณ

ขนาด

เราจะ 'เปลี่ยน' แถวของเราให้เป็นส่วนโดยทำให้เต็มความกว้างของส่วน

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

ระยะห่าง

นอกจากการทำให้แถวใช้ความกว้างทั้งหมดของส่วนแล้ว เรายังต้องเอาการเติมด้านบนและด้านล่างของส่วนของเราออกด้วย

• ช่องว่างบนและล่าง: 0px

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 1

ซ่อนตัวแบ่ง

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 200px (เดสก์ท็อปและแท็บเล็ต), 150px (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 200px (เดสก์ท็อปและแท็บเล็ต), 150px (โทรศัพท์)

เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 2

เพิ่มสำเนา

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

การตั้งค่าข้อความ

เปิดการตั้งค่าข้อความถัดไปและใช้การเปลี่ยนแปลงต่อไปนี้:

• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #000000
• ขนาดตัวอักษร: 250px (เดสก์ท็อป), 200px (แท็บเล็ต), 100px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 0.75em

ระยะห่าง

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

• ขอบบน: 200px (เดสก์ท็อป), -250px (แท็บเล็ต), -120px (โทรศัพท์)
• ระยะขอบซ้าย: -279px (เดสก์ท็อป), 5% (แท็บเล็ตและโทรศัพท์)

โคลนโมดูลข้อความสองครั้ง

โคลน #1

เปลี่ยนข้อความ

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

เปลี่ยนระยะห่าง

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

• ระยะขอบซ้าย: -360.7px (เดสก์ท็อป), 5% (แท็บเล็ตและโทรศัพท์)

โคลน #2

เปลี่ยนข้อความ

เปลี่ยนสำเนาของโมดูลข้อความที่สามของคุณด้วย

เปลี่ยนสีข้อความ

และเพื่อให้การออกแบบโดดเด่นยิ่งขึ้นไปอีก เราจะเปลี่ยนสีข้อความของโมดูลนี้เป็น 'rgba(0,0,0,0.19)'

เปลี่ยนระยะห่าง

เรากำลังลบขอบบนของโมดูลนี้และเพิ่มระยะขอบด้านล่างแทน ระยะขอบซ้ายติดลบก็ต่างกันเช่นกัน

• ขอบล่าง: 200px
• ระยะขอบซ้าย: -410px (เดสก์ท็อป), 5% (แท็บเล็ตและโทรศัพท์)

เพิ่มมาตราฐาน #2

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

ระยะห่าง

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

• ขอบบนและล่าง: 50px
• ระยะขอบซ้ายและขวา: 50px
• ช่องว่างบนและล่าง: 0px
• ช่องว่างภายในซ้ายและขวา: 0px

มุมโค้งมน

ดำเนินการต่อโดยเพิ่มมุมโค้งมนด้านล่าง:

• ล่างซ้าย: 20px
• ล่างขวา: 20px

กล่องเงา

เพิ่ม Box Shadow ที่ด้านล่างของส่วนด้วย

• ตำแหน่งแนวตั้งเงาของกล่อง: 47px
• ความแรงของกล่องเงาเบลอ: 37px
• ความแรงของการกระจายเงาของกล่อง: -29px
• เงาสี: rgba(0,0,0,0.22)
• ตำแหน่งเงาของกล่อง: เงาด้านนอก

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

ขนาด

เรากำลัง 'เปลี่ยน' แถวนี้เป็นส่วนเช่นกัน:

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

ระยะห่าง

และเราจะลบช่องว่างด้านบนและด้านล่างเริ่มต้นออก

• ช่องว่างบนและล่าง: 0px

เพิ่ม Blurb Module #1 ให้กับคอลัมน์ 1

เลือกไอคอน

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

พื้นหลังไล่โทนสี

เราจะทำให้ดูเหมือนว่าไอคอนซ้อนทับด้านบนของโมดูล Blurb โดยใช้พื้นหลังแบบไล่ระดับสี:

• สี 1: rgba(255,255,255,0)
• สี 2: #A21DF9
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 20%

ภาพพื้นหลังพื้นผิว

เรากำลังรวมพื้นหลังแบบไล่ระดับเข้ากับพื้นหลังที่มีพื้นผิวแบบเดียวกับที่เราเคยใช้ในส่วนที่แล้ว

การตั้งค่าไอคอน

เปลี่ยนการตั้งค่าไอคอนถัดไป:

• ไอคอนสี: #000000
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 85px

การตั้งค่าข้อความ

ดำเนินการต่อโดยแก้ไขการตั้งค่าข้อความ

• การวางแนวข้อความ: ศูนย์
• สีข้อความ: เบา

การตั้งค่าข้อความชื่อเรื่อง

จากนั้น เราจะใช้การตั้งค่าต่อไปนี้เพื่อจัดรูปแบบชื่อการนำเสนอของเรา:

• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• ขนาดข้อความชื่อเรื่อง: 46px

การตั้งค่าข้อความเนื้อหา

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

• น้ำหนักแบบอักษรของร่างกาย: เบา
• ขนาดข้อความเนื้อหา: 18px

ระยะห่าง

สุดท้ายแต่ไม่ท้ายสุด เราจะให้โมดูล Blurb ของเรามีช่องว่างให้หายใจด้วยการเพิ่มช่องว่างภายในแบบกำหนดเอง:

• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 100px
• ช่องว่างภายในซ้ายและขวา: 50px

โคลนโมดูล Blurb สองครั้ง & วางในคอลัมน์ที่เหลือ

โคลน #1

เปลี่ยนไอคอน

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

เปลี่ยนพื้นหลังไล่ระดับ

ดำเนินการต่อโดยเปลี่ยนสีพื้นหลังไล่ระดับสีที่สองเป็น '#D47A9A'

โคลน #2

เปลี่ยนไอคอน

ทำสิ่งเดียวกันกับ Blurb Module ในคอลัมน์สุดท้าย

เปลี่ยนพื้นหลังไล่ระดับ

สำหรับโมดูลนี้ เราใช้ '#F3BF3E' เป็นสีพื้นหลังแบบไล่ระดับสีที่สองแทน

ดูตัวอย่าง

หากคุณได้ปฏิบัติตามแต่ละขั้นตอนข้างต้นแล้ว คุณควรได้ผลลัพธ์ดังต่อไปนี้ในขนาดหน้าจอต่างๆ:

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

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