كيفية الجمع بين شريط تقدم التمرير مع قائمة التنقل الثابتة في Divi

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

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

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

تنزيل مجاني

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

تحميل

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

https://youtu.be/Kf-ciVKEZFI

اشترك في قناتنا على اليوتيوب

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

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

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

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

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

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

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

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

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

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

الجزء 1: إنشاء تخطيط صفحة قسم ملء الشاشة

القسم العلوي

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

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

• العرض: 100٪
• أقصى عرض: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

داخل الصف ، أضف وحدة نصية.

ثم افتح إعدادات وحدة النص والصق HTML التالي لإنشاء عنوان ملون:

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

ضمن علامة تبويب التصميم ، قم بتحديث محاذاة النص إلى المركز.

تحديث أنماط عناوين H2 التالية:

• خط العنوان 2: Roboto
• حجم نص العنوان 2: 6vw

افتح إعدادات القسم وقم بتحديث الارتفاع ليكون 100vh (أو 100٪ من ارتفاع منفذ العرض / النافذة). سيؤدي هذا إلى التأكد من ملء القسم بملء الشاشة. ثم أخرج الحشو كما يلي:

• الارتفاع: 100 فولت
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

للتأكد من بقاء الصف / المحتوى داخل القسم في الوسط عموديًا داخل القسم ، أضف CSS المخصص التالي إلى العنصر الرئيسي للقسم:

display:flex;
flex-direction:column;
justify-content:center;

قسم الخطوة الأولى

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

لإنشاء قسم الخطوة الأولى ، قم بتكرار القسم العلوي الذي أنشأناه للتو.

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

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

بعد ذلك ، افتح إعدادات النص واستبدل النص الأساسي بما يلي:

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

قم بتغيير محاذاة النص إلى محاذاة إلى اليسار.

ثم قم بتحديث ما يلي:

• لون نص العنوان 2: # 00a4e0
• العرض الأقصى: 40vh (سطح المكتب) ، 80vh (الكمبيوتر اللوحي)
• محاذاة الوحدة: مركز

هذا يعتني بالخطوة الأولى.

الخطوة الثانية القسم

لإنشاء قسم الخطوة الثانية ، قم بتكرار قسم الخطوة الأولى الذي أنشأناه للتو.

افتح إعدادات القسم وأضف تدرجًا للخلفية أعلى لون الخلفية كما يلي:

• لون خلفية التدرج الأيسر: rgba (255،255،255،0.85)
• لون خلفية التدرج الأيمن: rgba (255،255،255،0.85)

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

• لون نص العنوان 2: # ee4266

ستتطابق خلفية هذا القسم ولون العنوان مع ألوان الزر المرتبط بهذا القسم في القائمة التي سننشئها لاحقًا.

الخطوة الثالثة القسم

لإنشاء قسم الخطوة الثالثة ، قم بتكرار قسم الخطوة الثانية واسحبه إلى أسفل الصفحة.

ثم قم بتغيير لون عنوان وحدة النص.

• لون نص العنوان 2: # 26c485

الخطوة الرابعة القسم

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

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

• لون نص العنوان 2: # 2a1e5c

نتيجة

ها هي نتيجة تخطيطنا حتى الآن.

الجزء 2: إنشاء شريط تقدم التمرير والقائمة

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

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

افتح إعدادات القسم وأخرج الحشو كما يلي:

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

• المركز: ثابت
• الفهرس Z: 999

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

داخل القسم ، أضف صفًا مكونًا من عمود واحد.

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

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل
• الموقف: مطلق

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

height: 100%;
display:flex;
align-items:center;

سيؤدي هذا إلى التأكد من أن العمود له نفس ارتفاع القسم. سيسمح أيضًا للوحدات بارتفاع 100٪ أيضًا. سيكون هذا هو المفتاح للتأكد من أن شريط التقدم يملأ القسم.

لإنشاء شريط التقدم ، أضف وحدة فاصل إلى العمود.

ثم قم بتحديث إعدادات الحاجز كما يلي:

• إظهار المقسم:
• لون الخلفية: # 222222

• العرض: 100٪
• ارتفاع: 100٪

ملاحظة: نمنح شريط التقدم عرضًا بنسبة 100٪ هنا حتى تتمكن من رؤيته داخل التصميم. سنقوم بزيادة عرض الفاصل / التقدم وتقليله باستخدام JQuery.

