كيفية إنشاء شريط ترويجي متحرك لقوالب صفحتك في Divi

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

دعنا نقفز ونبدأ!

نظرة خاطفة

إليك نظرة سريعة على شريط العرض الترويجي الذي سننشئه في هذا البرنامج التعليمي.

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

قم بتنزيل قالب صفحة شريط العرض الترويجي مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط وإضافة أحد ملفات json إلى Divi Theme Builder باستخدام خيار Theme Builder Portability.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

اشترك في قناتنا على اليوتيوب

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

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

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

بعد ذلك ، أنت على استعداد للذهاب.

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

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

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

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

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

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

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

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

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

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

إعدادات الصف

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

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

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

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

قبل مغادرة إعدادات الصف ، انقر لفتح إعدادات العمود. ثم أضف CSS المخصص التالي إلى Column Main Element:

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

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

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

إضافة الوحدة النمطية Blurb

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

انقر فوق رمز علامة الجمع الرمادية داخل الصف وأضف وحدة دعاية مغالى فيها.

لمحتوى الدعاية الإعلامية ، أدخل ما يلي:

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

قم بتحديث إعدادات تصميم دعاية مغالى فيها كما يلي:

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

إضافة وحدة الزر

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

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

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

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

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

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

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

إضافة Fullwidth Post Content Module

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

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

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

أضف مقطع عرض كامل

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

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

ثم حدد Fullwidth Post Content Module.

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

ثم احفظ التغييرات لمنشئ السمات أيضًا.

النتيجة النهائية

قبل

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

بعد، بعدما

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

ها هو على الهاتف المحمول.

هنا هو شريط الرسوم المتحركة على تحميل الصفحة.

جعل شريط الترويجي مثبتًا

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

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

position: fixed;
width: 100%;

ثم أضف CSS التالي إلى العنصر الرئيسي على الجهاز اللوحي:

position: relative;

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

لا تنس الروابط

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

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

افكار اخيرة

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

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!