كيفية إنشاء قالب بطاقة وصفة باستخدام Divi Theme Builder

نشرت: 2019-11-26

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

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

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

معاينة قالب بطاقة الوصفة

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

سطح المكتب

لوح

متحرك

1. قم بتنزيل وتثبيت البرنامج المساعد Advanced Custom Fields

البحث والتثبيت

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

أضف مجموعة حقول جديدة

انقر فوق علامة التبويب ACF وحدد "إضافة جديد". اسم المجموعة "بطاقة وصفة". أضف الحقول المخصصة واحدًا تلو الآخر من خلال زر "إضافة حقل".

أضف الحقول المخصصة

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

عنوان الوصفة

ابدأ بعنوان الوصفة.

تسمية الحقل: عنوان الوصفة
نوع الحقل: نص
مطلوب ؟: نعم
نص العنصر النائب: عنوان الوصفة
عدد الأحرف المسموح به: 30

مؤلف وصفة

ثم قم بإنشاء حقل للمؤلف.

تسمية الحقل: مؤلف الوصفة
نوع الحقل: نص
مطلوب ؟: نعم
نص العنصر النائب: المؤلف

وقت تحضير الوصفة

اتبع ذلك بوقت التحضير.

تسمية الحقل: وقت تحضير الوصفة
نوع الحقل: رقم
مطلوب ؟: نعم
نص العنصر النائب: ##
الإعداد المسبق: وقت التحضير:
إلحاق: دقيقة.

حصص الوصفة

ثم الوجبات.

التسمية الميدانية: حصص الوصفة
نوع الحقل: رقم
مطلوب ؟: نعم
نص العنصر النائب: ##
الإعداد المسبق: الحصص:

وصفة نكهة تلميح

أضف حقل طرف النكهة.

تسمية الحقل: نصيحة نكهة وصفة
نوع الحقل: نص
مطلوب ؟: نعم
الإعداد المسبق: نصيحة نكهة:
عدد الأحرف المسموح به: 40

صورة الوصفة

الآن ، أضف حقل الصورة.

تسمية الحقل: صورة الوصفة
نوع الحقل: صورة
مطلوب ؟: نعم

مكونات الوصفة

ثم عنوان المكونات.

تسمية الحقل: عنوان مكونات الوصفة
نوع الحقل: نص
التعليمات: اكتب فقط نفس نص العنصر النائب.
مطلوب ؟: نعم
نص العنصر النائب: المكونات

قائمة مكونات الوصفة

اتبع ذلك بقائمة المكونات.

تسمية الحقل: قائمة مكونات الوصفة
نوع الحقل: منطقة النص
التعليمات: أضف مسافة بعد كل عنصر
مطلوب ؟: نعم
الصفوف: 8
خطوط جديدة: إضافة <br> تلقائيًا

عنوان تحضير الوصفة

بعد الأخير ، عنوان الإعداد.

تسمية الحقل: عنوان إعداد الوصفة
نوع الحقل: نص
التعليمات: اكتب فقط نفس نص العنصر النائب.
مطلوب ؟: نعم
نص العنصر النائب: التحضير

قائمة تحضير الوصفة

أخيرًا ، قائمة التحضير.

تسمية الحقل: قائمة تحضير الوصفة
نوع الحقل: منطقة النص
التعليمات: أضف مسافة بعد كل عنصر
مطلوب ؟: نعم
الصفوف: 10
خطوط جديدة: إضافة <br> تلقائيًا

نشر مجموعة الحقول

انشر المجموعة الميدانية. يجب أن تبدو نافذة المجموعة الميدانية الخاصة بك مثل لقطة الشاشة أدناه.

كيفية الوصول إلى محتوى البرنامج المساعد ACF لقالب بطاقة الوصفة في Divi Builder

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

2. إنشاء قالب بطاقة وصفة جديدة مع Divi Builder

خطوات بناء موضوع ديفي

1. إنشاء فئة وصفات

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

2. افتح Divi Theme Builder وأضف قالبًا جديدًا

افتح منشئ سمة Divi وأضف قالبًا جديدًا.

3. إضافة الهيئة العالمية

انقر فوق "إضافة هيئة عالمية" وقم بتعيين القالب إلى منشورات في فئات معينة> وصفات. ثم انقر فوق الزر "إنشاء نموذج".

4. بناء هيئة مخصصة

انقر فوق "إضافة نص عام" وحدد "إضافة نص مخصص".

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

إضافة قسم جديد

الآن ، يمكننا البدء في تصميم قالب بطاقة الوصفة. عندما يفتح Divi builder ، حدد "البناء من الصفر". ابدأ بإضافة قسم جديد.

خلفية

في إعدادات القسم ، أضف لون الخلفية.

