كيفية إنشاء مدونة ذات نمط متوسط باستخدام Divi

نشرت: 2017-07-06

في منشور مدونة Divi اليوم ، سنشارك بعض النصائح الرائعة حول كيفية إنشاء موقع التدوين الخاص بك بنفس أسلوب مدونة Medium.

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

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

هيا بنا نبدأ

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

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

سنوضح لك أيضًا كيفية إضافة الإضافات Worth The Read and Highlight and Share لجعلها تبدو أكثر تشابهًا. تبدو نتيجة Worth The Read كما يلي:

وسيكون لـ Highlight and Share التأثير التالي:

قم بإنشاء قائمة مبسطة مثل مدونة Medium

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

عناصر القائمة

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

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

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

بالنسبة للمثال أعلاه ، استخدمنا الإعدادات التالية لشريط القوائم الأساسي في مُخصص السمة:

ارتفاع القائمة: 54
أقصى ارتفاع للشعار: 37
حجم النص: 18

استخدم لوحة الألوان مع خطوط التباين والبساطة

تستخدم مدونة Medium ثلاثة ألوان رئيسية في نظامها الأساسي مما يجعل المحتوى سهل القراءة. على الرغم من أن لونين قد يظهران وكأنهما أبيض وأسود ، إلا أنهما أكثر نعومة على العينين. والثالث لونه رمادي فاتح ولكن يمكن قراءته. قم بإجراء التعديلات التالية على Primary Menu Bar في Theme Customizer لتغيير الألوان والخط المستخدم في القائمة الأساسية:

الخط: Source Sans Pro
لون النص: rgba (0،0،0، .44)
لون الارتباط النشط: rgba (0،0،0، .44)
لون الخلفية: #fbfcfd

تضمين أيقونة البحث

علاوة على ذلك ، لتضمين رمز البحث في قائمتك الأساسية ، انتقل إلى Header & Navigation> Header Elements> إظهار رمز البحث.

تعطيل شريط التنقل الثابت

شيء آخر تفعله مدونة Medium هو الاحتفاظ بشريط التنقل في أعلى الصفحة. بهذه الطريقة ، لا تتم مقاطعة الزوار دون داعٍ أثناء القراءة. لتعطيل شريط التنقل الثابت على موقع Divi الخاص بك ، انتقل إلى لوحة WordPress الخاصة بك> Divi> خيارات السمة> الإعدادات العامة> تعطيل شريط التنقل الثابت.

صمم وحدات مدونة صفحتك الرئيسية حسب الفئات

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

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

البرنامج المساعد بطاقة المادة Divi

المكوّن الإضافي Divi Article Card هو مكون إضافي مجاني تمت مشاركته على مدونتنا خلال Divi 100. النمط المستخدم في هذا البرنامج المساعد نظيف وله تأثير تمرير لطيف. إنه تأثير بسيط ولكنه يمكن أن يخلق لمسة إضافية صغيرة لمدونتك.

البرنامج المساعد مجاني تمامًا ، ما عليك سوى الانتقال إلى المنشور وتنزيله!

وحدة مدونة Divi المخصصة

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

سعر البرنامج المساعد هو 20 دولارًا.

إضافات مدونة ديفي

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

يُباع المكون الإضافي بسعر 15 دولارًا أمريكيًا لترخيص الموقع الفردي و 30 دولارًا أمريكيًا للترخيص الموسع.

إنشاء قالب منشور مدونة

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

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

إعدادات مشاركة Divi

ابدأ بإضافة منشور جديد ، ومنحه عنوانًا وتفعيل Divi builder. بعد ذلك ، تأكد من أن إعدادات Divi Post هي التالية:

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

المؤلف (سطح المكتب)

لعمل التخطيط ، سننتقل إلى Visual Builder. ابدأ بإضافة قسم جديد بصفين. تابع عن طريق إضافة وحدة صورة إلى العمود الأول ووحدتين للنص إلى العمود الثاني. افتح إعدادات القسم وأضف اختر "#fbfcfd" كلون للخلفية.

وحدة الصورة

افتح وحدة الصورة ، وقم بتحميل الصورة في علامة التبويب المحتوى وضع محاذاة الصورة على "اليسار" في علامة التبويب التصميم. بالانتقال ، أضف "-5٪" إلى الهامش العلوي و "25٪" إلى الهامش الأيسر في فئة التباعد الفرعية في علامة التبويب "تصميم".

بعد ذلك ، أضف الكود التالي إلى العنصر الرئيسي في فئة CSS المخصصة الفرعية في علامة التبويب خيارات متقدمة:

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

أول وحدة نصية

أضف اسم المؤلف في Content Box ضمن علامة التبويب Content وقم بإجراء التعديلات التالية على فئة النص الفرعية في علامة التبويب Design:

اتجاه النص: يسار
خط النص: Source Sans Pro
حجم خط النص: 18
لون النص: rgba (0،0،0،0.8)
ارتفاع خط النص: 1.7em

قم بالتمرير لأسفل في نفس علامة التبويب لإضافة "-3٪" إلى الهامش العلوي و "-70٪" إلى الهامش الأيسر.

وحدة النص الثانية

اكتب سطر الوصف في وحدة النص الثانية وقم بإجراء التعديلات التالية على الفئة الفرعية للنص في علامة التبويب التصميم:

اتجاه النص: يسار
خط النص: Source Sans Pro
حجم خط النص: 14
لون النص: rgba (0،0،0،0.44)
ارتفاع خط النص: 1.7em

بالإضافة إلى ذلك ، قم بالتمرير لأسفل في نفس علامة التبويب وأضف "-5٪" إلى الهامش العلوي و "-70٪" إلى الهامش الأيسر في فئة التباعد الفرعية.

رؤية الصف

أخيرًا ، افتح إعدادات الصف وقم بتعطيل الصف على الهواتف والأجهزة اللوحية في فئة الرؤية الفرعية لعلامة التبويب خيارات متقدمة.

المؤلف (الجوال)

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