تغيير عدد الأعمدة في وحدة معرض Divi عند نقاط توقف مختلفة

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

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

سيعمل هذا الإعداد الافتراضي عادةً في معظم الحالات ، ولكن في بعض الأحيان قد تحتاج إلى مزيد من التحكم في عدد الأعمدة المعروضة على عروض متصفح معينة. لهذا السبب في هذا البرنامج التعليمي ، سأوضح لك كيفية إكمال عدد الأعمدة المعروضة في Divi Gallery Module ليس فقط لسطح المكتب ، ولكن أيضًا لثلاث نقاط توقف إضافية للمتصفح.

نظرة خاطفة

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

تحضير عناصر التصميم الخاصة بك

اشترك في قناتنا على اليوتيوب

في هذا البرنامج التعليمي ، ستحتاج إلى تثبيت سمة Divi وتنشيطها. ستحتاج أيضًا إلى إضافة 12 صورة إلى مكتبة الوسائط الخاصة بك لاستخدامها في بناء معرض الصور. بالنسبة لوحدة معرض Divi باستخدام تخطيط الشبكة ، يجب أن يكون حجم صورك حوالي 1500 بكسل × 800 بكسل إذا كنت تخطط لفتح صورك في شاشة العرض المبسط بحيث تملأ الشاشة بشكل جيد على معظم أجهزة سطح المكتب.

تنفيذ التباعد المخصص لوحدة معرض Divi

إنشاء صفحة جديدة

بالنسبة للمبتدئين ، قم بإنشاء صفحة جديدة ، وامنح صفحتك عنوانًا ، وانشر Divi Builder. حدد الخيار "Build from Scratch" ثم انشر صفحتك. ثم انقر للبناء على الواجهة الأمامية.

إنشاء معرض الصور

مع نشر Divi Builder ، امض قدمًا وأنشئ قسمًا عاديًا جديدًا بصف من عمود واحد وأضف وحدة Divi Gallery Module إلى الصف.

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

في إعدادات وحدة المعرض ، انقر فوق رمز علامة الجمع الرمادي لإضافة 12 صورة إلى المعرض.

ثم قم بتحديث إعدادات Divi Gallery Module كما يلي:

عدد الصور: 12
إظهار العنوان والتسمية التوضيحية: NO
إظهار ترقيم الصفحات: NO

اضبط إعدادات الصف لإنشاء معرض عرض كامل بدون عرض هامش التوثيق

لكي يعمل هيكل العمود الجديد لدينا ، فإن الشيء الرئيسي الذي نحتاج إلى القيام به هو التخلص من التباعد / الهامش الافتراضي الموجود بين صورنا في المعرض. للقيام بذلك ، كل ما نحتاج إلى القيام به هو ضبط عرض هامش التوثيق على 1. أيضًا ، كخيار ، يمكنك جعل الصف كامل العرض من أجل جعل معرض الصور يمتد بالعرض الكامل للمتصفح. للقيام بذلك ، افتح إعدادات الصف وقم بتحديث ما يلي:

اجعل هذا الصف بعرض كامل: نعم
عرض الحضيض: 1

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

كيف يستجيب المعرض لعروض المستعرض المختلفة افتراضيًا

كما ذكرنا سابقًا ، بشكل افتراضي ، ستعرض وحدة معرض Divi معرض الصور الخاص بك في أربعة أعمدة على سطح المكتب ثم تنقسم إلى ثلاثة أعمدة على الجهاز اللوحي وعمودين على الأجهزة اللوحية الصغيرة (والهواتف الكبيرة) وعمود واحد على الهواتف.

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

تعيين عدد محدد من الأعمدة لجميع أحجام المستعرضات

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

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

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

الآن سيحتفظ معرضك ببنية الأعمدة الثلاثة في جميع أحجام المتصفح.

إذا كنت تريد تنسيقًا مكونًا من عمودين لجميع أحجام المتصفح ، فكل ما عليك فعله هو تغيير قيمة خاصية العرض إلى 50٪.