لون الخلفية: رمادي فاتح #eded

تحجيم

أيضًا ، اضبط الحجم في علامة تبويب التصميم.

العرض: 100٪
العرض الأقصى: 100٪

أضف الصف الأول

هيكل العمود

أضف صفًا جديدًا بعمود واحد.

تحجيم

قبل إضافة الوحدات النمطية ، اضبط إعدادات تحجيم الصف.

العرض الأقصى: 90٪

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

خلفية

تخصيص إعدادات العمود داخل الصف. أولاً ، أضف لون الخلفية.

لون الخلفية: أبيض #ffffff

الحدود

ثم قم بتعديل أنماط الحدود.

الزوايا الدائرية: 1vw من جميع الزوايا الأربع
أنماط الحدود: جميع الجوانب الأربعة
العرض: 5 بكسل
اللون: رمادي غامق جدا # 333333

أضف وحدة نصية ذات محتوى ديناميكي

المحتوى

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

النص الأساسي: عنوان الوصفة
إعدادات الجسم:
- قبل: <H1>
- بعد: </H1>

نص العنوان

بعد ذلك ، حدد نمط إعدادات النص H1 وفقًا لذلك:

مستوى العنوان: H1
الخط: أورينتا
الوزن: جريء
المحاذاة: المركز
اللون: رمادي غامق جدا # 3d3d3d
مقاس:
- سطح المكتب: 3vw
- الجهاز اللوحي: 4vw
- الهاتف: 5vw
تباعد الأحرف: 3 بكسل
ارتفاع الخط: 1.5em

تباعد

قم بتعديل قيم التباعد أيضًا.

الهامش السفلي:
- سطح المكتب: -1vw
- الجهاز اللوحي: -2vw
- الهاتف: -5vw
الحشوة العلوية:
- سطح المكتب + الجهاز اللوحي: 1vw
- الهاتف: 2vw
الحشو السفلي: 0vw
ترك مساحة يسار + يمين:
- سطح المكتب + الجهاز اللوحي: 3vw
- الهاتف: 4vw

أضف وحدة نصية ثانية ذات محتوى ديناميكي

المحتوى

أضف وحدة نصية ثانية وحدد المحتوى الديناميكي لمؤلف الوصفة.

النص الأساسي: مؤلف الوصفة

نص

ثم ، نمط النص.

الخط: تشفير بلا
اللون: رمادي غامق جدا # 3d3d3d
مقاس:
- سطح المكتب: 1.4vw
- الكمبيوتر اللوحي: 2.4vw
- الهاتف: 3vw
المحاذاة: المركز

تباعد

بعد ذلك ، اضبط التباعد.

الهامش العلوي: 1.5vw
الحشوة العلوية:
- سطح المكتب + الجهاز اللوحي: 0vw
- الهاتف: 2vw
الحشوة السفلية: 2vw
ترك مساحة يسار + يمين:
- سطح المكتب: 2vw
- الجهاز اللوحي + الهاتف: 3vw

أضف الصف الثاني

هيكل العمود

الآن ، أضف صفًا ثانيًا باستخدام بنية العمود التالية:

تحجيم

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

عرض المزراب: 2
العرض: 90٪
العرض الأقصى: 100٪
محاذاة الصف: اليسار

تباعد

ثم التباعد.

الحشوة العلوية والسفلية: 0.5vw
الحشوة اليسرى: 10vw

الرؤية

أخيرًا ، في علامة التبويب خيارات متقدمة ، اضبط الرؤية.

التدفق الأفقي: مرئي
التدفق العمودي: مرئي

العمود 1 + 2 + 3 الإعدادات

الحدود

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

الزوايا الدائرية: 1vw من جميع الزوايا الأربع
أنماط الحدود: جميع الجوانب الأربعة
العرض: 5 بكسل
اللون: رمادي غامق جدا # 333333

تحول

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

مقياس التحويل عند التحويم: 105٪ x 105٪

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

المحتوى

أضف وحدة نصية واترك نافذة المحتوى فارغة في الوقت الحالي. سنضيف ذلك لاحقًا.

خلفية

أضف لون الخلفية للوحدة.

لون الخلفية: أخضر ليموني # b1e88d

نص العنوان

نمط إعدادات النص H5 بعد ذلك.

مستوى العنوان: H5
خط H5: أورينتا
لون H5: رمادي غامق جدا # 3d3d3d
حجم H5:
- سطح المكتب: 1vw
- الجهاز اللوحي: 2.3vw
- الهاتف: 3.3vw
المحاذاة: المركز

تباعد

أخيرًا ، اضبط قيم التباعد على النحو التالي.

