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

سنبين لك أيضًا كيفية جعل شريط الترويج ثابتًا (أو مثبتًا).

ما تحتاجه للبدء

لتبدأ ، يجب عليك لتثبيت وتفعيل موضوع Divi . تأكد من أن لديك أحدث إصدار من Divi.

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

أنشئ شريط ترويج متحرك في أعلى قالب الصفحة

إنشاء قالب جديد

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme generator. ثم انقر فوق مربع "إضافة نموذج جديد" لإنشاء نموذج جديد.

قم بتعيين القالب إلى الصفحة (الصفحات) التي يجب أن يعرض شريط الترويج عليها.

في القالب الجديد ، انقر فوق مربع "إضافة نص مخصص" وحدد "إنشاء نص مخصص للجسم".

ملاحظة: نحن نضيف شريط الترويج إلى منطقة جسم النموذج (وليس الرأس) حتى يتمكن من العمل مع رأس Divi الافتراضي وكذلك جميع الرؤوس مخصص يمكنك إضافته لاحقًا.

ثم حدد خيار "البناء من الصفر".

إضافة شريط الترويج إلى النموذج

في محرر تخطيط القوالب ، يمكننا البدء في إنشاء شريط الترويج باستخدام Divi Builder.

ابدأ بإضافة صف من عمود واحد إلى القسم العادي.

إعدادات الخط

قبل إضافة وحدة نمطية ، قم بتحديث معلمات الصف على النحو التالي:

• التدرج الخلفي الأيسر: # 4a42ec
• التدرج الخلفي الأيمن: # 521d91
• اتجاه التدرج: 90deg
• استخدم عرض مزراب مخصص: نعم
• عرض مزراب: 1
• العرض: 100٪
• الحد الأقصى للعرض: 100٪
• مواد التنجيد: 0px في الأعلى ، 0px في الأسفل

هذا يدعم لون الخلفية وعرض شريط الترويج الذي ننشئه.

معلمات العمود

قبل الخروج من إعدادات الصف ، انقر لفتح إعدادات العمود. ثم أضف CSS المخصص التالي إلى عنصر العمود الرئيسي:

display: flex;align-items: center;justify-content: center;

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

نحن الآن جاهزون للإضافة محتويات إلى شريط الترويج.

إضافة وحدة Blurb

بالنسبة لمحتوى هذا المثال الترويجي ، سنضم وحدة عرض تقديمي بها أيقونة صغيرة ومدونة نصية بها زر على اليمين (يشبه إلى حد كبير شريط الترويج على Elegantthemes.com).

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

لمحتوى نص العرض التقديمي ، أدخل المعلومات التالية:

• العنوان: [أدخل نص الترويج]
• استخدم الأيقونة: نعم
• الرمز: رمز الهدية (انظر لقطة الشاشة)

قم بتحديث إعدادات تصميم العرض التقديمي كما يلي:

• لون الأيقونة: # ff4a9e
• صورة / موقع الرموز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم الخط رمز: 16px
• حجم عنوان النص: 16px (سطح المكتب) ، 14px (الهاتف)
• سطر العنوان Hewight: 1.3em
• أقصى عرض: 230px (الهاتف فقط)
• الحشو: أعلى 10px
• نمط الرسوم المتحركة: شريحة
• اتجاه الحركة: صحيح
• تأخير الرسوم المتحركة: 250 مللي ثانية

إضافة وحدة زر

ثم أضف وحدة زر أسفل وحدة Blurb. نظرًا للخاصية المرنة ، ستظهر الوحدة على يمين الدعاية بدلاً من أسفلها.

قم بتحديث معلمات تصميم الزر كما يلي:

• استخدام أنماط مخصصة لزر: نعم
• حجم نص الزر: 15px (سطح المكتب) ، 13px (الهاتف)
• لون نص الزر: #ffffff
• عرض حد الزر: 0px
• نصف قطر حد الزر: 20px
• وزن الخط: شبه جريئة

• الهامش (سطح المكتب): 20px على اليسار
• الهامش (الهاتف): 10px على اليسار
• مواد التنجيد (المكتب): 0px في الأعلى ، 0px في الأسفل
• الحشو (الهاتف): 2px في الأعلى ، 2px في الأسفل ، 8px في اليسار ، 8px في اليمين
• نمط الرسوم المتحركة: ترتد
• تأخير الرسوم المتحركة: 1000 مللي ثانية

إعدادات القسم

لاستكمال تصميم شريط الترويج ، قم بتحديث القسم الذي يحتوي على شريط الترويج كما يلي:

• مواد التنجيد: 0px في الأعلى ، 0px في الأسفل
• نمط الرسوم المتحركة: ترتد
• اتجاه الحركة: لأسفل
• مدة الرسوم المتحركة: 500 مللي ثانية
• تأخير الرسوم المتحركة: 250 مللي ثانية
• الرسوم المتحركة بدء التعتيم: 100٪
• Z- الفهرس: 999

إضافة وحدة نشر المحتوى كاملة العرض

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

بالنسبة للصفحات التي تم إنشاؤها (أو التي سيتم بناؤها) باستخدام Divi Builder ، ستحتاج إلى استخدام وحدة محتوى منشور بعرض كامل لتكبير منطقة المحتوى.

(ملاحظة: بالنسبة للصفحات التي تستخدم المحرر الافتراضي ، سترغب في استخدام تعديل محتوى المنشور القياسي في قسم عادي لتحقيق عرض أقصى مماثل يبلغ 1080 بكسل افتراضيًا.)

إضافة قسم العرض الكامل

ضمن القسم الذي يحتوي على شريط الترويج ، أضف قسمًا للعرض بالكامل.

إضافة وحدة نمطية للمحتوى بتنسيق Fullwidth

ثم حدد الوحدة النمطية Fullwidth Post Content.

إنه أكثر أو أقل من ذلك. تأكد الآن من التخطيط وحفظه قبل الخروج من المحرر.

ثم احفظ التغييرات الخاصة ببناء السمة.

نتيجة نهائية

أفانت

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

APRES

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

جعل شريط الترويجية لزجة

لكي يتم احتواء شريط الترويج أسفل الرأس الافتراضي لـ Divi ، يمكننا إضافة مقتطف CSS بسيط إلى القسم الذي يحتوي على شريط الترويجي.

position: fixed;width: 100%;

افتح إعدادات القسم وأضف كود CSS التالي إلى عنصر سطح المكتب الرئيسي:

ثم أضف كود CSS التالي إلى عنصر الكمبيوتر اللوحي الرئيسي:

position: relative;

الآن تحقق النتيجة.

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

الأفكار النهائية

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