كيفية استخدام ميزة المحتوى الديناميكي لديفي لتصميم تخطيط منشور ديناميكي

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

في هذا البرنامج التعليمي ، ستحتاج إلى ما يلي:

• موضوع ديفي
• حزمة تخطيط المدرب الشخصي. يمكن الوصول إلى حزمة التخطيط هذه من Divi Builder. سنستخدم تخطيط صفحة خدمة المدرب الشخصي لبدء تصميم تخطيط منشوراتنا.

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

الجزء 1: إضافة تخطيط Premade إلى المنشور

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

نظرًا لأننا نرغب في إضافة تخطيطنا المسبق من أجل سحب صورنا من التخطيط (نحتاجه لصورتنا المميزة). انقر فوق الزر Load Layout الموجود في قائمة Divi Builder.

من النافذة المنبثقة تحميل من المكتبة ، حدد تخطيط صفحة خدمة المدرب الشخصي وانشره في منشورك بالنقر فوق الزر "استخدام هذا التخطيط".

ثم انشر رسالتك لحفظ الإعدادات الخاصة بك.

الجزء 2: تحديث إعدادات صفحة Divi ونشر البيانات الوصفية والصورة المميزة

إعدادات صفحة Divi

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

في الجزء العلوي الأيمن من الصفحة ، حدد موقع مربع إعدادات صفحة Divi وقم بتحديث ما يلي:

تخطيط الصفحة: عرض كامل
إظهار عنوان المشاركة: إخفاء

إذا كنت لا ترى إعدادات Divi Page ، فربما لم يتم تنشيط Divi Builder ، لذا تأكد من القيام بذلك أولاً.

أضف فئات

ضمن مربع الفئات ، أضف فئة جديدة تسمى "تدريب القوة" وتأكد من أنها الفئة الوحيدة المحددة.

اضف اشارة

في مربع العلامات ، أضف العلامات الثلاثة التالية: السرعة والتدريب والتدريبات.

صورة مميزة

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

الجزء 3: إضافة الحقول المخصصة لمحتوى التمرين الديناميكي

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

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

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

ثم انقر فوق القائمة المنسدلة لمربع الحقول المخصصة (إذا تم طيها) لإضافة حقل مخصص جديد وأدخل ما يلي:

الاسم: عنوان التمرين
القيمة: تمرين مميز

ثم انقر فوق الزر "إضافة حقل مخصص".

الاسم هو كيفية تحديد الحقل المخصص في Divi. القيمة هي المحتوى الذي سيتم إضافته ديناميكيًا إلى الصفحة باستخدام ميزة المحتوى الديناميكي لـ Divi (المزيد حول هذا لاحقًا).

تابع هذه العملية لإضافة الحقول المخصصة التالية إلى موقع الويب الخاص بك.

الاسم: الإحماء
القيمة: 800 متر المدى

الاسم: المدة
القيمة: 30 دقيقة

الاسم: رفع الأثقال
قيمة:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

الاسم: يبرد
القيمة: 400 متر المدى

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

لا تنس تحديث منشورك!

الجزء 4: إضافة محتوى ديناميكي إلى تخطيط المنشور باستخدام Visual Builder

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

لتسهيل تحديد موقع الأشياء وتحريرها لتصميم التخطيط المتقدم هذا ، افتح قائمة الإعدادات واضبط Builder Default Interaction Mode على Click Mode.

في قسم الرأس ، احذف وحدة الزر (لسنا بحاجة إليها).

استبدال صورة الخلفية بالمحتوى الديناميكي للصورة المميزة

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

سيبدو التصميم الخاص بك كما هو تمامًا نظرًا لأننا نستخدم نفس الصورة. الاختلاف الوحيد الآن هو أنه يتم سحب صورة الخلفية من أي صورة تم تعيينها كصورة مميزة للمنشور. هذا هو جمال المحتوى الديناميكي!

لنكمل.

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

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

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

إظهار ميتا: NO
إظهار الصورة المميزة:

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

ثم الصق أنماط عنوان h2 في وحدة عنوان المنشور بالنقر بزر الماوس الأيمن على الوحدة وتحديد الخيار من القائمة.

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

الآن يجب أن يتطابق عنوان المنشور مع تصميم عنوان التخطيط الأصلي.

يمكنك الآن حذف وحدة النص التي تحتوي على العنوان الأصلي.