الحشوة العلوية:
- سطح المكتب: 1vw
- الجهاز اللوحي: 1.5vw
- الهاتف: 3.5vw
الحشوة السفلية:
- سطح المكتب: 0.5vw
- الكمبيوتر اللوحي + الهاتف: 1.5vw
ترك مساحة يسار + يمين:
- سطح المكتب: 2vw
- الجهاز اللوحي + الهاتف: 3vw

وحدة نص مكررة من العمود 1 مرتين وانتقل إلى العمودين 2 و 3

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

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

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

الجسم: وقت تحضير الوصفة
إعدادات الجسم:
- قبل: <H5> وقت التحضير:
- بعد: دقيقة </ H5>

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

أضف المحتوى الديناميكي لحصص الوصفات واضبط الإعدادات.

الجسم: حصص الوصفة
إعدادات الجسم:
- قبل: حصص <H5>:
- بعد: </H5>

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

أضف المحتوى الديناميكي لطرف النكهة واضبط الإعدادات.

الجسم: وصفة نكهة نصيحة
إعدادات الجسم:
- قبل: <H5> نصيحة نكهة:
- بعد: </H5>

أضف الصف الثالث

هيكل العمود

أضف الآن الصف الثالث باستخدام بنية العمود التالية:

تحجيم

قبل إضافة أي وحدات نمطية ، اضبط حجم الصف.

عرض مزراب مخصص: 2
العرض: 80٪
العرض الأقصى: 100٪

تباعد

أيضًا ، امسح الهامش العلوي الافتراضي.

الهامش العلوي: 0vw

الرؤية

أخيرًا ، اضبط الرؤية في علامة التبويب المتقدمة.

التدفق الأفقي: مرئي
التدفق العمودي: مرئي

العمود 1 + 2 + 3 الإعدادات

الحدود

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

الزوايا الدائرية: 1vw من جميع الزوايا الأربع
أنماط الحدود: جميع الجوانب الأربعة
العرض: 5 بكسل
اللون: رمادي غامق جدا # 333333

تحول

تابع عن طريق إضافة تحويل تحوم في علامة تبويب التصميم. كرر مع العمودين 2 و 3.

مقياس التحويل عند التحويم: 105٪ x 105٪

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

المحتوى

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

الصورة: صورة الوصفة

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

المحتوى

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

نص النص: عنوان مكونات الوصفة
إعدادات الجسم:
- قبل: <H3>
- بعد: </H3>

نص العنوان

ثم ، نمط نص العنوان.

مستوى العنوان: H3
H3Font: أورينتا
لون H3: رمادي غامق جدا # 3d3d3d
حجم H3:
- سطح المكتب: 1.6vw
- الجهاز اللوحي: 2vw
- الهاتف: 5.5vw
المحاذاة: المركز

تباعد

أكمل الوحدة بضبط التباعد.

الهامش السفلي: 0vw
الحشوة العلوية:
- سطح المكتب: 2vw
- الجهاز اللوحي: 3vw
- الهاتف: 4vw
ترك مساحة يسار + يمين:
- سطح المكتب: 2vw
- الجهاز اللوحي + الهاتف: 3vw

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

خط

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

اللون: أخضر ليموني # b1e88d

تحجيم

ثم اضبط قيم التحجيم.

الوزن: 5 بكسل
العرض: 40٪
المحاذاة: اليسار

تباعد

أخيرًا ، اضبط التباعد.

الهامش العلوي: 0vw

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

المحتوى

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

نص النص: قائمة مكونات الوصفة
إعدادات الجسم: تمكين Raw HTML

نص

بعد ذلك ، قم بتنسيق النص على النحو التالي.

الخط: تشفير بلا
اللون: رمادي غامق جدا # 333333
مقاس:
- سطح المكتب: 0.9vw
- الجهاز اللوحي: 2vw
- الهاتف: 3vw

تباعد

أيضا ، اضبط التباعد.

الهامش العلوي:
- سطح المكتب: -1vw
- الجهاز اللوحي: -3vw
- الهاتف: -5vw
الحشوة العلوية:
- سطح المكتب + الجهاز اللوحي: 0vw
الحشوة السفلية:
- سطح المكتب: 3vw
- الجهاز اللوحي + الهاتف: 4vw
ترك مساحة يسار + يمين:
- سطح المكتب: 3vw
- الجهاز اللوحي: 4vw
- الهاتف: 5vw

قم بتكرار جميع الوحدات في العمود 2 وانتقل إلى العمود 3

في عرض الإطار السلكي ، قم بتكرار جميع الوحدات في العمود الثاني. انقل الوحدات المكررة إلى العمود الثالث بنفس الترتيب.

أضف محتوى ديناميكيًا في الوحدة النمطية الأولى للنص في العمود 3

أضف المحتوى الديناميكي لعنوان الإعداد.

