معرض تصميم Divi: عمليات التقديم الجديدة من أكتوبر 2019

نشرت: 2019-11-03

لقد حان ذلك الوقت مرة أخرى! حان الوقت لعرض Divi الشهري ، حيث نلقي نظرة على عشرة مواقع Divi مذهلة صنعها أعضاء مجتمعنا. نعرض كل شهر أفضل مواقع Divi التي تم إرسالها من مجتمعنا واليوم نريد أن نشارك معك أفضل عشرة مواقع لشهر أكتوبر. خلال المنشور ، سأشير إلى بعض ميزات التصميم المفضلة لدي والتي تجذبني إلى كل موقع من مواقع الويب.

آمل انك احببتهم!

معرض تصميم Divi: عمليات التقديم الجديدة من أكتوبر 2019

1. الروبوتات مقابل السلبيات

تم تقديم هذا الموقع بواسطة Wade McMaster. يستخدم الموقع لوحة ألوان داكنة مع نص باللونين الأبيض والأزرق الفاتح وإبرازات في جميع الأنحاء. القائمة ضئيلة ويتم فصلها عن قسم البطل بخط أزرق. يعرض قسم الأبطال صورة خلفية مع شعار الموقع ووصفه بنص كبير. يعرض قسم "حول" المعلومات في عمودين. يعجبني قسم المدونة ، الذي يتم عرضه في المنظر فوق صورة خلفية مع تراكب على غرار. يعرض آخر منشور مدونة مع نص على جانب واحد كحث على اتخاذ إجراء لرؤية المدونة ومنشور مدونة على الجانب الآخر في تصميم البطاقة. تعرض صفحات الخلفيات والمدونة منشورات المدونة برأس وصورة خلفية وشريط جانبي. صفحة الاشتراك مثيرة للاهتمام أيضًا. يعرض نموذج الاشتراك باعتباره CTA مع رموز نقطية على جانب واحد لإظهار فوائد الاشتراك. تعرض الصفحات تصميم قائمة مختلفًا عن الصفحة الرئيسية.

زيارة الموقع

2. تطابق وسائل الإعلام التصميم

تم تقديم هذا الموقع بواسطة Sam Nicholson. يعرض الموقع فيديو خلفية بملء الشاشة مع طبقة متدرجة. تُظهر المقدمة الشعار وتصميمات الخطوط. يتم تكبير الشعار عند التمرير ويختفي عنصران من عناصر الخط لإنشاء تأثير تحوم مثير للاهتمام. العنصر الأكثر إثارة للاهتمام هو الطريقة التي يستخدم بها الموقع فواصل الأقسام. يضع صورة خلفية خلف الحاجز ثم يضع تدرجًا فوقها. يتم وضع عدادات الأرقام أو عدادات الدائرة فوقها. يستخدم الموقع الكثير من التدرجات والنصوص ذات الأنماط للمطابقة. تتضمن الأزرار نفس التدرجات اللونية للخلفيات. يتم عرض الخدمات بتنسيق بديل وتتضمن صورًا تميل عند المرور فوقها. يتضمن قسم الوظائف وقسم جهات الاتصال نفس تأثير الإمالة. لديها الكثير من الرسوم المتحركة الصغيرة مثل الخطوط التي تميل إلى مكانها عند التحميل. يشتمل الموقع أيضًا على زر من أعلى إلى أعلى وشريط تمرير مصمم ، والذي أود أن أراه يصبح ممارسة قياسية لتصميم الويب.

زيارة الموقع

3. خاصية Pop

تم تقديم هذا الموقع بواسطة Kaelynn Midgley. يعرض تدرج خلفية كامل العرض مع CTA على جانب واحد وصورة داخل جهاز محمول على الجانب الآخر. يكشف التمرير عن معلومات على جانب واحد مع CTA وصور للخصائص على الجانب الآخر مع صورة واحدة موضوعة داخل مخطط كمبيوتر محمول. تستمر التصاميم المماثلة في جميع أنحاء الموقع. المفضل لدي هو القسم الخاص بالمجتمع. يتضمن تخطيطًا من عمودين مع صورة خلفية متداخلة مع دعاية مغالى فيها تتضمن صورة ونصًا وزرًا ومعلومات على الجانب الآخر. تعرض صفحة How it Works (كيف تعمل) كل خطوة في وضع ملء الشاشة بلون خلفية مختلف لكل خطوة. تعجبني أيضًا صفحة المدونة ، والتي تتضمن قسمًا خاصًا بالبطل ، ونصًا للمعلومات ، ومقسمًا ، ثم منشورات المدونة. تضيف المنشورات ظل مربع للصورة المميزة. تتضمن القائمة CTA.

