6 เทคนิค Divi สำหรับการสร้าง Flat Web Design ด้วย Divi

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

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

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

ไปกันเถอะ!

1. รักษาส่วนฮีโร่ให้สะอาดและเข้าใจได้

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

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

2. เน้นโครงสร้างกล่อง

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

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

3. เลือก 3 สีสดใส

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

4. ใช้การผสมสีแบบไล่โทนสีที่ละเอียดอ่อนมาก

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

5. รวม One Standard เข้ากับ One Family Font Family

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

6. เล่นกับความสูง

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

ดูตัวอย่าง

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

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

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

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

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

• สี 1: #5214ff
• สี 2: #420fc1
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 146deg
• ตำแหน่งเริ่มต้น: 30%

ระยะห่าง

เรากำลังเพิ่มช่องว่างด้านบนและด้านล่างในส่วนของเราด้วย:

• ช่องว่างภายในด้านบน: 55px
• ช่องว่างภายในด้านล่าง: 130px

เพิ่มแถว #1

การตั้งค่าแถว

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

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

ขนาด

เปิดการตั้งค่าแถวทันทีและเปิดใช้งานตัวเลือก 'ทำให้แถวนี้เป็นแบบเต็มความกว้าง' ในการตั้งค่าการปรับขนาด

เพิ่มโมดูลข้อความชื่อเรื่อง

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

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

• แบบอักษรของหัวเรื่อง: Arial
• การจัดตำแหน่งข้อความหัวเรื่อง: ซ้าย
• หัวเรื่องสีข้อความ: #FFFFFF
• ขนาดข้อความของหัวเรื่อง: 86px (เดสก์ท็อป), 65px (แท็บเล็ต), 45px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1.2em

เพิ่มแถว #2

การตั้งค่าแถว

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

มาต่อกันที่แถวหน้ากันเลย เรากำลังใช้แถวที่มีคอลัมน์เดียวเท่านั้น

ขนาด

ก่อนเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวของคุณและใช้การตั้งค่าการปรับขนาดต่อไปนี้:

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

เพิ่มโมดูลตัวแบ่ง

สี

ดำเนินการเพิ่มโมดูลตัวแบ่งในคอลัมน์ของคุณ เราใช้ '#edf000' เป็นตัวแบ่งสี

ขนาด

เราจะปรับการตั้งค่าการปรับขนาดของโมดูลตัวแบ่งของเราต่อไป:

• น้ำหนักตัวแบ่ง: 10px
• ความกว้าง: 64%
• การจัดตำแหน่งโมดูล: ขวา

เพิ่มแถว #3

การตั้งค่าแถว

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

สุดท้ายแต่ไม่ท้ายสุด เพิ่มแถวที่มีสองคอลัมน์

ขนาด

เปิดการตั้งค่าแถวและเปิดใช้งานตัวเลือก 'ทำให้แถวนี้เป็นแบบเต็มความกว้าง' ในการตั้งค่าการปรับขนาด

ระยะห่าง

ลบช่องว่างภายในที่กำหนดเองของแถวโดยเพิ่ม '0px' ที่ช่องว่างด้านบนและด้านล่าง

เพิ่มโมดูลข้อความคำอธิบายลงในคอลัมน์ 2

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

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

• แบบอักษรของข้อความ: จอร์เจีย
• สีข้อความ: #FFFFFF
• ขนาดตัวอักษร: 27px (เดสก์ท็อป), 22px (แท็บเล็ต), 18px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.9em
• การจัดตำแหน่งข้อความ: ขวา

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2

การจัดตำแหน่งปุ่ม

จัดแถวของคุณให้ชิดขวาภายในการตั้งค่าการจัดแนวของโมดูลข้อความของคุณด้วย

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 27px
• สีข้อความของปุ่ม: #303030
• สีพื้นหลังของปุ่ม: #edf000
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: จอร์เจีย

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 155px
• ช่องว่างภายในด้านล่าง: 200px

เพิ่มแถว #1

การตั้งค่าแถว

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

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

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

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

• สี 1: #ff3233
• สี 2: rgba (255,255,255,0)
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 45%
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 45%

