Divi: اختر بين الشبكة والتصميم الكامل العرض لوحدة الحافظة القابلة للتصفية

هل ترغب في استخدام وحدة الحافظة القابلة للتصفية الخاصة بـ Divi وأنت لا تعرف أي تخطيط تختار؟

الوحدة «محفظة قابلة للتصفية "من Divi يمنحك خيارين للتخطيط للاختيار من بينها. كلا الخيارين لهما مزايا ويعملان بشكل جيد للغاية لأغراض معينة. 

في هذه المقالة ، سنقارن عرض كامل وتخطيطات الشبكة لهذه الوحدة لمساعدتك على تحديد ما تحتاجه موقع انترنت. 

سنقوم أيضًا بتخصيص كلا التخطيطين لمعرفة كيفية عملهما في تخطيط واحد Divi.

دعونا نبدأ!

مسح

أولاً ، دعنا نرى ما سننشئه في هذا البرنامج التعليمي.

نسخة سطح المكتب من تخطيط الشبكة

تحميل DIVI الآن !!!

نسخة الهاتف من تخطيط الشبكة

إصدار سطح المكتب من تخطيط Fullwidth

اقرأ أيضا: Divi: كيفية استخدام تأثيرات الظل والتمرير لإنشاء محتوى تفاعلي

إصدار الهاتف من تخطيط Fullwidth

كيفية تغيير تخطيط وحدة الحافظة القابلة للتصفية

بشكل افتراضي ، تعرض وحدة "الحافظة القابلة للتصفية" التخطيط بالعرض الكامل. يمكنك تغيير التخطيط لعرض العناصر في الشبكة. أولاً ، افتح ملف معلمات الوحدة.

ثم حدد علامة التبويب التصميم. الخيار الأول هو تصميم. يحتوي على قائمة منسدلة مع عدد قليل من الخيارات. حدده للاختيار من بينها عرض كامل et شبكة.

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

مقارنة تخطيط وحدة الحافظة القابلة للتصفية

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

وإليك نظرة على مدى اختلافهما.

تخطيط بالعرض الكامل

يعرض العرض الكامل صورة كبيرة مع عنصر مجموعة يشغل العرض الكامل لمنطقة الحافظة. يتم عرض الصور في شكلها الأصلي ويتم توسيعها لتلائم العرض المتاح. 

لا يضيف مساحة كبيرة بين عناصر المحفظة. نوصي بتحديد عدد المشاركات على عدد قليل. يوضح المثال أدناه تخطيط العرض الكامل مع مشاركتين.

تخطيط الشبكة

يعرض تخطيط الشبكة ما يصل إلى 4 عناصر متتالية. يضيف مساحة أكبر بين العناصر. يتم اقتصاص الصور لإنشاء صور مصغرة بنفس الحجم بغض النظر عن حجم الصورة وشكلها.

لهذا ، قمنا بقصر الوحدة على عرض أربع مشاركات لإظهار ترقيم الصفحات.

متى يجب استخدام كل تخطيط لوحدة الحافظة القابلة للتصفية

كلا الترتيبات لها مزاياها. فيما يلي بعض النصائح حول وقت استخدام كل تخطيط.

تخطيط بالعرض الكامل

استخدم التخطيط Fullwidth عندما يكون لديك عدد قليل من العناصر لعرضها أو تريد التركيز على بعض العناصر. 

استخدم هذا التخطيط أيضًا عندما تريد إبراز الصور المميزة أو لفت الانتباه إليها.

تخطيط الشبكة

استخدم تخطيط الشبكة عندما تريد إظهار العديد من العناصر أو عندما تريد تخطيطًا لإظهار المزيد من العناصر في مساحة أصغر.

كيفية تخصيص تخطيطات وحدة الحافظة القابلة للتصفية

الآن بعد أن رأينا كيفية تحديد التخطيطات ، وكيفية عملها ، ومتى نستخدمها ، دعنا نرى كيفية تخصيص هذين التخطيطين. 

سنستخدم صفحة المحفظة الخاصة بـ حزمة تخطيط الرسام المجانية متوفر في Divi. ها هي الصفحة الأصلية.

سنقوم باستبدال الحافظة بوحدة الحافظة القابلة للتصفية واستخدام نفس الصور والعناوين. 

سننشئ نسختين: أحدهما بتخطيط كامل العرض والآخر بتخطيط شبكي.

كيفية تخصيص تخطيط الشبكة لوحدة الحافظة القابلة للتصفية

سنبدأ مع تخطيط الشبكة. سأستخدم الألوان والخطوط من التصميم الأصلي.

محتويات

افتحها معلمات الوحدة وأدخل 4 للحصول على عدد الوظائف. اختر الكل فئات التي تريد عرضها في الوحدة.

• عدد الوظائف: 4
• الفئات المتضمنة: حدد الفئات

توفير

ثم حدد علامة التبويب تصميم واختيار شبكة في خيارات التخطيط.

• التخطيط: الشبكة

صورة

انتقل إلى صورة واختر الخيار بوكس شادو. غيره لون الظل في rgba (0,0,0,0.05،XNUMX،XNUMX،XNUMX).

• ظل الصندوق: ^4ème خيار
• لون الظل: rgba (0,0,0,0.05،XNUMX،XNUMX،XNUMX)

نص

ثم قم بالتمرير لأسفل إلى نص وتعديل الاستقامة في المركز. يعمل هذا على توسيط عامل التصفية والعنوان والميتا والترقيم.

• محاذاة النص: الوسط

نص العنوان