زيارة الموقع

4. الوطن

قدم هذا الموقع من قبل جيروم بيستل. يتضمن الكثير من الرسومات في جميع أنحاء الموقع بدءًا من قسم البطل ، والذي يعرض رسمًا كبيرًا على أحد الجانبين و CTA على الجانب الآخر. يُظهر التمرير قسمًا من عمودين مع رسم أصغر على أحد الجانبين مع زر اتصال قابل للنقر ومعلومات على الجانب الآخر. يتناوب هذا التصميم أسفل الصفحة أثناء التمرير. يتم توفير معلومات أخرى داخل دعاية. يسمح لك شريط التمرير بتحريك المؤشر وتحديد السعر. يتم توفير معلومات عن الفريق مع دعاية مغالى فيها وتتضمن رسومات للصور. يستخدم الموقع تصميمًا بسيطًا والكثير من اللون الأزرق للنصوص والخلفيات لجذب الجمهور المستهدف. تتبع كل صفحة تصميمًا مشابهًا ولكن لا تزال تحتوي على شيء فريد. تتضمن القائمة CTA جهة اتصال ورابط مكالمة قابل للنقر. تعجبني بشكل خاص الرسومات الكبيرة في أقسام الأبطال في كل صفحة.

زيارة الموقع

5. ChangeUp للأعمال الخيرية

قدم هذا الموقع ديكون كينت. يحتوي على تدرج خلفي كامل العرض مع رسم على جانب واحد خلف CTA ومجموعة من الصور على الجانب الآخر تُظهر التطبيق على الهواتف المحمولة. تعرض الأقسام القليلة التالية نصًا به فاصل وعنوان أزرق على اليسار وهاتف ذكي مع صورة للتطبيق والرسومات المحيطة على اليمين. يتم وضع النص والرسومات في مكانها أثناء التمرير. يعرض شريط التمرير الشعارات فوق خلفية منقوشة بتدرج لوني. يشتمل شريط تمرير الشهادة كامل العرض على الصورة والشهادة والتنقل عبر النقطة والسهم فوق الخلفية الزرقاء التي تتطابق مع الموقع. يتم توفير المعلومات داخل الدعاية التي تتضمن رموزًا محاطة بدائرة تتطابق مع تصميم الموقع. يستخدم الموقع بشكل ممتاز الألوان والتدرجات ذات العلامات التجارية الزرقاء والخضراء.

زيارة الموقع

6. Rebbl

قدم هذا الموقع ديكون كينت. يستخدم هذا الموقع قائمة ضخمة مثيرة للاهتمام مع نص أصغر أسفل النص الرئيسي. يؤدي التمرير فوق أحد الروابط إلى فتح القائمة للكشف عن المزيد من الروابط والصور. يُظهر القسم الأول من الصفحة الرئيسية صورة كاملة العرض مع وجود مساحة على جانب واحد للحث على اتخاذ إجراء والمنتجات على الجانب الآخر. يكشف التمرير عن عبارة CTA كاملة العرض توضح المنتج وتوفر رابطًا إلى المتجر. يعرض قسم المدونة الفئات كبطاقات مدونة. يؤدي النقر فوق أحدها إلى فتح صفحة أرشيف فئة المدونة هذه. يتم تقديم منشورات المدونة في بطاقات كبيرة مع تركز الفئة بين الصورة والمقتطف. يعرض نموذج الاشتراك الصغير النص والنموذج على نمط الخلفية. يتم عرض المعلومات المتعلقة بالشركة والمنتجات في قسم من عمودين مع عبارات حث المستخدم على اتخاذ إجراء كبيرة. أنا أحب الفيديو CTA الذي يعرض فيديو في الخلفية بعنوان وزر في التراكب. يوفر شريط تمرير Instagram المضمن معلومات حول التمرير ويفتح المعلومات بنقرة نمطية.

زيارة الموقع

7. شباب ، تكلموا!

تم تقديم هذا الموقع بواسطة Michal Teska. إنه تخطيط من صفحة واحدة يعرض صورة خلفية بملء الشاشة في اختلاف المنظر مع تراكب شديد الغموض. يتضمن التراكب شعارًا ورسمًا. تحتوي جميع الأقسام على تخطيط من عمودين مع وجود نص في الخلفية في اختلاف المنظر مع رسم في المقدمة ونص على الجانب الآخر. يتناوب هذا التصميم أثناء التمرير. يحتوي أحد هذه الأقسام على مفاتيح تبديل مصممة لتتناسب مع الموقع. يتم إنشاء معلومات حول الأشخاص المعنيين باستخدام دعاية مغالى فيها صورة مصغرة على اليسار واسمهم وموقعهم على اليمين. تظهر شعارات الشركاء بتدرج الرمادي وتتغير إلى اللون عند المرور فوقها.