ضمن علامة التبويب المتقدمة ، أضف معرف CSS ومنحه موضعًا مطلقًا.

• معرف CSS: scrollBar
• الموقف: مطلق

إضافة مؤشر نص النسبة المئوية

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

تحت الحاجز ، أضف وحدة نصية.

ثم الصق HTML التالي في النص الأساسي:

<p><span></span></p>

سيكتب JQuery النسبة المئوية للنص إلى HTML هذا (بين علامات span). لن تتمكن من رؤية أي شيء الآن.

على الرغم من أن نص النسبة المئوية غير مرئي حتى الآن ، ما زلنا بحاجة إلى إضافة النمط التالي تحسباً لظهوره.

• خط النص: Roboto
• نمط خط النص: TT
• لون نص النص: #ffffff
• حجم نص النص: 16 بكسل
• الحشو: 0.8em أعلى ، 0.8 أسفل ، 15 بكسل يسار

ضمن علامة التبويب المتقدمة ، امنحها فئة CSS مخصصة وقم بتعطيلها على الهاتف والجهاز اللوحي.

• فئة CSS: تسمية التقدم
• تعطيل في: الهاتف ، الجهاز اللوحي

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

لإضافة الرمز ، أضف وحدة رمز نمطية أسفل وحدة النص.

ثم الصق الكود التالي في مربع الشفرة مع التأكد من لفه بعلامات البرنامج النصي المطلوبة:

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

هذا يعتني بشريط التقدم والنص النسبة المئوية. دعنا ننتقل إلى قائمة التنقل.

بناء أزرار القائمة مع ارتباطات الربط

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

الصف والعمود

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

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

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

display:flex;
flex-wrap:nowrap;

زر الخطوة الأولى

لإنشاء الزر الأول ، أضف وحدة زر في العمود أقصى اليسار.

قم بتحديث نص الزر وعنوان URL للرابط على النحو التالي:

• نص الزر: الخطوة 1
• URL ارتباط الزر: # واحد
  (سينتقل رابط الارتساء هذا إلى القسم بمعرف CSS المقابل الذي سنضيفه لاحقًا)

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

• محاذاة الزر: الوسط
• حجم نص الزر: 20 بكسل (سطح المكتب) ، 14 بكسل (جهاز لوحي)
• لون خلفية الزر: شفاف
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 0.2em
• خط الزر: Roboto
• نمط خط الزر: TT
• الحشوة: 0.8em أعلى ، 0.8em أسفل ، 0 يسار ، 0 يمين

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

display:block !important;
width: 100%;

زر الخطوة 2

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

ثم قم بتحديث ما يلي:

• لون نص الزر: # ee4266
• لون خلفية الزر: rgba (255،255،255،0.85)

سيتم دمج لون الخلفية شبه الشفاف مع لون شريط التقدم الأسود (خلفه) لمطابقة الخلفية المقابلة للخطوة الثانية.

ثم قم بتحديث عنوان URL لرابط الزر بما يلي:

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

زر الخطوة 3

لإنشاء زر الخطوة 3 ، قم بتكرار زر الخطوة 1 (له نفس لون bg) ، واسحبه إلى العمود 3.

ثم قم بتحديث لون نص الزر:

• لون نص الزر: # 26c485

ثم قم بتحديث عنوان URL لرابط الزر بما يلي:

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

الخطوة 4 زر

لإنشاء زر الخطوة 3 ، قم بتكرار زر الخطوة 2 (له نفس لون bg) ، واسحبه إلى العمود 4.

ثم قم بتحديث لون نص الزر:

• لون نص الزر: # 2a1e5c

ثم قم بتحديث عنوان URL لرابط الزر بما يلي:

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

إضافة معرفات CSS للقسم المقابل لارتباطات الارتساء

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

الخطوة الأولى قسم CSS ID

افتح إعدادات قسم الخطوة الأولى وأضف معرف CSS التالي:

• معرف CSS: واحد

الخطوة الثانية قسم CSS ID

افتح إعدادات الخطوة الثانية وأضف معرف CSS التالي:

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

الخطوة الثالثة قسم CSS ID

افتح إعدادات قسم الخطوة الثالثة وأضف معرف CSS التالي:

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

الخطوة الرابعة القسم معرف CSS

افتح إعدادات قسم الخطوة الرابعة وأضف معرف CSS التالي:

• معرف CSS: أربعة

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

افكار اخيرة

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

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

هتافات!