كيفية إضافة روابط التنقل للصفحة الثابتة (التالي ، السابق ، الأول ، الأخير) إلى أقسام Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

لاحظ كيف تتغير روابط التنقل الثابتة عند التمرير لأسفل الصفحة.

لاحظ مدى سهولة التنقل إلى كل قسم من خلال النقر على روابط التنقل.

وإليك كيف يبدو التصميم على الهاتف المحمول.

وإليك رمز الشفرة الذي يوضح الوظائف الأساسية.

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

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

إنشاء القسم العلوي

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

• الحشو: 0 بكسل للأسفل

إعدادات الصف

أضف صفًا من عمود واحد إلى القسم.

ثم قم بتحديث إعدادات التصميم للصف كما يلي:

• العرض: 100٪
• العرض الأقصى: 80vw (سطح المكتب ، الكمبيوتر اللوحي) ، 95vw (الهاتف)

عنوان القسم

لإنشاء عنوان القسم ، قم أولاً بإضافة وحدة نصية جديدة إلى الصف / العمود.

ثم قم بتحديث النص الأساسي بعنوان H2 التالي:

<h2>Top</h2>

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

• حدد علامة التبويب H2
• خط العنوان 2: مونتسيرات
• وزن خط العنوان 2: ثقيل
• نمط خط العنوان 2: TT
• العنوان 2 محاذاة النص: الوسط
• حجم نص العنوان 2: 8vw (سطح المكتب ، الجهاز اللوحي) ، 61.36 بكسل (الهاتف)

إنشاء القسم 1

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

القسم 1 لون الخلفية

افتح إعدادات القسم 1 وقم بتحديث لون الخلفية:

• لون الخلفية: # fec0f4

القسم 1 معرّف CSS للتنقل عبر Anchor Link

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

• معرف CSS: واحد

تحديث نص العنوان

ثم قم بتحديث نص العنوان في وحدة النص ليصبح "القسم 1".

إنشاء صف مثبت للقسم 1

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

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

إعدادات الصف الثابت

لجعل الصف ثابتًا ، نحتاج إلى تحديث إعدادات الصف.

خيارات مثبتة

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث خيارات الموضع اللاصق على النحو التالي:

• موقف مثبت: التمسك بالقاع
• أعلى حد مثبت: القسم
• الإزاحة من العناصر اللاصقة المحيطة: لا

سيؤدي هذا إلى التأكد من احتواء الصف اللاصق داخل القسم.

إعدادات التصميم

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• أقصى عرض: 25vw (سطح المكتب ، الجهاز اللوحي) ، 50٪ هاتف
• محاذاة الصف: يمين (سطح مكتب ، كمبيوتر لوحي) ، يسار (هاتف)
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

للقيام بذلك ، انقر فوق الرمز اللاصق (الصورة المصغرة) عند التمرير فوق عنوان خيار التحويل لتنشيط علامة التبويب اللاصقة. ثم قم بتحديث خيارات التحويل كما يلي:

• تحويل ترجمة المحور ص (سطح المكتب): 100٪
• تحويل ترجمة المحور Y (مثبت): 0٪

تعويض الموقف

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

لتحريك الصف الثابت ، انتقل إلى علامة التبويب خيارات متقدمة وقم بتحديث خيارات تعويض الموضع على النحو التالي:

• أصل الإزاحة: أعلى اليمين
• الإزاحة الأفقية: 25vw (سطح المكتب ، الكمبيوتر اللوحي) ، 0 بكسل (الهاتف)

ملاحظة: تم ضبط الإزاحة على الهاتف على 0 بكسل لأنه سيتم ضبط محاذاة الصف على اليسار والعرض سيكون 50٪.

عمود الصف الثابت CSS

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

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

display:grid;
grid-template-columns:50% 50%;

إضافة مقسم والزر التالي إلى صف مثبت (القسم 1)

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

مقسم

أضف فاصلًا جديدًا إلى العمود.

ثم اضبط خيار Show Divider على "NO".

زر' التالي

تحت وحدة الفاصل ، أضف وحدة زر.

ثم قم بتحديث إعدادات محتوى الزر:

• نص الزر: التالي
• URL ارتباط الزر: #two

سينتقل عنوان URL "#two" إلى القسم التالي الذي سننشئه باستخدام معرف CSS "two".

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• محاذاة الزر: المركز
• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 2.1vw (سطح المكتب ، الجهاز اللوحي) ، 16.1 بكسل (الهاتف)
• لون نص الزر: # 000000
• خلفية الزر: #eeeeee
• عرض حد الزر: 0 بكسل
• رمز الزر: سهم لأسفل (انظر لقطة الشاشة)
• فقط إظهار الرمز عند التحويم للزر: لا

• الهامش: 2٪ صحيح

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

display:block !important; width: 100%;

إنشاء القسم 2

الآن وقد انتهينا من القسم 1 ، قم بتكرار القسم 1 لإنشاء القسم 2 وتحديث التسمية في عرض الطبقات وفقًا لذلك.

تحديث القسم 2 لون الخلفية ونص العنوان

بعد ذلك ، قم بتحديث لون خلفية القسم:

• لون الخلفية: # 8dc6c1

ثم قم بتحديث نص العنوان ليقرأ "القسم 2" في وحدة النص في الصف العلوي.

تحديث معرف القسم 2 CSS

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث القسم بمعرف CSS جديد:

• معرف CSS: اثنان

إضافة الزرين التالي والسابق إلى صف مثبت (القسم 2)

داخل الصف اللاصق من القسم 2 ، احذف وحدة التقسيم وقم بتكرار زر التالي بحيث يكون لديك زرين.

تحديث رابط الزر التالي URL

افتح الإعدادات للزر الأول / الأيسر التالي وقم بتحديث ارتباط الزر على النحو التالي:

• URL ارتباط الزر: # ثلاثة

سينتقل عنوان URL "#three" إلى القسم التالي الذي سننشئه باستخدام معرف CSS "ثلاثة".

أضف نص الزر السابق وعنوان URL للارتباط

لعمل الزر السابق ، افتح الإعدادات للزر الثاني / الأيمن وقم بتحديث ما يلي:

• نص الزر: السابق
• URL ارتباط الزر: # واحد

سينتقل عنوان URL "#one" إلى القسم الذي يحتوي على معرّف CSS "one".

إضافة رمز الزر السابق

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

• رمز الزر: سهم لأعلى (انظر لقطة الشاشة)

إنشاء القسم 3

الآن وقد انتهينا من القسم 2 ، قم بتكرار القسم 2 لإنشاء القسم 3 وتحديث التسمية في عرض الطبقات وفقًا لذلك.

تحديث القسم 3 لون الخلفية ونص العنوان

أضف لون خلفية جديدًا إلى القسم:

• لون الخلفية: # 9fa5f4

ثم قم بتحديث نص العنوان ليقرأ "القسم 3" في وحدة النص في الصف العلوي.

تحديث معرف القسم 3 CSS

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث القسم بمعرف CSS جديد:

• معرف CSS: ثلاثة

إضافة فاصل وزر سابق إلى صف مثبت (القسم 3)

إضافة فاصل وحذف زر التالي

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

لذلك ، نظرًا لأننا لن نحتاج إلى زر التالي ، فاحذف زر التالي واستبدله بمقسم كما فعلنا في القسم 1.

تحديث URL ارتباط الزر السابق

بعد ذلك ، افتح إعدادات الزر السابق وقم بتحديث عنوان URL للرابط:

• URL ارتباط الزر: #two

سينتقل عنوان URL "#two" مرة أخرى إلى القسم الذي يحتوي على معرّف CSS "two".

إنشاء القسم السفلي

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

لإنشاء القسم السفلي ، قم ببساطة بتكرار القسم العلوي واسحبه أسفل القسم 3.

ثم قم بتحديث نص العنوان ليصبح "أسفل".

إنشاء القسم السفلي اللاصق

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

ضمن القسم السفلي ، قم بإنشاء قسم عادي جديد.

ثم قم بتحديث تصنيف القسم في عرض الطبقات وفقًا لذلك (على سبيل المثال ، "القسم السفلي الثابت").

إنشاء صف لارتباطات التنقل الأولى والأخيرة

لإضافة المزيد من وظائف التنقل إلى صفحتنا من الأقسام ، سننشئ زرين إضافيين (أو روابط إرساء) ينتقلان إلى القسم الأول (القسم 1) والأخير (القسم 3) على الصفحة.

تكرار الصف اللاصق في القسم 2 واسحبه إلى القسم السفلي اللاصق

لإنشاء صف لارتباطي التنقل الأول والأخير ، يمكننا تكرار الصف اللاصق (الصف 2) من القسم 2 وسحبه إلى القسم السفلي اللاصق الجديد.

تحديث إعدادات الصف

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

افتح إعدادات الصف وقم بتحديث ما يلي:

بعد ذلك ، قم بتحديث خيارات المركز على النحو التالي:

• الموقف: مطلق
• الموقع: أسفل اليمين
• الإزاحة الأفقية: 0 بكسل
• موقف مثبت: لا تلتصق

ضمن علامة تبويب التصميم ، أعد تعيين خيارات التحويل للصف.

أضف الزرين الأول والأخير للقسم السفلي اللاصق

لإنشاء الزر الأول ، افتح إعدادات الزر الموجود على اليسار وقم بتحديث ما يلي:

• نص الزر: أولاً
• URL ارتباط الزر: # واحد

ثم قم بتحديث رمز الزر إلى سهم مختلف لأعلى.

لإنشاء الزر الأخير ، افتح إعدادات الزر على اليمين وقم بتحديث ما يلي:

• نص الزر: الأخير
• URL ارتباط الزر: # ثلاثة

ثم قم بتحديث رمز الزر إلى سهم مختلف لأسفل.

تحديث إعدادات القسم للقسم الثابت السفلي

بعد ذلك ، افتح إعداد القسم وقم بتحديث ما يلي:

• العرض: 100٪؛
• الارتفاع: 0 بكسل ؛
• المساحة المتروكة: 0 بكسل للأعلى ، 0 بكسل على اليمين

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

أخيرًا ، ضمن علامة التبويب خيارات متقدمة ، قم بتحديث ما يلي:

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

النتيجة النهائية

لاحظ كيف تتغير روابط التنقل الثابتة عند التمرير لأسفل الصفحة.

لاحظ مدى سهولة التنقل إلى كل قسم من خلال النقر على روابط التنقل.

وإليك كيف يبدو التصميم على الهاتف المحمول.

افكار اخيرة

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

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!