هل ترغب في تحسين منشورات مدونتك؟ Divi عن طريق إضافة قسم الأبطال إليها؟
تبدو أقسام Hero بملء الشاشة رائعة على أي صفحة ويب ، لكنها رائعة بشكل خاص في مشاركات المدونة.
على الرغم من أن الصورة المميزة بملء الشاشة ، إلا أن هناك الكثير من خيارات التصميم لوضع العنوان والنص التعريفي. من السهل القيام بذلك باستخدام ديفي موضوع باني .
في هذه المقالة ، سنرى عدة طرق لإضافة قسم Hero بملء الشاشة إلى قالب منشور المدونة الخاص بك. ديفي.
دعونا نبدأ.
مسح
إليك معاينة لما سنصممه في هذا البرنامج التعليمي.
اقرأ أيضا: Divi: كيفية استخدام "Gradient Builder" لتجميل صورك
قسم البطل مع وحدة إصدار سطح المكتب لعنوان المنشور
قسم البطل مع وحدة إصدار الجوال بعنوان الوظيفة
تخطيط قسم البطل البديل مع وحدة إصدار سطح المكتب لعنوان المنشور
تحميل DIVI الآن !!!
تخطيط قسم البطل البديل مع وحدة عنوان المنشور المتنقلة
قسم Hero مع البيانات الوصفية نسخة سطح المكتب
قسم Hero مع بيانات وصفية لإصدار الجوال
تحميل DIVI الآن !!!
قوالب نشر المدونة لقسم البطل بملء الشاشة
يمكنك إنشاء قالب منشورات المدونة بتنسيق Divi منشئ السمات من البداية أو قم بتنزيل قالب من مدونة Elegant Themes. للعثور عليهم ، ابحث في المدونة "قالب منشور مدونة مجاني". إذا قمت بتنزيل قالب ، فتأكد من فك ضغطه.
لأمثلة لدينا ، سوف نستخدم قالب منشور مدونة مجاني لحزمة تخطيط مصمم أزياء Divi's . نحن نستخدم أيضًا حزمة التخطيط حر مصمم أزياء رأس وتذييل الصفحة .
قم بتنزيل أو إنشاء قالب منشور المدونة الخاص بك لقسم Hero بملء الشاشة
يمكنك تنزيل قالب منشور المدونة الخاص بك أو إنشاء نموذج من البداية. سنقوم بتحميل واحد ، لكن عملية إنشاء قسم بطل بملء الشاشة هي نفسها.
أنظر أيضا: 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 إم. أغلق الإعدادات الخاصة بك واحفظ القالب الخاص بك.
- نص ميتا:
- الحجم (سطح المكتب): 14 بكسل
- الحجم (الهاتف): 10 بكسل
- تباعد الأحرف: 1 بكسل
- ارتفاع الخط: 1,6 م
العنوان على صورة الخلفية
إذا قررت أنك تريد أن يظهر العنوان على الصورة المميزة ، فاستخدم نفس إعدادات التصميم وارجع إلى علامة التبويب وصف المنتج.
اختر العنوان / صورة الخلفية الفوقية ل وضع صورة مميزة.
- وضع الصورة المميزة: العنوان / صورة الخلفية الفوقية
انتقل إلى خلفيّة وحدد تدرج الخلفية. Définissez la couleur de gauche sur # fff9f2, la couleur de droite sur rgba (255,255,255,0), la direction sur 90 degrés, la position de départ sur 30 % et choisissez Oui pour placer le dégradé au-dessus de l'image d' خلفية. أغلق واحفظ الإعدادات الخاصة بك.
- توقفات متدرجة:
- 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 للخط واضبطه على متوسط ، وأحرف كبيرة ، ومحاذاة لليمين لإصدار سطح المكتب والمحاذاة اليسرى لإصدار الهاتف. اختر # 7b7975 للون.
- عنوان:
- اظهار النص
- الخط: عرض Playfair
- وزن الخط: متوسط
- النمط: TT
- محاذاة النص: الوسط
- لون النص: # 7b7975
اضبط حجم الخط لإصدار سطح المكتب على 14 بكسل ، لإصدار الهاتف المحمول على 10 بكسل ، وتباعد الأحرف إلى 1 بكسل وارتفاع الخط إلى 1,6 إم. أغلق الإعدادات الخاصة بك واحفظ القالب الخاص بك.
- العنوان 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 ويقدم Theme Builder العديد من الخيارات لإنشاء أقسام Hero بملء الشاشة. جميع الأساليب تعمل بشكل جيد للغاية ولكل منها مزاياها.
باستخدام هذه الطرق ، يمكنك إضافة قسم Hero بملء الشاشة إلى أي قالب منشور لمدونة Divi.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
