4 أمثلة مذهلة لوحدة عنوان مشاركة Divi وكيفية تحقيقها

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

هيا بنا نبدأ!

نظرة خاطفة

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

# 1 تأطير مجردة

ابدأ المبنى رقم 1

# 2 نص متداخل وصورة مميزة

ابدأ المبنى رقم 2

# 3 خلفيات محتوى فريدة لسهولة القراءة

ابدأ المبنى رقم 3

# 4 تأثير التراص مع الصور المميزة المزدوجة

ابدأ المبنى رقم 4

ابدء

اشترك في قناتنا على اليوتيوب

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

الإعداد للوظائف الجديدة

في هذا البرنامج التعليمي ، سأستخدم Divi Builder لبناء مثال لتصميمات عنوان المنشور في منشور جديد. من أجل الحصول على الإعداد للبنيات في هذا البرنامج التعليمي ، سوف تحتاج إلى القيام بما يلي:

1. أنشئ منشورًا جديدًا.
2. أضف عنوانا لمنشورك.
3. أضف صورة مميزة لمنشورك.
4. انشر Divi Builder.
5. اختر البناء من الصفر
6. ضمن إعدادات صفحة Divi ، حدد تخطيط صفحة No Sidebar وحدد إخفاء عنوان المنشور.
7. ثم انقر فوق إنشاء في الواجهة الأمامية أو نشر وضع عرض سطح المكتب على الواجهة الخلفية بحيث يمكنك تصميم الصفحة بشكل مرئي.

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

# 1 تأطير مجردة

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

هيريس كيفية القيام بذلك.

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

في إعدادات عنوان المنشور ، اضبط موضع الصورة المميزة كما يلي:

وضع الصورة المميزة: فوق العنوان

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

تدرج الخلفية اللون الأيسر: rgba (0،0،0،0.06)
تدرج الخلفية اللون الأيمن: rgba (0،0،0،0)
نوع التدرج: شعاعي
الاتجاه الشعاعي: أسفل اليمين
موقف البداية: 10٪
موقف النهاية: 0٪

تابع تحديث باقي التصميم كالتالي:

خط العنوان: Josefin Sans
محاذاة نص العنوان: صحيح
حجم نص العنوان: 36 بكسل
ارتفاع خط العنوان: 1.7em (سطح المكتب) ، 1.3em (الكمبيوتر اللوحي والهاتف الذكي)
خط ميتا: جوزفين سانس
نمط الخط الميتا: TT
محاذاة نص التعريف: يسار
تباعد حروف التعريف: 2 بكسل
ارتفاع خط ميتا: 2em
الهامش المخصص: أعلى 5vw
الحشو المخصص: 5vw top ، 5vw bottom ، 5vw left ، 5vw right
عرض الحد الأيمن: 4 بكسل

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

الآن دعنا نضيف عنصر تصميم مجرد باستخدام ظل الصندوق:

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 112 بكسل
مربع الظل الرأسي: 85 بكسل
قوة انتشار الظل المربع: -80 بكسل
لون الظل: rgba (224،43،32،0.3)

احفظ التغييرات.

افتح الآن إعدادات الصف لتغيير حجمه وإنشاء الجانب الأيسر من تصميم الإطار باستخدام حد وظل مربع.

العرض المخصص: 700 بكسل
عرض الحد الأيمن: 4 بكسل

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 112 بكسل
مربع الظل الرأسي: 85 بكسل
قوة انتشار الظل المربع: -80 بكسل
لون الظل: rgba (224،43،32،0.3)

الآن دعنا نتحقق من التصميم النهائي.

# 2 نص متداخل وصورة مميزة

قم بإنشاء قسم جديد بصف من عمودين. ثم أضف وحدة صورة في العمود الأيسر.

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

أضف الآن وحدة عنوان المنشور إلى العمود الأيمن. افتح الإعدادات وقم بإخفاء الصورة المميزة عن طريق تعيين خيار إظهار الصورة المميزة على NO.

ثم أضف تدرجًا في الخلفية إلى وحدة عنوان المنشور.

لون الخلفية المتدرج الأيسر: #ffffff
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)

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

قم بتحديث باقي التصميم على النحو التالي:

خط العنوان: Fira Sans Condensed
وزن خط العنوان: خفيف للغاية
حجم نص العنوان: 80 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 45 بكسل (هاتف ذكي)
خط التعريف: Fira Sans Condensed
نمط الخط الميتا: TT
محاذاة نص ميتا: صحيح
لون نص التعريف: #cccccc
تباعد حروف التعريف: 2 بكسل
الهامش المخصص: -20٪ متبقي (سطح المكتب) ، 0٪ (كمبيوتر لوحي وهاتف ذكي)
الحشو المخصص: 5vw top، 5vw bottom، 30px left

الآن دعنا نعطيه مربع الظل لإنشاء خط تحت العنوان.

