Divi Design Showcase: ผลงานใหม่ตั้งแต่เดือนตุลาคม 2019

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

ฉันหวังว่าคุณจะชอบพวกเขา!

Divi Design Showcase: ผลงานใหม่ตั้งแต่เดือนตุลาคม 2019

1. บอท vs ข้อเสีย

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

เข้าไปดูในเว็บไซต์

2. จับคู่สื่อการออกแบบ

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

เข้าไปดูในเว็บไซต์

3. พร็อพเพอร์ตี้ป๊อป

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

เข้าไปดูในเว็บไซต์

4. บ้านเกิด

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

เข้าไปดูในเว็บไซต์

5. ChangeUp เพื่อการกุศล

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

เข้าไปดูในเว็บไซต์

6. Rebbl

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

เข้าไปดูในเว็บไซต์

7. เยาวชน พูดขึ้น!

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

เข้าไปดูในเว็บไซต์

8. AWEOS

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

เข้าไปดูในเว็บไซต์

9. Marci Angeles

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

เข้าไปดูในเว็บไซต์

10. เอทีจี ยุโรป

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

เข้าไปดูในเว็บไซต์

บทสรุป

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

หากคุณต้องการพิจารณาการออกแบบของคุณเอง โปรดส่งอีเมลถึงบรรณาธิการของเราที่ nathan at elegant themes dot com ตรวจสอบให้แน่ใจว่าได้กำหนดหัวเรื่องของอีเมลว่า "การส่งเว็บไซต์ DIVI"

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

ภาพคุณสมบัติผ่าน ProStockStudio / shutterstock.com