كيفية إنشاء جدول مستجيب مع التمرير الأفقي في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

قم بتنزيل Layout مجانًا

لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

بناء جدول مستجيب مع تمرير أفقي

الجزء 1: بناء أعمدة الجدول

بالنسبة لتصميم الجدول هذا ، سنقوم بإنشاء أعمدة الجدول الخاصة بنا باستخدام الصفوف. للقيام بذلك ، سنستخدم الخاصية المرنة (CSS المخصصة) لمحاذاة الصفوف أفقيًا مثل الأعمدة.

تحديث إعدادات القسم

قبل إضافة صف ، افتح إعدادات القسم للقسم العادي الافتراضي وأضف CSS المخصص التالي إلى العنصر الرئيسي:

display:flex;
overflow-y:scroll !important;

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

اضف سطر

الآن بعد أن أصبح قسم CSS في مكانه ، أنشئ صفًا مكونًا من عمود واحد داخل القسم.

إعدادات الصف

افتح إعدادات الصف وقم بتحديث ما يلي:

• عرض الحضيض: 1
• العرض: 100٪

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

ثم امنح الصف الحد الأيمن كما يلي:

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: #cccccc

ثم قم بتحديث المساحة المتروكة:

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

ضمن علامة التبويب خيارات متقدمة ، امنح الصف فئة CSS مخصصة على النحو التالي:

• فئة CSS: et-scroll-table-column

سنحتاج هذا للرمز المخصص لاحقًا.

تكوين عناصر الجدول مع وحدات النص

لإنشاء عناصر الجدول داخل كل صف (أو عمود جدول) ، سنستخدم وحدات نصية.

أضف وحدة نصية

محتوى النص

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

تصميم نصي

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• محاذاة النص: مركز
• الارتفاع: 80 بكسل

• عرض الحد الأيمن: 1 بكسل
• لون الحد السفلي: #cccccc

سيتطابق هذا الحد مع الحد الأيمن للصف.

نص CSS

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

display:flex;
align-items:center;
justify-content: center;

وحدة نص مكررة لمزيد من عناصر الجدول

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

تكوين عنوان عمود الجدول

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

ثم قم بتحديث لون الخلفية.

• الخلفية: # 333333

وتحديث تصميم النص كالتالي:

• وزن خط النص: غامق
• نمط خط النص: TT
• لون نص النص: #ffffff

قم بتكرار الصف لمزيد من أعمدة الجدول

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

الجزء 2: تصميم عمود الجدول اللاصق بعناوين رأسية

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

تحديث خلفية الصف

للقيام بذلك ، افتح إعدادات الصف الأول وقم بتحديث لون الخلفية:

• لون الخلفية: # 333333

تحديث وحدات النص

ثم افتح إعدادات وحدة النص العلوية التي تحتوي على العنوان. انقر بزر الماوس الأيمن فوق مجموعة خيارات النص وحدد Extend Text Styles. في النافذة المنبثقة Extend Styles ، اختر تمديد أنماط النص إلى All Texts عبر هذا العمود . ثم انقر فوق الزر "تمديد".

ثم حدد متعددًا جميع وحدات النص داخل الصف (اضغط باستمرار على ctrl (أو cmd) وانقر فوق كل واحدة) وقم بتحديث محتوى النص بالنص "Heading".

أضف الشعار

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

افتح الإعدادات الخاصة بأعلى وحدة نصية في الصف الأول.

ثم احذف النص الأساسي.

ثم أضف الشعار (تأكد من أنه حوالي 40 بكسل × 40 بكسل) كصورة خلفية. تأكد من ضبط حجم صورة الخلفية على "الحجم الفعلي".

جعل صف العناوين العمودية ثابتًا

لجعل الصف ثابتًا ، أضف CSS المخصص التالي إلى العنصر الرئيسي:

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(يمكنك تجاهل أي من أخطاء التعليمات البرمجية التي ستظهر باستخدام الخاصية sticky.)

للتأكد من بقاء الصف اللاصق مرئيًا فوق الصفوف الأخرى ، قم بتحديث فهرس Z:

• الفهرس Z: 13

الجزء 3: تحديث قسم الجدول

الآن بعد أن أصبحت عناصر الجدول في مكانها الصحيح ، يمكننا تحديث القسم (حاوية الجدول) بحجم معين وتجاوز.