ขนาด

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าการปรับขนาดของคุณ:

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

เพิ่มโมดูลตัวแบ่ง

ซ่อนตัวแบ่ง

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

ระยะห่าง

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

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

กลับไปที่การตั้งค่าแถว

เพิ่มระยะห่าง

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

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

เพิ่มแถว #2

การตั้งค่าแถว

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

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

ระยะห่าง

ลดช่องว่างที่แถวนี้สร้างโดยใช้ '0px' สำหรับช่องว่างภายในด้านบน

เพิ่มโมดูลข้อความชื่อเรื่อง

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

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

• หัวข้อ 2 แบบอักษร: Arial
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่องข้อความสี: #303030
• ขนาดข้อความของหัวเรื่อง 2: 50px (เดสก์ท็อป), 45px (แท็บเล็ต), 32px (โทรศัพท์)
• ส่วนหัว 2 ความสูงของบรรทัด: 1.3em

เพิ่มโมดูลตัวแบ่ง

สี

ด้านล่างโมดูลข้อความ ให้เพิ่มโมดูลตัวแบ่ง ครั้งนี้ เราต้องการให้ตัวแบ่งแสดง ระบุรหัสสี '#5214ff'

ขนาด

เปลี่ยนการตั้งค่าการปรับขนาดของโมดูลตัวแบ่งของคุณถัดไป:

• น้ำหนักตัวแบ่ง: 10px
• ความกว้าง: 30%
• การจัดตำแหน่งโมดูล: ศูนย์

เพิ่มแถว #3

การตั้งค่าแถว

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

ได้เวลาสร้างแถวสุดท้ายของเราโดยใช้สี่คอลัมน์

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

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

วางพื้นหลังไล่ระดับสีในคอลัมน์ 1 & 3

และวางลงในคอลัมน์ที่หนึ่งและสาม

ขนาด

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

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

ระยะห่าง

เราจะเปลี่ยนการตั้งค่าการเว้นวรรคด้วย:

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

เพิ่มโมดูล Blurb

เลือกไอคอน

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

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

เปิดการตั้งค่าไอคอนของคุณต่อไป และใช้สีไอคอน '#edf000'

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

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

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

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

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

• แบบอักษรของชื่อเรื่อง: Arial
• ขนาดข้อความชื่อเรื่อง: 31px
• ความสูงของบรรทัดชื่อเรื่อง: 2.6em

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

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

• Body Font: จอร์เจีย
• ขนาดข้อความเนื้อหา: 18px
• ความสูงของเส้นร่างกาย: 2.2em

ระยะห่าง

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

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

โคลนและเปลี่ยนโมดูลประกาศ

โคลนโมดูล Blurb & วางในคอลัมน์ 2

โคลนโมดูล Blurb ที่คุณเพิ่งสร้างขึ้นและวางสำเนาในคอลัมน์ที่สอง

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

สิ่งแรกที่คุณจะต้องเปลี่ยนคือไอคอน

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

เปลี่ยนสีไอคอนเป็น '#ff3233' ด้วย

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

เนื่องจากเรากำลังจัดการกับสีพื้นหลังสีขาว คุณจะต้องเปลี่ยนสีข้อความเป็น 'มืด' ภายในการตั้งค่าข้อความ

ระยะห่าง

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

• ขอบบน: 100px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

กล่องเงา

เราจะเพิ่มเงาที่ละเอียดอ่อนลงไปด้วย:

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -10px
• เงาสี: rgba(0,0,0,0.11)

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

โมดูลโคลน

ตอนนี้เรามีโมดูล Blurb สองโมดูลที่เราจะนำมาใช้ใหม่สำหรับคอลัมน์ที่เหลือ โคลนแต่ละอันหนึ่งครั้ง

วางในคอลัมน์ 3 & 4

วาง Blurb Module ที่ซ้ำกันในคอลัมน์ที่เกี่ยวข้อง เท่านี้ก็เรียบร้อย!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์สุดท้ายสำหรับหน้าจอขนาดต่างๆ กัน

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

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