استخدام المحتوى الديناميكي لإنشاء صف من البيانات الوصفية

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

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

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

ستحتاج أيضًا إلى إضافة مسافات مخصصة على النحو التالي:

حشوة مخصصة: 1٪ يسار ، 1٪ يمين

ثم احفظ إعدادات الصف.

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

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

ثم حدد الخيار: نشر تاريخ النشر.

ثم قم بتغيير تنسيق التاريخ وفقًا لذلك.

سيؤدي هذا إلى إضافة تاريخ نشر المنشور كمحتوى ديناميكي.

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

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

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

ستحتاج إلى تحديث لون نص الارتباط إلى اللون الأبيض لمطابقة تصميم التخطيط.

قم الآن بنسخ وحدة نص فئات المشاركة مع وجود الفاصل في العمود 3. ثم قم بتغيير المحتوى الديناميكي إلى عدد التعليقات المنشورة. في النافذة المنبثقة Post Comment Count ، أدخل ما يلي في مربع الإدخال قبل:

قبل: التعليقات:

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

الآن دعنا نواصل إضافة المحتوى الديناميكي الخاص بنا. انسخ وحدة النص والمقسّم في العمود 3 والصقها في العمود 4. هذا العمود الأخير سيحتوي على الصورة المصغرة لمؤلف المنشور واسم المؤلف. لذلك ، قم بتغيير المحتوى الديناميكي للوحدة النصية إلى Post Author. في النافذة المنبثقة Post Author ، قم بتحديث ما يلي:

قبل: بواسطة:
تنسيق الاسم: الاسم الأول والأخير

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

ثم اضبط إعدادات التصميم لسحب الصورة لأعلى ومنحها عرضًا مخصصًا كما يلي:

العرض: 80 بكسل
الهامش المخصص (سطح المكتب): -82 بكسل للأعلى
الهامش المخصص (الجهاز اللوحي): 0 بكسل في الأعلى

ملاحظة: سيُظهر اسم مؤلف المنشور المؤلف الذي تم تعيينه للمنشور الحالي. وصورة الملف الشخصي لمؤلف المنشور هي كل ما تم تعيينه لملف تعريف المستخدم في لوحة معلومات WordPress ضمن المستخدمون> ملف التعريف الخاص بك.

الجزء 5: إضافة الحقول المخصصة كمحتوى ديناميكي لإضافة تمرين مميز إلى المنشور

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

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

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

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

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

بعد ذلك ، أضف وحدة دعاية مغالى فيها ثانية أدناه. أدخل النص "الإحماء" كعنوان. ثم أضف الحقل المخصص المسمى "Warmup" كمحتوى ديناميكي.

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

أضف وحدة دعاية دعاية أخيرة باستخدام "Cool Down" كعنوان والحقل المخصص "Cool Down" كمحتوى ديناميكي.

الآن لديك قسم ديناميكي لإضافة التدريبات إلى منشورك!

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

الجزء 6: تصميم قسم "الموضوعات ذات الصلة" باستخدام علامات النشر للمحتوى الديناميكي

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

ثم بالنسبة لمربع المحتوى ، أضف علامات النشر كمحتوى ديناميكي. ثم قم بتحديث خيارات علامات النشر التالية:

قبل: مواضيع ذات صلة:
فاصل العلامات: //

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

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

خط النص: أوزوالد
وزن خط النص: شبه عريض
لون نص النص: # ff4c00
حجم نص النص: 30 بكسل
خط الارتباط: أوزوالد
وزن خط الارتباط: شبه عريض
لون نص الرابط: # 262d3f
حجم نص الرابط: 50 بكسل
تباعد حروف الارتباط: 2 بكسل
ارتفاع خط الارتباط: 1.6em

ها هو التصميم النهائي.

الجزء 7: إضافة السيرة الذاتية للمؤلف وقسم التعليق

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

إضافة قسم السيرة الذاتية للمؤلف باستخدام المحتوى الديناميكي

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

إضافة قسم تعليق باستخدام وحدة التعليقات

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

التصميم النهائي

هذا هو التصميم النهائي للمنشور بأكمله بمجرد تعديل التصميم بالكامل.

تحديث محتوى المنشور وحفظ التخطيط للمنشورات المستقبلية

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

افكار اخيرة

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

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

هتافات!