كيفية تصميم ترقيم الصفحات في وحدة محفظة Divi القابلة للتصفية
نشرت: 2022-08-19تعد وحدة محفظة Divi القابلة للتصفية طريقة رائعة وسهلة لعرض عملك ومشاريعك على موقع الويب الخاص بك. يمكنك استخدام الفئات لإنشاء عوامل تصفية مختلفة لوحدة محفظتك ، وتوفر طريقة سهلة للاحتفاظ بمحفظة محدثة دون الحاجة إلى تعديل تصميم موقع الويب الخاص بك في كل مرة. ما عليك سوى إضافة مشروع جديد في لوحة معلومات WordPress ، ثم يتم ملؤه تلقائيًا في وحدة المحفظة على موقع الويب الخاص بك طالما تم تصنيفها بشكل صحيح.
في هذا البرنامج التعليمي ، سوف نعرض لك 3 طرق مختلفة لتصميم ترقيم الصفحات في وحدة محفظة Divi القابلة للتصفية. من خلال تخصيص هذا التصميم ، يمكنك جعل وحدة المحفظة تتناسب مع التصميم العام لموقع الويب الخاص بك ولفت الانتباه إلى العمل الذي تريد عرضه.
هيا بنا نبدأ!
نظرة خاطفة
هنا معاينة لما سنصممه
نمط ترقيم الصفحات واحد
ترقيم الصفحات النمط الثاني
ترقيم الصفحات نمط ثلاثة
ما تحتاجه للبدء
قم بتثبيت وتنشيط Divi
قبل أن نبدأ ، قم بتثبيت وتنشيط Divi Theme وتأكد من أن لديك أحدث إصدار من Divi على موقع الويب الخاص بك.
إضافة مشاريع المحفظة
من أجل ملء الحافظة بالمشاريع بمجرد إضافتها إلى صفحتنا ، نحتاج أولاً إلى إضافة المشاريع في لوحة معلومات WordPress. حدد المشاريع في الشريط الجانبي للوحة تحكم WordPress ، ثم أضف مشروعًا جديدًا. تأكد من أن المشروع يحتوي على صورة مميزة وفئة بحيث يمكن تصفيته.
الآن ، أنت جاهز للبدء!
كيفية تصميم ترقيم الصفحات في وحدة محفظة Divi القابلة للتصفية
قم بإنشاء صفحة جديدة باستخدام تخطيط مسبق الصنع
لنبدأ باستخدام تخطيط معدة مسبقًا من مكتبة Divi. سنستخدم Painter Portfolio Page من حزمة تخطيط الرسام لهذا التصميم.
أضف صفحة جديدة إلى موقع الويب الخاص بك ، واعطها عنوانًا ، وحدد خيار استخدام Divi Builder.
سنستخدم تخطيطًا معدًا مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد استعراض التخطيطات.
ابحث عن تخطيط صفحة Painter Portfolio Page وحدده.
حدد استخدام هذا التخطيط لإضافة التخطيط إلى صفحتك.
الآن نحن جاهزون لبناء تصميمنا.
أضف وحدة الحافظة القابلة للتصفية
سنقوم باستبدال محتوى المحفظة الحالي في هذه الصفحة بوحدة الحافظة القابلة للتصفية. أولاً ، احذف قسم المحفظة الحالي.
بعد ذلك ، أدخل قسمًا جديدًا في الصفحة ، أسفل قسم "العمل الأخير".
ثم أضف صفًا بعمود واحد إلى القسم.
أضف وحدة الحافظة القابلة للتصفية إلى الصف الجديد.
يجب أن تمتلئ محفظتك القابلة للتصفية بمشاريعك ، طالما تمت إضافتها إلى قسم المشروع في لوحة معلومات WordPress.
إعدادات الحافظة القابلة للتصفية
الآن دعنا نخصص تصميم الحافظة القابلة للتصفية. افتح إعدادات الوحدة ، ثم قم بتغيير عدد المنشورات إلى 6.
- عدد الوظائف: 6
ضمن العناصر ، قم بتعطيل إظهار الفئات.
- فئات العرض:
انتقل إلى علامة التبويب "تصميم" وافتح إعدادات التخطيط. اضبط التخطيط على الشبكة.
- التخطيط: الشبكة
بعد ذلك ، افتح إعدادات التراكب. قم بتعيين لون أيقونة التكبير ، ولون تراكب التمرير ، ومنتقي أيقونة التحويم على النحو التالي:
- لون أيقونة التكبير: # fdd23a
- تحوم لون التراكب: rgba (61،61،61،0.28)
- منتقي رمز التمرير: رمز زائد
افتح إعدادات الصورة ، ثم أضف ظل مربع صورة.
ثم ، اضبط لون الظل.
- لون الظل: # f2f2f2
بعد ذلك ، قم بتغيير إعدادات خط العنوان كما يلي:
- خط العنوان: Merriweather
- وزن خط العنوان: غامق
- لون نص العنوان # 000000
قم بتعيين حجم نص العنوان وارتفاع الخط.
- حجم نص العنوان: 25 بكسل
- ارتفاع خط العنوان: 2em
انتقل إلى قسم نص معايير التصفية وقم بتغيير إعدادات الخط على النحو التالي:
- خط معايير التصفية: مونتسيرات
- وزن خط معايير التصفية: غامق
- لون نص معايير التصفية: # 000000
الآن وقد اكتمل تصميم الوحدة النمطية لدينا ، يمكننا المضي قدمًا لتخصيص أنماط ترقيم الصفحات.
نمط ترقيم الصفحات واحد
بالنسبة إلى نمط ترقيم الصفحات الأول ، سنقوم بتعيين لون خط مختلف للصفحة النشطة. بالإضافة إلى ذلك ، سنقوم بتعيين حجم نص ترقيم الصفحات لزيادة عند التمرير. هيا بنا نبدأ.
ضمن إعدادات الحافظة القابلة للتصفية ، افتح إعدادات نص ترقيم الصفحات. تخصيص الخط كما يلي:
- خط ترقيم الصفحات: مونتسيرات
- وزن خط ترقيم الصفحات: غامق
- محاذاة نص ترقيم الصفحات: صحيح
- لون نص ترقيم الصفحات: # 000000
اضبط حجم النص. ثم. استخدم إعدادات التمرير لزيادة حجم النص عند التمرير.
- حجم نص ترقيم الصفحات: 17 بكسل
- حجم نص ترقيم الصفحات عند التمرير: 21 بكسل
أخيرًا ، انتقل إلى علامة التبويب خيارات متقدمة وأضف CSS المخصص التالي إلى قسم CSS للصفحات النشطة للصفحات النشطة. يتيح هذا اللون الأصفر على الصفحة النشطة.
color: #FDD23A !important;
تصميم نهائي
وإليك المظهر النهائي لتصميمنا الأول.
ترقيم الصفحات النمط الثاني
يتضمن نمط ترقيم الصفحات الثاني الذي سنصممه لون خلفية خلف ترقيم الصفحات ، وبعض تأثيرات ألوان التمرير ، ولون مختلف للصفحة النشطة.
ضمن إعدادات الحافظة القابلة للتصفية ، افتح إعدادات نص ترقيم الصفحات. تخصيص الخط كما يلي:
- خط ترقيم الصفحات: Merriweather
- وزن خط ترقيم الصفحات: غامق
- محاذاة نص ترقيم الصفحات: الوسط
- لون نص ترقيم الصفحات: # 9e9e9e
- لون نص ترقيم الصفحات عند التمرير: # 000000
بعد ذلك ، قم بتعيين حجم النص وارتفاع الخط.
- حجم نص ترقيم الصفحات: 26 بكسل
- ارتفاع خط ترقيم الصفحات: 2em
انتقل إلى علامة التبويب خيارات متقدمة وأضف CSS المخصص التالي إلى قسم Portfolio Pagination CSS. سيضيف هذا لونًا للخلفية ويزيل الحد:
background:#f2f2f2; border:none;
أخيرًا ، أضف CSS التالي إلى قسم CSS للصفحة النشطة لتعيين لون نص مختلف للصفحة النشطة.
color: #000000 !important;
تصميم نهائي
هذا هو التصميم النهائي لنمط ترقيم الصفحات الثاني.
ترقيم الصفحات نمط ثلاثة
بالنسبة لتصميمنا النهائي لترقيم الصفحات ، سنضيف دائرة صفراء خلف الصفحة النشطة. سنقوم أيضًا بتعيين لون خط مختلف للصفحة النشطة وعند التمرير فوقها.
ضمن إعدادات الحافظة القابلة للتصفية ، افتح إعدادات نص ترقيم الصفحات. ثم قم بتخصيص الخط على النحو التالي:
- خط ترقيم الصفحات: Merriweather
- وزن خط ترقيم الصفحات: غامق
- محاذاة نص ترقيم الصفحات: الوسط
- لون نص ترقيم الصفحات: # 000000
- لون نص ترقيم الصفحات على التحويم: # FDD23A
- حجم نص ترقيم الصفحات: 26 بكسل
انتقل إلى علامة التبويب خيارات متقدمة وأضف CSS المخصص التالي إلى قسم Portfolio Pagination CSS لإزالة الحد:
border:none;
أخيرًا ، أضف CSS التالي إلى قسم CSS للصفحة النشطة لتقسيم الصفحات. سيعمل CSS هذا على تعيين لون نص مختلف وخلفية دائرية للصفحة النشطة.
padding: 10% 60% 10% 60%; background-color: #FDD23A; border-radius: 80%; color: #ffffe7!important;
تصميم نهائي
هذا هو التصميم النهائي لتخطيطنا الأخير.
النتيجة النهائية
الآن دعنا نلقي نظرة على التصميمات الثلاثة النهائية بأساليب ترقيم الصفحات المختلفة.
نمط ترقيم الصفحات واحد
ترقيم الصفحات النمط الثاني
ترقيم الصفحات نمط ثلاثة
افكار اخيرة
من السهل تخصيص وحدة المحفظة القابلة للتصفية لتتلاءم مع تصميم موقع الويب الخاص بك ، ويمكنك إضافة مشاريع جديدة بسرعة من لوحة معلومات WordPress للحفاظ على محفظتك محدثة. هذه الوحدة رائعة للمصممين والفنانين والمصورين وغيرهم من المبدعين لعرض أعمالهم بصور جميلة وسهولة في التنقل. لمزيد من أفكار تصميم المحفظة الفريدة ، تحقق من هذا البرنامج التعليمي حول إنشاء قالب مشروع محفظة ديناميكي. هل استخدمت وحدة المحفظة القابلة للتصفية على موقع الويب الخاص بك؟ اسمحوا لنا أن نعرف في التعليقات!