ثم قم بالتمرير لأسفل إلى نص العنوان وقم بتغيير الإعدادات التالية.

• خط العنوان: Merriweather
• لون نص العنوان: # 000000

قم بتغيير حجم ملف شرطة عند 26 بكسل لأجهزة الكمبيوتر المكتبية ، و 20 بكسل للأجهزة اللوحية ، و 18 بكسل للهواتف.

• حجم نص العنوان: سطح المكتب 26 بكسل ، الجهاز اللوحي 20 بكسل ، الهاتف 18 بكسل

نص معيار التصفية

ثم قم بالتمرير لأسفل إلى نص معايير التصفية وقم بتغيير الإعدادات التالية:

• معايير التصفية:
  • الخط: مونتسيرات
  • وزن الخط: عريض
  • النمط: TT
  • لون النص: # fd6927
  • حجم النص: 12 بكسل

نص ميتا

ثم قم بالتمرير لأسفل إلى نص ميتا. غيره شرطة في مونتسيرات و COULEUR في # fd6927.

• حجم نص ميتا: مونتسيرات
• لون نص التعريف: # fd6927

تعيين حجم على 12 بكسل ، فإن ملفتباعد الأحرف على 2 بكسل و ارتفاع من الخط على 1,2 em.

• حجم النص: 12 بكسل
• تباعد حروف التعريف: 2 بكسل
• ارتفاع خط ميتا: 1,2 em

نص ترقيم الصفحات

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

• خط ترقيم الصفحات: مونتسيرات
• لون نص ترقيم الصفحات: # 000000

كيفية تخصيص وحدة الحافظة القابلة للتصفية في تخطيط كامل العرض

الآن ، لنقم بتهيئة الوحدة في تخطيط كامل العرض. 

سنستخدم نفس إشارات التصميم مثل تخطيط الشبكة ، لكننا سنجري بعض التغييرات التي تعمل بشكل جيد لهذا التخطيط. سنستخدم بعض CSS البسيطة لإجراء بعض التعديلات الطفيفة.

محتويات

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

• عدد الوظائف: 2
• الفئات المتضمنة: اختر الفئات

عناصر

انتقل إلى عناصر وتعطيل إظهار الفئات. اترك الآخرين ممكّنين. سيستمر تمكين الفئات لعامل التصفية ، لكنها لن تظهر مع العنوان.

• عرض الفئات: NO

توفير

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

• التخطيط: عرض كامل

صورة

ثم قم بالتمرير لأسفل إلى صورة . اختر الخيار مربع الظل وتغييره COULEUR الظل في rgba (0,0,0,0.05،XNUMX،XNUMX،XNUMX).

• ظل الصندوق: ^4ème خيار
• لون الظل: rgba (0,0,0,0.05،XNUMX،XNUMX،XNUMX)

نص

ثم قم بالتمرير لأسفل إلى نص. غير ال الاستقامة في المركز. سيتم توسيط المرشح والعنوان والصفحات الفاصلة للصفحات مع الصور.

• محاذاة النص: الوسط

نص العنوان

ثم قم بالتمرير لأسفل إلى نص العنوان . غيره شرطة إلى Merriweather وتغيير COULEUR باللون الأسود.

• خط العنوان: Merriweather
• لون نص العنوان: # 000000

قم بتغيير حجم ملف شرطة عند 40 بكسل لأجهزة الكمبيوتر المكتبية ، و 20 بكسل للأجهزة اللوحية ، و 18 بكسل للهواتف.

• حجم نص العنوان: سطح المكتب 40 بكسل ، الجهاز اللوحي 20 بكسل ، الهاتف 18 بكسل

نص معيار التصفية

ثم قم بالتمرير لأسفل إلى نص معايير التصفية وقم بتغيير الإعدادات التالية:

• معايير التصفية:
  • الخط: مونتسيرات
  • وزن الخط: عريض
  • النمط: TT
  • لون النص: # fd6927

نص ترقيم الصفحات

ثم قم بالتمرير لأسفل إلى نص ترقيم الصفحات. غيره شرطة في مونتسيرات ، قم بتغيير الوزن نصف جريئة وتعيين لون الخط في # fd6927. أغلق الوحدة واحفظ إعداداتك.

• خط ترقيم الصفحات: مونتسيرات
• اللون: # fd6927
• وزن الخط: شبه عريض

نص عنوان CSS

افتح علامة التبويب متقدم وانتقل إلى عنوان المحفظة. حدد أيقونة سطح المكتب. انسخ الكود أدناه لأحجام الشاشات المختلفة. أغلق الوحدة واحفظ إعداداتك.

عنوان المحفظة:

• الحاسوب

padding-bottom:40px

• الأجهزه اللوحيه

padding-bottom:30px

• الهاتف:

padding-bottom:20px

النتائج

نسخة سطح المكتب من تخطيط الشبكة

نسخة الهاتف من تخطيط الشبكة

تحميل DIVI الآن !!!

إصدار سطح المكتب من تخطيط العرض الكامل

أنظر أيضا: ديفي: كيفية تغيير التدرج اللوني للخلفية عند التمرير

نسخة الهاتف من تخطيط العرض الكامل

تحميل DIVI الآن !!!

وفي الختام

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

كل خيار له مزايا ويجب تصميمه بشكل مختلف للعمل مع ملفات موقع انترنت. فقط قم بإجراء بعض التعديلات للتأكد من أن الوحدة الخاصة بك تعمل بشكل جيد مع أي تخطيط Divi.

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

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

لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

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

...