كيفية إنشاء قالب منشور مدونة بسيط صديق لتجربة المستخدم ديناميكيًا باستخدام Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب منشور مدونة بسيط سهل الاستخدام لتجربة المستخدم مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

1. انتقل إلى Divi Theme Builder وقم بإنشاء قالب جديد

انتقل إلى Divi Theme Builder

ابدأ بالذهاب إلى Divi Theme Builder.

إنشاء قالب جديد

أنشئ نموذجًا جديدًا واستخدمه في جميع مشاركاتك.

• الاستخدام في: جميع المنشورات

2. ابدأ في بناء نص المدونة

بعد ذلك ، ابدأ في إنشاء نص مخصص لقالب المنشور الخاص بك.

أضف الصف رقم 1 إلى المقطع الحالي

هيكل العمود

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

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

العمود 1 و 2 الحدود

أضف حدًا أيمنًا إلى العمود الأول والثاني بعد ذلك.

• عرض الحد الأيمن: 1 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• لون الحد الأيمن: # 333333

أضف وحدة نصية إلى كل عمود

محتوى ديناميكي

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

• وحدة النص في العمود 1: فئات المشاركة

• وحدة النص في العمود 2: تاريخ النشر

• وحدة النص في العمود 3: عدد التعليقات
• بعد: التعليقات

إعدادات النص

انتقل إلى علامة تبويب تصميم كل وحدة وتغيير إعدادات النص على النحو التالي:

• خط النص: لاتو
• حجم النص: 1.1rem
• تباعد حروف النص: 1 بكسل
• ارتفاع خط النص: 2em

أضف الصف رقم 2

هيكل العمود

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

أضف وحدة نصية # 1 إلى العمود

محتوى ديناميكي

أضف وحدة نصية وحدد محتوى عنوان المنشور الديناميكي.

• المحتوى الديناميكي: عنوان المشاركة

• قبل: <H1>
• بعد: </H1>

إعدادات نص H1

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات نص H1 على النحو التالي:

• خط العنوان: عرض Playfair
• محاذاة نص العنوان: الوسط
• حجم نص العنوان: 6.2rem (سطح المكتب) ، 3.2rem (الجهاز اللوحي) ، 2.3rem (الهاتف)

تباعد

أضف بعض الهامش العلوي والسفلي المخصص بعد ذلك.

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 100 بكسل

أضف وحدة نصية رقم 2 إلى العمود

محتوى ديناميكي

أضف وحدة نصية أخرى أسفل الوحدة السابقة مباشرةً وحدد محتوى المنشور الديناميكي المقتطف.

• المحتوى الديناميكي: مشاركة مقتطفات

إعدادات النص

قم بتغيير إعدادات نص الوحدة كما يلي:

• خط النص: لاتو
• حجم النص: 1.1rem
• تباعد حروف النص: 1 بكسل
• ارتفاع خط النص: 2em
• محاذاة النص: الوسط

أضف الصف رقم 3

هيكل العمود

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

عرض

تأكد من بقاء الأعمدة بجوار بعضها البعض عن طريق إضافة سطر واحد من كود CSS إلى العنصر الرئيسي للصف.

display: flex;

أضف وحدة الصورة النمطية إلى العمود 1

محتوى ديناميكي

تابع بإضافة وحدة صورة إلى العمود 1 وحدد المحتوى الديناميكي لصورة ملف تعريف المؤلف.

• المحتوى الديناميكي: صورة الملف الشخصي للمؤلف

انتقام

انتقل إلى علامة تبويب تصميم الوحدة وتغيير محاذاة الصورة.

• محاذاة الصورة: صحيح

تحجيم

قم بتعديل العرض بعد ذلك.

• العرض: 50 بكسل

تباعد

أضف بعض الهامش الصحيح على الجهاز اللوحي والهاتف.

• الهامش الأيمن: 20 بكسل (الجهاز اللوحي والهاتف)

الحدود

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

• جميع الزوايا: 100 بكسل

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

محتوى ديناميكي

في العمود الثاني ، سنحتاج إلى وحدة نصية. حدد المحتوى الديناميكي لمؤلف المنشور.