إذا كنت تريد تخطيط عمود واحد ، فما عليك سوى تحديث العرض إلى 100٪.

هذا كل شيء.

ولكن ، إذا كنت ترغب في الحصول على مزيد من التحكم في عدد الأعمدة عند نقاط توقف معينة ، فتابع القراءة.

تغيير عدد الأعمدة لنقاط فصل معينة

إذا كنت ترغب في الحصول على تحكم كامل في عدد الأعمدة المعروضة عندما يصل المتصفح إلى نقاط توقف معينة ، فيمكننا استخدام بعض مقتطفات CSS مع استعلامات الوسائط التي تستهدف عروض متصفح معينة.

أضف فئة CSS إلى وحدة معرض Divi

قبل أن نضيف CSS المخصص ، نحتاج أولاً إلى منح وحدة المعرض الخاصة بنا فئة CSS مخصصة حتى نتمكن من الرجوع إلى هذه الفئة المحددة في CSS الخاصة بنا. سيؤدي هذا إلى التأكد من تطبيق css الخاص بنا على وحدة المعرض المحددة هذه فقط. للقيام بذلك ، افتح إعدادات وحدة المعرض وأضف فئة CSS التالية ضمن علامة التبويب خيارات متقدمة:

فئة CSS: عرض العمود

لا تنسَ إخراج css المخصص المضاف إلى عنصر المعرض في القسم السابق من هذه المقالة إذا قمت بإضافته.

بعد ذلك ، احفظ إعداداتك.

أضف CSS المخصص إلى إعدادات الصفحة

مع وجود فئة CSS في مكانها ، فأنت على استعداد لإضافة Custom CSS. افتح إعدادات الصفحة من خلال النقر على رمز الترس في شريط إعدادات الصفحة أسفل الصفحة (أو يمكنك استخدام اختصار لوحة المفاتيح "o").

ثم أضف CSS المخصص التالي ضمن علامة التبويب خيارات متقدمة.

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}

سيضيف CSS عددًا مخصصًا من الأعمدة إلى نقاط توقف معينة على النحو التالي:

سطح المكتب: 6 أعمدة
الجهاز اللوحي: 4 أعمدة
جهاز لوحي صغير وهاتف كبير: 3 أعمدة
الهاتف: عمودان

فهم وضبط CSS

بالنظر إلى CSS ، ستلاحظ أنه مقسم إلى أربعة استعلامات وسائط منفصلة. يضيف استعلام الوسائط الأعلى نمطًا إلى متصفحات سطح المكتب (المتصفحات ذات الحد الأدنى للعرض 981 بكسل). يضيف استعلام الوسائط الثاني نمطًا للمتصفحات حول حجم الجهاز اللوحي ، وما إلى ذلك.

داخل كل استعلام عن الوسائط ، فإن أهم CSS لا يجب مراعاته هو خاصية العرض. يعيّن هذا حجم كل عنصر من عناصر المعرض ويعين أيضًا عرض العمود للمعرض.

على سبيل المثال ، يعيّن أعلى استعلام عن الوسائط لسطح المكتب عرض عنصر المعرض على 16.66٪.

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

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

12 عمودًا: 8.33٪
10 أعمدة: 10٪
8 أعمدة: 12.5٪
6 أعمدة: 16.66٪
5 أعمدة: 20٪
4 أعمدة: 25٪
3 أعمدة: 33.33٪
عمودين: 50٪
عمود واحد: 100٪

النتيجة النهائية

هذه هي النتيجة النهائية على عروض المتصفح المختلفة.

سطح المكتب (6 أعمدة)

جهاز لوحي (4 أعمدة)

جهاز لوحي صغير وهاتف كبير (3 أعمدة)

الهاتف (عمودان)

افكار اخيرة

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

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

حتى في المرة القادمة ، أتطلع إلى الاستماع إليك في التعليقات.

هتافات!