يعد Divi أحد أكثر السمات شيوعًا في WordPress لسبب بسيط - فهو يمكّنك من إنشاء موقع ويب بدون تشفير أو تعيين مطور. كل ما عليك فعله هو سحب العناصر وإفلاتها عبر موقع الويب الخاص بك وتكون قد انتهيت!

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

لهذا السبب في هذه المقالة ، سوف نعرض لك 20 من افضل البرامج التعليمية لقالب DIVI لموقع ووردبريس الخاص بك للتحقق منها!

من اين احصل على افضل البرامج التعليمية لقالب DIVI على مستوى الخبراء لموقع WordPress الخاص بي :

1. Elegant Themes Blog: يوفر مقالات ودروس ومقاطع فيديو.
2. Divi Space: يوفر دروسًا تعليمية ومقاطع فيديو.
3. Divi Academy: يحتوي على دورات تدريبية متعددة.
4. Udemy: يوفر العديد من الدورات التدريبية بأسعار معقولة.
5. YouTube: يمكن البحث عن الفيديوهات التعليمية.

لنبدأ عرض افضل البرامج التعليمية.

1. Divi Overlay

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

تحقق من البرنامج التعليمي Divi Overays هنا.

2. تمرير قناع نص Divi

قناع النص هو ميزة أخرى لتصميم المحتوى والصورة. إنه تصميم رائع حيث يتم عرض الصورة في شكل نص. يكون الأمر أكثر برودة عند إقران الميزة بتأثير خاص - مثل تأثيرات التمرير.

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

تحقق من البرنامج التعليمي التمرير لقناع نص Divi هنا.

3. إنشاء قائمة دفع لأسفل

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

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

تحقق من البرنامج التعليمي لقائمة الضغط المنزلق لأسفل هنا.

4. تسمية ركن مميزة  

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

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

تحقق من البرنامج التعليمي لتسمية الزاوية المميزة هنا.

5. تصميم نص مجردة

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

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

تحقق من البرنامج التعليمي لتصميم النص المجرد هنا.

6. خلفية النص الملونة

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

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

تحقق من البرنامج التعليمي لخلفية النص الملون هنا.

7. نقل فواصل القسم

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

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

تحقق من البرنامج التعليمي لتقسيم القسم المتحرك هنا.

8. توسيع دعاية القسم

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

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

تحقق من البرنامج التعليمي لقسم الدعاية الموسعة هنا.

9. نموذج تسجيل الدخول المضمن

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

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

تحقق من البرنامج التعليمي لنموذج تسجيل الدخول المضمن هنا.

10. نموذج الاشتراك في البريد الإلكتروني المضمن

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

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

تحقق من البرنامج التعليمي للاشتراك في البريد الإلكتروني المضمن هنا.

11. تبديل الوضع الداكن

هناك سبب يجعل جميع التطبيقات الشائعة تقريبًا بها الوضع المظلم - فهي تتحمل ضغطًا أقل على العينين (بالإضافة إلى المظهر الجيد حقًا). سيحبها العديد من زوارك إذا كان موقعك يحتوي على وضع مظلم يمكنهم التبديل إليه.

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

تحقق من البرنامج التعليمي لتبديل الوضع المظلم هنا.

12. قائمة CTA اللاصقة

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

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

تحقق من البرنامج التعليمي لقائمة CTA اللاصقة هنا.

13. تراكبات الصورة ذات الشكل المتدرج

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

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

تحقق من البرنامج التعليمي لتراكبات صورة التدرج اللوني هنا.

14. خلفية متدرجة متحركة

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

سيعلمك هذا البرنامج التعليمي التالي طريقتين حول كيفية إنشاء رسوم متحركة لخلفية متدرجة في Divi. سيتعين عليك التعامل مع القليل من التصميم mumbo jumbo (مقتطف CSS مخصص ووحدة الرسوم المتحركة).

تحقق من البرنامج التعليمي للرسوم المتحركة للخلفية المتدرجة هنا.

15. تغيير الخلفية المتدرجة

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

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

تحقق من البرنامج التعليمي لخلفية التدرج (عند التمرير) هنا.

16. تغيير النص والصور

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

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

تحقق من البرنامج التعليمي لتغيير النص والصور هنا.

17. الساعة المتحركة

إذا كان موقع الويب الخاص بك له علاقة بالوقت (والسرعة) ، فمن المحتمل أنك تستخدم نوعًا من الساعة أو رمز الساعة أو الرسومات. طالما أن التصميم يناسب موضوعك ، فإنه سيبدو رائعًا بالتأكيد.

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

تحقق من البرنامج التعليمي للساعة المتحركة هنا.

18. توسيع CTA

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

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

تحقق من توسيع البرنامج التعليمي للحث على اتخاذ إجراء هنا.

19. القائمة المنسدلة المتقدمة

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

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

تحقق من البرنامج التعليمي للقائمة المنسدلة المتقدمة هنا.

20. شريط الاتصال المحمول

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

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

تحقق من البرنامج التعليمي لشريط الاتصال المحمول هنا.

إتقان وحدات التصميم المتقدمة في Divi

من بين جميع منشئي الصفحات والقوالب الموجودة ، فإن Divi هي الوحيدة التي لديها هذه القدرة الكبيرة على تصميم موقع ويب بشكل جميل من البداية - لا حاجة إلى الترميز. هذه الدروس الـ 20 التي ذكرناها هنا ستأخذ تصميم موقع الويب الخاص بك من الصفر إلى البطل دون تعلم كيفية كتابة الرموز القصيرة و CSS.

ملاحظة المحرر: ظهرت نسخة من هذه المقالة في الأصل على darrelwilson .