زيارة الموقع

8. AWEOS

قدم هذا الموقع كريستوس بابادوبولوس. تخلق الخلفية المتحركة تأثير إعداد تحت سطح البحر برسومات كرتونية. يوجد CTA مع شعار وصورة متحركة فوق الخلفية. تكشف القائمة الضخمة عن ثلاثة أعمدة من الروابط والصور. يوفر القسم التالي معلومات ويتضمن رابط مكالمة قابل للنقر ورابط استشارة. يظهر أعضاء الفريق مع صورة واسم ولقب ووصف وزر لسماع رسالة صوتية من هذا الشخص. يتم عرض الخدمات ضمن دعاية تتضمن رموزًا أسفل النص. تعرض صفحة المشروع أمثلة داخل بطاقة يتم تمريرها فوقها. تتبع كل صفحة من صفحات الخدمات تصميمًا مشابهًا ، يتضمن رأسًا مع وصفًا ورابطًا ، متبوعًا بمعلومات مفصلة. تتبع صفحة المدونة والمشاركات تصميمًا مشابهًا للرأس.

زيارة الموقع

9. مارسي أنجيليس

قدم هذا الموقع مارسي أنجيليس. يظل الرأس والتذييل على الشاشة أثناء التمرير. إنها شفافة ، لذا يظهر التخطيط من خلالها. تعرض الصفحة الرئيسية خلفية زرقاء والعديد من الصور لعينات العمل. يؤدي النقر فوق صورة إلى فتح صفحة المشروع حيث يمكنك رؤية تفاصيل المشروع. يتم عرض كل واحد كمنشور مدونة ويتضمن صورة مميزة ووصفًا وصورًا والتنقل إلى المشاركات السابقة والتالية ونموذج اتصال. لا يظل التذييل معروضًا على الشاشة في صفحات المشروع. يحتوي الرأس والتذييل على تصميم بسيط ونظيف. يتضمن العنوان روابط لمواقع أخرى بواسطة المالك ، والتي تستخدم ألوانًا ناعمة متشابهة مثل هذا الموقع. يتضمن التذييل روابط لوسائل التواصل الاجتماعي. كلاهما له خطوط تفصلهما عن جسم الموقع.

زيارة الموقع

10. ATG أوروبا

تم تقديم هذا الموقع بواسطة Camiel Bos. يعرض رأس ملء الشاشة مقطع فيديو في الخلفية مع عنوان وشعار في الزاوية اليسرى السفلية من الشاشة. يحتوي على قائمة ضخمة ويعرض روابط ومنشورات عند المرور فوقها. عند التمرير ، ترى أن القائمة تتحول إلى اللون الأبيض ولها حافة منحنية وتعكس الجزء السفلي من قسم الفيديو. يتم توفير المعلومات في القسم التالي وتتضمن رسمًا يطابق موضوع الموقع. يتم عرض الصناعات التي يتم تقديمها والحلول والخدمات داخل الصور في اختلاف المنظر. تعرض جهة اتصال CTA العنوان والزر فوق صورة الخلفية وتتضمن فواصل أقسام منحنية للأعلى والأسفل لإنشاء تصميم مثير للاهتمام. يستخدم الموقع الكثير من الفواصل المصممة وأنماط الخلفية والعناصر المتداخلة التي تبرز بشكل جيد مع الاحتفاظ بتصميم نظيف. الموقع يستخدم الصور والألوان بشكل ممتاز.

زيارة الموقع

استنتاج

هذا هو أفضل 10 عمليات تقديم لموقع Divi الخاص بالمجتمع لشهر أكتوبر. تبدو هذه المواقع مذهلة وكما هو الحال دائمًا نريد أن نشكر الجميع على مشاركاتك!

إذا كنت ترغب في النظر في تصميمك الخاص ، فلا تتردد في إرسال بريد إلكتروني إلى محررنا في nathan at Elegant theme dot com. تأكد من جعل موضوع البريد الإلكتروني "DIVI SITE SUBMISSION".

نود أيضًا أن نسمع منك في التعليقات! أخبرنا بما يعجبك في هذه المواقع ، وإذا كان هناك أي شيء فعلوه ، فأنت تريد منا تعليمه على المدونة.

الصورة الرئيسية عبر ProStockStudio / shutterstock.com