قم بإنشاء قائمة تنقل للمحفظة قابلة للتمرير مع تأثيرات Divi Scroll
نشرت: 2020-06-11صفحات المحفظة هي العذر المثالي للإبداع في تصميم الويب الخاص بك. في هذا البرنامج التعليمي ، سنوضح لك كيفية تجميع قائمة تنقل ملفتة للنظر قابلة للتمرير لإضفاء الإثارة على أي صفحة محفظة. باستخدام تأثيرات ديفي للتمرير ، تظهر عناصر القائمة في الحياة عندما تصل إلى منتصف الشاشة. تساعد الأزرار التي تحتوي على روابط الربط المستخدم على الانتقال إلى الأقسام المقابلة.
استمر في القراءة لإعادة إنشاء التصميم أو تنزيل ملف JSON مجانًا.
معاينة
قبل أن نبدأ بالبرنامج التعليمي ، دعنا نلقي نظرة على التصميم على أحجام الشاشات المختلفة.
سطح المكتب
متحرك
إطار سلكي
يتم إنشاء قائمة التنقل سريعة الاستجابة القابلة للتمرير هذه بسلسلة من الصفوف المتكررة والمتناوبة. لهذا السبب ، قمنا بتضمين لقطة شاشة لعرض الإطار الشبكي. سيساعدك هذا على متابعة ترتيب الصفوف والوحدات النمطية الخاصة بها. نقترح عليك تسمية كل صف وفقًا لذلك لتتبعه. لقد أضفنا هذه الإرشادات في خطوات البرنامج التعليمي أيضًا.
قم بتنزيل أقسام الأبطال مجانًا
لوضع يديك على تخطيط قائمة تنقل المحفظة المجاني القابل للتمرير ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.
تنزيل مجاني
انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.
لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!
1. إنشاء قسم جديد
إضافة قسم
خلفية
ابدأ بقسم عادي داخل صفحة جديدة أو موجودة. قبل إضافة أي صفوف أو وحدات نمطية ، أضف لون خلفية إلى القسم.
- لون الخلفية: # 222831
تباعد
أضف مسافات كافية إلى القسم لتأثيرات التمرير للقيام بسحرها أيضًا.
- الحشوة العلوية والسفلية: 660 بكسل
2. قم بإنشاء قائمة تنقل للمحفظة قابلة للتمرير
أضف صف 1
هيكل العمود
أضف الصف الأول واختر بنية العمود التالية:
تحجيم
اضبط عرض الصف التالي.
- العرض: 90٪
- العرض الأقصى: 2560 بكسل
تباعد
ثم اضبط إعدادات التباعد.
- الحشو الأيسر
- سطح المكتب: 130 بكسل
- الجهاز اللوحي والهاتف: 50 بكسل
تسمية المسؤول
وقم بتسمية الصف.
- تسمية المسؤول: الصف 1
أضف وحدة نصية إلى العمود
المحتوى
أضف وحدة نصية للعنوان. أدخل بعض محتوى H1 من اختيارك.
نص العنوان
انتقل إلى علامة تبويب التصميم وحدد نص العنوان على النحو التالي:
- مستوى العنوان: H1
- الخط: الااتا
- الوزن: جريء
- اللون: # a3f7bf
- مقاس
- سطح المكتب: 190 بكسل
- الجهاز اللوحي: 120 بكسل
- الهاتف: 50 بكسل
- تباعد الأحرف
- سطح المكتب والجهاز اللوحي: 7 بكسل
- الهاتف: 8 بكسل
تأثيرات التمرير
أخيرًا وليس آخرًا ، أضف تأثير التمرير المتلاشي للداخل والخارج إلى علامة التبويب خيارات متقدمة.
- تمكين التأثير: التلاشي للداخل والخارج
- منفذ العرض السفلي
- المركز: 100٪
- بدء التعتيم: 100٪
- متوسط التعتيم
- الموقف: 50٪
- الوسط: 100٪
- منفذ العرض الأعلى
- الموقف: 80٪
- نهاية التعتيم: 20٪
أضف صف 2
هيكل العمود
حان الوقت الآن لإضافة عناصر التنقل. أضف صفًا جديدًا بعمودين متساويين في الحجم.
تسمية المسؤول
قم بتسمية الصف.
- تسمية المسؤول: الصف 2
تحجيم
اضبط إعدادات التحجيم أيضًا.
- عرض الحضيض: 1
- العرض: 80٪
- العرض الأقصى: 1920 بكسل
إعدادات العمود 1
لغة تنسيق ويب حسب الطلب
قبل إضافة الوحدات النمطية ، أضف سطرًا واحدًا من كود CSS إلى العناصر الرئيسية للأعمدة للتأكد من بقاء النسب كما هي عبر أحجام الشاشات الأصغر. ابدأ بالعمود 1:
- العنصر الأساسي: العرض: 20٪! هام
width: 20% !important }
إعدادات العمود 2
لغة تنسيق ويب حسب الطلب
افعل نفس الشيء بالنسبة للعمود الثاني.
- العنصر الأساسي: العرض: 80٪! هام
width: 80% !important }
أضف وحدة الزر إلى العمود 1
المحتوى
الآن ، أضف وحدة زر إلى العمود 1 مع نسخة من اختيارك.
- نص الزر: عرض
وصلة
أضف رابطًا إلى الوحدة النمطية التالية. سنقوم بإضافة معرف CSS مطابق لرابط الارتساء هذا لاحقًا في البرنامج التعليمي.
- URL رابط الزر: #VB
انتقام
انتقل إلى علامة تبويب التصميم وقم بتغيير محاذاة الزر.
- محاذاة الزر: الوسط
زر
بعد ذلك ، صمم الزر وفقًا لذلك:
- الأنماط المخصصة للزر: نعم
- حجم الخط
- سطح المكتب: 30 بكسل
- الجهاز اللوحي: 25 بكسل
- الهاتف: 20 بكسل
- اللون: أبيض #ffffff
- الخلفية: Dark Gray # 222831
- عرض الحدود: 0 بكسل
- نصف قطر الحدود: 0 بكسل
- تباعد الأحرف: 1 بكسل
- الخط: الااتا
- إظهار رمز الزر: لا
تباعد
قم بإجراء تغييرات على إعدادات التباعد أيضًا.
- الحشو العلوي
- سطح المكتب: 25 بكسل
- الجهاز اللوحي: 15 بكسل
- الهاتف: 5 بكسل
تأثيرات التمرير
وإضافة تأثير التمرير يتلاشى للداخل والخارج.
- تمكين التأثير: التلاشي للداخل والخارج
- منفذ العرض السفلي
- الموقف: 40٪
- بدء التعتيم: 0٪
- متوسط التعتيم
- القاع: 45٪
- الوسط: 100٪
- أعلى: 55٪
- منفذ العرض الأعلى
- الموقف: 60٪
- نهاية التعتيم: 0٪
مربع الظل
قبل الانتقال إلى الوحدة التالية ، أضف ظل مربع إلى إعدادات تمرير الزر.
- ظل المربع: الخيار الرابع
- الوضع الأفقي: 0 بكسل
- الوضع الرأسي
- تحوم: 5 بكسل
- قوة التعتيم: 0 بكسل
- قوة الانتشار: 0 بكسل
- لون الظل: أخضر مائي # a3f7bf
أضف وحدة نصية إلى العمود 2
المحتوى
تابع بإضافة وحدة نصية إلى العمود 2 مع بعض محتوى H3 من اختيارك.
نص العنوان
انتقل إلى علامة تبويب التصميم وحدد نص العنوان على النحو التالي:
- مستوى العنوان: H3
- الخط: الااتا
- اللون
- سطح المكتب: أبيض #ffffff
- قم بالمرور: أكوا جرين # a3f7bf
- حجم الخط
- سطح المكتب: 80 بكسل
- الجهاز اللوحي: 65 بكسل
- الهاتف: 38 بكسل
تأثيرات التمرير
وأكمل إعدادات الوحدة عن طريق إضافة تأثير التمرير للداخل والخارج في علامة التبويب "خيارات متقدمة".
- تمكين التأثير: التلاشي للداخل والخارج
- منفذ العرض السفلي
- الموقف: 40٪
- بدء التعتيم: 15٪
- متوسط التعتيم
- القاع: 45٪
- الوسط: 100٪
- أعلى: 55٪
- منفذ العرض الأعلى
- الموقف: 60٪
- نهاية التعتيم: 15٪
صف مكرر 2
لإكمال قائمة التنقل ، قم بتكرار هذا الصف ثلاث مرات. سيتم إعادة ترقيم الصفوف الجديدة ؛ 2 و 3 و 4.
ضبط الصف 3
تسمية مسؤول الصف
قم بتغيير تسمية مسؤول الصف من 2 إلى 3.
- تسمية المسؤول: الصف 3
وحدة الزر
قم بتغيير رابط الارتساء من #VB إلى #WEB.
- URL ارتباط الزر: #WEB
وحدة النص
قم بتغيير محتوى H3 في وحدة النص أيضًا.
- النص الأساسي: مواقع الويب
ضبط الصف 4
تسمية مسؤول الصف
قم بتغيير تسمية مسؤول الصف من 2 إلى 4.
- تسمية المسؤول: الصف 4
وحدة الزر
قم بتغيير رابط الارتساء من #VB إلى #MA.
- URL ارتباط الزر: #MA
وحدة النص
قم بتغيير محتوى H3 أيضًا.
- النص الأساسي: تطبيقات الجوال
ضبط الصف 5
تسمية مسؤول الصف
قم بتغيير تسمية مسؤول الصف من 2 إلى 5.
- تسمية المسؤول: الصف 5
المسافة بين السطور
أضف بعض الهامش السفلي.
- الهامش السفلي
- سطح المكتب 230 بكسل
- الجهاز اللوحي: 100 بكسل
- الهاتف: 60 بكسل
وحدة الزر
قم بتغيير رابط الارتساء من #VB إلى #UX.
- URL رابط الزر: #UX
وحدة النص
وقم بتغيير محتوى H3 هنا أيضًا.
- النص الأساسي: تصميم UX
3. إنشاء عناصر الحافظة
أضف صف 6
هيكل العمود
ترتبط قائمة التنقل القابلة للتمرير في المحفظة بعناصر المحفظة. كل عنصر يتكون من صفين. صف به فاصل غير مرئي وآخر به وحدة دعوة للعمل. تتم إضافة معرفات CSS إلى الصف الذي يحتوي على الحاجز. بهذه الطريقة ، لن يتوقف التنقل في المرساة في الجزء العلوي من عنصر المحفظة ولكن في المنتصف بدلاً من ذلك.
لنقم بإنشاء العناصر الآن. أضف صفًا بعمود واحد.
تسمية المسؤول
لا تنسى تسمية الصف الجديد.
- تسمية المسؤول: الصف 6
معرف وفئات CSS
أدخل معرف CSS مطابقًا في علامة التبويب خيارات متقدمة.
- معرف CSS: VB
أضف وحدة المقسم إلى الصف 6
الرؤية
أضف فاصلًا غير مرئي إلى عمود الصف.
- إظهار الحاجز:
صف مكرر 6
كرر هذا الصف ثلاث مرات. سيتم إعادة ترقيم الصفوف الجديدة ؛ 8 و 10 و 12.
ضبط الصف 8
تسمية المسؤول
قم بتغيير تصنيف المسؤول من 6 إلى 8.
- تسمية المسؤول: الصف 8
معرف وفئات CSS
قم بتغيير معرف CSS من VB إلى WEB.
- معرف CSS: WEB
ضبط الصف 10
تسمية المسؤول
قم بتغيير تصنيف المسؤول من 6 إلى 10.
- تسمية المسؤول: الصف 10
معرف وفئات CSS
قم بتغيير معرف CSS من VB إلى MA.
- معرف CSS: MA
اضبط الصف 12
تسمية المسؤول
قم بتغيير تصنيف المسؤول من 6 إلى 12.
- تسمية المسؤول: الصف 12
معرف وفئات CSS
تسمية المسؤول
قم بتغيير معرف CSS من VB إلى UX.
- معرف CSS: UX
أضف الصف 7
هيكل العمود
اترك الصفوف الأربعة بالفواصل حيث هي الآن. أضف صفًا جديدًا بعمود واحد.
خلفية
بدون إضافة وحدة نمطية بعد ، افتح إعدادات الصف وقم بنمط الخلفية كما يلي:
- صورة الخلفية: الصورة
- مزيج الصورة: مضاعفة
- تدرج الخلفية
- اللون 1: رمادي غامق # 222831
- اللون 2: شفاف
- النوع: خطي
- الاتجاه: 90 درجة
- موقف البداية: 50٪
- موضع النهاية: 100٪
- وضع التدرج فوق صورة الخلفية: نعم
تسمية المسؤول
قم بتسمية الصف.
- تسمية المسؤول: الصف 7
تحجيم
اضبط إعدادات التحجيم للصف التالي.
- العرض: 80٪
- العرض الأقصى: 2560 بكسل
- المحاذاة: المركز
الحدود
أضف بعض الزوايا الدائرية أيضًا.
- الزوايا الدائرية: 25 بكسل
تأثيرات التمرير
وتمكين يتلاشى داخل وخارج تأثير التمرير.
- تمكين التأثيرات: التلاشي للداخل والخارج
- بدء التعتيم: 0٪
- متوسط التعتيم: 100٪
- الموقف: 80٪
- نهاية التعتيم: 20٪
أضف وحدة الدعوة إلى العمل إلى الصف 7
المحتوى
أضف الآن وحدة دعوة للعمل إلى الصف.
- العنوان: العلامة التجارية المرئية
- الزر: اكتشف المزيد
- النص الأساسي: نص وصفي
خلفية
قم بإزالة لون الخلفية الافتراضي.
- الخلفية: لا شيء
وصلة
أضف ارتباط إلى الصفحة المقابلة. سنقوم بإدخال # الآن.
- وصلة: #
نص العنوان
صمم نص العنوان بعد ذلك.
- مستوى العنوان: H2
- الخط: الااتا
- اللون: أبيض #ffffff
- مقاس
- سطح المكتب: 70 بكسل
- الجهاز اللوحي: 60 بكسل
- الهاتف: 48 بكسل
- تباعد الأحرف: 1 بكسل
نص أساسي
صمم النص الأساسي أيضًا.
- الخط: Lato
- اللون: أبيض #ffffff
- مقاس
- سطح المكتب: 19 بكسل
- الجهاز اللوحي: 20 بكسل
- الهاتف: 18 بكسل
- ارتفاع الخط: 1.8em
زر
انتقل إلى إعدادات الزر وقم بتطبيق التغييرات التالية:
- الأنماط المخصصة: نعم
- حجم النص: 20 بكسل
- لون النص: رمادي غامق # 222831
- الخلفية: أكوا جرين # a3f7bf
- نصف قطر الحدود: 9 بكسل
- تباعد الأحرف: 1 بكسل
- خط الزر: Alata
- الهامش الأعلى: 35 بكسل
تحجيم
اضبط حجم الوحدة أيضًا.
- العرض: 50٪
- العرض الأقصى
- سطح المكتب: 50٪
- الجهاز اللوحي والهاتف: 100٪
- المحاذاة: اليسار
تباعد
أضف بعض الحشو إلى الوحدة أيضًا.
- الحشوة اليسرى:
- سطح المكتب: 90 بكسل
- الحشوة اليسرى واليمنى:
- الجهاز اللوحي: 50 بكسل
- الهاتف: 40 بكسل
لغة تنسيق ويب حسب الطلب
أخيرًا وليس آخرًا ، أضف سطرًا واحدًا من كود CSS إلى عنوان العرض الترويجي في علامة التبويب "خيارات متقدمة".
- عنوان العرض الترويجي: padding-bottom: 30px ؛
padding-bottom: 30px; }
صف مكرر 7
صف 7 مكرر ثلاث مرات. سيتم إعادة ترقيم الصفوف الجديدة ؛ 9 و 11 و 13.
ضبط الصف 9
خلفية
قم بتغيير صورة الخلفية وقم بتبديل اتجاه التدرج.
- صورة الخلفية: صورة جديدة
- تدرج الخلفية
- اللون 1: شفاف
- اللون 2: رمادي غامق # 222831
- موقف البداية: 0٪
- موقف النهاية: 50٪
تسمية المسؤول
قم بتحديث تسمية مسؤول الصف من 7 إلى 9.
- تسمية المسؤول: الصف 9
اضبط وحدة الدعوة إلى العمل في الصف 9
المحتوى
قم بتحديث محتوى الوحدة.
- العنوان: مواقع الويب
- النص الأساسي: نص وصفي جديد
وصلة
تحديث الارتباط كذلك.
- الارتباط: ارتباط جديد
تحجيم
قم بتغيير محاذاة الوحدة من اليسار إلى اليمين.
- محاذاة الوحدة: صحيح
تباعد
تغيير المساحة المتروكة لسطح المكتب من اليسار إلى اليمين. يجب أن تظل إعدادات الجهاز اللوحي والجوال كما هي.
- الحشوة اليمنى
- سطح المكتب: 90 بكسل
ضبط الصف 11
خلفية
قم بتغيير صورة الخلفية في الصف الجديد.
- صورة الخلفية: صورة أخرى
تسمية المسؤول
قم بتحديث تسمية مسؤول الصف من 7 إلى 11.
- تسمية المسؤول: الصف 11.
اضبط وحدة الدعوة إلى العمل في الصف 11
المحتوى
قم بتغيير المحتوى داخل وحدة الدعوة إلى العمل.
وصلة
تعديل الارتباط أيضا.
- الارتباط: ارتباط جديد
ضبط الصف 13
خلفية
قم بتغيير صورة الخلفية وقم بتبديل اتجاه التدرج.
- صورة الخلفية: صورة جديدة
- تدرج الخلفية
- اللون 1: شفاف
- اللون 2: رمادي غامق # 222831
- موقف البداية: 0٪
- موقف النهاية: 50٪
تسمية المسؤول
افتح علامة تبويب تسمية المسؤول وقم بتحديث رقم الصف إلى 13.
اضبط وحدة الدعوة إلى العمل في الصف 13
المحتوى
قم بتحديث محتوى الوحدة.
- العنوان: تصميم UX
- النص الأساسي: نص وصفي جديد
وصلة
تحديث الارتباط كذلك.
- الارتباط: ارتباط جديد
تحجيم
قم بتغيير محاذاة الوحدة من اليسار إلى اليمين.
- محاذاة الوحدة: صحيح
تباعد
تغيير المساحة المتروكة لسطح المكتب من اليسار إلى اليمين. يجب أن تظل إعدادات الجهاز اللوحي والجوال كما هي.
- الحشوة اليمنى
- سطح المكتب: 90 بكسل
إعادة ترتيب الصفوف
انقل الصفوف 7 و 9 و 11.
ضع الصفوف بالترتيب الصحيح ، وفقًا لتسمية المسؤول الخاصة بها.
قارن الإطار السلكي الخاص بك
تحقق مرة أخرى من الإطار السلكي لقائمة وعناصر تنقل المحفظة القابلة للتمرير. يجب أن تكون الصفوف حتى تعمل روابط الارتساء بشكل صحيح. إليك نظرة أخرى على عرض الإطار السلكي الخاص بنا:
معاينة
لقد انتهينا من متابعة جميع الخطوات لإعادة إنشاء قائمة تنقل المحفظة القابلة للتمرير. دعنا نلقي نظرة أخرى على كيفية ظهور التصميم على أحجام الشاشات المختلفة.
سطح المكتب
متحرك
افكار اخيرة
في هذا البرنامج التعليمي خطوة بخطوة ، قمنا بإعادة إنشاء قائمة تنقل محفظة قابلة للتمرير باستخدام تأثيرات التمرير الخاصة بـ Divi. علاوة على ذلك ، أضفنا عناصر المحفظة. يتم التحكم في التنقل باستخدام روابط الربط ومعرفات CSS. هذه طريقة رائعة لعرض عناصر الحافظة بشكل تفاعلي. اترك لنا تعليقًا إذا أعجبك أو لديك أي أسئلة!