افتح إعدادات القسم وأضف لون الخلفية:

• لون الخلفية: #ffeaef

ثم قم بتحديث الحجم والتباعد كما يلي:

• العرض: 100٪
• العرض الأقصى: 900 بكسل
• الهامش: 10vh أعلى
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

ثم أضف فئة CSS التالية:

• فئة CSS: et-scroll-table

وتحديث الفائض:

• الفائض الأفقي: التمرير
• الفائض العمودي: مخفي

(ملاحظة: لدينا بالفعل "overflow: scroll" مضاف إلى القسم كـ CSS مخصص بحيث تكون وظيفة التمرير سارية المفعول على المنشئ المرئي أيضًا.)

الجزء 4: إضافة أزرار التمرير الأفقية

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

إضافة قسم

للقيام بذلك ، قم بإنشاء قسم عادي جديد.

افتح إعدادات القسم وأخرج المساحة المتروكة الافتراضية:

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

اضف سطر

امنح القسم صفًا مكونًا من عمود واحد.

وقم بتحديث اعدادات الصف كالتالي:

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 900 بكسل
• المساحة المتروكة: 10 بكسل للأعلى ، 10 بكسل للأسفل ، 10 بكسل على اليمين

قم بإنشاء زر التمرير الأيسر

لإنشاء زر التمرير الأيسر ، أضف وحدة دعاية دعاية إلى العمود / الصف.

احذف العنوان الافتراضي ومحتوى النص الأساسي ، وأضف رمز سهم لليسار.

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• لون الايقونة: # 333333
• محاذاة الصورة / الرمز: المركز
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 40 بكسل
• عرض المحتوى: 100٪
• العرض: 50 بكسل

ثم امنح الدعاية المغلوطة فئة CSS:

• فئة CSS: et-scroll-left

يعد هذا ضروريًا لإضافة التمرير عند النقر فوق الوظيفة إلى الزر / الزر باستخدام الكود الخاص بنا لاحقًا.

قم بإنشاء زر التمرير الأيمن

لإنشاء زر التمرير الأيمن ، قم بتكرار الدعاية المغلوطة وتحديث الرمز باستخدام سهم لليمين.

ثم قم بتحديث فئة CSS:

• فئة CSS: et-scroll-right

لمحاذاة الزر أفقيًا ، افتح الإعداد الخاص بالعمود ، وأضف CSS المخصص التالي:

display:flex;
justify-content:flex-end;

الجزء الخامس: إضافة الرمز المخصص

بالنسبة للجزء الأخير من هذا البرنامج التعليمي ، نحتاج إلى إضافة CSS اللازمة لتعيين min-width للصفوف (والتي هي في الواقع أعمدة الجدول لدينا) ورمز JS المطلوب لإضافة وظيفة التمرير إلى الأزرار.

لإضافة الرمز ، قم بإضافة وحدة رمز نمطية تحت الكلمة الدعائية الثانية.

في مربع التعليمات البرمجية ، الصق CSS التالية مع التأكد من التفاف التعليمات البرمجية في علامات النمط الضرورية.

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

ضمن كود CSS ، الصق jQuery التالي مع التأكد من التفاف الكود بعلامات البرنامج النصي الضرورية.

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

تحديث عرض العمود

إذا كنت تريد تحديث min-width لكل عمود من أعمدة الجدول ، فيمكنك تغيير قيمة min-width في CSS.

تحديث عدد الأعمدة في التمرير

حاليًا ، سيؤدي النقر فوق الأزرار إلى التمرير أفقيًا (يسارًا أو يمينًا) بمسافة تساوي عرضين من العمودين. لتغيير عدد الأعمدة في التمرير ، قم بتحديث الرقم الأيمن الأقصى (حاليًا الرقم 2) في قيمة المتغير scrollByColumnNumber .

إضافة ألوان العمود المتناوبة

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

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

الآن تحقق من النتيجة النهائية!

هذا هو التصميم النهائي للجدول على سطح المكتب.

وهنا وظيفة التمرير الأفقي على سطح المكتب والجوال.

افكار اخيرة

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

لمزيد من المعلومات حول إنشاء جداول سريعة الاستجابة في WordPress ، تحقق من منشورنا حول كيفية إنشاء جداول متجاوبة في WordPress.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!