هل ترغب في تحسين منشورات مدونتك؟ Divi عن طريق إضافة قسم الأبطال إليها؟
تبدو أقسام البطل التي تملأ الشاشة رائعة على أي صفحة ويب، لكنها مثيرة للاهتمام بشكل خاص في منشورات المدونات.
حتى لو كانت الصورة المعروضة بملء الشاشة، فهناك العديد من خيارات التصميم لوضع العنوان والنص التعريفي. من السهل القيام بذلك باستخدام ديفي موضوع باني .
في هذه المقالة، سنستعرض عدة طرق لإضافة قسم "البطل" بملء الشاشة إلى قالب منشور مدونتك. ديفي.
دعونا نبدأ.
مسح
إليك معاينة لما سنصممه في هذا البرنامج التعليمي.
اقرأ أيضا: Divi: كيفية استخدام "Gradient Builder" لتجميل صورك
قسم البطل مع وحدة إصدار سطح المكتب لعنوان المنشور
قسم البطل مع وحدة إصدار الجوال بعنوان الوظيفة
تخطيط قسم البطل البديل مع وحدة إصدار سطح المكتب لعنوان المنشور
تحميل DIVI الآن !!!
تخطيط قسم البطل البديل مع وحدة عنوان المنشور المتنقلة
قسم Hero مع البيانات الوصفية نسخة سطح المكتب
قسم Hero مع بيانات وصفية لإصدار الجوال
تحميل DIVI الآن !!!
قوالب منشورات المدونة لقسم البطل بملء الشاشة
يمكنك إنشاء قالب منشور المدونة من الصفر باستخدام أداة إنشاء قوالب Divi، أو تنزيل قالب من مدونة Elegant Themes. للعثور عليها، ابحث في المدونة. "قالب مجاني لمنشورات المدونة". إذا قمت بتنزيل قالب ، فتأكد من فك ضغطه.
لأمثلة لدينا ، سوف نستخدم قالب منشور مدونة مجاني لحزمة تخطيط مصمم أزياء Divi's . نحن نستخدم أيضًا حزمة التخطيط المجانية مصمم أزياء رأس وتذييل الصفحة .
قم بتنزيل أو إنشاء قالب منشور مدونتك لقسم البطل بملء الشاشة
يمكنك تحميل قالب منشور المدونة أو إنشاء قالب جديد من الصفر. سنقوم بتحميل قالب جاهز، لكن عملية إنشاء قسم البطل بملء الشاشة هي نفسها.
أنظر أيضا: Divi: كيفية استخدام الأقنعة وأنماط الخلفية لقسم البطل
الطريقة 1: وحدة عنوان المشاركة بملء الشاشة
هذه الطريقة سوف تستخدم وحدة PostTitle يُعد هذا خيارًا جيدًا إذا كنت ترغب في عرض جميع المعلومات معًا. بعد إنشاء القالب، انقر على أيقونة التحرير لفتحه.
يحتوي القالب الذي قمنا بتنزيله على قسم للصورة الرئيسية. سنقوم بإزالة هذا القسم وإضافة... قسم العرض الكامل في مكانه.
اختر عنوان المشاركة بعرض كامل في قائمة الوحدات ذات العرض الكامل.
جميع العناصر محددة افتراضيًا. اتركها مُفعّلة. مرر لأسفل إلى وضع صورة مميزة وحدد فوق العنوان.
- وضع الصورة المميزة: فوق العنوان
انتقل إلى لون الخلفية واضبط اللون على # fff9f2
- الخلفية: # fff9f2
نص العنوان
حدد علامة التبويب تصميم . لنص العنوان ، احتفظ بـ H1 واختر Playfair Display. اضبطه على Left Justified واختر 34332e # للون.
- العنوان:
- مستوى العنوان: H1
- الخط: عرض Playfair
- محاذاة النص: اليسار مضبوط
- لون النص: # 34332e
ل حجم الخط ، اضبط إصدار سطح المكتب على 65 بكسل ، وإصدار الهاتف المحمول على 42 بكسل ، وارتفاع الصف على 1,2em.
- حجم نص العنوان (سطح المكتب): 65 بكسل (سطح المكتب) ، 42 بكسل (الهاتف)
- ارتفاع خط العنوان: 1,2 م
نص ميتا
انتقل إلى نص ميتا. حدد مونتسيرات للخط واضبطه على متوسط ، وأحرف كبيرة ، ومحاذاة لليمين لإصدار سطح المكتب والمحاذاة اليسرى لإصدار الجوال. اختر # 7b7975 للون.
- ميتافونت:
- الخط: مونتسيرات
- الوزن: متوسط
- النمط: TT
- نص ميتا:
- المحاذاة: يمين (سطح المكتب) ، يسار (هاتف)
- اللون: # 7b7975
تعيين حجم الخط بالنسبة لنسخة سطح المكتب، اضبط حجم الخط على 14 بكسل، ولنسخة الجوال على 10 بكسل، والمسافة بين الأحرف على 1 بكسل، وارتفاع السطر على 1,6 وحدة em. أغلق الإعدادات واحفظ القالب.
- نص ميتا:
- الحجم (سطح المكتب): 14 بكسل
- الحجم (الهاتف): 10 بكسل
- تباعد الأحرف: 1 بكسل
- ارتفاع الخط: 1,6 م
العنوان على صورة الخلفية
إذا قررت أنك تريد ظهور العنوان على الصورة المحددة، فاستخدم نفس إعدادات التصميم وارجع إلى علامة التبويب. وصف المنتج.
اختر العنوان / صورة الخلفية الفوقية ل وضع صورة مميزة.
- وضع الصورة المميزة: العنوان / صورة الخلفية الفوقية
انتقل إلى نبذة عامة وحدد تدرج الخلفيةاضبط لون اليسار على #fff9f2، ولون اليمين على rgba (255,255,255,0)، والاتجاه على 90 درجة، وموضع البداية على 30%، ثم اختر "نعم" لوضع التدرج اللوني فوق صورة الخلفية. أغلق النافذة واحفظ الإعدادات.
- توقفات متدرجة:
- 30٪: # fff9f2
- 100٪: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
- اتجاه التدرج: 90 درجة
- مربع التدرج فوق صورة الخلفية: نعم
الطريقة 2: قسم ملء الشاشة البطل مع البيانات الوصفية
ستستخدم هذه الطريقة الوحدات النمطية النصية مع محتوى ديناميكي للمعلومات. إنه خيار جيد إذا كنت ترغب في عرض جميع العناصر في أماكن مختلفة.
أولاً، قم بتنزيل القالب واحذف القسم الأول. سنعيد إنشاء الوحدات وإعداداتها في العمود الأيسر، ولكننا سنستعرضها أولاً حتى تتمكن من ضبطها.
إعدادات قسم البطل بملء الشاشة مع البيانات الوصفية
افتح إعدادات ملف قسم وانتقل إلى الصورة الخلفية. تحديد تدرج الخلفية وقم بتغيير الإعدادات كما يلي:
- توقفات متدرجة:
- 30٪: # fff9f2
- 100٪: رجبا (255,255,255,0،XNUMX،XNUMX،XNUMX)
- اتجاه التدرج: 90 درجة
- مربع التدرج فوق صورة الخلفية: نعم
اختر الصورة الخلفية واختر الخيار استخدم المحتوى الديناميكي.
اختار صورة مميزة في الخيارات.
حدد علامة التبويب تصميموانتقل إلى التحجيم. أضف 100vh إلى الحد الأدنى للارتفاع. أغلق إعدادات القسم.
- ارتفاع الحد الأدنى: 100vh
إعدادات قسم البطل بملء الشاشة مع البيانات الوصفية
بعد ذلك ، أضف صف عمود مزدوج إلى القسم.
أضف وحدة النص في العمود الأيمن.
بالنسبة لمحتواه، حدد استخدم المحتوى الديناميكي.
اختار عنوان المشاركة / الأرشيف في قائمة الخيارات.
- المحتوى الديناميكي: عنوان المشاركة / الأرشيف
انتقل إلى علامة التبويب التصميم.
- عنوان:
- النص: H1
- الخط: عرض Playfair
- محاذاة النص: اليسار مضبوط
- لون النص: # 34332e
لحجم النصوص ، اضبط لإصدار سطح المكتب على 65 بكسل ، لإصدار الجوال على 42 بكسل وارتفاع الصف إلى 1,2em.
- عنوان:
- حجم النص: 65 بكسل (سطح المكتب) ، 42 بكسل (الهاتف)
- ارتفاع الخط: 1,2 م
انتقل إلى التباعد وأدخل 50٪ في المساحة المتروكة العلوية. أغلق الإعدادات.
- حشوة: 50٪ (علوي)
يمكنك أيضًا قراءة هذا المقال على: كيفية إنشاء قسم الأبطال باستخدام وحدة عرض Divi Fullwidth Header
قسم البطل مع فئة البيانات الوصفية
أضف قسمًا جديدًا منتظم تحت قسم البطل.
افتح إعداداته واضبط ملف COULEUR الخلفية على #fff9f2. إغلاق الإعدادات.
- لون الخلفية: # fff9f2
ثم أضف ملف خط 4 أعمدة للقسم الجديد.
بطل ملء الشاشة مع نص فئة البيانات الوصفية
أضف وحدة النص في العمود الأيسر.
افتح إعدادات الوحدة وحدد استخدم المحتوى الديناميكي لجسم النص.
اختر الفئات السابقة في القائمة.
- المحتوى الديناميكي: فئات المشاركة
حدد علامة التبويب تصميم انتقل إلى أسفل الصفحة إلى قسم "نص العنوان". حدد H4. اختر "Playfair Display" للخط، واضبطه على متوسط الحجم، وأحرف كبيرة، ومحاذاة إلى اليمين لنسخة سطح المكتب، ومحاذاة إلى اليسار لنسخة الهاتف. اختر اللون #7b7975.
- عنوان:
- اظهار النص
- الخط: عرض Playfair
- وزن الخط: متوسط
- النمط: TT
- محاذاة النص: الوسط
- لون النص: # 7b7975
اضبط حجم الخط لنسخة سطح المكتب على 14 بكسل، ولنسخة الجوال على 10 بكسل، والمسافة بين الأحرف على 1 بكسل، وارتفاع السطر على 1,6 وحدة em. أغلق الإعدادات واحفظ القالب.
- العنوان 4:
- الحجم (سطح المكتب): 14 بكسل
- الحجم (الهاتف): 10 بكسل
- تباعد الأحرف: 1 بكسل
- ارتفاع الخط: 1,6 م
انتقل إلى التباعد وأضف 0 بكسل إلى الهامش السفلي. أغلق الإعدادات.
- الهامش (السفلي): 0 بكسل
قسم Fullscreen Hero مع البيانات الوصفية لـ Meta Text
بعد ذلك ، انسخ وحدة الفئة واسحبه إلى العمود التالي. كل من وحدات Meta لديها نفس الإعدادات. سنوضح كيفية إنشاء الوحدة الأولى ثم نسخها مرتين لإنشاء الوحدات الأخرى.
الكاتب
افتح الإعدادات وقم بإزالة المحتوى الديناميكي.
انقر استخدم المحتوى الديناميكي واختيار انشر المؤلف.
- المحتوى الديناميكي: كاتب المشاركة
في علامة التبويب تصميم، قم بتغيير الإعدادات التالية.
- العنوان 4:
- الخط: مونتسيرات
- وزن الخط: متوسط
- النمط: TT
- محاذاة النص (سطح المكتب): الوسط
- محاذاة النص (الهاتف): يسار
- اللون: # 7b7975
معلمات حجم الخط يشمل:
- حجم النص: 14 بكسل (سطح المكتب) ، 10 بكسل (الهاتف)
- تباعد الأحرف: 1 بكسل
- ارتفاع الخط: 1,6 م
La الهامش السفلي يجب أن يكون 0 بكسل.
- الهامش (السفلي): 0 بكسل
التاريخ
نسخة وحدة المؤلف واسحبها إلى العمود التالي.
احذفه محتوى ديناميكي الحالية ، اختر استخدم المحتوى الديناميكي وحدد تاريخ النشر بعد. أغلق الإعدادات.
- المحتوى الديناميكي: تاريخ نشر المنشور
تعليقات
Enfin، نسخ وحدة تاريخ النشر المنشور واسحبه إلى العمود الأخير.
كما هو الحال مع الوحدات النمطية الأخرى ، قم بإزالة المحتوى الديناميكي وحدد استخدم المحتوى الديناميكي .
اختار عدد التعليقات بعد من اختياراتك.
- المحتوى الديناميكي: عدد التعليقات التي تم نشرها
هذه المرة أضف مسافة وكلمة تعليقات في الحقل بعد . أغلق النموذج الصغير ثم أغلق الإعدادات. احفظ عملك.
- بعد: التعليقات
اقرأ أيضا: Divi: كيفية عرض وحدة Fullwidth Header في وضع ملء الشاشة
النتائج
قسم البطل مع وحدة إصدار سطح المكتب لعنوان المنشور
قسم البطل مع وحدة إصدار الجوال بعنوان الوظيفة
تخطيط قسم البطل البديل مع وحدة إصدار سطح المكتب لعنوان المنشور
تخطيط قسم البطل البديل مع وحدة عنوان المنشور المتنقلة
قسم Hero مع البيانات الوصفية نسخة سطح المكتب
قسم Hero مع بيانات وصفية لإصدار الهاتف المحمول
تحميل DIVI الآن !!!
خاتمة
هذا كل شيء! هذه هي طريقتنا لإضافة قسم Hero بملء الشاشة إلى قالب منشور مدونة Divi الخاص بك.
توفر وحدات Divi ومنشئ السمات خيارات متعددة لإنشاء أقسام Hero بملء الشاشة. جميع الطرق فعالة جدًا، ولكل منها مزاياها.
باستخدام هذه الطرق، يمكنك إضافة قسم Hero بملء الشاشة إلى أي قالب منشور مدونة Divi.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...