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

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

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

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

حدد موقع وحدة المدونة في قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة الوحدات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة "مدونة" ثم النقر فوق إدخال للبحث تلقائيًا عن وحدة المدونة وإضافتها! بمجرد إضافة الوحدة ، سيتم استقبالك بقائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .

استخدم حالة وحدة المدونة مع تخطيط شبكة في قسم متخصص مع شريط جانبي يمين

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

هذا ما تبدو عليه صفحة المثال.

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

دعونا نبدأ.

استخدم أداة البناء المرئي لإضافة قسم متخصص بالتخطيط التالي:

سيُطلب منك إضافة عمود أو صف عمودين على الجانب الأيسر. اختر عمود الصف 1.

ثم أضف وحدة المدونة إلى السطر.

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

خيارات المحتوى

عدد المشاركات: 6
معرفة المزيد زر: ON
عرض ترقيم الصفحات: لا
لون خلفية الشبكة: # fffff

خيارات التصميم

تخطيط: الشبكة
استخدام Dropshadow: ON
تراكب رمز اللون: #ffffff
تحوم تراكب اللون: rgba (224,153,0,0.51) رأس
شرطة:
رأس حجم الخط: 21px
لون نص الرأس: # 333333
تباعد الحروف: 1px
ارتفاع صف الرأس: 1.2 em
الحدود: نعم
لون الحدود: # f0f0f0
عرض الحد: 1px
نمط الحدود: الصلبة

خيارات avancées

CSS مخصص (اقرأ المزيد زر):

اللون: # e09900 ؛
عرض كتلة.
مواءمة النصوص: المركز؛
أعلى هامش: 10px؛
الحد: 1px صلب #ccc؛
الحشو: 5px ؛
تحويل النص:
تباعد الحروف: 1px؛

يقوم زر CSS المخصص المتقدم للزر "قراءة المزيد" بإنشاء مظهر مخصص يطابق التصميم.

في قسم الشريط الجانبي الأيمن لتخطيط قسم المتخصص ، ستحتاج إلى إضافة وحدة شريط جانبي تُدرج أداة النشرات الأخيرة. أدناه سوف تحتاج إلى إضافة وحدة البريد الإلكتروني Optin. ثم ضمن Email Optin ، تحتاج إلى إضافة وحدة نمطية الشخص مع معلومات المؤلف.

هذا كل شيئ !

خيارات محتوى المدونة

في علامة التبويب "المحتوى" ، ستجد جميع عناصر محتوى الوحدة ، مثل النصوص والصور والرموز. كل ذلك يتحكم مما يظهر في الوحدة النمطية الخاصة بك سيكون دائما في علامة التبويب هذه.

رقم الصنف (عدد العناصر)

قم بتعيين عدد الرسائل التي تريد عرضها. ستحتاج إلى رسائل لكل ما يظهر في هذه الوحدة.

حدد الفئات التي تريد تضمينها في موجز النشر. ستظهر هنا جميع فئات الرسائل التي قمت بإنشائها لتحديد / إلغاء الاختيار.

الفئات المدرجة

اختر الفئات التي تريد تضمينها في الخلاصة.

تنسيق التاريخ الفوقية

قم بتعيين تنسيق التاريخ الذي تريد عرضه في منشورات المدونة الخاصة بك هنا. التخطيط الافتراضي هو تنسيق M j ، Y (6 يناير 2014) راجع ملف مخطوطة ووردبريس في تنسيقات التاريخ لمزيد من الخيارات.

محتويات

لن يؤدي إظهار المحتوى الكامل إلى اقتطاع مشاركاتك على صفحة الفهرس. سيعرض "إظهار المقتطف" نص مقتطفك فقط.

إزاحة رقم

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

أظهر الصور المميزه

يتيح لك هذا الخيار اختيار ما إذا كنت تريد ظهور الصور المصغرة في وحدة المدونة أم لا.

قراءة المزيد من زر

هنا يمكنك تعيين ما إذا كنت تريد إظهار رابط "قراءة المزيد" بعد المقتطف أم لا.

عرض المؤلف

