تسليط الضوء على منتج Divi: Ultimate Divi Module UI Kit

Ultimate Divi Module UI Kit هو منتج Divi Marketplace الذي يقدم 2000+ تخطيطات معدة مسبقًا لجعل تصميم موقع Divi التالي الخاص بك أمرًا سهلاً. يقدم المنتج عنا أقسامًا وأنماط جدول الأسعار وتخطيطات نماذج الاتصال وأنماط الأزرار وحتى بعض تخطيطات مواقع الويب المكونة من صفحة واحدة والتي يمكن تخصيصها بالكامل. في هذا المنتج المميز ، سنلقي نظرة فاحصة على The Ultimate Divi Module UI Kit ونساعدك على تحديد ما إذا كان المنتج المناسب لمشروعك التالي.

هيا بنا نبدأ!

تثبيت Ultimate Divi Module UI Kit

تأتي Ultimate Divi Module UI Kit كملف ZIP يحتوي على ملفات Divi Library .json. لتثبيت التخطيطات ، ابدأ بفك ضغط الملف. بعد ذلك ، افتح لوحة معلومات WordPress الخاصة بك وانتقل إلى صفحة مكتبة Divi.

انقر فوق استيراد وتصدير في الجزء العلوي ، ثم حدد علامة التبويب استيراد. اختر ملف التخطيط ، ثم حدد استيراد تخطيطات Divi Builder.

بمجرد استيراد التخطيط ، افتح صفحتك في Divi Builder. انقر فوق أيقونة علامة الجمع الزرقاء لإضافة قسم جديد ، ثم حدد إضافة من المكتبة.

حدد موقع التخطيط الخاص بك ، ثم انقر فوق الزر استخدام هذا القسم لتحميل التخطيط.

Ultimate Divi Module UI Kit

تأتي مجموعة Ultimate Divi Module UI Kit مع أكثر من 2000 تخطيط ، لذلك لن نتمكن من تغطية كل شيء. سنلقي نظرة على بعض التصميمات من كل فئة حتى تتمكن من الحصول على فكرة أفضل عما يقدمه هذا المنتج وما إذا كان هو الشراء المناسب لك.

وحدات الجدولة

هناك 400 نمط مختلف لوحدات علامات التبويب ، مع 100 نمط لعلامة التبويب السفلية ، و 100 نمط افتراضي لعلامة التبويب ، و 100 نمط علامة تبويب أفقية ، و 100 نمط علامة تبويب رأسية. تتميز جميع وحدات علامات التبويب برسوم متحركة تحوم على عناوين علامات التبويب وتأثير انتقال علامة التبويب. سأعرض لكم بعض الأمثلة لكل نمط من علامات التبويب.

فيما يلي أنماط علامة التبويب السفلية 1 و 79.

هذا هو النمط 9 و 38 في تخطيط علامة التبويب الافتراضي.

التالي هو التخطيط الرأسي الأيمن ، مع الأنماط 14 و 52. هذا التخطيط يسمى أفقي في ملفات المنتج.

أخيرًا ، هذا هو التخطيط الأيسر العمودي ، المسمى عموديًا في ملفات المنتج. هذا هو النمط 71 والأسلوب 95.

هناك مجموعة متنوعة من الأنماط والتخطيطات للاختيار من بينها ، ويمكن تخصيص جميع علامات التبويب بسهولة باستخدام المحتوى الخاص بك وخيارات التصميم.

وحدات Blurb

هناك 100 نمط دعاية دعاية في المجموع. يتميز كل نمط دعاية مغالى فيها بنوع من تأثير التمرير. دعونا نلقي نظرة على القليل بالتفصيل.

هذا نمط دعاية مغالى فيها 4. عند التمرير ، يتحول الشريطان الزهريان إلى الوضع الرأسي ، وتتحول خلفية الأيقونة إلى اللون الوردي ، ويوجد حد ظل وردي.

يحتوي نمط Blurb 9 على شريطين للخلفية يقومان بتحويل الألوان والزوايا عند المرور فوقها. تتغير خلفية الرمز أيضًا عند التمرير.

يتميز Blurb 40 بحد أخضر سميك وأيقونة تنقلب عند المرور فوقها.

أخيرًا ، يتغير نمط الدعاية الدعاية 50 إلى اللون الأحمر عند التمرير ، وتتحول علامة التبويب الموجودة في الأعلى التي تحتوي على الرمز إلى اليمين.

وحدات الشخص

يوجد 150 نمطًا مختلفًا لوحدة الأشخاص.

نمط وحدة الشخص 7 له نظام ألوان أخضر وأيقونات وسائط اجتماعية تتحرك لأعلى في تشكيل شبكة فوق تراكب أخضر عند التمرير.

يتميز النمط 34 بالاسم والموضع بحد برتقالي. عند التمرير ، تتحرك المعلومات لأعلى وفوق الصورة ، ويتم الكشف عن أيقونات الوسائط الاجتماعية.

هذا تخطيط 46. يظهر الاسم والموضع على مربع أبيض أسفل الصورة. عند التمرير ، يتم توسيع المربع ليكشف عن أيقونات الوسائط الاجتماعية.

يحتوي التخطيط 127 على تخطيط صورة بسيط. عند التمرير ، يتم الكشف عن الاسم والموضع وأيقونات الوسائط الاجتماعية.

وحدات المدونة

يوجد إجمالي 100 وحدة مدونة ، مع 50 نمط عرض شبكي و 50 نمط عرض قائمة. دعونا نلقي نظرة على اثنين من كل نمط.

يعرض تخطيط الشبكة 3 صورة المنشور والتفاصيل على بطاقة مع التاريخ على علامة تبويب في الأعلى. عند التمرير ، يظهر زر قراءة المزيد ويظهر تراكب بأيقونة فوق الصورة.

يتميز تخطيط الشبكة 40 ببطاقة تحتوي على معلومات المنشور وزر قراءة المزيد يتراكب على الصورة المميزة. عند التمرير ، يظهر تراكب داكن فوق الصورة.

يتميز تخطيط عرض القائمة 7 بمعلومات المنشور وزر قراءة المزيد على بطاقة بها الصورة على اليسار. التاريخ في مربع أزرق فوق الصورة.

يتميز تخطيط عرض القائمة 18 بتخطيط أكثر قتامة مع صورة على اليسار ونشر المعلومات على اليمين. عند التمرير ، تتحرك البطاقة لأعلى قليلاً وتتسع الصورة.

أقسام عنا

يوجد 100 قسم من تصميماتنا.

هذا هو نمط التخطيط 7. يحتوي على بعض النصوص على اليسار ، بالإضافة إلى بعض الميزات المميزة بالأيقونات. يوجد زر "اتصل بنا" أسفل هذا ، وصورة على اليمين.

يحتوي هذا القسم ذو العرض الكامل على بعض النص في الأعلى وزر CTA وثلاثة عدادات للأرقام وصورة على اليمين.

تصميم السفر هذا هو نمط 17. يتميز بصورة كبيرة على اليسار وبعض النص وأيقونة على اليمين. يوجد أدناه أربع صور يتم تكبيرها عند المرور بالماوس وتفتح في مربع ضوئي عند تحديدها.

يتميز النمط 61 ببعض النص على اليسار ، وثلاث ميزات مميزة برمز علامة اختيار ، وصورة في المنتصف. على اليمين ، يمكنك العثور على مربع أصفر به ساعات وزر لحجز موعد.

وحدات التسعير

هناك 150 نمطًا لوحدة تسعير في المجموع.

يستخدم نمط وحدة التسعير 3 نظام ألوان باللونين الأسود والأخضر. عند التمرير ، يتوسع مربع التسعير ويتحول الرأس إلى اللون الأخضر.

هذه هي وحدة التسعير 29. عند التمرير ، يظهر سهم أحمر على يمين السعر ، ويتم تمييز عنوان الطبقة باللون الأحمر.

يتميز نمط وحدة التسعير 66 برأس يتحول إلى اللون الأرجواني عند التمرير.

يتميز التخطيط 72 بخلفية متدرجة.

وحدات التزكية

هناك 75 نمطًا مختلفًا لوحدة الشهادات تأتي مع UI Kit. وهنا عدد قليل.

