8 เทคนิคในการสร้างเว็บไซต์ขั้นต่ำด้วย Divi

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

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

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

ไปกันเถอะ!

1. น้อยแต่มาก

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

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

2. Margin และ Padding คือเพื่อนที่ดีที่สุดของคุณ

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

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

3. ใช้สีหนึ่งสำเนียง

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

4. รูปภาพหรือภาพประกอบ - ไม่ใช่ทั้งสองอย่าง

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

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

5. พิจารณาใช้โมดูลข้อความแทนโมดูลปุ่มสำหรับ CTAs

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

6. วงเวียนสามารถช่วยสมดุลช่องว่าง

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

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

7. ใช้รูปทรงที่เรียบง่ายและละเอียดอ่อน

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

8. ใช้แอนิเมชั่นที่ละเอียดอ่อน (ถ้าจำเป็น)

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

ดูตัวอย่าง

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

มาเริ่มสร้างกันเลย: เพิ่มมาตรามาตรฐานใหม่

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

ระยะห่าง

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

• ช่องว่างด้านบนและด้านล่าง: 50px

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

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

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

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

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

• สี #1: #ffffff
• สี #2: #efefef
• ประเภทการไล่ระดับสีของคอลัมน์: เรเดียล
• ทิศทางรัศมีของคอลัมน์: กึ่งกลาง
• ตำแหน่งเริ่มต้นของคอลัมน์: 40%
• ตำแหน่งสิ้นสุดคอลัมน์: 40%

ขนาด

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

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

ระยะห่าง

สุดท้าย เพิ่มการเว้นวรรคต่อไปนี้ในแถวของคุณด้วย:

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

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

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

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

• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• ระยะห่างของตัวอักษรข้อความ: 8px

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ความเข้มของแอนิเมชั่น: 5%

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

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

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

• แบบอักษรของหัวเรื่อง: จอร์เจีย
• หัวเรื่องข้อความสี: #666666
• ขนาดข้อความของหัวเรื่อง: 78px (เดสก์ท็อป), 50px (แท็บเล็ต), 40px (โทรศัพท์)
• การเว้นวรรคหัวเรื่อง: 3px

ระยะห่าง

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

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

ชายแดน

เราต้องการเส้นขอบด้านซ้ายด้วย ดังนั้นให้เพิ่มเส้นขอบด้านซ้ายด้วยการตั้งค่าต่อไปนี้:

• ความกว้างของเส้นขอบด้านซ้าย: 6px
• สีขอบซ้าย: #d67787

โมดูลข้อความปุ่ม

เพิ่มลิงค์

แทนที่จะใช้โมดูลปุ่ม เราใช้โมดูลข้อความที่เราจะเพิ่มลิงก์เข้าไป เพิ่ม CTA ของคุณและลิงก์ภายในกล่องเนื้อหา

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

จากนั้น ใช้การตั้งค่าข้อความลิงก์ต่อไปนี้กับโมดูลข้อความของคุณ:

• น้ำหนักแบบอักษรของลิงก์: กึ่งหนา
• รูปแบบตัวอักษรของลิงก์: ตัวเอียง & ตัวพิมพ์ใหญ่
• การจัดแนวข้อความลิงก์: ซ้าย
• ลิงค์สีข้อความ: #666666
• ระยะห่างระหว่างตัวอักษรของลิงก์: 8px

ขนาด

เนื่องจากเราจะใช้เส้นขอบด้านล่าง ภายหลัง เราจะลดความกว้างของโมดูลข้อความนี้ด้วย:

• ความกว้าง: 46%
• การจัดตำแหน่งโมดูล: ซ้าย

ระยะห่าง

และเพื่อให้แน่ใจว่าขอบด้านล่างไม่ใกล้กับข้อความของเรามากเกินไป เราจะเพิ่มช่องว่างภายในด้านล่าง '10px' ด้วย

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

ชายแดน

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

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #666666

แอนิเมชั่น

เรากำลังเพิ่มแอนิเมชั่นที่ละเอียดอ่อนเช่นกัน:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ภาพเคลื่อนไหวล่าช้า: 100ms
• ความเข้มของแอนิเมชั่น: 5%

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

ทัศนวิสัย

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

สี

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

ขนาด

