نظرة عامة على أنواع رأس Divi والبرامج التعليمية والمجانية

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

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

اكتشف أنواع الرؤوس
اكتشف نصائح وحيل الرأس
اكتشف رأس المجانية

أنواع الرأس

1. رأس منتظم

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

زيارة البرنامج التعليمي

2. رأس مثبت

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

زيارة البرنامج التعليمي

3. رأس ملء الشاشة

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

1. قالب رأس وتذييل شركة العلاقات العامة
2. قالب رأس وتذييل مطعم إيطالي
3. نموذج رأس وتذييل الكاتب المستقل
4. نموذج رأس وتذييل المستشار المالي

زيارة البرنامج التعليمي

4. رأس الشريحة

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

زيارة البرنامج التعليمي

5. حرك رأس الدفع لأسفل

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

زيارة البرنامج التعليمي

6. التنقل العمودي

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

زيارة البرنامج التعليمي

7. رأس عائم شفاف

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

زيارة البرنامج التعليمي

8. رأس لاصق شفاف

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

زيارة البرنامج التعليمي

9. رأس مستدير

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

زيارة البرنامج التعليمي

10. قائمة منسدلة للتجارة الإلكترونية المخصصة

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

زيارة البرنامج التعليمي

11. القائمة المنسدلة "السمات الأنيقة المخصصة"

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

زيارة البرنامج التعليمي

نصائح وخدع

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

1. الكشف عن الرأس وإخفائه في التمرير

زيارة البرنامج التعليمي

2. القائمة المتداخلة القابلة للطي للجوال

زيارة البرنامج التعليمي

3. تحريك رأسك العالمي

زيارة البرنامج التعليمي

4. إضافة نموذج تسجيل الدخول إلى العنوان الخاص بك

زيارة البرنامج التعليمي

5. إضافة اثنين من الأزرار جنبًا إلى جنب إلى رأسك

زيارة البرنامج التعليمي

6. وضع رأس الصفحة تلقائيًا أسفل القسم الأول من كل صفحة

زيارة البرنامج التعليمي

7. إضافة نموذج اتصال منسدلة إلى العنوان الخاص بك

زيارة البرنامج التعليمي

8. مبادلة رأسك على التمرير

زيارة البرنامج التعليمي

9. تحسين وحدة قائمة Divi مع 5 إعدادات مسبقة عالمية

زيارة البرنامج التعليمي

10. إضافة تسميات ركن إلى عناصر القائمة داخل رأسك

زيارة البرنامج التعليمي

11. إضافة وتحريك شعار SVG داخل رأس الصفحة

زيارة البرنامج التعليمي

12. مزج رأسك وصفحاتك مع فواصل قسم ديفي

زيارة البرنامج التعليمي

13. إضافة عنوان موقع ديناميكي وسطر شعار إلى العنوان الخاص بك

زيارة البرنامج التعليمي

14. تحسين شعار موقع Divi الخاص بك باستخدام الإعدادات المسبقة العالمية

زيارة البرنامج التعليمي

15. إضافة شريط صوتي ثابت "أحدث حلقة" إلى رأسك

زيارة البرنامج التعليمي

16. إضافة الرسوم المتحركة زر تأخير إلى رأس CTA الخاص بك

زيارة البرنامج التعليمي

17. تغيير شعارك اللاصق في التمرير

زيارة البرنامج التعليمي

رأس المجانية

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

1. حزم منشئ السمات

حزمة منشئ السمات # 1

زيارة البرنامج التعليمي

حزمة منشئ السمات # 2

زيارة البرنامج التعليمي

حزمة منشئ السمات # 3

زيارة البرنامج التعليمي

حزمة منشئ السمات # 4

زيارة البرنامج التعليمي

حزمة منشئ السمات # 5

زيارة البرنامج التعليمي

حزمة منشئ السمات # 6

زيارة البرنامج التعليمي

2. تصميم حزمة رأس وتذييل الهدايا المجانية

حزمة تخطيط مطعم إيطالي

زيارة البرنامج التعليمي

حزمة تخطيط المساعد الظاهري

زيارة البرنامج التعليمي

حزمة تخطيط مساحة العمل المشترك

زيارة البرنامج التعليمي

حزمة تخطيط تنظيف النوافذ

زيارة البرنامج التعليمي

حزمة تخطيط التارو

زيارة البرنامج التعليمي

حزمة تخطيط الرسام

زيارة البرنامج التعليمي

حزمة تخطيط مستلزمات الحيوانات الأليفة

زيارة البرنامج التعليمي

حزمة تخطيط منتجات التجميل

زيارة البرنامج التعليمي

حزمة تخطيط مدرسة الطبخ

زيارة البرنامج التعليمي

حزمة تخطيط العطور

زيارة البرنامج التعليمي

حزمة تخطيط مطعم السوشي

زيارة البرنامج التعليمي

حزمة تخطيط العلاج العشبي

زيارة البرنامج التعليمي

حزمة تخطيط التجديد

زيارة البرنامج التعليمي

حزمة تخطيط الروبوتات

زيارة البرنامج التعليمي

حزمة تخطيط المعالج الشامل

زيارة البرنامج التعليمي

حزمة تخطيط متجر التوابل

زيارة البرنامج التعليمي

حزمة تخطيط المفروشات

زيارة البرنامج التعليمي

حزمة تخطيط شركة العلاقات العامة

زيارة البرنامج التعليمي

حزمة تخطيط مدرب اللياقة البدنية

زيارة البرنامج التعليمي

حزمة تخطيط مصور الزفاف

زيارة البرنامج التعليمي

حزمة تخطيط أخصائي التغذية

زيارة البرنامج التعليمي

حزمة تخطيط الكاتب المستقل

زيارة البرنامج التعليمي

حزمة تخطيط المترجم الفوري

زيارة البرنامج التعليمي

حزمة تخطيط المستشار المالي

زيارة البرنامج التعليمي

حزمة تخطيط صالون الأظافر

زيارة البرنامج التعليمي

حزمة تخطيط المؤثر

زيارة البرنامج التعليمي

حزمة تخطيط شركة الجلود

زيارة البرنامج التعليمي

حزمة تخطيط الوخز بالإبر

زيارة البرنامج التعليمي

3. أخرى

الحد الأدنى كومبو الرأس والتذييل

زيارة البرنامج التعليمي

البحث عن رؤوس جديدة في مدونتنا

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

افكار اخيرة

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

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