هذا تخطيط الشهادة 5. يتميز بحد برتقالي وأيقونة اقتباس في الأعلى ، متبوعة بصورة الملف الشخصي ، والشهادة ، والاسم ، ومعلومات الوظيفة.

يتميز التخطيط 33 ببطاقة تحتوي على الشهادة والاسم والموضع والصورة على الجانب الأيسر. عند التمرير ، يتم تحديد البطاقة باللون الأخضر ، ويتحول خط الاسم إلى اللون الأخضر ، وتنقلب الصورة.

يتميز التخطيط 71 بصورة على اليسار فوق خلفية صورة كبيرة. على اليمين يوجد شريط تمرير للشهادة داخل مربع اقتباس.

أقسام نموذج الاتصال

هناك 100 قسم لنماذج الاتصال للاختيار من بينها. هنا ليست سوى عدد قليل.

التخطيط 1 هو تصميم بسيط يحتوي على بعض النصوص على اليسار ومعلومات اتصال مع بعض الرموز وأيقونات وسائل التواصل الاجتماعي ونموذج اتصال به زر أزرق.

يتميز التخطيط 29 بخريطة كبيرة في الأعلى ، متبوعة بالعنوان ، والهاتف ، ومعلومات البريد الإلكتروني على اليسار. على اليمين نموذج الاتصال.

يتميز تخطيط قسم جهات الاتصال 41 بصورة ذات تراكب أصفر. يوجد نص على اليسار مع زر CTA يسرد رقم الهاتف. نموذج الاتصال موجود على اليمين ، فوق تراكب أبيض.

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

أقسام الرسائل الإخبارية

هناك 25 قسمًا للاشتراك في النشرة الإخبارية.

يتميز النمط 2 ببعض نص العنوان ونموذج الاشتراك في البريد الإلكتروني على خلفية صورة المنظر.

يحتوي النمط 5 على صورة على اليسار وبعض نص العنوان على اليمين ، متبوعًا بنموذج تسجيل.

هذا هو تخطيط الرسالة الإخبارية 15. وهو يتميز ببعض نص العنوان على اليسار ، متبوعًا بنموذج تسجيل وبعض روابط الوسائط الاجتماعية. هناك صورة مستديرة على اليمين.

تخطيط 20 هو تصميم على غرار البطاقة ، مع صورتين على غرار البطاقة على كل جانب ونموذج التسجيل على بطاقة في المنتصف. يوجد رمز في الأعلى ، متبوعًا بنص العنوان والنموذج. يوجد في الجزء السفلي نص إخلاء مسؤولية صغير به رمز.

وحدات الأكورديون

هناك 40 نمط أكورديون في المجموع.

يتميز النمط 2 بالعنوان الأخضر ومحتوى الأكورديون في مربع رمادي. زر كل علامة تبويب على اليمين.

يستخدم نمط الأكورديون 8 علامات تبويب برتقالية ومربعات محتوى بيضاء. توجد أسهم سوداء تشير إلى علامة التبويب المفتوحة.

يتميز نمط الأكورديون 14 بعلامة تبويب نمط دائرية مع قسم محتوى أبيض.

أخيرًا ، يتميز النمط 36 بأيقونات أرجوانية مع كل علامة تبويب وله حدود أرجوانية توضع تحت علامة التبويب النشطة.

وحدات المنزلق

تأتي Ultimate Divi Module UI Kit مع 100 نمط وحدة منزلق.

يحتوي Slider 2 على بعض نصوص العنوان الكبيرة وزر CTA فوق صورة كبيرة المنظر مع تراكب داكن.

يتميز نمط شريط التمرير 31 أيضًا بنص العنوان وزر الحث على الشراء على صورة ذات تراكب داكن. توجد دائرة حمراء خلف نص العنوان.

يعد Slider 72 أكثر كثافة في المحتوى ، مع وجود شريط تمرير يغير محتوى النص في الأعلى وزر CTA أدناه. توجد ثلاثة مربعات محتوى أسفل هذا مع رمز وبعض نص الوصف.

