قم بتنزيل 5 أنماط خلفية نابضة بالحياة لمنشورات مدونة Divi الخاصة بك

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

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

معاينة

لنبدأ بإلقاء نظرة على 5 نتائج مختلفة وعرض أحجام الشاشات المختلفة.

قم بتنزيل أنماط الخلفية النابضة بالحياة مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

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

لوحات الألوان

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

لوحة # 1

• اللون # 1: # 886DFC
• اللون # 2: # 7C56BD
• اللون # 3: # 372C66

لوحة # 2

• اللون # 1: # 42bcb2
• اللون رقم 2: # 9CFEF0
• اللون # 3: # a8baf7

لوحة رقم 3

• اللون # 1: # 96b2ff
• اللون # 2: # d999ff
• اللون # 3: # 357ff4

لوحة # 4

• اللون # 1: # B981FF
• اللون # 2: # 24EEFA
• اللون # 3: # be7bf2

لوحة # 5

• اللون # 1: # e02b20
• اللون # 2: # f6ff56
• اللون # 3: # db241e

إنشاء منشور جديد

إضافة تفاصيل وتمكين Divi Builder

دعونا نبدأ من البداية! أضف صفحة جديدة إلى موقع WordPress الخاص بك ، وأضف عنوان صفحتك ، وقم بتحميل صورة مميزة ، وقم بتمكين Divi Builder.

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

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

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

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

يمكنك الآن التبديل إلى Visual Builder.

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

إنشاء مدونة تصميم المنشور

أضف القسم رقم 1

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

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

• حجم صورة الخلفية: الغلاف
• موضع صورة الخلفية: المركز العلوي

تباعد

للسماح لصورة الخلفية بالظهور بالكامل ، قم بالتلاعب بالحشوة العلوية للقسم.

• الحشوة العلوية: 660 بكسل

أضف القسم رقم 2

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

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

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تباعد

قم بإزالة كل المساحة المتروكة الافتراضية في الجزء السفلي من القسم التالي.

• الحشو السفلي: 0 بكسل

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

عناصر

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

إعدادات نص العنوان

بعد ذلك ، انتقل إلى إعدادات نص العنوان وقم بإجراء بعض التغييرات.

• خط العنوان: Abril Fatface
• محاذاة نص العنوان: الوسط
• حجم نص العنوان: 73 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 40 بكسل (هاتف)

إعدادات نصوص التعريف

يجب تعديل إعدادات نصوص التعريف أيضًا.

• محاذاة نص Meta: الوسط
• Meta Text Color: Color # 1 (Find in Palette) (البحث في لوحة الألوان)
• حجم نص التعريف: 18 بكسل
• ارتفاع خط ميتا: 3em

أضف القسم رقم 3

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

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

• حجم صورة الخلفية: الحجم الفعلي
• موضع صورة الخلفية: المركز العلوي
• تكرار صورة الخلفية: الفضاء

تباعد

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

• الحشوة العلوية: 0 بكسل

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

لون الخلفية

أضف لون خلفية شفاف قليلاً إلى الصف التالي.

• لون الخلفية: rgba (255،255،255،0.86)

تباعد

قم بإزالة المساحة المتروكة الافتراضية المخصصة هنا أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة نصية

إضافة محتوى

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

إعدادات النص

انتقل إلى إعدادات النص وقم بإجراء بعض التغييرات هناك.

• حجم النص: 21 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي) ، 15 بكسل (هاتف)
• ارتفاع خط النص: 2em

إعدادات العنوان

يجب تعديل إعدادات نص العنوان أيضًا.

• خط العنوان: Abril Fatface
• حجم نص العنوان: 46 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
• ارتفاع خط العنوان: 1.5em

تباعد

أضف بعض قيم الحشو المخصصة بعد ذلك.

• الحشوة العلوية: 80 بكسل
• الحشو السفلي: 80 بكسل
• الحشو الأيسر: 80 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
• الحشو الأيمن: 80 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)

مربع الظل

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

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -14 بكسل

أضف الصف رقم 2

هيكل العمود

تابع بإضافة صف جديد أسفل الصف السابق مباشرةً باستخدام عمود واحد.

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة البريد الإلكتروني Optin Module

إضافة محتوى

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

مجالات

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

خلفية متدرجة

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

• اللون 1: اللون رقم 2 (بحث في لوحة)
• اللون 2: اللون رقم 3 (بحث في لوحة)
• اتجاه التدرج: 144 درجة

تخطيط

بعد ذلك ، قم بتغيير تخطيط الوحدة.

• التخطيط: الجسم في الأعلى ، النموذج في الأسفل

إعدادات النص

قم بتغيير إعدادات النص أيضًا.

• اتجاه النص: الوسط
• لون النص: فاتح

إعدادات نص العنوان

بعد ذلك ، افتح إعدادات نص العنوان وقم بإجراء بعض التغييرات.

• خط العنوان: Abril Fatface
• حجم نص العنوان: 54 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 35 بكسل (هاتف)

إعدادات الزر

قم بتعديل مظهر الزر أيضًا.

• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• نمط الخط: تسطير
• نمط التسطير: مزدوج

تباعد

أخيرًا ، استخدم قيم حشو مخصصة مختلفة في إعدادات التباعد في وحدة Email Optin Module.

• الحشوة العلوية: 100 بكسل
• الحشو السفلي: 100 بكسل
• الحشوة اليسرى: 300 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)
• الحشو الأيمن: 300 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)

حفظ التخطيط في مكتبة Divi لإعادة الاستخدام

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

معاينة

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

افكار اخيرة

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