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

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل قالب رأس شريط الصوت مجانًا

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

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

تنزيل مجاني

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

تحميل

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

انتقل إلى Divi Theme Builder وابدأ في بناء رأس عالمي

انتقل إلى Divi Theme Builder

ابدأ بالانتقال إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك.

ابدأ في إنشاء رأس عام

بعد ذلك ، ابدأ في إنشاء عنوان عام.

قم بإنشاء رأس عام باستخدام أحدث شريط صوتي للحلقة

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

لون الخلفية

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

• لون الخلفية: # 1a1844

تباعد

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

• الحشوة العلوية: 50 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 0 بكسل

مربع الظل

لفصل العنوان عن محتوى الصفحة / المنشور ، سنضيف ظل مربع إلى قسمنا أيضًا.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.3)

أضف الصف رقم 1

هيكل العمود

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

لون الخلفية

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

• لون الخلفية: # fe4943

تحجيم

انتقل إلى علامة تبويب تصميم الصف وقم بتغيير إعدادات الحجم بعد ذلك.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 90٪
• العرض الأقصى: 100٪

تباعد

نحن نضيف بعض المساحة المتروكة العلوية والسفلية المخصصة أيضًا.

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل

الحدود

بعد ذلك ، سنذهب إلى إعدادات الحدود وسنضيف بعض الزوايا الدائرية.

• أسفل اليسار: 10 بكسل
• أسفل اليمين: 10 بكسل

مربع الظل

نحن نقوم بتضمين Box Shadow أيضًا.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.3)

موقع

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

• المركز: ثابت
• الموقع: توب سنتر
• الفهرس Z: 11

العمود 1 الرؤية

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف وحدة نصية إلى العمود 1

إضافة محتوى

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

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: Open Sans
• نمط خط النص: أحرف كبيرة
• لون النص: #ffffff
• حجم النص: 15 بكسل
• تباعد حروف النص: 3 بكسل

تباعد

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

• الهامش الأيسر: -190٪

حيوية

أخيرًا وليس آخرًا ، أضف حركة الحلقة التالية إلى وحدة النص الخاصة بك:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار
• مدة الرسوم المتحركة: 9000 مللي ثانية
• كثافة الرسوم المتحركة: 30٪
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: خطي
• تكرار الرسوم المتحركة: حلقة

أضف وحدة الصوت إلى العمود 2

إزالة كافة المحتويات

في العمود 2 ، الوحدة الوحيدة التي نحتاجها هي وحدة الصوت. تأكد من إزالة المحتوى.

تحميل ملف صوتي

بعد ذلك ، قم بتحميل ملف صوتي يحتوي على أحدث حلقة.

إزالة لون الخلفية

قم بإزالة لون خلفية الوحدة بعد ذلك.

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة اليسرى: 0 بكسل

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

إضافة وحدة قائمة إلى العمود 1

اختر قائمة

بعد ذلك ، أضف وحدة قائمة إلى العمود 1 وحدد قائمة من اختيارك.

تحميل الشعار

قم بتحميل الشعار بعد ذلك.

إزالة لون الخلفية

ثم قم بإزالة لون الخلفية الأبيض الافتراضي.

إعدادات نص القائمة

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص القائمة على النحو التالي:

• خط القائمة: افتح Sans
• لون نص القائمة: #ffffff (سطح المكتب) ، # 1a1844 (الجهاز اللوحي والهاتف)
• حجم نص القائمة: 15 بكسل
• محاذاة النص: صحيح

إعدادات نص القائمة المنسدلة

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

• لون خط القائمة المنسدلة: #ffffff

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

جنبًا إلى جنب مع لون رمز قائمة الهامبرغر في إعدادات الرموز.

• لون أيقونة قائمة همبرغر: # fe4943

تحجيم

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

• عرض الشعار الأقصى: 65٪

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 2

أضف الشبكات الاجتماعية

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

انتقام

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير محاذاة الوحدة.

• محاذاة الوحدة: المركز

تباعد

أضف بعض قيم الهامش المخصصة بعد ذلك.

• الهامش العلوي: 20 بكسل
• الهامش السفلي: -4٪ (الجهاز اللوحي والهاتف فقط)

الحدود

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

• جميع الزوايا: 50vw

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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