أخيرًا ، يتميز تخطيط الشريحة 86 ببعض محتوى النص على اليسار والذي يغير كل شريحة ، بالإضافة إلى زري CTA. يوجد مقطع فيديو على اليمين ، متبوعًا بزر CTA آخر.

أقسام الخط الزمني

هناك 100 نمط زمني مختلف للاختيار من بينها.

يتميز نمط المخطط الزمني 4 ببطاقات بها رمز ونص لكل خطوة في المخطط الزمني.

بعد ذلك ، يحتوي المخطط الزمني 12 على رمز الخط الزمني على جانب واحد ونص وصف الخط الزمني على الجانب الآخر.

يتميز نمط الخط الزمني 32 بخط منقط به رموز لكل خطوة. يوجد نص الوصف داخل مربع يشير إلى الرمز المقابل.

المخطط الزمني 91 هو تخطيط بسيط يحتوي على رموز في المركز ونص وصف الخط الزمني على كل جانب.

تخطيطات صفحة واحدة

تأتي مجموعة أدوات واجهة المستخدم أيضًا مع 42 تخطيطًا مختلفًا لمواقع الويب من صفحة واحدة تغطي مجموعة متنوعة من الصناعات وحالات الاستخدام. سنلقي نظرة على اثنين منهم.

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

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

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

فيما يلي بعض مراجعات العملاء ، ثم قسم ميزات آخر يحتوي على رموز ونص وصف. يوجد جدول أسعار وقسم الأسئلة الشائعة وقسم CTA آخر مع توضيح وبعض المنشورات الأخيرة.

أخيرًا ، يوجد نموذج اتصال ومربع آخر يحتوي على معلومات الاتصال وروابط الوسائط الاجتماعية على خريطة كبيرة ، متبوعًا بالتذييل مع الشعار ، وروابط الوسائط الاجتماعية ، وعناصر القائمة ، ومعلومات الاتصال.

وحدات المحفظة

يوجد إجمالي 120 نمطًا للمحفظة - 40 نمطًا افتراضيًا للوحدة النمطية للمحفظة ، و 40 نمطًا للمحفظة قابلة للتصفية ، و 40 نمطًا لمحفظة العرض الدائري. دعونا نلقي نظرة على اثنين من كل نمط.

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

يستخدم تخطيط Portfolio 29 تخطيط شبكة مشابهًا ويتميز بتراكب يظهر عند التمرير مع سهم وردي وعنوان المشروع والسنة.

يتميز تخطيط الحافظة القابل للتصفية 2 بشريط تصفية برتقالي في الأعلى بالإضافة إلى شريط تنقل أسود في الأسفل. عند التمرير ، يظهر تراكب داكن مع العنوان وسنة المشروع.

يتميز تخطيط الحافظة القابل للفلترة 14 بشريط تصفية بأزرار زرقاء وشريط تنقل أسود في الأسفل. عند التمرير ، يتم الكشف عن تراكب أزرق ويتم تضمين العنوان والتاريخ داخل حد أبيض.

يتميز تخطيط محفظة Carousel 7 بسهمين باللون الأزرق على كل جانب للتنقل. عند التمرير ، يوجد تراكب على شكل أزرق ومعلومات المشروع.

يتميز التخطيط الدائري 11 بأسهم برتقالية للتنقل وشريحة برتقالية تحتوي على معلومات المشروع التي يتم الكشف عنها عند التمرير.

أقسام التذييل

هناك 100 قسم تذييل تأتي مع مجموعة واجهة المستخدم.

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

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

يحتوي التذييل 43 على نموذج تسجيل بريد إلكتروني في الأعلى. توجد عدة أعمدة لعناصر القائمة ، وبعض معلومات الاتصال ، وشعارات الدفع ، ومعلومات حقوق النشر.

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

وحدات بار عداد

هناك 50 نمطًا مختلفًا لعدادات البار للاختيار من بينها.

يتميز النمط 3 بخطوط شريطية زرقاء مع مؤشر نسبة أسود.

يحتوي النمط 13 على عنوان على أقصى اليسار ويتم تمييز النسبة بخلفية حمراء داكنة في نهاية الشريط.