النص الأساسي: عنوان تحضير الوصفة

أضف محتوى ديناميكيًا في الوحدة النمطية الثانية للنص في العمود 3

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

النص الأساسي: قائمة تحضير الوصفة

أضف الصف الرابع

هيكل العمود

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

تحجيم

قبل إضافة وحدة نمطية ، اضبط حجم الصف.

عرض مزراب مخصص: 2
العرض: 100٪
العرض الأقصى: 80٪

تباعد

عدّل إعدادات التباعد بعد ذلك.

الحشوة اليسرى + اليمنى: 0vw

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

خلفية

صمم العمود ليتناسب مع بطاقة الوصفة أعلاه. أولاً ، أضف خلفية.

لون الخلفية: أبيض #ffffff

تباعد

أيضا ، اضبط التباعد.

الحشوة اليسرى: 0vw

الحدود

أخيرًا وليس آخرًا ، قم بتعديل إعدادات الحدود.

الزوايا الدائرية: 1vw من جميع الزوايا الأربع
أنماط الحدود: الجوانب الأربعة
العرض: 5 بكسل
اللون: رمادي غامق جدا # 333333

اترك العمود 2 فارغًا.

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

نص

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

الخط: تشفير بلا
اللون: رمادي غامق جدا # 333333
مقاس:
- سطح المكتب: 0.9vw
- الجهاز اللوحي: 2vw
- الهاتف: 3vw
ارتفاع الخط: 2em

عنوان 1 نص

الخط: أورينتا
اللون: رمادي غامق جدا # 333333
مقاس:
- سطح المكتب: 2vw
- الجهاز اللوحي: 5vw
- الهاتف: 6vw

عنوان 2 نص

الخط: أورينتا
اللون: رمادي غامق جدا # 333333
مقاس:
- سطح المكتب: 1.8vw
- الجهاز اللوحي: 4.5vw
- الهاتف: 5.5vw

عنوان 3 نص

الخط: أورينتا
اللون: رمادي غامق جدا # 333333
مقاس:
- سطح المكتب: 1.6vw
- الجهاز اللوحي: 4.5vw
- الهاتف: 5vw

تباعد

لمطابقة نمط بطاقة الوصفة ، اضبط قيم التباعد.

الحشوة العلوية والسفلية: 2vw
ترك مساحة يسار + يمين:
- سطح المكتب: 4vw
- الجهاز اللوحي + الهاتف: 6vw

إذا كنت تريد تغيير لون خط blockquote أو لون الارتباط ، فيمكنك القيام بذلك في أداة تخصيص السمات أسفل لون التمييز.

4. تحرير / إنشاء منشور باستخدام إعدادات البرنامج المساعد ACF ونموذج بطاقة الوصفة

إدخال الحقول المخصصة

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

عنوان الوصفة:

نخب الأفوكادو النباتي سوبرجرين

مؤلف الوصفة:

ماجدالينا سويفتر - www.veganchef.com

وقت تحضير الوصفة:

حصص الوصفة:

وصفة نكهة نصيحة:

استخدم رقائق ملح البحر والزيت البكر الممتاز

صورة الوصفة:

صورة توست الأفوكادو

عنوان مكونات الوصفة:

مكونات

قائمة مكونات الوصفة:

3 شرائح خبز قمح كامل
1 ثمرة أفوكادو ناضجة
100 جرام. الفول المطبوخ
10 جرام براعم خضراء
1 بصل أخضر مقطع
30 جرام جبنة فيتا مفتتة
1 ليمونة مقطعة إلى نصفين
اندفاعة زيت زيتون
رش ملح البحر

عنوان تحضير الوصفة:

تحضير

قائمة تحضير الوصفة:

1. نخب شرائح الخبز حسب رغبتك.
2. فتح الأفوكادو ، وإزالة اللب ، وهرسها بالشوكة.
3. ضعي عصير الليمون فوق الأفوكادو وتبليه بالملح.
4. وزعي مهروس الأفوكادو على الخبز المحمص.
5. نرش الفاصوليا ، والبراعم ، والبصل الأخضر المفروم.
6. يتبل بالملح.
7. أضيفي جبنة الفيتا المفتتة.
8. ننتهي بزيت الزيتون.

امنح المنشور عنوانًا

عنوان

لا تنس إضافة عنوان إلى منشورك.

وصفة توست الأفوكادو

أضف محتوى ، حدد الفئة ، وأضف صورة مميزة

اكتب أو أدخل محتوى منشور المدونة في المحرر العادي. حدد فئة الوصفات وأضف صورة مميزة.

معاينة قالب بطاقة الوصفة

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

سطح المكتب

لوح

متحرك

انها التفاف!

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

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

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