Box Shadow: انظر لقطة الشاشة
مربع الظل الأفقي: 80 بكسل
مربع الظل الرأسي: 82 بكسل
قوة انتشار الظل المربع: -80 بكسل

احفظ الإعداد وافتح إعدادات الصف لضبط عرض الحضيض.

عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم

الآن تحقق من التصميم النهائي.

تصميم صورة مدورة بديلة

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

زوايا دائرية: 50٪

ثم افتح إعدادات الصف وأضف CSS المخصص التالي ضمن العنصر الرئيسي:

align-items: center;

يعمل هذا فقط إذا كان لديك Equalize Column Heights مضبوطًا على YES والذي ينشط خاصية flex التي تسمح لنا بمحاذاة العناصر رأسيًا.

ها هو التصميم النهائي.

# 3 خلفيات محتوى فريدة لسهولة القراءة

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

إليك كيفية القيام بذلك.

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

ثم قم بتحديث إعدادات وحدة عنوان المنشور لإخفاء الصورة المميزة.

خط العنوان: Abril Fatface
لون نص العنوان: # 121212
حجم نص العنوان: 75 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 30 بكسل (هاتف ذكي)
تباعد حروف العنوان: 2 بكسل
ارتفاع خط العنوان: 1.1em
خط التعريف: Roboto Condensed
لون نص التعريف: #ffffff
حجم نص التعريف: 16 بكسل
تباعد حروف التعريف: 2 بكسل
ارتفاع خط ميتا: 2em
العرض: 60٪ (كمبيوتر مكتبي) ، 90٪ (كمبيوتر لوحي) ، 100٪ (هاتف ذكي)
حشوة مخصصة: 3vw يسار

الآن دعنا نضيف ظل مربع ليكون بمثابة خلفية لنص التعريف وجعله قابلاً للقراءة.

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الرأسي: -32 بكسل
لون ظل الصندوق: # 121212

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

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

تدرج الخلفية اللون الأيسر: rgba (255،255،255،0.76)
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)
نوع التدرج: شعاعي
اتجاه شعاعي: أعلى اليسار
موقف البداية: 40٪
موقف النهاية: 0٪
وضع التدرج فوق صورة الخلفية: نعم

الآن دعونا نرى التصميم النهائي.

# 4 تأثير التراص مع الصور المميزة المزدوجة

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

هيريس كيفية القيام بذلك.

قم بإنشاء قسم جديد بصف من عمود واحد. ثم أضف وحدة النشر إلى الصف وقم بتحديث موضع الصورة المميزة إلى Title / Meta Background Image.

ثم قم بتحديث إعدادات التصميم على النحو التالي:

لون النص: فاتح
لون خلفية النص: rgba (1،59،104،0.79)
اتجاه النص: الوسط
خط العنوان: Roboto Condensed
وزن خط العنوان: خفيف
حجم نص العنوان 70 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 30 بكسل (هاتف ذكي)
ارتفاع خط العنوان: 1.3em
وزن الخط الميتا: خفيف
نمط الخط الميتا: TT
لون نص التعريف: #cccccc
تباعد الحروف الوصفية: 1 بكسل
الحشو المخصص: 10vw أعلى ، 0 بكسل أسفل

الآن دعنا نضيف ظل الصندوق الأول لإنشاء طبقة التراص الأولى.

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الوضع الرأسي: -46 بكسل
لون الظل: #ffffff

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

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

تدرج الخلفية ، اللون الأيسر: rgba (1،59،104،0.79)
تدرج الخلفية اللون الأيمن: rgba (1،59،104،0.79)
وضع التدرج فوق صورة الخلفية: نعم

يُعد تصميم خلفية الصورة المميزة الإضافية طريقة فريدة لمنح عنوان المنشور تصميمًا فريدًا سيتغير ديناميكيًا مع كل صورة مميزة جديدة.

بعد ذلك ، أضف بعض المساحة المتروكة المخصصة.

الحشو المخصص (سطح المكتب): 10vw أعلى ، 0 بكسل أسفل
الحشو المخصص (الهاتف الذكي): 0vw أعلى ، 0 بكسل أسفل

ثم أضف ظل مربع آخر لمواصلة تأثير التراص.

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
الوضع الرأسي للظل المربع: -92 بكسل
لون الظل: #ffffff

لإنهاء التصميم ، افتح إعدادات الصف وقم بتحديث ما يلي:

اجعل هذا الصف بعرض كامل: نعم
عرض الحضيض: 1
الحشو المخصص (سطح المكتب): 0 بكسل أعلى ، 0 بكسل أسفل ، 6٪ يسار ، 6٪ يمين
الحشو المخصص (الهاتف الذكي: 0 بكسل للأعلى ، 0 بكسل للأسفل ، 0٪ يسار ، 0٪ يمين

الآن تحقق من التصميم النهائي.

افكار اخيرة

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

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!