إنشاء قوالب نوع المشاركة المخصصة للحدث المذهل باستخدام Divi

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

هذا الأسبوع ، كجزء من مبادرة تصميم Divi المستمرة الخاصة بنا ، سوف نوضح لك كيفية إنشاء نماذج مذهلة لنوع المنشور المخصص للحدث باستخدام Divi باستخدام حزمة تخطيط Meetup المجانية. أصبح هذا البرنامج التعليمي لحالة الاستخدام ممكنًا من خلال ميزة Divi Builder Custom Post Type Support ، وهي واحدة من تحديثات Divi الأخيرة. سننشئ نموذجًا يتطابق مع Meetup Layout Pack. بعد إنشاء هذا النموذج ، ستتمكن من إعادة استخدامه لجميع الأحداث التي تشاركها على موقع الويب الخاص بك.

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

معاينة

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

قم بتثبيت البرنامج الإضافي لتقويم الأحداث

انتقل إلى الإضافات وأضف واحدًا جديدًا

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

تنشيط البرنامج المساعد

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

تغيير إعدادات مخصص الموضوع

تغيير الطباعة

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

• حجم النص الأساسي: 16
• ارتفاع خط الجسم: 1.9
• خط الرأس: Roboto

إعدادات تقويم الأحداث

يحتوي المكون الإضافي Events Calendar على بعض الإعدادات الخاصة به في Theme Customizer أيضًا. ارجع إلى القائمة الرئيسية لمخصص القوالب> تقويم الأحداث> المظهر العام> واستخدم الألوان التالية:

• لون التمييز: # 06c8ff
• لون تسليط الضوء المميز: # 06c8ff

ارجع إلى إعدادات تقويم الأحداث> المظهر العام واستخدم نفس اللون "# 06c8ff" لجميع الخيارات التي يمكنك العثور عليها هناك.

أضف حدث جديد

أضف حدث جديد

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

أضف تفاصيل الحدث

تواصل عن طريق إدخال تفاصيل الحدث الخاص بك. هذا يشمل:

• الوقت والتاريخ
• موقع
• المنظمون
• موقع الحدث
• تكلفة الحدث

إضافة صورة مميزة

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

تغيير إعدادات Divi Page

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

نشر الحدث

نحن الآن جاهزون لبدء العمل على الواجهة الأمامية. المضي قدما ونشر الحدث الخاص بك.

هذا هو تصميم الصفحة الافتراضي دون تمكين Visual Builder:

افتح الصفحة المقصودة للقاء واحفظ عناصر التصميم

حدد موقع الصف وحفظه في مكتبة Divi

العمل بكفاءة أهم من العمل الجاد. لهذا السبب سنوفر على أنفسنا بعض الوقت والجهد من خلال إعادة استخدام عناصر من حزمة تخطيط Meetup. ابدأ بفتح الصفحة المقصودة باستخدام Divi's Visual Builder. بعد ذلك ، حدد الصف التالي على صفحتك واحفظه في مكتبة Divi الخاصة بك:

حدد موقع القسم وحفظه في مكتبة Divi

سنحتاج أيضًا إلى القسم التالي ، فتابع واحفظ هذا أيضًا:

ابدأ في إنشاء قالب نوع مخصص للحدث

أضف خطوط كود CSS مخصصة لمطابقة حزمة تخطيط اللقاء

يمكننا استخدام Visual Builder لصفحات الأحداث ولكن للأسف ، لا يمكننا استخدامه في كل مكان. للتأكد من أن كل شيء يتماشى مع Meetup Layout Pack ، سنضيف بضعة أسطر كود CSS مقدمًا:

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

قم بالتبديل إلى Visual Builder

يمكننا الآن التبديل إلى استخدام Visual Builder في حدثنا!

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

الصورة الخلفية

سترى أن هناك قسمًا موجودًا بالفعل على الصفحة. هذا هو المكان الذي يمكننا تعديله على الصفحة. ابدأ بفتح إعدادات القسم وإضافة صورة الخلفية " bg-4.png ". يمكنك العثور على هذه الصورة في مكتبة الوسائط الخاصة بك إذا كنت قد قمت بالفعل بتحميل Meetup Layout Pack إلى موقع الويب الخاص بك. إلى جانب صورة الخلفية ، استخدم الإعدادات التالية:

• حجم صورة الخلفية: الحجم الفعلي
• موضع صورة الخلفية: أسفل اليمين

تباعد

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

الحدود

نقوم أيضًا بإنشاء هذا النوع من تأثير الجدول الزمني لقالبنا. انتقل إلى إعدادات الحدود وأضف الحد الأيسر التالي:

• عرض الحد الأيسر: 7 بكسل
• لون الحد الأيسر: # 8301e9

أضف صفًا جديدًا

هيكل العمود

الآن بعد أن انتهينا من تعديل إعدادات القسم ، يمكننا البدء في إضافة صفوفنا. أضف صفًا جديدًا بهيكل العمود التالي:

تحجيم

افتح إعدادات صفك وقم بتمكين خيار "Make This Row Fulliwdth" في إعدادات التحجيم. هذا شيء سنفعله لكل صف من الصفوف داخل هذا التخطيط.

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

تحجيم

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

• سطح المكتب: 47٪
• الجهاز اللوحي والهاتف: 100٪

استيراد الصف المحفوظ

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

تحجيم

سنحتاج إلى تعديل بعض الأشياء حول هذا الصف ، بدءًا من إعدادات التحجيم. قم بتمكين خيار "Make This Row Fullwidth".

إزالة وحدة النص الأساسي ووحدة الزر

بعد ذلك ، قم بإزالة فقرة Text Module و Button Module في العمود الأول.

استنساخ وحدة النص وإزالة التحجيم

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

قسم الاستيراد المحفوظ

انتهينا من تعديل القسم الأول! انطلق واستورد القسم الذي قمت بحفظه بعد ذلك.

إضافة الحدود

نضيف أيضًا حدًا يسارًا إلى هذا القسم:

• عرض الحد الأيسر: 7 بكسل
• لون الحد الأيسر: # 06c8ff

تغيير حجم كل صف

يوجد صفان داخل القسم الذي قمت باستيراده للتو. قم بتمكين الخيار "Make This Row Fullwidth" لكل صف من هذه الصفوف.

تغيير محاذاة الزر

أخيرًا ، قم بتغيير محاذاة الأزرار إلى اليسار أيضًا.

حفظ القالب في مكتبة Divi

إضافة إلى مكتبة

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

معاينة

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

افكار اخيرة

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