هل ترغب في إنشاء شريط تنقل بين المشاركات الثابتة في Divi؟
يعد شريط التنقل اللزج وسيلة فعالة لتحسين تجربة المستخدم في أي منها موقع انترنت من بلوق. بالإضافة إلى التنقل الرئيسي بموقعك، تسمح روابط التنقل للنشر للمستخدمين بالانتقال بسهولة إلى المنشور السابق أو المنشور التالي بلوق الخاص بك. وإذا قمت بإضافة روابط التنقل هذه إلى شريط لاصق، فستظل هذه الروابط مرئية ويمكن الوصول إليها بسهولة.
في هذا البرنامج التعليمي ، سننشئ شريط التنقل بين المنشور اللاصق في Divi. للقيام بذلك، سوف نستخدم خيارات Divi المضمنة لتحويل الصف إلى شريط لاصق. بعد ذلك، سنستخدم وحدة التنقل الخاصة بالمقالة لتصميم روابط "المقالة السابقة" و"المقالة التالية".
بالإضافة إلى ذلك ، سنضيف عنوان منشور كمحتوى ديناميكي في منتصف الشريط لتذكير المستخدمين بالمنشور الذي يشاهدونه حاليًا ، مما يمنح شريط التنقل عنصرًا رائعًا "الماضي والحاضر والمستقبل".
لنبدأ!
مسح
إليك نظرة سريعة على التصميم الذي سنقوم بإنشائه في هذا البرنامج التعليمي.
ما تحتاجه للبدء
بينما يمكنك إضافة شريط تنقل المنشور اللاصق هذا إلى أي تخطيط أو قالب لنشر مدونة في Divi ، سنستخدم قالب منشور مدونة مُعد مسبقًا لتسريع العملية وبدء التصميم بسرعة.
قم باستيراد قالب منشور مدونة "Meal Kit" إلى Divi Theme Builder
للبدء ، قم بتنزيل ملف قالب منشور مدونة مجاني لـ Divi's Meal Kit Layout Pack . للقيام بذلك ، انتقل إلى مشاركة المدونة .
ثم أدخل بريدك الإلكتروني لتنزيل الملف المضغوط.
بعد ذلك ، قم بفك ضغط الملف حتى يكون جاهزًا للاستيراد.
لاستيراد الملف إلى محرر السمات ، اتبع الخطوات التالية:
- انتقل إلى Divi> Theme Builder.
- انقر على أيقونة قابلية النقل.
- في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد.
- اختر الملف الذي تم تنزيله والذي تم فك ضغطه مسبقًا لاستيراده.
- انقر «استيراد Divi Theme Builder النماذج ».
- انقر فوق أيقونة التحرير لتحرير النموذج الذي تم استيراده.
قم بإنشاء شريط تنقل مثبت في Divi
الجزء 1: إنشاء الخط اللاصق
لإنشاء شريط التنقل اللاصق ، سنستخدم صفًا من ثلاثة أعمدة كحاوية ثابتة لروابط التنقل الخاصة بنا بين عنوان المنشور والمنشور.
اقرأ أيضا: Divi: كيفية استخدام خيار "Gradient Repeat" لإنشاء أنماط خلفية مخصصة
في القسم الثاني من تخطيط النموذج ، أضف صفًا جديدًا أسفل الصف الذي يحتوي على محتوى المنشور.
إعدادات الخط
افتح إعدادات الخط.
أولاً ، نحتاج إلى إضافة الموضع اللاصق إلى الخط حتى نتمكن من تحديث خيارات التصميم الأخرى في الحالة اللاصقة.
تحت علامة التبويب متقدم، قم بتحديث ما يلي:
- موقف مثبت: التمسك بالأعلى والأسفل
- أعلى حد مثبت: القسم
- حد الالتصاق السفلي: منطقة الجسم
للتأكد من عدم تكدس الأعمدة على الهاتف المحمول ، أضف CSS المخصص التالي إليه العنصر الرئيسي :
display:flex;
flex-wrap:nowrap;
align-items:center;
تحت علامة التبويب وصف المنتج، أضف لون خلفية أبيض إلى الخط في الحالة اللاصقة كما يلي:
- الخلفية: لا شيء
- Bakground: #ffffff (مثبت)
تحت الإعدادات تصميم، قم بتحديث ما يلي:
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- العرض: 100٪
- العرض الأقصى: 100٪
- المساحة المتروكة: 0 بكسل (أعلى وأسفل)
إخفاء العمود الأوسط على الجهاز اللوحي والهاتف
لإخفاء العمود على الهاتف المحمول ، افتح إعدادات العمود 2 (العمود الأوسط) وقم بتحديث خيارات الرؤية على النحو التالي:
- تعطيل في: الهاتف ، الجهاز اللوحي
الجزء 2: إنشاء روابط التنقل بين المقالات
لفتح المزيد من المرونة في التصميم للتنقل بعد النشر ، سنستخدم وحدتين منفصلتين بعد التنقل. في العمود الأيسر ، سنضيف وحدة Post Navigation التي تعرض فقط رابط المقالة السابقة. في العمود الأيمن ، سنضيف وحدة Post Navigation التي تعرض فقط رابط المنشور التالي.
رابط إلى الوظيفة السابقة
في العمود 1 ، أضف وحدة جديدة للتنقل في البريد.
افتح إعدادات الوحدة ، وقم بتحديث علامة تبويب الخيارات الخاصة بـ وصف المنتج كالتالي :
- الرابط السابق (نص): المنشور السابق
- إظهار ارتباط الوظيفة السابقة: نعم
- إظهار رابط المشاركة التالية: NO
- الخلفية: # 000000
تحت علامة التبويب تصميم، قم بتحديث ما يلي:
- خط الروابط: Kumbh Sans
- وزن خط الروابط: غامق
- نمط الخط: TT
- لون نص الروابط: #ffffff
- حجم نص الروابط: 26 بكسل (سطح المكتب) ، 16 بكسل (الجهاز اللوحي والهاتف)
- ارتفاع الخط: 1,3 م
- الحشو: 0,9em (علوي) ، 0,7em (سفلي) ، 2em (يسار ويمين)
نظرًا لأننا نخفي العمود الأوسط على الهاتف المحمول ، فإن العمودين المتبقيين اللذين سيحتويان على روابط التنقل يمكن أن يشغل كل منهما الآن 50٪ من عرض المتصفح على الجهاز اللوحي والهاتف.
أنظر أيضا: Divi: كيفية تغيير نمط عدة عناصر عند التمرير أو بعد نقرة
للتأكد من أن رابط التنقل يمتد 50٪ من إطار العرض ، أضف CSS المخصص التالي إلى مربع Links CSS لعرض الجهاز اللوحي:
display:block;
width:50vw;
text-align:center;
float:none;
إنشاء رابط Next Post
لإنشاء رابط المنشور التالي ، انسخ وحدة Post Navigation (مع رابط المنشور السابق) الذي صممناه للتو والصقه في العمود 3 (العمود الأيمن).
بعد ذلك ، افتح إعدادات تنقل المنشور للوحدة المكررة في العمود الأيمن وقم بتحديث خيارات علامة تبويب المحتوى التالية:
- الرابط التالي: Next Post
- إظهار رابط الوظيفة السابقة: NO
- إظهار رابط المشاركة التالية: نعم
- الخلفية: # ffb100
تحت علامة التبويب تصميم، قم بتحديث لون نص الارتباط:
- لون نص الروابط: # 000000
الجزء 3: إنشاء عنوان المنشور الديناميكي
مع وجود ارتباطي التنقل في مكانهما ، نحن على استعداد لإضافة عنوان المنشور كمحتوى ديناميكي في العمود الأوسط.
الفكرة هي إعطاء المستخدم تذكيرًا لطيفًا بالرسالة التي يقرؤها مع القدرة على الانتقال إلى الرسالة السابقة والرسالة التالية.
في العمود الأوسط ، أضف وحدة نصية جديدة.
تحت علامة التبويب وصف المنتج، انقر فوق الرمز "استخدام المحتوى الديناميكي" في منطقة الجسم ، ثم حدد عنوان المشاركة / الأرشيف.
بمجرد إضافة عنوان المنشور الديناميكي ، افتح إعدادات عنوان المشاركة / الأرشيف وتحديث المحتوى من قبل:
- قبل القراءة
ثم احفظ التغييرات.
تحت علامة التبويب تصميم، قم بتحديث ما يلي:
- خط النص: Kumbh Sans
- وزن خط النص: غامق
- نمط الخط: TT
- لون نص النص: شفاف (سطح المكتب) ، # 000000 (مثبت)
- حجم النص: 16 بكسل
- تباعد الأحرف: 1 بكسل
- ارتفاع الخط: 1,3 م
- محاذاة النص: توسيط
- العرض الأقصى: 96٪
- وحدة المحاذاة: المركز
- الحشو: 0,5em (علوي وسفلي)
نتيجة نهائية
تحميل DIVI الآن !!!
وفي الختام
في هذا البرنامج التعليمي ، أظهرنا مدى سهولة إنشاء شريط تنقل منشور مثبت لقالب منشور مدونة في Divi.
يمكن أيضًا تعديل وظيفة الشريط / الخط اللاصق بسهولة من خلال خيارات Divi المدمجة. على سبيل المثال ، يمكنك قصر الحالة اللاصقة على قسم أو اختيار جعله ثابتًا فقط في الجزء العلوي أو السفلي من إطار عرض المتصفح.
آمل أن يكون هذا مفيدًا لموقع مدونتك التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
