إنشاء أرشيفات جميلة وإظهار صفحات الملاحظات للبودكاست الخاص بك

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

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

المنتجات النهائية اليوم: إظهار صفحات الملاحظات والمحفوظات

الصفحات نفسها مصممة لتكمل الصفحة الرئيسية ، ولكن لا تعكس عناصرها بشكل مباشر.

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

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

الأصول التي ستحتاجها

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

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

هذا كل شيء ، لذلك دعونا نبدأ في البناء!

بناء صفحة ملاحظات العرض

ملاحظات العرض هي مجرد "مشاركات" في WordPress ، لذا انتقل إلى لوحة التحكم وانتقل إلى المنشورات -> إضافة جديد.

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

أولاً ، تأكد من النقر فوق "استخدام Divi Builder".

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

ثم سترغب في الدخول إلى Visual Builder وأن يتم تقديمك بصفحة ويب فارغة مبهجة.

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

من هناك ، قم بتحميل صورة الخلفية الخاصة بك. قم بالتمرير لأسفل قليلاً إلى الإعدادات وقم بتشغيل Use Parallax Effect. اترك طريقة Parallax على الوضع الافتراضي "True Parallax".

احفظ هذه الإعدادات ، وسترى شيئًا كهذا:

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

انقر فوق الأخضر + وأدخل صف عمود واحد (الصف الموجود في الزاوية اليسرى العليا).

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

لقد سميت لي ببساطة "حلقة البودكاست" ، ولكن إذا اخترت شيئًا مختلفًا ، فتأكد من اختياره.

Badabing-badaboom ، لديك حلقة بودكاست مضافة إلى صفحة ملاحظات العرض مثل السحر.

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

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

ضمن علامة التبويب "المحتوى" في "إعدادات النص" ، أدخل ملاحظاتك في محرر WYSIWYG وتوجه إلى علامة التبويب "التصميم".

في علامة التبويب "التصميم" ، قم بتحديث الخيارات التالية:

لون النص: فاتح
اتجاه النص: يسار
خط النص: Special Elite
حجم خط النص: 20 بكسل
لون نص النص: #ffffff

احفظه ، وسترى كتلة نصية جديدة لامعة وصفحة مشابهة لهذه.

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

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

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

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

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

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

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

أضف أيضًا أي نص تريده للزر نفسه. اخترت "اشتراك" الفريد تمامًا.

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

قم بتغيير RGBA الخلفية إلى شفافة.

ضمن علامة التبويب "تصميم" ، اضبط Header Font على "Special Elite" والحجم على 36px.

ستقوم أيضًا بتعيين Body Font على "Special Elite" والحجم على 16px.

على عكس كل شيء آخر لهذا الموقع تقريبًا ، نريد استخدام حد لوحدة Email Optin. لذا ، انقل "User Border" إلى "نعم" ، واضبط اللون على #ffffff ، والحشو المخصص ليكون 15 بكسل من جميع الجوانب.

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

border-radius:10px;

احفظ عملك ، وستحصل على اشتراك بالبريد الإلكتروني!

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

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

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

الآن ... فصاعدًا إلى الأرشيف! خط النهاية في الأفق!

بناء صفحة المحفوظات الخاصة بك

توجه إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى إضافة صفحة جديدة ، وقم بتسميتها (ملكي هو "المحفوظات") ، وافتح Divi Visual Builder. سهل جدا.

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

انتقل إلى الإعدادات وأدخل عنوان صفحتك في محرر WYSIWYG.

في علامة التبويب تصميم ، اضبط لون النص على فاتح والاتجاه إلى المركز. اضبط الخط على "Special Elite" وحجم الخط على 50px.

لجعل النص يبدو جيدًا على الهاتف المحمول ، تأكد من تغيير الهوامش العلوية والسفلية إلى 40 بكسل.

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

ضمن علامة التبويب "تصميم" ، اضبط الحشوة العلوية والسفلية على 55 بكسل و 176 بكسل على التوالي حتى تسمح الصفحة بأكملها برؤية تأثير اختلاف المنظر بغض النظر عن عدد المنشورات التي لديك في أرشيفاتك.

لماذا 176 بكسل بدلاً من 175؟ لأنني متمرد ، لهذا السبب.

سترى هذا عندما تحفظ عملك:

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

توجه إلى الإعدادات وقم بتحديث الخيارات في علامة التبويب المحتوى على النحو التالي:

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

في علامة التبويب "التصميم" ، قم بتحديث الخيارات التالية:

التخطيط: الشبكة
خط الرأس: Special Elite
لون نص الرأس: #ffffff
خط الجسم: Special Elite
لون النص الأساسي: #ffffff
Meta Font: Special Elite
لون نص التعريف: #ffffff
استخدام الحدود: نعم
لون الحدود: #ffffff
عرض الحدود: 1 بكسل
نمط الحدود: صلب

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

انتقل إلى لوحة معلومات WordPress الخاصة بك -> Divi -> خيارات السمة ، ثم قم بالتمرير لأسفل وصولاً إلى Custom CSS. أضف هذا الرمز في المربع لتدوير زوايا مربعات المقتطفات الفردية:

.et_pb_post {
 border-radius: 10px;
}

ضع في اعتبارك أن “.et_pb_post” هي فئة CSS التي تستخدمها Divi لضبط تلك الصناديق ككل.

بعد ذلك ، احفظ كل عملك.

الشيء الوحيد المتبقي هو إضافة زر Return Home من مكتبتك ، وستنتهي. انقر فوق الأسود + لإضافته إلى نفس الصف مثل وحدة المدونة الخاصة بك.

هوت diggity dog ​​، لقد انتهيت للتو من إعداد صفحة المحفوظات الخاصة بك.

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

ختاما

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