هل ترغب في معرفة كيفية تخصيص عناصر الشبكة لوحدة الحافظة القابلة للتصفية الخاصة بـ Divi ؟ تابعنا في هذا البرنامج التعليمي ...
لديك منطقة على الخاص بك موقع انترنت لعرض عملك المهم. إذا كنت حلاقًا ، فيمكنك إنشاء العديد من المشاريع على ملف موقع انترنت WordPress لاظهار مفاهيمك. إذا كنت منشئ علامة تجارية ، فيمكنك استخدام محفظة لعرض عملك. علاوة على ذلك ، يمكننا المضي قدمًا وإضافة فئات مختلفة لمشاريعنا. هنا ماذا تفعل وحدة حافظة ديفي القابلة للتصفية؟ .
باستخدام هذه الوحدة ، يمكننا عرض عملنا الشاق بطريقة سهلة ومنظمة.
في البرنامج التعليمي اليوم ، سنخصص عناصر الشبكة الفردية لوحدة الحافظة القابلة للتصفية. سوف نستخدم تخطيطات من حزم التخطيط المجانية مؤتمر ديفي et مدرب اليوغا ديفي اون لاين مع كل عملية شراء لـ Divi .
كما هو الحال مع كل شيء عن Divi، لدينا القدرة على تخصيص هذه الوحدة لتناسب احتياجاتنا ورغباتنا. ومع ذلك ، قبل أن ندخل في التصميم ، دعنا نتعلم المزيد عن الوحدة.
ما هي وحدة محفظة Divi القابلة للتصفية؟
تعد المشاريع جزءًا من نوع منشور مخصص يعمل مثل المنشورات. يمكنك العثور عليها في لوحة معلومات WordPress الخاصة بك.
هذا هو المكان الذي ستنشئ فيه مشاريعك الفردية التي ستملأ وحدة الحافظة القابلة للتصفية. تعطينا الوحدة طريقتين لعرض مشاريعنا: في شكل شبكة ou بتنسيق كامل العرض. بالنسبة لنا ، سوف نستخدم تنسيق الشبكة ونخصصه.
مع وحدة الحافظة القابلة للتصفية ، سنتمكن من تقديم أحدث مشاريعنا. سيرى مستخدمو موقعنا شريط ترشيح أعلى شبكة محفظتنا. من هناك ، يمكنهم تصفح فئات المحفظة المختلفة التي نسمح بعرضها في الوحدة.
فيما يلي مثال لتكوين الشبكة للوحدة النمطية مع بعض المشاريع النموذجية:
المجالات التي يجب مراعاتها عند إنشاء محفظة Divi القابلة للتصفية
مثل كل تعديل Divi، تأتي وحدة الحافظة القابلة للتصفية مع عدد من الميزات التي يمكننا تخصيصها وفقًا لاحتياجاتنا ورغباتنا. وبالتالي ، يمكن تعديل معظم الميزات التي تأتي مع الوحدة في علامة التبويب تصميم من إعدادات الوحدة النمطية. يمكننا تعديل المناطق التالية والمزيد:
- عنوان المشروع
- فئة المشروع
- المقالة القصيرة
- تصفية النص
- صورة مصغرة عند المرور فوقها
- ترقيم الصفحات
هذه ليست قائمة كاملة ، ولم نبدأ حتى في الحديث عن كيفية إضافة CSS لتخصيصات أعمق إلى هذه الوحدة!
كيف سنخصص وحدة Divi القابلة للتصفية
كما ذكرنا سابقًا ، في هذا البرنامج التعليمي ، سنستخدم تخطيطين: مؤتمر ديفي et مدرب اليوغا ديفي اون لاين. أدناه يمكنك الحصول على نظرة عامة على العمل الذي سنقوم به خلال هذا البرنامج التعليمي.
ترتيب عناصر تخطيط "مؤتمر Divi"
ترتيب عناصر تخطيط "Divi Online Yoga Instructor"
يمكنك بسهولة تنزيل كلا التخطيطين من Divi باني.
لنبدأ الآن!
أنظر أيضا: Divi: اختر بين الشبكة والتصميم الكامل العرض لوحدة الحافظة القابلة للتصفية
تخصيص وحدة حافظة Divi القابلة للتصفية: "إصدار مؤتمر Divi"
أولاً ، سنحتاج إلى تثبيت قالب صفحة الحدث من حزمة Divi Conference Layout Pack. بعد إنشاء صفحتك الجديدة في WordPress وتفعيل Divi Builder ، سندخل مكتبة Divi.
أدخل مكتبة Divi Layout
انقر على الأيقونة « تحميل من المكتبة للدخول إلى مكتبة Divi Layout
حدد موقع التخطيط في مكتبة Divi Layout
باستخدام وظيفة البحث في مكتبة تخطيط Divi ، أبحث التصرف " صفحة حدث المؤتمر".
تثبيت التخطيط
بمجرد تحديد التخطيط ، انقر فوق " استخدم هذا التخطيط لتثبيت التخطيط في صفحتك.
إزالة واستبدال وحدة الصورة
سنقوم بإزالة وحدة الصورة الموضحة أدناه لإفساح المجال لوحدة الحافظة القابلة للتصفية التي سنقوم بتخصيصها. اضغط على " حذف بعد التمرير فوق الصورة لحذف الصورة.
أدخل وحدة محفظة Divi القابلة للتصفية
بعد إزالة وحدة الصورة ، يمكننا الآن إفساح المجال لوحدة الحافظة القابلة للتصفية. سنقوم بالضغط على أيقونة " إضافة وحدة (علامة الجمع الرمادية) ، ثم حدد الوحدة النمطية في مربع الوحدة النمطية الذي يظهر.
تحديد عدد المنشورات وتخطيط المحفظة
بشكل افتراضي ، ستعرض هذه الوحدة عملك في عمود واحد. ومع ذلك ، سوف نستخدم تخطيط الشبكة الذي يأتي افتراضيًا بأربعة أعمدة.
على هذا النحو ، نوصي باختيار مضاعفات 4 (4 ، 8 ، 12 ، 16 ، وما إلى ذلك) مثل عدد المنشورات لمحفظتك.
في هذا البرنامج التعليمي ، سنستخدم 12 مشروعًا في شبكتنا.
ابدأ في تخصيص محفظة Divi القابلة للتصفية: العنوان والنص التعريفي
الآن بعد أن تم عرض مشاريعنا في شبكة ، دعنا نربط بعض عناصر التصميم للقالب الذي اخترناه. في هذه الحالة ، سوف نستخدم النمط المتوفر مع حزمة Divi Conference Layout Pack في وحدتنا الجديدة.
نمط النص
- محاذاة النص: توسيط
- لون النص: غامق
نمط نص العنوان
- مستوى عنوان العنوان: 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.
للوصول إعدادات الصفحة ، انقر فوق النقاط الثلاث في منتصف الشاشة. ثم حدد رمز الترس والذي سيفتح إعدادات الصفحة. ثُم أنت انتقل إلى علامة التبويب Custom CSS وأدخل ما يلي لإضافة خلفية إلى نص المرشح.
عرف المغلق
في مقتطف CSS هذا ، نستهدف لون خلفية المرشح. نحن أيضًا نستهدف ونحدد حالة التمرير الخاصة به. بعد ذلك في جدول الأعمال ، دعنا نضيف المزيد من CSS إلى الوحدة النمطية ونبرز علامة التبويب Active Filter الخاصة بنا.
/* 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 Online Yoga Instructor"
كما هو الحال مع Divi Conference Edition ، ابحث عن التخطيط الخاص بك في حزمة تخطيط مدرب اليوغا على الإنترنت داخل Divi Builder.
سنستخدم تخطيط الصفحة المقصودة لهذا البرنامج التعليمي. قم بالتمرير لأسفل إلى قسم فئات القسم مع عنوان القسم جميع الفصول القادمة.
إدخال وحدة الحافظة القابلة للتصفية
من هنا ، سنزيل الصفوف التي تحتوي على الفئات. انقر فوق الأيقونة الأرجواني التي بها ثلاث نقاط . ثم، حدد عرض الإطار السلكي. أخيرًا ، ستقوم بحذف الصفين اللذين يحتويان على ثلاثة أعمدة.
ثم سنستبدلها بعمود واحد في الصف بالداخل. بعد ذلك ، سنضيف وحدة الحافظة القابلة للتصفية.
كما في المثال السابق ، سنستخدم تخطيط الشبكة لهذه الوحدة بمضاعفات 4 لعدد المنشورات.
الآن لنفعل شيئًا مختلفًا قليلاً بالمعلومات التي نقدمها على الخريطة.
في علامة التبويب وصف المنتج، انتقل إلى عناصر وإلغاء الاختيار إظهار الفئات . هذا يعني أن وحدة Portfolio ستعرض فقط اسم المشروع بدون اسم الفئة التي يوجد بها.
تخصيص نص معايير التصفية وعنوان المشروع ونص ترقيم الصفحات
دعنا نحدد قاعدة النمط لأجزاء النص في الوحدة الخاصة بنا. النص الأساسي لهذا التخطيط هو بلا المفتوحة والخط المستخدم للعناوين الرئيسية هو 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's Filterable Portfolio.
نأمل أن تضيف هذه التقنية مهارة تصميم مفيدة أخرى للمشاريع المستقبلية.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