اختر ما إذا كنت تريد عرض مؤلف كل منشور في المدونة أم لا في مربع تعريف المنشور أسفل عنوان المنشور.

إظهار التاريخ

اختر ما إذا كنت ترغب في عرض التاريخ الذي تم فيه إنشاء كل مقالة في مربع "عنصر التعريف" أسفل عنوان الرسالة أم لا.

عرض الفئات

اختر ما إذا كنت تريد عرض فئات المنشورات أو عدم عرضها في منطقة منشورات النشر أسفل عنوان المنشور.

عرض عدد التعليقات

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

عرض الصفحات

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

تسمية الإدارة

سيؤدي هذا إلى تغيير تسمية الوحدة في المولد لسهولة التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، ستظهر هذه الملصقات في كتلة الوحدة لواجهة Divi Builder.

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

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

توفير

يمكنك اختيار عرض منشورات المدونة الخاصة بك في شبكة أو تخطيط كامل العرض.

صورة متراكبة

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

لون رمز التراكب

هنا يمكنك تعيين لون مخصص لرمز التراكب.

تغطية اللون تحوم

هنا يمكنك تحديد لون مخصص للتراكب.

تحوم أيقونة المنتقى

هنا يمكنك تحديد أيقونة مخصصة للتراكب.

لون النص

Si بلوق الخاص بك على خلفية فاتحة، يجب ضبط لون النص على "داكن". تأشيرة، نعم بلوق الخاص بك على خلفية داكنة، يجب ضبط لون النص على "فاتح".

خط الرأس

يمكنك تغيير خط العنوان الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص الخاص بك باستخدام خيارات غامقة ومائلة وكبيرة وتسطير.

حجم خط الرأس

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

لون نص الرأس

بشكل افتراضي ، تظهر كل ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت تريد تغيير لون الرأس ، فاختر اللون الذي تريده من منتقي الألوان باستخدام هذا الخيار.

تباعد حرف الرأس

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

ارتفاع صف الرأس

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

خط الجسم

يمكنك تغيير خط الجسم الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص الخاص بك باستخدام خيارات غامقة ومائلة وكبيرة وتسطير.

حجم خط الجسم

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

لون نص الهيكل

بشكل افتراضي ، تظهر كل ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت تريد تغيير لون النص الأساسي ، فاختر اللون المطلوب من منتقي الألوان باستخدام هذا الخيار.

تباعد حروف الجسم

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

ارتفاع خط الجسم

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

الخط ميتاس

يمكنك تغيير خط النص الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص الخاص بك باستخدام خيارات غامقة ومائلة وكبيرة وتسطير.

حجم الخط ميتاس

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

لون النص للفوقية

بشكل افتراضي ، تظهر كل ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت تريد تغيير لون نصك الوصفي ، فاختر اللون الذي تريده من منتقي الألوان باستخدام هذا الخيار.

تباعد الحروف الفوقية

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

ميتا خط الطول

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

استخدم الحدود

سيؤدي تمكين هذا الخيار إلى وضع حد حول الوحدة النمطية الخاصة بك. يمكن تخصيص هذا الحد باستخدام المعلمات الشرطية التالية.

لون الحدود

يؤثر هذا الخيار على لون حدودك. حدد لونًا مخصصًا من منتقي الألوان لتطبيقه على حدودك.

عرض الحدود

بشكل افتراضي ، تكون الحدود بعرض 1 بكسل. يمكنك زيادة هذه القيمة عن طريق سحب شريط تمرير النطاق أو إدخال قيمة مخصصة في حقل الإدخال إلى يمين شريط التمرير. وحدات القياس المخصصة المدعومة ، مما يعني أنه يمكنك تغيير الوحدة الافتراضية من "px" إلى شيء آخر مثل em ، vh ، vw إلخ.

نمط الحدود

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

خيارات بلوق المتقدمة

في علامة التبويب خيارات متقدمة ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة في ملف style.css لموضوع الطفل.

معرف CSS

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

فئة CSS

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

عرف المغلق

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

رؤية

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

هذا كل شيء في هذا البرنامج التعليمي.