بإستخدام DIVI كيفية إضافة وتكوين وتخصيص وحدة مدونة 2021
مع Divi ، تعتبر المدونات هي وحدة نمطية ، ويمكن وضع “مدونتك” في أي مكان على موقع الويب الخاص بك ، وبتنسيقات مختلفة. يمكنك الجمع بين وحدات المدونة والشريط الجانبي لإنشاء تصميمات مدونة كلاسيكية. يمكن إنشاء مدونات عمود واحد أو عمودان أو 3 أعمدة باستخدام وحدات المدونة والشريط الجانبي .
في هذا الموضوع سوف نشرح كيفية إضافة وتكوين وتخصيص وحدة مدونة ديفي.
محتوى المقالة
كيفية إضافة وحدة مدونة إلى صفحتك :
قبل أن تتمكن من إضافة وحدة مدونة إلى صفحتك ، ستحتاج أولاً إلى تثبيت Divi Builder. بمجرد تثبيت قالب ديفي على موقع الويب الخاص بك ، ستلاحظ زر استخدام Divi Builder أعلى محرر المقالات في كل مرة تقوم فيها ببناء صفحة جديدة. سيؤدي النقر فوق هذا الزر إلى تمكين Divi Builder ، مما يتيح لك الوصول إلى جميع وحدات Divi Builder. بعد ذلك ، انقر فوق الزر استخدام تصميم Divi لتشغيل المنشئ في الوضع المرئي. يمكنك أيضًا النقر فوق الزر استخدام تصميم Divi عند تصفح موقع الويب الخاص بك على الواجهة الأمامية إذا قمت بتسجيل الدخول إلى لوحة معلومات ووردبريس الخاصة بك.
بمجرد دخولك إلى تصميم Divi ، يمكنك النقر فوق زر علامة + لإضافة وحدة نمطية جديدة إلى صفحتك. لا يمكن إضافة الوحدات النمطية الجديدة إلا داخل الصفوف. إذا كنت تبدأ صفحة جديدة ، فلا تنس إضافة صف إلى صفحتك أولاً.
حدد المدونة ضمن قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة الوحدات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة “مدونة” ثم النقر فوق إدخال للعثور تلقائيًا على وحدة المدونة وإضافتها! بمجرد إضافة الوحدة ، سيتم استقبالك بقائمة خيارات الوحدة. يتم تقسيم هذه الخيارات إلى ثلاث مجموعات رئيسية: المحتوى والتصميم والمتقدم.
هيا بنا نبدأ.
استخدم المنشئ المرئي لإضافة قسم التخصص بالتخطيط التالي:
سيُطلب منك إضافة إما عمود واحد أو صف عمودين او اكثر. اختر صف العمود واحد.
ثم أضف وحدة المدونة إلى الصف.
قم بتحديث إعدادات المدونة على النحو التالي:
خيارات المحتوى
عدد المشاركات: 6
زر قراءة المزيد: ON
إظهار ترقيم الصفحات: NO
لون خلفية بلاط الشبكة: #ffffff
خيارات التصميم
التخطيط: الشبكة
استخدم Dropshadow: ON
لون أيقونة التراكب: #ffffff
تحوم لون التراكب: rgba (224،153،0،0.51)
خط الرأس: افتراضي
حجم خط الرأس: 21 بكسل
لون نص العنوان: # 333333
تباعد حرف الرأس: 1 بكسل
ارتفاع خط الرأس: 1.2em
استخدام الحدود: نعم
لون الحدود: # f0f0f0
عرض الحدود: 1 بكسل
نمط الحدود: صلب
خيارات متقدمة
CSS مخصص (زر قراءة المزيد):
اللون: # e09900 ؛
العرض محجوب؛
محاذاة النص: مركز ؛
أعلى الهامش: 10 بكسل ؛
الحدود: 1px صلب #ccc ؛
الحشو: 5 بكسل ؛
تحويل النص:
تباعد الحروف: 1 بكسل ؛
ينشئ CSS المخصص المتقدم لزر قراءة المزيد مظهرًا مخصصًا يناسب التصميم جيدًا.
في قسم الشريط الجانبي الأيمن لتخطيط قسم التخصص ، ستحتاج إلى إضافة وحدة شريط جانبي تسحب في أداة المشاركات الأخيرة. أدناه ستحتاج إلى إضافة وحدة البريد الإلكتروني Optin Module. وبعد ذلك ، أسفل Email Optin ، تحتاج إلى إضافة وحدة الشخص مع معلومات حول المؤلف.
خيارات محتوى المدونة :
ضمن علامة التبويب “المحتوى” ، ستجد جميع عناصر محتوى الوحدة ، مثل النصوص والصور والرموز. سيتم دائمًا العثور على أي شيء يتحكم في ما يظهر في الوحدة النمطية الخاصة بك في علامة التبويب هذه.
عدد المشاركات : حدد عدد المشاركات التي ترغب في عرضها. ستحتاج إلى إنشاء مشاركات لأي شيء لتظهر داخل هذه الوحدة.
حدد الفئات التي ترغب في تضمينها في موجز النشر. ستظهر هنا أي فئات مقالات قمت بإنشائها لتختارها أو تلغي اختيارها.
الفئات المدرجة :اختر الفئات التي ترغب في تضمينها في الخلاصة.
تنسيق تاريخ ميتا : حدد تنسيق التاريخ الذي ترغب في عرضه على مقالات المدونة الخاصة بك هنا. التخطيط الافتراضي هو تنسيق M j ، Y (6 يناير 2021)
محتوى : لن يؤدي إظهار المحتوى الكامل إلى اقتطاع مشاركاتك على صفحة الفهرس. سيؤدي عرض المقتطف إلى عرض نص المقتطف الخاص بك فقط.
رقم الإزاحة : اختر عدد المشاركات التي ترغب في ازاحتها . إذا قمت بازاحة بثلاث مقالات ، على سبيل المثال ، فلن يتم عرض أول ثلاث مقالات في موجز المدونة الخاص بك.
أظهر الصور المميزة : يتيح لك هذا الخيار اختيار ما إذا كنت ترغب في ظهور الصور المصغرة في وحدة المدونة الخاصة بك أم لا.
زر قراءة المزيد : هنا يمكنك تحديد ما إذا كنت تريد إظهار رابط “قراءة المزيد” بعد المقتطف أم لا.
عرض المؤلف : اختر ما إذا كنت ترغب في عرض مؤلف كل مقال في المدونة أم لا ضمن منطقة تعريف المقال أسفل عنوان المقال.
عرض التاريخ : اختر ما إذا كنت ترغب في عرض التاريخ الذي تم فيه إنشاء كل مقال داخل منطقة التعريف الخاصة بالرسالة أسفل عنوان المقال أم لا.
إظهار الفئات : اختر ما إذا كنت ترغب في عرض فئات المقال أم لا داخل منطقة تعريف المقال أسفل عنوان المقال.
إظهار عدد التعليقات : اختر ما إذا كنت ترغب في عرض عدد التعليقات أم لا ضمن منطقة تعريف المقال أسفل عنوان المقال.
إظهار ترقيم الصفحات : اختر ما إذا كنت تريد عرض ترقيم الصفحات لهذه الخلاصة أم لا. لتمكين ترقيم الصفحات المرقم ، ستحتاج إلى تثبيت اضافة WP Page Navi.
تسمية المسؤول : سيؤدي هذا إلى تغيير تسمية الوحدة في المنشئ لتسهيل التعرف عليها. عند استخدام عرض WireFrame في تصميم Divi ، ستظهر هذه الملصقات داخل كتلة الوحدة النمطية في واجهة Divi Builder.
خيارات تصميم المدونة :
في علامة تبويب التصميم ، ستجد كل خيارات تصميم الوحدة ، مثل الخطوط والألوان والتحجيم والتباعد. هذه هي علامة التبويب التي ستستخدمها لتغيير شكل الوحدة الخاصة بك. تحتوي كل وحدة Divi على قائمة طويلة من إعدادات التصميم التي يمكنك استخدامها لتغيير أي شيء تقريبًا.
تخطيط : يمكنك إما اختيار عرض مقالات المدونة الخاصة بك في شبكة أو تخطيط بعرض كامل.
تراكب الصور المميز : في حالة التمكين ، سيتم عرض لون وأيقونة تراكب عندما يحوم الزائرون فوق الصورة المميزة للمقال.
لون رمز التراكب : يمكنك تحديد لون مخصص لرمز التراكب.
منتقي رمز التمرير : هنا يمكنك تحديد رمز مخصص للتراكب.
لون الخط : إذا تم وضع مدونتك على خلفية فاتحة ، فيجب تعيين لون النص على “داكن”. العكس بالعكس ، إذا تم وضع مدونتك على خلفية داكنة ، يجب تعيين لون النص على “فاتح”.
خط الرأس : يمكنك تغيير خط نص العنوان الخاص بك عن طريق تحديد الخط الذي تريده من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص على صفحتك. يمكنك أيضًا تخصيص نمط النص باستخدام خيارات الخط الغامق والمائل والأحرف الكبيرة والتسطير.
حجم خط الرأس : هنا يمكنك ضبط حجم نص العنوان الخاص بك. يمكنك سحب شريط تمرير النطاق لزيادة حجم النص أو تقليله ، أو يمكنك إدخال قيمة حجم النص المطلوب مباشرةً في حقل الإدخال على يمين شريط التمرير.
لون نص الرأس : بشكل افتراضي ، ستظهر جميع ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت ترغب في تغيير لون نص العنوان ، فاختر اللون الذي تريده من منتقي الألوان باستخدام هذا الخيار.
تباعد حرف الرأس : يؤثر تباعد الأحرف على المسافة بين كل حرف. إذا كنت ترغب في زيادة المسافة بين كل حرف في نص الرأس ، فاستخدم شريط تمرير النطاق لضبط المساحة أو أدخل حجم التباعد المطلوب في حقل الإدخال على يمين شريط التمرير.
ارتفاع خط الرأس : يؤثر ارتفاع السطر على المسافة بين كل سطر من نص الرأس إذا كنت ترغب في زيادة المسافة بين كل سطر ، فاستخدم شريط تمرير النطاق لضبط المسافة أو أدخل حجم التباعد المطلوب في حقل الإدخال على يمين شريط التمرير.
خط النص الأساسي : يمكنك تغيير خط النص الأساسي الخاص بك عن طريق تحديد الخط الذي تريده من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص على صفحتك. يمكنك أيضًا تخصيص نمط النص باستخدام خيارات الخط الغامق والمائل والأحرف الكبيرة والتسطير.
حجم خط النص : هنا يمكنك ضبط حجم النص الأساسي الخاص بك. يمكنك سحب شريط تمرير النطاق لزيادة حجم النص أو تقليله ، أو يمكنك إدخال قيمة حجم النص المطلوب مباشرةً في حقل الإدخال على يمين شريط التمرير.
لون النص الأساسي : بشكل افتراضي ، ستظهر جميع ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت ترغب في تغيير لون نصك الأساسي ، فاختر اللون الذي تريده من منتقي الألوان باستخدام هذا الخيار.
تباعد نص الرسالة : يؤثر تباعد الأحرف على المسافة بين كل حرف. إذا كنت ترغب في زيادة المسافة بين كل حرف في نصك الأساسي ، فاستخدم شريط تمرير النطاق لضبط المسافة أو أدخل حجم التباعد المطلوب في حقل الإدخال على يمين شريط التمرير.
ارتفاع خط الجسم : يؤثر ارتفاع السطر على المسافة بين كل سطر من نصك الأساسي إذا كنت ترغب في زيادة المسافة بين كل سطر ، فاستخدم شريط تمرير النطاق لضبط المسافة أو أدخل حجم التباعد المطلوب في حقل الإدخال على يمين شريط التمرير.
خط ميتا : يمكنك تغيير خط نص التعريف الخاص بك عن طريق تحديد الخط الذي تريده من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص على صفحتك. يمكنك أيضًا تخصيص نمط النص باستخدام خيارات الخط الغامق والمائل والأحرف الكبيرة والتسطير.
حجم الخط الميتا : هنا يمكنك ضبط حجم نص التعريف الخاص بك. يمكنك سحب شريط تمرير النطاق لزيادة حجم النص أو تقليله ، أو يمكنك إدخال قيمة حجم النص المطلوب مباشرةً في حقل الإدخال على يمين شريط التمرير.
لون نص ميتا : بشكل افتراضي ، ستظهر جميع ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت ترغب في تغيير لون نص التعريف الخاص بك ، فاختر اللون الذي تريده من منتقي الألوان باستخدام هذا الخيار.
تباعد حروف التعريف : يؤثر تباعد الأحرف على المسافة بين كل حرف. إذا كنت ترغب في زيادة المسافة بين كل حرف في نص التعريف الخاص بك ، فاستخدم شريط تمرير النطاق لضبط المساحة أو أدخل حجم التباعد المطلوب في حقل الإدخال على يمين شريط التمرير.
ارتفاع خط ميتا : يؤثر ارتفاع السطر على المسافة بين كل سطر من نص التعريف الخاص بك إذا كنت ترغب في زيادة المسافة بين كل سطر ، فاستخدم شريط تمرير النطاق لضبط المسافة أو إدخال حجم التباعد المطلوب في حقل الإدخال على يمين شريط التمرير.
استخدم الحدود : سيؤدي تمكين هذا الخيار إلى وضع حد حول الوحدة النمطية الخاصة بك. يمكن تخصيص هذا الحد باستخدام الإعدادات الشرطية التالية.
لون الحدود : يؤثر هذا الخيار على لون حدودك. حدد لونًا مخصصًا من منتقي الألوان لتطبيقه على حدودك.
عرض الحدود : بشكل افتراضي ، يبلغ عرض الحدود 1 بكسل. يمكنك زيادة هذه القيمة عن طريق سحب شريط تمرير النطاق أو عن طريق إدخال قيمة مخصصة في حقل الإدخال على يمين شريط التمرير.
نمط الحدود : تدعم الحدود ثمانية أنماط مختلفة ، بما في ذلك: صلب ، ومنقط ، ومتقطع ، ومزدوج ، وأخدود ، وحافة ، وإدراج داخلي ، وبداية. حدد النمط الذي تريده من القائمة المنسدلة لتطبيقه على حدودك.
خيارات متقدمة للمدونة :
ضمن علامة التبويب “خيارات متقدمة” ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة داخل ملف style.css Child Theme.
معرف CSS : أدخل معرف CSS اختياريًا لاستخدامه في هذه الوحدة. يمكن استخدام المعرف لإنشاء نمط CSS مخصص ، أو لإنشاء روابط لأقسام معينة من صفحتك.
فئة CSS : أدخل فئات CSS الاختيارية لاستخدامها في هذه الوحدة. يمكن استخدام فئة CSS لإنشاء نمط CSS مخصص. يمكنك إضافة فئات متعددة ، مفصولة بمسافة. يمكن استخدام هذه الفئات في Divi Child Theme الخاص بك أو داخل CSS المخصص الذي تضيفه إلى صفحتك أو موقع الويب الخاص بك باستخدام خيارات قالب ديفي أو إعدادات صفحة Divi Builder.
لغة تنسيق ويب حسب الطلب : يمكن أيضًا تطبيق CSS المخصص على الوحدة وأي من العناصر الداخلية للوحدة. ضمن قسم CSS المخصص ، ستجد حقل نص حيث يمكنك إضافة CSS مخصص مباشرة إلى كل عنصر. تم بالفعل تغليف مدخلات CSS في هذه الإعدادات بعلامات الأنماط ، لذلك تحتاج فقط إلى إدخال قواعد CSS مفصولة بفواصل منقوطة.
الرؤية : يتيح لك هذا الخيار التحكم في الأجهزة التي تظهر عليها وحدتك. يمكنك اختيار تعطيل الوحدة الخاصة بك على الأجهزة اللوحية أو الهواتف الذكية أو أجهزة كمبيوتر سطح المكتب بشكل فردي. يعد هذا مفيدًا إذا كنت تريد استخدام وحدات نمطية مختلفة على أجهزة مختلفة ، أو إذا كنت ترغب في تبسيط تصميم الهاتف المحمول عن طريق إزالة عناصر معينة من الصفحة.