نمط عداد الشريط 32 له تصميم مستدير مع عنوان على اليسار والنسبة المئوية داخل الشريط.

أخيرًا ، يحتوي المخطط 37 على عنوان أعلى الشريط ونهايات مستديرة وقسم مستدير في نهاية كل شريط يحتوي على النسبة المئوية.

أقسام معلومات الصندوق

هناك 50 أنماط معلومات الصندوق.

يتميز تخطيط قسم معلومات المربع 2 بصورة ذات حد أبيض ونص عنوان أزرق ونص وصف وزر حث على اتخاذ إجراء. يقوى الظل حول الصندوق عند التحويم.

يتميز النمط 6 بصورة ذات زوايا دائرية وأيقونة ونمطين لنص العنوان وزر قراءة المزيد. عند التمرير ، ينتقل الصندوق لأعلى.

يتميز نمط المربع 11 بأيقونة في الجزء العلوي فوق صورة كبيرة وبطاقة تحتوي على العنوان والنص الأساسي. عند التمرير ، يظهر تراكب داكن فوق الصورة ، ويتغير لون الحد السفلي إلى اللون الأسود ، ويظهر زر علامة الجمع.

يتميز التخطيط 47 بصورة وأيقونة ونص. عند التمرير ، يظهر تراكب أسود وحد أبيض فوق الصورة ويتم تكبير الصورة بزاوية طفيفة. تنخفض حاوية الرمز وتتغير الخلفية إلى اللون الأسود. أخيرًا ، تتحول خلفية النص إلى اللون البرتقالي.

أقسام المهارة

يوجد إجمالي 50 قسمًا للمهارات.

يتميز تخطيط قسم المهارة 7 بصورة كبيرة على اليمين وبعض النصوص وشريط المهارات وعدادات الأرقام على اليسار.

يحتوي قسم المهارات 17 على نص وشريط مهارات وقسمين دعاية مع رموز على اليسار. على اليمين صورتان.

يتميز تخطيط المهارة 21 بصورة وبعض النصوص وزرًا على اليسار. على اليمين قسمان نصيان آخران ، متبوعين بشريط المهارات.

هذا تخطيط 38. يحتوي على صورة مع مربع نص متراكب على اليسار. على اليمين ، يمكنك العثور على بعض نص العنوان والنص الأساسي وأشرطة المهارات مع الأسهم.

أزرار

أخيرًا ، هناك 150 نمطًا إجماليًا للأزرار ، مع 100 نمط زر عادي و 25 نمط زر مزدوج.

هذا هو نمط الزر العادي 30. عند التمرير ، تظهر خلفية وردية ويتغير لون النص إلى الأبيض.

يتميز نمط الزر العادي 116 بصندوق وردي صغير يتمدد عند المرور فوق الزر لملء خلفية الزر. يتغير النص أيضًا إلى اللون الوردي عند التمرير.

يتميز نمط الزر المزدوج 3 بشريط يتحرك إلى الأعلى أو الأسفل عند التمرير.

يتميز نمط الزر المزدوج 7 بخلفية داكنة تتحرك لأسفل عند التمرير وتصبح حدًا سفليًا. يظهر رمز أيضًا عند التمرير.

شراء Ultimate Divi Module UI Kit

تتوفر مجموعة Ultimate Divi Module UI Kit في سوق Divi. يكلف 49.59 دولارًا للاستخدام غير المحدود للموقع والتحديثات مدى الحياة. يشمل السعر أيضًا ضمان استرداد الأموال لمدة 30 يومًا.

افكار اخيرة

تأتي مجموعة Ultimate Divi Module UI Kit بعدد مذهل من التخطيطات مع مجموعة متنوعة من الأنماط وحالات الاستخدام. كل شيء قابل للتخصيص مع خيارات Divi ، ويمكن تعديل أي من المخططات لتناسب تصميم مشروعك التالي. إذا كنت تبحث عن حزمة تخطيط شاملة يمكن أن تساعدك في توفير الوقت في تصميمك التالي ، فقد يكون هذا المنتج مناسبًا لك. كنا نحب أن نسمع منك! هل جربت The Ultimate Divi Module UI Kit؟ أخبرنا برأيك في التعليقات!