هل ترغب في معرفة كيفية تخصيص عناصر الشبكة لوحدة الحافظة القابلة للتصفية الخاصة بـ Divi تابعونا في هذا الدرس التعليمي...
يُعدّ تخصيص قسمٍ لعرض أعمالك على موقعك الإلكتروني أمرًا بالغ الأهمية. فإذا كنتَ مصمم أزياء، يمكنك إنشاء مشاريع متعددة على موقعك الإلكتروني على ووردبريس لعرض تصاميمك. وإذا كنتَ مصمم علامة تجارية، يمكنك استخدام معرض أعمال لعرض أعمالك. علاوة على ذلك، يُمكننا إضافة تصنيفات مختلفة لمشاريعنا. وهنا يأتي دور وهنا يأتي دور وحدة "المحفظة القابلة للتصفية" في Divi .
بفضل هذه الوحدة، أصبحنا قادرين على عرض عملنا الشاق بطريقة بسيطة ومنظمة.
في درس اليوم، سنقوم بتخصيص عناصر الشبكة الفردية لوحدة "المحفظة القابلة للتصفية". سنستخدم تخطيطات من حزم التخطيط المجانية. مؤتمر ديفي et مدرب اليوغا ديفي اون لاين مع كل عملية شراء لـ Divi .
كما هو الحال مع كل ما يتعلق بـ Divi، لدينا خيار تخصيص هذه الوحدة لتناسب احتياجاتنا ورغباتنا. ولكن قبل أن نتعمق في التصميم، دعونا نتعرف أكثر على الوحدة نفسها.
ما هي وحدة "المحفظة القابلة للتصفية" في Divi؟
المشاريع هي نوع من المنشورات المخصصة التي تعمل بشكل مشابه للمنشورات العادية. يمكنك العثور عليها في لوحة تحكم ووردبريس الخاصة بك.
هنا ستنشئ مشاريعك الفردية التي ستُضاف إلى وحدة "محفظة المشاريع القابلة للتصفية". توفر لنا هذه الوحدة طريقتين لعرض مشاريعنا: في شكل شبكة ou بتنسيق كامل العرض. بالنسبة لنا ، سوف نستخدم تنسيق الشبكة ونخصصه.
مع وحدة الحافظة القابلة للتصفية ، سنتمكن من تقديم أحدث مشاريعنا. سيرى مستخدمو موقعنا شريط ترشيح أعلى شبكة محفظتنا. من هناك ، يمكنهم تصفح فئات المحفظة المختلفة التي نسمح بعرضها في الوحدة.
فيما يلي مثال لتكوين الشبكة للوحدة النمطية مع بعض المشاريع النموذجية:
المجالات التي يجب مراعاتها عند إنشاء محفظة Divi القابلة للتصفية
كغيرها من وحدات Divi، تأتي وحدة "المحفظة القابلة للتصفية" مزودةً بعدد من الميزات التي يمكن تخصيصها لتناسب احتياجاتنا وتفضيلاتنا. ويمكن تعديل معظم ميزات الوحدة من خلال علامة التبويب. تصميم من إعدادات الوحدة النمطية. يمكننا تعديل المناطق التالية والمزيد:
- عنوان المشروع
- فئة المشروع
- المقالة القصيرة
- تصفية النص
- صورة مصغرة عند المرور فوقها
- ترقيم الصفحات
هذه ليست قائمة كاملة، ولم نبدأ حتى في الحديث عن كيفية إضافة CSS تخصيصات أعمق لهذه الوحدة!
كيف سنخصص وحدة Divi القابلة للتصفية
كما ذكرنا سابقًا ، في هذا البرنامج التعليمي ، سنستخدم تخطيطين: مؤتمر ديفي et مدرب اليوغا ديفي اون لاين. أدناه يمكنك الحصول على نظرة عامة على العمل الذي سنقوم به خلال هذا البرنامج التعليمي.
تخطيط العناصر في عرض "مؤتمر ديفي"
تخطيط العناصر في صفحة "مدرب اليوغا عبر الإنترنت من ديفي"
بإمكانك تنزيل كلا التخطيطين بسهولة من Divi Builder.
لنبدأ الآن!
أنظر أيضا: Divi: اختر بين الشبكة والتصميم الكامل العرض لوحدة الحافظة القابلة للتصفية
تخصيص وحدة محفظة Divi القابلة للتصفية: "إصدار مؤتمر Divi"
أولاً، سنحتاج إلى تثبيت قالب صفحة الفعالية من حزمة تخطيط مؤتمرات Divi. بعد إنشاء صفحتك الجديدة في ووردبريس وتفعيل أداة إنشاء Divi، سندخل إلى مكتبة Divi.
أدخل مكتبة Divi Layout
انقر فوق الرمز "تحميل من المكتبةللوصول إلى مكتبة تخطيط Divi
حدد موقع التخطيط في مكتبة Divi Layout
باستخدام وظيفة البحث في مكتبة تخطيط Divi، أبحث البندصفحة حدث المؤتمر".
تثبيت التخطيط
بعد اختيار التصميم، انقر فوق الزر "استخدم هذا التخطيط"لتثبيت التصميم على صفحتك."
إزالة واستبدال وحدة الصورة
سنقوم بإزالة وحدة الصور الموضحة أدناه لإفساح المجال لوحدة "المحفظة القابلة للتصفية"، والتي سنقوم بتخصيصها. انقر على أيقونة "حذف"بعد تحريك المؤشر فوق الصورة لحذفها."
أدخل وحدة محفظة Divi القابلة للتصفية
بعد إزالة وحدة الصور، أصبح بإمكاننا الآن إفساح المجال لوحدة "المحفظة القابلة للتصفية". سنضغط على أيقونة "إضافة وحدة"(علامة الزائد الرمادية)، ثم حدد الوحدة النمطية في مربع الوحدة النمطية الذي يظهر.
تحديد عدد المنشورات وتخطيط المحفظة
بشكل افتراضي ، ستعرض هذه الوحدة عملك في عمود واحد. ومع ذلك ، سوف نستخدم تخطيط الشبكة الذي يأتي افتراضيًا بأربعة أعمدة.
على هذا النحو ، نوصي باختيار مضاعفات 4 (4 ، 8 ، 12 ، 16 ، وما إلى ذلك) مثل عدد المنشورات لمحفظتك.
في هذا البرنامج التعليمي ، سنستخدم 12 مشروعًا في شبكتنا.
ابدأ في تخصيص محفظة Divi القابلة للتصفية: العنوان والنص التعريفي
بعد عرض مشاريعنا في شبكة، دعونا نربط بعض عناصر التصميم من القالب الذي اخترناه. في هذه الحالة، سنستخدم النمط المُقدّم مع حزمة تخطيط مؤتمرات Divi في وحدتنا الجديدة.
نمط النص
- محاذاة النص: توسيط
- لون النص: غامق
نمط نص العنوان
- مستوى عنوان العنوان: H2
- خط العنوان: كرونا وان
- لون النص: # 000000
نمط نص ميتا
- Meta Font: افتراضي (Open Sans)
- لون نص التعريف: # ff6651
الآن بعد أن أصبح لدينا تصميمنا الخاص بالعناوين الموجودة في شبكة المحفظة ، فلنقم بإجراء بعض التغييرات على الشكل الفعلي للصور المصغرة للمشروع نفسها.
تغيير حدود الصورة المصغرة للمشروع والزوايا الدائرية
في حزمة Divi Conference Layout الخاصة بنا ، نستخدم مزيجًا فريدًا من الزوايا الدائرية لإعطاء شكل فريد لبعض الإطارات الرئيسية في الحزمة. دعنا نطبق هذا النمط على الصور المصغرة لوحدتنا.
صورة
- الصورة:
- الزوايا الدائرية: 50 بكسل 50 بكسل 50 بكسل 0 بكسل
- أنماط الحدود: الكل
- عرض الحدود: 3 بكسل
- اللون: # 000000
- نمط الحدود: صلب
سيعطي هذا الصور المصغرة شكلًا يطابق بقية الصور الأخرى في حزمة التخطيط.
تخصيص Hover Overlay
لنرتقِ بأسلوبنا خطوةً أخرى ونجري تعديلاً بسيطاً على الطبقة الافتراضية المرفقة بهذه الوحدة. سنغير اللون بالإضافة إلى الأيقونة المستخدمة مباشرةً.
تراكب
- لون أيقونة التكبير: # bcf5fd
- لون تراكب التمرير: # ff6651
- منتقي رمز التحويم: تكبير
كما ترون الآن، قمنا بإضافة ألوان العلامة التجارية لهذا التصميم إلى الطبقة العلوية، بالإضافة إلى تغيير الأيقونة التي يوفرها Divi افتراضيًا لوظيفة الطبقة العلوية عند تمرير المؤشر فوق هذه الوحدة.
تخصيص ترقيم الصفحات
سنبدأ الآن باستخدام أجزاء صغيرة من أكواد CSS لإضافة المزيد من التخصيص إلى وحدة "محفظة الأعمال القابلة للتصفية". أولًا، سنخصص ترقيم الصفحات لهذه الوحدة. ثم، سنزيل الإطار الذي يظهر في الأعلى باستخدام سطر واحد من أكواد CSS.
نص ترقيم الصفحات
- ترقيم الصفحات:
- الخط: كرونا وان
- محاذاة النص: توسيط
- لون النص: # ff6651، # 000000 (تحوم)
بالنسبة لملفات CSS الخاصة بنا، سننتقل إلى علامة التبويب متقدم ثانيًا، سنضغط على علامة التبويب الخاصة بوحدتنا. لغة تنسيق ويب حسب الطلب. بعد ذلك، سندخل مقتطف الشفرة التالي لإزالة الحدود الموجودة أعلى ترقيم الصفحات، مما يمنحها مظهرًا أنظف.
حافظة ترقيم الصفحات
border-top: 0px;
استخدام إعدادات Divi و CSS لتخصيص مرشح النص
سنُضفي لمسةً مميزةً على نص الفلتر. سنستخدم CSS لتغيير الخلفية وتأثيرات التمرير.
نريد الحفاظ على تناسق تام بين الوحدة المضافة حديثًا ونمط حزمة التخطيط. أولًا، دعونا ننتقل إلى إعدادات الخط في Divi.
نص معايير التصفية
- معايير التصفية:
- الخط: كرونا وان
- لون الخط: #ffffff ، # 000000 (تحوم)
يبدو أن فلترنا قد اختفى في الوضع الحالي. في الواقع، هو في حالته الافتراضية مجرد نص أبيض على خلفية بيضاء. لكننا سنغير هذا باستخدام CSS مخصص في موضعين.
أولاً، سنضيف جزءًا من كود CSS إلى إعدادات الصفحة لإضافة خلفية لنص الفلتر. ثانيًا، سنقوم بتخصيص فلتر المحفظة النشط باستخدام علامة التبويب متقدم وحدة du.
للوصول للوصول إلى إعدادات الصفحة، انقر على النقاط الثلاث الموجودة في منتصف الشاشة. ثم حدد رمز الترس والذي سيفتح إعدادات الصفحة. ثُم أنت انتقل إلى علامة التبويب CSS المخصصة وأدخل ما يلي لإضافة خلفية إلى نص المرشح.
عرف المغلق
في هذا الجزء من كود CSS، نستهدف لون خلفية الفلتر. كما نستهدف وننسق حالة تمرير المؤشر فوقه. الآن، دعونا نضيف المزيد من أكواد CSS إلى الوحدة ونبرز علامة تبويب الفلتر النشطة.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
نمط علامة التبويب النشطة لتصفية المحفظة
علامة التبويب النشطة في fتصفية المحفظة يلفت هذا الفلتر انتباه المستخدمين إلى الفئة الحالية من المحفظة التي يتصفحونها. حاليًا، يتميز هذا الفلتر بنص أبيض وخلفية فاتحة.
سننتقل إلى علامة التبويب متقدم من وحدة الحافظة القابلة للفلترة وإضافة نص إلى الحالات الافتراضية لهذه الميزة وتحريكها. فيما يلي خصائص CSS التي سنضيفها في الحالة الافتراضية:
background: #ff6651;
color: #ffffff !important;
الدولة عند المرور فوقها
عند تمرير المؤشر فوق العنصر، سيتم تغيير الخلفية إلى اللون الأسود.
color: #000000!important;
الشكل النهائي لتصميم محفظة Divi القابلة للتصفية مع "مؤتمر Divi"
ها هي النظرة النهائية!
والآن ، هذا هو الشكل الذي سيبدو عليه عندما تحوم فوق!
تخصيص وحدة محفظة Divi القابلة للتصفية: "مدرب يوغا عبر الإنترنت من Divi"
كما هو الحال مع إصدار مؤتمر Divi، يمكنك العثور على تصميمك في حزمة تصميم مدرب اليوغا عبر الإنترنت داخل Divi Builder.
سنستخدم تصميم الصفحة الرئيسية في هذا الدرس. انتقل إلى قسم "فئات الأقسام" الذي يحمل عنوان "القسم". جميع الفصول القادمة.
إدخال وحدة الحافظة القابلة للتصفية
من هنا ، سنزيل الصفوف التي تحتوي على الفئات. انقر على الأيقونة البنفسجية التي تحتوي على ثلاث نقاط . ثم، حدد عرض الإطار السلكي. أخيرًا ، ستقوم بحذف الصفين اللذين يحتويان على ثلاثة أعمدة.
بعد ذلك، سنستبدلها بعمود واحد في الصف الداخلي. ثم سنضيف وحدة "المحفظة القابلة للتصفية".
كما في المثال السابق، سنستخدم تخطيط الشبكة لهذه الوحدة مع عدد من المنشورات يكون من مضاعفات العدد 4.
والآن دعونا نفعل شيئًا مختلفًا قليلاً بالمعلومات التي نعرضها على الخريطة.
في علامة التبويب وصف المنتج، انتقل إلى عناصر وإلغاء الاختيار إظهار الفئات هذا يعني أن وحدة المحفظة ستعرض اسم المشروع فقط دون اسم الفئة التي يقع فيها.
تخصيص نص معايير التصفية وعنوان المشروع ونص ترقيم الصفحات
دعنا نحدد قاعدة النمط لأجزاء النص في الوحدة الخاصة بنا. النص الأساسي لهذا التخطيط هو بلا المفتوحة والخط المستخدم للعناوين الرئيسية هو Cinzel. لذلك ، سنستخدم مزيجًا من هذين الخطين طوال عملية التصميم.
نص
- محاذاة النص: توسيط
- لون النص: فاتح
نص العنوان
- خط العنوان: Cinzel
- لون نص العنوان: #ffffff
نص معايير التصفية
- وزن خط معايير التصفية: غامق
- لون نص معايير التصفية: #ffffff
نص ترقيم الصفحات
- وزن خط ترقيم الصفحات: غامق
هذا هو شكل وحدة المحفظة القابلة للتصفية لدينا حاليًا. إنها ليست متطورة جدًا، لكننا نتقدم ببطء نحو الأفضل!
إنشاء طبقة شفافة عند التمرير
لنستوحي الإلهام من الوحدات المتنوعة والتدرجات اللونية الجميلة في هذا التصميم. وللقيام بذلك، سننشئ طبقة شفافة تظهر عند تمرير المؤشر عليها، ونخصص الأيقونة التي تظهر عند تمرير المؤشر عليها.
- لون أيقونة التكبير: # 323741
- تحوم لون التراكب: rgba (255 ، 201)
- أداة اختيار الأيقونات عند تمرير المؤشر: ابحث عن ورقة عمل وشاهد الأيقونة أعلاه
إضافة حدود لعناصر شبكة المحفظة باستخدام CSS مخصص
على غرار مثالنا الأول، سنستخدم الآن CSS لإضافة المزيد من الاهتمام إلى وحدة محفظة الأعمال القابلة للتصفية.
الآن، سنضيف إطارًا حول كل عنصر من عناصر شبكة عرض الأعمال. استخدم مقتطف CSS أدناه في قسم CSS المخصص ضمن إعدادات الصفحة لإضافة الإطار.
سنستخدم أيضًا "border" كفئة CSS لهذا الموديول.
- فئة CSS: الحدود
عرف المغلق
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
هنا لدينا الآن وحدة المحفظة القابلة للتصفية مع حدود جميلة - وحشو - حول كل عنصر من عناصر الشبكة.
تمت إضافة CSS إلى نمط حدود ترقيم الصفحات
بخلاف المثال السابق ، دعنا نضيف لونًا إلى حدود ترقيم الصفحات باستخدام CSS. هذا سوف يذهب أيضا في المنطقة الإعدادات> صفحة CSS مخصصة .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}تصفية نمط نص المعايير
على غرار نمط وحدة Divi Conference Portfolio الخاصة بنا ، نريد إضافة موسيقى الجاز إلى فلاتر فئتنا. مرة أخرى ، نريد الاستفادة من النمط الموجود بالفعل في النموذج المقدم إلينا.
إليكم كود CSS الذي سنضيفه في قسم CSS المخصص لدينا لاستهداف خلفية شريط التصفية وحركة المؤشر فوقه.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}مع هاتين الإضافتين الجديدتين إلى CSS المخصص لدينا ، هذا هو الشكل الذي تتشكل به وحدة الحافظة القابلة للتصفية الخاصة بنا.
ومع ذلك ، لاحظ كيف يتم فقد عامل تصفية الحافظة النشطة. دائمًا ما تحتوي على خلفية فاتحة مع نص أبيض عليها. دعنا نذهب إلى إعدادات الوحدة النمطية ونضيف بعض CSS لتغيير ذلك.
عرف المغلق
مرشح المحفظة النشط:
background: #ffffff;
color: #323741 !important;
قم بإزالة الرسوم المتحركة للوحدة
لتحسين تجربة المستخدم، سنزيل الرسوم المتحركة الافتراضية المصاحبة لوحدة "المحفظة القابلة للتصفية". وللقيام بذلك، سنحتاج أولاً إلى العودة إلى إعدادات الصفحة وإضافة CSS يستهدف عناصر شبكة المحفظة، ثم إزالة... انزلاق الانتقال هذا يحدث خارج الصندوق.
عرف المغلق
/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}اقرأ أيضا: Divi: كيفية تغيير عدد الأعمدة في مدونة
تغيير شبكة المحفظة من أربعة أعمدة إلى ثلاثة
ستكون أحدث إضافة لدينا في CSS هي تحويل وحدة الحافظة القابلة للتصفية من أربعة أعمدة إلى ثلاثة. هذا سيمنحنا مساحة أكبر لرؤية مشاريعنا.
أيضًا ، سنضيف سطرًا إضافيًا إلى وحدتنا. ستجد أيضًا أحدث مقتطفات CSS يمكنك استخدامها لتحويل أعمدتك.
عرف المغلق
سنضيف معرّف CSS لهذا المقتطف الأخير # شبكة ذات ثلاثة أعمدة إلى وحدتنا. سنحتفظ دائمًا بفئة CSS السابقة كما هي.
/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}
تحميل DIVI الآن !!!
الخاتمة
كما هو الحال مع معظم وحدات Divi، يمكن تطوير الإعدادات المتوفرة مع Divi باستخدام CSS. يُعدّ عرض أعمالك عنصرًا هامًا في إدارة الأعمال أو المدونات أو العلامات التجارية على الإنترنت.
لذا، من الضروري أن يكون لديك طريقة منظمة لعرض أعمالك. استفد من النصائح التي شاركناها اليوم لتنطلق في رحلتك التصميمية الخاصة باستخدام وحدة "محفظة الأعمال القابلة للتصفية" من Divi.
نأمل أن تضيف هذه التقنية مهارة تصميم مفيدة أخرى للمشاريع المستقبلية.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...