10 Divi Sites พร้อมหน้าโครงการที่ยอดเยี่ยม

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

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

1. BCBD

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

ดูเว็บไซต์

2. จูเปอร์

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

ดูเว็บไซต์ (เว็บล่มครับ)

3. ความร่วมมือด้านการออกแบบการสื่อสาร

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

ดูเว็บไซต์

4. คิวบิกฟ็อกซ์

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

ดูเว็บไซต์

5. คิม เวสเตอร์การ์ด

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

ดูเว็บไซต์

6. การเรียนรู้

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

ดูเว็บไซต์

7. Patti Houston

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

ดูเว็บไซต์

8. ผู้สร้างน้ำสีฟ้า

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

ดูเว็บไซต์

9. Kenny Payero

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

ดูเว็บไซต์

10. The Zimmerman Group

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

ดูเว็บไซต์

จบความคิด

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

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

• 3 เค้าโครงหน้าโครงการที่สวยงามฟรี (& วิธีสร้างเพิ่มเติมด้วย Divi Builder)
• วิธีใช้พอร์ตโฟลิโอที่กรองได้และการนำทางโพสต์เพื่อจัดระเบียบกรณีศึกษาด้วย Divi
• วิธีสร้างแท็บเล็ตแสดงตัวอย่างข้อความที่เลื่อนได้ด้วย Divi
• 11 เว็บไซต์ผลงานที่ดีที่สุดสามารถสอนเราเกี่ยวกับการจัดแสดงผลงานของเราได้อย่างไร
• วิธีสร้างข้อความรับรองจากแกลเลอรีอันน่าทึ่งด้วย Divi
• การสร้างสีเทาเป็นแกลเลอรีสีด้วย Divi Gallery Module
• ฟรี Divi Photo Gallery Layout Pack: 5 เค้าโครงหน้าแกลเลอรีอันน่าทึ่งในการดาวน์โหลดเดียวที่สะดวกสบาย
• การใช้โมดูล Divi Gallery เพื่อสร้างแกลเลอรีแบบเรียงต่อกันด้วย Custom Padding
• ฟรี Divi Blog Post Layout Pack จะนำบทความที่ขับเคลื่อนโดยตัวสร้างของคุณไปสู่อีกระดับ
• ความลับในการออกแบบเลย์เอาต์กริดที่เสียหายใน Divi
• วิธีการออกแบบเลย์เอาต์แนวทแยงที่ไม่ซ้ำกับ Divi

เราต้องการได้ยินจากคุณ เว็บไซต์ใดต่อไปนี้ที่มีหน้าโครงการที่ยอดเยี่ยมเป็นรายการโปรดของคุณ แจ้งให้เราทราบในความคิดเห็น.

ภาพเด่นผ่าน PODIS / shutterstock.com