كيفية إنشاء صفحة بودكاست جميلة مع Divi

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

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

المنتج النهائي اليوم: الصفحة الرئيسية للبودكاست المكونة من ثلاثة أقسام

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

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

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

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

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

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

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

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

بخلاف ذلك ، فإن جميع الموارد التي ستحتاج إليها موجودة داخل Divi مباشرةً. دعنا نصل إليها ، إذن!

الصفحة الرئيسية لموقع البودكاست: القسم الأول

ابدأ بإنشاء صفحة جديدة في لوحة معلومات WordPress الخاصة بك وتعيينها كصفحة أولى لموقعك. (أطلقت على نفسي اسم "المنزل).)

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

أول شيء ، نقوم بإنشاء صف من ثلاثة أعمدة.

داخل العمود الأوسط ، نريد إدخال وحدة تقسيم Divi.

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

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

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

في علامة التبويب "تصميم" ، قم بتحديث لون النص إلى "فاتح" وتغيير اتجاه النص إلى "المركز". ثم اضبط خط النص وحجمه. اخترت الخط “Special Elite” بسبب مظهره المتعثر ثم قمت بتعيين حجمه على 60. كما قمت بتعيين ارتفاع خط النص على 1em.

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

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

المحتوى : أدخل النص الخاص بك للوصف (أقترح نسخة مقطوعة من الوصف الذي تستخدمه على iTunes والخدمات الأخرى)
لون الخلفية : rgba (0،0،0،0.4)

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

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

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

border-radius: 10px;

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

عمل ممتاز!

لجعله أكثر جاذبية من الناحية المرئية ، نحتاج إلى تعيين خلفية القسم ، لذا انتقل إلى إعدادات المربع الأزرق (القسم) وقم بتحميل صورة الخلفية. أميل إلى الاحتفاظ بدقة تبلغ 1920 × 1280.

يجب أن ترى شيئًا يشبه هذا الآن:

الآن ، قد تسأل نفسك: "ماذا عن البودكاست؟ إنه موقع بودكاست ، ولم نقم بأي شيء مع بودكاست حتى الآن! " أنت محق تماما. لذلك دعونا نحصل على بعض الصوت من خلال تحديد وحدة الصوت (التي خمنتها) في العمود الثالث من صفنا.

لا تتلاءم وحدة الصوت الافتراضية تمامًا مع الموضوع الذي نستخدمه لهذا الموقع ، لذلك دعنا نأخذها من هذا:

الى هذا:

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

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

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

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

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

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

حدد "فاتح" لخيار لون النص. اضبط الخطوط على "Special Elite" ، وحجم العنوان على 50 بكسل ، وحجم التسمية التوضيحية على 20 بكسل.

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

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

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

أدخل أي اسم للنموذج تريده ولا تحدد "اجعل هذا عنصرًا عالميًا". سنستخدم هذا الخيار في الجزء 2 من هذه السلسلة ، لكن ليس الآن.

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

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

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

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

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

فقط احفظ هذا الرابط ، وستكون جاهزًا للانطلاق!

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

هاهو! خاصتك ... انتظر. اه اه. رابط ملاحظات العرض ... قبيح!

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

توجه إلى حقل CSS المخصص في Divi -> Theme Options وأدخل هذا في الأسفل.

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

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

تأكد من حفظه ، والآن اكتمل مشغل البودكاست!

وللحصول على الجزء الأخير من التغيير والتبديل في هذا القسم الأول ، انقر فوق إعدادات الصف (المربع الأخضر).

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

وكذلك القسم العلوي من موقع البودكاست الجديد الخاص بك! يجب أن يبدو مثل هذا الآن.

احفظه ، وبهذه الطريقة ، تم الانتهاء من معظم العمل! وبفضل ميزة مكتبة Divi ، سيطير المقطعان التاليان! شاهد فقط.

الصفحة الرئيسية لموقع البودكاست: القسم الثاني

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

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

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

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

احفظ ثم أدخل مربع نص جديد في الصف. اكتب "Selected Episodes" ، وقم بتوسيطه في محرر WYSIWYG ، وتوجه إلى الإعدادات لجعل خط النص "Special Elite" وحجم النص 50 بكسل. يجب أن ترى شيئًا كهذا الآن:

أسفل ذلك ، أنشئ صفًا جديدًا من ثلاثة أعمدة بالنقر فوق الأخضر + ، وفي العمود الأول ، أدخل "إضافة من علامة التبويب المكتبة". (لن يكون لديك كل خيارات المكتبة هذه الآن ، لكنك ستحصل عليها لاحقًا!)

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

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

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

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

في علامة تبويب الإعدادات ، نضغط على "استخدام الأنماط المخصصة للأزرار" ، وسنضبط لون الخلفية على "#ffffff" ولون النص على "# 000000" (أبيض وأسود ، على التوالي.)

بعد ذلك ، سنرغب في تقريب زوايا الزر عن طريق ضبط Border Radius على 10 بكسل ، وتعيين الخط على "Special Elite" ، وتغيير رمز Add Button من "افتراضي" إلى "No."

بشكل أساسي ، قم بتغيير Button Hover Border Radius إلى 10 بكسل بحيث يتم تقريبه عندما يكون الزر فوقه ماوس.

لقد قمت بحفظ هذا في مكتبتي حتى أتمكن من استخدام التصميم في الأزرار الأخرى مع تقدمي.

وبهذا يكون القسم الثاني قد انتهى. أنت على وشك الانتهاء ، بودكاستر! أنت تقرب الثالث حرفيا!

الصفحة الرئيسية لموقع البودكاست: القسم الثالث

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

سترى هذا مضاءً ، والذي لا يتناسب مع تصميمنا على الإطلاق. إنه حل سهل للغاية ، رغم ذلك.

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

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

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

بمجرد حصولك على المفتاح ، انتقل إلى لوحة معلومات WordPress الخاصة بك ، وتوجه إلى Divi -> Theme Options مرة أخرى ، وأدخل مفتاح واجهة برمجة تطبيقات Mailchimp في الحقل المسمى "Mailchimp API key".

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

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

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

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

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

أراك غدا!

إظهار صفحة الملاحظة:

صفحة الأرشيف: