برنامج Divi التعليمي: كيفية استخدام وحدة الملاحة في المقالات

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

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

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

مثال لحالة الاستخدام: إضافة روابط تنقل مخصصة إلى أسفل منشور مدونة

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

دعونا نبدأ.

استخدم المنشئ المرئي لإضافة قسم قياسي بتخطيط كامل العرض (عمود واحد) في أسفل المنشور. ثم أضف وحدة تنقل بعد السطر.

تحديث إعدادات التنقل النشر على النحو التالي:

علامة تبويب المحتوى

نص الارتباط السابق:٪ title (هذا المتغير يدخل عنوان المقالة)
نص الرابط التالي:٪ title (هذا المتغير يدخل عنوان المقال)

علامة تبويب التصميم

ارتباطات الخطوط: PT Sans
حجم الخط وصلات: 20px
لون نص الرابط: # 5e95c1
استخدم الحدود: نعم
لون الحدود: # 5e95c1
عرض الحد: 1px
مواد تنجيد مخصصة: 20px Top ، 20px Right ، 20px Bottom ، 20px Left

هذا كل شيئ ! لديك الآن عناوين وظيفة على روابط التنقل

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

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

نص الرابط السابق

تحديد نص مخصص للارتباط السابق. يمكنك استخدام متغير العنوان٪ لتضمين عنوان المقالة. اتركه فارغا للافتراضي.

نص الرابط التالي

تحديد نص مخصص للارتباط التالي. يمكنك استخدام متغير العنوان٪ لتضمين عنوان المنشور. اتركه فارغا للافتراضي.

في نفس الفئة

يمكنك هنا تحديد ما إذا كانت المقالات السابقة والتالية يجب أن تكون في نفس مصطلح التصنيف مثل المقالة الحالية.

اسم التصنيف المخصص

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

إخفاء الرابط السابق

هنا يمكنك اختيار إخفاء أو إظهار الارتباط السابق.

إخفاء الرابط التالي

هنا يمكنك اختيار إخفاء أو إظهار الرابط التالي.

علامة المسؤول

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

خيارات التصميم بعد التنقل

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

خط الروابط

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

حجم خط الرابط

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

لون النص من الروابط

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

تباعد وصلات الحروف

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

ارتفاع خط الروابط

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

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

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

لون الحدود

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

عرض الحدود

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

نمط الحدود

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

هامش مخصص

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

الحشو مخصص

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

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

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

معرف CSS

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

فئة CSS

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

عرف المغلق

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

رؤية

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

[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

برنامج Divi التعليمي: كيفية استخدام وحدة الملاحة في المقالات

مثال لحالة الاستخدام: إضافة روابط تنقل مخصصة إلى أسفل منشور مدونة