• المحتوى الديناميكي: كاتب المشاركة

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: لاتو
• حجم النص: 1.1rem
• تباعد حروف النص: 1 بكسل

تباعد

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

• الهامش العلوي: 15 بكسل
• الهامش الأيسر: 20 بكسل (الجهاز اللوحي والهاتف)

أضف الصف رقم 4

هيكل العمود

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

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

اترك مربع المحتوى فارغًا

أضف وحدة نصية إلى العمود وتأكد من ترك مربع المحتوى فارغًا.

صورة خلفية ديناميكية

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

• المحتوى الديناميكي: صورة مميزة

تحجيم

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

• العرض: 800 بكسل (سطح المكتب) ، 500 بكسل (جهاز لوحي) ، 300 بكسل (هاتف)
• محاذاة الوحدة: المركز

تباعد

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

• الحشوة العلوية: 400 بكسل (سطح المكتب) ، 250 بكسل (جهاز لوحي) ، 150 بكسل (هاتف)
• الحشوة السفلية: 400 بكسل (سطح المكتب) ، 250 بكسل (جهاز لوحي) ، 150 بكسل (هاتف)

الحدود

وأضف بعض نصف قطر الحد إلى إعدادات الحدود لتحويل الوحدة إلى دائرة.

• جميع الزوايا: 500 بكسل

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

إلى القسم العادي التالي.

أضف الصف رقم 1

هيكل العمود

أضف صفًا جديدًا باستخدام بنية العمود التالية:

أضف وحدة محتوى النشر إلى العمود

إعدادات النص

أضف وحدة محتوى النشر إلى العمود ، وانتقل إلى علامة تبويب تصميم الوحدة وتغيير إعدادات النص وفقًا لذلك:

• خط النص: لاتو
• حجم النص: 1.1rem
• تباعد حروف النص: 1 بكسل
• ارتفاع خط النص: 2.3em

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

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

• خط العنوان: عرض Playfair
• حجم نص H2: 3.5rem (سطح المكتب) ، 2rem (تابلت وهاتف)
• حجم نص H3: 2.5rem (سطح المكتب) ، 1.5rem (تابلت وهاتف)
• حجم نص H4: 2.3rem (سطح المكتب) ، 1.3rem (جهاز لوحي وهاتف)
• حجم النص H5 & H6: 2rem (سطح المكتب) ، 1rem (الجهاز اللوحي والهاتف)

أضف الصف رقم 2

هيكل العمود

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

تباعد

أضف بعض الهامش العلوي المخصص للصف.

• الهامش الأعلى: 100 بكسل

أضف وحدة التعليق إلى العمود

إعدادات الحقول

الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة التعليق. قم بتغيير إعدادات الحقول على النحو التالي:

• لون خلفية الحقول: #ffffff
• خط الحقول: Lato
• حجم نص الحقول: 1.1rem

• جميع الزوايا: 0 بكسل
• عرض حدود الحقول: 1 بكسل
• لون حدود الحقول: # 000000

إعدادات الصورة

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

• جميع الزوايا: 100 بكسل

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

بعد ذلك ، قم بتعديل إعدادات نص العنوان.

• مستوى عنوان العنوان: H2
• خط العنوان: عرض Playfair
• حجم نص العنوان: 3rem (سطح المكتب) ، 2rem (الجهاز اللوحي والهاتف)
• ارتفاع خط العنوان: 1.4em

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

صمم نصوص التعريف أيضًا.

• Meta Font: عرض Playfair
• حجم نص التعريف: 1.4rem

إعدادات نص التعليق

نستخدم الإعدادات التالية لإعدادات نص التعليق:

• خط التعليق: Lato
• حجم نص التعليق: 1.1rem
• تباعد أحرف التعليق: 1 بكسل
• ارتفاع خط التعليق: 2em

إعدادات نص الزر

وأكمل إعدادات الوحدة من خلال تصميم الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1.1rem
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 1 بكسل
• خط الزر: Lato

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

3. حفظ تغييرات منشئ القالب والقالب

بمجرد الانتهاء من تصميم القالب ، احفظ جميع تغييرات Divi Theme Builder وقم بمعاينة النتيجة في مشاركاتك!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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