เปิดการตั้งค่าการปรับขนาดถัดไปและเปลี่ยนน้ำหนักตัวแบ่งเป็น '2px'

ระยะห่าง

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

• ระยะขอบซ้าย: 200px
• ระยะขอบขวา: -100px

แอนิเมชั่น

สุดท้ายแต่ไม่ท้ายสุด เราจะรวมแอนิเมชั่นต่อไปนี้:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 150ms
• ความเข้มของแอนิเมชั่น: 5%

เพิ่มมาตรามาตรฐานที่สอง

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

ระยะห่าง

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

• ขอบบนและล่าง: 80px

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

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

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

ขนาด

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

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

ระยะห่าง

เราจะต้องเพิ่มการเติมคอลัมน์ 2 ด้วย:

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

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

ระยะห่าง

เราจะเพิ่มความกว้างของโมดูลรูปภาพโดยเพิ่มระยะขอบขวาติดลบ:

• ระยะขอบขวา: -100px

กล่องเงา

นอกจากนี้ เราจะใช้เงาของกล่องต่อไปนี้เพื่อสร้างองค์ประกอบการออกแบบพิเศษบนหน้า:

• ตำแหน่งแนวนอนของกล่องเงา: 100px
• ตำแหน่งแนวตั้งเงาของกล่อง: 100px
• ความแรงของการกระจายเงาของกล่อง: -14px
• สีเงา: #efefef

โมดูลข้อความปุ่มโคลน & วางโมดูลรูปภาพด้านล่าง

ค้นหา & โมดูลข้อความปุ่มโคลน

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

วางใต้ภาพ

จากนั้น วางไว้ด้านล่างโมดูลรูปภาพในคอลัมน์แรก

โคลนโมดูลข้อความแรกในส่วนแรก & วางในคอลัมน์2

ค้นหา & โคลนโมดูลข้อความ

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

วางในคอลัมน์ 2

แทนที่จะวางไว้ในคอลัมน์แรก ให้วางลงในคอลัมน์ที่สอง

โมดูลข้อความชื่อโคลน & วางในคอลัมน์ 2

ค้นหา & โคลนโมดูลข้อความ

สุดท้ายนี้ เราจะใช้ชื่อโมดูลข้อความซ้ำเช่นกัน

วางในคอลัมน์ 2

หลังจากที่คุณได้โคลนแล้ว ให้วางไว้ในคอลัมน์ที่สองของแถวใหม่ของคุณ

เปลี่ยนเนื้อหาเป็น H2

เปลี่ยนเนื้อหาในกล่องเนื้อหาของคุณเป็น H2

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

จากนั้น เพิ่มการตั้งค่าต่อไปนี้ในการตั้งค่าข้อความ H2 ของคุณ:

• หัวข้อ 2 แบบอักษร: จอร์เจีย
• หัวเรื่อง 2 สีข้อความ: #666666
• หัวเรื่อง 2 ขนาดข้อความ: 58px
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 3px

เพิ่มโมดูลข้อความคำอธิบาย

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

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

• น้ำหนักแบบอักษรของข้อความ: เบา
• ระยะห่างของตัวอักษรข้อความ: 1px

ขนาด

ไปข้างหน้าและเปลี่ยนขนาดของโมดูลข้อความนี้:

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

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

ทัศนวิสัย

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

สี

เปลี่ยนสีของตัวแบ่งของคุณเป็น '#666666'

ระยะห่าง

เพิ่มระยะห่างต่อไป:

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

แอนิเมชั่น

และแน่นอน เราจะใช้แอนิเมชั่นที่ละเอียดอ่อนด้วย:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ความเข้มของแอนิเมชั่น: 5%

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

ทัศนวิสัย

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

สี

เปลี่ยนสีของตัวแบ่งของคุณเป็น '#d67787'

ขนาด

ใช้ '2px' สำหรับน้ำหนักตัวแบ่ง

ระยะห่าง

และเพิ่มการตั้งค่าระยะห่างต่อไปนี้:

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

แอนิเมชั่น

ในการปิดท้าย ให้เพิ่มแอนิเมชั่นเล็กๆ น้อยๆ ให้กับตัวแบ่งของคุณ:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 100ms
• ความเข้มของแอนิเมชั่น: 5%

ดูตัวอย่าง

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

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

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